/*
Theme Name: Wartungsseite Bald Online
Theme URI: 
Author: 
Description: Minimalistisches Ein-Seiten-Theme. Zeigt ausschliesslich eine animierte "Wir sind bald wieder online"-Wartungsseite an - keine weiteren Templates, Menues oder Widgets.
Version: 1.0
License: GPL v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: wartungsseite-bald-online
*/

*{ box-sizing:border-box; margin:0; padding:0; }

html, body{
  min-height:100%;
  font-family:'Poppins', Arial, sans-serif;
  overflow-x:hidden;
  background:#0b1120;
}

/* Hintergrund mit wandernden Farbflaechen */
.bg{
  position:fixed;
  inset:0;
  background:
    radial-gradient(circle at 20% 20%, rgba(99,102,241,0.35), transparent 45%),
    radial-gradient(circle at 80% 30%, rgba(236,72,153,0.30), transparent 45%),
    radial-gradient(circle at 50% 85%, rgba(56,189,248,0.30), transparent 45%),
    #0b1120;
  z-index:0;
}
.blob{
  position:absolute;
  border-radius:50%;
  filter:blur(60px);
  opacity:0.55;
}
.blob--1{
  width:420px; height:420px;
  background:#6366f1;
  top:-120px; left:-100px;
  animation:float1 14s ease-in-out infinite;
}
.blob--2{
  width:360px; height:360px;
  background:#ec4899;
  bottom:-100px; right:-80px;
  animation:float2 16s ease-in-out infinite;
}
.blob--3{
  width:300px; height:300px;
  background:#38bdf8;
  bottom:20%; left:8%;
  animation:float3 18s ease-in-out infinite;
}
@keyframes float1{
  0%,100%{ transform:translate(0,0) scale(1); }
  50%{ transform:translate(60px,40px) scale(1.1); }
}
@keyframes float2{
  0%,100%{ transform:translate(0,0) scale(1); }
  50%{ transform:translate(-50px,-30px) scale(1.15); }
}
@keyframes float3{
  0%,100%{ transform:translate(0,0) scale(1); }
  50%{ transform:translate(40px,-40px) scale(0.9); }
}

/* Karte */
.wrap{
  position:relative;
  z-index:1;
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
}
.card{
  width:100%;
  max-width:620px;
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.12);
  border-radius:24px;
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  box-shadow:0 30px 80px rgba(0,0,0,0.45);
  padding:56px 44px;
  text-align:center;
  animation:cardIn 0.9s ease-out both;
}
@keyframes cardIn{
  from{ opacity:0; transform:translateY(24px) scale(0.98); }
  to{ opacity:1; transform:translateY(0) scale(1); }
}

/* Icon */
.icon-wrap{
  position:relative;
  width:110px;
  height:110px;
  margin:0 auto 32px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.icon-ring{
  position:absolute;
  inset:0;
  border-radius:50%;
  background:radial-gradient(circle, rgba(251,191,36,0.25), transparent 70%);
  animation:pulse 2.4s ease-in-out infinite;
}
@keyframes pulse{
  0%,100%{ transform:scale(0.9); opacity:0.6; }
  50%{ transform:scale(1.15); opacity:1; }
}
.icon-wrap svg{
  position:relative;
  z-index:1;
  animation:spin 7s linear infinite;
}
@keyframes spin{
  from{ transform:rotate(0deg); }
  to{ transform:rotate(360deg); }
}

h1{
  font-size:30px;
  font-weight:700;
  color:#ffffff;
  line-height:1.35;
  letter-spacing:-0.3px;
}
h1 span{
  display:block;
  background:linear-gradient(90deg,#fbbf24,#f97316);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

p.sub{
  margin-top:16px;
  font-size:16px;
  color:#cbd5e1;
  line-height:1.6;
}

/* Ladepunkte */
.dots{
  margin-top:32px;
  display:flex;
  gap:10px;
  justify-content:center;
}
.dots span{
  width:10px;
  height:10px;
  border-radius:50%;
  background:#fbbf24;
  animation:bounce 1.4s ease-in-out infinite;
}
.dots span:nth-child(2){ animation-delay:0.2s; }
.dots span:nth-child(3){ animation-delay:0.4s; }
@keyframes bounce{
  0%,80%,100%{ transform:translateY(0); opacity:0.4; }
  40%{ transform:translateY(-10px); opacity:1; }
}

/* Fortschrittsbalken */
.progress{
  margin-top:32px;
  height:6px;
  width:100%;
  background:rgba(255,255,255,0.1);
  border-radius:6px;
  overflow:hidden;
}
.progress-fill{
  height:100%;
  width:35%;
  border-radius:6px;
  background:linear-gradient(90deg,#fbbf24,#f97316);
  animation:progressMove 3s ease-in-out infinite;
}
@keyframes progressMove{
  0%{ width:15%; }
  50%{ width:70%; }
  100%{ width:15%; }
}

@media (max-width:640px){
  .card{ padding:40px 24px; }
  h1{ font-size:24px; }
}