:root{
  --fg:#ffffff;
  --fg-dim:#e6e6e6;
  --overlay:rgba(0,0,0,.42);
  --btn-bg:rgba(255,255,255,.12);
  --btn-bg-hover:rgba(255,255,255,.18);
  --bg-blur: 3px;
  --vh: 1vh;
  --safe-top: env(safe-area-inset-top);
  --safe-bottom: env(safe-area-inset-bottom);
  --safe-left: env(safe-area-inset-left);
  --safe-right: env(safe-area-inset-right);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  color:var(--fg);
  background:#0a0d12;
  font-family: Montserrat, system-ui, -apple-system, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.hero{
  position:relative;
  height: calc(var(--vh) * 100);
  overflow:hidden;
}

/* Fullscreen background */
.bg{
  position:absolute;
  inset:-8%; /* größerer Rand, damit bei Parallax keine Lücken entstehen */
  background:url('assets/Render_RH.jpg') center/cover no-repeat;
  will-change:transform;
  transform:translate3d(0,0,0);
}

/* Overlay + Blur */
.scrim{
  position:absolute;
  inset:0;
  background:var(--overlay);
  backdrop-filter: blur(var(--bg-blur));
  -webkit-backdrop-filter: blur(var(--bg-blur));
}

/* Center via CSS grid - korrigiert für mobile Zentrierung */
.center-wrap{
  position:fixed;
  left: 0; right: 0;
  top: 0; bottom: 0;
  height: calc(var(--vh) * 100);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:3;
  padding: 90px 22px 90px; /* Mehr Platz für Header/Footer auf mobil */
}

/* Header / Social / Footer */
.site-header{
  position:absolute;
  top: calc(18px + var(--safe-top));
  left: calc(18px + var(--safe-left));
  z-index:4;
}
.logo-img{ height:44px; width:auto; display:block; }

.social{
  position:absolute;
  left: calc(18px + var(--safe-left));
  bottom: calc(18px + var(--safe-bottom));
  display:flex;
  gap:12px;
  z-index:4;
}
.social-btn{
  width:36px; height:36px; display:grid; place-items:center;
  border-radius:999px; background:var(--btn-bg); text-decoration:none;
  backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
  outline:none; transition: background .2s ease;
}
.social-btn:hover,.social-btn:focus{ background:var(--btn-bg-hover); }
.social-btn svg{ width:18px;height:18px; fill:#fff; }

.credit{
  position:absolute;
  right: calc(18px + var(--safe-right));
  bottom: calc(18px + var(--safe-bottom));
  z-index:4;
  font-size:12px; color: var(--fg-dim); letter-spacing:.04em;
  text-shadow: 0 1px 1px rgba(0,0,0,.6);
}

/* Content */
.content{
  text-align:center;
  max-width:1100px;
  width:100%;
}
h1{
  margin:0 0 10px;
  font-weight:800;
  letter-spacing:.06em;
  font-size:clamp(44px, 9vw, 120px);
}
.sub{ opacity:.92; font-weight:600; margin-bottom:28px; }
.countdown{
  display:grid;
  grid-template-columns:repeat(4, minmax(90px, 1fr));
  gap:18px;
  max-width:720px;
  margin:0 auto 6px;
}
.unit{ padding:14px 10px; border-top:1px solid rgba(255,255,255,.45); border-bottom:1px solid rgba(255,255,255,.22); }
.num{ font-size:clamp(28px, 6vw, 56px); font-weight:800; line-height:1; }
.lab{ font-size:12px; letter-spacing:.22em; opacity:.86; }
.soon{ margin-top:8px; font-size:14px; color:var(--fg-dim); }

/* Mobile Optimierungen */
@media (max-width:768px){
  .center-wrap{
    padding: 80px 22px; /* Weniger Padding auf kleineren Screens */
  }
}

@media (max-width:480px){
  .social{ gap:10px }
  .social-btn{ width:34px; height:34px }
  
  .center-wrap{
    padding: 70px 18px; /* Noch weniger Padding auf sehr kleinen Screens */
  }
  
  .countdown{
    grid-template-columns:repeat(4, minmax(70px, 1fr));
    gap:12px;
  }
  
  .unit{ padding:12px 8px; }
}