@font-face{font-family:"Bricolage Grotesque";font-weight:800;font-display:swap;src:url(/fonts/bricolage-grotesque-latin-800-normal.woff2) format("woff2")}
@font-face{font-family:"DM Sans";font-weight:400;font-display:swap;src:url(/fonts/dm-sans-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"DM Sans";font-weight:700;font-display:swap;src:url(/fonts/dm-sans-latin-700-normal.woff2) format("woff2")}
:root{--bg:#12132B;--surface:#1C1E42;--surface2:#262957;--line:#33366A;--text:#FFFFFF;--muted:#ECEBFF;
  --orange:#FF7A2F;--teal:#1FD1A5;--yellow:#FFD23F;--pink:#FF5FA2;--blue:#5B8CFF}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;min-height:100vh;background:var(--bg);color:var(--text);font-family:"DM Sans",system-ui,sans-serif;font-size:17px;line-height:1.45;
  background-image:radial-gradient(60% 40% at 50% 0%,rgba(255,95,162,.18),transparent 70%),radial-gradient(50% 35% at 100% 100%,rgba(31,209,165,.12),transparent 70%)}
.wrap{max-width:560px;margin:0 auto;padding:48px 20px 32px}
.hero{text-align:center}
.logo{width:96px;height:96px;display:block;margin:0 auto 14px;animation:hop 2.4s ease-in-out infinite}
@keyframes hop{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@media (prefers-reduced-motion:reduce){.logo{animation:none}}
.brand{font-family:"Bricolage Grotesque",sans-serif;font-weight:800;font-size:64px;letter-spacing:-.03em;line-height:1;margin:0;
  background:linear-gradient(90deg,var(--yellow),var(--orange) 45%,var(--pink));-webkit-background-clip:text;background-clip:text;color:transparent}
.sub{font-size:20px;font-weight:700;color:var(--muted);margin:8px 0 0}
.badge{display:inline-block;margin:26px 0 0;padding:7px 14px;border-radius:999px;background:var(--surface2);color:var(--yellow);font-size:15px;font-weight:700}
.claim{font-family:"Bricolage Grotesque",sans-serif;font-weight:800;font-size:34px;line-height:1.1;letter-spacing:-.02em;margin:14px 0 0}
.lead{color:var(--muted);margin:14px auto 0;max-width:30em}
.points{list-style:none;padding:0;margin:32px 0 0;display:grid;gap:10px}
.points li{display:flex;gap:14px;align-items:flex-start;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:14px 16px}
.points .ic{font-size:24px;line-height:1.2}
.points b{display:block}
.points span.t{color:var(--muted);font-size:15px}
.card{margin:32px 0 0;background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:22px 18px}
.card h2{font-family:"Bricolage Grotesque",sans-serif;font-weight:800;font-size:24px;margin:0 0 6px}
.card p{margin:0 0 14px;color:var(--muted);font-size:15px}
.f{display:block;font-weight:700;font-size:15px;margin:0 0 6px}
input[type=email]{width:100%;font:inherit;color:var(--text);background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:13px 14px}
input[type=email]:focus{outline:2px solid var(--teal);outline-offset:1px;border-color:transparent}
.consent{display:flex;gap:10px;align-items:flex-start;margin:14px 0 0;font-size:15px;color:var(--muted)}
.consent input{width:20px;height:20px;margin:2px 0 0;flex:none;accent-color:var(--teal)}
button{width:100%;margin:16px 0 0;font:inherit;font-weight:700;font-size:17px;border:0;border-radius:14px;padding:14px;cursor:pointer;
  color:#12132B;background:linear-gradient(90deg,var(--yellow),var(--orange))}
button:active{transform:translateY(1px)}
.hp{position:absolute;left:-9999px}
a{color:var(--teal)}
footer{margin:40px 0 0;text-align:center;font-size:15px;color:var(--muted)}
footer a{color:var(--muted)}
.legal h1{font-family:"Bricolage Grotesque",sans-serif;font-weight:800;font-size:34px;margin:0 0 4px}
.legal h2{font-size:17px;margin:22px 0 4px}
.legal p,.legal li{color:var(--muted);font-size:15px}
.back{display:inline-block;margin:0 0 24px;font-weight:700}
@media (max-width:420px){.brand{font-size:54px}.claim{font-size:28px}.wrap{padding-top:36px}}
/* Desktop: Hero links, Formular rechts, Punkte als 2x2 darunter */
@media (min-width:960px){
  .landing{max-width:1120px;padding:72px 40px 40px;display:grid;grid-template-columns:1.15fr 1fr;column-gap:56px;
    grid-template-areas:"hero card" "points points" "foot foot";align-items:center}
  .landing .hero{grid-area:hero;text-align:left}
  .landing .logo{margin:0 0 16px;width:112px;height:112px}
  .landing .brand{font-size:88px}
  .landing .sub{font-size:24px}
  .landing .claim{font-size:48px}
  .landing .lead{margin-left:0;font-size:19px}
  .landing .card{grid-area:card;margin:0;padding:30px 28px;box-shadow:0 20px 60px rgba(0,0,0,.35)}
  .landing .card h2{font-size:28px}
  .landing .points{grid-area:points;grid-template-columns:1fr 1fr;gap:16px;margin-top:56px}
  .landing .points li{padding:18px 20px}
  footer{grid-area:foot}
}
input[type=text]{width:100%;font:inherit;color:var(--text);background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:13px 14px}
input[type=text]:focus{outline:2px solid var(--teal);outline-offset:1px;border-color:transparent}
.seg{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.seg label{position:relative}
.seg input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
.seg span{display:block;text-align:center;padding:12px;border-radius:12px;background:var(--bg);border:1px solid var(--line);font-weight:700}
.seg input:checked + span{background:var(--surface2);border-color:var(--teal);color:var(--teal)}
.seg input:focus-visible + span{outline:2px solid var(--teal);outline-offset:1px}