:root{
  --navy:#061f49;
  --blue:#1e58c9;
  --green:#67c430;
  --mint:#eaf9e2;
  --sky:#eef6ff;
  --text:#12305b;
  --muted:#5a6678;
  --border:#d9e5f1;
  --white:#ffffff;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Arial, Helvetica, sans-serif;
  color:var(--text);
  background:#fff;
  overflow-x:hidden;
}
.bg-orb{
  position:fixed;
  width:520px;
  height:520px;
  border-radius:50%;
  filter:blur(80px);
  opacity:.22;
  pointer-events:none;
  z-index:-1;
}
.orb-1{background:var(--green); top:-180px; right:-130px; animation:floatOrb 11s ease-in-out infinite}
.orb-2{background:var(--blue); bottom:-240px; left:-160px; animation:floatOrb 14s ease-in-out infinite reverse}
@keyframes floatOrb{0%,100%{transform:translate(0,0)}50%{transform:translate(30px,40px)}}

.container{width:min(1240px, calc(100% - 42px)); margin:0 auto}
.topbar{
  position:sticky; top:0; z-index:30;
  background:rgba(255,255,255,.78);
  backdrop-filter:blur(18px);
  border-bottom:1px solid rgba(217,229,241,.8);
}
.nav{
  display:flex; justify-content:space-between; align-items:center; padding:16px 0;
}
.brand{display:flex; align-items:center; gap:9px; text-decoration:none}
.speed-lines{
  display:inline-block; width:32px; height:18px;
  background:
    linear-gradient(var(--navy),var(--navy)) 0 2px/24px 3px no-repeat,
    linear-gradient(var(--navy),var(--navy)) 8px 8px/18px 3px no-repeat,
    linear-gradient(var(--navy),var(--navy)) 0 14px/24px 3px no-repeat;
  opacity:.9;
}
.arrow{color:var(--green); font-size:31px; font-weight:900; transform:translateX(-8px)}
.brand-text{font-size:28px; font-weight:900; letter-spacing:-.04em}
.blue{color:var(--navy)}
.green{color:var(--green)}
nav{display:flex; gap:24px; align-items:center}
nav a{color:var(--navy); text-decoration:none; font-weight:800; font-size:14px}
.cta-small{background:var(--green); color:white; padding:10px 16px; border-radius:999px; box-shadow:0 10px 24px rgba(103,196,48,.25)}

.hero{padding:68px 0 52px}
.hero-shell{
  display:grid; grid-template-columns:.78fr 1.22fr; gap:42px; align-items:center;
}
.eyebrow{
  color:var(--green);
  text-transform:uppercase;
  letter-spacing:.09em;
  font-size:13px;
  font-weight:900;
  margin:0 0 14px;
}
h1{
  margin:0 0 22px;
  font-size:clamp(46px,6vw,86px);
  line-height:.94;
  letter-spacing:-.065em;
  color:var(--navy);
}
h1 span{color:var(--green)}
.lead{
  font-size:20px;
  color:var(--muted);
  line-height:1.65;
  margin:0 0 28px;
  max-width:610px;
}
.hero-actions{display:flex; flex-wrap:wrap; gap:14px; margin-bottom:24px}
.button{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:50px; padding:14px 20px; border-radius:14px; text-decoration:none; font-weight:900;
}
.primary{background:var(--navy); color:#fff; box-shadow:0 16px 32px rgba(6,31,73,.22)}
.ghost{background:#fff; color:var(--navy); border:1px solid var(--border)}
.metric-row{
  display:grid; grid-template-columns:repeat(3,1fr); gap:12px; max-width:650px;
}
.metric-row div{
  border:1px solid var(--border); background:rgba(255,255,255,.75);
  border-radius:18px; padding:14px; box-shadow:0 12px 26px rgba(6,31,73,.05);
}
.metric-row strong{display:block; color:var(--green); font-size:18px}
.metric-row span{font-size:13px; color:var(--muted); font-weight:700}

.hero-visual{
  position:relative;
  border-radius:34px;
  transform-style:preserve-3d;
}
.visual-glow{
  position:absolute; inset:9% 7%; border-radius:40px; background:linear-gradient(135deg, rgba(30,88,201,.18), rgba(103,196,48,.18));
  filter:blur(34px); z-index:-1; animation:pulseGlow 4.5s ease-in-out infinite;
}
@keyframes pulseGlow{0%,100%{opacity:.45; transform:scale(.98)}50%{opacity:.85; transform:scale(1.02)}}
.hero-visual img{
  display:block; width:100%; border-radius:28px;
  box-shadow:0 30px 75px rgba(6,31,73,.13);
  border:1px solid var(--border);
  animation:floatVisual 5.5s ease-in-out infinite;
}
@keyframes floatVisual{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.floating-card{
  position:absolute; display:flex; align-items:center; gap:9px;
  background:rgba(255,255,255,.92); backdrop-filter:blur(10px);
  border:1px solid var(--border); border-radius:999px; padding:11px 16px;
  box-shadow:0 18px 34px rgba(6,31,73,.12);
  color:var(--navy); font-size:14px;
  animation:floatCard 4s ease-in-out infinite;
}
.floating-card span{font-size:20px}
.card-a{top:8%; left:-18px}
.card-b{right:-15px; top:42%; animation-delay:.7s}
.card-c{left:18%; bottom:-14px; animation-delay:1.2s}
@keyframes floatCard{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}

.ticker{
  overflow:hidden; border-top:1px solid var(--border); border-bottom:1px solid var(--border);
  background:linear-gradient(90deg,#fff,var(--sky),#fff);
}
.ticker-track{
  display:flex; gap:38px; width:max-content; padding:15px 0;
  animation:ticker 24s linear infinite;
}
.ticker span{
  font-weight:900; color:var(--navy); opacity:.72; text-transform:uppercase; letter-spacing:.07em;
}
@keyframes ticker{from{transform:translateX(0)}to{transform:translateX(-50%)}}

.section{padding:86px 0}
.split{display:grid; grid-template-columns:.9fr 1.1fr; gap:48px; align-items:center}
h2{
  font-size:clamp(32px,4vw,52px);
  line-height:1.04; letter-spacing:-.045em; color:var(--navy); margin:0;
}
.glass-panel{
  background:rgba(255,255,255,.72); border:1px solid var(--border); border-radius:28px; padding:34px;
  box-shadow:0 24px 60px rgba(6,31,73,.07); backdrop-filter:blur(18px);
}
.glass-panel p{margin:0; color:var(--muted); font-size:20px; line-height:1.7}

.section-head{max-width:820px; margin:0 auto 34px; text-align:center}
.section-head h2{margin-bottom:16px}
.service-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:18px}
.service-card{
  position:relative; overflow:hidden;
  background:#fff; border:1px solid var(--border); border-radius:26px; padding:28px;
  box-shadow:0 18px 50px rgba(6,31,73,.07); transition:.25s ease;
}
.service-card:before{
  content:""; position:absolute; inset:auto -40px -45px auto; width:130px; height:130px; border-radius:50%;
  background:rgba(103,196,48,.12); transition:.25s ease;
}
.service-card:hover{transform:translateY(-8px); box-shadow:0 26px 70px rgba(6,31,73,.12)}
.service-card:hover:before{transform:scale(1.45)}
.service-icon{
  width:56px; height:56px; border-radius:17px; background:var(--sky); color:var(--blue);
  display:grid; place-items:center; font-size:26px; font-weight:900; margin-bottom:20px;
}
.service-card h3{margin:0 0 10px; color:var(--navy); font-size:22px}
.service-card p{margin:0; color:var(--muted); line-height:1.6}

.process{background:linear-gradient(180deg,#f7fbff,#fff)}
.timeline{
  position:relative; display:grid; grid-template-columns:repeat(4,1fr); gap:18px;
}
.timeline-line{
  position:absolute; left:5%; right:5%; top:42px; height:2px; background:linear-gradient(90deg,var(--blue),var(--green)); opacity:.35;
}
.step{
  position:relative; background:#fff; border:1px solid var(--border); border-radius:26px; padding:28px;
  box-shadow:0 18px 48px rgba(6,31,73,.06);
}
.step span{
  display:grid; place-items:center; width:54px; height:54px; border-radius:50%;
  background:linear-gradient(135deg,var(--blue),var(--green)); color:#fff; font-weight:900; font-size:20px;
  margin-bottom:18px; box-shadow:0 12px 28px rgba(30,88,201,.2);
}
.step h3{margin:0 0 8px; color:var(--navy); font-size:22px}
.step p{margin:0; color:var(--muted); line-height:1.6}

.fit-card{
  display:grid; grid-template-columns:1fr 1fr; gap:42px; align-items:start;
  background:var(--navy); color:#fff; border-radius:34px; padding:42px;
  box-shadow:0 28px 70px rgba(6,31,73,.18);
}
.fit-card .eyebrow{color:#a9ef85}
.fit-card h2{color:#fff}
.fit-card ul{list-style:none; margin:0; padding:0; display:grid; gap:14px}
.fit-card li{
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12);
  padding:15px 17px; border-radius:16px; font-weight:700;
}
.fit-card li:before{content:"✓"; color:#a9ef85; margin-right:10px; font-weight:900}

.contact{background:linear-gradient(180deg,#fff,#f7fbff)}
.contact-card{
  display:grid; grid-template-columns:1fr 1fr; gap:38px; align-items:start;
  background:#fff; border:1px solid var(--border); border-radius:34px; padding:42px;
  box-shadow:0 24px 70px rgba(6,31,73,.09);
}
.contact-card p{color:var(--muted); font-size:18px; line-height:1.7}
form{display:grid; gap:14px}
input, textarea{
  width:100%; border:1px solid var(--border); border-radius:16px; padding:15px 16px; font:inherit; outline:none;
  transition:.2s ease; background:#fbfdff;
}
input:focus, textarea:focus{border-color:var(--blue); box-shadow:0 0 0 4px rgba(30,88,201,.08)}
button{
  border:0; border-radius:16px; padding:16px 18px; background:var(--green); color:#fff; font-weight:900; font-size:16px;
  cursor:pointer; box-shadow:0 14px 28px rgba(103,196,48,.25)
}
small{color:var(--muted)}

footer{background:var(--navy); color:#fff}
.footer-inner{display:flex; justify-content:space-between; gap:20px; padding:24px 0}
.footer-inner p{margin:0}

.reveal{opacity:0; transform:translateY(28px); transition:opacity .75s ease, transform .75s ease}
.reveal.visible{opacity:1; transform:translateY(0)}
.delay-1{transition-delay:.12s}
.delay-2{transition-delay:.24s}
.delay-3{transition-delay:.36s}

@media(max-width:1050px){
  .hero-shell,.split,.fit-card,.contact-card{grid-template-columns:1fr}
  .service-grid,.timeline{grid-template-columns:1fr 1fr}
  .timeline-line{display:none}
  .hero-copy{text-align:center}
  .lead,.metric-row{margin-left:auto; margin-right:auto}
}
@media(max-width:720px){
  nav{display:none}
  .brand-text{font-size:23px}
  .speed-lines{display:none}
  .hero{padding-top:48px}
  .metric-row,.service-grid,.timeline{grid-template-columns:1fr}
  .floating-card{display:none}
  .fit-card,.contact-card{padding:28px}
  .footer-inner{flex-direction:column}
}


.audience{
  background:linear-gradient(180deg,#ffffff 0%, #f7fbff 100%);
}
.audience-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:22px;
}
.audience-card{
  position:relative;
  background:#fff;
  border:1px solid var(--border);
  border-radius:30px;
  padding:34px;
  box-shadow:0 22px 62px rgba(6,31,73,.08);
  overflow:hidden;
}
.audience-card:after{
  content:"";
  position:absolute;
  width:190px;
  height:190px;
  border-radius:50%;
  right:-70px;
  bottom:-90px;
  background:rgba(103,196,48,.12);
}
.audience-kicker{
  display:inline-flex;
  padding:8px 12px;
  border-radius:999px;
  background:var(--mint);
  color:var(--green);
  font-weight:900;
  margin-bottom:18px;
}
.audience-card h3{
  margin:0 0 12px;
  color:var(--navy);
  font-size:28px;
  letter-spacing:-.035em;
}
.audience-card p{
  color:var(--muted);
  line-height:1.7;
  font-size:17px;
  margin:0 0 18px;
}
.audience-card ul{
  position:relative;
  z-index:1;
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  gap:10px;
}
.audience-card li{
  font-weight:700;
  color:var(--text);
}
.audience-card li:before{
  content:"✓";
  color:var(--green);
  margin-right:10px;
  font-weight:900;
}
.partner{
  background:#fff;
}
.partner-card{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:36px;
  align-items:center;
  border-radius:34px;
  padding:42px;
  background:linear-gradient(135deg,var(--navy),#123d82);
  color:#fff;
  box-shadow:0 28px 75px rgba(6,31,73,.20);
}
.partner-card .eyebrow{
  color:#a9ef85;
}
.partner-card h2{
  color:#fff;
}
.partner-card p{
  color:rgba(255,255,255,.82);
  font-size:18px;
  line-height:1.75;
}
.partner-points{
  display:grid;
  gap:14px;
}
.partner-points div{
  display:flex;
  gap:16px;
  align-items:center;
  padding:18px;
  border-radius:18px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.13);
}
.partner-points strong{
  color:#a9ef85;
  font-size:20px;
}
.partner-points span{
  font-weight:800;
}
.form-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}
@media(max-width:1050px){
  .audience-grid,.partner-card{grid-template-columns:1fr}
}
@media(max-width:720px){
  .form-row{grid-template-columns:1fr}
  .audience-card,.partner-card{padding:26px}
}

.footer-links{
  display:flex;
  gap:18px;
  flex-wrap:wrap;
}
.footer-links a{
  color:#fff;
  text-decoration:none;
  font-weight:700;
}
.footer-links a:hover{
  text-decoration:underline;
}
.legal-page{
  background:linear-gradient(180deg,#ffffff 0%, #f7fbff 100%);
}
.legal-hero{
  padding:70px 0 28px;
}
.legal-content{
  padding:28px 0 80px;
}
.legal-box{
  background:#fff;
  border:1px solid var(--border);
  border-radius:28px;
  padding:38px;
  box-shadow:0 24px 70px rgba(6,31,73,.08);
}
.legal-box h1{
  font-size:48px;
  line-height:1.05;
  margin:0 0 16px;
}
.legal-box h2{
  font-size:28px;
  margin:34px 0 12px;
}
.legal-box p, .legal-box li{
  color:var(--muted);
  line-height:1.7;
  font-size:16px;
}
.legal-box a{
  color:var(--blue);
  font-weight:800;
}
.notice{
  background:#fff7e6;
  border:1px solid #ffd48a;
  border-radius:16px;
  padding:14px 16px;
  color:#684500;
  font-weight:700;
}
@media(max-width:720px){
  .legal-box{padding:26px}
  .legal-box h1{font-size:36px}
}

/* Fix floating labels so they don't overlap important text on the hero image */
.hero-visual{
  overflow: visible;
}
.card-a{
  top: 10%;
  left: -28px;
}
.card-b{
  right: -56px;
  top: 48%;
}
.card-c{
  left: 24%;
  bottom: -22px;
}
.floating-card{
  z-index: 5;
}
@media(max-width:1320px){
  .card-a{left:-12px; top:7%;}
  .card-b{right:-32px; top:52%;}
}
@media(max-width:1050px){
  .floating-card{
    transform:none;
  }
  .card-a{
    top: 4%;
    left: 10px;
  }
  .card-b{
    right: 10px;
    top: auto;
    bottom: 88px;
  }
  .card-c{
    left: 50%;
    transform: translateX(-50%);
    bottom: -18px;
  }
}
@media(max-width:720px){
  .floating-card{
    display:none;
  }
}

/* Einheitliche SVG-Icons für saubere Darstellung in allen Browsern */
.service-icon{
  display:grid;
  place-items:center;
}
.service-icon svg{
  width:28px;
  height:28px;
  stroke:currentColor;
  stroke-width:2;
  fill:none;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.direct-mail-box{
  background:#f7fbff;
  border:1px solid var(--border);
  border-radius:18px;
  padding:16px 18px;
  margin-bottom:16px;
}
.direct-mail-box p{
  margin:0 0 6px;
  font-size:15px;
  color:var(--navy);
}
.direct-mail-box a{
  color:var(--blue);
  font-weight:900;
  text-decoration:none;
  word-break:break-word;
}
.direct-mail-box a:hover{
  text-decoration:underline;
}