/* =============================================================================
   Itze Grow e.V. – Altersabfrage (ab 21 Jahren)
   Papiergrund mit Unschärfe über der Seite, darauf eine ruhige Karte.
   ========================================================================== */

html.alter-offen, html.alter-offen body { overflow: hidden; }

.alter {
  position: fixed; inset: 0;
  z-index: 200;
  display: grid; place-items: center;
  padding: var(--sc-gutter);
  background: color-mix(in oklab, var(--sc-canvas) 72%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(0.9);
          backdrop-filter: blur(14px) saturate(0.9);
  animation: alter-ein 320ms var(--sc-ease-out) both;
}
.alter.is-weg { animation: alter-aus 360ms var(--sc-ease-out) both; }

.alter__karte {
  width: min(100%, 30rem);
  text-align: center;
  padding: clamp(var(--sc-6), 5vw, var(--sc-8));
  background: color-mix(in oklab, #FFFFFF 62%, var(--sc-canvas));
  border: 1px solid var(--sc-hairline);
  border-radius: 16px;
  box-shadow: 0 2px 4px hsl(var(--sc-shadow-color) / 0.06),
              0 40px 80px -40px hsl(var(--sc-shadow-color) / 0.45);
}
.alter__logo { width: 8.5rem; height: auto; margin: 0 auto var(--sc-3); display: block; }
.alter__marke {
  font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--sc-ink-soft);
}
.alter__titel {
  margin: var(--sc-3) 0 0;
  font-family: var(--sc-font-display);
  font-size: var(--sc-t-xl); font-weight: 600; line-height: 1.1;
  letter-spacing: -0.028em; text-wrap: balance; hyphens: none;
}
.alter__titel::after {
  content: ""; display: block;
  width: 3rem; height: 4px; margin: var(--sc-4) auto 0;
  border-radius: 2px; background: var(--brand-orange);
}
.alter__text {
  margin-top: var(--sc-4);
  color: var(--sc-ink-soft); line-height: 1.6; text-wrap: pretty;
}
.alter__knoepfe { display: grid; gap: var(--sc-3); margin-top: var(--sc-6); }
.alter__ja { justify-content: center; font: inherit; font-weight: 600; border: 0; cursor: pointer; padding-block: var(--sc-4); }
.alter__nein {
  font: inherit; cursor: pointer;
  padding: var(--sc-3);
  background: transparent; color: var(--sc-ink-soft);
  border: 1px solid var(--sc-hairline-strong); border-radius: var(--sc-r-md);
}
.alter__nein:hover { color: var(--sc-ink); border-color: var(--sc-ink-soft); }
.alter__abgelehnt {
  margin-top: var(--sc-6);
  padding: var(--sc-4) var(--sc-5);
  border-radius: 10px;
  background: color-mix(in oklab, var(--brand-orange) 14%, transparent);
  color: var(--sc-ink); line-height: 1.55;
}
.alter__recht {
  margin-top: var(--sc-6);
  display: flex; justify-content: center; gap: var(--sc-5);
  font-size: 0.78rem;
}
.alter__recht a { color: var(--sc-ink-soft); }

@keyframes alter-ein  { from { opacity: 0 } to { opacity: 1 } }
@keyframes alter-aus  { from { opacity: 1 } to { opacity: 0 } }
@media (prefers-reduced-motion: reduce) {
  .alter, .alter.is-weg { animation: none; }
}

/* [hidden] muss gegen display:grid gewinnen */
.alter [hidden] { display: none !important; }