/* Hilfe-Button (Schaf) – schwebend unten rechts.
   Einbinden: <link rel="stylesheet" href="/hilfe/hilfe-button.css"> */
.hilfe-button{
  --hb-size:76px;
  --hb-label-bg:#3f7f2a;        /* dunkles Grün: weißer Text bleibt gut lesbar */
  --hb-focus:#0e6b8a;
  position:fixed;
  right:max(36px,env(safe-area-inset-right));
  bottom:max(18px,env(safe-area-inset-bottom));
  z-index:900;
  display:block;
  width:var(--hb-size);
  text-decoration:none;
  -webkit-tap-highlight-color:transparent;
}
.hilfe-button img{
  display:block;width:100%;height:auto;
  filter:drop-shadow(0 3px 6px rgba(0,0,0,.28));
  transition:transform .2s ease;
}
.hilfe-button .hilfe-button-text{
  position:absolute;left:50%;bottom:-8px;transform:translateX(-50%);
  padding:.28rem .7rem;border:2px solid #fff;border-radius:999px;
  background:var(--hb-label-bg);color:#fff;
  font:700 .85rem/1 system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  box-shadow:0 2px 5px rgba(0,0,0,.25);white-space:nowrap;
}
.hilfe-button:hover img,
.hilfe-button:focus-visible img{transform:translateY(-4px) rotate(-6deg)}
.hilfe-button:focus-visible{outline:3px solid var(--hb-focus);outline-offset:6px;border-radius:14px}

/* Smartphone: etwas kleiner, Antippfläche bleibt über 44 px */
@media (max-width:36rem){.hilfe-button{--hb-size:62px}}

/* Optional: Platz am Seitenende, damit der Button keine Fußzeilenlinks verdeckt.
   Klasse "hilfe-button-platz" an die Fußzeile hängen. */
.hilfe-button-platz{padding-bottom:6rem}

@media (prefers-reduced-motion:reduce){.hilfe-button img{transition:none}.hilfe-button:hover img,.hilfe-button:focus-visible img{transform:none}}
@media print{.hilfe-button{display:none}}