:root{
  --bg:#070808;
  --panel:#111214;
  --panel2:#17191b;
  --paper:#dce5e8;
  --paper2:#b8c7cc;
  --white:#f4f5f4;
  --muted:#8f989b;
  --red:#bb3f36;
  --red2:#e05349;
  --line:rgba(255,255,255,.12);
  --max:1440px;
  --ease:cubic-bezier(.2,.75,.25,1);
}

*{box-sizing:border-box}

html{scroll-behavior:smooth}

body{
  margin:0;background:var(--bg);color:var(--white);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  line-height:1.45;overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
button{font:inherit}
::selection{background:var(--red);color:#fff}
.progress{position:fixed;left:0;top:0;height:3px;background:var(--red);width:0;z-index:1000}
.nav{
  position:fixed;top:0;left:0;right:0;z-index:900;
  display:flex;align-items:center;justify-content:space-between;
  padding:22px 4vw;mix-blend-mode:normal;
  background:linear-gradient(to bottom,rgba(7,8,8,.9));
}
.logo{font-weight:800;letter-spacing:-.06em;font-size:1.25rem}
.logo span{color:var(--red)}
.navlinks{display:flex;gap:26px;font-size:.75rem;text-transform:uppercase;letter-spacing:.13em;color:#c8ced0}
.navlinks a{opacity:.75;transition:.25s}
.navlinks a:hover{opacity:1;color:#fff}
.navcta{
  border:1px solid rgba(255,255,255,.25);padding:10px 16px;border-radius:999px;
  font-size:.72rem;text-transform:uppercase;letter-spacing:.12em;transition:.25s;
}
.navcta:hover{background:#fff;color:#000}
@media(max-width:800px){.navlinks{display:none}.nav{padding:18px 20px}}
.wrap{width:min(var(--max),92vw);margin:auto}
.hero{
  min-height:100svh;display:flex;align-items:flex-end;position:relative;overflow:hidden;
  padding:150px 0 70px;
}
.hero-bg{
  position:absolute;inset:0;
  background:
    radial-gradient(circle at 78% 38%,rgba(187,63,54,.18),transparent 22%),
    radial-gradient(circle at 60% 72%,rgba(159,184,194,.12),transparent 28%),
    linear-gradient(120deg,#070808 0%,#0b0d0e 48%,#101719 100%);
}
.hero-grid{
  position:absolute;inset:0;opacity:.16;
  background-image:linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px);
  background-size:80px 80px;mask-image:linear-gradient(to right,transparent,black 35%,black 85%,transparent);
}
.hero-circuit{
  position:absolute;right:-4vw;top:12vh;width:min(680px,58vw);height:70vh;opacity:.55;
  background:
    linear-gradient(90deg,transparent 0 14%,rgba(180,205,211,.16) 14.1% 14.3%,transparent 14.4% 36%,rgba(180,205,211,.11) 36.1% 36.3%,transparent 36.4% 67%,rgba(187,63,54,.30) 67.1% 67.3%,transparent 67.4%),
    linear-gradient(0deg,transparent 0 23%,rgba(180,205,211,.13) 23.1% 23.3%,transparent 23.4% 49%,rgba(180,205,211,.10) 49.1% 49.3%,transparent 49.4% 77%,rgba(187,63,54,.22) 77.1% 77.3%,transparent 77.4%);
  mask-image:linear-gradient(to left,black,transparent 92%);transform:skewY(-8deg);
}
.hero-circuit:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 14% 23%,#dce5e8 0 2px,transparent 3px),radial-gradient(circle at 36% 49%,#dce5e8 0 2px,transparent 3px),radial-gradient(circle at 67% 77%,#bb3f36 0 3px,transparent 4px),radial-gradient(circle at 82% 31%,#dce5e8 0 2px,transparent 3px)}
.hero-circuit:after{content:"";position:absolute;right:12%;top:26%;width:170px;height:110px;border:1px solid rgba(220,229,232,.24);background:linear-gradient(90deg,transparent 48%,rgba(220,229,232,.13) 49% 51%,transparent 52%);box-shadow:0 0 0 22px rgba(255,255,255,.015),0 0 50px rgba(187,63,54,.08)}
.hero-copy{position:relative;z-index:2;max-width:1120px}
.eyebrow{
  display:flex;gap:12px;align-items:center;color:var(--paper2);
  text-transform:uppercase;letter-spacing:.18em;font-size:.72rem;margin-bottom:28px
}
.eyebrow i{width:7px;height:7px;border-radius:50%;background:var(--red);display:inline-block;box-shadow:0 0 20px rgba(187,63,54,.8)}
h1{
  font-size:clamp(4.2rem,9.7vw,10rem);line-height:.82;letter-spacing:-.075em;
  margin:0 0 36px;font-weight:700;max-width:1150px;
}
.hero .accent{color:var(--paper2)}
.hero-sub{
  display:grid;grid-template-columns:1fr minmax(280px,440px);gap:60px;align-items:end;
}
.hero-sub p{font-size:clamp(1.1rem,1.8vw,1.55rem);max-width:690px;color:#d7dcdd;margin:0}
.hero-meta{display:flex;flex-direction:column;gap:16px;border-left:1px solid var(--line);padding-left:22px}
.hero-meta span{font-size:.72rem;text-transform:uppercase;letter-spacing:.13em;color:var(--muted)}
.hero-meta strong{font-size:1rem;font-weight:500}
.scrollhint{margin-top:70px;font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:#899194;display:flex;gap:12px;align-items:center}
.scrollhint:before{content:"";width:48px;height:1px;background:var(--red)}
@media(max-width:800px){.hero-sub{grid-template-columns:1fr;gap:30px}.hero-meta{border-left:0;border-top:1px solid var(--line);padding:18px 0 0}.hero{padding-bottom:48px}}

.section{padding:clamp(90px,12vw,180px) 0;position:relative}
.light{background:var(--paper);color:#0b0d0e}
.light .muted{color:#536064}
.light .eyebrow{color:#4b5a5e}
.dark2{background:#0d0f10}
.section-head{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(260px,.55fr);gap:80px;align-items:start;margin-bottom:70px}
.section h2{
  font-size:clamp(3rem,6.7vw,7rem);line-height:.9;letter-spacing:-.07em;margin:0;font-weight:650
}
.section-head p{font-size:1.05rem;color:var(--muted);max-width:470px;margin:8px 0 0}
.light .section-head p{color:#526066}
.kicker{font-size:.68rem;letter-spacing:.17em;text-transform:uppercase;color:var(--red);margin-bottom:22px}
@media(max-width:800px){.section-head{grid-template-columns:1fr;gap:25px;margin-bottom:45px}}

.media{
  position:relative;min-height:560px;border-radius:2px;overflow:hidden;
  background:#101315;border:1px solid rgba(255,255,255,.08);
}
.media img{width:100%;height:100%;display:block;object-fit:cover;position:absolute;inset:0}.media:has(img) .media-caption,.media:has(img) .placeholder-label{z-index:3}
.media-placeholder{
  min-height:100%;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;
  background:
    linear-gradient(145deg,rgba(255,255,255,.04),transparent 35%),
    radial-gradient(circle at 72% 30%,rgba(187,63,54,.28),transparent 19%),
    linear-gradient(135deg,#141719,#252b2e 55%,#090a0b);
}
.media-placeholder:before{
  content:"";position:absolute;width:62%;aspect-ratio:1;border-radius:50%;border:1px solid rgba(220,229,232,.25);
  box-shadow:0 0 0 70px rgba(255,255,255,.015),0 0 0 140px rgba(255,255,255,.012);
}
.media-placeholder:after{
  content:"";position:absolute;width:52%;height:1px;background:rgba(255,255,255,.22);transform:rotate(-23deg)
}
.placeholder-label{
  position:absolute;left:24px;bottom:22px;z-index:2;font-size:.64rem;letter-spacing:.15em;text-transform:uppercase;color:#cbd3d5;
}
.placeholder-core{
  width:160px;height:100px;border:1px solid rgba(255,255,255,.45);background:rgba(7,8,8,.5);
  transform:skew(-10deg);display:flex;align-items:center;justify-content:center;z-index:2;
  box-shadow:0 25px 70px rgba(0,0,0,.35)
}
.placeholder-core span{font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:#dbe1e2}
.media-caption{
  position:absolute;right:18px;top:18px;z-index:2;font-size:.65rem;text-transform:uppercase;letter-spacing:.14em;
  padding:9px 11px;border:1px solid rgba(255,255,255,.18);background:rgba(0,0,0,.25);backdrop-filter:blur(8px)
}

.statement{
  min-height:85vh;display:flex;align-items:center;background:#0d0f10;position:relative;overflow:hidden
}
.statement:before{
  content:"";position:absolute;width:70vw;height:70vw;border-radius:50%;border:1px solid rgba(187,63,54,.18);right:-30vw;top:-12vw
}
.statement h2{font-size:clamp(4rem,10vw,12rem);max-width:1250px}
.statement h2 em{font-style:normal;color:var(--paper2)}
.statement .side{max-width:560px;margin-top:50px;font-size:1.1rem;color:#aab3b6}

.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:rgba(255,255,255,.08)}
.card{background:#111315;padding:38px;min-height:320px;display:flex;flex-direction:column;justify-content:space-between;transition:transform .4s var(--ease),background .4s}
.card:hover{background:#181b1d;transform:translateY(-8px)}
.card .num{font-size:.7rem;color:var(--red);letter-spacing:.12em}
.card h3{font-size:2rem;letter-spacing:-.05em;margin:35px 0 12px}
.card p{color:#91999c;margin:0}
@media(max-width:900px){.cards{grid-template-columns:1fr}}

.split{display:grid;grid-template-columns:.72fr 1.28fr;gap:70px;align-items:start}
.big-list{display:grid;grid-template-columns:1fr 1fr;gap:0 35px;border-top:1px solid var(--line)}
.big-list div{padding:18px 0;border-bottom:1px solid var(--line);font-size:1rem}
.big-list span{display:block;color:var(--muted);font-size:.72rem;margin-top:5px}
@media(max-width:800px){.split{grid-template-columns:1fr;gap:40px}.big-list{grid-template-columns:1fr}}

.feature-row{display:grid;grid-template-columns:1fr 1fr;gap:2px;background:rgba(255,255,255,.08)}
.feature{padding:65px 45px;min-height:430px;background:#111315;position:relative;overflow:hidden}
.feature:nth-child(2){background:var(--paper);color:#0b0d0e}
.feature .index{font-size:.7rem;color:var(--red);letter-spacing:.16em}
.feature h3{font-size:clamp(2.3rem,4vw,4.5rem);letter-spacing:-.06em;line-height:.92;margin:60px 0 25px}
.feature p{max-width:520px;color:#929b9e}
.feature:nth-child(2) p{color:#526066}
@media(max-width:800px){.feature-row{grid-template-columns:1fr}}

.timeline{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(0,0,0,.15)}
.timeline-item{padding:30px;background:#cdd9dd;min-height:230px}
.timeline-item b{font-size:2.6rem;letter-spacing:-.06em}
.timeline-item strong{display:block;font-size:.9rem;margin:22px 0 10px}
.timeline-item p{font-size:.88rem;color:#526066;margin:0}
@media(max-width:900px){.timeline{grid-template-columns:1fr 1fr}}@media(max-width:600px){.timeline{grid-template-columns:1fr}}

.quote{
  background:#b8c7cc;color:#0b0d0e;padding:clamp(60px,9vw,120px);
  position:relative;overflow:hidden
}
.quote:after{content:"“";position:absolute;right:4vw;top:-80px;font-size:30rem;line-height:1;color:rgba(255,255,255,.25)}
.quote blockquote{font-size:clamp(2.5rem,5vw,5.5rem);line-height:.95;letter-spacing:-.065em;max-width:1000px;margin:0;position:relative;z-index:1}
.quote figcaption{margin-top:35px;font-size:.8rem;text-transform:uppercase;letter-spacing:.14em;position:relative;z-index:1}

.benefits{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line)}
.benefit{padding:28px 30px;background:#111315;min-height:155px}
.benefit strong{font-size:1.1rem}
.benefit p{color:var(--muted);font-size:.92rem;margin:10px 0 0}
@media(max-width:700px){.benefits{grid-template-columns:1fr}}

.cta{
  min-height:90vh;display:flex;align-items:center;background:var(--red);color:#fff;position:relative;overflow:hidden
}
.cta:before,.cta:after{content:"";position:absolute;border:1px solid rgba(255,255,255,.25);border-radius:50%}
.cta:before{width:80vw;height:80vw;right:-35vw;top:-10vw}
.cta:after{width:46vw;height:46vw;right:-17vw;top:7vw}
.cta h2{font-size:clamp(4rem,10vw,11rem);line-height:.83;letter-spacing:-.08em;margin:0 0 45px;max-width:1100px}
.cta p{font-size:1.2rem;max-width:650px;color:#f8dedd}
.cta-buttons{display:flex;gap:14px;flex-wrap:wrap;margin-top:40px}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 22px;border-radius:999px;border:1px solid rgba(255,255,255,.55);text-transform:uppercase;letter-spacing:.13em;font-size:.7rem;transition:.25s}
.btn.primary{background:#fff;color:#111;border-color:#fff}
.btn:hover{transform:translateY(-3px);box-shadow:0 12px 30px rgba(0,0,0,.16)}

.footer{padding:30px 4vw;background:#070808;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:20px;color:#788184;font-size:.72rem}
@media(max-width:700px){.footer{flex-direction:column}}

.reveal{opacity:0;transform:translateY(50px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
.reveal.visible{opacity:1;transform:none}
.scale-in{opacity:0;transform:scale(.94);transition:opacity 1.1s var(--ease),transform 1.1s var(--ease)}
.scale-in.visible{opacity:1;transform:scale(1)}
.line{height:1px;background:var(--line);transform-origin:left;transform:scaleX(0);transition:transform 1.2s var(--ease)}
.line.visible{transform:scaleX(1)}
.small-note{font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:#6e777a}

/* =========================================================
   CONTAO 6 · CONTACT FORM
   Replaces the old inline demo-form styling.
   ========================================================= */

#kontaktformular{
  width:100%;
  max-width:680px;
  margin-top:70px;
}

#kontaktformular .ce_form,
#kontaktformular form{
  width:100%;
}

#kontaktformular form{
  margin:0;
}

#kontaktformular .formbody{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  width:100%;
}

#kontaktformular .widget{
  min-width:0;
  margin:0;
  padding:0;
}

#kontaktformular .widget-textarea,
#kontaktformular .widget-altcha,
#kontaktformular .widget-submit{
  grid-column:1 / -1;
}

#kontaktformular input[type="hidden"]{
  display:none;
}

#kontaktformular input[type="text"],
#kontaktformular input[type="email"],
#kontaktformular textarea{
  display:block;
  box-sizing:border-box;
  width:100%;
  margin:0;
  padding:16px 18px;
  border:0;
  border-radius:2px;
  background:rgba(255,255,255,.13);
  color:#fff;
  font-family:inherit;
  font-size:1rem;
  font-weight:400;
  line-height:1.45;
  outline:none;
  appearance:none;
  transition:background .25s ease,box-shadow .25s ease;
}

#kontaktformular input[type="text"],
#kontaktformular input[type="email"]{
  height:54px;
}

#kontaktformular textarea{
  min-height:130px;
  resize:vertical;
}

#kontaktformular input::placeholder,
#kontaktformular textarea::placeholder{
  color:rgba(255,255,255,.62);
  opacity:1;
}

#kontaktformular input[type="text"]:focus,
#kontaktformular input[type="email"]:focus,
#kontaktformular textarea:focus{
  background:rgba(255,255,255,.18);
  box-shadow:0 0 0 1px rgba(255,255,255,.35);
}

#kontaktformular .widget-altcha{
  margin-top:2px;
  color:rgba(255,255,255,.72);
  font-size:.78rem;
}

#kontaktformular .widget-altcha .warning{
  margin:0;
  padding:12px 14px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:2px;
  background:rgba(255,255,255,.08);
  color:rgba(255,255,255,.72);
  font-size:.75rem;
  line-height:1.5;
}

#kontaktformular altcha-widget{
  display:block;
  max-width:100%;
}

#kontaktformular .widget-submit{
  margin-top:2px;
}

#kontaktformular button[type="submit"],
#kontaktformular input[type="submit"]{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:52px;
  padding:0 22px;
  border:1px solid #fff;
  border-radius:999px;
  background:#fff;
  color:#111;
  font-family:inherit;
  font-size:.7rem;
  font-weight:600;
  line-height:1;
  letter-spacing:.13em;
  text-transform:uppercase;
  cursor:pointer;
  appearance:none;
  transition:transform .25s ease,box-shadow .25s ease,opacity .25s ease;
}

#kontaktformular button[type="submit"]:hover,
#kontaktformular input[type="submit"]:hover{
  transform:translateY(-3px);
  box-shadow:0 12px 30px rgba(0,0,0,.16);
}

#kontaktformular button[type="submit"]:focus-visible,
#kontaktformular input[type="submit"]:focus-visible{
  outline:2px solid rgba(255,255,255,.85);
  outline-offset:4px;
}

#kontaktformular button[type="submit"]:disabled,
#kontaktformular input[type="submit"]:disabled{
  opacity:.55;
  cursor:wait;
  transform:none;
  box-shadow:none;
}

/* Keep compatibility with both the original JS and the current JS. */
.reveal.is-visible{opacity:1;transform:none}
.scale-in.is-visible{opacity:1;transform:scale(1)}
.line.is-visible{transform:scaleX(1)}

@media(max-width:700px){
  #kontaktformular{margin-top:50px}
  #kontaktformular .formbody{grid-template-columns:1fr}
  #kontaktformular .widget-text,
  #kontaktformular .widget-textarea,
  #kontaktformular .widget-altcha,
  #kontaktformular .widget-submit{grid-column:1 / -1}
  #kontaktformular input[type="text"],
  #kontaktformular input[type="email"]{height:52px}
}

@media(prefers-reduced-motion:reduce){
  .reveal.is-visible,
  .scale-in.is-visible,
  .line.is-visible{opacity:1;transform:none}
}
/* =========================================================
   LP1 SCROLL REVEAL
   ========================================================= */

.reveal {
  opacity: 0;
  transform: translateY(50px);
  transition:
    opacity 1s var(--ease),
    transform 1s var(--ease);
}

.reveal.visible {
  opacity: 1 !important;
  transform: none !important;
}

.scale-in {
  opacity: 0;
  transform: scale(.94);
  transition:
    opacity 1.1s var(--ease),
    transform 1.1s var(--ease);
}

.scale-in.visible {
  opacity: 1 !important;
  transform: scale(1) !important;
}

.line {
  height: 1px;
  background: var(--line);
  transform-origin: left;
  transform: scaleX(0);
  transition: transform 1.2s var(--ease);
}

.line.visible {
  transform: scaleX(1) !important;
}