/* Spendenaufruf als Popup, einmal pro Sitzung (seit 26.10.2026).
   Markup: inc/spendenaufruf.php, Ablauf: assets/js/hh-spendenaufruf.js.

   Handy: Karte am unteren Rand, die den Inhalt nicht ganz verdeckt.
   Ab 640 px: Karte in der Mitte. Schritt 2 (Payrexx) braucht Hoehe und
   fuellt auf dem Handy den Bildschirm. Gold kommt nicht vor. */
html.hh-aufruf-offen { overflow: hidden; }

.hh-aufruf {
  position: fixed;
  inset: auto 0 0 0;
  width: 100%;
  max-width: 100%;
  max-height: 88dvh;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 20px 20px 0 0;
  background: var(--hh-blue, #2A3287);
  color: #fff;
  box-shadow: 0 -12px 40px rgba(20, 24, 70, 0.35);
  overflow: auto;
}
.hh-aufruf[open] { animation: hh-aufruf-hoch 0.35s cubic-bezier(0.22, 1, 0.36, 1); }
.hh-aufruf::backdrop { background: rgba(20, 24, 70, 0.45); }
@keyframes hh-aufruf-hoch { from { transform: translateY(100%); } to { transform: none; } }

.hh-aufruf [hidden] { display: none !important; }

.hh-aufruf__zu {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  cursor: pointer;
  transition: background 0.2s ease;
}
.hh-aufruf__zu:hover { background: rgba(255, 255, 255, 0.24); }
.hh-aufruf__zu:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

.hh-aufruf__schritt--aufruf { padding: 28px 24px 24px; }
.hh-aufruf__logo {
  display: block;
  width: auto;
  height: 64px;
  margin-bottom: 18px;
  filter: brightness(0) invert(1);
}
.hh-aufruf__titel {
  margin: 0 48px 10px 0;
  font-size: clamp(1.375rem, 5.5vw, 1.75rem);
  font-weight: 700;
  line-height: 1.2;
  color: #fff;
  text-wrap: balance;
}
.hh-aufruf__text {
  margin: 0;
  font-size: 1rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.92);
  text-wrap: pretty;
}
.hh-aufruf__stand { margin-top: 18px; }
.hh-aufruf__balken {
  height: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.2);
  overflow: hidden;
}
.hh-aufruf__balken span {
  display: block;
  width: var(--hh-aufruf-anteil, 0%);
  height: 100%;
  border-radius: 999px;
  background: #fff;
  transition: width 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}
.hh-aufruf__stand p { margin: 8px 0 0; font-size: 0.875rem; color: rgba(255, 255, 255, 0.85); }
.hh-aufruf__stand strong { color: #fff; }

.hh-aufruf__knoepfe {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 22px;
}
.hh-aufruf__spenden,
.hh-aufruf__mehr {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0.75rem 1.5rem;
  border-radius: var(--hh-radius-md, 8px);
  font-weight: 700;
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.hh-aufruf__spenden { background: #fff; color: var(--hh-blue, #2A3287); }
.hh-aufruf__spenden:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25); color: var(--hh-blue, #2A3287); }
.hh-aufruf__mehr { border: 1.5px solid rgba(255, 255, 255, 0.55); color: #fff; }
.hh-aufruf__mehr:hover { background: rgba(255, 255, 255, 0.12); color: #fff; }
.hh-aufruf__spenden:focus-visible,
.hh-aufruf__mehr:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

/* Schritt 2: Payrexx. Weisser Grund, auf dem Handy der ganze Bildschirm. */
.hh-aufruf--formular {
  height: 100dvh;
  max-height: 100dvh;
  border-radius: 0;
  background: #fff;
  color: var(--hh-text, #2A3287);
}
.hh-aufruf--formular .hh-aufruf__zu { background: var(--hh-blue-05, #F0F1F8); color: var(--hh-blue, #2A3287); }
.hh-aufruf__schritt--formular { display: flex; flex-direction: column; height: 100%; padding-top: 64px; }
.hh-aufruf__formular { display: block; flex: 1 1 auto; width: 100%; min-height: 0; border: 0; }
.hh-aufruf__laedt,
.hh-aufruf__notfall { margin: 0; padding: 32px 24px; text-align: center; color: var(--hh-text-light, #555); }
.hh-aufruf__notfall a { color: var(--hh-blue, #2A3287); font-weight: 700; }

@media (min-width: 640px) {
  .hh-aufruf {
    inset: 0;
    width: min(480px, calc(100% - 2rem));
    max-height: calc(100dvh - 4rem);
    margin: auto;
    border-radius: var(--hh-radius-lg, 16px);
    box-shadow: 0 24px 60px rgba(20, 24, 70, 0.35);
  }
  .hh-aufruf[open] { animation-name: hh-aufruf-ein; }
  .hh-aufruf__schritt--aufruf { padding: 36px 36px 32px; }
  .hh-aufruf__knoepfe { flex-direction: row; }
  .hh-aufruf__knoepfe > * { flex: 1 1 0; }
  .hh-aufruf--formular {
    width: min(560px, calc(100% - 2rem));
    height: min(820px, calc(100dvh - 4rem));
    border-radius: var(--hh-radius-lg, 16px);
  }
}
@keyframes hh-aufruf-ein { from { opacity: 0; transform: translateY(16px) scale(0.98); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .hh-aufruf[open] { animation: none; }
  .hh-aufruf__balken span { transition: none; }
}