/* TECTON Estrich UG — Coming-Soon / Baustelle (Light-Theme)
   DSGVO-freundlich: keine externen Requests, keine Cookies, keine Tracker.
   Farben aus dem Logo: Anthrazit #191919, Rot #C30A1E */

:root{
  --bg:#ffffff;
  --line:rgba(0,0,0,.10);
  --red:#c30a1e;
  --red-hi:#e11224;
  --fg:#16171a;
  --muted:#5b5f66;
  --muted-2:#8a8f97;
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--font);
  color:var(--fg);
  background:var(--bg);
  line-height:1.6;
  min-height:100vh;
  min-height:100svh;
  display:flex;
  flex-direction:column;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* Hintergrund: dezente helle Textur */
.bg{position:fixed;inset:0;z-index:-1;overflow:hidden}
.bg::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(120% 95% at 50% 0%, #ffffff 0%, #f6f6f4 70%, #eeedea 100%);
}
.bg::after{
  content:"";position:absolute;inset:-2px;
  background-image:repeating-linear-gradient(135deg,
     rgba(0,0,0,.020) 0 1px, transparent 1px 28px);
  opacity:.7;
}
.grain{
  position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.035;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* Layout */
.wrap{
  flex:1;
  display:flex;align-items:center;justify-content:center;
  padding:48px 22px;
}
main{
  width:100%;max-width:680px;text-align:center;
  animation:rise .8s cubic-bezier(.2,.7,.2,1) both;
}
@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

.logo-lockup{width:clamp(170px,32vw,240px);margin:0 auto 8px;
  display:flex;flex-direction:column;align-items:center}
.logo-symbol{width:100%;height:auto;display:block;
  filter:drop-shadow(0 12px 30px rgba(0,0,0,.10))}
.logo-text{width:86%;height:auto;display:block;margin-top:18px}

.rule{
  width:60px;height:3px;background:var(--red);border-radius:2px;
  margin:26px auto 30px;
}

.badge{
  display:inline-flex;align-items:center;gap:9px;
  font-size:.74rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);
  border:1px solid var(--line);border-radius:100px;
  padding:7px 15px 7px 13px;margin-bottom:22px;background:rgba(0,0,0,.015);
}
.dot{width:8px;height:8px;border-radius:50%;background:var(--red);
  box-shadow:0 0 0 0 rgba(195,10,30,.55);animation:pulse 2.2s infinite}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(195,10,30,.5)}
  70%{box-shadow:0 0 0 10px rgba(195,10,30,0)}
  100%{box-shadow:0 0 0 0 rgba(195,10,30,0)}
}

h1{
  font-size:clamp(1.5rem,5.4vw,2.15rem);
  font-weight:800;line-height:1.18;letter-spacing:-.01em;
  margin-bottom:16px;
}
.lead{
  color:var(--muted);font-size:clamp(1rem,2.6vw,1.1rem);
  max-width:46ch;margin:0 auto;
}

/* Footer */
footer{
  border-top:1px solid var(--line);
  padding:22px;text-align:center;
  color:var(--muted-2);font-size:.82rem;
}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}