/* Hilfe-Center - nutzt ausschliesslich die vorhandenen VDM-Tokens (site.css / vdm-styles.css),
   damit alle Schemata und die Density automatisch greifen. Alles unter .hilfe gescoped. */
.hilfe{max-width:1180px;margin:0 auto;padding:0 4px 60px;color:var(--vdm-text-strong)}
.hilfe a{color:inherit;text-decoration:none}
.hilfe .h-hero{margin-top:6px;border-radius:14px;overflow:hidden;position:relative;
  background:
    radial-gradient(900px 300px at 88% -40%, rgba(255,255,255,.16), transparent 60%),
    linear-gradient(135deg, var(--vdm-aktion), color-mix(in srgb, var(--vdm-aktion) 45%, #21378f));
  color:#fff;padding:30px clamp(20px,4vw,44px);box-shadow:0 18px 42px -24px rgba(0,0,0,.55)}
.hilfe .h-hero h1{margin:6px 0 6px;font-size:clamp(22px,3.2vw,30px);font-weight:600}
.hilfe .h-hero p{margin:0;max-width:60ch;opacity:.92;font-size:0.96667rem}
.hilfe .h-eyebrow{font-size:0.76667rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;opacity:.85;display:inline-flex;gap:6px;align-items:center}
.hilfe .h-searchbar{margin-top:16px;display:flex;gap:8px;align-items:center;background:var(--vdm-surface-card);border:1px solid var(--vdm-border-card);border-radius:var(--vdm-radius-card);padding:4px 4px 4px 13px;max-width:640px;box-shadow:0 12px 30px -16px rgba(0,0,0,.45)}
.hilfe .h-searchbar input{flex:1;border:0;outline:0;background:transparent;font-family:inherit;font-size:1rem;color:var(--vdm-text-strong);padding:10px 0}
.hilfe .h-searchbar input::placeholder{color:var(--vdm-text-muted);opacity:1}
.hilfe .h-searchbar svg{color:var(--vdm-text-muted);flex:none}
.hilfe .h-sec{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:28px 2px 12px;flex-wrap:wrap}
.hilfe .h-sec h2{font-size:1.2rem;font-weight:600;margin:0}
.hilfe .h-sec .h-sub{font-size:0.8rem;color:var(--vdm-text-muted)}
.hilfe .h-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:13px}
.hilfe .h-mod{display:flex;flex-direction:column;gap:10px;background:var(--vdm-surface-card);border:1px solid var(--vdm-border-card);
  border-radius:var(--vdm-radius-card);padding:16px;box-shadow:var(--vdm-shadow-card);text-align:left;transition:.14s;cursor:pointer}
.hilfe .h-mod:hover{transform:translateY(-2px);border-color:var(--vdm-border-strong,#c3cedb)}
.hilfe .h-mtop{display:flex;align-items:center;gap:10px}
.hilfe .h-mic{width:38px;height:38px;border-radius:var(--vdm-radius-card);display:grid;place-items:center;flex:none;background:color-mix(in srgb,var(--vdm-aktion) 12%,transparent);color:var(--vdm-aktion)}
.hilfe .h-mod h3{font-size:0.96667rem;font-weight:600;margin:0}
.hilfe .h-mod .h-path{font-size:0.73333rem;color:var(--vdm-text-muted);margin-top:2px}
.hilfe .h-mod p{margin:0;font-size:0.84rem;color:var(--vdm-text-muted);flex:1}
.hilfe .h-mfoot{display:flex;align-items:center;justify-content:space-between;padding-top:10px;border-top:1px solid var(--vdm-border-card)}
.hilfe .h-count{font-size:0.76667rem;color:var(--vdm-text-muted)}
.hilfe .h-badge{font-size:0.7rem;font-weight:600;padding:2px 7px;border-radius:16px}
.hilfe .h-badge.ok{background:var(--vdm-ok-weak);color:var(--vdm-ok)}
.hilfe .h-badge.soon{background:var(--vdm-warn-weak);color:var(--vdm-warn)}
.hilfe .h-badge.draft{background:var(--vdm-warn-weak);color:var(--vdm-warn)}
.hilfe .h-empty{grid-column:1/-1;border:1px dashed var(--vdm-border-strong,#c3cedb);border-radius:var(--vdm-radius-card);padding:24px;text-align:center;color:var(--vdm-text-muted);font-size:0.86667rem}
.hilfe .h-ic{width:16px;height:16px;flex:none}
/* article */
.hilfe .h-crumb{display:flex;gap:6px;align-items:center;font-size:0.83333rem;color:var(--vdm-text-muted);margin-top:8px}
.hilfe .h-crumb a:hover{color:var(--vdm-aktion)}
.hilfe .h-artgrid{display:grid;grid-template-columns:1fr 240px;gap:30px;margin-top:12px;align-items:start}
.hilfe .h-lede{color:var(--vdm-text-muted);font-size:0.96667rem;max-width:66ch;margin-top:6px}
.hilfe .h-tag{font-size:0.73333rem;font-weight:500;padding:2px 8px;border-radius:16px;background:var(--vdm-surface-card-muted);color:var(--vdm-text-muted);border:1px solid var(--vdm-border-card)}
.hilfe .h-metarow{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
.hilfe .h-asec{margin-top:24px}
.hilfe .h-asec h2{font-size:1.13333rem;font-weight:600;margin:22px 0 6px}
.hilfe .h-asec h2:first-child{margin-top:0}
.hilfe .h-asec p{color:var(--vdm-text-muted);max-width:66ch}
/* Styling fuer den aus der DB gelieferten Artikel-HTML-Koerper (ohne eigene Klassen). */
.hilfe .h-asec ul,.hilfe .h-asec ol{color:var(--vdm-text-muted);max-width:66ch;padding-left:20px}
.hilfe .h-asec li{margin:4px 0}
.hilfe .h-asec code{background:var(--vdm-surface-card-muted);border:1px solid var(--vdm-border-card);border-radius:4px;padding:1px 5px;font-size:0.8rem}
.hilfe .h-asec table{width:100%;border-collapse:collapse;font-size:0.85333rem;margin:12px 0;border:1px solid var(--vdm-border-card);border-radius:var(--vdm-radius-card);overflow:hidden;display:table}
.hilfe .h-asec thead th{text-align:left;background:var(--vdm-surface-card-muted);color:var(--vdm-text-muted);font-weight:600;font-size:0.7rem;text-transform:uppercase;letter-spacing:.03em;padding:8px 11px;border-bottom:1px solid var(--vdm-border-card)}
.hilfe .h-asec tbody td{padding:8px 11px;border-bottom:1px solid var(--vdm-border-card);color:var(--vdm-text-muted);vertical-align:top}
.hilfe .h-asec tbody tr:last-child td{border-bottom:0}
.hilfe .h-asec tbody td:first-child{color:var(--vdm-text-strong);font-weight:500}
.hilfe .h-asec img{max-width:100%;height:auto;border-radius:var(--vdm-radius-card);border:1px solid var(--vdm-border-card)}
.hilfe .h-media{display:grid;grid-template-columns:1.4fr 1fr;gap:12px;margin-top:12px}
.hilfe .h-mfig{margin:0}
.hilfe .h-media img{width:100%;height:auto;display:block;border-radius:var(--vdm-radius-card);border:1px solid var(--vdm-border-card)}
.hilfe .h-mfig figcaption{margin-top:6px;font-size:0.76667rem;color:var(--vdm-text-muted)}
.hilfe .h-mbox{position:relative;border:1px solid var(--vdm-border-card);border-radius:var(--vdm-radius-card);min-height:150px;display:grid;place-items:center;text-align:center;padding:16px;
  background:repeating-linear-gradient(45deg,var(--vdm-surface-card-muted),var(--vdm-surface-card-muted) 9px,transparent 9px,transparent 18px),var(--vdm-surface-card)}
.hilfe .h-mbox .h-bdg{position:absolute;top:8px;left:8px;font-size:0.66667rem;font-weight:600;text-transform:uppercase;letter-spacing:.03em;background:var(--vdm-surface-card);border:1px solid var(--vdm-border-card);color:var(--vdm-text-muted);padding:2px 7px;border-radius:16px}
.hilfe .h-mbox .h-play{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;margin:0 auto 8px;background:var(--vdm-aktion);color: var(--vdm-auf-akzent, #fff)}
.hilfe .h-mbox.vid .h-play{background:var(--vdm-danger)}
.hilfe .h-mbox .h-cap{font-size:0.76667rem;color:var(--vdm-text-muted)}
.hilfe .h-tblw{margin-top:12px;border:1px solid var(--vdm-border-card);border-radius:var(--vdm-radius-card);overflow:auto}
.hilfe table.h-tbl{width:100%;border-collapse:collapse;font-size:0.85333rem;min-width:460px}
.hilfe table.h-tbl th{text-align:left;background:var(--vdm-surface-card-muted);color:var(--vdm-text-muted);font-weight:600;font-size:0.7rem;text-transform:uppercase;letter-spacing:.03em;padding:8px 11px;border-bottom:1px solid var(--vdm-border-card)}
.hilfe table.h-tbl td{padding:8px 11px;border-bottom:1px solid var(--vdm-border-card);color:var(--vdm-text-muted);vertical-align:top}
.hilfe table.h-tbl tr:last-child td{border-bottom:0}
.hilfe table.h-tbl td:first-child{color:var(--vdm-text-strong);font-weight:500}
.hilfe details.h-ts{margin-top:9px;border:1px solid var(--vdm-border-card);border-radius:var(--vdm-radius-card);background:var(--vdm-surface-card);overflow:hidden}
.hilfe details.h-ts>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px;padding:11px 13px;font-size:0.9rem;font-weight:500;color:var(--vdm-text-strong)}
.hilfe details.h-ts>summary::-webkit-details-marker{display:none}
.hilfe details.h-ts>summary .h-sy{width:22px;height:22px;border-radius:var(--vdm-radius-card);background:var(--vdm-warn-weak);color:var(--vdm-warn);display:grid;place-items:center;flex:none}
.hilfe details.h-ts .h-tsa{padding:0 13px 13px 45px}
.hilfe details.h-ts .h-lb{font-size:0.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.03em;color:var(--vdm-text-muted);margin:9px 0 4px}
.hilfe details.h-ts ol{margin:0;padding-left:16px;font-size:0.85333rem;color:var(--vdm-text-muted)}
.hilfe .h-where{display:inline-flex;gap:6px;align-items:center;font-size:0.81333rem;background:color-mix(in srgb,var(--vdm-aktion) 10%,transparent);color:var(--vdm-aktion);border:1px solid color-mix(in srgb,var(--vdm-aktion) 22%,transparent);padding:5px 9px;border-radius:var(--vdm-radius-card);margin-top:2px}
.hilfe .h-rc{background:var(--vdm-surface-card);border:1px solid var(--vdm-border-card);border-radius:var(--vdm-radius-card);padding:13px;margin-bottom:14px}
.hilfe .h-rc h4{font-size:0.7rem;text-transform:uppercase;letter-spacing:.04em;color:var(--vdm-text-muted);font-weight:600;margin:0 0 9px}
.hilfe .h-place{display:flex;gap:8px;font-size:0.81333rem;color:var(--vdm-text-muted)}
.hilfe .h-rel a{display:flex;gap:7px;align-items:center;font-size:0.83333rem;color:var(--vdm-text-muted);padding:5px 0;border-bottom:1px solid var(--vdm-border-card)}
.hilfe .h-rel a:last-child{border-bottom:0}
.hilfe .h-rel a:hover{color:var(--vdm-aktion)}
/* Ueberschriften-Anker (Direktlink), Inhaltsverzeichnis, Feedback */
.hilfe .h-asec h2{scroll-margin-top:72px}
.hilfe .h-asec :is(h2,h3) .h-copy{opacity:0;color:var(--vdm-text-disabled);margin-left:6px;vertical-align:middle;display:inline-flex;transition:.15s}
.hilfe .h-asec :is(h2,h3):hover .h-copy{opacity:1}
.hilfe .h-asec :is(h2,h3) .h-copy:hover{color:var(--vdm-aktion)}
.hilfe .h-toc a{display:block;font-size:0.83333rem;color:var(--vdm-text-muted);padding:3px 0 3px 11px;border-left:2px solid var(--vdm-border-card)}
.hilfe .h-toc a:hover{color:var(--vdm-aktion);border-color:var(--vdm-aktion)}
.hilfe .h-foot{margin-top:28px;display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;align-items:center;background:var(--vdm-surface-card);border:1px solid var(--vdm-border-card);border-radius:var(--vdm-radius-card);padding:14px 16px}
.hilfe .h-fb{display:flex;align-items:center;gap:8px;font-size:0.9rem;color:var(--vdm-text-strong)}
.hilfe .h-hbtn{height:32px;padding:0 12px;border:1px solid var(--vdm-border-card);background:var(--vdm-surface-card-muted);border-radius:var(--vdm-radius-card);display:inline-flex;align-items:center;gap:6px;font-size:0.85333rem;color:var(--vdm-text-muted);font-weight:500;cursor:pointer;text-decoration:none}
.hilfe .h-hbtn:hover{border-color:var(--vdm-border-strong,#c3cedb);color:var(--vdm-text-strong)}
.hilfe .h-suggest:hover{border-color:var(--vdm-aktion);color:var(--vdm-aktion)}
.hilfe .h-fb-danke{display:inline-flex;align-items:center;gap:6px;font-size:0.86667rem;color:var(--vdm-ok)}
.hilfe .h-dl{width:100%;height:34px;border-radius:var(--vdm-radius-card);border:1px dashed var(--vdm-border-strong,#c3cedb);background:var(--vdm-surface-card-muted);color:var(--vdm-text-muted);font-weight:500;font-size:0.83333rem;display:inline-flex;align-items:center;justify-content:center;gap:7px;cursor:pointer}
.hilfe .h-dl:hover{border-color:var(--vdm-aktion);color:var(--vdm-aktion)}
.hilfe .h-dl.ok{border-style:solid;border-color:var(--vdm-ok);color:var(--vdm-ok)}
/* settings matrix */
.hilfe .h-card{background:var(--vdm-surface-card);border:1px solid var(--vdm-border-card);border-radius:var(--vdm-radius-card);box-shadow:var(--vdm-shadow-card);padding:18px;margin-top:12px}
.hilfe .h-note{font-size:0.81333rem;color:var(--vdm-text-muted);max-width:74ch}
.hilfe .h-matrix{margin-top:14px;border:1px solid var(--vdm-border-card);border-radius:var(--vdm-radius-card);overflow:auto}
.hilfe .h-matrix table{min-width:560px}
.hilfe .h-langrow{display:flex;gap:7px;flex-wrap:wrap;margin-top:10px}
.hilfe .h-langpill{display:inline-flex;gap:6px;align-items:center;border:1px solid var(--vdm-border-card);background:var(--vdm-surface-card-muted);border-radius:20px;padding:4px 10px;font-size:0.8rem;color:var(--vdm-text-muted)}
.hilfe .h-langpill.on{border-color:var(--vdm-aktion);color:var(--vdm-aktion);background:color-mix(in srgb,var(--vdm-aktion) 10%,transparent)}
/* Editor */
.hilfe .h-edit{display:grid;grid-template-columns:260px 1fr;gap:16px;margin-top:14px;align-items:start}
.hilfe .h-edit-liste .h-rc{padding:12px}
.hilfe .h-edit-item{width:100%;display:flex;align-items:center;justify-content:space-between;gap:8px;text-align:left;background:transparent;border:0;border-radius:var(--vdm-radius-card);padding:8px 9px;cursor:pointer;color:var(--vdm-text-muted)}
.hilfe .h-edit-item:hover{background:var(--vdm-surface-card-muted)}
.hilfe .h-edit-item.on{background:color-mix(in srgb,var(--vdm-aktion) 12%,transparent);color:var(--vdm-text-strong)}
.hilfe .h-edit-item-t{font-size:0.86667rem;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hilfe .h-edit-form{display:flex;flex-direction:column;gap:14px}
.hilfe .h-grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.hilfe .h-edit-form label,.hilfe .h-edit-form .h-full{display:flex;flex-direction:column;gap:5px;font-size:0.73333rem;font-weight:600;color:var(--vdm-text-muted);text-transform:uppercase;letter-spacing:.03em}
.hilfe .h-edit-form input,.hilfe .h-edit-form select,.hilfe .h-edit-form textarea{font-family:inherit;font-size:0.93333rem;font-weight:400;text-transform:none;letter-spacing:normal;color:var(--vdm-text-strong);background:var(--vdm-surface-card-muted);border:1px solid var(--vdm-border-card);border-radius:var(--vdm-radius-card);padding:8px 10px}
.hilfe .h-edit-form textarea{resize:vertical;line-height:1.5;font-family:ui-monospace,Consolas,monospace;font-size:0.83333rem}
/* Seiten (Routen) des Artikels: Hinweis in normaler Schrift statt Label-Stil (Kontrast in allen Schemata). */
.hilfe .h-edit-form .h-routen-hinweis{font-size:0.76667rem;font-weight:400;text-transform:none;letter-spacing:normal;color:color-mix(in srgb,var(--vdm-text-muted) 70%,var(--vdm-text-strong))}
.hilfe .h-edit-form input:focus,.hilfe .h-edit-form select:focus,.hilfe .h-edit-form textarea:focus{outline:2px solid var(--vdm-aktion);outline-offset:1px}
.hilfe .h-edit-actions{display:flex;flex-wrap:wrap;gap:9px;align-items:center;margin-top:2px}
.hilfe .h-primary{background:var(--vdm-aktion);color: var(--vdm-auf-akzent, #fff);border-color:var(--vdm-aktion)}
.hilfe .h-primary:hover{filter:brightness(1.06);color:#fff}
.hilfe .h-primary[disabled]{opacity:.6;cursor:default}
.hilfe .h-ok{border-color:var(--vdm-ok);color:var(--vdm-ok)}
.hilfe .h-hint{display:inline-flex;gap:7px;align-items:center;font-size:0.83333rem;color:var(--vdm-ok);background:var(--vdm-ok-weak);border:1px solid var(--vdm-ok);border-radius:var(--vdm-radius-card);padding:7px 11px;margin-bottom:10px}
.hilfe .h-upload{display:flex;align-items:center;gap:10px;margin-top:8px;font-size:0.86667rem;color:var(--vdm-text-muted)}
.hilfe .h-upload input[type=file]{font-size:0.83333rem;color:var(--vdm-text-muted)}
.hilfe .h-thumbs{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
.hilfe .h-thumbs img{width:120px;height:80px;object-fit:cover;border-radius:var(--vdm-radius-card);border:1px solid var(--vdm-border-card)}
@media (max-width:820px){.hilfe .h-edit{grid-template-columns:1fr}.hilfe .h-grid2{grid-template-columns:1fr}}
@media (max-width:860px){.hilfe .h-artgrid{grid-template-columns:1fr}.hilfe .h-media{grid-template-columns:1fr}}

/* WYSIWYG-Editor (DxHtmlEditor) im Hilfe-Redaktionsbereich */
.hilfe .h-editor-field{display:flex;flex-direction:column;gap:6px;margin-top:2px}
.hilfe .h-editor-label{font-size:0.8rem;font-weight:600;color:var(--vdm-text-muted)}
.hilfe .h-editor-hint{display:flex;align-items:center;gap:6px;font-size:0.76667rem;color:var(--vdm-text-muted)}
.hilfe .h-htmled{border:1px solid var(--vdm-border-card);border-radius:var(--vdm-radius-card);overflow:hidden;background:var(--vdm-surface-card);
  /* .h-editor-field ist zugleich .h-full und vererbt Label-Stil (uppercase, muted, 11px, 600)
     in den DxHtmlEditor. Hier fuer den gesamten Editor zuruecksetzen - <b>/<strong> bleiben fett. */
  text-transform:none;letter-spacing:normal;font-weight:400;font-size:0.93333rem;color:var(--vdm-text-strong)}
.hilfe .h-htmled .dxbl-htmleditor-content img{max-width:100%;height:auto}

/* Verwaltung: Kopf-Aktionen */
.hilfe .h-sec-actions{display:flex;gap:8px;align-items:center}

/* Reader: optionale Nein-Notiz */
.hilfe .h-fb-note{display:flex;flex-direction:column;gap:6px;width:100%}
.hilfe .h-fb-note textarea{width:100%;resize:vertical;background:var(--vdm-surface-card);color:var(--vdm-text-strong);border:1px solid var(--vdm-border-card);border-radius:var(--vdm-radius-card);padding:8px 10px;font-family:var(--vdm-font-family);font-size:0.86667rem}
.hilfe .h-fb-note-actions{display:flex;gap:10px;align-items:center}

/* Feedback-Panel (Verwaltung) */
.hilfe .h-fbcard .h-fbstat{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.hilfe .h-fbquote{display:flex;flex-direction:column;line-height:1.15;padding:8px 14px;border-radius:var(--vdm-radius-card);border:1px solid var(--vdm-border-card)}
.hilfe .h-fbquote strong{font-size:1.46667rem}
.hilfe .h-fbquote span{font-size:0.73333rem;color:var(--vdm-text-muted)}
.hilfe .h-fbquote.ok{background:color-mix(in srgb, #22c55e 12%, transparent)}
.hilfe .h-fbquote.warn{background:color-mix(in srgb, #f59e0b 14%, transparent)}
.hilfe .h-fbquote.bad{background:color-mix(in srgb, #ef4444 14%, transparent)}
.hilfe .h-fbzahlen{display:flex;gap:14px;align-items:center;font-size:0.86667rem;color:var(--vdm-text-strong)}
.hilfe .h-fbzahlen span{display:inline-flex;gap:5px;align-items:center}
.hilfe .h-fbnotes{margin-top:12px;border-top:1px solid var(--vdm-border-card);padding-top:10px}
.hilfe .h-fbnote{display:flex;justify-content:space-between;gap:12px;padding:5px 0;border-bottom:1px dashed var(--vdm-border-card)}
.hilfe .h-fbnote:last-child{border-bottom:0}
.hilfe .h-fbnote-t{color:var(--vdm-text-strong);font-size:0.85333rem}

/* Feedback-Uebersicht (Tabelle) */
.hilfe .h-fbtable{width:100%;border-collapse:collapse;font-size:0.86667rem}
.hilfe .h-fbtable thead th{text-align:left;color:var(--vdm-text-muted);font-weight:600;font-size:0.7rem;text-transform:uppercase;letter-spacing:.03em;padding:8px 11px;border-bottom:1px solid var(--vdm-border-card)}
.hilfe .h-fbtable th.num,.hilfe .h-fbtable td.num{text-align:right}
.hilfe .h-fbtable tbody td{padding:9px 11px;border-bottom:1px solid var(--vdm-border-card);color:var(--vdm-text-strong);vertical-align:middle}
.hilfe .h-fbtable tbody tr:hover{background:var(--vdm-surface-card-muted)}
.hilfe .h-fbtable a{color:var(--vdm-aktion);text-decoration:none}
.hilfe .h-fbpill{display:inline-block;min-width:44px;text-align:center;padding:2px 8px;border-radius:16px;font-weight:600;font-size:0.8rem;border:1px solid var(--vdm-border-card)}
.hilfe .h-fbpill.ok{background:color-mix(in srgb, #22c55e 15%, transparent)}
.hilfe .h-fbpill.warn{background:color-mix(in srgb, #f59e0b 16%, transparent)}
.hilfe .h-fbpill.bad{background:color-mix(in srgb, #ef4444 16%, transparent)}

/* Artikelseite: rechte Spalte auf dem Desktop mitscrollen (sticky) */
.hilfe .h-rail{position:sticky;top:16px;align-self:start;max-height:calc(100vh - 32px);overflow-y:auto}
/* Mobiles/Tablet-Inhaltsverzeichnis ganz oben (auf dem Desktop ausgeblendet) */
.hilfe .h-toc-m{display:none;background:var(--vdm-surface-card);border:1px solid var(--vdm-border-card);border-radius:var(--vdm-radius-card);padding:10px 13px;margin-top:12px}
.hilfe .h-toc-m>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:8px;font-size:0.8rem;font-weight:600;color:var(--vdm-text-strong)}
.hilfe .h-toc-m>summary::-webkit-details-marker{display:none}
.hilfe .h-toc-m[open]>summary{margin-bottom:8px;border-bottom:1px solid var(--vdm-border-card);padding-bottom:8px}
@media (max-width:860px){
  .hilfe .h-rail{position:static;max-height:none;overflow:visible}
  .hilfe .h-toc-rail{display:none}
  .hilfe .h-toc-m{display:block}
}

/* Bearbeiten-Button auf der Artikelseite (rechts in der Meta-Zeile) */
.hilfe .h-metaedit{margin-left:auto}
/* Suche in der Verwaltungs-Artikelliste */
.hilfe .h-edit-suche{display:flex;align-items:center;gap:7px;background:var(--vdm-surface-card);border:1px solid var(--vdm-border-card);border-radius:var(--vdm-radius-card);padding:5px 9px;margin:2px 0 10px}
.hilfe .h-edit-suche svg{color:var(--vdm-text-muted);flex:none}
.hilfe .h-edit-suche input{border:0;background:transparent;outline:none;width:100%;font-size:0.83333rem;color:var(--vdm-text-strong);font-family:var(--vdm-font-family)}
.hilfe .h-edit-suche input::placeholder{color:var(--vdm-text-muted);opacity:1}

/* Löschen (Verwaltung) */
.hilfe .h-hbtn.h-danger{border-color:#ef4444;color:#ef4444}
.hilfe .h-hbtn.h-danger:hover{background:color-mix(in srgb, #ef4444 12%, transparent)}
.hilfe .h-loesch-confirm{display:inline-flex;align-items:center;gap:8px;margin-left:auto;flex-wrap:wrap}

/* Icon-Auswahl im Editor */
.hilfe .h-iconpick{display:flex;flex-wrap:wrap;gap:6px}
.hilfe .h-iconopt{width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--vdm-border-card);border-radius:var(--vdm-radius-card);background:var(--vdm-surface-card);color:var(--vdm-text-muted);cursor:pointer;padding:0}
.hilfe .h-iconopt:hover{color:var(--vdm-text-strong);border-color:var(--vdm-aktion)}
.hilfe .h-iconopt.on{border-color:var(--vdm-aktion);color:var(--vdm-aktion);box-shadow:0 0 0 1px var(--vdm-aktion) inset}
.hilfe .h-iconopt-auto{font-size:0.8rem;font-weight:700}

/* ============================================================
   Hilfe-Drawer (kontextbezogene In-App-Hilfe, global auf allen
   Seiten). Nicht unter .hilfe gescoped. Nutzt die VDM-Tokens,
   daher automatisch theme-fest. Chat-FAB liegt bei z-index 1200
   rechts unten (56px); das Hilfe-Widget stapelt sich darueber.
   ============================================================ */
.vhd-fab{position:fixed;right:24px;bottom:88px;z-index:1150;width:44px;height:44px;border-radius:50%;
  display:grid;place-items:center;cursor:pointer;padding:0;
  background:var(--vdm-surface-card);color:var(--vdm-aktion);
  border:1px solid var(--vdm-border-card);box-shadow:var(--vdm-shadow-card,0 8px 22px -10px rgba(0,0,0,.4));
  opacity:.55;transition:opacity .18s,transform .18s,box-shadow .18s}
.vhd-fab:hover{opacity:1;transform:translateY(-1px)}
.vhd-fab.dim{opacity:.12}
.vhd-fab.hidden{display:none}
.vhd-fab svg{width:22px;height:22px}

.vhd{position:fixed;right:20px;bottom:20px;z-index:1300;width:390px;height:min(640px,calc(100vh - 40px));
  display:none;flex-direction:column;overflow:hidden;
  background:var(--vdm-surface-card);color:var(--vdm-text-strong);
  border:1px solid var(--vdm-border-card);border-radius:16px;
  box-shadow:0 26px 60px -22px rgba(0,0,0,.55)}
.vhd.open{display:flex;animation:vhdIn .16s ease-out}
.vhd.big{top:16px;bottom:16px;right:16px;height:auto;width:min(820px,calc(100vw - 40px))}
@keyframes vhdIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

.vhd-head{background:linear-gradient(135deg,var(--vdm-aktion),color-mix(in srgb,var(--vdm-aktion) 55%,#21378f));
  color:#fff;padding:14px 16px;flex:none}
.vhd-head-row{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.vhd-title{font-size:1.06667rem;font-weight:600;line-height:1.2}
.vhd-sub{font-size:0.8rem;opacity:.9;margin-top:2px}
.vhd-tools{display:flex;gap:4px;flex:none}
.vhd-ic{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;cursor:pointer;padding:0;
  background:rgba(255,255,255,.14);border:0;color:#fff;transition:.14s}
.vhd-ic:hover{background:rgba(255,255,255,.28)}
.vhd-ic svg{width:16px;height:16px}

.vhd-body{flex:1;overflow-y:auto;padding:14px 14px 18px}
/* Nachrichten-Tab: der eingebettete Chat füllt den Bereich randlos. */
.vhd-body.vhd-body-chat{padding:0;overflow:hidden;display:flex;flex-direction:column}
.vhd-chatwrap{flex:1;min-height:0;display:flex}
.vhd-chatwrap[hidden]{display:none}
.vhd-hi{font-size:1.26667rem;font-weight:600;margin:2px 0 2px}
.vhd-hisub{font-size:0.86667rem;color:var(--vdm-text-muted);margin-bottom:12px}
.vhd-lbl{font-size:0.7rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--vdm-text-muted);margin:16px 2px 7px}
.vhd-ctx{display:flex;gap:6px;align-items:center;font-size:0.8rem;color:var(--vdm-text-muted);margin:2px 2px 8px}
.vhd-ctx b{color:var(--vdm-text-strong)}

.vhd-row{display:flex;align-items:center;gap:11px;width:100%;text-align:left;cursor:pointer;
  background:var(--vdm-surface-card);border:1px solid var(--vdm-border-card);border-radius:12px;
  padding:11px 12px;margin-bottom:8px;transition:.13s}
.vhd-row:hover{border-color:var(--vdm-aktion);transform:translateY(-1px)}
.vhd-row-ic{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;flex:none;
  background:color-mix(in srgb,var(--vdm-aktion) 12%,transparent);color:var(--vdm-aktion)}
.vhd-row-tx{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1}
.vhd-row-tx b{font-size:0.9rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vhd-row-tx span{font-size:0.76667rem;color:var(--vdm-text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vhd-row-ar{color:var(--vdm-text-disabled);font-size:1.2rem;flex:none}

.vhd-search{display:flex;gap:8px;align-items:center;background:var(--vdm-surface-card-muted);
  border:1px solid var(--vdm-border-card);border-radius:11px;padding:2px 10px;margin-bottom:12px}
.vhd-search svg{color:var(--vdm-text-muted);flex:none}
.vhd-search input{flex:1;border:0;outline:0;background:transparent;font-family:inherit;font-size:0.93333rem;
  color:var(--vdm-text-strong);padding:9px 0}
.vhd-search input::placeholder{color:var(--vdm-text-muted)}
.vhd-note{border:1px dashed var(--vdm-border-strong,#c3cedb);border-radius:12px;padding:18px;text-align:center;
  color:var(--vdm-text-muted);font-size:0.83333rem}

.vhd-empty{display:flex;flex-direction:column;gap:12px;align-items:flex-start;padding:8px 2px}
.vhd-empty p{margin:0;font-size:0.86667rem;color:var(--vdm-text-muted)}
.vhd-btn{background:var(--vdm-aktion);color: var(--vdm-auf-akzent, #fff);border:0;border-radius:9px;padding:9px 15px;
  font-family:inherit;font-size:0.86667rem;font-weight:600;cursor:pointer;transition:.13s}
.vhd-btn:hover{filter:brightness(1.05)}

.vhd-back{background:none;border:0;color:var(--vdm-text-muted);font-family:inherit;font-size:0.83333rem;
  cursor:pointer;padding:2px 0;margin-bottom:6px}
.vhd-back:hover{color:var(--vdm-aktion)}
.vhd-art h3{font-size:1.13333rem;font-weight:600;margin:2px 0 3px}
.vhd-art-meta{font-size:0.76667rem;color:var(--vdm-text-muted);margin-bottom:8px}
.vhd .h-asec{margin-top:6px}
.vhd .h-asec h2{font-size:1rem;font-weight:600;margin:16px 0 5px}
.vhd .h-asec h2:first-child{margin-top:0}
.vhd .h-asec p,.vhd .h-asec ul,.vhd .h-asec ol{color:var(--vdm-text-muted);font-size:0.86667rem;max-width:none}
.vhd .h-asec ul,.vhd .h-asec ol{padding-left:19px}
.vhd .h-asec li{margin:3px 0}
.vhd .h-asec code{background:var(--vdm-surface-card-muted);border:1px solid var(--vdm-border-card);border-radius:4px;padding:1px 5px;font-size:0.8rem}
.vhd .h-asec img{max-width:100%;height:auto;border-radius:var(--vdm-radius-card);border:1px solid var(--vdm-border-card)}
.vhd .h-asec table{width:100%;border-collapse:collapse;font-size:0.8rem;margin:10px 0;border:1px solid var(--vdm-border-card);border-radius:8px;overflow:hidden;display:table}
.vhd .h-asec th,.vhd .h-asec td{padding:7px 9px;border-bottom:1px solid var(--vdm-border-card);text-align:left;color:var(--vdm-text-muted);vertical-align:top}

.vhd-fb{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:16px;padding-top:12px;
  border-top:1px solid var(--vdm-border-card);font-size:0.83333rem;color:var(--vdm-text-muted)}
.vhd-fb textarea{flex:1 1 100%;font-family:inherit;font-size:0.83333rem;border:1px solid var(--vdm-border-card);
  border-radius:9px;padding:8px 10px;background:var(--vdm-surface-card-muted);color:var(--vdm-text-strong);resize:vertical}
.vhd-fbbtn{display:inline-flex;align-items:center;gap:5px;background:var(--vdm-surface-card);
  border:1px solid var(--vdm-border-card);border-radius:8px;padding:6px 11px;font-family:inherit;font-size:0.83333rem;
  color:var(--vdm-text-strong);cursor:pointer;transition:.13s}
.vhd-fbbtn:hover{border-color:var(--vdm-aktion);color:var(--vdm-aktion)}
.vhd-fb-danke{display:inline-flex;align-items:center;gap:5px;color:var(--vdm-ok);font-weight:600}
.vhd-full-inline{display:inline-flex;margin-top:14px;background:none;border:0;color:var(--vdm-aktion);
  font-family:inherit;font-size:0.86667rem;font-weight:600;cursor:pointer;padding:0}
.vhd-full-inline:hover{text-decoration:underline}

.vhd-tabs{flex:none;display:flex;border-top:1px solid var(--vdm-border-card);background:var(--vdm-surface-card)}
.vhd-tabs button{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:9px 4px 8px;
  background:none;border:0;cursor:pointer;font-family:inherit;font-size:0.7rem;font-weight:600;
  color:var(--vdm-text-muted);transition:.13s}
.vhd-tabs button svg{width:19px;height:19px}
.vhd-tabs button:hover{color:var(--vdm-text-strong)}
.vhd-tabs button.on{color:var(--vdm-aktion)}

@media (max-width:560px){
  .vhd{left:8px;right:8px;bottom:8px;width:auto;height:min(660px,calc(100vh - 16px))}
  .vhd.big{top:8px;left:8px;right:8px;bottom:8px;width:auto}
  .vhd-fab{right:16px;bottom:82px}
}

/* Ungelesen-Anzeiger im Hilfe-Drawer (ersetzt den ausgeblendeten Chat-Bubble). */
.vhd-fab-dot{position:absolute;top:6px;right:6px;width:10px;height:10px;border-radius:50%;
  background:var(--vdm-danger,#dc2626);border:2px solid var(--vdm-surface-card)}
.vhd-count{flex:none;min-width:18px;height:18px;padding:0 5px;border-radius:9px;
  background:var(--vdm-danger,#dc2626);color:#fff;font-size:0.7rem;font-weight:700;
  display:inline-grid;place-items:center}
.vhd-tab-ic{position:relative;display:inline-flex}
.vhd-tab-dot{position:absolute;top:-3px;right:-5px;width:9px;height:9px;border-radius:50%;
  background:var(--vdm-danger,#dc2626);border:2px solid var(--vdm-surface-card)}

/* Aufmerksamkeit bei Ungelesenem: FAB pulsiert intensiv; die Nachrichten-Zeile bekommt
   einen rotierenden Glow-Rahmen (gleicher Effekt wie der Button-Hover, aber endlos).
   Theme-robust ueber --btn-glow (je Schema gesetzt), daher hell UND dunkel korrekt. */
.vhd-fab.hat-neu{
  opacity:1;
  border-color:var(--vdm-danger,#dc2626);
  animation:vhdFabPuls 1.05s ease-out infinite;
}
.vhd-fab.hat-neu.dim{opacity:1}
.vhd-fab.hat-neu:hover{opacity:1}
@keyframes vhdFabPuls{
  0%{
    box-shadow:0 0 0 0 color-mix(in srgb,var(--vdm-danger,#dc2626) 62%,transparent),
               0 8px 22px -10px rgba(0,0,0,.45);
    transform:scale(1);
  }
  70%{
    box-shadow:0 0 0 18px color-mix(in srgb,var(--vdm-danger,#dc2626) 0%,transparent),
               0 8px 22px -10px rgba(0,0,0,.45);
    transform:scale(1.12);
  }
  100%{
    box-shadow:0 0 0 0 color-mix(in srgb,var(--vdm-danger,#dc2626) 0%,transparent),
               0 8px 22px -10px rgba(0,0,0,.45);
    transform:scale(1);
  }
}

/* Rotierender Glow-Rahmen (Muster wie .btn::before, endlos). */
.vhd-row-neu{position:relative}
.vhd-row-neu::before{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;z-index:2;pointer-events:none;
  background:conic-gradient(from var(--btn-angle),
    transparent 0deg, var(--btn-glow, var(--vdm-aktion)) 30deg, transparent 74deg, transparent 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  animation:btnSpin 2.4s linear infinite;
}

@media (prefers-reduced-motion: reduce){
  .vhd-fab.hat-neu{animation:none}
  .vhd-row-neu::before{animation:none}
}

/* Dokumente-Tab im Drawer. Nutzt die vorhandenen .vhd-row-Muster; nur der externe Verweis
   und das Formatkuerzel brauchen etwas Eigenes. Entwurf: docs/ui/dokumente-mockup/Widget.dc.html */
.vhd-row-extern{background:var(--vdm-warn-bg);border-color:var(--vdm-warn-border)}
.vhd-row-extern .vhd-row-tx span{color:var(--vdm-warn-text)}
.vhd-row-fmt{flex:none;align-self:center;font-size:0.66667rem;line-height:14px;font-weight:600;
  letter-spacing:.02em;border-radius:3px;padding:2px 5px;border:1px solid var(--vdm-border-card);
  background:var(--vdm-surface-muted);color:var(--vdm-icon-muted)}

/* Die Dokumentzeile ist ein Container, kein Button: Ansehen und Laden sind zwei getrennte
   Aktionen. Deshalb kein Cursor und kein Anheben beim Ueberfahren der Zeile selbst. */
.vhd-row-dok{cursor:default;align-items:flex-start}
.vhd-row-dok:hover{border-color:var(--vdm-border-card);transform:none}
/* Titel in Zeile eins ueber die volle Breite, Meta und Aktionen in Zeile zwei. */
.vhd-dok-tx{display:flex;flex-direction:column;gap:4px;min-width:0;flex:1}
.vhd-dok-tx>b{font-size:0.9rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vhd-dok-zeile2{display:flex;align-items:center;gap:8px;min-width:0}
.vhd-dok-sub{flex:1;min-width:0;font-size:0.76667rem;color:var(--vdm-text-muted);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vhd-row-extern .vhd-dok-sub{color:var(--vdm-warn-text)}
.vhd-dok-akt{flex:none;margin-left:auto;display:flex;align-items:center;gap:4px}
.vhd-dok-btn{flex:none;width:24px;height:24px;display:grid;place-items:center;cursor:pointer;
  border:1px solid var(--vdm-border-card);border-radius:6px;background:var(--vdm-surface-card);
  color:var(--vdm-icon-muted);font-size:0.86667rem;line-height:1;padding:0;transition:.13s}
.vhd-dok-btn:hover:not(:disabled){border-color:var(--vdm-aktion);color:var(--vdm-aktion)}
.vhd-dok-btn:disabled{cursor:not-allowed;opacity:.45}

/* Dokument verlinken im Hilfe-Editor (Ausbaustufe 9). Nutzt die vorhandenen Karten- und
   Buttonmuster; nur die Auswahlzeile braucht etwas Eigenes. */
.hilfe .h-hbtn.h-klein{height:26px;padding:0 9px;font-size:0.8rem}
.hilfe .h-ok-note{color:var(--vdm-ok-text,var(--vdm-accent-green))}
/* .h-editor-field vererbt text-transform:uppercase fuer seine Feldbeschriftung - fuer den
   erklaerenden Absatz hier muss das zurueckgesetzt werden. */
.hilfe .h-dokverlink,.hilfe .h-dokverlink *{text-transform:none;letter-spacing:normal}
.hilfe .h-dokverlink{margin-top:10px;border:1px solid var(--vdm-border-card);
  border-radius:var(--vdm-radius-card);background:var(--vdm-surface-card-muted)}
.hilfe .h-dokverlink-kopf{width:100%;display:flex;align-items:center;gap:8px;cursor:pointer;
  padding:9px 12px;border:0;background:transparent;font-family:inherit;font-size:0.85333rem;
  font-weight:600;color:var(--vdm-text-strong);text-align:left}
.hilfe .h-dokverlink-pfeil{margin-left:auto;color:var(--vdm-text-muted);font-size:0.73333rem}
.hilfe .h-dokverlink-body{padding:0 12px 12px;display:flex;flex-direction:column;gap:8px}
.hilfe .h-dokverlink-suche{height:32px;padding:0 10px;border:1px solid var(--vdm-border-card);
  border-radius:var(--vdm-radius-card);background:var(--vdm-surface-card);font-family:inherit;
  font-size:0.86667rem;color:var(--vdm-text-strong)}
.hilfe .h-dokverlink-zeile{display:flex;align-items:center;gap:8px;padding:7px 9px;
  border:1px solid var(--vdm-border-card);border-radius:var(--vdm-radius-card);
  background:var(--vdm-surface-card)}
.hilfe .h-dokverlink-tx{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1}
.hilfe .h-dokverlink-tx b{font-size:0.86667rem;font-weight:600;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
.hilfe .h-dokverlink-tx span{font-size:0.76667rem;color:var(--vdm-text-muted);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}

/* Hilfe verwalten: Liste-Filter, Ergebniszahl, reichere Zeilen, Sprach-Tabs im Editor. */
.hilfe .h-edit-filter{display:flex;gap:6px;margin:8px 0 2px}
.hilfe .h-edit-filter select{flex:1;min-width:0;font-family:inherit;font-size:0.8rem;color:var(--vdm-text-strong);
  background:var(--vdm-surface-card-muted);border:1px solid var(--vdm-border-card);border-radius:var(--vdm-radius-card);padding:6px 8px}
.hilfe .h-edit-count{font-size:0.7rem;color:var(--vdm-text-muted);text-align:right;margin:1px 2px 6px}

.hilfe .h-edit-item{align-items:center}
.hilfe .h-edit-item-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.hilfe .h-edit-item-sub{display:flex;align-items:center;gap:8px;font-size:0.7rem;color:var(--vdm-text-muted);min-width:0}
.hilfe .h-edit-item-mod{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0}
.hilfe .h-edit-item-langs{display:inline-flex;gap:3px;flex:none}
.hilfe .h-lang-chip{font-size:0.6rem;font-weight:700;letter-spacing:.02em;color:var(--vdm-text-muted);
  background:var(--vdm-surface-card-muted);border:1px solid var(--vdm-border-card);border-radius:4px;padding:0 4px;line-height:14px}
.hilfe .h-edit-item.on .h-lang-chip{border-color:color-mix(in srgb,var(--vdm-aktion) 40%,var(--vdm-border-card))}

/* Sprach-Tabs im Editor (Uebersetzen im selben Artikel) */
.hilfe .h-lang{display:flex;flex-direction:column;gap:5px}
.hilfe .h-lang-lbl{font-size:0.73333rem;font-weight:600;color:var(--vdm-text-muted);text-transform:uppercase;letter-spacing:.03em}
.hilfe .h-langtabs{display:inline-flex;gap:4px;width:fit-content;background:var(--vdm-surface-card-muted);
  border:1px solid var(--vdm-border-card);border-radius:var(--vdm-radius-card);padding:3px}
.hilfe .h-lt{display:inline-flex;align-items:center;gap:6px;border:0;background:transparent;color:var(--vdm-text-muted);
  font-family:inherit;font-size:0.83333rem;font-weight:600;padding:6px 12px;border-radius:calc(var(--vdm-radius-card) - 3px);
  cursor:pointer;text-transform:none;letter-spacing:normal;transition:.12s}
.hilfe .h-lt:hover{color:var(--vdm-text-strong)}
.hilfe .h-lt.on{background:var(--vdm-surface-card);color:var(--vdm-aktion);box-shadow:var(--vdm-shadow-card)}
.hilfe .h-lt-dot{width:6px;height:6px;border-radius:50%;background:var(--vdm-ok);flex:none}

/* Abgelaufene Gueltigkeit in der Dokumentkachel. Muss auffallen: eine abgelaufene Vorlage
   darf nicht mehr verwendet werden, und die Zeile ist sonst durchgehend grau. */
.vhd-dok-abgelaufen{color:var(--vdm-danger-text,#b42318);font-weight:600}

/* Links im Artikeltext (Seite und Drawer) als Links erkennbar (Befund 25.09.2026: ".hilfe a" erbt sonst Textfarbe
   ohne Unterstreichung). Unterstreichung zusaetzlich zur Farbe, damit es nicht nur an der Farbe haengt.
   Farbe leicht zur Textfarbe gemischt: pures --vdm-aktion erreicht in "Stahl hell" nur 4,48:1.
   !important nur hier: die Paletten (z. B. vdm-papier.css "html[data-vdm-palette] a:not(...)") faerben jeden Link in
   ihren Akzent und schlagen jede normale Regel; in "Papier" ergab das 2,41:1 im Artikeltext. */
.hilfe .h-asec a:not(.h-copy),.vhd .h-asec a{color:color-mix(in srgb,var(--vdm-aktion) 85%,var(--vdm-text-strong)) !important;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px}
.hilfe .h-asec a:not(.h-copy):hover,.vhd .h-asec a:hover{text-decoration-thickness:2px}
.hilfe .h-asec a:not(.h-copy):focus-visible,.vhd .h-asec a:focus-visible{outline:2px solid var(--vdm-aktion);outline-offset:2px;border-radius:2px}

/* Interaktive Hilfe (hilfe-ziele.js, Leitfaden docs/Hilfe/LEITFADEN.md). Nur --vdm-Tokens, damit alle Schemata passen;
   outline statt border, damit sich auf der Seite nichts verschiebt. */
.vdm-hilfe-ziel-an{outline:3px solid var(--vdm-aktion,var(--vdm-accent)) !important;outline-offset:3px;border-radius:6px}
.vdm-hilfe-ziel-puls{animation:vdm-hilfe-ziel-puls 1s ease-out 2}
@keyframes vdm-hilfe-ziel-puls{
  0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--vdm-aktion,var(--vdm-accent)) 60%,transparent)}
  100%{box-shadow:0 0 0 14px color-mix(in srgb,var(--vdm-aktion,var(--vdm-accent)) 0%,transparent)}
}
/* Spotlight: dunkelt alles ausser dem Ziel ab. Unter dem Drawer (.vhd 1300), ueber Seite und Kopfleiste, klickdurchlaessig.
   Fester dunkler Schleier, damit es in hellen und dunklen Schemata wirkt. */
.vdm-hilfe-spot{position:fixed;z-index:1290;pointer-events:none;border-radius:10px;opacity:0;
  box-shadow:0 0 0 3px var(--vdm-aktion,var(--vdm-accent)),0 0 0 200vmax rgba(8,12,20,.55);
  transition:opacity .18s ease,left .12s ease,top .12s ease,width .12s ease,height .12s ease}
.vdm-hilfe-spot.an{opacity:1}
/* Ziel unter dem Drawer: beim Zeigen durchsichtig, nach dem Springen an den linken Rand (bis zum Schliessen). */
.vhd{transition:opacity .15s ease}
.vhd.vhd-durchsicht{opacity:.12}
.vhd.vhd-links{right:auto;left:20px}
/* Hinweis, wenn ein Ziel gerade nicht da ist (bzw. „nochmal tippen“ auf Touch). */
.vdm-hilfe-hinweis{position:fixed;z-index:1310;max-width:320px;padding:8px 11px;border-radius:8px;font-size:0.83333rem;line-height:1.45;
  background:var(--vdm-surface-card,#fff);color:var(--vdm-text-strong,#111);border:1px solid var(--vdm-border-card,#ccc);
  box-shadow:0 8px 24px rgba(0,0,0,.18);opacity:0;pointer-events:none;transition:opacity .15s ease}
.vdm-hilfe-hinweis.an{opacity:1}
/* Rundgang: Sprechblase am Ziel, ueber Spotlight und Drawer. */
.vdm-hilfe-tour{position:fixed;z-index:1320;width:340px;max-width:calc(100vw - 16px);display:none;flex-direction:column;gap:8px;
  padding:12px 14px;border-radius:12px;background:var(--vdm-surface-card,#fff);color:var(--vdm-text-strong,#111);
  border:2px solid var(--vdm-aktion,var(--vdm-accent));box-shadow:0 12px 32px rgba(0,0,0,.28);font-size:0.86667rem;line-height:1.5}
.vdm-hilfe-tour.an{display:flex}
.vdm-hilfe-tour .vht-kopf{display:flex;justify-content:space-between;align-items:center;font-size:0.73333rem;letter-spacing:.06em;text-transform:uppercase;color:var(--vdm-text-muted,#666)}
.vdm-hilfe-tour .vht-x{border:0;background:transparent;color:inherit;font-size:1.2rem;line-height:1;cursor:pointer;padding:0 2px}
.vdm-hilfe-tour .vht-text a{color:inherit;text-decoration:underline;cursor:default}
.vdm-hilfe-tour .vht-fehlt{margin-top:6px;padding:6px 8px;border-radius:6px;background:var(--vdm-warn-bg);border:1px solid var(--vdm-warn-border);color:var(--vdm-warn-text);font-size:0.8rem}
.vdm-hilfe-tour .vht-fuss{display:flex;justify-content:flex-end;gap:8px}
.vdm-hilfe-tour .vht-fuss button{height:30px;padding:0 12px;border-radius:8px;border:1px solid var(--vdm-border-card,#ccc);background:var(--vdm-surface-card,#fff);color:var(--vdm-text-strong,#111);font:inherit;font-size:0.83333rem;cursor:pointer}
.vdm-hilfe-tour .vht-fuss .vht-weiter{background:var(--vdm-aktion,var(--vdm-accent));border-color:var(--vdm-aktion,var(--vdm-accent));color:var(--vdm-on-ink,#fff)}
.vdm-hilfe-tour .vht-fuss button:disabled{opacity:.45;cursor:default}
.vdm-hilfe-tour .vht-fuss .vht-start{margin-right:auto;background:transparent;border-color:transparent;color:var(--vdm-text-muted,#666);padding:0 6px}
.vdm-hilfe-tour .vht-fuss .vht-start:hover{color:var(--vdm-text-strong,#111);text-decoration:underline}
/* Startlink eines Rundgangs im Artikel als Knopf. */
.h-asec a[href="#rundgang"]{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border-radius:999px;
  border:1px solid var(--vdm-aktion,var(--vdm-accent));text-decoration:none !important;font-weight:600}
@media (prefers-reduced-motion:reduce){.vdm-hilfe-spot,.vdm-hilfe-hinweis,.vhd{transition:none}.vdm-hilfe-ziel-puls{animation:none}}