:root{--midnight:#070e2e;--navy:#0b1c49;--royal:#121d58;--yellow:#ffcb19;--sun:#ffd426;--ice:#f5f8ff;--ink:#0a1532}
html{scroll-behavior:smooth}
body{background:#f5f7fc;color:var(--ink)}
.page{max-width:1280px;padding:0;margin:0 auto}
.reel-hero{position:relative;overflow:hidden;background:radial-gradient(circle at 85% 30%,#2549a5 0%,transparent 38%),linear-gradient(125deg,#08132f,#091641 52%,#131b53);color:#fff;min-height:745px}
.reel-hero:before{content:"";position:absolute;inset:0;background-image:linear-gradient(#d7ddff07 1px,transparent 1px),linear-gradient(90deg,#d7ddff07 1px,transparent 1px);background-size:70px 70px;pointer-events:none}
.reel-hero:after{content:"";position:absolute;right:-18%;top:-35%;width:700px;height:700px;border:1px solid #9cadff24;border-radius:50%;pointer-events:none}
.reel-nav{display:flex;align-items:center;justify-content:space-between;position:relative;z-index:3;gap:15px;padding:26px clamp(22px,5vw,65px);border-bottom:1px solid #ffffff1f}
.reel-brand{display:flex;align-items:center;gap:12px;color:#fff;text-decoration:none;min-width:0}
.brand-symbol{position:relative;display:block;width:44px;height:45px;border-top:10px solid #f6f9ff;border-radius:13px 14px 0 0;transform:skew(-16deg)}
.brand-symbol span{position:absolute;left:11px;top:2px;width:20px;height:41px;border-radius:1px 1px 13px 13px;background:var(--yellow)}
.brand-wordmark{display:block;font-weight:950;font-size:clamp(28px,4vw,36px);line-height:.85;letter-spacing:-.065em}
.brand-wordmark>span{color:var(--yellow)}
.brand-wordmark small{display:block;letter-spacing:.17em;margin-top:10px;font-weight:700;font-size:9px;white-space:nowrap;color:#e6ecff}
.nav-contact{display:flex;align-items:center;gap:8px;color:#fff;text-decoration:none;font-size:14px;font-weight:740;border:1px solid #ffffff73;border-radius:100px;padding:12px 18px;white-space:nowrap}
.nav-contact:hover,.nav-contact:focus-visible{background:#ffffff20}
.reel-hero-grid{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1.12fr) minmax(340px,.88fr);align-items:center;gap:28px;padding:73px clamp(22px,5vw,65px) 76px;min-height:645px}
.reel-hero-copy{position:relative;z-index:2;max-width:645px}
.hero-eyebrow{display:inline-flex;gap:9px;align-items:center;font-size:13px;letter-spacing:.14em;font-weight:800;text-transform:uppercase;color:#d7defc}
.status-dot{display:inline-block;width:9px;height:9px;background:var(--yellow);border-radius:50%;box-shadow:0 0 0 5px #ffd42624}
.reel-hero h1{font-size:clamp(45px,5.7vw,78px);line-height:1.05;font-weight:950;letter-spacing:-.055em;margin:29px 0 17px;color:#fff}
.reel-hero h1 mark{display:inline;box-decoration-break:clone;-webkit-box-decoration-break:clone;background:#ffca16;color:#091333;border-radius:12px;padding:0 .10em .025em}
.hero-sub{font-size:clamp(25px,3vw,34px);font-weight:820;letter-spacing:-.028em;line-height:1.16;margin:25px 0 12px}
.hero-sub strong{color:var(--yellow)}
.hero-lead{font-size:16px;color:#e1e8ff;max-width:555px;line-height:1.68;margin:0 0 26px}
.hero-usps{display:flex;gap:21px;flex-wrap:wrap;margin:23px 0 29px}
.hero-usps>div{display:flex;align-items:center;gap:10px;font-size:12px;color:#e3e8fc;line-height:1.35}
.hero-usps b{font-size:13px;color:#fff;font-weight:780}
.usp-icon{display:inline-flex;width:40px;height:40px;background:var(--yellow);color:#061332;border-radius:50%;justify-content:center;align-items:center;font-size:20px;font-weight:900;box-shadow:0 0 0 4px #ffffff1a}
.hero-button{border-radius:18px;min-height:68px;display:flex;justify-content:center;align-items:center;gap:20px;width:min(100%,490px);padding:14px 24px;background:linear-gradient(100deg,#ffe053,#ffc519);color:#09152d;box-shadow:0 14px 38px #04082169,0 0 0 1px #ffe67b;position:relative;text-decoration:none;font-size:clamp(19px,2.2vw,24px);letter-spacing:-.025em;font-weight:900;transition:transform .2s,filter .2s}
.hero-button span{font-size:30px;line-height:1}
.hero-button:hover{transform:translateY(-2px);filter:brightness(1.08)}
.hero-note{font-size:12px;color:#bfcbeb;margin:17px 0 0}
.reel-art{height:560px;min-width:0;position:relative;isolation:isolate;display:flex;align-items:center;justify-content:center}
.reel-art:before{content:"";position:absolute;inset:14% 4%;border-radius:50%;background:radial-gradient(circle,#ffc9273d 0%,#4159d12d 37%,transparent 68%);filter:blur(20px)}
.art-ring{position:absolute;border:1px solid #d8e5ff3e;border-radius:50%;inset:60px 0;transform:rotate(-25deg)}
.art-ring.ring-two{inset:130px -35px;transform:rotate(33deg)}
.art-orbit{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:7px;position:absolute;top:21%;left:25%;width:240px;height:240px;border:2px solid #ffd134b5;background:radial-gradient(circle at 36% 25%,#fff4ae49,transparent 43%),radial-gradient(circle at 50% 65%,#eda60747,#07173b 80%);border-radius:100%;box-shadow:0 0 35px #ffc1196b,inset 0 0 30px #ffd23d39;transform:rotate(-7deg)}
.art-orbit-center{font-size:114px;font-weight:800;text-shadow:0 0 15px #ffd44f;color:#ffd638}
.art-orbit small{font-weight:850;letter-spacing:.15em;font-size:10px;color:#fff}
.art-card{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;position:absolute;z-index:2;width:155px;height:175px;border-radius:23px;backdrop-filter:blur(10px);border:1px solid #ffffff45;background:linear-gradient(155deg,#ffffff2b,#ffffff0c);box-shadow:0 20px 40px #020b27a1;color:#fff;font-weight:850;letter-spacing:.18em;font-size:12px}
.art-electric{top:8%;right:0;transform:rotate(10deg)}
.art-gas{bottom:17%;left:2%;transform:rotate(-12deg)}
.art-icon{font-size:93px;line-height:.95;font-weight:800;color:#ffd02b;text-shadow:0 0 27px #ffba30,0 0 48px #ffdd5a}
.art-gas .art-icon{color:#5bd9ff;text-shadow:0 0 26px #37a9ff,0 0 48px #43c2ff}
.art-caption{position:absolute;right:0;bottom:8%;color:#dfedff;text-align:right;font-size:21px;letter-spacing:.015em;font-weight:650;line-height:1.25}
.art-caption strong{color:#ffdd47;font-size:27px}
.hero-bottom{display:flex;position:relative;z-index:2;justify-content:center;gap:clamp(18px,5vw,72px);flex-wrap:wrap;padding:17px 20px;border-top:1px solid #ffffff24;background:#06112db3;font-size:13px;color:#edf1ff;font-weight:700}
.intro-callout{padding:58px clamp(22px,5vw,65px) 35px;display:flex;justify-content:space-between;align-items:center;gap:20px;background:#f5f7fc}
.intro-callout h2{font-size:clamp(28px,3.3vw,44px);font-weight:900;line-height:1.14;letter-spacing:-.04em;margin:9px 0;color:#0b1c49}
.intro-callout h2 em{font-style:normal;color:#2256ad}
.intro-callout p{font-size:16px;color:#435678;line-height:1.55;margin:13px 0 0;max-width:700px}
.eyebrow-dark{font-size:11px;letter-spacing:.18em;font-weight:900;color:#3d69b1}
.intro-link{display:inline-flex;background:#e7ecfa;white-space:nowrap;gap:10px;align-items:center;padding:15px 18px;border-radius:14px;color:#153a8c;text-decoration:none;font-weight:850}
#tarifcheck{scroll-margin-top:16px}
.main-content{max-width:940px!important;margin:20px auto 55px!important;padding:34px clamp(18px,5vw,58px) 38px;background:#fff;border:1px solid #e4eafa;box-shadow:0 16px 70px #0b235028;border-radius:24px;position:relative}
.main-content:before{content:"JETZT KOSTENLOSEN TARIFCHECK ANFRAGEN";display:block;color:#0b1c49;font-weight:900;letter-spacing:-.025em;font-size:clamp(22px,3vw,30px);margin:0 0 25px}
.main-content form{gap:17px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}
.main-content .choice-field,.main-content .privacy,.main-content .form-actions,.main-content .response{grid-column:1/-1}
.main-content legend,.main-content .field>label{font-size:15px;margin-bottom:8px;font-weight:800}
.main-content input[type=text],.main-content input[type=tel],.main-content input[type=email],.main-content input[type=number]{height:54px;border-radius:11px;border:1px solid #d7e1f0;background:#fafdff}
.main-content .choice-row{gap:10px}
.main-content .choice{flex:1;max-width:240px}
.main-content .choice>span{border-radius:12px;font-size:16px;justify-content:center}
.main-content .privacy{margin-top:10px;font-size:13px;color:#465676;line-height:1.55}
.main-content .form-actions{margin-top:0}
.main-content .submit{width:100%;font-size:19px;border-radius:13px;box-shadow:0 9px 20px #fac11429}
.benefits,.tarifora-trust,.faq-section{width:calc(100% - clamp(30px,8vw,120px));max-width:1110px;margin-left:auto!important;margin-right:auto!important}
.benefits{background:linear-gradient(120deg,#102055,#1a377f);border-radius:22px!important}
.benefit-stars{display:none!important}
footer{padding:36px 20px 70px}
@media(max-width:850px){.reel-hero-grid{grid-template-columns:1fr;padding-top:47px;gap:0}.reel-art{height:300px;max-width:520px;margin:0 auto;opacity:.95;width:100%}.art-orbit{width:170px;height:170px;top:12%;left:calc(50% - 85px)}.art-orbit-center{font-size:70px}.art-card{width:110px;height:125px}.art-icon{font-size:58px}.art-caption{bottom:0;font-size:13px}.art-caption strong{font-size:18px}.reel-hero h1{font-size:clamp(49px,9vw,79px)}.intro-callout{padding-top:37px}.benefits,.tarifora-trust,.faq-section{width:calc(100% - 36px)}}
@media(max-width:580px){.reel-nav{padding:21px 18px}.brand-symbol{width:32px;height:35px;border-top-width:7px}.brand-symbol span{left:7px;width:15px;height:29px}.brand-wordmark{font-size:26px}.brand-wordmark small{font-size:7px;letter-spacing:.12em;margin-top:8px}.nav-contact{padding:9px 12px;font-size:11px}.reel-hero-grid{padding:35px 21px 33px}.hero-eyebrow{font-size:10px}.reel-hero h1{font-size:clamp(39px,10.2vw,58px);line-height:1.075;margin:22px 0 14px}.reel-hero h1 mark{border-radius:7px;padding:0 .07em}.hero-sub{font-size:25px;margin:20px 0 12px}.hero-lead{font-size:14px}.hero-usps{gap:14px 13px;margin:20px 0 25px}.hero-usps>div{font-size:11px}.hero-usps b{font-size:11px}.usp-icon{width:34px;height:34px;font-size:17px}.hero-button{font-size:19px;min-height:61px;padding:10px 15px}.hero-note{font-size:11px}.reel-art{height:235px;margin:12px auto 5px}.art-orbit{width:136px;height:136px;top:12%;left:calc(50% - 68px)}.art-orbit-center{font-size:58px}.art-orbit small{font-size:6px}.art-card{width:80px;height:98px;border-radius:15px;font-size:9px}.art-icon{font-size:48px}.art-electric{right:10%;top:3%}.art-gas{left:8%;bottom:19%}.art-caption{font-size:11px;bottom:0}.art-caption strong{font-size:14px}.hero-bottom{gap:12px 19px;font-size:11px}.intro-callout{display:block;padding:37px 21px 18px}.intro-callout h2{font-size:31px}.intro-callout p{font-size:14px}.intro-link{margin-top:19px}.main-content{margin:20px 15px 36px!important;padding:25px 17px 32px;border-radius:17px}.main-content:before{font-size:21px}.main-content form{grid-template-columns:1fr;gap:17px}.main-content .choice-field,.main-content .privacy,.main-content .form-actions,.main-content .response{grid-column:auto}.main-content .choice{min-width:0}.main-content .choice>span{font-size:14px}.main-content .submit{font-size:16px}.benefits,.tarifora-trust,.faq-section{width:calc(100% - 26px)}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition:none!important}}