/* bidiac.de — self-hosted, no external fonts/CDN/trackers (keeps the
   Datenschutzerklärung minimal: nothing leaves the visitor's browser except
   the request to this server). System font stack only. */
:root{
  --bg:#06070d;
  --ink:#eef1f6;
  --muted:#9aa3b2;
  --line:#1d2230;
  --brand:#6ea8fe;
  --brand2:#9b8cff;
  --brand3:#5eead4;
  --max:760px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg);
  color:var(--ink);
  line-height:1.6;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* ── Coming-soon hero ─────────────────────────────────────────────── */
.hero{
  position:relative;
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:48px 22px;
  isolation:isolate;
}

/* Drifting aurora blobs — the whole atmosphere, done in pure CSS. */
.aurora{position:absolute;inset:0;z-index:-2;overflow:hidden}
.blob{
  position:absolute;
  width:46vmax;height:46vmax;
  border-radius:50%;
  filter:blur(80px);
  opacity:.55;
  mix-blend-mode:screen;
  will-change:transform;
}
.b1{background:radial-gradient(circle at 30% 30%,var(--brand),transparent 60%);
    top:-12vmax;left:-8vmax;animation:drift1 22s ease-in-out infinite}
.b2{background:radial-gradient(circle at 70% 40%,var(--brand2),transparent 60%);
    bottom:-14vmax;right:-6vmax;animation:drift2 26s ease-in-out infinite}
.b3{background:radial-gradient(circle at 50% 50%,var(--brand3),transparent 60%);
    top:30%;left:35%;opacity:.32;animation:drift3 30s ease-in-out infinite}
@keyframes drift1{50%{transform:translate(8vmax,6vmax) scale(1.15)}}
@keyframes drift2{50%{transform:translate(-7vmax,-5vmax) scale(1.1)}}
@keyframes drift3{50%{transform:translate(-6vmax,7vmax) scale(1.2)}}

/* A faint vignette so text stays crisp over the colour. */
.hero::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:radial-gradient(120% 80% at 50% 40%,transparent 40%,rgba(6,7,13,.75) 100%);
}

.hero-inner{
  max-width:640px;
  animation:rise .9s cubic-bezier(.2,.7,.2,1) both;
}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

.eyebrow{
  display:inline-block;
  margin-bottom:18px;
  padding:7px 16px;
  border:1px solid var(--line);
  border-radius:999px;
  font-size:12px;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--muted);
  background:rgba(255,255,255,.02);
  backdrop-filter:blur(6px);
}

.brand{
  font-size:clamp(58px,15vw,128px);
  font-weight:800;
  letter-spacing:-.045em;
  line-height:.95;
  margin:0;
  background:linear-gradient(100deg,var(--brand) 0%,var(--brand2) 40%,var(--brand3) 70%,var(--brand) 100%);
  background-size:220% auto;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  animation:sheen 8s linear infinite;
}
@keyframes sheen{to{background-position:220% center}}

.tagline{
  max-width:34ch;
  margin:24px auto 0;
  font-size:clamp(17px,2.4vw,22px);
  color:#c7cdda;
}
.tagline .nowrap{white-space:nowrap}

/* Slim indeterminate "in progress" meter. */
.meter{
  width:min(280px,70vw);
  height:4px;
  margin:34px auto 0;
  border-radius:999px;
  background:rgba(255,255,255,.07);
  overflow:hidden;
}
.meter span{
  display:block;height:100%;width:40%;border-radius:999px;
  background:linear-gradient(90deg,var(--brand),var(--brand2));
  animation:load 2.4s ease-in-out infinite;
}
@keyframes load{
  0%{transform:translateX(-120%)}
  60%,100%{transform:translateX(330%)}
}

/* ── Footer / legal links (required in DE: Impressum + Datenschutz) ── */
.site-foot{
  position:relative;z-index:1;
  border-top:1px solid var(--line);
  padding:20px 22px;
  text-align:center;
  font-size:14px;
  color:var(--muted);
}
.site-foot a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line)}
.site-foot a:hover{border-color:var(--brand)}
.site-foot .sep{margin:0 10px;opacity:.5}

/* Respect users who prefer no motion. */
@media (prefers-reduced-motion:reduce){
  .blob,.brand,.meter span,.hero-inner{animation:none}
  .b3{opacity:.28}
}

/* ── Legal pages (Impressum / Datenschutz) ────────────────────────── */
.legal{
  width:100%;
  max-width:var(--max);
  margin:0 auto;
  padding:56px 22px;
  flex:1;
}
.legal a.back{
  color:var(--brand);text-decoration:none;font-size:15px;
}
.legal h1{font-size:clamp(28px,5vw,40px);letter-spacing:-.02em;margin:18px 0 6px}
.legal h2{font-size:20px;margin:34px 0 6px}
.legal p,.legal li{color:#cdd3df}
.legal .muted{color:var(--muted);font-size:14px}
.legal .fill{
  background:rgba(155,140,255,.12);
  border:1px dashed var(--brand2);
  border-radius:6px;
  padding:1px 7px;
  color:#dcd6ff;
  font-size:.95em;
}
.legal hr{border:none;border-top:1px solid var(--line);margin:40px 0}