/* Hilfe „So funktioniert Handwerker OS“: Filme, Schritte, Übersicht (11.10.2026). Ergänzt unterseiten.css. */
.hf-film{margin:6px 0 34px}
.hf-film .hf-rahmen{border-radius:16px;overflow:hidden;background:#0a1a19;border:1px solid #d5e9e6;box-shadow:0 22px 50px -30px rgba(6,70,64,.55)}
.hf-film video{display:block;width:100%;height:auto;aspect-ratio:16/9;background:#0a1a19}
.hf-film.hf-hoch .hf-rahmen{max-width:330px;margin:0 auto;border-radius:30px;border:7px solid #0a1a19}
.hf-film.hf-hoch video{aspect-ratio:9/16}
.u-content .hf-film figcaption{font-size:13px;line-height:1.6;color:var(--u-muted);margin-top:12px;max-width:68ch}
.hf-film.hf-hoch figcaption{text-align:center;margin-inline:auto}
.u-content ol.hf-schritte{list-style:none;counter-reset:hf;padding:0;margin:22px 0 30px}
.u-content ol.hf-schritte>li{counter-increment:hf;position:relative;padding:3px 0 20px 54px;margin:0;line-height:1.65}
.u-content ol.hf-schritte>li:before{content:counter(hf);position:absolute;left:0;top:0;width:34px;height:34px;border-radius:50%;background:#e6f7f5;color:#066b67;font-weight:700;font-size:15px;display:grid;place-items:center}
.u-content ol.hf-schritte>li:not(:last-child):after{content:"";position:absolute;left:16px;top:38px;bottom:2px;width:2px;background:#d5eeeb}
.hf-bilder{display:grid;gap:20px;margin:24px 0 8px;grid-template-columns:repeat(2,minmax(0,1fr))}
.hf-bilder.hf-hoch{grid-template-columns:repeat(auto-fit,minmax(150px,220px));justify-content:start}
.u-content .hf-bilder figure{margin:0}
.u-content .hf-bilder img{border-radius:12px;border:1px solid #dce7e4}
.u-content .hf-bilder figcaption{font-size:13px;line-height:1.55;color:var(--u-muted);margin-top:9px}
.u-content .hf-beispiel{font-size:14px;color:var(--u-muted);margin:-8px 0 26px}
.u-content details.hf-text{border-top:1px solid var(--u-line);border-bottom:1px solid var(--u-line);padding:16px 0;margin:30px 0}
.u-content details.hf-text summary{cursor:pointer;font-weight:650;font-size:15px}
.u-content details.hf-text p{font-size:15px;line-height:1.7;margin:12px 0 0}
.u-content .hf-handy{margin-top:46px;padding:28px;border-radius:18px;background:#f3fbfa;border:1px solid #d5eeeb}
.u-content .hf-handy h2{margin-top:0}
.u-content .hf-handy .hf-film{margin-bottom:8px}
.hf-handy-inhalt{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:34px;align-items:start}
.hf-handy-inhalt .hf-film.hf-hoch .hf-rahmen{margin:0}
.u-content .hf-handy ol.hf-schritte{margin-top:6px}
/* Übersicht */
.hf-bereiche{display:flex;flex-wrap:wrap;gap:9px;margin:6px 0 10px}
.hf-bereiche a{display:inline-block;padding:8px 14px;border-radius:999px;background:#f0f8f6;border:1px solid #d5eeeb;font-size:13px;line-height:1.3;color:#0a1a19;text-decoration:none}
.hf-bereiche a:hover{background:#e6f7f5;border-color:#bfe8e3}
.hf-bereiche a span{color:#08807c;font-weight:700;margin-left:5px}
.hf-bereich{scroll-margin-top:24px;margin-top:58px}
.u-content .hf-bereich>h2{margin-bottom:8px}
.u-content .hf-bereich>p{color:var(--u-muted);max-width:70ch;margin:0 0 24px}
.u-content .hf-bereich>p a{text-decoration:underline}
.hf-gitter{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.u-content a.hf-kachel.hilfe-kachel{display:flex;flex-direction:column;padding:0;border:1px solid var(--u-line);border-radius:16px;overflow:hidden;background:#fff;text-decoration:none;color:inherit;transition:border-color .2s,box-shadow .2s,transform .2s}
.u-content a.hf-kachel.hilfe-kachel[hidden],.hf-bereich[hidden]{display:none}
.u-content a.hf-kachel:hover{border-color:#9fd8d0;box-shadow:0 16px 36px -26px rgba(6,70,64,.6);transform:translateY(-2px)}
.hf-kachel .hf-bild{aspect-ratio:16/10;background:#f3fbfa;overflow:hidden;border-bottom:1px solid var(--u-line)}
.hf-kachel .hf-bild img{width:100%;height:100%;object-fit:cover;object-position:left top;display:block;border:0}
.hf-kachel .hf-bild.hf-hoch img{object-position:center top}
.hf-kachel .hf-txt{padding:16px 18px 20px;display:block}
.hf-kachel .hf-meta{display:block;font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;color:#08807c;font-weight:700;margin-bottom:7px}
.u-content .hf-kachel h3{font-size:18px;line-height:1.3;margin:0 0 7px;letter-spacing:-.02em}
.u-content .hf-kachel p{font-size:14px;line-height:1.55;color:var(--u-muted);margin:0}
.hf-kachel:hover h3{text-decoration:underline;text-underline-offset:4px}
.u-content .hf-hinweis{font-size:13px;color:var(--u-muted);margin-top:50px;padding-top:20px;border-top:1px solid var(--u-line)}
/* Hinweis auf der Hilfe-Startseite */
.u-content a.hf-banner{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 24px;align-items:center;padding:26px 28px;margin:0 0 34px;border-radius:18px;background:linear-gradient(135deg,#e6f7f5,#f3fbfa);border:1px solid #bfe8e3;text-decoration:none;color:inherit}
.hf-banner .hf-meta{grid-column:1;font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:#08807c;font-weight:700}
.hf-banner b{grid-column:1;font-size:clamp(22px,2.4vw,30px);line-height:1.2;letter-spacing:-.035em}
.hf-banner .hf-satz{grid-column:1;font-size:15px;color:var(--u-muted);line-height:1.55}
.hf-banner .hf-pfeil{grid-column:2;grid-row:1/4;width:52px;height:52px;border-radius:50%;background:#0a8f8a;color:#fff;display:grid;place-items:center;font-size:24px}
.u-content a.hf-banner:hover b{text-decoration:underline;text-underline-offset:5px}
@media (max-width:980px){.hf-gitter{grid-template-columns:repeat(2,minmax(0,1fr))}.hf-handy-inhalt{grid-template-columns:1fr}.hf-handy-inhalt .hf-film.hf-hoch .hf-rahmen{margin:0 auto}}
@media (max-width:620px){.hf-gitter{grid-template-columns:1fr}.hf-bilder{grid-template-columns:1fr}.hf-film.hf-hoch .hf-rahmen{max-width:290px}.u-content .hf-handy{padding:20px}.hf-bilder.hf-hoch{grid-template-columns:repeat(2,minmax(0,1fr))}.u-content a.hf-banner{padding:20px;grid-template-columns:1fr}.hf-banner .hf-pfeil{display:none}.hf-bereich{margin-top:44px}.u-content ol.hf-schritte>li{padding-left:48px}}
@media print{.hf-film,.hf-bereiche,.u-search{display:none!important}}
/* Hilfe: Kontakt im Seitenfluss, nie über dem Film oder seinen Steuerelementen. */
.hf-hilfeseite #dock{display:none!important}
.hf-hilfeseite .u-hero{padding-top:24px;padding-bottom:24px}
.hf-hilfeseite .u-hero h1{font-size:clamp(32px,4.5vw,58px);max-width:24ch;text-wrap:balance}
.hf-hilfeseite .u-intro{max-width:64ch}
.hf-schnell{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center;margin:0 0 30px;font-size:15px;line-height:1.6}
.hf-schnell a{color:#066b67;text-underline-offset:4px}
.hf-support{margin-block:48px 56px;padding-block:30px;border-top:1px solid #d5e9e6}
.hf-support h2{font-size:clamp(24px,3vw,32px);line-height:1.25;margin:0 0 16px}
.hf-support p{max-width:65ch;line-height:1.65;margin:0 0 18px}
.hf-support-wege{display:flex;flex-wrap:wrap;gap:12px 24px;margin:20px 0}
.hf-support-wege a{display:inline-block;padding:12px 16px;border-radius:8px;background:#e6f7f5;color:#066b67;font-weight:650;text-decoration:none;min-height:44px}
.hf-support-wege a:hover{background:#d5eeeb;text-decoration:underline}
.hf-support .hf-support-hinweis{font-size:14px;color:#52635f}
.hf-hilfeseite a:focus-visible,.hf-hilfeseite input:focus-visible,.hf-hilfeseite summary:focus-visible{outline:3px solid #08807c;outline-offset:4px}
@media(max-width:620px){.hf-hilfeseite .u-hero{padding-top:14px;padding-bottom:18px}.hf-hilfeseite .u-hero h1{font-size:34px}.hf-hilfeseite .u-intro{font-size:17px}.hf-schnell{font-size:14px;margin-bottom:24px}.hf-support-wege{display:grid}.hf-support-wege a{width:100%}}