/* Hilfe am Bildschirm page. Mobile first; most visitors read it on the phone during a call. */
.hilfe .jump { display:flex; flex-wrap:wrap; gap:12px; margin:8px 0 0; }
.hilfe .jump a { flex:1 1 140px; }
.hilfe .facts { list-style:none; padding:0; margin:0 0 8px; display:grid; gap:12px; }
.hilfe .facts li { background:#ECEAE4; border-radius:12px; padding:16px 20px; margin:0; }
.hilfe .os { border-top:1px solid #BECAC6; padding-top:8px; margin-top:48px; scroll-margin-top:16px; }
.hilfe .howto { list-style:none; counter-reset:schritt; padding:0; margin:0; }
.hilfe .howto > li { counter-increment:schritt; position:relative; padding:0 0 32px 52px; margin:0; }
.hilfe .howto > li::before {
  content:counter(schritt); position:absolute; left:0; top:0;
  width:36px; height:36px; border-radius:50%; background:#16383B; color:#F5F4F0;
  display:flex; align-items:center; justify-content:center; font-weight:700; font-size:17px;
}
.hilfe .howto h3 { font-size:21px; line-height:1.3; margin:4px 0 10px; }
.hilfe .howto p { margin-bottom:12px; }
.hilfe figure { margin:16px 0 8px; }
.hilfe figure img, .hilfe figure svg { display:block; width:100%; height:auto; border-radius:10px; border:1px solid #BECAC6; background:#fff; box-sizing:border-box; }
.hilfe figure.narrow { max-width:300px; }
.hilfe .pair { display:grid; grid-template-columns:minmax(0,1fr); gap:16px; margin:16px 0 8px; }
.hilfe .pair figure { margin:0; max-width:300px; }
.hilfe figcaption { font-size:14px; line-height:1.5; color:#4A5557; margin-top:8px; }
.hilfe .sketch-label { display:inline-block; font-size:12px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:#00756F; margin-right:6px; }
.hilfe .download { display:flex; flex-direction:column; align-items:flex-start; gap:6px; margin:4px 0 8px; }
.hilfe .download .button { width:100%; max-width:420px; }
.hilfe .download small { font-size:14px; color:#4A5557; }
.hilfe .value { display:block; font-family:ui-monospace,"SF Mono",Consolas,monospace; font-size:15px; background:#fff; border:1px solid #BECAC6; border-radius:6px; padding:10px 12px; margin:4px 0 12px; overflow-wrap:anywhere; user-select:all; -webkit-user-select:all; }
.hilfe .safety { background:#16383B; color:#F5F4F0; border-radius:12px; padding:clamp(20px,4vw,32px); margin-top:48px; }
.hilfe .safety h2 { color:inherit; margin-top:0; }
.hilfe .safety ul { margin:0; padding-left:20px; }
.hilfe .safety li { margin-bottom:10px; }
.hilfe .safety a { color:#F5F4F0; }
.hilfe .contact-line { font-size:20px; line-height:1.5; }
.hilfe .contact-line a { font-weight:600; }
@media (min-width:640px) {
  .hilfe .facts { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .hilfe .pair { grid-template-columns:repeat(2,minmax(0,300px)); }
  .hilfe .jump a { flex:0 0 auto; }
}
@media (max-width:639px) { .hilfe figure.shot-main { max-width:300px; } }