/* Baustellen-Handbuch (16.10.2026). Farben und Hell/Dunkel aus den Variablen der
   App (static/style.css); alle Klassen beginnen mit hb-, damit nichts kollidiert. */
.hb{--hb-akzent:var(--primary-light);max-width:1120px;margin:0 auto;padding:0 4px 32px;line-height:1.65}
/* Hellmodus: --primary-light (#f59e0b) hat auf Weiss nur etwa 2:1 — dort der dunklere Ton (WCAG AA). */
:root[data-theme="light"] .hb{--hb-akzent:var(--primary-dark)}
.hb a{color:var(--hb-akzent)}
.hb-kopf{padding:12px 0 8px}
.hb-zurueck{display:inline-block;font-size:14px;text-decoration:none;color:var(--text-muted)!important;margin-bottom:8px}
.hb-zurueck:hover{color:var(--hb-akzent)!important}
.hb-kick{display:inline-block;background:var(--primary-glow);color:var(--hb-akzent);font-weight:700;font-size:12px;letter-spacing:1px;text-transform:uppercase;padding:4px 12px;border-radius:20px}
.hb h1{font-size:clamp(28px,4.2vw,44px);line-height:1.12;letter-spacing:-.8px;margin:16px 0 12px;max-width:24ch}
.hb-lead{font-size:20px;color:var(--text-muted);max-width:46ch;margin:0 0 8px}
.hb-meta{font-size:14px;color:var(--text-faint);margin-top:12px}
.hb-raster{display:grid;grid-template-columns:210px minmax(0,1fr);gap:44px;padding-top:16px}
.hb-toc{position:sticky;top:76px;align-self:start;font-size:14px}
.hb-toc b{display:block;font-size:12px;letter-spacing:1px;text-transform:uppercase;color:var(--text-faint);margin-bottom:8px}
.hb-toc a{display:block;color:var(--text-muted);text-decoration:none;padding:4px 0 4px 12px;border-left:2px solid var(--border-strong)}
.hb-toc a:hover{color:var(--text);border-color:var(--primary)}
.hb-text{min-width:0;max-width:720px}
.hb-antwort{background:var(--primary-glow);border-left:5px solid var(--primary);border-radius:0 12px 12px 0;padding:16px 24px;font-size:20px;line-height:1.55;margin:4px 0 24px}
.hb-antwort small{display:block;font-size:12px;letter-spacing:1px;text-transform:uppercase;color:var(--hb-akzent);font-weight:700;margin-bottom:4px}
.hb-szene{border:1px dashed var(--border-strong);border-radius:12px;padding:16px 24px;margin:0 0 32px;background:var(--surface)}
.hb-szene b{display:block;font-size:12px;letter-spacing:1px;text-transform:uppercase;color:var(--text-faint);margin-bottom:4px}
.hb-szene p{margin:0;font-style:italic}
.hb-szene em{display:block;font-style:normal;font-size:12px;color:var(--text-faint);margin-top:8px}
.hb-text h2{font-size:24px;line-height:1.25;letter-spacing:-.4px;margin:36px 0 12px}
.hb-text p{margin:12px 0}.hb-text ul,.hb-text ol{padding-left:24px}.hb-text li{margin:8px 0}
.hb-rollen{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:12px 0}
.hb-rolle{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:16px 16px}
.hb-rolle b{display:block;color:var(--hb-akzent);font-size:14px;margin-bottom:2px}
.hb-rolle p{margin:0;font-size:16px;line-height:1.5}
.hb-check{list-style:none;padding:0!important;margin:12px 0}
.hb-check li{display:flex;gap:12px;align-items:flex-start;padding:8px 16px;background:var(--surface);border:1px solid var(--border);border-radius:12px;margin:8px 0}
.hb-check li:before{content:"";flex:0 0 18px;height:18px;margin-top:4px;border:2px solid var(--primary);border-radius:4px}
.hb-recht{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:16px 16px;font-size:16px}
.hb-recht b{display:block;font-size:12px;letter-spacing:1px;text-transform:uppercase;color:var(--text-faint);margin-bottom:4px}
.hb-text details{border-bottom:1px solid var(--border);padding:12px 0}
.hb-text summary{cursor:pointer;font-weight:650;list-style:none}
.hb-text summary::-webkit-details-marker{display:none}
.hb-text summary:after{content:"+";float:right;color:var(--primary);font-size:24px;line-height:1}
.hb-text details[open] summary:after{content:"–"}
.hb-text details p{color:var(--text-muted);margin:8px 0 0}
.hb-weiter{display:flex;gap:12px;flex-wrap:wrap;margin:16px 0}
.hb-weiter a{border:1px solid var(--border-strong);border-radius:20px;padding:8px 16px;text-decoration:none;color:var(--text);font-size:14px;background:var(--surface)}
.hb-weiter a:hover{border-color:var(--primary)}
.hb-dl{background:var(--surface);border:1px solid var(--border);border-left:5px solid var(--primary);border-radius:12px;padding:16px 24px;margin:32px 0}
.hb-dl h3{margin:0 0 4px;font-size:20px}
.hb-frei{font-weight:700;color:var(--hb-akzent);font-size:14px}
.hb-witz{color:var(--text-muted);margin:2px 0 12px!important;font-size:16px}
.hb-dlzeile{display:flex;justify-content:space-between;align-items:center;gap:12px;background:var(--surface2);border-radius:12px;padding:12px 16px;margin:8px 0;border:1px solid var(--border)}
.hb-dlzeile span{display:block;font-size:14px;color:var(--text-muted)}.hb-dlzeile b{font-size:16px}
.hb-knopf{display:inline-block;background:var(--primary);color:var(--on-primary)!important;text-decoration:none;font-weight:700;padding:12px 16px;border-radius:8px;white-space:nowrap}
.hb-knopf:hover{background:var(--hb-akzent)}
.hb-cta{background:var(--surface3);border:1px solid var(--border-strong);border-radius:16px;padding:24px 32px;margin:40px 0 12px}
.hb-cta h3{margin:0 0 8px;font-size:24px;letter-spacing:-.4px}
.hb-cta ul{margin:12px 0 16px}.hb-cta li{color:var(--text-muted)}
.hb-klein{font-size:14px;color:var(--text-faint);margin-top:12px}
.hb-pn{display:grid;grid-template-columns:1fr auto 1fr;gap:12px;align-items:stretch;margin:24px 0 12px}
.hb-pn a{display:block;border:1px solid var(--border-strong);border-radius:12px;padding:12px 16px;text-decoration:none;color:var(--text);background:var(--surface);font-size:16px}
.hb-pn a:hover{border-color:var(--primary)}
.hb-pn small{display:block;color:var(--text-faint);font-size:12px;letter-spacing:.8px;text-transform:uppercase}
.hb-pn .hb-pn-weiter{text-align:right}.hb-pn .hb-pn-mitte{display:flex;align-items:center;justify-content:center;font-weight:700}
.hb-haftung{font-size:14px;color:var(--text-faint);margin:12px 0 0}
.hb-gruppe{font-size:14px;letter-spacing:1px;text-transform:uppercase;color:var(--text-faint);margin:32px 0 12px}
.hb-gitter{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.hb-karte{display:block;background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:16px 24px;text-decoration:none;color:var(--text)!important}
.hb-karte:hover{border-color:var(--primary);transform:translateY(-1px)}
.hb-karte i{font-style:normal;font-size:12px;letter-spacing:1px;text-transform:uppercase;color:var(--hb-akzent);font-weight:700}
.hb-karte h3{margin:4px 0 8px;font-size:20px;line-height:1.3}
.hb-karte p{margin:0;color:var(--text-muted);font-size:16px}
.hb-karte small{display:block;margin-top:12px;color:var(--text-faint);font-size:14px}
.hb-plakette{display:inline-block;background:var(--primary-glow);color:var(--hb-akzent);border-radius:20px;padding:1px 8px;font-size:12px;font-weight:700;margin-left:8px}
.hb-gl dt{font-weight:700;margin-top:16px;font-size:20px}.hb-gl dd{margin:2px 0 0;color:var(--text-muted)}.hb-gl dd a{font-size:14px}
@media(max-width:860px){.hb-raster{grid-template-columns:1fr;gap:12px}.hb-toc{display:none}.hb-rollen,.hb-gitter{grid-template-columns:1fr}.hb-pn{grid-template-columns:1fr}.hb-pn .hb-pn-weiter{text-align:left}}