/* ============================================================
   33automate — "Hier wird gerade gebaut" (Startseite waehrend des Umbaus)
   Dunkel · Marken-Blau #2D5BFF · Geist · Orbitron nur in der Wortmarke
   Ablauf: Netz blendet ein und kommt zur Ruhe, das 33-Zeichen zeichnet sich,
   die Wortmarke faehrt rein, dann Text und Formular. Danach steht alles still.
   ============================================================ */

@font-face{font-family:'Geist';src:url('fonts/Geist-Variable.woff2') format('woff2-variations');font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:'Orbitron';src:url('fonts/Orbitron-Variable.woff2') format('woff2-variations');font-weight:400 900;font-style:normal;font-display:swap}

:root{
  --bg:#07080C;--bg-field:#10131B;
  --text:#F4F6FA;--text-muted:#99A2B2;
  --line:#262B38;--line-strong:#3A4152;
  --accent:#2D5BFF;--accent-hover:#4B72FF;
  --ok:#34D399;--err:#F87171;
  --font:'Geist','SF Pro Text',system-ui,sans-serif;
  --pad-x:clamp(20px,4vw,40px);
  --ease-out:cubic-bezier(.16,1,.3,1);
}

*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--bg)}
body{min-height:100svh;display:flex;flex-direction:column;font-family:var(--font);background:var(--bg);color:var(--text);line-height:1.6;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:clip}
a{color:inherit}
::selection{background:var(--accent);color:#fff}
:focus-visible{outline:2px solid var(--accent-hover);outline-offset:3px;border-radius:6px}

/* ---------- Netz im Hintergrund ----------
   Zur Mitte hin ausgeblendet, damit nichts hinter Text und Formular laeuft. */
.net{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;
  -webkit-mask-image:radial-gradient(ellipse 46% 60% at 50% 50%,transparent 55%,#000 100%);
          mask-image:radial-gradient(ellipse 46% 60% at 50% 50%,transparent 55%,#000 100%)}
@media (max-width:700px){
  .net{-webkit-mask-image:linear-gradient(180deg,#000 0,transparent 26%,transparent 88%,#000 100%);
               mask-image:linear-gradient(180deg,#000 0,transparent 26%,transparent 88%,#000 100%)}
}

.soon{position:relative;z-index:1;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:clamp(3rem,8vw,5rem) var(--pad-x) 2rem}
.soon__inner{width:100%;max-width:480px;text-align:center}

/* ---------- Logo ---------- */
.logo{display:inline-flex;align-items:center;gap:clamp(12px,2.4vw,18px);margin-bottom:clamp(2.25rem,6vw,3rem)}
.logo__mark{width:clamp(64px,16vw,88px);height:auto;overflow:visible}
.logo__mark path{fill:var(--accent);stroke:var(--accent);stroke-width:0;stroke-linejoin:round}
.logo__word{font-family:'Orbitron',var(--font);font-weight:600;font-size:clamp(1.55rem,6.4vw,2.2rem);letter-spacing:0.01em;color:#fff;line-height:1;white-space:nowrap}
.logo__word span{display:inline-block}

h1{font-weight:680;font-size:clamp(2rem,8vw,3rem);line-height:1.04;letter-spacing:-0.04em}
.soon__lead{margin-top:1rem;font-size:clamp(1rem,2.6vw,1.1rem);color:var(--text-muted)}

/* ---------- Formular ---------- */
.form{margin-top:2.25rem;display:grid;gap:0.85rem;text-align:left}
.form label{display:grid;gap:0.4rem;font-size:0.85rem;font-weight:500;color:var(--text-muted)}
.form input,.form textarea{width:100%;font:inherit;font-size:1rem;color:var(--text);background:var(--bg-field);
  border:1px solid var(--line-strong);border-radius:12px;padding:0.85rem 1rem;transition:border-color .2s}
.form textarea{min-height:130px;resize:vertical}
.form input:focus,.form textarea:focus{outline:none;border-color:var(--accent-hover)}
.form__hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form__note{font-size:0.8rem;color:var(--text-muted)}
.form__note a{text-decoration:underline;text-underline-offset:2px}
.form button{margin-top:0.35rem;width:100%;padding:1.05rem 1.5rem;border:0;border-radius:99px;background:var(--accent);color:#fff;
  font:inherit;font-size:1rem;font-weight:580;cursor:pointer;transition:background .2s}
.form button:hover{background:var(--accent-hover)}
.form__msg{padding:0.9rem 1rem;border-radius:12px;font-size:0.95rem;text-align:center}
.form__msg--ok{color:var(--ok);border:1px solid rgba(52,211,153,.35)}
.form__msg--err{color:var(--err);border:1px solid rgba(248,113,113,.35)}
.form__msg[hidden]{display:none}

.soon__more{display:inline-block;margin-top:1.75rem;font-size:0.92rem;color:var(--text-muted);text-decoration:none;transition:color .2s}
.soon__more:hover{color:var(--text)}

.foot{position:relative;z-index:1;padding:1.25rem var(--pad-x) 1.75rem;display:flex;flex-wrap:wrap;justify-content:center;gap:0.4rem 1.25rem;font-size:0.82rem;color:var(--text-muted)}
.foot a{text-decoration:none;transition:color .2s}
.foot a:hover{color:var(--text)}

/* ============================================================
   ANIMATION (nur mit Bewegung erlaubt; ohne JS/mit reduzierter
   Bewegung steht alles sofort da)
   ============================================================ */
@media (prefers-reduced-motion:no-preference){
  .net{animation:fade 2.4s ease-out both}

  /* Zeichen: Kontur laeuft, danach fuellt sich die Flaeche */
  .logo__mark path{stroke-width:120;stroke-dasharray:1;stroke-dashoffset:1;fill-opacity:0;
    animation:draw 1.3s cubic-bezier(.65,0,.35,1) forwards,fill .6s ease-out forwards}
  .logo__mark path:nth-child(1){animation-delay:.25s,1.35s}
  .logo__mark path:nth-child(2){animation-delay:.95s,1.55s}
  .logo__mark path:nth-child(3){animation-delay:.45s,1.45s}
  .logo__mark path:nth-child(4){animation-delay:.6s,1.55s}
  .logo__mark path:nth-child(5){animation-delay:1.05s,1.65s}
  .logo__mark path:nth-child(6){animation-delay:.35s,1.45s}

  /* Wortmarke: Buchstaben kommen einzeln */
  .logo__word span{opacity:0;transform:translateX(-10px);filter:blur(4px);animation:letter .55s var(--ease-out) forwards}
  .logo__word span:nth-child(1){animation-delay:1.55s}
  .logo__word span:nth-child(2){animation-delay:1.6s}
  .logo__word span:nth-child(3){animation-delay:1.65s}
  .logo__word span:nth-child(4){animation-delay:1.7s}
  .logo__word span:nth-child(5){animation-delay:1.75s}
  .logo__word span:nth-child(6){animation-delay:1.8s}
  .logo__word span:nth-child(7){animation-delay:1.85s}
  .logo__word span:nth-child(8){animation-delay:1.9s}

  .soon__inner > :not(.logo){animation:rise .8s var(--ease-out) both}
  .soon__inner > h1{animation-delay:2.05s}
  .soon__inner > .soon__lead{animation-delay:2.15s}
  .soon__inner > .form{animation-delay:2.25s}
  .soon__inner > .soon__more{animation-delay:2.35s}
  .foot{animation:fade .8s ease-out 2.4s both}

  @keyframes draw{to{stroke-dashoffset:0}}
  @keyframes fill{to{fill-opacity:1;stroke-width:0}}
  @keyframes letter{to{opacity:1;transform:none;filter:none}}
  @keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
  @keyframes fade{from{opacity:0}to{opacity:1}}
}