/* Hilfe-Knopf und Erklärfenster */
.hilfe-knopf {
  position: fixed; right: 14px; bottom: 68px; z-index: 900;
  width: 46px; height: 46px; border-radius: 50%;
  border: 1px solid rgba(15,23,42,.08); background: #fff; color: #2563eb;
  box-shadow: 0 6px 18px rgba(15,23,42,.16);
  font-size: 22px; font-weight: 700; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  opacity: .75; transition: opacity .15s, transform .12s;
}
.hilfe-knopf:hover { opacity: 1; }
.hilfe-knopf:active { transform: scale(.94); }

.hilfe-overlay[hidden] { display: none !important; }
.hilfe-overlay {
  position: fixed; inset: 0; z-index: 950; background: rgba(15,23,42,.45);
  display: flex; align-items: flex-end; justify-content: center;
}
@media (min-width: 620px) { .hilfe-overlay { align-items: center; padding: 1rem; } }
.hilfe-box {
  width: 100%; max-width: 520px; background: #fff;
  border-radius: 18px 18px 0 0; padding: 1rem 1.1rem 1.2rem;
  max-height: 88vh; overflow-y: auto;
}
@media (min-width: 620px) { .hilfe-box { border-radius: 18px; } }
.hilfe-kopf {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 1.05rem; font-weight: 700; color: #0f172a; margin-bottom: .6rem;
}
.hilfe-zu { border: 0; background: none; font-size: 1.5rem; color: #94a3b8; cursor: pointer; line-height: 1; }
.hilfe-was { font-size: .92rem; color: #475569; line-height: 1.55; margin: 0 0 .8rem; }
.hilfe-schritte { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .6rem; }
.hilfe-schritte li { display: flex; gap: .6rem; align-items: flex-start; font-size: .93rem; line-height: 1.5; color: #334155; }
.hilfe-nr {
  flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%;
  background: #eff6ff; color: #2563eb; font-size: .78rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center; margin-top: .1rem;
}
.hilfe-tipps { margin-top: 1rem; padding: .7rem .8rem; background: #f8fafc; border-radius: 12px; }
.hilfe-tipps strong { font-size: .8rem; color: #475569; }
.hilfe-tipps ul { margin: .4rem 0 0; padding-left: 1.1rem; }
.hilfe-tipps li { font-size: .86rem; color: #64748b; line-height: 1.5; margin-bottom: .3rem; }
.hilfe-fertig {
  width: 100%; margin-top: 1rem; padding: .7rem 1rem; border: 0; border-radius: 12px;
  background: #2563eb; color: #fff; font-size: .98rem; font-weight: 600; cursor: pointer;
}

/* Am Handy sitzt unten die Navigationsleiste — Knopf muss darüber bleiben */
@media (max-width: 760px), (any-pointer: coarse) {  /* auch iPad: Leiste unten wie am Handy */
  .hilfe-knopf { bottom: 130px; }
}