@charset "utf-8";
@import url("normalize.css");
@import url('https://fonts.googleapis.com/css2?family=Inter+Tight:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wdth,wght@0,90,100..900;1,80,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Heebo:wght@200..900&display=swap');
@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=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200');
@import url("logos.css");
@import url("swiper-bundle.min.css");
@import url("photoswipe.css");

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: 'Noto Sans', sans-serif; font-weight: 550; font-size: 2.5rem; font-variation-settings: "wdth" 100; margin: 1.25rem 0; line-height: 1.25; letter-spacing: -0.025rem; word-wrap: break-word; overflow-wrap: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; font-optical-sizing: auto;}
h2 {font-family: 'Noto Sans', sans-serif; text-align: left; color: #313235; font-weight: 500; font-size: 1.2875rem; font-variation-settings: "wdth" 95; letter-spacing: -0.02em; line-height: 1.3125; word-wrap: break-word; overflow-wrap: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; font-optical-sizing: auto;}
h3 {font-weight: 525; font-size: 1.375rem; line-height: 1.375; margin: 1rem 0;}
h4 {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;}

p {font-family: 'Archivo', sans-serif; font-size: 1.0625rem; color: #313235; font-weight: 350; line-height: 1.5625; hyphens: auto; margin: 1.125rem 0; font-optical-sizing: auto;}
p strong {font-weight: 525;}
a {color: #111; text-decoration: none;}
p a {font-weight: 450;}
p sup {font-size: 0.875rem; font-weight: 275;}

figure {margin: 0;}

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;}
header a {display: inline-flex; align-items: center;}
header ul {display: flex; align-items: center; font-weight: 525; text-transform: uppercase; font-size: 0.75rem; letter-spacing: 0.075rem;}
header .nav li:first-child a {white-space: nowrap; position: relative; padding: .6125rem;}
header .mobile {display: none; margin-right: -0.875rem;}
.icon-menu {display: inline-block; line-height: 1; padding: 0.375rem 0.5rem; background-color: #fff; border-radius: 0.375rem; color: #191f22; transition: background-color 0.6s ease 0s;}
.icon-menu:hover {background-color: #eeeff1;}
.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;}
.nav ul .search {background-color: #fff; border-radius: 0.375rem; margin-right: -0.625rem; transform: translateY(-2px);}
.nav ul .search::after {width: 0; height: 0; background-color: none;}
.nav ul .search:hover {background-color: #eeeff1;}

.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);}

.wrapper-big {max-width: 1768px; margin: 0 auto; padding: 0 1.5rem;}
.wrapper-large {max-width: 1470px; margin: 0 auto; padding: 0 1.5rem;}
.wrapper-medium {max-width: 1280px; margin: 0 auto; padding: 0 1.5rem; text-align: left;}
.wrapper-small {margin: 0 auto;	max-width: 1008px; padding: 0 1.5rem; text-align: left; scroll-margin-top: 2rem;}
.wrapper-small h2, .wrapper-xsmall h2 {font-size: 1.5rem; margin-top: 2rem;}
.wrapper-xsmall {margin: 0 auto; max-width: 840px; padding: 0 1.5rem; text-align: left;}
.wichtiger-satz {font-size: 1.75rem; font-style: italic; font-weight: 600; max-width: 540px; margin: 2.5rem auto; padding: 0 2rem; text-align: center; line-height: 1.25;}
.wichtiger-satz::before {content: "\00BB";}
.wichtiger-satz::after {content: "\00AB";}

.wrapper-content .ad {max-width: 1160px; margin: 3rem auto; text-align: center;}
.wrapper-guide {margin: 3rem auto; max-width: 960px; padding: 0 1.5rem; text-align: left;}
.wrapper-gradient {background-color: #eeeff1; background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#eeeff1)); background-image: -webkit-linear-gradient(#fff, #eeeff1); background-image: linear-gradient(#fff, #eeeff1);}
article > .ad {max-width: 1470px; margin: 0 auto; text-align: center;}

.content figure {margin: 2rem -1.5rem;}
.lightgray {background-color: #eeeff1; margin-top: 4rem;}
.darkgray {padding: 2rem 0; background-color: #2d3033;}
.darkgray h1 {color: #CBCCCD; font-weight: 400; font-size: 2rem; margin-bottom: 3rem;}

.icon::before, .icon::after {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: 'FILL' 0, 'wght' 300, 'GRAD' -25, 'opsz' 48; transform: translateY(-1px); display: inline-block; vertical-align: middle; text-transform: none; word-wrap: normal; white-space: nowrap; direction: ltr; display: inline-block;}
.colored65::before {content: "\e838";}
.colored50::before {content: "\e838";}
.colored35::before {content: "\e838";}
.battery::before {content: "\f8af";}
.charge::before {content: "\e56d";}
.year::before {content: "\e935";}

.icon-back::before {content: "\e5c4"; font-variation-settings: 'wght' 500; font-size: 1.25rem; padding-right: 0.25rem;}
.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";}
.icon-globe::before {content: "\e894"; padding-right: 0.375rem; font-size: 0.875rem;}
.icon-photo::before {content: "\e412";}
.icon-evstation::before {content: "\e56d";}
.icon-data::before {content: "\ef02";}
.icon-check::before {content: "\e8dd";}
.icon-resumee::before {content: "\f368";}
.star::before {content: "\e838";}
.awardstar::before {content: "\f612";}
.seating::before {content: "\e637";}
.carclass::before {content: "\e531";}
.icon-dccharge::before {content: "\e56d";}
.icon-plug::before {content: "\f102";}

.nowrap {white-space: nowrap}
.logo {display: inline-block; font-size: 1.125rem; text-transform: uppercase; padding: 0.5rem 0.9375rem; font-family: 'Inter Tight', sans-serif; font-weight: 525; white-space: nowrap; word-spacing: -0.05rem; font-optical-sizing: auto;}
.logo {background: linear-gradient(to right, transparent 0.125rem, transparent 0.125rem) 0 0, linear-gradient(to right, #313235 0.125rem, transparent 0.1875rem) 0 100%, linear-gradient(to left, #313235 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, #313235 0.125rem, transparent 0.1875rem) 100% 0, linear-gradient(to top, #313235 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%;}


.menu {background-color: #191F22;}
.menu header ul {display: none;}
.menu .logo a {color: #cfd0d1; font-weight: 500;}
.menu .logo a:hover {color: #fff;}
.menu .logo {background: linear-gradient(to right, transparent 0.125rem, transparent 0.125rem) 0 0, linear-gradient(to right, #cfd0d1 0.125rem, transparent 0.1875rem) 0 100%, linear-gradient(to left, #cfd0d1 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, #cfd0d1 0.125rem, transparent 0.1875rem) 100% 0, linear-gradient(to top, #cfd0d1 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%;}
.ressorts {margin: 3rem 0;}
.ressorts a {display: block; color: rgba(252, 252, 253, 0.7); font-size: 1.875rem; font-weight: 300; padding: 0.875rem 0;}
.ressorts a:hover {color: rgba(252, 252, 253, 1); text-decoration: underline; text-underline-offset: 0.2em; text-decoration-thickness: 2px;}

.usersite header {display: none;}
.rubrik1 .nav ul li:first-child a::after {opacity: 1;}
.rubrik2 .nav ul li:nth-child(2) a::after {opacity: 1;}
.rubrik3 .nav ul li:nth-child(3) a::after {opacity: 1;}
.rubrik4 .nav ul li:nth-child(4) a::after {opacity: 1;}

.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}

.teaser-wrap {max-width: 1500px; margin: 2.5rem auto 0 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;}

.next {padding: 3rem 0; background-color: #eeeff1}
.next .ad {margin: 0 1.5rem 3rem 1.5rem;}
.button-next {display: inline-block; border-radius: 0.5rem; padding: 1rem 2rem; font-size: 0.9375rem; font-weight: 350; background-color: #191F22; color: #fff;}
.button-next:hover {background-color: #424344;}
.button-next::after {content: "\e5c8"; 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: 'FILL' 0, 'wght' 350, 'GRAD' -25, 'opsz' 48; font-size: 1.25rem; transform: translateY(-1px); display: inline-block; vertical-align: middle; text-transform: none; word-wrap: normal; white-space: nowrap; direction: ltr; padding-left: 0.5rem;}

.button {display: inline-block; color: #fff; padding: .875rem 2rem; border-radius: 0.25rem; background-color: #191f22; font-size: 0.875rem;}
.buttongray {color: #111; background-color: #dbdbde; padding: .9375rem 2rem; margin: 1rem 0;}
.buttongray:hover {color: #fff; background-color: #191f22;}
.buttonblue {display: inline-block; color: #fff; padding: 1rem 1.75rem; border-radius: 0.25rem; background-color: #006583; font-size: 0.9375rem;}

.manufacturer {padding: 0 1.5rem;}
.manufacturer div {background-color: #191f22; 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;}

.contentlayout {display: flex; gap: 2rem 5rem; margin-top: 1rem; margin-bottom: 3rem;}
.contentlayout aside {flex: 0 0 260px; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 1rem; position: sticky; top: 3rem; font-size: 0.9375rem; margin: 3.1875rem 0; align-self: flex-start;}
.contentlayout aside span {text-transform: uppercase; font-size: 0.8375rem; font-weight: 500,}
.contentlayout .main {flex: 1 1 100%;}

.filterbrand {display: flex; flex-wrap: wrap; gap: 0.675rem; margin: 1rem 0; font-size: 0.9375rem;}
.filterbrand a {background-color: #dbdbde; padding: 0.5rem 0.75rem; border-radius: 0.375rem; border: 1px solid #dbdbde}
.filterbrand a:hover {background-color: #fff;}

.contentlayout h1 {margin-top: 0; font-size: 2rem; text-align: left; font-weight: 500;}
.headerwithbutton {display: flex; justify-content: space-between; align-items: center; gap: 4rem 1rem;}
.headerwithbutton .icon-photo::before {padding-right: 0.5rem; font-size: 1.125rem;}
.headerwithbutton .button {white-space: nowrap;}
.headerwithbutton h1 {margin: 0;}
.headerwithbutton strong {font-size: 0.75rem; font-weight: 600; letter-spacing: 0.05rem;}

.read-more {margin: 5rem auto; text-align: left;}
.read-more > h2 {max-width: 1008px; margin: 0 auto; font-size: 1.625rem;}
.read-more > div {display: flex; gap: 3rem 2.5%; margin-top: 2.5rem;}
.read-more > div a {flex: 1; border-radius: 0.625rem 0.625rem 0 0;}
.read-more figure {overflow: hidden; margin: 0; display: block;border-radius: 0.625rem 0.625rem 0 0;}
.read-more img {border-radius: 0.625rem 0.625rem 0 0; transition: transform 0.3s ease;}
.read-more p {font-size: 1rem; color: #4A4B4F}
.read-more h3 {font-optical-sizing: auto; font-weight: 525; font-size: 1.375rem; font-family: 'Noto Sans', sans-serif; font-variation-settings: "wdth" 90; letter-spacing: -0.02em; margin-top: 1.75rem; color: #313235;}
.read-more strong {font-size: 0.8125rem; font-weight: 550; letter-spacing: 0.05rem; text-transform: uppercase; color: #4A4B4F;}
.read-more a:hover img {transform: scale(1.05);}
.read-more a:hover strong {color: #111;}

.sixarticle > div {flex-wrap: wrap;}
.sixarticle > div a {flex: 0 0 calc((100% - 2 * 2.5%) / 3);}

.reviewstars {display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;}
.reviewstars > div {display: flex; align-items: center; gap: 0.625rem; }
.reviewstars strong {background-color: #191f22; border-radius: 50%; width: 2.25rem; height: 2.25rem; display: flex; justify-content: center; align-items: center; color: #fff; font-size: 0.9375rem; font-weight: 525;}

.stars {white-space: nowrap;}
.stars .icon::before {color: #d7d9db; font-variation-settings: 'FILL' 1, 'wght' 800, 'GRAD' -25, 'opsz' 48; }
.stars .fill::before {color: #191f22;}
.stars .colored35::before {background: linear-gradient(to right, #191f22 35%, #d7d9db 35%); -webkit-background-clip: text; -webkit-text-fill-color: transparent;}
.stars .colored50::before {background: linear-gradient(to right, #191f22 50%, #d7d9db 50%); -webkit-background-clip: text; -webkit-text-fill-color: transparent;}
.stars .colored65::before {background: linear-gradient(to right, #191f22 62%, #d7d9db 62%); -webkit-background-clip: text; -webkit-text-fill-color: transparent;}

.reviewimg {display: flex; align-items: center; margin: 1rem 0 3rem 0; background-color: #eeeff1; border-radius: 0.625rem;}
.reviewimg .reviewstars strong {width: 3.75rem; height: 3.75rem; font-size: 1.5rem; font-weight: 575;}
.reviewimg .icon::before {font-size: 1.25rem;}
.reviewimg figure {flex: auto;}
.reviewimg img {border-radius: 0.625rem 0 0 0.625rem;}
.reviewimg .header {display: flex; justify-content: center; flex-wrap: wrap; gap: 1.75rem; padding: 2.5rem;}
.reviewimg .header h1 {flex: 0 0 100%; margin: 0;}
.reviewimg .header .by {flex: 0 0 100%; font-size: 0.9375rem; color: #535457;}
.reviewimg .header .by a {color: #535457; text-decoration: underline; text-underline-offset: 0.2em; text-decoration-thickness: 1px;}
.reviewimg .katlink {margin: 0 0 -0.5rem 0;}

.carmodel {display: flex; justify-content: space-between; align-items: center;}
.carfacts {display: flex; flex-direction: column; align-items: flex-start; gap: 0.375rem 1.5rem;}
.carfacts li {white-space: nowrap; font-size: 0.9375rem; display: flex; align-content: center; line-height: 1;}
.carfacts strong {font-weight: 550; padding-right: 0.25rem;}
.carfacts li::before {transform: translateY(-1px); 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";}
.carfacts li:first-child::before {content: "\f8af";}
.reviewdetails {background-color: #fcfcfd; border: 1px solid #d9d9db; border-radius: 0.625rem; padding: 0.9375rem 1rem;}
.reviewdetails em {color: #535457; text-align: right; display: flex;  align-items: center; line-height: 1; font-size: 0.9375rem;}
.reviewscards .reviewdetails em.icon::before {content: "\f368"; font-style: normal; font-weight: 300; margin-right: 0.315rem;}

.goto {display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; margin: 1.5rem 0;}
.goto li {flex: 0 0 calc(33.3333% - 0.5rem); font-size: 1rem;}
.goto a {display: block; color: #111; background-color: #e7e7eb; border-radius: 0.5rem; padding: 0.875rem 1rem;}
.goto a:hover {background-color: #dbdbde;}
.goto .icon::before {padding-right: 0.375rem; font-variation-settings: 'wght' 275; font-size: 1.5rem; color: #191f22;}

#Bewertung {background-color: #eeeff1; border-radius: 0.625rem; padding: 1.5rem 1.5rem 1rem 1.5rem; margin: 2rem -1.5rem; color:#535457; scroll-margin-top: 2rem;}
#Bewertung p {font-weight: 500; font-size: 1.0625rem; color:#535457; margin: 0 0 1.5rem 0;}
#Bewertung a {text-decoration: underline; text-underline-offset: 0.2em; text-decoration-thickness: 1px; color:#535457;}
#Bewertung a:hover {text-decoration: none;}

.rating {display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 1rem auto;}
.rating li {flex: calc(20% - 0.6rem) 0 0; padding: 1.25rem 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: 0.9375rem; 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: 0.5rem 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;}


.data {background-color: #191f22; text-align: center; color: #fff; padding: 1.5rem;}
.data > div {max-width: 1054px; margin: 0 auto;}
.data h2 {color: #CBCCCD; font-weight: 400; font-size: 1.3175rem; text-align: left}
.cardata sup a {color: #CBCCCD;}

.cardata {display: flex; flex-wrap: wrap; gap: .75rem; background-color: #191f22; margin: 2rem 0; text-align: left;}
.cardata dl {flex: 1 0 calc(50% - .375rem); display: flex; flex-direction: column; gap: 0.5rem; background-color: #2d3033; padding: 1rem; border-radius: 0.5rem;}
.cardata dt {font-size: 0.875rem; font-weight: 325; color: #CBCCCD;}
.cardata dd {margin: 0; font-size: 1.125rem; font-weight: 425; color: #fff;}

.accordion .cardata {background-color:  #eeeff1; margin: 1rem 0 1.5rem 0;}

.brandsite {padding: 0 1.5rem 4rem 1.5rem; text-align: left;}
.brandsite > * {padding: 1.75rem 0 1.25rem 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.375rem; font-weight: 500; margin-top: 0.25rem;}
.darkgray .brandsite {padding: 0 1.5rem;}
.darkgray .brandsite h2 {color: #f0f4f6; font-weight: 400; font-size: 1.25rem;}


.output > div {display: none;}
.output > div:first-child {display: block;}
.dropdown-wrap {display: flex; flex-direction: column; align-items: flex-start; gap: 0.75rem; margin: 1.5rem 0 1.75rem 0;}
.selectbutton {border: 2px solid #cecece; border-radius: .375rem;}
.dropdown {position: relative; padding:0; display: inline-block; background-color: #fff;}
.dropdown select {width: 100%; margin:0; background: none; border: 2px solid transparent; outline: none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; appearance: none; -webkit-appearance: none; font-size: 1.125rem; padding: .5rem 2.75rem .5rem .75rem; line-height: 1.3;}
.dropdown::after {content: ""; position: absolute; top: 50%; margin-top: -1.125rem; right: 0.5rem; z-index: 2; font-family: 'Material Symbols Outlined'; -webkit-font-feature-settings: 'liga' 1; -moz-font-feature-settings: 'liga' 1; font-feature-settings: 'liga' 1; content: "\e5cf"; font-size: 2rem; font-weight: 550; pointer-events:none;}
.selectbutton:hover {border:2px solid #797973;}
.dropdown select:focus {outline:none; box-shadow: 0 0 1px 3px rgba(180,222,250, 1); background-color:transparent; border:2px solid #718096;}
.dropdown select:-moz-focusring {color: transparent; text-shadow: 0 0 0 #000;}
option {font-weight:normal;}

.ladezeit {display: flex; justify-content: space-between; gap: 0.75rem 1.25rem;}
.ladezeit div {flex: 1;}
.ladezeit ul {display: flex; flex-direction: column; gap: 0.75rem; text-align: left; color: #CBCCCD; font-size: 0.9375rem; font-weight: 300;}
.ladezeit li {flex: 1 1 auto; display: flex; justify-content: space-between; align-items: center; gap: 2rem; background-color: #2d3033; padding: 0.875rem; border-radius: 0.625rem;}
.ladezeit h3 {color: #fff; font-size: 1.125rem; font-weight: 350; margin: 0 0 0.275rem 0;}
.ladezeit strong {color: #fff; font-size: 1.25rem; white-space: nowrap;}
.ladezeit .icon::before {padding-right: 0.375rem; font-size: 1.75rem;}
.modellsite {background-color: #f1f1f4; border: 1px solid #cacacf; border-radius: 0.5625rem; padding: 1rem; box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.2);}
.modellsite li {background-color: #e3e3e8; color: #4a5965; font-size: 0.875rem; font-weight: 425;}
.modellsite h4 {font-size: 1.1875rem; margin: 0 0 0.625rem 0;}
.modellsite h3 {color: #111; font-weight: 500;}
.modellsite strong {color: #111; font-size: 1.1875rem; font-weight: 550;}
.output .ladezeit + p {margin-top: 2rem;}

.quelle {text-align: left; font-size: 0.9375rem; color: #959899; margin: 1rem 0;}
.quelle span {display: block;}

.handyscreen {margin: 3rem 0.75rem; display: flex; justify-content: center; gap: 1.5rem;}
.handyscreen li {flex: 0 1 250px;}
.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;}

.reviews {max-width: 1280px; margin: 0 auto; padding: 2rem 1.5rem 5rem 1.5rem;}
.reviews h2 {margin-bottom: 2rem;}
.reviews > ul {display: flex; flex-wrap: wrap; gap: 2.5rem 2rem; font-family: 'Archivo', sans-serif; font-size: 0.875rem; font-weight: 350; line-height: 1.625; text-align: left;}
.reviews > ul > li {flex: calc(50% - 1rem) 0 0; display: flex; }
.reviews a {flex: 100%; display: flex; flex-direction: column; 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 > div {flex: 100%; height: 100%; display: flex; flex-direction: column; justify-content: space-between; gap: 1.375rem; padding: 1.25rem;}
.reviews a > figure {flex: auto 0 0; overflow: hidden}
.reviews a > figure img {border-radius: 0.625rem 0.625rem 0 0; -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 h3 {font-family: 'Noto Sans', sans-serif; margin: 0; font-size: 1.25rem; font-weight: 475;}
.reviews .reviewcar {flex: auto 1 1; display: flex; flex-direction: column; justify-content: center; margin: 0.25rem 0;}
.toplights {align-self: flex-start; display: flex; flex-wrap: wrap; gap: 0.625rem; font-size: 0.875rem; color: #232a30; font-weight: 375; margin-bottom: 0.75rem;}
.toplights li {background-color: #d7d7dc; font-weight: 375; padding: 0.1875rem 0.5rem; border-radius: 0.375rem; white-space: nowrap;}
.toplights li.black {background-color: #191f22; color: #fff; font-weight: 375;}
.reviews .year::before {font-style: normal; padding-right: 0.25rem; font-variation-settings: 'wght' 400; }

.header-reviewer {max-width: 1768px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; padding: 0.375rem 1.5rem 1rem 1.5rem; font-size: 0.875rem; font-weight: 450;}
.reviewer {padding: 0 1.5rem 2rem 1.5rem; text-align: left; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 1rem 4rem; margin-top: -1.5rem;}
.reviewer h1 {margin: 0; font-size: 1.875rem; line-height: 1;}
.reviewer > div {display: flex; align-items: center; gap: 0.5rem 1rem;}
.initials {background-color: #191f22; border-radius: 50%; width: 5rem; height: 5rem; display: flex; justify-content: center; align-items: center; font-size: 2rem; font-weight: 650; color: #fff;}
.moreabout {font-size: 0.6875rem; font-weight: 425; text-transform: uppercase;}
.moreabout a {display: block;}
.moreabout .icon-globe {display: block; padding: 0.5rem 1.125rem; color: #fff; background-color: #191f22; font-family: 'Heebo', sans-serif; font-size: 0.8125rem; font-weight: 425; text-transform: none; border-radius: 0.25rem; letter-spacing: 0.025rem;}

.imageheader {display: flex; justify-content: center; align-items: center; gap: 1.5rem 5rem; margin-bottom: 4rem; text-align: left;}
.imageheader figure {flex: 0 1 calc(50% - 2.5rem);}
.imageheader h1 {max-width: 520px;}
.imageheader p {font-size: 1.3125rem; font-weight: 350; color: #535457;}

.firstletter::first-letter {font-size: 3.75rem; font-weight: bold; float: left; line-height: 1; margin-right: 0.75rem; margin-bottom: -1rem;}
.firstletter {font-size: 1.125rem; margin-top: 2.5rem;}
.toc {margin: 2.5rem 0; padding: 1rem 1.5rem; background-color: #eeeff1; border-radius: 0.5rem;}
.toc h2 {margin: 0; font-size: 1.2875rem;}
.toc ul {font-family: 'Archivo', sans-serif; font-size: 1.0625rem; color: #313235; font-weight: 350; line-height: 1.65; margin-top: 0.75rem; margin-left: 1rem;}
.toc ul a {text-decoration: underline; text-underline-offset: 0.2em; text-decoration-thickness: 1px; text-decoration-color: transparent; transition: text-decoration-color 0.2s ease-in-out;}
.toc ul a::before {display: inline-block; content: "\21B5"; font-size: 1.25rem; margin-right: 0.375rem; transform: scaleX(-1);}
.toc ul a:hover {text-decoration-color: #313235;}

.infobox {background-color: #eeeff1; padding: 1rem 1.5rem; margin: 2.5rem auto; border-radius: 0.625rem; text-align: center;}
.infobox p {text-align: left;}
.infobox h2 {font-size: 1.5625rem; text-align: center; margin-top: 1rem;}
.imagebox {display: flex; align-items: center; gap: 2rem; margin: 3rem auto;}

.accordion {list-style: none; text-align: left; perspective: 900; margin: 2.5rem auto; -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;
}
.accordion > li {position: relative; padding: 0.375rem 1.5rem; background-color: #eeeff1; margin-bottom: 0.75rem; border-radius: 0.5rem; scroll-margin-top: 1rem;}
.accordion > li:last-child {margin-bottom: 0;}
.accordion > li > h2 {font-family: 'Archivo', sans-serif; font-size: 1.1875rem; font-weight: 400; letter-spacing: -0.02rem; text-align: left; padding-right: 3rem; margin: 0.5rem 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: 2rem; top: 1.5rem;
}
.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);
}

.accordion p {margin: 0.5rem 0}

.darkbox {padding: 1.5rem 1.5rem 1.75rem 1.5rem; background-color: #191f22; border-radius: 0.625rem; margin: 1rem auto; box-shadow: #3f4347 0px 0px 0px 1px inset;}
.darkbox h2 {color: #f0f4f6; margin: 0 0 1.75rem 0; font-weight: 425; text-align: center;}
.darkbox + .darkbox {margin-top: 2rem;}
article + .darkgray {margin: 2.5rem auto}
.darkgray p {color: #a2a2a3;}
.darkgray p a {color: #a2a2a3; text-decoration: underline;}

.darkbox .accordion {margin: 0 auto;}
.darkbox .accordion > li {background-color: #191f22;}

.darkbox .accordion > li i::before, .darkbox ul li i::after {background-color: #f0f4f6;}

.glossar {max-width: 1160px; margin: 3rem auto;}
.glossar h4 {margin: 0.25rem 0; padding: 0; font-size: 1.25rem; display: flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; background-color: #000; color: #fff; font-weight: 600;}
.glossar dl {margin: 2rem 0 0 0; padding: 0; font-family: 'Archivo', sans-serif; font-size: 1.0625rem; color: #313235; font-weight: 350; line-height: 1.5625; hyphens: auto; margin: 1.25rem 0;}
.glossar dt {font-weight: 550; margin-bottom: 0.375rem;}
.glossar .tooltip {position: relative; display: inline-block;}
.glossar .tooltip span {position: absolute; left: 100%; top: 50%; transform: translateY(-50%); display: inline-block; font-family: 'Noto Sans', sans-serif; font-size: 0.625rem; color: #fff; font-weight: 450; margin-left: 0.5rem; background-color: #ff7675; padding: 0.125rem 0.625rem 0.1825rem 0.625rem; margin-left: 0.5rem; border-radius: 999px; white-space: nowrap; text-transform: uppercase; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease;}
.glossar dd {margin: 0 0 1.25rem 0;}
.glossar .definition-block:hover .tooltip span {opacity: 1; visibility: visible;}

.keyfacts {max-width: 780px; margin: 1.5rem auto; font-family: 'Archivo', sans-serif; font-size: 1rem; color: #535457; font-weight: 375; line-height: 1.375; hyphens: auto; scroll-margin-top: 2rem;}
.keyfacts li ul {display: flex; flex-wrap: wrap; margin: 1rem 0 0.75rem 0;}
.keyfacts li ul li {flex: 1 1 100%; display: flex; align-items: flex-start; margin-bottom: 8px;}
.keyfacts li ul li::before {content: "•"; font-weight: bold; display: inline-block; width: 1em; flex-shrink: 0;}
.keyfacts h2::before {padding-right: 0.5rem; font-variation-settings: 'FILL' 0, 'wght' 450, 'GRAD' -25, 'opsz' 48;}
.highlights h2::before {content: "\e8dc";}
.lowlights h2::before {content: "\e8db";}

.resumee {margin: 3rem -1.5rem; background-color: #eeeff1; padding: 1.5rem; border-radius: 0.625rem; scroll-margin-top: 2rem; text-align: left;}
.driver {display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 1.5rem 4rem; margin: 0.5rem 0 2.25rem 0;}
.driver a {padding: 0.6875rem 1.125rem; color: #fff; background-color: #191f22; font-size:  0.75rem; font-weight: 425; border-radius: 0.25rem; text-transform: uppercase; letter-spacing: 0.05rem;}
.driver a:hover {background-color: #424344;}
.resumee h1 {font-family: 'Heebo', sans-serif; color: #191f22; font-size: 2.125rem; font-weight: 600; margin: 0 0 0 -2rem;}
.resumee h1 > span {display: block; font-family: 'Archivo', sans-serif; font-size: 1.0625rem; font-weight: 350; color: #535457;}
.resumee h3 { font-size: 1.25rem;}
.resumeetext {max-width: 1024px; margin: 0 auto;}
.resumeetext p { margin-top: 0;}

.shortresumee {display: flex; flex-wrap: wrap; gap: 2rem 5rem;}
.shortresumee .resumeetext {flex: 1 1 50%;}
.shortresumee .driver {flex: 0 0 300px; margin-bottom: 0;}

.hashtag {margin: 1.75rem 0 0 0; font-size: 0.875rem; font-weight: 450; color: #535457; display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1rem}
.hashtag li a::before {content:  "#";}
.hashtag li a {display: inline-block; padding: 0.5rem .75rem; 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);}

.resumee .hashtag li a {background-color: #fff;}


.hashtag.htgray {margin: 1rem 0 4rem 0;}
.hashtag.htgray li a {background-color: #eeeff1;}

.gallery {padding: 2rem; background-color: #2d3033;}
.gallery h2 {display: none;}
.gallery > div {display: flex; flex-wrap: wrap; gap: 1rem; max-width: 1366px; margin: 0 auto;}
.gallery > div figure {flex: 0 0 calc(50% - 0.5rem);}

.katlink {display: none; margin-bottom: 0.75rem; background-color: #eeeff1; color: #191f22; font-size: 0.8175rem; font-weight: 475; padding: 0.5rem 1rem; border-radius: 0.375rem; text-transform: uppercase; letter-spacing: 0.025rem;}
.katlinkperm {display: inline-block; margin: -1rem 0 .75rem 0; background-color: #eeeff1; color: #191f22; font-size: 0.8175rem; font-weight: 475; padding: 0.5rem 1rem; border-radius: 0.375rem; text-transform: uppercase; letter-spacing: 0.025rem;}

.usercarbox {display: flex; flex-direction: row-reverse; align-items: center; gap: 3rem 5rem; font-family: 'Archivo', sans-serif; border-bottom: 1px solid #959899; padding-bottom: 2.5rem; margin: 1rem 0 2rem 0;}
.usercarbox .userev {flex: auto 1 1;}
.usercarbox .overallrating {flex: 350px 0 0; text-align: center; background-color: #191f22; border-radius: 0.625rem; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 1rem; color: #edf2f5; font-family: 'Heebo', sans-serif; font-size: 0.9375rem; padding: 1.5rem 2rem; box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.2);}
.usercarbox h1 {font-size: 2.875rem; margin-top: 0;}
.iconinfobox {font-size: 1.0625rem; font-weight: 350;}
.iconinfobox li {padding: 0.0625rem 0; line-height: 1.5;}
.iconinfobox .icon::before {color: #5e6063; padding-right: 0.375rem; font-variation-settings: 'wght' 325; font-size: 1.125em;}
.usercarbox .stars {background-color: #2d3033; padding: 0.25rem 1.5rem; border-radius: 0.5rem;}
.usercarbox .stars .icon::before  {color: #5e6063; font-size: 1.125rem;}
.usercarbox .stars .fill::before  {color: #fafafb;}
.usercarbox .stars .colored65::before {display: inline-block; content: "\e838"; background: linear-gradient(to right, #fafafb 62%, #5e6063 62%); -webkit-background-clip: text; -webkit-text-fill-color: transparent;}
.usercarbox .stars .colored35::before {display: inline-block; content: "\e838"; background: linear-gradient(to right, #fafafb 35%, #5e6063 35%); -webkit-background-clip: text; -webkit-text-fill-color: transparent;}
.usercarbox .stars .colored50::before {display: inline-block; content: "\e838"; background: linear-gradient(to right, #fafafb 50%, #5e6063 50%); -webkit-background-clip: text; -webkit-text-fill-color: transparent;}
.usercarbox .user {font-weight: 350; font-size: 0.9375rem; color: #CBCCCD;}
.usercarbox .userpoints {display: flex; justify-content: center; align-items: center;background-color: #FAFAFB; border-radius: 50%; color: #191f22; width: 4.75rem; height: 4.75rem; font-size: 2.125rem; font-weight: 750; margin-bottom: -0.125rem;}

.authorshort {display: flex; justify-content: flex-start; align-items: center; gap: 0.5rem; margin: 2rem 0 -1rem 0;}
.authorshort .initials {font-size: 0.8125rem; height: 2.25rem; width: 2.25rem;}
.authorshort p {margin: 0rem; font-size: 0.9375rem; font-weight: 500; color: #535457;}

.rankingbox {display: flex; align-items: center; gap: 2rem 5rem; font-family: 'Archivo', sans-serif; margin-bottom: 1.5rem;}
.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);}
.rankingbox figure {flex: 0 1 600px; border-radius: 0.625rem;}
.signet {flex: 1 1 auto;  align-self: stretch; background-color: #191f22; border-radius: 0.625rem 0 0 0.625rem; background-size: 50% 80%; background-position: center; background-repeat: no-repeat;}
.rankingbox .rankinginfo {flex: 0 0 50%; display: flex; flex-direction: column; font-size: 0.875rem; padding: 0.75rem 2rem; justify-content: center;}
.rankingbox .rankinginfo li {display: flex; flex-direction: column; align-self: flex-start; 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; padding-right: 0.375rem;}
.rankingbox aside h1 {font-size: 3.125rem; margin-top: 0;}

.rankingbox .location::before {content: "\e0c8";}
.rankingbox .est::before {content: "\e916";}
.rankingbox .factory::before {content: "\ebb8";}
.rankingbox .group::before {content: "\e7ef";}

.cargallery {margin: 1.5rem auto; display: flex; flex-wrap: wrap; gap: 2rem 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 > * {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.5rem 0.5rem 0 0; overflow: hidden;}
.cargallery img {border-radius: 0.5rem 0.5rem 0 0;  -webkit-transform: scale(1); transform: scale(1); -webkit-transition: transform .4s ease-in-out; transition: .3s ease-in-out;}
.cargallery h3 {font-family: 'Noto Sans', sans-serif; font-weight: 425; font-size: 1.125rem; line-height: 1.5; margin: 1rem 1.5rem; letter-spacing: -0.01rem; text-align: center;}
.cargallery a:hover img {-webkit-transform: scale(1.05);transform: scale(1.025);}

.darkgray .cargallery li > * {box-shadow: none; background-color: #2d3033;}
.darkgray .cargallery figure {border-radius: 0.375rem;}
.darkgray .cargallery img {border-radius: 0.375rem;}
.darkgray .cargallery h3 {font-size: 0.9375rem; margin: 0.5rem 0; text-align: left; color: #CBCCCD;}

.shortreview-wrap {display: flex; flex-wrap: wrap; gap: 0 3rem; margin: 2rem 0 1.75rem 0; text-align: left;}
.shortreview-wrap .shortreview {flex: 0 1 100%; padding: 2rem 0; border-bottom: 1px solid #ccc;}
.shortreview-wrap .shortreview:last-child {border-bottom: none;}
.overall {margin: 2rem 0;}
.shortreview {font-family: 'Archivo', sans-serif; font-size: 1.0625rem; font-weight: 350; hyphens: auto;}
.shortreview .car {display: flex; flex-direction: column; gap: .625rem;}
.shortreview .car strong {font-weight: 475; display: block; font-size: 1.1875rem;}
.shortreview .car h3 {font-weight: 475; display: block; font-size: 1.25rem; margin-bottom: 0;}
.shortreview .ratinginfo {display: flex; align-items: center; gap: 1rem;}
.shortreview .ratinginfo span {font-size: 0.875rem; color: #707071; font-weight: 400;}
.shortreview p {margin: 0.875rem 0;}
.shortreview > a {display: block; margin-top: 0.5rem; font-size: 0.9375rem; font-weight: 450;text-decoration: underline; text-underline-offset: 0.2em; text-decoration-thickness: 1px;}
.shortreview .stars span {margin: 0 -0.1875rem;}
.shortreview .stars .icon::before {font-variation-settings: 'FILL' 1; font-size: 1.375rem;}
#bewertungen .shortreview {flex: 0 1 calc(50% - 1.5rem); padding: 0; border-bottom: none;}

.shortreview .photo-wrap {display: flex; justify-content: space-between; gap: 2rem;}
.shortreview .icon-photo {font-weight: 550; font-size: 0.9375rem; color: #535457; padding-top: 0.125rem; white-space: nowrap;}
.shortreview .icon-photo::before {font-size: 1rem; font-variation-settings: 'FILL' 1, 'wght' 600; color: #959899; padding-right: 0.25rem;}

.paginierung {display: flex; gap: 0.5rem; justify-content: center; margin-bottom: 4rem; font-size: 0.9375rem;}
.paginierung a {background: #eeeff1; padding: 0.4375rem 0.5rem; border: 1px solid #b6b6bb; border-radius: 0.375rem;}
.paginierung a.page { background: #fff; border: 1px solid #fff;}

.ev-wrapper {display: flex; flex-direction: column; margin-top: 1rem;}
.ev-wrapper .katlink {align-self: flex-start; order: -2;}
.ev-wrapper h1 {margin: 0;}
.evbrand {display: flex; align-items: center; background-color: #191F22; border-radius: 0.625rem; padding: 2rem; color: #fff; margin: 1.5rem 0; box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.2);}
.evbrand h2 {flex: 0 0 50%; text-align: right; color: #fff; font-size: 3rem; border-right: 1px solid #fff; margin: 0; padding: 2rem;}
.scorebig {padding-left: 2rem; display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; color: #fff;}
.score {display: flex; justify-content: center; align-items: center; background-color: #fff; border-radius: 50%; color: #191f22; width: 4.75rem; height: 4.75rem; font-size: 2.125rem; font-weight: 750; margin-bottom: -0.125rem;}

.evbrand .stars .icon::before {color: #5e6063; font-size: 1.375rem;}
.evbrand .stars .fill::before {color: #fafafb;}
.evbrand .stars .colored65::before {display: inline-block; content: "\e838"; background: linear-gradient(to right, #fafafb 62%, #5e6063 62%); -webkit-background-clip: text; -webkit-text-fill-color: transparent;}
.evbrand .stars .colored35::before {display: inline-block; content: "\e838"; background: linear-gradient(to right, #fafafb 35%, #5e6063 35%); -webkit-background-clip: text; -webkit-text-fill-color: transparent;}
.evbrand .stars .colored50::before {display: inline-block; content: "\e838"; background: linear-gradient(to right, #fafafb 50%, #5e6063 50%); -webkit-background-clip: text; -webkit-text-fill-color: transparent;}

.linkbar {display: flex; gap: 1.5rem; justify-content: flex-end; font-size: 0.875rem; margin-bottom: 2.5rem;}
.linkbar a {display: flex; gap: 1rem; justify-content: flex-end; font-size: 0.875rem;}
.linkbar a {display: inline-block; font-weight: 425; color: #707071; text-decoration: underline; text-underline-offset: 0.2em; text-decoration-thickness: 1px;}
.linkbar a:hover {text-decoration: none; color: #111;}
.linkbar .icon::before {padding-right: 0.5rem; font-size: 1.1875em; font-variation-settings: 'FILL' 0, 'wght' 350, 'GRAD' -25, 'opsz' 48; transform: translateY(1px);}
.evlink::before {content: "\eb1c";}
.icon-review::before {content: "\f054";}
.ev-wrapper + .shortreview-wrap {margin-bottom: 5rem;}

.linkf1 {color: #a2a2a3; display: inline-block; margin-top: 1rem; font-size: 0.8125rem; font-weight: 350;}
.linkf1::after {content: "\e941"; padding-left: 0.125em; font-size: 1.125rem;}
.pill {display: inline-block; font-size: 0.875rem; padding: 0.375rem 0.875rem; background-color: #dadbde; border-radius: 9999px;}
.pill + h1 {font-size: 3rem;}
.pill + h1 + p {font-size: 1.25rem;}
.accordion + a {display: inline-block; margin-bottom: 3rem;}

footer {background-color: #191F22; }
.footer-wrap {max-width: 1768px; margin: 0 auto; padding: 5rem 1.5rem;}
footer p {font-size: 1.125rem; font-weight: 275; color: #959899; margin: 0.5rem 0;}
.about {display: flex; gap: 4rem 3rem;}
footer h4 {font-size: 1.125rem; color: #eeeff1; font-weight: 300;}
footer .detailswrap {display: flex; justify-content: space-between; flex: 0 0 calc(50% - 1.5rem);}
footer summary {color: #eeeff1; font-size: 1.0625rem; font-weight: 275;}
footer summary::marker {content: "";}
footer summary {display: list-item; white-space: nowrap;}

footer a {color: #959899; font-weight: 275;}
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; line-height: 1.75; margin-top: 0.75rem;}
.button-rate {display: inline-block; padding: 0.9375rem 1.5rem; margin-top: 1.5rem; color: #eeeff1; background-color: #191f22; font-size: 0.9375rem; font-weight: 300; border: 2px solid #eeeff1; border-radius: 0.25rem;}
.button-rate:hover {background-color: #313233; text-decoration: none; border-color: #88898c}
.legal {display: flex; gap: 1rem; font-size: 0.9375rem; margin-top: 4rem;}
.top::before {content: "\f182"; font-size: 3.25rem; color: #eeeff1; font-variation-settings: 'FILL' 0, 'wght' 150; }
.top:hover::before {text-decoration: none; color: #fff; font-variation-settings: 'FILL' 1;}

.swiper {width: 100%; height: 100%; padding: 2.875rem 0 2rem 0; margin: 1rem 0;}
.swiper .varianten {position: absolute; top: 2px;}
.swiper .varianten p {margin: 0;}
.swiper-btn-prev,
.swiper-btn-next {position: absolute; top: 0px; z-index: 10; cursor: pointer; color: #191f22; display: flex; align-items: center; justify-content: center; transition: opacity 0.3s ease;background-color: #fff; border-radius: 50%; padding: 2px;}
.swiper-btn-prev:hover,
.swiper-btn-next:hover {background-color: #dbdbde;}
.swiper-btn-prev {right: 32px;}
.swiper-btn-next {right: 0;}
.swiper .material-symbols-outlined {font-size: 1.75rem; font-variation-settings: 'FILL' 0, 'wght' 250;}

.swiper-lock .swiper-btn-prev,
.swiper-lock .swiper-btn-next {
  display: none !important;
}

.swiper-btn-prev.swiper-button-disabled,
.swiper-btn-next.swiper-button-disabled {
  display: inline-flex;       /* Stellt sicher, dass sie sichtbar bleiben */
  opacity: 0.35;             /* Macht den Button halbtransparent */
  pointer-events: none;      /* Verhindert Klicks */
  cursor: not-allowed;
}
.shortdata {background-color: #f1f1f4; border: 1px solid #cacacf;border-radius: 0.625rem; padding: 1rem; margin: 0.3125rem 0.3125rem 0.5rem 0.3125rem; box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.2); display: flex; flex-direction: column; justify-content: space-between}
.shortdata h3 {margin: 0 0 0.75rem 0; font-weight: 475;}
.shortdata h3 span {padding-left: 0.375rem; font-size: 0.5625em; color: #4a5965;}
.shortdata dl {margin-top: .125rem;}
.shortdata dl div {background-color: #e3e3e8; border-radius: 0.5rem; padding: 0.75rem; margin-top: 0.625rem; display: flex; flex-direction: column-reverse; gap: 0.3125rem; font-weight: 400;}
.shortdata dt {font-size: 0.8125rem; color: #4a5965; }
.shortdata dd {font-size: 1.1875rem; margin: 0; font-weight: 475;}

#imggallery {display: flex; flex-wrap: wrap; gap: 1rem; margin: 0.75rem 0 1rem 0;}
#imggallery div {flex: 0 0 calc((100% - 4 * 1rem) / 5);}

.imggallery {display: flex; flex-wrap: wrap; gap: 1rem; margin: 0.75rem 0 1rem 0;}
.imggallery figure {flex: 0 0 calc((100% - 4 * 1rem) / 5);}


.swiper-info .swiper-slide {background-color: #eee; height: auto; display: flex; flex-direction: column; border-radius: 0.625rem;}
.swiper-info .swiper-slide img {border-radius: 0.625rem 0.625rem 0 0; }
.swiper-info .swiper-slide div {padding: 1rem; }
.swiper-info .swiper-slide p {margin: 0.75rem 0; }

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

@media screen and (max-width: 1580px) {

	#Bewertung {margin: 2rem 0;}	
	.resumee {margin: 3rem 0;}
	.content figure {margin: 2rem 0rem;}
}
@media screen and (max-width: 1470px) {
	.reviewscards a {flex: calc(50% - ((2rem) / 2)) 0 0;}
}
@media screen and (max-width: 1366px) {
	.contentlayout aside {flex: 0 0 225px;}
	.top {display: none;}
}
@media screen and (max-width: 1280px) {
	.cargallery li {flex: calc(33.3333% - 1rem) 0 0;}
	.about {flex-direction: column;}
	footer .detailswrap {flex-direction: column; margin: 0;}
	details {border-block-end: 1px solid #959899; margin-block: 0; padding-block: 1rem;}
	footer summary {cursor: pointer;}
	summary {
		position: relative;
		&::before,
		  &::after {
			content: "";
			border-block-start: 2px solid #959899;;
			height: 0;
			width: 1rem;

			/* Positions the lines */
			inset-block-start: 50%;
			inset-inline-end: 0;

			/* Anchor the shape to the summary */
			position: absolute;
			position-anchor: --summary;
			position-area: top end;
		  }
		  &::after {transform: rotate(90deg); transform-origin: 50%;}
		}
	details[open] summary::after {transform: rotate(0deg);}
	.reviewimg {margin: 0 -1.5rem 3rem -1.5rem; background-color: #eeeff1; border-radius: 0;}
	.reviewimg img {border-radius: 0;}
	
}

@media screen and (max-width: 1180px) {
	.teaser .brands li {flex: calc(25% - ((1rem * 3) / 4)) 0 0;}
	
	.contentlayout {flex-wrap: wrap; }
	.contentlayout aside {flex: 1 1 100%;  justify-content: flex-start; position: inherit; margin: 1rem 0;}
	.filterbrand li {flex: 0 0 60px;}
	.filterbrand {justify-content: flex-start;}
	
	.brands li {flex: calc(20% - ((1.25rem * 4) / 5)) 0 0;}
	
	.teaserbestseller {flex-wrap: wrap;}
	.teaserbestseller aside {flex: 0 0 100%; text-align: center;}
	.teaserbestseller aside h2 {text-align: center;}
	
	.imageheader {flex-wrap: wrap-reverse;}
	.imageheader figure {flex: 100%; margin: 0 -1.5rem;}
	.imageheader img { border-radius: 0}
	.imageheader aside {max-width: 720px; margin-top: 1rem;}
	.imageheader h1 {text-align: center; margin: 0 auto;}
	.imageheader p {text-align: center; font-size: 1.25rem;}
	
}

@media screen and (max-width: 1024px) {
	.cargallery {gap: 1rem 0.75rem;}
	.cargallery li {flex: calc(50% - 0.375rem) 0 0;}
	#bewertungen .shortreview-wrap .shortreview {flex: 1 1 100%; padding: 2rem 0; border-bottom: 1px solid #ccc;}
	#bewertungen .shortreview-wrap .shortreview:first-child {padding-top: 0;}
	#bewertungen .shortreview-wrap .shortreview:last-child {padding-bottom: 0; border-bottom: none}
	#Bewertung {margin: 2rem -1.5rem 2rem -1.5rem; border-radius: 0}
	
	.reviews > ul > li {flex: 100% 1 1; max-width: 100%; flex-direction: row;}
	.reviews a {flex-direction: row;}
	.reviews a > figure {flex: 360px 0 0;  }
	.reviews a > figure img {border-radius: 0.625rem 0 0 0.625rem;}
	
	.usercarbox {gap: 3rem;}
	.usercarbox .overallrating {flex: 1 0 260px;}
	
	.reviewimg {display: flex; flex-wrap: wrap; margin: 0 0 3rem 0; background-color: #fff; border-bottom: 1px solid #959899;}
	.reviewimg figure {flex: 1 1 100%; margin: 0 -1.5rem;}
	.reviewimg .header {flex: 1 1 100%; gap: 1.5rem; padding: 2rem 0 2.5rem 0;}
	
	.infobox {margin: 2.5rem 1.5rem; border-radius: 0.625rem;}
	.darkbox {margin-left: 1.5rem; margin-right: 1.5rem;}
	
	.read-more > div {flex-wrap: wrap; gap: 3rem 2rem;}
	.read-more > div a {flex: 0 1 calc(50% - ((2rem) / 2));}
}

@media screen and (max-width: 920px) {
	.brands li {flex: calc(25% - ((1.25rem * 3) / 4)) 0 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%;}

	.ladezeit {flex-wrap: wrap;}
	.ladezeit div {flex: 100% 1 1;}
	.modellsite {background-color: #f1f1f4; border-radius: 0; padding: 0; box-shadow: none; border: none;}
	.output .ladezeit {background-color: #f1f1f4; border-radius: 0.5rem; border: 1px solid #cacacf; margin-bottom: 0; padding: 1rem; box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.2);}
	.modellsite h4 {display: none;}
	
	.rankingbox {flex-direction: column-reverse;}
	.rankingbox > div, .rankingbox > a {flex: auto 1 1; width: 100%;}
	.rankingbox > aside {flex: 100%; width: 100%;}
	.rankingbox figure {flex: 1 1 auto;}
	.signet {flex: 100%; padding: 3rem 0; min-height: 11rem;}
	.columns {columns: 1;}

	.reviewer {margin-top: 0;}
	
	.goto .icon {display: block;}
	
	.rating li {flex: calc(25% - 0.5625rem) 0 0;}
	#imggallery {gap: 0.75rem;}
	#imggallery div {flex: 0 0 calc((100% - 2 * 0.75rem) / 3);}
	#imggallery img {border-radius: 0.375rem;}
	.imggallery {gap: 0.75rem;}
	.imggallery figure {flex: 0 0 calc((100% - 2 * 0.75rem) / 3);}
	.handyscreen {gap: 1rem;}
	.toc ul {margin-left: 0;}
	.teaserbestseller .chartwrapper > div {flex: auto;}
	.imagebox {flex-wrap: wrap;}
}
@media screen and (max-width: 820px) {
	header ul ul {display: none;}
	header .mobile {display: block;}
	.katlink {display: inline-block;}
	.evbrand > div {justify-content: center; width: 100%}
	.ev-wrapper h1 {order: -1;}
	.evbrand {flex-direction: column;}
	.evbrand h2 {display: none;}
	.evbrand > div {padding: 0}
	
	.contentlayout .main {text-align: left;}
	.brands {gap: 1rem;}
	.brands li {flex: calc(33.3333% - ((1rem * 2) / 3)) 0 0;}
	.teaser .brands li {flex: calc(33.33333% - ((1rem * 2) / 3)) 0 0;}
	
	.reviews {max-width: 600px; margin: 0 auto;}
	.reviews a {flex-direction: column;}
	.reviews a > figure {flex: auto 0 0;  }
	.reviews a > figure img {border-radius: 0.625rem 0.625rem 0 0;}
	.usercarbox {flex-wrap: wrap;}
	.usercarbox .overallrating {flex: auto1 1 ;}
	.usercarbox .userev {flex: 100% 1 1;}

	.reviewscards a {flex: 100% 1 1;}
	
	.imageheader h1 {text-align: left; margin: 0.75rem auto 0 0;}
	.imageheader p {text-align: left;}
}

@media screen and (max-width: 760px) {
	.rating li {flex: calc(50% - 0.375rem) 0 0;}
	
	.headerwithbutton { flex-wrap: wrap-reverse; margin-top: -2rem;}
	.headerwithbutton .button {flex: 1 1 100%;}
	
	.goto li {flex: calc(50% - 0.5rem) 0 0;}
	.goto .icon {display: flex; flex-direction: column; gap: 0.25rem;}
	
	.cargallery {margin: 0.5rem auto;}
	.cargallery li > * {box-shadow: none;}
	.cargallery figure {border-radius: 0.375rem;}
	.cargallery img {border-radius: 0.375rem;}
	.cargallery h3 {font-size: 0.9375rem; margin: 0.5rem 0; text-align: left;}
	
	.handyscreen li {display:none;}
	.handyscreen li:first-child {display: block;}
	.handyscreen li:nth-child(2) {display: block;}
	
}
@media screen and (max-width: 620px) {
	.brands {max-width: 480px;}
	.brands li {flex: calc(50% - 0.5rem) 0 0;}
	.cargallery li {flex: 100% 1 1;}
	.gallery > div figure {flex: 1 1 100%;}
}
@media screen and (max-width: 550px) {
	.read-more > div a {flex: 1 1 100%;}
}

@media screen and (max-width: 450px) {
	
	.cardata dl {flex: 0 0 100%;}

}