Categories
ausland etplus ticker

Spritpreise unter der Lupe: Tanken kostet in den USA halb so viel – was Unterschiede der EU-Länder ausmacht

/* ET-Hausschriften (lizenziert), freigegebene Ausnahme außerhalb von epochtimes.de */ @import url(“https://cdn.epoch-cdn.eu/static/fonts/et_fonts_cdn.css”); /* Browser-Standardwerte, die Tailwind (Preflight) auf der Hauptseite zurücksetzt. Bewusst niedrige Spezifität und ganz oben, damit die Story-Regeln darunter weiterhin gewinnen. */ .ets ul{list-style:disc outside} .ets ol{list-style:decimal outside} .ets strong,.ets b{font-weight:bold} .ets h1,.ets h2,.ets h3,.ets h4,.ets h5,.ets h6{font-weight:bold} /* ===== ET Scrollytelling Spritpreise – alle Regeln unter .ets gekapselt ===== */ .ets{ /* Farben nach www.epochtimes.de */ –ets-ink:#262626; –ets-grey:#525151; –ets-grey-2:#696969; –ets-line:#D8D8D8; –ets-red:#CC3114; –ets-red-2:#E44C2F; –ets-navy:#003965; –ets-soft:#F8F8F8; –ets-head:64px; –ets-f-head:’ET-Headline’,serif; –ets-f-text:’ET-Text’,serif; –ets-f-sans:’ET-Sans’,sans-serif; –ets-f-sub:’ET-Headline’,serif; color:var(–ets-ink); background:#FFFFFF; font-family:var(–ets-f-text); font-size:18px; line-height:1.55; -webkit-font-smoothing:antialiased; } .ets *,.ets *::before,.ets *::after{box-sizing:border-box} .ets img{max-width:100%;display:block} .ets a{color:var(–ets-ink)} .ets a:hover{color:#000} /* Einstieg */ .ets-hero{max-width:760px;margin:0 auto;padding:72px 24px 40px} .ets-kicker{font-family:var(–ets-f-sans);font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(–ets-red);margin:0 0 14px} .ets-hero h1{font-family:var(–ets-f-head);font-weight:400;font-size:clamp(38px,6vw,64px);line-height:1.05;margin:0 0 14px} .ets-sub{font-family:var(–ets-f-sans);font-size:clamp(18px,2.2vw,22px);font-weight:600;color:var(–ets-grey);margin:0 0 28px} .ets-hero p.ets-lead{font-size:20px;margin:0 0 32px} .ets-questions{background:var(–ets-soft);padding:22px 26px;border-top:4px solid var(–ets-red)} .ets-questions h2{font-family:var(–ets-f-sub);font-size:19px;margin:0 0 10px} .ets-questions ol{margin:0 !important;padding-left:22px !important;font-size:17px} .ets-questions li{margin:4px 0 !important} .ets-scrollhint{font-family:var(–ets-f-sans);font-size:14px;color:var(–ets-grey);text-align:center;margin:40px 0 0} .ets-scrollhint span{display:inline-block;animation:ets-bob 1.8s ease-in-out infinite} @keyframes ets-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}} /* Sektion 1 (Einleitung) und Sektion 2 (Die Preisunterschiede) teilen sich eine fixierte Bühne mit derselben Weltkarte. intro: Titel/Vorspann, Karte unten (Zoom 1,15 -> 0,86), „Darum geht es“ fliegt von links herein europe: Karte zoomt in die Lupe · usa: Karte schiebt auf Amerika (+25 %) · g1: Karte klein und blass, Grafik 1 fliegt herein */ .ets-c1{position:relative;display:grid} .ets-c1__stage{grid-area:1/1;position:sticky;top:var(–ets-head);height:calc(100vh – var(–ets-head));height:calc(100svh – var(–ets-head));overflow:hidden;background:#FFFFFF;z-index:0} .ets-c1__steps{grid-area:1/1;position:relative;z-index:2;width:100%;max-width:1280px;margin:0 auto;padding:0 24px 60vh;pointer-events:none} .ets-c1__step{min-height:90vh;display:flex;align-items:center} .ets-c1__step > *{pointer-events:auto} .ets-c1__step–spacer{min-height:200vh} .ets-c1__step–usa{min-height:140vh} .ets-c1__step .ets-card{max-width:380px;background:#FFFFFF;padding:20px 22px;box-shadow:0 10px 30px rgba(38,38,38,.14)} .ets-c1__step .ets-box{max-width:420px} /* Karte */ .ets-c1__map{position:absolute;inset:0;z-index:0} .ets-c1__map img{position:absolute;left:0;top:0;max-width:none;height:auto;transform-origin:0 0; -webkit-mask-image:linear-gradient(to right,transparent 0,#000 5%,#000 95%,transparent 100%);mask-image:linear-gradient(to right,transparent 0,#000 5%,#000 95%,transparent 100%)} .ets-c1__stage:not([data-state=”intro”]) .ets-c1__map img{transition:transform 1.2s cubic-bezier(.45,0,.2,1),opacity .9s ease} .ets-c1__fade{position:absolute;left:0;right:0;top:var(–ets-map-top,40%);height:90px;transform:translateY(-1px); background:linear-gradient(#FFFFFF,rgba(255,255,255,0));transition:opacity .6s} .ets-c1__fade::before{content:””;position:absolute;left:0;right:0;bottom:100%;height:100vh;background:#FFFFFF} .ets-c1__stage:not([data-state=”intro”]) .ets-c1__fade{opacity:0} /* Sektion 1 */ .ets-s1-hero{position:relative;z-index:2;max-width:760px;margin:36px auto 0;padding:34px 40px 32px;background:#FFFFFF;box-shadow:0 10px 32px rgba(38,38,38,.10)} .ets-s1-hero .ets-lead{margin-bottom:0} .ets-s1-qwrap{position:absolute;z-index:2;left:0;right:0;top:16%;padding:0 24px;pointer-events:none} .ets-s1-qwrap .ets-questions{max-width:560px;margin:0 auto 0 max(0px,calc((100% – 760px)/2));box-shadow:0 10px 32px rgba(38,38,38,.14);pointer-events:auto} .ets.js .ets-s1-qwrap .ets-questions{opacity:0;transform:translateX(-110vw)} .ets-c1__stage .ets-scrollhint{position:absolute;z-index:3;left:50%;bottom:22px;transform:translateX(-50%);margin:0; background:rgba(255,255,255,.92);padding:6px 14px;border-radius:999px;white-space:nowrap} .ets-c1__stage:not([data-state=”intro”]) .ets-s1-hero,.ets-c1__stage:not([data-state=”intro”]) .ets-scrollhint{opacity:0!important;pointer-events:none} /* Sektion 2 */ .ets-c1__title{position:absolute;z-index:3;top:22px;left:max(24px,calc((100% – 1232px)/2));margin:0;padding:4px 16px 8px 0; background:rgba(255,255,255,.94);font-family:var(–ets-f-head);font-weight:400 !important;font-size:clamp(28px,3.8vw,48px);line-height:1.1; text-wrap:balance;max-width:calc(100% – 48px);opacity:0;transform:translateX(-110%);transition:transform 1s cubic-bezier(.2,.75,.2,1),opacity .6s ease} .ets-c1__stage:not([data-state=”intro”]) .ets-c1__title{opacity:1;transform:none} .ets-c1__stage.is-s3 .ets-c1__title{opacity:0;transform:translateX(-110%)} .ets-c1__mapcap{position:absolute;z-index:3;right:16px;left:16px;bottom:10px;margin:0;font-family:var(–ets-f-sans);font-size:11px;line-height:1.4;color:var(–ets-grey); box-sizing:border-box;text-align:left; background:rgba(255,255,255,.9);padding:5px 10px;transition:opacity .5s} @media (max-width:900px){.ets-c1__mapcap{right:8px;left:8px;bottom:6px;font-size:10px;line-height:1.35;padding:4px 7px}} .ets-cap-s{display:none} .ets-maplg{display:inline;margin:0 14px 0 0} .ets-maplg .ets-lg:last-child{margin-right:6px} .ets-lg{display:inline-flex;align-items:center;gap:5px;margin-left:12px;white-space:nowrap} .ets-lg i{display:inline-block;width:20px;height:9px;border-radius:1px} .ets-lg-na{background:#E9E5E0;box-shadow:inset 0 0 0 1px rgba(0,0,0,.12)} .ets–dark .ets-lg-na{background:#484848;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)} @media (max-width:900px){.ets-maplg{display:block;margin:0 0 3px}.ets-lg{margin-left:8px;gap:4px}.ets-lg i{width:14px;height:7px}} @media (max-width:900px){.ets-cap-l{display:none}.ets-cap-s{display:inline}} .ets-c1__mapcap a{color:var(–ets-grey)} .ets-c1__stage.is-s3 .ets-c1__mapcap,.ets-c1__stage[data-state=”intro”] .ets-c1__mapcap{opacity:0;pointer-events:none} .ets-c1__stage[data-state=”g1″] .ets-c1__stage[data-state=”g1″] .ets:not(.js) .ets-c1__stage{position:relative;height:auto} @media (max-width:900px){ .ets-c1__steps{padding:0 14px 50vh} .ets-c1__step{align-items:flex-end;min-height:85vh} .ets-c1__step–spacer{min-height:200vh} .ets-c1__step–usa{min-height:140vh;align-items:center} .ets-c1__step .ets-card,.ets-c1__step .ets-box{max-width:none} .ets-c1__title{top:12px;left:14px;max-width:calc(100% – 28px)} .ets-s1-qwrap{top:8%;padding:0 14px} .ets-s1-qwrap .ets-questions{margin:0} .ets-s1-hero{margin:16px 14px 0;padding:22px 20px 22px} } @media (prefers-reduced-motion:reduce){ .ets-c1__title,.ets-c1__map img,.ets-s3 *,.ets-s3-head,.ets-s3-pie,.ets-s3-box{transition:opacity .3s ease!important} .ets-s3 .ets-w{transform:none!important} } /* Sektion 3 */ .ets-s3{position:absolute;inset:0;z-index:1;pointer-events:none} .ets-s3-head{position:absolute;top:22px;left:max(24px,calc((100% – 1232px)/2));max-width:calc(100% – 48px); opacity:0;transform:translateX(-110%);transition:transform 1s cubic-bezier(.2,.75,.2,1),opacity .6s ease} .ets-s3-title{margin:0;font-family:var(–ets-f-head);font-weight:400 !important;font-size:clamp(28px,3.8vw,48px);line-height:1.1;text-wrap:balance} .ets-s3-sub{margin:6px 0 0;font-family:var(–ets-f-sans);font-size:15px;color:var(–ets-grey)} .ets-s3-pie{position:absolute;margin:0;left:var(–ets-pie-left,auto);right:auto;width:var(–ets-pie-w,32%);opacity:0;transform:translateX(60vw); transition:transform 1s cubic-bezier(.2,.75,.2,1),opacity .5s ease} .ets-s3-pie svg{display:block;width:100%;height:auto;overflow:visible} .ets-s3-pie–eu{top:var(–ets-pie1-top,24px)} .ets-s3-pie–us{top:var(–ets-pie2-top,50%)} .ets-s3 .ets-w{transform:scale(0);transition:transform .8s cubic-bezier(.2,.8,.25,1.15)} .ets-s3-src{position:absolute;left:max(24px,calc((100% – 1232px)/2));bottom:12px;margin:0;max-width:420px;text-align:left; font-family:var(–ets-f-sans);font-size:11px;line-height:1.4;color:var(–ets-grey);opacity:0;transition:opacity .6s} .ets-s3-box{position:absolute;left:max(24px,calc((100% – 1232px)/2));top:var(–ets-box-top,130px);max-width:560px;max-height:calc(100% – var(–ets-box-top,130px) – 52px);overflow:auto;pointer-events:auto; opacity:0;transform:translateX(-110%);transition:transform .9s cubic-bezier(.2,.75,.2,1),opacity .5s ease} .ets-s3-box .ets-s3-i{opacity:0;transform:translateX(-24px);max-height:0;overflow:hidden;margin:0 !important; transition:opacity .6s ease .15s,transform .7s cubic-bezier(.2,.75,.2,1) .15s,max-height .7s ease,margin .5s ease} .ets-c1__stage.is-s3 .ets-s3-head,.ets-c1__stage.is-s3 .ets-s3-pie–eu{opacity:1;transform:none} .ets-c1__stage.is-s3 .ets-s3-pie–eu{transition-delay:.45s} .ets-c1__stage.is-s3 .ets-s3-pie–eu .ets-w{transform:scale(1)} .ets-c1__stage.is-s3 .ets-s3-src{opacity:1} .ets-c1__stage.is-us .ets-s3-pie–us{opacity:1;transform:none} .ets-c1__stage.is-us .ets-s3-pie–us .ets-w{transform:scale(1)} .ets-c1__stage.is-box .ets-s3-box{opacity:1;transform:none} .ets-c1__stage[data-box=”1″] .ets-s3-i:nth-child(-n+1), .ets-c1__stage[data-box=”2″] .ets-s3-i:nth-child(-n+2), .ets-c1__stage[data-box=”3″] .ets-s3-i:nth-child(-n+3){opacity:1;transform:none;max-height:900px;margin:0 0 16px !important} .ets-c1__step–box{min-height:75vh} /* Infobox „Warum Tanken in den USA …“: breiter und etwas kleinere Schrift, damit der längere Punkt 1 auf den Bildschirm passt */ @media (min-width:901px){ .ets-box.ets-s3-box{max-width:560px;width:560px} .ets-box.ets-s3-box li{font-size:14.5px;line-height:1.42} .ets-c1__stage[data-box] .ets-box.ets-s3-box .ets-s3-i{margin-bottom:13px !important} .ets-c1__stage.is-box .ets-s3-src{max-width:560px} } @media (min-width:901px) and (max-height:820px){ .ets-box.ets-s3-box{padding:18px 22px 16px} .ets-box.ets-s3-box h3{font-size:18px;margin-bottom:8px} .ets-box.ets-s3-box li{font-size:14px;line-height:1.4} .ets-c1__stage[data-box] .ets-box.ets-s3-box .ets-s3-i{margin-bottom:10px !important} } @media (min-width:901px) and (max-height:740px){ .ets-box.ets-s3-box li{font-size:13px;line-height:1.36} .ets-box.ets-s3-box li b{font-size:16px} } /* Redigat-2: längere Infobox-Texte – etwas kompakter auf niedrigen Bildschirmen */ @media (min-width:901px) and (max-height:820px){ .ets-box.ets-s3-box li{font-size:13.5px;line-height:1.37} } @media (min-width:901px) and (max-height:740px){ .ets-box.ets-s3-box li{font-size:12.5px;line-height:1.33} } @media (max-width:900px){ .ets-s3-head{top:12px;left:14px;max-width:calc(100% – 28px)} .ets-s3-pie{width:calc(50% – 20px)} .ets-s3-pie–eu{left:12px;right:auto} .ets-s3-pie–us{left:auto;right:12px;top:var(–ets-pie1-top,24px)} .ets-s3-box{left:14px;right:14px;max-width:none;top:var(–ets-box-top,110px);bottom:10px;overflow:auto;padding:14px 14px 16px} .ets-s3-box li b{font-size:16px} .ets-s3-box .ets-box__bar{margin-bottom:10px} .ets-s3-box h3{font-size:18px} .ets-s3-box li{font-size:14px;line-height:1.42;padding-left:38px !important} .ets-s3-box li::before{width:28px;height:28px;font-size:14px} .ets-c1__stage.is-box .ets-s3-pie,.ets-c1__stage.is-box .ets-s3-src{opacity:0!important} .ets-s3-src{left:14px;right:14px;max-width:none;text-align:left;bottom:auto;top:var(–ets-src-top,60%)} } /* Sektion 4: Energiesteuer – Grafik erst bildschirmfüllend, dann rechts mit Infobox-Spalte */ .ets-s4{position:relative;display:grid} .ets-s4__stage{grid-area:1/1;position:sticky;top:var(–ets-head);height:calc(100vh – var(–ets-head));height:calc(100svh – var(–ets-head));overflow:hidden;background:#FFFFFF;z-index:0} .ets-s4__steps{grid-area:1/1;position:relative;z-index:-1;pointer-events:none} .ets-s4__step{height:85vh} .ets-s4__step–full{height:80vh} .ets-s4__step–end{height:120vh} .ets-s4__title{position:absolute;z-index:3;top:22px;left:max(24px,calc((100% – 1232px)/2));margin:0;max-width:calc(100% – 48px); font-family:var(–ets-f-head);font-weight:400 !important;font-size:clamp(28px,3.8vw,48px);line-height:1.1;text-wrap:balance; opacity:0;transform:translateX(-110%);transition:transform 1s cubic-bezier(.2,.75,.2,1),opacity .6s ease} .ets-s4__stage:not([data-state=”none”]) .ets-s4__title{opacity:1;transform:none} .ets-s4__chartwrap{position:absolute;left:0;top:0;transform-origin:0 0;opacity:0; transition:transform 1s cubic-bezier(.45,0,.2,1),opacity .6s ease} .ets-s4__stage:not([data-state=”none”]) .ets-s4__chartwrap{opacity:1} .ets-s4-chart .ets-bar{transition:width 2s cubic-bezier(.25,.8,.3,1)} .ets-s4-box{position:absolute;z-index:2;left:max(24px,calc((100% – 1232px)/2));width:min(400px,calc(100% – 48px));margin:0; opacity:0;transform:translateX(-115%);transition:transform .8s cubic-bezier(.2,.75,.2,1),opacity .5s ease,top .6s ease} .ets-s4 .ets-card.ets-s4-box{background:#FFFFFF;padding:20px 22px;box-shadow:0 10px 30px rgba(38,38,38,.14);max-width:none} .ets-s4__stage[data-state=”a”] .ets-s4-a,.ets-s4__stage[data-state=”b”] .ets-s4-a,.ets-s4__stage[data-state=”b”] .ets-s4-b{opacity:1;transform:none} /* „Was die Preisunterschiede ausmacht“ und „Ausnahmen“ scrollen von unten herein und schieben die vorherigen Boxen nach oben hinaus */ .ets-s4-c,.ets-s4-d{opacity:1;transform:translateY(110vh);transition:transform 1s cubic-bezier(.45,0,.2,1)} .ets-s4__stage[data-state=”c”] .ets-s4-c,.ets-s4__stage[data-state=”d”] .ets-s4-d{transform:none} .ets-s4__stage[data-state=”c”] .ets-s4-a,.ets-s4__stage[data-state=”c”] .ets-s4-b, .ets-s4__stage[data-state=”d”] .ets-s4-a,.ets-s4__stage[data-state=”d”] .ets-s4-b{opacity:1;transform:translateY(-120vh);transition:transform 1s cubic-bezier(.45,0,.2,1)} /* „Ausnahmen“ wird unter „Was die Preisunterschiede ausmacht“ angefügt, beide bleiben stehen */ .ets-s4__stage[data-state=”d”] .ets-s4-c{transform:none} @media (max-width:900px){ .ets-s4__title{top:12px;left:14px;max-width:calc(100% – 28px)} .ets-s4-box{left:14px;width:auto;right:14px;top:auto!important;bottom:12px} .ets-s4__stage[data-state=”b”] .ets-s4-a{opacity:0;transform:translateX(-115%)} .ets-s4__stage[data-state=”d”] .ets-s4-c{transform:translateY(-120vh)} } @media (prefers-reduced-motion:reduce){ .ets-s4__title,.ets-s4__chartwrap,.ets-s4-box,.ets-s4-chart .ets-bar{transition:opacity .3s ease!important} } /* Sektion 5: CO₂-Preis – Überschrift und Lead stehen fest, Grafik baut sich darunter auf */ .ets-s5{position:relative;display:grid} .ets-s5__stage{grid-area:1/1;position:sticky;top:var(–ets-head);height:calc(100vh – var(–ets-head));height:calc(100svh – var(–ets-head));overflow:hidden;background:#FFFFFF;z-index:0} .ets-s5__steps{grid-area:1/1;position:relative;z-index:-1;pointer-events:none} .ets-s5__step{height:85vh} .ets-s5__step–start{height:95vh} .ets-s5__step–full{height:80vh} .ets-s5__step–a{height:55vh} .ets-s5__step–end{height:120vh} .ets-s5__head{position:absolute;z-index:3;top:22px;left:max(24px,calc((100% – 1232px)/2));right:max(24px,calc((100% – 1232px)/2));margin:0} .ets-s5__head h2{margin:0 0 12px;font-family:var(–ets-f-head);font-weight:400;font-size:clamp(28px,3.8vw,48px);line-height:1.1;text-wrap:balance} .ets-s5__head p{margin:0;max-width:820px;font-size:19px;line-height:1.5} .ets-s5__head strong{font-family:var(–ets-f-sans);font-weight:700} .ets-s5__chartwrap{position:absolute;left:0;top:0;transform-origin:0 0;opacity:0; transition:transform 1s cubic-bezier(.45,0,.2,1),opacity .6s ease} .ets-s5__stage:not([data-state=”none”]) .ets-s5__chartwrap{opacity:1} .ets-g5c{transform:scale(0);transition:transform 2s cubic-bezier(.25,.8,.3,1)} .ets-s5__stage.is-built .ets-g5c{transform:none} .ets-s5-box{position:absolute;z-index:2;left:max(24px,calc((100% – 1232px)/2));width:min(400px,calc(100% – 48px));margin:0; opacity:0;transform:translateX(-115%);transition:transform .8s cubic-bezier(.2,.75,.2,1),opacity .5s ease} .ets-s5 .ets-card.ets-s5-box{background:#FFFFFF;padding:20px 22px;box-shadow:0 10px 30px rgba(38,38,38,.14);max-width:none} .ets-s5__stage[data-state=”a”] .ets-s5-a{opacity:1;transform:none} /* „So funktioniert der CO₂-Preis“ scrollt von unten herein und schiebt die vorherige Box nach oben hinaus */ .ets-s5-b{opacity:1;transform:translateY(110vh);transition:transform 1s cubic-bezier(.45,0,.2,1)} .ets-s5__stage[data-state=”b”] .ets-s5-b{transform:none} .ets-s5__stage[data-state=”b”] .ets-s5-a{opacity:1;transform:translateY(-120vh);transition:transform 1s cubic-bezier(.45,0,.2,1)} @media (max-width:900px){ .ets-s5__head{top:12px;left:14px;right:14px} .ets-s5__head p{font-size:16px} .ets-s5-box{left:14px;width:auto;right:14px;top:auto!important;bottom:12px;max-height:70%;overflow:auto} } @media (prefers-reduced-motion:reduce){ .ets-s5__chartwrap,.ets-s5-box,.ets-g5c{transition:opacity .3s ease!important} } /* Sektion 6: Ein Kraftstoff, zwei Preise – Karte bildschirmfüllend, Zoom von Schwedt auf die ganze Grafik */ .ets-s6{position:relative;display:grid} .ets-s6__stage{grid-area:1/1;position:sticky;top:var(–ets-head);height:calc(100vh – var(–ets-head));height:calc(100svh – var(–ets-head));overflow:hidden;background:#FFFFFF;z-index:0} .ets-s6__steps{grid-area:1/1;position:relative;z-index:-1;pointer-events:none} .ets-s6__step{height:110vh} .ets-s6__step–end{height:140vh} .ets-s6__head{position:absolute;z-index:4;left:0;right:0;top:0;background:#FFFFFF;padding:22px max(24px,calc((100% – 1232px)/2)) 14px} .ets-s6__head h2{margin:0;font-family:var(–ets-f-head);font-weight:400;font-size:clamp(28px,3.8vw,48px);line-height:1.1;text-wrap:balance} .ets-s6__mapwrap{position:absolute;left:0;top:0;transform-origin:0 0;transition:transform 1.4s cubic-bezier(.45,0,.2,1)} .ets-g6-arc{stroke-dasharray:var(–len,600);stroke-dashoffset:var(–len,600);transition:stroke-dashoffset 1.6s cubic-bezier(.45,0,.25,1) .5s} .ets-g6-head,.ets-g6-lbl{opacity:0;transition:opacity .5s ease} .ets-s6__stage.is-arrows .ets-g6-arc{stroke-dashoffset:0} .ets-s6__stage.is-arrows .ets-g6-head{opacity:1;transition-delay:1.9s} .ets-s6__stage.is-arrows .ets-g6-lbl{opacity:1;transition-delay:1.4s} .ets-g6-hd,.ets-g6-totem{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .9s cubic-bezier(.2,.75,.2,1)} .ets-s6__stage.is-totem .ets-g6-hd,.ets-s6__stage.is-totem .ets-g6-totem{opacity:1;transform:none;transition-delay:.9s} .ets-g6-col{clip-path:inset(100% 0 0 0);transition:clip-path 2s cubic-bezier(.25,.8,.3,1)} .ets-s6__stage.is-cols .ets-g6-col{clip-path:inset(0 0 0 0)} .ets-g6-foot{opacity:0;transition:opacity .8s ease} .ets-s6__stage.is-cols .ets-g6-foot{opacity:1} .ets-g6-tt{opacity:0;transition:opacity .8s ease} .ets-s6__stage[data-state=”d”] .ets-g6-tt{opacity:1} .ets-s6-box{position:absolute;z-index:3;left:max(24px,calc((100% – 1232px)/2));width:min(380px,calc(100% – 48px));margin:0; opacity:1;transform:translateY(110vh);transition:transform 1s cubic-bezier(.45,0,.2,1)} .ets-s6 .ets-card.ets-s6-box{background:#FFFFFF;padding:18px 22px;box-shadow:0 10px 30px rgba(38,38,38,.16);max-width:none;font-size:17px} .ets-s6 .ets-box.ets-s6-box{max-width:none;box-shadow:0 10px 30px rgba(38,38,38,.16)} .ets-s6__stage[data-state=”a”] .ets-s6-a,.ets-s6__stage[data-state=”b”] .ets-s6-b,.ets-s6__stage[data-state=”c”] .ets-s6-c{transform:none} .ets-s6__stage[data-state=”b”] .ets-s6-a,.ets-s6__stage[data-state=”c”] .ets-s6-a,.ets-s6__stage[data-state=”c”] .ets-s6-b, .ets-s6__stage[data-state=”d”] .ets-s6-a,.ets-s6__stage[data-state=”d”] .ets-s6-b,.ets-s6__stage[data-state=”d”] .ets-s6-c, .ets-s6__stage[data-state=”e”] .ets-s6-a,.ets-s6__stage[data-state=”e”] .ets-s6-b,.ets-s6__stage[data-state=”e”] .ets-s6-c{transform:translateY(-120vh)} /* Box A bleibt auf Höhe „PCK-Raffinerie Schwedt“, Box B unter der linken Preisanzeige – Position per JS, Bewegung 1 s */ .ets-s6-a,.ets-s6-b,.ets-s6-c{transition:transform 1s cubic-bezier(.45,0,.2,1),top 1s cubic-bezier(.45,0,.2,1),left 1s cubic-bezier(.45,0,.2,1)} .ets-s6__head{transition:transform .8s cubic-bezier(.45,0,.2,1)} .ets-s6__stage[data-state=”e”] .ets-s6__head{transform:translateY(-110%)} .ets-s6__stage[data-state=”e”] .ets-g6-tt{opacity:1} .ets-s6__stage[data-state=”e”] .ets-s6-d{opacity:0;transform:translateX(-115%);transition-delay:0s} /* Sektion 7: weiße Box mit 85 % Deckkraft fliegt über der Vollbild-Grafik ein */ .ets-s7-box{width:min(560px,calc(100% – 48px));background:rgba(255,255,255,.85);padding:28px 30px 30px;box-shadow:0 12px 36px rgba(38,38,38,.18); opacity:0;transform:translateX(-115%);transition:transform 1s cubic-bezier(.2,.75,.2,1),opacity .6s ease} .ets-s7-box h2{margin:0 0 14px;font-family:var(–ets-f-head);font-weight:400;font-size:clamp(28px,3.4vw,40px);line-height:1.1} .ets-s7-box p{margin:0;font-size:18px;line-height:1.55} .ets-s6__stage[data-state=”e”] .ets-s7-box{opacity:1;transform:none;transition-delay:.3s} /* „Tanktourismus an der Grenze“ fliegt nach der grauen Kartenbox von links herein */ .ets-s6-d{opacity:0;transform:translateX(-115%);transition:transform .9s cubic-bezier(.2,.75,.2,1),opacity .5s ease} .ets-s6__stage[data-state=”d”] .ets-s6-d{opacity:1;transform:none;transition-delay:.7s} @media (max-width:900px){ .ets-s6__head{padding:12px 14px 10px} .ets-s6-box{left:14px;width:auto;right:14px;top:auto!important;bottom:12px} .ets-s6 .ets-card.ets-s6-box{font-size:16px} .ets-s6-box{left:14px!important} .ets-s7-box{padding:20px 20px 22px} .ets-s7-box p{font-size:16px} } @media (prefers-reduced-motion:reduce){ .ets-s6__mapwrap,.ets-s6-box,.ets-g6-arc,.ets-g6-col,.ets-g6-hd,.ets-g6-totem{transition:opacity .3s ease!important} } /* Scrollytelling */ .ets-scrolly{position:relative;max-width:1280px;margin:0 auto;padding:0 24px;display:grid; grid-template-columns:minmax(300px,4fr) minmax(0,7fr);gap:40px} .ets-stage{grid-column:2;grid-row:1;position:sticky;top:calc(var(–ets-head) + 16px); height:calc(100vh – var(–ets-head) – 32px);height:calc(100svh – var(–ets-head) – 32px)} .ets-steps{grid-column:1;grid-row:1;padding:20vh 0 40vh} .ets-fig{position:absolute;inset:0;margin:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px} .ets-fig img{max-height:calc(100% – 34px);width:auto;max-width:100%;object-fit:contain;background:#FFFFFF} .ets-fig figcaption{font-family:var(–ets-f-sans);font-size:13px;color:var(–ets-grey)} .ets-fig figcaption a{color:var(–ets-grey)} .ets.js .ets-fig{opacity:0;transform:translateX(90px) scale(.96);pointer-events:none; transition:opacity .7s ease,transform .9s cubic-bezier(.2,.75,.2,1)} .ets.js .ets-fig.is-past{transform:translateX(-90px) scale(.96)} .ets.js .ets-fig.is-active{opacity:1;transform:none;pointer-events:auto} .ets-step{min-height:78vh;display:flex;align-items:center} .ets-step:first-child{min-height:60vh} .ets-card{background:#FFFFFF;border-left:0;padding:4px 0;font-size:18px;max-width:440px} .ets-card p{margin:0 0 12px} .ets-card p:last-child{margin:0} .ets-card strong{font-family:var(–ets-f-sans);font-weight:700} .ets-chapter{font-family:var(–ets-f-head);font-weight:400;font-size:clamp(26px,3vw,34px);line-height:1.15;margin:0 0 14px} /* Infoboxen im Stil der Printgrafiken */ .ets-box{background:var(–ets-soft);padding:24px 26px 26px;max-width:460px;box-shadow:0 10px 30px rgba(35,31,32,.10)} .ets-box–beige{background:var(–ets-soft)} .ets-box–orange{background:var(–ets-soft)} .ets-box__bar{width:96px;height:4px;background:var(–ets-red);margin:0 0 14px} .ets-box–orange .ets-box__bar{background:var(–ets-red)} .ets-box h3{font-family:var(–ets-f-sub);font-weight:700;font-size:20px;line-height:1.25;margin:0 0 10px} .ets-box p{font-size:16px;line-height:1.5;margin:0 0 10px} .ets-box p:last-child{margin:0} .ets-box ol{list-style:none;margin:0 !important;padding:0 !important;counter-reset:ets} .ets-box li{position:relative;padding-left:46px !important;margin:0 0 16px !important;font-size:16px;line-height:1.5;counter-increment:ets} .ets-box li:last-child{margin:0 !important} .ets-box li::before{content:counter(ets);position:absolute;left:0;top:0;width:32px;height:32px;border-radius:50%; background:var(–ets-red);color:#FFFFFF;font-family:var(–ets-f-sans);font-weight:700;font-size:16px;display:flex;align-items:center;justify-content:center} .ets-box li b{display:block;font-family:var(–ets-f-sub);font-size:18px;margin-bottom:2px} .ets.js .ets-reveal{opacity:0;transform:translateY(40px);transition:opacity .7s ease,transform .8s cubic-bezier(.2,.75,.2,1)} .ets.js .ets-reveal.is-visible{opacity:1;transform:none} .ets.js .ets-box li{opacity:0;transform:translateX(-16px);transition:opacity .5s ease,transform .6s ease} .ets.js .ets-box.is-visible li{opacity:1;transform:none} .ets.js .ets-box.is-visible li:nth-child(2){transition-delay:.25s} .ets.js .ets-box.is-visible li:nth-child(3){transition-delay:.5s} /* Fortschritt */ .ets-progress{position:sticky;top:var(–ets-head);z-index:40;height:3px;background:transparent} .ets-progress span{display:block;height:3px;width:0;background:var(–ets-red);transition:width .15s linear} /* Abschluss */ .ets-outro{max-width:760px;margin:0 auto;padding:40px 24px 64px} .ets-outro h2{font-family:var(–ets-f-head);font-weight:400;font-size:clamp(28px,3.4vw,38px);margin:0 0 14px} .ets-sources{border-top:1px solid var(–ets-line);margin-top:40px;padding-top:12px;font-family:var(–ets-f-sans);font-size:13px;line-height:1.5;color:var(–ets-grey)} /* Mobil: Grafik oben fixiert, Text läuft darüber */ @media (max-width:900px){ .ets{font-size:17px} .ets-scrolly{display:block;padding:0 14px} .ets-stage{position:sticky;top:var(–ets-head);height:52vh;height:52svh;z-index:3;background:#FFFFFF; border-bottom:1px solid var(–ets-line);padding:6px 0} .ets-fig{inset:6px 0} .ets-fig img{max-height:calc(100% – 26px)} .ets-steps{position:relative;z-index:1;padding:6vh 0 30vh} .ets-step{min-height:62vh;align-items:center} .ets-step:first-child{min-height:40vh} .ets-card{max-width:none} .ets-box{max-width:none} .ets-hero{padding-top:48px} } @media (prefers-reduced-motion:reduce){ .ets.js .ets-fig,.ets.js .ets-reveal,.ets.js .ets-box li{transition:opacity .3s ease;transform:none!important} .ets-scrollhint span{animation:none} } /* Umschalter: wird per story.js direkt nach .login_placeholder eingefügt (mobil: neben dem Seitenmenü), liegt also außerhalb von .ets. Deshalb eigene Kopien der Variablen (hell / dunkel). */ :is(#ets-spritpreise-theme,#ets-spritpreise-theme-mobile){–ets-grey:#525151;–ets-line:#D8D8D8;–ets-red:#CC3114;–ets-f-sans:’ET-Sans’,sans-serif; display:flex;align-items:center;gap:8px;font-family:var(–ets-f-sans);font-size:13px;color:var(–ets-grey); transition:color .35s ease} :is(#ets-spritpreise-theme,#ets-spritpreise-theme-mobile).ets–dark{–ets-grey:#B4B4B4;–ets-line:#474747;–ets-red:#E0401F} :is(#ets-spritpreise-theme,#ets-spritpreise-theme-mobile),:is(#ets-spritpreise-theme,#ets-spritpreise-theme-mobile) *{box-sizing:border-box} :is(#ets-spritpreise-theme,#ets-spritpreise-theme-mobile) .ets-theme__lbl{font-weight:500} :is(#ets-spritpreise-theme,#ets-spritpreise-theme-mobile) .ets-theme__grp{display:flex;border:1px solid var(–ets-line);border-radius:999px;padding:2px;background:transparent} :is(#ets-spritpreise-theme,#ets-spritpreise-theme-mobile) button{appearance:none;border:0;background:transparent;color:var(–ets-grey);font:inherit;font-weight:700;padding:5px 12px;border-radius:999px;cursor:pointer;line-height:1.1} :is(#ets-spritpreise-theme,#ets-spritpreise-theme-mobile) button[aria-pressed=”true”]{background:var(–ets-red);color:#FFFFFF} :is(#ets-spritpreise-theme,#ets-spritpreise-theme-mobile) button:focus-visible{outline:2px solid var(–ets-red);outline-offset:2px} /* Farbwechsel beim Umschalten – ohne .ets-card/.ets-box, sonst wird deren Einflieg-Bewegung überschrieben */ .ets,.ets-c1__stage,.ets-s4__stage,.ets-s5__stage,.ets-s6__stage,.ets-sl__stage{transition:background-color .35s ease,color .35s ease} @media (max-width:640px){ :is(#ets-spritpreise-theme,#ets-spritpreise-theme-mobile) .ets-theme__lbl{display:none} :is(#ets-spritpreise-theme,#ets-spritpreise-theme-mobile){font-size:12px} :is(#ets-spritpreise-theme,#ets-spritpreise-theme-mobile) button{padding:4px 9px} } /* Symbole (Heroicons Mond / Sonne): nur unter 530px statt der Wörter „dunkel“ / „hell“ */ :is(#ets-spritpreise-theme,#ets-spritpreise-theme-mobile) .ets-theme__ico{display:none;width:18px;height:18px} @media (max-width:529.98px){ :is(#ets-spritpreise-theme,#ets-spritpreise-theme-mobile) .ets-theme__txt{display:none} :is(#ets-spritpreise-theme,#ets-spritpreise-theme-mobile) .ets-theme__ico{display:block} :is(#ets-spritpreise-theme,#ets-spritpreise-theme-mobile) button{padding:4px 7px} } /* Mobil (unter 530px): .login_placeholder wird beim Scrollen durch „Teilen“ ersetzt. Deshalb ersetzt ein zweiter Umschalter dort das Element neben [data-testid=”side-menu”] (Suche, Leseliste), das story.js mit data-ets-replaced markiert. */ #ets-spritpreise-theme-mobile{display:none} @media (max-width:529.98px){ #ets-spritpreise-theme.ets-has-mobile{display:none} [data-ets-replaced]{display:none !important} /* Seitenmenü (.w-10 = 40px) auf die Breite des Burgers (22px) verkleinern, damit die Pille mehr Platz hat; 6px Abstand zur Pille. Greift nur, wenn unser Umschalter direkt daneben steht. */ [data-testid=”side-menu”]:has(+ #ets-spritpreise-theme-mobile){width:auto !important;flex:none;margin-right:6px} /* passt sich dem freien Platz neben dem Burger an (max. 60px): Pille und Symbole schrumpfen mit */ #ets-spritpreise-theme-mobile{display:flex;flex:1 1 0;min-width:0;max-width:60px;container-type:inline-size} #ets-spritpreise-theme-mobile .ets-theme__grp{width:100%;min-width:0} #ets-spritpreise-theme-mobile button{flex:1 1 0;min-width:0;display:flex;align-items:center;justify-content:center;padding:3px 4px} #ets-spritpreise-theme-mobile .ets-theme__ico{flex:none;width:clamp(8px,calc(50cqi – 11px),16px);height:auto;aspect-ratio:1} } /* ===== Dunkle Fassung (Umschalter „Version: dunkel / hell“) ===== */ .ets.ets–dark{–ets-ink:#EDEDED;–ets-grey:#B4B4B4;–ets-grey-2:#9A9A9A;–ets-line:#474747;–ets-bg:#2E2E2E;–ets-bg-2:#242424;–ets-bg-3:#1A1A1A;–ets-bg-4:#101010;–ets-red:#E0401F;–ets-red-2:#F0623F;–ets-navy:#6E9EC4;–ets-soft:#242424;background:var(–ets-bg)} .ets.ets–dark a:hover{color:#FFFFFF} .ets–dark .ets-c1__stage{background:var(–ets-bg)} .ets–dark .ets-c1__step .ets-card{background:var(–ets-bg-2);box-shadow:0 10px 30px rgba(0,0,0,0.45)} .ets–dark .ets-c1__fade{background:linear-gradient(var(–ets-bg),rgba(46,46,46,0))} .ets–dark .ets-c1__fade::before{background:var(–ets-bg)} .ets–dark .ets-s1-hero{background:var(–ets-bg-2);box-shadow:0 10px 32px rgba(0,0,0,0.32)} .ets–dark .ets-s1-qwrap .ets-questions{box-shadow:0 10px 32px rgba(0,0,0,0.45)} .ets–dark .ets-c1__stage .ets-scrollhint{background:rgba(36,36,36,.92)} .ets–dark .ets-c1__title{background:rgba(46,46,46,.94)} .ets–dark .ets-c1__mapcap{background:rgba(36,36,36,.9)} .ets–dark .ets-s4__stage{background:var(–ets-bg)} .ets–dark .ets-s4 .ets-card.ets-s4-box{background:var(–ets-bg-2);box-shadow:0 10px 30px rgba(0,0,0,0.45)} .ets–dark .ets-s5__stage{background:var(–ets-bg)} .ets–dark .ets-s5 .ets-card.ets-s5-box{background:var(–ets-bg-2);box-shadow:0 10px 30px rgba(0,0,0,0.45)} .ets–dark .ets-s6__stage{background:var(–ets-bg)} .ets–dark .ets-s6__head{background:var(–ets-bg)} .ets–dark .ets-s6 .ets-card.ets-s6-box{background:var(–ets-bg-2);box-shadow:0 10px 30px rgba(0,0,0,0.51)} .ets–dark .ets-s6 .ets-box.ets-s6-box{box-shadow:0 10px 30px rgba(0,0,0,0.51)} .ets–dark .ets-s7-box{background:rgba(26,26,26,.85);box-shadow:0 12px 36px rgba(0,0,0,0.58)} .ets–dark .ets-fig img{background:transparent} .ets–dark .ets-card{background:transparent} .ets–dark .ets-box{box-shadow:0 10px 30px rgba(0,0,0,0.32)} .ets–dark .ets-stage{background:var(–ets-bg)} .ets–dark .ets-s1-hero{background:rgba(36,36,36,.94)} .ets–dark .ets-c1__map img{background:transparent} /* Sektion 3b: Fünf Länder im Vergleich (Grafik 7) – Überleitung vor „Europäische Energiesteuer im Vergleich“ lead: Überschrift + Vorspann wie die Einleitung · chart: Liniengrafik scrollt herein und baut sich auf · boxes: drei Textboxen nebeneinander */ .ets-sl{position:relative;display:grid; –sl-blue:#4E82AE;–sl-orange:#EA7B2C;–sl-red:#C8161F;–sl-band:#E3DED6;–sl-axis:#231F20;–sl-tick:#5F5A55} .ets-sl__stage{grid-area:1/1;position:sticky;top:var(–ets-head);height:calc(100vh – var(–ets-head));height:calc(100svh – var(–ets-head));overflow:hidden;background:#FFFFFF;z-index:0} .ets-sl__steps{grid-area:1/1;position:relative;z-index:-1;pointer-events:none} .ets-sl__step{height:85vh} .ets-sl__step–lead{height:95vh} .ets-sl__step–end{height:130vh} /* Bühne: Vorspann oben (bleibt stehen), darunter Grafik und Boxen – alles auf einem Bildschirm */ .ets-sl__body{position:absolute;z-index:2;top:18px;bottom:12px;left:max(24px,calc((100% – 1232px)/2));right:max(24px,calc((100% – 1232px)/2)); display:flex;flex-direction:column} /* Vorspann wie ganz oben die Einleitung */ .ets-sl-hero{position:relative;z-index:3;margin:0;padding:24px 34px 24px;background:#FFFFFF;box-shadow:0 10px 32px rgba(38,38,38,.10); transition:transform .9s cubic-bezier(.2,.75,.2,1),opacity .5s ease} /* Beginn: Block fliegt von links herein (wie die Infotexte 1 bis 3 der vorherigen Sektion) */ .ets.js .ets-sl__stage[data-state=”none”] .ets-sl-hero{opacity:0;transform:translateX(-110%)} .ets-sl-hero h2{font-family:var(–ets-f-head);font-weight:400;font-size:clamp(30px,3.8vw,48px);line-height:1.05;margin:0 0 12px} .ets-sl-hero .ets-lead{font-size:19px;line-height:1.5;margin:0;max-width:1000px} .ets-sl-chart{margin-top:clamp(14px,2.6vh,28px);padding-top:clamp(10px,2vh,18px);border-top:1.5px solid var(–sl-axis); transition:transform 1.1s cubic-bezier(.2,.75,.2,1),opacity .5s ease} .ets.js .ets-sl__stage[data-state=”none”] .ets-sl-chart,.ets.js .ets-sl__stage[data-state=”lead”] .ets-sl-chart{transform:translateY(100vh);opacity:0} .ets-sl-chart__cap{font-family:var(–ets-f-sans);font-size:13px;font-weight:600;color:var(–sl-tick);margin:0} /* Liniengrafik: Skala 1,60 bis 2,50 Euro */ .ets-sl-plot{position:relative;height:150px;margin:0 22px} .ets-sl-axis{position:absolute;left:0;right:0;top:108px;height:1.5px;background:var(–sl-axis);transform-origin:0 50%; transition:transform .9s cubic-bezier(.45,0,.2,1)} .ets-sl-tick{position:absolute;top:103px;width:0;height:11px;border-left:1.2px solid var(–sl-axis);transition:opacity .4s ease} .ets-sl-tick span{position:absolute;top:15px;left:0;transform:translateX(-50%);font-family:var(–ets-f-sans);font-size:12px;color:var(–sl-tick);white-space:nowrap} .ets-sl-band{position:absolute;top:104px;height:9px;background:var(–sl-band);transition:opacity .6s ease 1.7s} .ets-sl-eu{position:absolute;top:2px;height:106px;width:0;border-left:1.4px dashed var(–sl-tick);clip-path:inset(-20px -200px 0 -200px); transition:clip-path .8s cubic-bezier(.45,0,.2,1) 1.2s,opacity .4s ease 1.2s} .ets-sl-eu span{position:absolute;top:-2px;left:0;transform:translateX(-50%);padding:0 4px;background:inherit; font-family:var(–ets-f-sans);font-size:12px;font-weight:600;color:var(–sl-tick);white-space:nowrap;line-height:1} .ets-sl-m{position:absolute;top:24px;width:0;height:90px;left:var(–x);color:var(–c); transition:left 1.6s cubic-bezier(.25,.8,.3,1) .5s,opacity .4s ease .5s} .ets-sl-m__dot{position:absolute;left:-7px;top:77px;width:14px;height:14px;border-radius:50%;background:var(–c);box-shadow:0 0 0 2px #FFFFFF} .ets-sl-m__stem{position:absolute;left:-.6px;top:42px;width:1.2px;height:36px;background:var(–c)} .ets-sl-m__lbl{position:absolute;top:0;white-space:nowrap;line-height:1.1} .ets-sl-m__lbl b{display:block;font-family:var(–ets-f-sans);font-size:14px;font-weight:700;color:var(–ets-ink)} .ets-sl-m__lbl em{display:block;font-style:normal;font-family:var(–ets-f-head);font-size:17px;margin-top:3px} .ets-sl-m–c .ets-sl-m__lbl{left:0;transform:translateX(-50%);text-align:center} .ets-sl-m–r .ets-sl-m__lbl{right:-6px;text-align:right} .ets-sl-m–l .ets-sl-m__lbl{left:-6px;text-align:left} .ets-sl-m–blue{–c:var(–sl-blue)} .ets-sl-m–orange{–c:var(–sl-orange)} .ets-sl-m–red{–c:var(–sl-red)} /* Aufbau der Grafik erst, wenn sie hereingescrollt ist */ .ets.js .ets-sl__stage:not(.is-built) .ets-sl-axis{transform:scaleX(0)} .ets.js .ets-sl__stage:not(.is-built) .ets-sl-tick,.ets.js .ets-sl__stage:not(.is-built) .ets-sl-band{opacity:0;transition-delay:0s} .ets.js .ets-sl__stage:not(.is-built) .ets-sl-eu{clip-path:inset(100% -200px 0 -200px);opacity:0;transition-delay:0s} .ets.js .ets-sl__stage:not(.is-built) .ets-sl-m{left:0;opacity:0;transition-delay:0s} /* Drei Textboxen nebeneinander, erscheinen gleichzeitig */ .ets-sl-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,44px);margin-top:clamp(12px,2.6vh,28px); transition:opacity .7s ease,transform .8s cubic-bezier(.2,.75,.2,1)} .ets.js .ets-sl__stage:not([data-state=”boxes”]) .ets-sl-cols{opacity:0;transform:translateY(28px);pointer-events:none} .ets-sl-col{margin:0} .ets-sl-col__bar{width:32px;height:4px;background:var(–c);margin:0 0 12px} .ets-sl-col h3{font-family:var(–ets-f-head);font-weight:400;font-size:20px;line-height:1.2;margin:0 0 8px} .ets-sl-col p{font-size:16px;line-height:1.5;margin:0} .ets-sl__main{flex:1;display:flex;flex-direction:column;justify-content:flex-start;min-height:0} .ets-sl-br{display:none} .ets-sl-notes{margin-top:auto;padding-top:10px;border-top:1px solid var(–ets-line);font-family:var(–ets-f-sans);font-size:11px;line-height:1.4;color:var(–ets-grey); transition:opacity .6s ease .4s} .ets-sl-notes p{margin:0 0 3px} .ets.js .ets-sl__stage[data-state=”none”] .ets-sl-notes,.ets.js .ets-sl__stage[data-state=”lead”] .ets-sl-notes{opacity:0;transition-delay:0s} @media (max-width:900px){ .ets-sl__stage{position:relative;top:auto;height:auto;overflow:visible} .ets-sl__steps{display:none} .ets-sl__body{position:relative;top:auto;bottom:auto;left:auto;right:auto;padding:16px 14px 28px} .ets-sl-hero{padding:22px 20px} .ets-sl-hero .ets-lead{font-size:17px} .ets.js .ets-sl__stage[data-state=”none”] .ets-sl-chart,.ets.js .ets-sl__stage[data-state=”lead”] .ets-sl-chart{transform:translateY(60px)} .ets-sl-chart{margin-top:22px;padding-top:10px} .ets-sl-notes{margin-top:18px} .ets-sl-chart__cap{font-size:12px} .ets-sl-plot{height:132px;margin:0 12px} .ets-sl-axis{top:96px} .ets-sl-tick{top:91px} .ets-sl-band{top:92px} .ets-sl-eu{height:94px} .ets-sl-tick span{font-size:10px} .ets-sl-tick–odd span{display:none} .ets-sl-m{top:20px;height:80px} .ets-sl-m__dot{top:69px;width:12px;height:12px;left:-6px} .ets-sl-m__stem{top:38px;height:32px} .ets-sl-m__lbl b{font-size:12px} .ets-sl-m__lbl em{font-size:14px;margin-top:2px} .ets-sl-m–c .ets-sl-m__lbl{left:auto;right:-6px;transform:none;text-align:right} .ets-sl-cols{grid-template-columns:1fr;gap:12px;margin-top:10px} .ets-sl-br{display:block;height:0} .ets-sl-m–two .ets-sl-m__lbl{top:-14px} .ets-sl__main{padding-top:4px} .ets-sl-col__bar{width:26px;height:3px;margin-bottom:6px} .ets-sl-col h3{font-size:16px;margin-bottom:3px} .ets-sl-col p{font-size:13.5px;line-height:1.4} .ets-sl-notes{font-size:9.5px;line-height:1.35;padding-top:6px} } @media (min-width:901px) and (min-height:821px){ .ets-sl-plot{height:190px} .ets-sl-axis{top:140px} .ets-sl-tick{top:135px} .ets-sl-band{top:135px;height:11px} .ets-sl-eu{height:138px} .ets-sl-tick span{font-size:13px} .ets-sl-m{top:30px;height:115px} .ets-sl-m__lbl b{font-size:16px} .ets-sl-m__lbl em{font-size:22px} .ets-sl-m__stem{top:56px;height:48px} .ets-sl-m__dot{top:102px;left:-8px;width:16px;height:16px} .ets-sl-col h3{font-size:22px} .ets-sl-col p{font-size:17px} } @media (min-width:901px) and (max-height:820px){ .ets-sl-hero{padding:16px 26px 16px} .ets-sl-hero h2{font-size:32px;margin-bottom:8px} .ets-sl-hero .ets-lead{font-size:16.5px;line-height:1.45} .ets-sl-chart{margin-top:10px;padding-top:8px} .ets-sl-cols{margin-top:8px} .ets-sl-col__bar{margin-bottom:8px} .ets-sl-col h3{font-size:18px;margin-bottom:4px} .ets-sl-col p{font-size:14.5px;line-height:1.42} .ets-sl-notes{font-size:10px;padding-top:6px} } @media (prefers-reduced-motion:reduce){ .ets-sl-hero,.ets-sl-chart,.ets-sl-cols,.ets-sl-m,.ets-sl-axis,.ets-sl-eu,.ets-sl-band,.ets-sl-tick{transition:opacity .3s ease!important} .ets.js .ets-sl__stage .ets-sl-hero,.ets.js .ets-sl__stage .ets-sl-chart,.ets.js .ets-sl__stage .ets-sl-cols,.ets.js .ets-sl__stage .ets-sl-axis,.ets.js .ets-sl__stage .ets-sl-eu{transform:none!important} .ets.js .ets-sl__stage .ets-sl-m{left:var(–x)!important} } .ets:not(.js) .ets-sl__stage{position:relative;height:auto;min-height:calc(100vh – var(–ets-head))} .ets:not(.js) .ets-sl__body{position:relative;top:auto;bottom:auto;min-height:70vh} /* dunkle Fassung */ .ets–dark .ets-sl{–sl-blue:#7FA8CC;–sl-orange:#F08A45;–sl-red:#FF6B57;–sl-band:#3C3C3C;–sl-axis:#CFCFCF;–sl-tick:#A8A8A8} .ets–dark .ets-sl__stage{background:var(–ets-bg)} .ets–dark .ets-sl-hero{background:rgba(36,36,36,.94);box-shadow:0 10px 32px rgba(0,0,0,0.32)} .ets–dark .ets-sl-m__dot{box-shadow:0 0 0 2px var(–ets-bg)} .ets-sl-eu span{background:#FFFFFF} .ets–dark .ets-sl-eu span{background:var(–ets-bg)} /* ===== Einbettung in die Hauptseite ===== */ .login_placeholder{display:none} /* Listenpunkte: Standardfarbe statt der Farbe der Hauptseite */ #etd21-news-content[data-scrollytelling-story] li::marker{color:inherit !important}

Wissen

Spritpreise unter der Lupe

Unterschiede zwischen europäischen Ländern und den USA

Im brandenburgischen Schwedt wird Kraftstoff sowohl für Deutschland als auch für Polen raffiniert. Obwohl Benzin und Diesel in derselben Anlage entstehen, zahlen Autofahrer in Deutschland mehr als in Polen. Noch größer wird der Abstand mit Blick über den Atlantik: In den USA kostet 1 Liter Normalbenzin umgerechnet nur etwa halb so viel wie im EU-Durchschnitt, obwohl das Rohöl zu vergleichbaren Preisen auf dem Weltmarkt gehandelt wird. Ein detaillierter Blick auf die Preise an den Zapfsäulen.

Darum geht es:

  1. Woraus setzt sich der Preis an der Zapfsäule zusammen?
  2. Weshalb tanken Autofahrer in den USA so viel günstiger?
  3. Wie schaffen es manche Länder im europäischen Vergleich, günstiger zu bleiben?
  4. Warum ist der gleiche Kraftstoff in Deutschland teurer als in Polen?
  5. Was bringt der Tankrabatt, der seit dem 1. Oktober in Deutschland gilt?

Weiterscrollen

Die Preisunterschiede

Bestandteile der Zapfsäulenpreise

Zusammensetzung des Benzinpreises, Anteile in Prozent

EuropaEU-Durchschnitt, Super 95 (5. Oktober 2026)27 %Energiesteuerund AbgabenMengensteuer je Liter(geschätzt)18 %MehrwertsteuerSteuersatz Ø 21 % aufNettopreis undEnergiesteuer(geschätzt)27 %RohölBrent: 100 $ je Barrel28 %Raffinerie, Logistikund HandelVerarbeitung, Transport,Tankstelle, Marge(geschätzt)Steueranteil45 %
USALandesdurchschnitt, Normalbenzin (Mai 2026)12 %SteuernBundes- undStaatssteuern52 %Rohöl22 %Raffinierung15 %Vertrieb undMarketingSteueranteil12 %

Quellen: EU-Kommission (Weekly Oil Bulletin), Tax Foundation, U.S. Energy Information Administration (EIA); Stand 5.10.2026 (USA-Anteile: Mai 2026). EU-Anteile: eigene Berechnung (geschätzt). Infobox: EIA, Tax Foundation, EU-Energiesteuerrichtlinie 2003/96/EG, Europäische Umweltagentur (EEA). Grafik: Epoch Times

Super 95 je Liter (USA: Normalbenzin):unter 1,50 €1,50 bis 1,79 €1,80 bis 1,99 €2,00 bis 2,19 €ab 2,20 €keine AngabeStand der Preise (inklusive Steuern und Abgaben): beschriftete EU-Staaten Tagesdurchschnitte vom 9.10.2026 aus nationalen Quellen (Deutschland: Super E5; Niederlande: Stand 5.10.2026); Einfärbung der übrigen EU-Staaten nach EU-Kommission, Stand 28.9.2026; USA: Regular 87, Wochendurchschnitte der EIA vom 5.10.2026, umgerechnet mit 1 Gallone = 3,785 Liter und 1 € = 1,1225 $ (EZB, 2.10.2026). Quellen: fuel-prices.eu nach nationalen Quellen, Markttransparenzstelle für Kraftstoffe, EU-Kommission (Weekly Oil Bulletin), U.S. Energy Information Administration (EIA).Preise: EU-Staaten 9.10.2026 (Niederlande 5.10.), übrige EU 28.9.2026; USA 5.10.2026 (1 € = 1,1225 $, EZB 2.10.2026). Quellen: fuel-prices.eu, Markttransparenzstelle, EU-Kommission, EIA. Grafik: Epoch Times · Weltkarte vollständig ansehen

Am teuersten in der EU tankt man in Dänemark und den Niederlanden. Super kostet dort rund 2,43 Euro je Liter.

Deutschland liegt mit 2,18 Euro für Super E5 (Stand: 9. Oktober) im oberen Feld. Deutlich günstiger sind Schweden mit 1,70 Euro und Kroatien mit 1,75 Euro.

Und in den USA? Normalbenzin kostet im Landesdurchschnitt umgerechnet rund 1 Euro je Liter. Selbst im teuren Kalifornien sind es nur rund 1,47 Euro.

Im EU-Durchschnitt kostete ein Liter Super am 5. Oktober 2,01 Euro, in den USA ein Liter Normalbenzin umgerechnet 1,02 Euro. Diesel kostete in der EU 2,15 Euro, in den USA 1,46 Euro.

Den größten Unterschied bewirken die Steuern. In der EU entfallen 27 Prozent des Preises auf die Energiesteuer und weitere Abgaben und 18 Prozent auf die Mehrwertsteuer – zusammen fast die Hälfte.

Der Mehrwertsteuersatz liegt im Schnitt bei rund 21 Prozent. Weil er auf den Preis aufgeschlagen wird, macht er am Endpreis 18 Prozent aus.

In den USA sind nur 12 Prozent des Benzinpreises Steuern. Mehr als die Hälfte, 52 Prozent, entfällt dort auf das Rohöl selbst.

Fünf Länder im Vergleich

In unserer Übersicht werden anstelle von 27 EU-Staaten fünf ausgewählte Länder dargestellt. Sie bilden die Spannweite der Spritpreise in Europa ab und machen sichtbar, wie stark der Staat den Preis an der Zapfsäule bestimmt: Rohöl und seine Verarbeitung in der Raffinerie kosten überall ungefähr gleich viel, die Besteuerung ist dagegen sehr unterschiedlich. Die angegebenen Preise beziehen sich in der Regel auf den 9. Oktober 2026, abweichende Daten sind entsprechend gekennzeichnet. Da die Preise täglich stark schwanken können, stellen wir einen stichtagbezogenen Vergleich dar.

Preise: Tagesdurchschnitte vom 9.10.2026, für Deutschland Super E5 inklusive Tankrabatt; Niederlande: Stand 5.10.2026. EU-Schnitt: Weekly Oil Bulletin, 28.9.2026. Rangfolge nach den Preisen aller 27 EU-Staaten vom 28.9.2026.

Quellen: fuel-prices.eu, EU-Kommission (Weekly Oil Bulletin), Markttransparenzstelle für Kraftstoffe, Tax Foundation nach EU-Steuerdatenbank, Rat der EU. Grafik: Epoch Times. Stand: 9.10.2026.

Europäische Energiesteuern im Vergleich

Super 95

Energiesteuer in Cent je Liter
MwSt.
Preis 9.10.
Niederlande
84,5
regulär 100,21−15,7
21 %
2,43 €*
Dänemark
71,7
25 %
2,43 €
Deutschland
51,41
regulär 65,45−14,04
19 %
2,18 €
Kroatien
39,7
regulär 51,2−11,5
25 %
1,75 €
Schweden
21,4
regulär 42,9−21,5
25 %
1,70 €
EU-Mindestsatz 35,9 Cent

Diesel

Energiesteuer in Cent je Liter
MwSt.
Preis 9.10.
Dänemark
56,9
25 %
2,52 €
Niederlande
55,2
regulär 65,43−10,2
21 %
2,51 €*
Deutschland
33,00
regulär 47,04−14,04
19 %
2,23 €
Kroatien
26,0
regulär 40,6−14,6
25 %
1,85 €
Schweden
14,0
regulär 35,5−21,5
25 %
2,04 €
EU-Mindestsatz 33,0 Cent
geltende Energiesteuer
befristete Senkung (Entlastung)
EU-Mindestsatz (Richtlinie 2003/96/EG)
Deutschland: Tankrabatt vom 1.10. bis 31.12.2026, Energiesteuer −14,04 Cent je Liter (mit MwSt. rund −17 Cent).
Kroatien: EU-Ausnahmegenehmigung vom 1.8.2026 bis 31.1.2027: bis zu 21,95 Cent (Benzin) und 22,5 Cent (Diesel) unter dem EU-Mindestsatz, dazu staatliche Höchstpreise. Stand 6.10.2026: Benzin 3,8 Cent über, Diesel 7 Cent unter dem Mindestsatz.
Schweden: EU-Ausnahmegenehmigung vom 1.7. bis 30.11.2026: bis zu 2,40 Kronen (rund 22 Cent) je Liter unter dem EU-Mindestsatz.
Niederlande: Verbrauchsteuersenkung bis 31.12.2026.
Dänemark: keine befristete Entlastung.
Preise: Tagesdurchschnitte vom 9.10.2026 aus nationalen Quellen, für Deutschland Super E5. *Niederlande: Stand 5.10.2026, keine Tageswerte.

Quellen: fuel-prices.eu (Tagespreise 9.10.2026 nach nationalen Quellen; Steuersätze Schweden nach EU-Kommission, Stand 5.10.2026; Kroatien nach kroatischer Regierungsverordnung, Stand 6.10.2026), Markttransparenzstelle für Kraftstoffe (Deutschland, 9.10.2026), Rijksoverheid (Niederlande: Verbrauchsteuer regulär und befristet gesenkt, 2026), Tax Foundation nach EU-Steuerdatenbank (übrige und reguläre Steuersätze, Stand 1.1.2026), Deutscher Bundestag, Rat der EU (Kroatien: Dok. 10873/26; Schweden: Durchführungsbeschluss 2026/1295). Nationale CO₂-Steuern sind in den Sätzen enthalten, soweit sie erhoben werden (etwa in Schweden); in Deutschland kommt der CO₂-Preis nach dem Brennstoffemissionshandelsgesetz hinzu.

Wie hoch die Spritsteuer ausfällt, entscheidet jedes EU-Land selbst – grundsätzlich jedoch nicht unter den EU-Mindestsätzen von 35,9 Cent (Benzin) und 33,0 Cent (Diesel) je Liter.

Die Niederlande verlangen auf Super 84,5 Cent je Liter, Dänemark 71,7 Cent. In Deutschland sind es derzeit 51,41 Cent – dank Tankrabatt 14,04 Cent weniger als regulär.

Der CO₂-Preis

Zusätzlich verlangen manche Länder einen CO₂-Preis. In Deutschland macht er 14,8 Cent je Liter Super und 16,2 Cent je Liter Diesel aus – mit Mehrwertsteuer rund 18 bzw. 19 Cent.

Dänemark erhebt 27,6 Cent je Liter Benzin; die Abgabe ist dort Teil der Energiesteuer. Schweden hat seine CO₂-Steuer bis Ende November von 29,3 auf 7,8 Cent gesenkt. Die Niederlande und Kroatien erheben keine CO₂-Steuer auf Kraftstoff.

Ein Kraftstoff, zwei Preise

Besonders deutlich wird der Steuereffekt an der Oder. Die PCK-Raffinerie in Schwedt versorgt Berlin und Brandenburg und liefert auch nach Westpolen.

An der Zapfsäule kostet Super in Berlin und Brandenburg 2,18 Euro, in Polen höchstens 1,58 Euro. Bei Diesel sind es 2,23 gegenüber 1,79 Euro.

Rohöl, Raffinerie, Transport und Handel kosten auf beiden Seiten fast gleich viel: 117 bzw. 118 Cent je Liter. Den Unterschied machen Energiesteuer, CO₂-Preis und Mehrwertsteuer. Polen hat Mehrwertsteuer und Akzise bis Jahresende deutlich gesenkt.

Stand: 9. Oktober 2026 (Preisvergleich EU/USA: 5. Oktober 2026). Alle Werte gerundet.

Quellen: EU-Kommission (Weekly Oil Bulletin), U.S. Energy Information Administration (EIA), fuel-prices.eu nach nationalen Quellen, Markttransparenzstelle für Kraftstoffe, Tax Foundation, Rat der EU, Deutscher Bundestag, Skatteverket, Skatteministeriet, Deutsche Emissionshandelsstelle/ADAC, polnisches Energie- und Finanzministerium (Dz.U. 1288, 1289), NBP, PCK Raffinerie; eigene Berechnungen. Grafiken: Epoch Times.

Leave a Reply

Your email address will not be published.