@font-face{font-family:Lato;font-weight:400;font-display:swap;src:url(fonts/lato-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:Lato;font-weight:700;font-display:swap;src:url(fonts/lato-latin-700-normal.woff2) format('woff2')}
@font-face{font-family:Lato;font-weight:900;font-display:swap;src:url(fonts/lato-latin-900-normal.woff2) format('woff2')}

:root{
  --blue:#1d4fd8;--blue-dark:#12308f;--blue-deep:#0c1f5c;--yellow:#ffd23f;--yellow-dark:#e6b800;
  --ink:#14213d;--white:#fff;--soft:#eef3ff;--radius:18px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Lato,system-ui,sans-serif;color:var(--ink);background:var(--white);line-height:1.6;font-size:17px}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
.wrap{max-width:1080px;margin:0 auto;padding:0 20px}

/* Kopfzeile */
.top{position:sticky;top:0;z-index:20;background:rgba(18,48,143,.96);backdrop-filter:blur(6px)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;height:60px;gap:16px}
.logo{font-weight:900;color:var(--yellow);text-decoration:none;font-size:19px;letter-spacing:.5px;white-space:nowrap}
.logo span{color:#8fc3ff}
.nav{display:flex;gap:20px}
.nav a{color:#fff;text-decoration:none;font-weight:700;font-size:15px;opacity:.9}
.nav a:hover{opacity:1;color:var(--yellow)}
@media (max-width:760px){.nav{display:none}}

/* Hero */
.hero{background:radial-gradient(ellipse at 70% 40%,#3a74ff 0%,var(--blue) 45%,var(--blue-dark) 100%);color:#fff;overflow:hidden;position:relative}
.hero .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center;padding-top:56px;padding-bottom:64px}
.kicker{display:inline-block;background:var(--yellow);color:var(--ink);font-weight:900;padding:4px 14px;border-radius:999px;font-size:14px;letter-spacing:.5px;transform:rotate(-2deg)}
.hero h1{font-weight:900;font-size:clamp(44px,7vw,84px);line-height:.95;margin:18px 0 10px;color:var(--yellow);text-shadow:0 4px 0 var(--blue-deep)}
.hero h1 .poor{color:#9fd0ff}
.hero .claim{font-size:clamp(20px,2.4vw,26px);font-weight:700;margin:18px 0 6px}
.hero .claim b{color:var(--yellow)}
.hero p.lead{font-size:18px;max-width:34em;opacity:.95}
.btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.btn{display:inline-block;font-weight:900;text-decoration:none;padding:14px 24px;border-radius:999px;font-size:16px}
.btn.yellow{background:var(--yellow);color:var(--ink);box-shadow:0 4px 0 var(--yellow-dark)}
.btn.ghost{border:2px solid #fff;color:#fff}
.btn.soon{background:#fff;color:var(--blue-dark);cursor:default;box-shadow:0 4px 0 #c9d6ff}
.cover{max-width:380px;margin-left:auto;border-radius:6px;box-shadow:0 30px 60px rgba(0,0,0,.45);transform:rotate(3deg)}
@media (max-width:860px){.hero .wrap{grid-template-columns:1fr;text-align:center}.cover{margin:10px auto 0;max-width:280px}.btns{justify-content:center}.hero p.lead{margin:0 auto}}

/* Abschnitte */
section{padding:72px 0}
section.alt{background:var(--soft)}
section.dark{background:var(--blue-dark);color:#fff}
h2{font-weight:900;font-size:clamp(30px,4vw,44px);line-height:1.1;margin:0 0 18px}
h2 .hl{background:var(--yellow);color:var(--ink);padding:0 10px;border-radius:6px;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.dark h2 .hl{color:var(--ink)}
.intro{font-size:19px;max-width:44em}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
@media (max-width:800px){.grid2{grid-template-columns:1fr}}
.sketch{background:#fff;border-radius:var(--radius);padding:14px;box-shadow:0 10px 30px rgba(18,48,143,.15)}

/* Six Seven */
.ss{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:30px}
.ss .card{background:rgba(255,255,255,.08);border:2px solid rgba(255,255,255,.18);border-radius:var(--radius);padding:26px}
.ss .num{font-size:72px;font-weight:900;color:var(--yellow);line-height:1}
.ss h3{margin:6px 0 8px;font-size:22px}
.ss p{margin:0;opacity:.92}
@media (max-width:700px){.ss{grid-template-columns:1fr}}

/* Liste */
.checks{list-style:none;padding:0;margin:20px 0 0}
.checks li{padding-left:36px;position:relative;margin:10px 0;font-size:18px}
.checks li:before{content:"✓";position:absolute;left:0;top:-1px;width:26px;height:26px;border-radius:50%;background:var(--yellow);color:var(--ink);font-weight:900;display:grid;place-items:center;font-size:15px}

/* Videos */
.videos{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:22px;margin-top:28px}
.vid{border-radius:var(--radius);overflow:hidden;background:var(--blue-deep);color:#fff;aspect-ratio:16/9;display:grid;place-items:center;text-align:center;padding:18px;position:relative}
.vid button{all:unset;cursor:pointer;display:grid;place-items:center;inset:0;position:absolute;padding:18px}
.vid .play{width:64px;height:64px;border-radius:50%;background:var(--yellow);color:var(--ink);display:grid;place-items:center;font-size:26px;margin:0 auto 10px}
.vid small{display:block;opacity:.75;font-size:12px;margin-top:6px}
.vid iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.placeholder{opacity:.9}

/* Downloads */
.dl{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:28px}
.dl a{display:flex;gap:18px;align-items:center;background:#fff;border-radius:var(--radius);padding:20px;text-decoration:none;box-shadow:0 8px 24px rgba(18,48,143,.12);border:2px solid transparent}
.dl a:hover{border-color:var(--yellow)}
.dl img{width:90px;height:110px;object-fit:cover;border-radius:8px;border:1px solid #dde4f5}
.dl b{font-size:19px;display:block}
.dl span{font-size:15px;opacity:.75}
@media (max-width:700px){.dl{grid-template-columns:1fr}}

/* Shop */
.shop{text-align:center}
.badge{display:inline-block;margin-top:10px;background:var(--yellow);color:var(--ink);font-weight:900;padding:8px 18px;border-radius:999px}

/* Kontakt + Fuß */
.contact a{color:var(--yellow);font-weight:900;font-size:22px;text-decoration:none}
footer{background:var(--blue-deep);color:#c9d6ff;padding:30px 0;font-size:14px}
footer .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px}
footer a{color:#fff;text-decoration:none;margin-left:18px}
footer a:first-child{margin-left:0}

/* Rechtsseiten */
.legal{padding:50px 0 70px}
.legal h1{font-weight:900;font-size:38px;margin:0 0 20px;color:var(--blue-dark)}
.legal h2{font-size:22px;margin:30px 0 8px}
.legal p,.legal li{max-width:46em}
.todo{background:#fff4c2;border-left:4px solid var(--yellow-dark);padding:2px 6px}

/* WEBELITE PREMIUM V1.1 */
:root{--blue:#2054df;--blue-dark:#162f85;--blue-deep:#0b1c50;--yellow:#ffcf32;--ink:#172341;--soft:#f0f4ff;--radius:20px}
body{-webkit-font-smoothing:antialiased}
.wrap{max-width:1160px;padding-inline:clamp(20px,4vw,48px)}
.top{background:rgba(12,30,82,.96);border-bottom:1px solid rgba(255,255,255,.13);box-shadow:0 5px 24px rgba(7,24,71,.12)}
.top .wrap{height:70px}.logo{font-size:17px;letter-spacing:.06em}.nav{gap:clamp(12px,1.6vw,24px)}.nav a{font-size:13px}
.nav a:focus-visible,.btn:focus-visible,.dl a:focus-visible,.menu-toggle:focus-visible{outline:3px solid var(--yellow);outline-offset:4px}
.hero{background:radial-gradient(circle at 73% 35%,#4380ff 0%,#2259e5 38%,#132e86 75%,#0d225f 100%)}
.hero .wrap{gap:clamp(35px,6vw,90px);padding-top:clamp(60px,8vw,105px);padding-bottom:clamp(70px,8vw,110px)}
.hero h1{font-size:clamp(48px,6.3vw,86px);letter-spacing:-.045em;line-height:.98;margin-top:24px;text-shadow:0 5px 0 rgba(7,24,71,.5)}
.hero .claim{margin-top:26px;font-size:clamp(21px,2.3vw,28px);line-height:1.35}.hero p.lead{line-height:1.7;color:#eaf0ff}
.cover{max-width:390px;box-shadow:0 38px 72px rgba(2,13,52,.43);transition:transform .3s}.cover:hover{transform:rotate(1deg) translateY(-5px)}
.btn{transition:transform .2s,background .2s}.btn:hover{transform:translateY(-3px)}.btn.ghost:hover{background:rgba(255,255,255,.12)}
section{padding:clamp(68px,8vw,108px) 0;scroll-margin-top:70px}h2{letter-spacing:-.035em;line-height:1.16}.intro{line-height:1.75}
.grid2{gap:clamp(35px,6vw,85px)}.sketch{padding:13px;border:1px solid #e7ecf7;box-shadow:0 18px 42px rgba(18,48,143,.11)}.sketch img{border-radius:11px}
.dark{background:linear-gradient(135deg,#18368f,#10266f)}.ss .card{padding:clamp(24px,3vw,36px);background:rgba(255,255,255,.085);border:1px solid rgba(255,255,255,.2);box-shadow:0 15px 40px rgba(0,0,0,.08)}
.vid{background:linear-gradient(135deg,#243f91,#11245e);box-shadow:0 12px 28px rgba(17,40,105,.15)}.vid .play{box-shadow:0 8px 20px rgba(0,0,0,.2)}
.dl a{box-shadow:0 12px 30px rgba(18,48,143,.09);transition:transform .2s,box-shadow .2s}.dl a:hover{transform:translateY(-4px);box-shadow:0 18px 36px rgba(18,48,143,.14)}
.contact a{color:var(--blue-dark);overflow-wrap:anywhere}footer{border-top:3px solid var(--yellow)}
.menu-toggle{display:none;border:1px solid rgba(255,255,255,.45);background:transparent;color:#fff;border-radius:11px;padding:9px 13px;font:700 14px Lato,sans-serif;cursor:pointer}
@media(max-width:860px){.top .wrap{height:64px}.menu-toggle{display:block}.nav{display:none;position:absolute;top:64px;left:0;right:0;padding:12px 20px 20px;background:#10266f;box-shadow:0 18px 30px rgba(0,0,0,.22);flex-direction:column;gap:0}.nav.is-open{display:flex}.nav a{display:block;padding:13px 8px;font-size:16px;border-bottom:1px solid rgba(255,255,255,.12)}.hero .wrap{grid-template-columns:1fr;text-align:center;padding-top:62px;padding-bottom:72px}.cover{margin:18px auto 0;max-width:min(310px,70vw)}.btns{justify-content:center}.hero p.lead{margin-inline:auto}}
@media(max-width:600px){body{font-size:16px}.wrap{padding-inline:22px}.logo{font-size:13px;letter-spacing:.03em}.hero h1{font-size:clamp(43px,11vw,68px)}.hero .claim{font-size:21px}.hero p.lead{font-size:16px}.kicker{font-size:11px}h2{font-size:clamp(29px,8vw,38px)}.intro{font-size:17px}.checks li{font-size:16px}.ss{gap:14px}.ss .num{font-size:60px}.videos{grid-template-columns:1fr}.dl{gap:15px}.dl a{padding:14px;gap:14px}.dl img{width:72px;height:90px}.dl b{font-size:16px}.dl span{font-size:13px}footer .wrap{gap:18px}footer a{margin-left:0;margin-right:18px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important;animation:none!important}}

/* WEBELITE 1.2 — verified source-level refinements */
:root{color-scheme:light}
body{overflow-wrap:break-word}
.top .wrap{position:relative}
section.dark{background:linear-gradient(135deg,#18368f,#10266f)}
.vid button:focus-visible,.logo:focus-visible,.nav a:focus-visible,.contact a:focus-visible,footer a:focus-visible{outline:3px solid #ffcf32;outline-offset:4px}
.vid button{width:100%;height:100%;box-sizing:border-box}
.vid button:hover .play{transform:scale(1.08)}
.vid .play{transition:transform .2s}
.sketch img{width:100%;height:auto}
.dl a{min-width:0}
.dl a div{min-width:0}
@media(max-width:860px){
  .nav{z-index:30}
  .nav:not(.is-open){display:none}
}
@media(max-width:380px){
  .hero h1{font-size:clamp(36px,10.6vw,44px)}
  .kicker{font-size:10px}
  .btn{font-size:14px;padding:12px 17px}
  .logo{font-size:12px}
}
@media(prefers-reduced-motion:reduce){.vid .play{transition:none}}