/* ==========================================================================
   Vital Heroes — Consent-Banner (Cookie-Hinweis)
   Gehoert zu js/consent.js. Nutzt die VH-Tokens aus css/vh-tokens.css.
   ========================================================================== */
.vh-consent {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
  display: flex;
  justify-content: center;
  padding: var(--vh-s-4);
  pointer-events: none;   /* nur die Karte faengt Klicks — Rest der Seite bleibt frei */
}
.vh-consent[hidden] { display: none; }

.vh-consent__card {
  pointer-events: auto;
  width: 100%;
  max-width: 780px;
  display: flex;
  align-items: center;
  gap: var(--vh-s-5);
  padding: var(--vh-s-5);
  background: var(--vh-white);
  color: var(--vh-green);
  border: 1px solid var(--vh-divider);
  border-radius: var(--vh-r-md);
  box-shadow: var(--vh-shadow-lg);
  animation: vh-consent-in var(--vh-dur-slow) var(--vh-ease) both;
}

.vh-consent__body { flex: 1 1 auto; }
.vh-consent__title {
  margin: 0 0 4px;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.3;
}
.vh-consent__text {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--vh-fg-muted);
}
.vh-consent__text a { color: var(--vh-orange); }

.vh-consent__actions {
  flex: 0 0 auto;
  display: flex;
  gap: var(--vh-s-3);
}
.vh-consent__btn {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  cursor: pointer;
  white-space: nowrap;
  font-family: var(--vh-font-primary);
  font-size: 14px;
  font-weight: 600;
  padding: 12px 22px;
  border-radius: var(--vh-r-pill);
  transition: background var(--vh-dur) var(--vh-ease), color var(--vh-dur) var(--vh-ease);
}
.vh-consent__btn:active { transform: scale(.99); }
.vh-consent__btn--primary { background: var(--vh-orange); color: #fff; }
.vh-consent__btn--primary:hover { background: var(--vh-orange-95); }
.vh-consent__btn--ghost {
  background: transparent;
  color: var(--vh-green);
  box-shadow: inset 0 0 0 2px var(--vh-green);
}
.vh-consent__btn--ghost:hover { background: var(--vh-green); color: var(--vh-beige); }

@keyframes vh-consent-in {
  from { transform: translateY(14px); opacity: 0; }
  to   { transform: none; opacity: 1; }
}

/* Mobile: gestapelt, Buttons volle Breite */
@media (max-width: 720px) {
  .vh-consent { padding: var(--vh-s-3); }
  .vh-consent__card {
    flex-direction: column;
    align-items: stretch;
    gap: var(--vh-s-4);
    padding: var(--vh-s-4);
  }
  .vh-consent__actions { flex-direction: column; }
  .vh-consent__btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .vh-consent__card { animation: none; }
}