@charset "utf-8";
@import url("normalize.css");
@import url('https://fonts.googleapis.com/css2?family=Heebo:wght@200..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200');
@import url('https://fonts.googleapis.com/css2?family=Archivo:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Archivo+Narrow:ital,wght@0,400..700;1,400..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Chiron+Hei+HK:ital,wght@0,200..900;1,200..900&display=swap');

html {font-size: 100%; scroll-behavior: smooth;}
body {margin: 0; font-family: 'Heebo', sans-serif; color: #111; background-color: #fff; box-sizing: border-box; font-size: 1rem; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-smoothing: antialiased;}
ul {margin: 0; padding: 0; list-style: none;}
dl {margin: 0;}
img {width: 100%; height: auto; display: block; border-radius: 0.625rem;}

*, ::before, ::after {box-sizing: inherit;}

a {transition: all 0.3s ease-in-out;}
main {text-align: center;}

h1 {font-family: 'Chiron Hei HK', sans-serif; font-weight: 550; font-size: 2.5rem; margin: 1.75rem 0 1.25rem 0; line-height: 1.375; letter-spacing: -0.025rem; word-wrap: break-word; overflow-wrap: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto;}
h2 {font-family: 'Chiron Hei HK', sans-serif; color: #191f22; font-weight: 475; font-size: 1.625rem; line-height: 1.5; margin: 4rem 0 1.75rem 0; letter-spacing: -0.04rem; word-wrap: break-word; overflow-wrap: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto;}
h3 {font-weight: 525; font-size: 1.375rem; line-height: 1.375; margin: 1rem 0;}
h4 {font-family: 'Chiron Hei HK', sans-serif; color: #191f22; font-weight: 475; font-size: 1.75rem; line-height: 1.5; margin: 0; letter-spacing: 0.01rem}
h5 {font-weight: 525; font-size: 1.375rem; line-height: 1.375; margin: 1rem 0;}

h2.notiz {margin-bottom: 4rem; padding: 0 3rem; font-style:italic; font-size: 1.75rem; font-weight: 500; text-align: center;}

p {font-family: 'Archivo', sans-serif; font-size: 1.1875rem; color: #313235; font-weight: 350; line-height: 1.75; hyphens: auto; margin: 1.375rem 0;}
p strong {font-weight: 475;}
a {color: #111; text-decoration: none;}
p a {font-weight: 450;;}
p sup {font-weight: 275}
figure {margin: 0;}
.zoomIn figure {overflow: hidden; width: 100%; height: auto;}
.zoomIn img {-webkit-transform: scale(1); transform: scale(1); -webkit-transition: transform .4s ease-in-out; transition: .3s ease-in-out;}
.zoomIn:hover img {-webkit-transform: scale(1.05);transform: scale(1.025);}

.columns {columns: 2; column-gap: 3rem;}
.columns p { margin: 0 0 1.5rem 0; text-align: justify; hyphens:auto; orphans:2; widows: 2;}
.columns h3 {column-break-after: avoid;	break-after: avoid-column;	-webkit-column-break-inside:avoid; text-align: left}
.note {display: flex; gap: 0.5625rem; margin: 1.375rem 0;}
.note span {width: 0.375rem; height: auto; background-color: #EAC97B; border-radius: 0.25rem;}
.note p {margin: 0; font-weight: 500;}

.banner-wrap {max-width: 1500px; margin: 0 auto 5rem auto; padding: 0 1.5rem;}
.banner-background {padding: 1rem 1rem 2.5rem 1rem; background-image: url(../images/banner/polestar-banner.jpg); background-size: cover; background-position: center; min-height: 50vh; display: flex; justify-content: center; align-items: flex-end; position: relative; border-radius: 0.75rem; overflow: hidden; z-index: 200;}
.banner-background div {position: relative; text-align: center;}
.banner-background::before {content: ""; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: linear-gradient(to bottom, rgba(0,0,0,0.0) 20%, rgba(0,0,0,0.0) 40%, rgba(0,0,0,0.8) 100%);}
.banner-background h1 {color: #fff; font-size: 3rem; text-align: center;}
.banner-background a {font-size: 0.9375rem; font-weight: 425; padding: 0.875rem 2rem 0.8125rem 2rem; display: inline-block; color: #fff; border: 2px solid #fff; border-radius: 0.375rem; transition: border-color 0.3s ease-out;}
.banner-background a:hover {border-color: #B1B9C5;}

.vierer {max-width: 1580px; margin: 4rem auto 5rem auto; display: flex; flex-wrap: wrap; gap: 1.875rem; text-align: left;}

.ressorts {margin: 5rem auto 8rem auto; display: flex; gap: 5rem; padding: 0 1.5rem;}
.ressorts ul {flex: 62% 1 0; font-family: 'Chiron Hei HK', sans-serif; font-weight: 425; font-size: 1.375rem; line-height: 1.5; letter-spacing: -0.02rem}
.ressorts ul li {margin-bottom: 0.5rem;}
.ressorts a {display: block; background-color: transparent; padding: 0.25rem 1rem; border-radius: 0.5rem; display: flex; justify-content: space-between; align-items: center;}
.ressorts a:hover {background-color: #fff;}
.ressorts a::after {font-family: 'Material Symbols Outlined'; -webkit-font-feature-settings: 'liga' 1; -moz-font-feature-settings: 'liga' 1; font-feature-settings: 'liga' 1; content: "\e5cc"; font-size: 1.75rem; font-weight: 300;}
.ressorts div {display: none;padding-left: 5rem; border-left: 2px #000 solid; font-size: 0.9375rem;}

.icon::before {font-family: 'Material Symbols Outlined'; -webkit-font-feature-settings: 'liga' 1; -moz-font-feature-settings: 'liga' 1; font-feature-settings: 'liga' 1; font-variation-settings: 'wght' 300; transform: translateY(-1px); padding-right: 0.4375rem;}
.material-symbols-outlined {font-family: 'Material Symbols Outlined'; font-variation-settings: 'FILL' 1, 'GRAD' -25, 'opsz' 48; font-size: 1.375rem; line-height: 1; color: #a8aaac; font-weight: 300; display: inline-block; vertical-align: middle; text-transform: none; word-wrap: normal; white-space: nowrap; direction: ltr; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; -moz-osx-font-smoothing: grayscale; font-feature-settings: 'liga';}
.fill {font-variation-settings: 'FILL' 1, 'wght' 300, 'GRAD' -25, 'opsz' 48; color: #191c1f;}
.frag { position: relative;}
.frag::after {content: "\e838";	fill: 1; color: #191c1f; position: absolute; top: 0; left: 0; display: block; acontent: ttr(data-content); overflow: hidden;}
.frag33::after {width: 33%;}
.frag50::after {width: 50%;}
.frag66::after {width: 66%;}

header {margin: 0 auto 0.5rem auto; max-width: 1768px; padding: 1.25rem 1.5rem; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;}

.wrapper-big {max-width: 1768px; margin: 0 auto; padding: 0 1.5rem;}
.wrapper-large {max-width: 1600px; margin: 0 auto; padding: 0 1.5rem;}
.wrapper-medium {max-width: 1500px; margin: 0 auto; padding: 0 1.5rem;}
.wrapper-small {margin: 0 auto;	max-width: 1024px; text-align: left; padding: 0 1.5rem;}
.wrapper-content {margin: 0 auto; max-width: 1360px; text-align: left;}
.wrapper-content p {margin-left: auto; margin-right: auto; max-width: 1024px;}
.wrapper-content h2 {text-align: center; margin: 4rem auto 2rem auto;}
.wrapper-guide {margin: 3rem auto; max-width: 960px; padding: 0 1.5rem; text-align: left;}

.lightgray {background-color: #eeeff1; padding: 1.5rem; margin-top: 4rem;}

.logo {display: inline-block; font-size: 1.3125rem; text-transform: uppercase; padding: 0.5rem 0.9375rem; font-family: 'Chiron Hei HK', sans-serif; font-weight: 525; white-space: nowrap;}
.logo {background: linear-gradient(to right, transparent 0.125rem, transparent 0.125rem) 0 0, linear-gradient(to right, #191f22 0.125rem, transparent 0.1875rem) 0 100%, linear-gradient(to left, #191f22 0.125rem, transparent 0.1875rem) 100% 0, linear-gradient(to left, transparent 0.125rem, transparent 0.125rem) 100% 100%, linear-gradient(to bottom, transparent 0.125rem, transparent 0.125rem) 0 0, linear-gradient(to bottom, #191f22 0.125rem, transparent 0.1875rem) 100% 0, linear-gradient(to top, #191f22 0.125rem, transparent 0.1875rem) 0 100%, linear-gradient(to top, transparent 0.125rem, transparent 0.1875rem) 100% 100%; background-repeat: no-repeat; background-size: 35% 45%;}
.logo a {text-decoration: none;}

header ul {display: flex; align-items: center; gap: 1.25rem; font-family: "Heebo", sans-serif; font-weight: 550; text-transform: uppercase; font-size: 0.75rem; letter-spacing: 0.075rem;}
header .nav li a {display: block; text-decoration: none; white-space: nowrap; position: relative; line-height: 2.75;}
header .icon-menu {display: none; font-weight: 450; font-size: 1.875rem; color: #191f22;}
header .nav .button-rate {margin-left: 0.75rem;}
header .nav .button-rate a {padding: 0.375rem 1.5rem; color: #fff; background-color: #191f22; font-weight: 425; border-radius: 0.25rem;}

.nav ul a::after {content: ""; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); opacity: 0; transition: opacity 0.6s ease 0s; width: 2rem; height: 0.125rem; background-color: #191f22;}
.nav ul a:hover::after {opacity: 1;}

.button-black {font-family: "Heebo", sans-serif; text-transform: uppercase; font-size: 0.75rem; text-decoration: none; letter-spacing: 0.075rem; display: inline-block; padding: 0.75rem 1.5rem; color: #fff; background-color: #191f22; font-weight: 425; border-radius: 0.25rem;}
.buttonrate { text-align: center; font-size: 1rem; margin: 2rem auto;}
.buttonmore {font-family: Heebo, sans-serif; font-size: 0.875rem; text-decoration: none; letter-spacing: 0.025rem; margin-top: 0.5rem; padding: 0.875rem 1.5rem; background-color: #191f22; color: #fff; font-weight: 375; border-radius: 0.25rem;}
.buttonblue {display: inline-block; color: #fff; padding: 0.75rem 1.75rem; border-radius: 0.25rem; background-color: #006583; font-size: 0.9375rem;}

.onlytext {padding: 0 1.5rem;}
.onlytext h1 {font-size: 2.75rem; font-weight: 575; margin-bottom: 3rem;}
.onlytext h2 {font-weight: 525; margin: 3rem 0 1.375rem 0;}

.text-aside {display: flex; flex-direction: column; gap: 2rem; margin-top: 5rem}
.text-aside > div {display: flex; gap: 4rem; text-align: left; align-items: flex-start; scroll-margin-top: 2rem;}
.text-aside h2 {font-size: 1.375rem; flex: 32% 0 0; margin: 1.5rem 0;}

.manufacturer {padding: 0 1.5rem;}
.manufacturer div {background-color: #eeeff1; padding: 2.5rem 1.5rem; margin: 3rem -1.5rem 0 -1.5rem;}
.brands {display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 1.25rem; align-items: center; max-width: 1580px; margin: 0 auto; font-size: 0.9375rem; font-weight: 300; padding: 1.5rem 0 2rem 0;}
.brands li {flex: calc(16.6666% - ((1.25rem * 5) / 6)) 0 0; border-radius: 0.5rem; background-color: #2d3033;}
.brands li a {display: inline-flex; -webkit-box-align: center; align-items: center; -webkit-box-pack: center; justify-content: center; width: 100%; height: 100%; padding-top: 68%; padding-bottom: 12%; background-color: #2d3033; background-repeat: no-repeat; background-size: 33%; background-position: center 33%; white-space: nowrap; color: #edf2f5; border-radius: 0.5rem; transition: background-color 0.3s ease-out; text-decoration: none;}
.teaser-wrap {max-width: 1500px; margin: 2.5rem auto 5rem auto; padding: 0 1.5rem;}
.teaser {background-color: #191f22; padding: 1rem 3rem; border-radius: 0.625rem;}
.teaser > div {display: flex; align-items: center; text-align: left;}
.teaser h1 {margin: 0 0 2rem 0; color: #fff;}
.teaser .brands {flex: 75% 1 1; gap: 1rem; font-size: 0.875rem;}
.teaser .brands li {flex: calc(20% - ((1rem * 4) / 5)) 0 0;}

.reviews {max-width: 1140px; margin: 2.5rem auto; display: flex; flex-wrap: wrap; gap: 1.875rem; font-family: 'Archivo', sans-serif; font-size: 0.875rem; font-weight: 350; line-height: 1.625; text-align: left;}
.reviews li {flex: 100% 1 1; display: flex;}
.reviews a {flex: 100%; display: flex; flex-direction: row; border-radius: 0.625rem; background-color: #fff; box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.2);overflow: hidden;}
.reviews a:hover {box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.4);}
.reviews a > figure {flex: 38% 0 0;  }
.reviews a > figure img {border-radius: 0.625rem 0 0 0.625rem; -webkit-transform: scale(1); transform: scale(1); -webkit-transition: transform .4s ease-in-out; transition: .3s ease-in-out;}
.reviews a:hover img {-webkit-transform: scale(1.05);transform: scale(1.025);}
.reviews a > div {flex: auto 1 1; display: flex; justify-content: space-between; flex-direction: column; background-color: #fff; z-index: 200;}
.reviews h2 {margin: 0 0 1rem 0; font-size: 1.125rem; font-weight: 550;}
.reviews ul strong {font-weight: 550; padding-right: 0.25rem;}
.reviews ul li {display: flex; align-items: center;}

.reviews ul li::before {line-height: 1; font-family: 'Material Symbols Outlined'; -webkit-font-feature-settings: 'liga' 1; -moz-font-feature-settings: 'liga' 1; font-feature-settings: 'liga' 1; font-size: 1.125rem; font-weight: 300; margin-right: 0.5rem; display: inline-block; content: "\e56d";}
.reviews ul li:first-child::before {content: "\f8af";}
.reviews .logobox {display: flex; gap: 1rem; justify-content: center; align-items: center; padding-right: 1.5rem;}
.reviews .reviewcar {flex: auto 1 1; display: flex; flex-direction: column; justify-content: center; padding: 1.5rem 1.5rem 1rem 1.5rem;}
.reviews .logobox figure {display: flex; justify-content: center; align-items: center; height: 4.5rem; width: 4.5rem; background-color: #191f22; border-radius: 0.5rem; padding: 1rem;}
.reviews .reviewdetails {padding: 1.5rem;}
.reviews .reviewstars {display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;}
.reviews .reviewstars > div {display: flex; align-items: center; gap: 0.75rem;}
.reviews .reviewstars strong {font-family: 'Heebo', sans-serif; background-color: #191f22; border-radius: 50%; width: 2.125rem; height: 2.125rem; display: flex; justify-content: center; align-items: center; color: #fff; font-size: 0.875rem; font-weight: 525;}
.reviews .reviewdetails em {color: #535457; text-align: right; display: flex;  align-items: center; line-height: 1;}
.reviews .reviewdetails em::before {content: "\f368"; font-style: normal; font-family: 'Material Symbols Outlined'; -webkit-font-feature-settings: 'liga' 1; -moz-font-feature-settings: 'liga' 1; font-feature-settings: 'liga' 1; font-size: 1.125rem; font-weight: 300; margin-right: 0.315rem; display: inline-block;}

.inline3 {max-width: 1440px;}
.inline3 li {flex: calc(33.3333% - 1.25rem) 0 0; display: flex; align-content: strech;}
.inline3 a {display: flex; flex-direction: column; border-radius: 0.625rem; }
.inline3 a > figure img {border-radius: 0.625rem 0.625rem 0 0;}

.linkfilterwrap {background-color: #fff; padding: 1.75rem 2rem 2rem 2rem; margin-top: 4rem; box-shadow: 0 -1px 8px #00000029;}
.linkfilter {display: flex; flex-wrap: wrap; justify-content: center; gap: 2rem; margin: 0; font-family: 'Archivo Narrow'; font-size: 1.125rem; font-weight: 400; z-index: 100;}
.linkfilter .aktive {text-decoration: underline; text-underline-offset: 0.5rem; text-decoration-thickness: 2px; cursor: default; color: #191f22;}
.linkfilterwrap + .lightgray {margin-top: 0;}

.topmarken {display: flex; flex-wrap: wrap; justify-content: center; gap: 2rem; font-family: 'Archivo', sans-serif; font-size: 0.875rem; font-weight: 350; line-height: 1.625; text-align: left;}
.topmarken li {flex: 45% 0 0;}
.topmarken a {display: flex; height: 100%; border-radius: 0.625rem; box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.2);}
.marke {flex-grow: 2; background-color: #191f22; opacity: 0.9; border-radius: 0.625rem 0 0 0.625rem; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0 1rem;}
.marke > div {width: 4rem; height: 4rem; background-color: #191f22; background-repeat: no-repeat; background-size: 100%; background-position: center; white-space: nowrap; border-radius: 0.625rem;}
.marke h3 {margin: 0.75rem 0 0 0; font-size: 1.0625rem; font-family: 'Heebo', sans-serif; font-weight: 300; color: #CBCCCD; white-space: nowrap;}
.schnitt {display: flex; flex-direction: column; font-size: 0.875rem; padding: 0.75rem 2rem 0.75rem 3rem;}
.schnitt li {display: flex; flex-direction: column; padding: 1.25rem 0;}
.schnitt li strong {font-family: Heebo, sans-serif; font-weight: 700; font-size: 1.375rem; line-height: 1.4; display: flex; align-items: center;}
.schnitt li:first-child {border-bottom: 1px solid #959899;}
.schnitt li:first-child strong::before {font-family: 'Material Symbols Outlined'; -webkit-font-feature-settings: 'liga' 1; -moz-font-feature-settings: 'liga' 1; font-feature-settings: 'liga' 1; content:  "\e838"; font-variation-settings: 'FILL' 1, 'wght' 300; color: #191c1f; transform: translateY(-1px); padding-right: 0.3125rem;}

.jump {border-radius: 0.625rem; margin: 3rem auto 5rem auto; max-width: calc(980px + 4rem); margin-bottom: 4rem; font-family: 'Heebo', sans-serif; font-size: 1rem; color: #6b6d70; font-weight: 525; line-height: 1; text-align: left;}
.jump ul {display: flex; justify-content: center; gap: 1.25rem;}
.jump a {display: flex; align-items: center; gap: 1rem 0.5rem; background-color: #eeeff1; color: #535457; white-space: nowrap; border-radius: 0.5rem; padding: 0.625rem 1.375rem 0.5rem 1.375rem; transition: background-color 0.3s ease-in-out;}
.jump a::before {font-family: 'Material Symbols Outlined'; -webkit-font-feature-settings: 'liga' 1; -moz-font-feature-settings: 'liga' 1; font-feature-settings: 'liga' 1; font-size: 1.75rem; font-weight: 250;}
.jump .icon-review a::before {content:  "\f054";}
.jump .icon-resumee a::before {content:  "\f368";}
.jump .icon-img a::before {content:  "\e413";}
.jump .icon-data a::before {content:  "\e01d";}
.jump a:hover {background-color: #111; color: #fff; }

.modelintro {margin: 0.5rem auto 5rem auto; display: flex; justify-content: space-between; align-items: center; background-color: #eeeff1; border-radius: 0.75rem;}
.modelintro h1 {margin: 0; font-size: 2rem; letter-spacing: 0; word-wrap: normal; overflow-wrap: normal; -webkit-hyphens: none; -moz-hyphens: none; hyphens: none;}
.modelintro img {border-radius: 0.75rem 0 0 0.75rem;}
.modelintro figure {flex: 50% 0 0;}
.modelintro > div {text-align: center; padding: 1rem 5% 1.5rem 5%; width: 100%;}
.modelintro.noimg {max-width: 1200px; padding: 2rem; margin-bottom: 5rem}

.points {display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 1rem;}
.modelintro .points { margin-top: 1.5rem; margin-bottom: 2rem;}
.totalpoints {font-family: 'Heebo', sans-serif; background-color: #191f22; border-radius: 50%; width: 4rem; height: 4rem; display: flex; justify-content: center; align-items: center;}
.totalpoints strong {font-size: 1.5625rem; font-weight: 600; color: #fff; margin: 0;}
.rating-stars {white-space: nowrap;  transform: translateY(-1px);}
.rating-stars span {font-size: 1.375rem; margin: 0 -0.1875rem;}
.modelintro .rating-stars span {font-size: 2rem;}
.modelintro .authorbox {margin-top: -1rem;}

.reviewheader {width: 100%; max-width: 1480px; background-color: #eeeff1; border-radius: 0.5rem; z-index: 1;overflow: hidden; margin: 0.75rem auto;}
.rhbg {height: 24vh;}
.rhbg div {width: 150%; height: 300%; background-image: url(../images/bg-pe-xs.png); background-size: 125px; background-position: center; border-radius: 0.5rem; z-index: 1; transform:rotate(-15deg); margin-top: -275px; margin-left: -150px; opacity: 0.9;}
.reviewheader .reviewimg {background-size: cover; background-position: center; min-height: 50vh; position: relative;}
.reviewheader .reviewimg::before {content: ""; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background-image: radial-gradient(circle, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.2) 100%);}

.reviewtitle {max-width: 1160px; margin: -3rem auto 0 auto; padding-top: 0.5rem; z-index: 100; text-align: center; background-color: #fff; z-index: 200; position: relative;border-radius: 0.675rem; }
.reviewtitle h1 {font-size: 2.375rem; padding: 0 1rem;}
.reviewtitle .points {justify-content: center; margin-top: 1.5rem;}
.reviewtitle .totalpoints {width: 3.5rem; height: 3.5rem;}
.reviewtitle .totalpoints strong {font-size: 1.25rem;}
.reviewtitle .rating-stars span {font-size: 1.75rem;}

.authorbox {color: #6b6d70; font-weight: 450; font-size: 1rem; line-height: 1.5; margin-top: 3.5rem; background-color: #eeeff1; border-radius: 0.625rem; padding: 0.75rem 1.5rem 0.625rem 1rem;}
.authorbox address {display: inline; margin: 0}
.authorbox a {text-decoration: none; color: #6b6d70; font-weight: 525; font-style: normal;}
.authorbox a:hover {text-decoration: underline;}
.authorbox time {white-space: nowrap;}

.review {margin: 0 auto; max-width: 1024px;}
.review h3 {text-align: center; margin: 4rem 0 2.5rem 0; font-size: 1.125rem; text-transform: uppercase; letter-spacing: 0.02rem;}

.initialen > p:first-child {font-weight: 475;}
.initialen > p:first-child::first-letter {font-size: 5.5rem; float: left; letter-spacing: 0.875rem; font-weight: 600; line-height: 1;}

#Bewertung {max-width: 1160px; font-family: 'Archivo', sans-serif; background-color: #eeeff1; border-radius: 0.625rem; padding: 2.5rem 3rem; margin: 4rem auto 5rem auto; color:#535457; scroll-margin-top: 2rem;}
.rating {display: flex; flex-wrap: wrap; gap: 1rem; margin: 2.125rem auto 0 auto;}
.rating li {flex: calc(20% - 0.8rem) 0 0; padding: 1.5rem 1rem 1rem 1.125rem; background-color: #191f22; border-radius: 0.5rem; line-height: 1; text-align: left;}
.rating li span { font-weight: 300; font-size: 1.0625rem; color: #CBCCCD;}
.rating strong {font-family: 'Heebo', sans-serif; font-size: 1.3125rem; color: #fff; font-weight: 550; display: flex; align-items: center; gap: 0.5rem; margin: 1rem 0 0 0;}
.rating strong::before {font-family: 'Material Symbols Outlined'; -webkit-font-feature-settings: 'liga' 1; -moz-font-feature-settings: 'liga' 1; font-feature-settings: 'liga' 1; font-size: 2.125rem; font-weight: 100; color: #CBCCCD; transform: translateY(-1px); line-height: 1;}
.icon-range strong::before  {content:  "\e87a";}
.icon-charge strong::before  {content:  "\e56d";}
.icon-comfort strong::before  {content:  "\efed";}
.icon-fun strong::before  {content:  "\e69f";}
.icon-connectivity strong::before  {content:  "\f323";}
.icon-safety strong::before  {content:  "\e9e0";}
.icon-reliability strong::before  {content:  "\e52d";}
.icon-design strong::before  {content:  "\f10a";}
.icon-battery strong::before  {content:  "\ea0b";}
.icon-maintenance strong::before  {content:  "\e926";}
.icon-quality strong::before  {content:  "\e031";}
.icon-service strong::before  {content:  "\e869";}
.icon-price strong::before  {content:  "\f4e3";}
.icon-review strong::before  {content:  "\f054";}


.data {background-color: #eeeff1; text-align: center; margin: 0 auto; padding: 4rem 1.5rem 3rem 1.5rem;}
.data > div {max-width: 980px; margin: 0 auto;}
.data h2 {margin-top: 0;}

.datadetails {display: flex; flex-flow: row wrap; overflow: visible; margin: 3rem 0; text-align: left;}
.datadetails dt {flex: 38% 0 0; border-top: 1px solid #c4c4c4; padding: 1.75rem 0; 'Chiron Hei HK'; font-size: 1.3125rem; font-weight: 500;}
.datadetails dd {flex: 62% 1 1; border-top: 1px solid #c4c4c4; padding: 1.5rem 0 1.75rem 0; margin: 0;}
.datadetails dt:last-of-type {border-bottom: 1px solid #c4c4c4;}
.datadetails dt:last-of-type + dd {border-bottom: 1px solid #c4c4c4;}
.datadetails p {margin: 0; font-size: 1.0625rem; line-height: 1.75; color: #535457; font-weight: 350;}
.datadetails + p {font-size: 0.9375rem; text-align: left; color: #535457;}
.datadetails a {color: #535457;}

.cardata {display: flex; flex-wrap: wrap; gap: 1.5rem 2.125rem; background-color: #fff; margin: 3rem 0 4rem 0; padding: 2rem; border-radius: 0.625rem; text-align: left;}
.cardata dl {flex: 0 0 calc(33.33% - 1.75rem); display: flex; flex-direction: column; gap: 0.625rem;}
.cardata dt {font-size: 0.9375rem; font-weight: 400; color: #535457;}
.cardata dd {margin: 0; font-size: 1.3125rem; font-weight: 575;}

#Daten h2 { font-weight: 550;}
#Daten div > h2 { font-weight: 475;}
.techdata {display: flex; flex-flow: row wrap;  justify-content: space-between; align-items: center; margin: 1rem 0; overflow: visible; text-align: left; line-height: 1.6;}
.techdata dt {flex: 38% 0 0; font-family: 'Archivo', sans-serif; font-size: 1.0625rem; font-weight: 400; color: #6b6d70; margin: 0.625rem 0;}
.techdata dd {flex: 62% 0 0; padding: 0; margin: 0; font-size: 1.125rem; font-weight: 500; text-align: right; letter-spacing: -0.02rem;}
.quelle {text-align: left; margin-top: -2rem; font-size: 0.9375rem; color: #535457;}

.whitebox {margin: 5rem 0;}
.graybox {background-color: #eeeff1; margin: 4rem 0; padding: 2rem 1.5rem; border-radius: 0.75rem;}
.graybox h2 {font-size: 1.75rem; margin-top: 0}
.graybox .fussnote { margin-bottom: 0;}

.inlineimg {margin: 3rem -2rem}

.chargingtime {display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem;}
.chargingtime > div {flex: auto 1 1; background-color: #010205; border-radius: 0.75rem; padding: 1.375rem; text-align: center;}
.chargingtime dl {display: flex; flex-direction: column; line-height: 1.4}
.chargingtime dt {font-family: 'Archivo', sans-serif; font-weight: 300; font-size: 0.9375rem; color: #CBCCCD;}
.chargingtime dt strong {font-family: 'Chiron Hei HK', sans-serif; color: #fff; font-size: 1.125rem; font-weight: 400; display: block; margin-bottom: 0.5rem;}
.chargingtime dd {font-family: 'Archivo', sans-serif; font-size: 1.3125rem; font-weight: 550; color: #fff; margin: 0.875rem 0 0 0;}
.chargingtime sup {color: #CBCCCD; font-size: 0.875rem; font-weight: 350;}

.warrenty {display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; margin: 3rem 0 0 0;}
.warrenty > div {flex: 12rem 1 0; background-color: #191f22; border-radius: 0.75rem; padding: 1.375rem;}
.warrenty dl {display: flex; flex-direction: column; line-height: 1.5625; font-family: 'Archivo', sans-serif; font-weight: 275; font-size: 1rem; color: #CBCCCD;}
.warrenty dd {margin: 0;}
.warrenty dd strong {color: #fff; font-size: 1.75rem; font-weight: 525; display: block; margin: 0.75rem 0;}

.handyscreen {margin: 5rem 0.75rem; display: flex; justify-content: center; gap: 1.5rem;}
.handyscreen li {flex: 320px 0 1;}
.handyscreen img {border: 0.3175rem #191f22 solid; border-radius: 1.5rem; box-shadow: rgba(0, 0, 0, 0.5) 0px 7px 14px -3px, rgba(0, 0, 0, 0.3) 0px 4px 8px -4px;}

.affi {display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 1rem 1.5rem; font-size: 1rem; font-weight: 425; white-space: nowrap; margin: 3rem 0; padding: 1.5rem; background-color: #eeeff1; border-radius: 0.5rem;}
.affi a {flex: calc(50% - 1rem) 0 1; font-family: "Heebo", sans-serif; text-align:center; text-decoration: none; padding: 1rem 3rem; color: #fff; background-color: #191f22; border-radius: 0.25rem;}
.affi a span {display: block; font-size: 0.8125rem; font-weight: 225; margin-top: 0.5rem;}
.affi a:hover {background-color: #3e4246; border-color: #3e4246; color: #fff;}

.accordion {list-style: none; text-align: left; perspective: 900; margin: 4rem auto 5.5rem auto; max-width: 1160px; -webkit-tap-highlight-color: transparent;}
.accordion li i::before, .accordion > li i::after, .accordion > li > div {transition: all 0.25s ease-in-out;}
.accordion > li > div {
  position: relative;
  overflow: hidden;
  opacity: 1;
  transform: translate(0, 0);
  z-index: 2;
  margin: 0 0 1rem 0;
}
.accordion > li {position: relative; padding: 0.25rem 0; border-bottom: 1px solid #959899; margin-bottom: 0.5rem;}
.accordion > li > h2 {font-family: 'Archivo', sans-serif; font-size: 1.275rem; font-weight: 450; letter-spacing: -0.02rem; text-align: left; padding-right: 3rem; margin: 0.5rem 0 1rem 0;}
.accordion > li > h2 + span {display: block; margin: -0.5rem 0 0.5rem 0; color: #6b6d70;}

.accordion > li:nth-of-type(1) {
  animation-delay: 0.5s;
}
.accordion > li:nth-of-type(2) {
  animation-delay: 0.75s;
}
.accordion > li:nth-of-type(3) {
  animation-delay: 1s;
}
.accordion > li i {
  position: absolute;
  transform: translate(0, -4px);
  right: 1rem; top: 1.75rem;
}
.accordion > li i::before, ul li i::after {
  content: "";
  position: absolute;
  background-color: #4f5053;
  width: 2px;
  height: 9px;
}
.accordion > li i::before {
  transform: translate(-3px, 0) rotate(45deg);
}
.accordion > li i::after {
  transform: translate(3px, 0) rotate(-45deg);
}
.accordion > li input[type=checkbox] {
  position: absolute;
  cursor: pointer;
  width: 100%;
  height: 100%;
  z-index: 1;
  opacity: 0;
}
.accordion > li input[type=checkbox]:checked ~ div {
  margin: 0; 
  max-height: 0;
  opacity: 0;
  transform: translate(0, 50%);
}
.accordion > li input[type=checkbox]:checked ~ i::before {
  transform: translate(3px, 0) rotate(45deg);
}
.accordion > li input[type=checkbox]:checked ~ i::after {
  transform: translate(-3px, 0) rotate(-45deg);
}

.lightgray .accordion {max-width: calc(1500px - 3rem); margin: 1rem auto 0.5rem auto;}
.lightgray .accordion .cargallery {padding: 0 6px;}
.lightgray .accordion > li:last-child {border-bottom: none;}

.textwithimg {display: flex; justify-content: center; align-items: center; gap: 3rem; margin: 2rem 0;}
.textwithimg img { width: 38%;}
.textwithimg .button-black {margin-bottom: 2rem;}

.fussnote {margin: 2rem 0; background-color: #eeeff1; border-radius: 0.5rem; padding: 1rem;}
.fussnote p {font-size: 0.875rem; color: #6b6d70; margin: 0;}

.resumee {display: flex; gap: 0 4rem; justify-content: center; align-items: flex-start; max-width: 1280px; margin: 7rem auto 5rem auto; scroll-margin-top: 2rem; text-align: left;}
.driver {position: sticky; top: 0; padding: 1.5rem 0; display: flex; justify-content: center; align-items: center; gap: 4rem;}
.driver > div {background-color: #eeeff1; border-radius: 50%; width: 5rem; height: 5rem; display: flex; justify-content: center; align-items: center; font-size: 2.125rem; font-weight: 650; color: #535457;}
.resumeetext {flex: 600px 1 1;}
.resumeetext p {font-weight: 375;}
.resumeetext strong { font-weight: 525;}
.resumee h1 {font-family: 'Heebo', sans-serif; color: #191f22; font-size: 2.125rem; font-weight: 600; margin-left: -2rem;}
.resumee h1 > span {display: block; font-family: 'Archivo', sans-serif; font-size: 1.0625rem; font-weight: 350; color: #535457;}
.resumeetext span {margin: 2rem 0; font-size: 0.9375rem; color: #535457; display: flex; align-items: center;}
.resumeetext span::before {content:  "\eb1c"; font-family: 'Material Symbols Outlined'; -webkit-font-feature-settings: 'liga' 1; -moz-font-feature-settings: 'liga' 1; font-feature-settings: 'liga' 1; line-height: 1; font-weight: 300; font-size: 1.125rem; margin-right: 0.375rem;}

.hashtag {margin: 3rem 0; font-size: 0.9375rem; color: #535457; display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem 1rem}
.hashtag li a::before {content:  "#";}
.hashtag li a {padding: 0.25rem 1.125rem; color: #535457; text-decoration: none; background-color: #eeeff1; border-radius: 0.375rem; box-shadow: 0px 2px 4px rgba(0, 0, 0, 0); }
.hashtag li a:hover {box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.3);}

.carpictures {background-color: #191f22; text-align: center; padding: 3rem 1.5rem; margin: 5rem auto 0 auto;}
.carpictures .peter3 {display: flex; gap: 1.25rem;}
.carpictures .peter3 > figure {flex: 66.25% 0 0;}
.carpictures .peter3 div {display: flex; flex-wrap: wrap; align-content: flex-start; gap: 1.25rem; }

.carpictures .slick-petertwo {max-width: 1280px; margin: 0 auto;}
.carpictures .slick-petertwo figure {padding: 0 0.5rem;}

.brandsite {padding: 0 1.5rem;}
.brandsite > * {padding: 4rem 0; border-bottom: 1px solid #959899;}
.brandsite article:first-child {padding-top: 1.5rem;}
.brandsite article:last-child {border-bottom: none;}
.brandsite h2 {text-align: left; font-size: 1.5rem; margin-top: 0}

.rankingbox {display: flex; gap: 3rem 5rem; font-family: 'Archivo', sans-serif;}
.rankingbox > div, .rankingbox > a {flex: 450px 0 1; display: flex; justify-content: center; font-size: 0.875rem; font-weight: 350; line-height: 1.625; border-radius: 0.625rem; box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.2);}
.signet {flex: auto 1 1;background-color: #191f22; opacity: 0.95; border-radius: 0.625rem 0 0 0.625rem; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 1rem; color: #edf2f5; font-family: 'Chiron Hei HK', sans-serif; font-size: 0.9375rem; padding: 0 1rem;}
.signet > div {width: 6rem; height: 6rem; background-color: #191f22; background-repeat: no-repeat; background-size: 100%; background-position: center; white-space: nowrap; border-radius: 0.625rem;}
.rankingbox .rankinginfo {flex: 32% 0 0;display: flex; flex-direction: column; font-size: 0.875rem; padding: 0.75rem 2rem; justify-content: center;}
.rankingbox .rankinginfo li {display: flex; flex-direction: column; padding: 1.25rem 0;}
.rankingbox .rankinginfo li strong {font-family: Heebo, sans-serif; font-weight: 700; font-size: 1.375rem; line-height: 1.4; display: flex; align-items: center;}
.rankingbox .rankinginfo li:first-child {border-bottom: 1px solid #959899;}
.rankingbox .rankinginfo li:first-child strong::before {content:  "\e838"; font-variation-settings: 'FILL' 1; font-size: 1.25rem;}
.rankingbox aside h1 {font-size: 3.125rem; margin-top: 0;}
.rankingbox aside ul {font-size: 1.0625rem; font-weight: 350;}
.rankingbox aside ul li {display: flex; flex-wrap: wrap; align-items: center; padding: 0.125rem 0; line-height: 1.5;}
.rankingbox aside ul li a {margin-left: 0.375rem; display: inline-block; text-decoration: underline; text-underline-offset: 0.2rem; text-decoration-thickness: 1px;}
.rankingbox .location::before {content:  "\e0c8";}
.rankingbox .est::before {content:  "\e916";}
.rankingbox .factory::before {content:  "\ebb8";}
.rankingbox .group::before {content:  "\e7ef";}

.vierer .rankingbox {flex: calc(25% - 1.4375rem) 0 0;}
.vierer .signet > div {width: 4rem; height: 4rem;}

.shortreview-wrap {display: flex; flex-wrap: wrap; gap: 5rem 3rem;}
.shortreview-wrap .shortreview {flex: calc(50% - 1.5rem) 0 1;}
.shortreview {font-family: 'Archivo', sans-serif; font-size: 1.0625rem; font-weight: 350; line-height: 1.75; hyphens: auto;}
.shortreview .user {display: flex; align-items: center; gap: 1.5rem; font-size: 0.875rem; color: #535457; line-height: 1.5; margin-bottom: 1.5rem;}
.shortreview .user span {background-color: #eeeff1; border-radius: 50%; width: 3.5rem; height: 3.5rem; display: flex; justify-content: center; align-items: center; font-weight: 650; color: #535457; font-size: 1.25rem;}
.shortreview .user strong {display: block; font-weight: 500; color: #111; font-size: 1rem;}
.shortreview .car {display: flex; align-items: center; flex-wrap: wrap; gap: 0 1rem; margin-bottom: 0.625rem;}
.shortreview .car strong {font-weight: 475; display: block; font-size: 1.125rem;}
.shortreview a {display: block; margin-top: 0.5rem; font-size: 1rem; font-weight: 450;text-decoration: underline; text-underline-offset: 0.2em; text-decoration-thickness: 1px;}

.faq-wrap {display: flex; flex-wrap: wrap; gap: 1.5rem 3rem; margin-top: 3rem;}
.faq-wrap li {flex: calc(50% - 1.5rem) 0 0; background-color: #eeeff1; border-radius: 0.375rem;}
.faq-wrap li a { display: block; color: #333; font-size: 1.0625rem; padding: 0.5rem 1rem; line-height: 1.75;}
.faq-wrap li:hover {box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.4);}

.cargallery {margin: 2rem auto; display: flex; flex-wrap: wrap; gap: 3rem 1.5rem; font-family: 'Archivo', sans-serif; font-size: 0.875rem; font-weight: 350; line-height: 1.625; text-align: left;}
.cargallery li {flex: calc(25% - 1.125rem) 0 0; }
.cargallery li > div {display: flex; flex-direction: column; border-radius: 0.625rem; background-color: #fff; box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.2); height: 100%;}
.cargallery figure {border-radius: 0.625rem 0.625rem 0 0; overflow: hidden;}
.cargallery img {border-radius: 0.625rem 0.625rem 0 0;}
.cargallery li > div > div {padding: 2rem 2rem 1.75rem 2rem;}
.cargallery h3 {font-family: 'Chiron Hei HK', sans-serif; font-weight: 450; font-size: 1.1875rem; line-height: 1.5; margin: 0; letter-spacing: 0.01rem; text-align: center;}
.cargallery .button-black {display: block; text-align: center; font-size: 0.6875rem; margin-top: 1.25rem;}

.tags {margin-top: 4rem; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.875rem 0.625rem;}
.tags a {background-color: #eeeff1; border-radius: 2rem; padding: 0.5625rem 1.125rem; font-size: 0.875rem; color: #333}
.tags a:hover {background-color: #191f22; color: #fff;}

.wrapper-guide .tags {margin: 2.5rem 0; justify-content: flex-start;}
.wrapper-guide .carimgwide {margin: 3rem -5rem;}

.manualcolumn {margin: 1rem 0 5rem 0;}
.manualcolumn > li {border-bottom: 1px solid #959899; padding: 3rem 0;}
.manualcolumn > li:last-child {border-bottom: none; margin-bottom: 3.5rem; padding-bottom: 0;}
.manualcolumn h2 {margin-top: 0;}
.manualcolumn h3 {margin-top: 2rem;}
.manualcolumn p {margin: 0;}
.manualcolumn p + img {margin-top: 2rem;}
.manualcolumn img + p {margin-top: 2rem;}

.ranking {max-width: 1100px; margin: 2rem auto;}
.ranking a {display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; padding: 1rem 2rem; background-color: #fff; border-radius: 0.75rem; font-family: Heebo; color: #191f22; font-size: 1.1875rem; box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.2);}
.ranking span {display: flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; background-color: #191f22; color: #fff; font-weight: 600; border-radius: 50%;}
.ranking strong::before {content:  "\e838"; font-variation-settings: 'FILL' 1; font-size: 1.375rem;}
.ranking strong {display: flex; align-items: center; font-weight: 575;}
.ranking a:hover {box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.4);}

.h1withimg {display: flex; align-items: center; margin: 2rem 0 5rem 0; gap: 3rem;}
.h1withimg figure {flex: 50% 1 0; align-self: stretch; margin: -1.5rem 0; border-radius: 0.625rem;}
.h1withimg figure img {height: 100%; object-fit: cover; object-position: center center; clip-path: inset(1.5rem 0 round 0.625rem 0.625rem 0.625rem 0.625rem);}
.h1withimg > div {flex: 500px 0 1; padding: 2rem; display: flex; justify-content: flex-start; align-items: flex-start; flex-direction: column;}
.h1withimg h1 {font-size: 2.625rem; width: 75%; font-weight: 525; line-height: 1.25; margin-bottom: 0; text-align: left;}
.h1withimg .tags {justify-content: flex-start; margin: 2rem 0 1rem 0;}

.h1clone {display: flex; align-items: center; margin: 1rem 0 5rem 0; gap: 3rem;}
.h1clone figure {flex: 61% 1 0; align-self: stretch; margin: -1.5rem 0; border-radius: 0.625rem;}
.h1clone figure img {height: 100%; object-fit: cover; object-position: center center; clip-path: inset(1.5rem 0 round 0.625rem 0.625rem 0.625rem 0.625rem);}
.h1clone > div {text-align: left; padding-right: 1.5rem;}
.h1clone h1 {display: inline; box-decoration-break: clone; -webkit-box-decoration-break: clone; background-color: #191c1f; color: #fff; font-size: 2.125rem; font-weight: 400; letter-spacing: -0.05rem; line-height: 1.55; padding: 0.625rem 2rem;}

.wrapper-chart {max-width: 1260px; margin: 3rem auto; padding: 2.5rem 3rem; border-radius: 0.625rem; background-color: #191c1f;}
.wrapper-chart h2 {color: #fff; font-weight: 450; margin: 0 0 3rem 0}

.darkbox {max-width: 1260px; margin: 3rem auto; padding: 2.5rem 3rem; border-radius: 0.625rem; background-color: #191c1f; color: #edf2f5; font-size: 1rem; text-align: left}
.darkbox h3 {color: #edf2f5;}

.table5 + h3 {margin-top: 3rem; font-weight: 450;}
.table5 li {display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.75rem; padding: 0.5rem; border-radius: 0.25rem; color: #edf2f5; font-size: 1rem; background-color: #2d3033;}
.table5 li div {flex: 23% 0 1;}
.table5 li div:last-child {flex: auto 1 1;text-align: right;}

.appliste {margin: 1rem 0 2rem 0; padding: 0.25rem 1rem 0.25rem 0.75rem; background-color: #191c1f; border-radius: 0.5rem;}
.appliste li {display: flex; justify-content: space-between; align-items: center; padding: 0 0 0 0.75rem; color: #fff; border-radius: 0.375rem; margin: 0.75rem 0; background-color: #2d3033;}
.appliste li:hover {background-color: #393c3f;}
.appliste .button-black {font-size: 0.75rem; letter-spacing: 0.075rem; padding: 0.625rem 1rem; background-color: #006583; font-weight: 425; border-radius: 0.25rem;}


.inlinechart li {margin-bottom: 0.75rem; border-radius: 0.25rem;}
.inlinechart li:last-child {margin-bottom: 0;}
.inlinechart li > a {display: flex; justify-content: space-between; align-items: center; gap: 2rem; padding: 0.375rem 1.5rem;}
.inlinechart li > span {display: flex; justify-content: space-between; align-items: center; gap: 2rem; padding: 0.3125rem 1.25rem;}
.inlinechart li h3 {color: #fff; display: inline-block; margin: 0; font-weight: 350; font-size: 1rem; text-align: left;}
.inlinechart li strong {display: inline-block; color: #edf2f5; font-size: 1.0625rem; font-weight: 400; white-space: nowrap;}
.withlogo li > a {padding-left: 3rem; background-repeat:no-repeat; background-size: 1.25rem; background-position: 0.75rem center;}

.inlinechart h4 {color: #fff; margin-bottom: 1rem; font-weight: 350; font-size: 1.125rem; text-align: left;}
.smallfont {margin: 1rem 0 2.5rem 0}
.smallfont li h3 {font-size: 1rem;}
.smallfont li strong {font-size: 1.0625rem;}

.infobox {margin: 3.5rem auto; padding: 1.5rem 2rem; background-color: #eeeff1; border-radius: 0.625rem;}
.infobox h2 {font-size: 1.5rem; margin: 0 0 1.5rem 0; text-align: left;}
.infobox p {margin: 0;}
.infobox p + p {margin-top: 1.25rem;}

.twins {display: flex; flex-wrap: wrap; gap: 3rem; justify-content: space-between; max-width: 1500px; margin: 3rem auto;}
.twins > div {flex: calc(50% - 1.5rem) 0 0; background-color: #191c1f; padding: 1.5rem; border-radius: 0.625rem;}
.twins > div > h2 {color: #fff; margin: 1rem 0 2.5rem 0; font-weight: 375; font-size: 1.3125rem;}
.twins > div > h2 a {color: #fff;}
.twins ul {margin-bottom: 1rem;}

.imagetheme {display: flex; flex-wrap: wrap; align-items: center; gap: 1.875rem; margin: 3rem 0 4rem 0;}
.imagetheme a {display: block; flex: calc(33.3333% - 1.25rem) 0 0;}
.imagetheme figure {position: relative; border-radius: 0.625rem;}
.imagetheme figure::before {content: ""; width: 100%; height: 100%; position: absolute; top: 0; left: 0; border-radius: 0.625rem; background: linear-gradient(to bottom, rgba(0,0,0,0.0) 5%, rgba(0,0,0,0) 65%, rgba(0,0,0,0.9) 100%); z-index: 10;}
.imagetheme figcaption {position: absolute; bottom: 2rem; width: 100%; text-align: left; color: #fff; font-size: 1.125rem; font-weight: 425; z-index: 20; padding: 0 5%;}

.thema {margin: 5rem auto; display: flex; flex-direction: column; gap: 4rem;}
.thema > div {display: flex; align-items: center; color: #111; border-radius: 0.625rem; padding: 2.5rem;}
.thema > div:nth-of-type(2n + 1) {background-color: #eeeff1;}
.thema figure {flex: 45% 1 0;}
.thema > div div {display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; padding: 0 4rem; text-align: left;}
.thema h2 {margin: 0; font-weight: 475; font-size: 1.5rem}
.thema p {margin: 0; font-weight: 375; font-size: 1.0625rem}

.themasmall {max-width: 1280px;}
.themasmall > div {padding: 2rem;}

.skat { max-width: 1400px; margin: 5rem auto; display: flex; flex-wrap: wrap; gap: 3rem; padding: 0 1.5rem;}
.skat > div {flex: calc(50% - 1.5rem) 0 0; display: flex; flex-direction: column; background-color: #eeeff1; border-radius: 0.625rem;}
.skat img { border-radius: 0.625rem 0.625rem 0 0;}
.skat > div div {display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; padding: 3rem; text-align: left;}
.skat h2 {margin: 0; font-weight: 475; font-size: 1.5rem}
.skat p {margin: 0; font-weight: 375; font-size: 1.0625rem}

.dark > div {background-color: #191f22; color: #fff;}
.dark h2 {color: #fff; font-weight: 375;}
.dark p {color: #CBCCCD; font-weight: 200;}

.linklist {margin: 3rem 0;}
.linklist a {display: block; font-family: 'Archivo', sans-serif; font-size: 1.125rem; font-weight: 475; padding: 1rem 0; border-bottom: 1px solid #959899;}

.footer-wrap {max-width: 1768px; margin: 5rem auto 0 auto; padding: 4rem 1.5rem 2rem 1.5rem;}
.footer-bg-color {background-color: #191f22}
footer p {font-size: 1rem; font-weight: 275; color: #959899; margin: 1rem 0;}
footer strong {font-family: 'Heebo', sans-serif; font-size: 1.125rem; font-weight: 275; color: #eeeff1;}
footer a {color: #959899;}
footer a:hover {color: #eeeff1; text-decoration: underline; text-underline-offset: 0.2em; text-decoration-thickness: 1px;}

footer ul {white-space: nowrap; font-family: 'Heebo', sans-serif; font-size: 1.0625rem; font-weight: 250; margin: 1.125rem 0 0 5rem; line-height: 1.875;}
footer ul li:first-child {margin-bottom: 0.375rem;}
footer ul li:first-child a:hover {color: #fff; text-decoration: none;}

.about {display: flex; margin-bottom: 7rem; border-bottom: 0px solid #959899;}
.legal {display: flex; flex-wrap: wrap; gap: 1rem; font-size: 0.9375rem; color: #959899;}

.mb {background-image: url(../images/brands/mercedes-benz.svg);}


/************************************************************************************
MEDIA QUERIES
*************************************************************************************/

@media screen and (max-width: 1470px) {
	.vierer .rankingbox {flex: calc(50% - 0.9375rem) 0 0;}
	.vierer .rankingbox > a {flex: auto 1 1;}
}
@media screen and (max-width: 1366px) {
.h1withimg {margin-left: -1.5rem; margin-right: -1.5rem;}
.h1withimg figure {border-radius: 0 0.625rem 0.625rem 0; }
.h1withimg figure img {clip-path: inset(1.5rem 0 round 0 0.625rem 0.625rem 0);}
}
@media screen and (max-width: 1280px) {
	.reviewheader {margin-left: -1.5rem; margin-right: -1.5rem; width: calc(100% + 3rem); border-radius: 0;}
	.reviewheader img {border-radius: 0;}
	.cargallery li {flex: calc(33.3333% - 1rem) 0 0;}
}

@media screen and (max-width: 1180px) {
	header ul {gap: 1rem;}
	header ul ul {display: none;}
	header .icon-menu {display: block;}
	.banner-wrap {padding: 0;}
	.banner-background {border-radius: 0;}
	.brands li {flex: calc(20% - ((1.25rem * 4) / 5)) 0 0;}
	.modelintro {flex-direction: column; background-color: #; margin-left: -1.5rem; margin-right: -1.5rem; border-radius: 0;}
	.modelintro img {border-radius: 0;}
	.modelintro figure {margin: 0;}
	.modelintro > div {padding: 3rem 2rem 4rem 2rem;}
	.modelintro.noimg {padding: 1rem;}

	.teaser .brands li {flex: calc(25% - ((1rem * 3) / 4)) 0 0;}

	#Bewertung {padding: 2.5rem 1.5rem; margin: 3rem -1.5rem 4rem -1.5rem; border-radius: 0}
	.reviews li {flex: 100% 1 1; max-width: 100%; flex-direction: row;}
	.reviews a {flex-direction: row;}
	.reviews a > figure {flex: 44% 0 0;  }
	.reviews a > figure img {border-radius: 0.625rem 0 0 0.625rem;}
	
	.inlineimg {margin: 3rem 0}
	.h1clone {gap: 0;}
	.h1clone > div {margin-left: -10%; z-index: 500;}
	.h1clone h1 {font-size: 1.875rem;}
	.wrapper-guide .carimgwide {margin: 3rem 0;}
	.skat {gap: 2rem;}
	.skat > div {flex: calc(50% - 1rem) 0 0;}
	.skat > div div {padding: 2rem;}
}

@media screen and (max-width: 1020px) {
	.resumee {flex-direction: column}
	.resumeetext {flex: auto 1 1;}
	.driver {position: inherit; padding: 0;}
	.cargallery {gap: 2rem 1rem;}
	.cargallery li {flex: calc(50% - 0.5rem) 0 0;}
	.shortreview-wrap .shortreview {flex: 100% 1 1;}
	.faq-wrap li {flex: 100% 1 1;}
	.about {flex-direction: column;}

	.imagetheme {gap: 1.25rem;}
	.imagetheme a {flex: calc(50% - 0.5rem);}
	.imagetheme figcaption {width: 100%; padding: 0 1rem;}
	
	.twins {flex-wrap: wrap; gap: 2rem;}
	.twins > div {flex: 100% 0 0;}

	.thema {max-width: 860px;}
	.thema > div {flex-direction: column; padding: 0}
	.thema figure {flex: 100%;}
	.thema > div:nth-of-type(2n +1) img {border-radius: 0.5rem 0.5rem 0 0;}
	.thema > div div {padding: 3rem 2rem;}

	.themasmall {max-width: 760px;}

	footer ul {margin: 2rem 0; line-height: 2}
	footer ul + ul {display: none;}
	footer ul li:first-child {display: none; border-bottom: 1px solid #959899;}
	footer ul li a {display: flex; justify-content: space-between; align-items: center;font-family: 'Heebo', sans-serif; font-size: 1.0625rem; font-weight: 325;  border-bottom: 1px solid #959899;}
	footer ul li a:hover {text-decoration: none; color: #eeeff1;}
	footer ul li a::after {font-family: 'Material Symbols Outlined'; -webkit-font-feature-settings: 'liga' 1; -moz-font-feature-settings: 'liga' 1; font-feature-settings: 'liga' 1; content: "\e5cc"; font-size: 1.75rem; font-weight: 250; background-position: center center}
}
@media screen and (max-width: 1024px) {
	.reviewtitle {text-align: center;}
	.reviewtitle h1 {margin-left: 0;}
	.reviewtitle .points {justify-content: center;}
}

@media screen and (max-width: 920px) {
	p {font-size: 1.0625rem; line-height: 1.625; margin: 1.275rem 0;}
	.teaser > div {display: flex; align-items: center; text-align: center; flex-direction: column; gap: 2rem;}
	.teaser-wrap {margin: 1rem 0 5rem 0; }
	.teaser {border-radius: 0;padding: 2rem 1.5rem 1.5rem 1.5rem; margin: 0 -1.5rem;}
	.teaser .brands {flex: 100% 1 1; width: 100%;}

	
	.jump ul {gap: 1rem;}
	.jump li {flex: auto;}
	.jump a {flex-direction: column;  align-items: flex-start; padding-bottom: 0.75rem; text-transform: uppercase;}

	.brands li {flex: calc(25% - ((1.25rem * 3) / 4)) 0 0;}
	.rating li {flex: calc(25% - 0.75rem) 0 0;}
	.chargingtime > div {flex: calc(50% - 0.375rem) 0 0;}

	.carpictures .peter3 {flex-direction: column; gap: 1rem;}
	.carpictures .peter3 > figure {flex: 100% 1 1;}
	.carpictures .peter3 div {flex-wrap: no-wrap; flex-direction: row; gap: 1rem; }
	.carpictures .peter3 div > * {flex: 40% 1 1;}
	.carpictures .peter3 div figure:nth-child(2) {flex: 40% 1 1;}

	.datadetails {flex-direction: column;}
	.datadetails dt {flex: 100% 1 1; padding-bottom: 1.5rem;}
	.datadetails dd {flex: 100% 1 1; border-top: none; padding-top: 0;}
	.datadetails dt:last-of-type {border-bottom: none;}
	
	.rankingbox {flex-direction: column-reverse;}
	.rankingbox > div, .rankingbox > a {flex: auto 1 1; width: 100%;}
	.rankingbox > aside {flex: auto 1 1; width: 100%}
	.signet {flex: 100%; padding: 3rem 0; }
	.columns {columns: 1;}
	
	.text-aside > div {flex-direction: column; gap: 0;}
	.text-aside h2 {flex: 100% 1 1; margin: 0.5rem 0;}

	.h1withimg {flex-wrap: wrap-reverse; align-items: flex-start; gap: 3rem; background-color: #fff; margin: 1rem -1.5rem 5rem -1.5rem;}
	.h1withimg figure {flex: 100%; border-radius: 0}
	.h1withimg figure img {clip-path: inset(0 0 round 0 0 0 0); border-radius: 0}
	.h1withimg > div {flex: auto; padding: 0 1.5rem; display: block; max-width: calc(780px + 2rem); margin: 0 auto; }
	.h1withimg h1 {width: 100%; text-align: center;}
	.h1withimg .tags {justify-content:center;}
	
	.h1clone {flex-direction: column; gap: 0; margin-top: 0;}
	.h1clone figure {flex: 100%; margin: -0.5rem -1.5rem; border-radius: 0;}
	.h1clone figure img {clip-path: inset(0.5rem 0 round 0 0 0 0);}
	.h1clone > div {text-align: center; background-color: #fff; padding: 1.5rem 1.5rem 0 1.5rem; margin: -2rem 1rem 0 1rem; z-index: 500; border-radius: 0.375rem;}
	.h1clone h1 {background-color: #fff; color: #111; font-size: 2rem; font-weight: 500; letter-spacing: -0.025rem; line-height: 1.3125; padding: 0;}
	
	.skat > div {flex: 100% 1 1;}
	.skat > div div {padding: 3rem 2rem 2.5rem 2rem;}

	.table5 li {justify-content: flex-start; gap: 1rem;}
	.table5 li div {flex: auto 1 1;}
	.table5 li div:nth-child(3) {display: none;}
	.table5 li div:nth-child(4) {display: none;}
}
@media screen and (max-width: 820px) {
	.brands {gap: 1rem;}
	.brands li {flex: calc(33.3333% - ((1rem * 2) / 3)) 0 0;}
	.ressorts {flex-direction: column;}
	.ressorts div {padding-left: 0; border-left: none;}
	.teaser .brands li {flex: calc(33.33333% - ((1rem * 2) / 3)) 0 0;}
	.vierer {max-width: 600px;}
	.vierer .rankingbox {flex: 100% 1 1;}
	
	.wrapper-chart {margin: -1.5rem; padding: 2rem; border-radius: 0;}
	.darkbox {margin: -1.5rem; padding: 2rem; border-radius: 0;}
	.textwithimg {flex-direction: column; flex-wrap: wrap;}
	.textwithimg img { width: 100%;}
	.cardata dl {flex: 0 0 calc(50% - 1.3625rem);}
	.techdata {flex-flow: column wrap;  justify-content: space-between; align-items: flex-start;}
	.techdata dt {flex: 100% 0 0; margin: 0; font-size: 0.9375rem;}
	.techdata dd {flex: 100% 0 0; margin-bottom: 0.875rem; text-align: left;}
}

@media screen and (max-width: 760px) {
	.reviews {max-width: 480px;}
	.reviews a {flex: 100% 1 1; flex-direction: column;}
	.reviews a > figure img {border-radius: 0.625rem 0.625rem 0 0;}
	.reviews .reviewcar {padding-bottom: 3rem;}
	.reviews .reviewdetails {border-top: 1px solid #959899; padding: 1.125rem 1.5rem;}

	.rating li {flex: calc(50% - 0.5rem) 0 0;}
	.handyscreen li {display: none;}
	.handyscreen li:first-child {display: block;}
	.handyscreen li:nth-child(2) {display: block;}
	.handyscreen li:nth-child(3) {display: block;}
	.handyscreen img {border: 0.1875rem #191f22 solid; border-radius: 1.125rem;}
	.cargallery li {flex: 100% 1 1;}
	
	.thema {gap: 2rem; margin-top: 3rem; padding: 0}
	.thema > div:nth-of-type(2n +1) {background-color: #fff;}
	.thema img {border-radius: 0;}
	.thema > div:nth-of-type(2n +1) img {border-radius: 0;}
	.thema > div div {padding: 3rem 2rem;}

	.skat {padding: 0;}
	.skat > div {background-color: #fff;}
	.skat > div div {padding-left: 1.5rem; padding-right: 1.5rem;}
	.skat img {border-radius: 0;}
	.wrapper-guide .carimgwide {margin: 3rem -1.5rem;}
	.wrapper-guide .carimgwide img {border-radius: 0;}
	.jump ul {flex-wrap: wrap;}
	.jump li {flex: calc(50% - 0.5rem) 0 0;}

}
@media screen and (max-width: 620px) {
	.brands {max-width: 480px;}
	.brands li {flex: calc(50% - 0.5rem) 0 0;}
	.logo {font-size: 1.25rem; padding: 0.4375rem 1rem;} 
	.logo span {display: none;}
	header .button-rate a {padding: 0.25rem 1.25rem;}
	header .button-rate span {display: none;}
	header .button-rate a span + span {display: flex; align-items: center;}
	header .button-rate a span + span::before {font-family: 'Material Symbols Outlined'; -webkit-font-feature-settings: 'liga' 1; -moz-font-feature-settings: 'liga' 1; font-feature-settings: 'liga' 1; line-height: 1; content:  "\eb1c"; font-weight: 300; font-size: 1rem; margin-right: 0.5rem; color: #fff;}
	.reviews .logobox figure {height: 3rem; width: 3rem; border-radius: 0.5rem; padding: 0.75rem;}
	.linkfilter span {display: none;}
	.imagetheme a {flex: 100%;}
}
@media screen and (max-width: 510px) {
	.jump ul {flex-direction: column; background-color: #eeeff1; border-radius: 0.625rem; gap: 0; padding: 1rem;}
	.jump a {flex-direction: row;  align-items: center; padding-bottom: 0.5rem; padding-left: 0.5rem;}
}
@media screen and (max-width: 450px) {
	.reviews .logobox figure {display: none;}
	.cardata dl {flex: 0 0 100%;}

}
}