:root{
  --overlay-radius: 20px;
  --overlay-shadow: 0 10px 30px rgba(0,0,0,.2);
  --overlay-bg: rgba(0,0,0,.40);

  /* EINHEITLICHE Rahmenbreite für alle Seiten */
  --overlay-maxw-desktop: 900px;
  --overlay-maxw-mobile: 420px;

  --overlay-padding: 2rem;
}

/* Vollflächiger Hintergrund + Zentrierung */
html, body{
  min-height: 100%;
  font-family: 'Segoe UI', system-ui, -apple-system, Arial, sans-serif;
  background: url('../assets/bg-mountains.png') no-repeat center center / cover fixed;
}

.hero{
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}

/* EINHEITLICHER dunkler Blur-Rahmen für ALLE Seiten */
.overlay{
  width: min(var(--overlay-maxw-desktop), 92vw);
  max-height: min(90svh, 100%);
  padding: var(--overlay-padding);
  border-radius: var(--overlay-radius);
  box-shadow: var(--overlay-shadow);
  overflow: auto;
  text-align: center;

  background: var(--overlay-bg);
  -webkit-backdrop-filter: blur(4px); /* Safari */
  backdrop-filter: blur(4px);
}

/* Mobile Feinschliff */
@media (max-width: 640px){
  .hero{ padding: 1rem; }
  .overlay{
    width: min(var(--overlay-maxw-mobile), 92vw);
    padding: 1.25rem;
    max-height: 92svh;
  }
  .overlay h1{ font-size: 1.6rem; }
  .overlay h2{ font-size: 1.4rem; }
}

/* Touch-Zonen für Buttons */
button, .btn, .primary, .secondary, input[type="submit"]{ min-height: 44px; }