@font-face{font-family:"Gilroy";src:url("../font/Gilroy_Regular-s.p.1v3cv59qcqib_.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Gilroy";src:url("../font/Gilroy_Bold-s.p.1gqkeei8u1mcc.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Gilroy";src:url("../font/Gilroy_ExtraBold-s.p.206rhrcb1v1q-.woff2") format("woff2");font-weight:800;font-style:normal;font-display:swap}
/* Layout: Flyer-Logik fürs Web – weißer Einstieg, blaue Flächen, schräge Lime-Bänder als Trenner */
:root{
  --blue:#214290;
  --blue-deep:#1a3576;
  --lime:#b4db17;
  --white:#ffffff;
  --ink:#16244a;
  --mist:#eef1f8;
  --font:"Gilroy",system-ui,-apple-system,"Segoe UI",sans-serif;
  --maxw:1120px;
  --gutter:clamp(16px,4vw,40px);
  --slant:clamp(40px,7vw,110px);
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--white);color:var(--ink);font-family:var(--font);font-size:clamp(16px,1.05vw + 10px,18px);line-height:1.55;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
h1,h2,h3{margin:0;line-height:1.08;text-wrap:balance;letter-spacing:-.01em}
p{margin:0}
:focus-visible{outline:3px solid var(--lime);outline-offset:3px;border-radius:4px}

/* Header */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:10;background:rgba(255,255,255,.94);backdrop-filter:saturate(1.4) blur(8px);border-bottom:1px solid var(--mist)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-block:14px}
.top img{width:clamp(150px,18vw,200px)}
.nav{display:flex;align-items:center;gap:clamp(14px,2.4vw,32px);font-weight:700;font-size:.92em}
.nav a{text-decoration:none;color:var(--blue)}
.nav a:hover{text-decoration:underline;text-underline-offset:4px}
.btn{display:inline-flex;align-items:center;gap:.5em;font-family:var(--font);font-weight:700;text-decoration:none;border-radius:999px;padding:.72em 1.35em;line-height:1.1;transition:transform .15s ease,background .15s ease}
.btn:hover{transform:translateY(-1px)}
.btn-lime{background:var(--lime);color:var(--blue)}
.btn-lime:hover{background:#c3e83a}
.btn-ghost{color:var(--white);box-shadow:inset 0 0 0 2px rgba(255,255,255,.55)}
.btn-ghost:hover{box-shadow:inset 0 0 0 2px var(--white)}
.btn-blue{background:var(--blue);color:var(--white)}
@media (max-width:760px){.nav a:not(.btn){display:none}}

/* Hero */
.hero{position:relative;padding-top:clamp(40px,6vw,80px);background:var(--white);overflow:hidden}
.hero::after{content:"";position:absolute;inset:auto 0 0 0;height:48%;background:var(--blue);clip-path:polygon(0 var(--hs-l,42%),100% var(--hs-r,0%),100% 100%,0 100%);z-index:0}
.hero .wrap{position:relative;z-index:1}
.hero-head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:32px;align-items:end}
.hero h1{color:var(--blue);font-weight:800;font-size:clamp(1.7rem,7vw,4.1rem);hyphens:manual;overflow-wrap:break-word}
.dash{display:block;width:34px;height:5px;background:var(--blue);margin-block:22px 20px}
.lead{font-size:clamp(1.15rem,1.6vw,1.45rem);font-weight:400;color:var(--blue)}
.ref{justify-self:end;text-align:right;color:var(--blue);font-weight:400;padding-bottom:6px}
.ref small{display:block;font-size:.9em;margin-bottom:4px}
.ref a{font-weight:700;font-size:1.1em;text-decoration:none;border-bottom:2px solid var(--lime)}
.ref a:hover{border-bottom-color:var(--blue)}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.devices{width:100%;margin-top:clamp(20px,4vw,48px);margin-inline:auto;max-width:1000px;filter:drop-shadow(0 30px 40px rgba(10,20,60,.28))}
@media (max-width:760px){.hero-head{grid-template-columns:minmax(0,1fr)}.ref{justify-self:start;text-align:left}}

/* Blue sections */
.blue{background:var(--blue);color:var(--white)}
.pill{display:inline-block;background:var(--lime);color:var(--blue);font-weight:700;font-size:clamp(1.05rem,1.4vw,1.25rem);padding:.45em 1.5em;border-radius:12px}
.section{padding-block:clamp(56px,8vw,104px)}
.section h2{font-weight:800;font-size:clamp(1.8rem,3.6vw,2.8rem)}

/* Vorteile */
.adv{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:clamp(28px,5vw,64px);margin-top:36px}
.checks{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.checks li{display:grid;grid-template-columns:24px minmax(0,1fr);gap:12px;align-items:start;font-weight:400;font-size:1.08em}
.checks svg{color:var(--lime);width:22px;height:22px;margin-top:.18em;flex:none}
.adv .checks{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:28px}
.extra{background:var(--blue-deep);border-radius:18px;padding:clamp(22px,3vw,32px);display:grid;gap:14px;align-content:start}
.extra h3{font-size:1.3em;font-weight:700}
.extra p{opacity:.88}
.extra a{color:var(--lime);font-weight:700;text-decoration:none}
.extra a:hover{text-decoration:underline}
@media (max-width:860px){.adv{grid-template-columns:1fr}}
@media (max-width:520px){.adv .checks{grid-template-columns:1fr}}

/* Lime statement band */
.band{position:relative;background:var(--blue);padding-block:0}
.band-inner{--tilt:1;background:var(--lime);color:var(--blue);clip-path:polygon(0 calc(var(--slant) * var(--tilt)),100% 0,100% calc(100% - var(--slant) * var(--tilt)),0 100%);padding-block:calc(var(--slant) + 28px)}
.band p{font-size:clamp(1.25rem,2.4vw,1.9rem);font-weight:700;line-height:1.3;max-width:30ch;text-wrap:balance}
.band p strong{font-weight:800}

/* Ablauf */
.steps{list-style:none;margin:40px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;counter-reset:s}
.steps li{counter-increment:s;position:relative;padding-top:21px;display:grid;gap:8px}
.steps li .line{position:absolute;top:0;left:0;right:0;height:3px;background:var(--lime)}
.steps li::before{content:counter(s);font-weight:800;font-size:2.4em;line-height:1;color:var(--lime)}
.steps li span{font-weight:400;font-size:1.05em}
@media (max-width:860px){.steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:480px){.steps{grid-template-columns:1fr}}

/* Leistungen & Preis */
.offer{position:relative;background:var(--blue)}
.offer::before{content:"";position:absolute;inset:0;background:var(--lime);clip-path:polygon(0 18%,100% 0,100% 58%,0 82%);opacity:1}
.offer .wrap{position:relative}
.offer-card{background:var(--blue);color:var(--white);border-radius:22px;padding:clamp(26px,4vw,48px);display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(28px,4vw,56px);box-shadow:0 24px 60px rgba(10,20,60,.35)}
.offer-card .checks{margin-top:26px}
.offer-card .checks li.opt{opacity:.92}
.offer-card .checks em{font-style:normal;color:var(--lime);font-weight:700}
.prices{display:grid;gap:14px;align-content:start}
.price{background:var(--white);color:var(--blue);border-radius:16px;padding:22px 24px;display:grid;gap:4px}
.price .lbl{font-size:.8em;font-weight:700;text-transform:uppercase;letter-spacing:.08em;opacity:.75}
.price .amt{font-size:clamp(2rem,3.6vw,2.7rem);font-weight:800;line-height:1.05;font-variant-numeric:tabular-nums}
.price .amt small{font-size:.45em;font-weight:700}
.price .note{font-size:.9em;font-weight:400}
.or{justify-self:center;font-weight:700;color:var(--lime);text-transform:uppercase;letter-spacing:.12em;font-size:.85em}
@media (max-width:860px){.offer-card{grid-template-columns:1fr}.offer::before{clip-path:polygon(0 6%,100% 0,100% 40%,0 50%)}}

/* Über uns + Kontakt */
.about{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,72px);align-items:start}
.about .logo{width:min(340px,80%)}
.about p{margin-top:24px;opacity:.92;max-width:52ch}
.contact{background:var(--blue-deep);border-radius:18px;padding:clamp(24px,3vw,36px);display:grid;gap:18px}
.contact h2{font-size:clamp(1.5rem,2.6vw,2rem)}
.contact dl{margin:0;display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px 18px}
.contact dt{font-size:.78em;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--lime);padding-top:.25em}
.contact dd{margin:0;font-weight:400;overflow-wrap:anywhere}
.contact dd a{text-decoration:none}
.contact dd a:hover{text-decoration:underline}
.contact .row{display:flex;flex-wrap:wrap;gap:12px;margin-top:6px}
@media (max-width:860px){.about{grid-template-columns:1fr}}
.foot{background:var(--blue);color:rgba(255,255,255,.75);font-size:.85em;border-top:1px solid rgba(255,255,255,.14)}
.foot .wrap{padding-block:22px;display:flex;flex-wrap:wrap;gap:8px 20px;justify-content:space-between}
.foot a{text-decoration:none}
.foot a:hover{color:var(--white)}

/* Animationen (GSAP) */
@property --hs-l{syntax:"<percentage>";inherits:true;initial-value:42%}
@property --hs-r{syntax:"<percentage>";inherits:true;initial-value:0%}
.top{transition:box-shadow .3s ease}
.top.is-scrolled{box-shadow:0 8px 28px rgba(20,40,100,.10)}
/* Einstieg ausblenden, bis GSAP übernimmt (nur mit JS, nicht bei reduzierter Bewegung) */
.js-anim .hero h1,.js-anim .hero .lead,.js-anim .hero-cta,.js-anim .hero .ref,.js-anim .devices{visibility:hidden}