/* Baustellenseite – nur lokale Ressourcen. */
@font-face {
  font-family: Lato; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/lato/lato-latin-400.woff2") format("woff2");
}
@font-face {
  font-family: Lato; font-style: normal; font-weight: 900; font-display: swap;
  src: url("../fonts/lato/lato-latin-900.woff2") format("woff2");
}

:root {
  --navy: #1B2F52;
  --navy-deep: #0E1A30;
  --green: #97C11F;
  --white: #FFFFFF;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

.construction {
  min-height: 100vh; min-height: 100dvh;
  display: grid; place-items: center; padding: 24px 16px;
  overflow: hidden; position: relative;
  font-family: Lato, "Helvetica Neue", Arial, sans-serif; color: var(--white);
  background: radial-gradient(120% 120% at 50% 0%, var(--navy) 0%, var(--navy-deep) 70%);
  -webkit-font-smoothing: antialiased;
}

/* Weiche, langsam wandernde Lichtflächen im Hintergrund */
.construction-glow {
  position: absolute; width: 60vmax; height: 60vmax; border-radius: 50%;
  filter: blur(90px); opacity: .35; pointer-events: none;
  animation: drift 18s ease-in-out infinite alternate;
}
.construction-glow--green { background: var(--green); top: -25vmax; left: -20vmax; }
.construction-glow--blue { background: #3E6FB8; bottom: -30vmax; right: -20vmax; animation-delay: -9s; }
@keyframes drift { to { transform: translate(8vmax, 6vmax) scale(1.1); } }

/* Glaskarte */
.construction-card {
  position: relative; z-index: 1; width: 100%; max-width: 640px;
  padding: clamp(28px, 6vw, 56px);
  text-align: center;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 24px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .35);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  animation: rise .7s cubic-bezier(.2, .8, .2, 1) both;
}
@keyframes rise { from { opacity: 0; transform: translateY(18px); } }

.construction-logo { display: block; width: 100%; max-width: 380px; height: auto; margin: 0 auto 28px; }

.construction-badge {
  display: inline-flex; align-items: center; gap: 10px; margin: 0 0 22px;
  padding: 7px 16px; border-radius: 999px;
  background: rgba(151, 193, 31, .14); border: 1px solid rgba(151, 193, 31, .45);
  color: var(--green); font-size: 14px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase;
}
.construction-dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--green);
  box-shadow: 0 0 0 0 rgba(151, 193, 31, .7); animation: pulse 1.8s infinite;
}
@keyframes pulse { 70% { box-shadow: 0 0 0 10px rgba(151, 193, 31, 0); } 100% { box-shadow: 0 0 0 0 rgba(151, 193, 31, 0); } }

.construction-title {
  margin: 0 0 12px; font-weight: 900; line-height: 1.2;
  font-size: clamp(24px, 4.4vw, 34px); letter-spacing: -.01em;
}
.construction-text { margin: 0 0 34px; font-size: clamp(17px, 2.4vw, 20px); color: rgba(255, 255, 255, .78); }

/* Countdown-Ring */
.construction-countdown {
  display: inline-flex; align-items: center; gap: 14px;
  position: relative; font-size: 16px; color: rgba(255, 255, 255, .78);
}
.construction-ring { width: 48px; height: 48px; transform: rotate(-90deg); flex: 0 0 48px; }
.construction-ring circle { fill: none; stroke-width: 4; }
.construction-ring-track { stroke: rgba(255, 255, 255, .15); }
.construction-ring-bar {
  stroke: var(--green); stroke-linecap: round;
  stroke-dasharray: 132; stroke-dashoffset: 0;
  animation: ring 10s linear forwards; /* Dauer setzt construction.php inline */
}
@keyframes ring { to { stroke-dashoffset: 132; } }
.construction-seconds {
  position: absolute; left: 0; width: 48px; text-align: center;
  font-weight: 900; font-size: 18px; color: var(--white); font-variant-numeric: tabular-nums;
}

/* ---------- Passwortseite (gleicher Hintergrund, schlichte Karte) ---------- */
.gate-card { max-width: 460px; }
.gate-form { margin: 8px 0 0; text-align: left; }
.gate-label { display: block; margin: 0 0 8px; font-size: 15px; color: rgba(255, 255, 255, .78); }
.gate-row { display: flex; gap: 10px; }
.gate-input {
  flex: 1 1 auto; min-width: 0; height: 48px; padding: 0 14px;
  font: inherit; font-size: 17px; color: var(--navy);
  background: var(--white); border: 2px solid transparent; border-radius: 10px; outline: none;
}
.gate-input:focus { border-color: var(--green); }
.gate-button {
  flex: 0 0 auto; height: 48px; padding: 0 20px; border: 0; border-radius: 10px;
  background: var(--green); color: var(--navy); font: inherit; font-weight: 900; cursor: pointer;
}
.gate-button:hover { filter: brightness(1.08); }
.gate-button:focus-visible { outline: 3px solid var(--white); outline-offset: 2px; }
.gate-error { margin: 12px 0 0; color: #FFB4A8; font-weight: 700; }

@media (prefers-reduced-motion: reduce) {
  .construction-glow, .construction-card, .construction-dot, .construction-ring-bar { animation: none; }
}

/* ---------- Versionsanzeige unten rechts ---------- */
.version-badge {
  position: fixed; right: 10px; bottom: 8px; z-index: 20;
  padding: 3px 8px; border-radius: 6px;
  background: rgba(27, 47, 82, .55); color: rgba(255, 255, 255, .85);
  font-size: 12px; line-height: 1.4; font-variant-numeric: tabular-nums;
  pointer-events: none;
}