@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=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter+Tight:ital,wght@0,100..900;1,100..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: 'Noto Sans', sans-serif; font-weight: 550; font-size: 2.5rem; margin: 1.75rem 0 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;}
h2 {font-family: 'Noto Sans', sans-serif; text-align: left; color: #313235; font-weight: 525; font-size: 1.2875rem; line-height: 1.5; letter-spacing: -0.02rem; 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 {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.625; hyphens: auto; margin: 1.375rem 0;}
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;}
.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: 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 h2 {margin-left: auto; margin-right: auto; max-width: 1024px;}
.wrapper-content p {margin-left: auto; margin-right: auto; max-width: 1024px;}
.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);}

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

.stars {white-space: nowrap;}

.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: '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;}
.colored62::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-menu::before {content: "\e5d2"; font-variation-settings: 'wght' 400; font-size: 1.875rem; color: #191f22;}
.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";}
.nowrap {white-space: nowrap}
.icon-dccharge::before {content: "\e56d";}
.icon-plug::before {content: "\f102";}

.logo {display: inline-block; font-size: 1.1875rem; text-transform: uppercase; padding: 0.5rem 0.9375rem; font-family: 'Inter Tight', sans-serif; font-weight: 525; white-space: nowrap; word-spacing: -0.05rem;}
.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%;}

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 {text-decoration: none;}
header ul {display: flex; align-items: center; gap: 1.25rem; font-weight: 525; text-transform: uppercase; font-size: 0.75rem; letter-spacing: 0.075rem;}
header .nav li:first-child a {display: inline-block; white-space: nowrap; position: relative; line-height: 2.75;}
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;}

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


.keyfacts {display: flex; gap: 1rem; max-width: 1024px; margin: 3rem auto; scroll-margin-top: 2rem; font-family: 'Archivo', sans-serif; font-size: 1rem; color: #535457; font-weight: 375; line-height: 1.25; hyphens: auto;}
.keyfacts > div {display: flex; flex: 1 1 auto; background-color: #f3f3f4;  border: 1px solid #BEBEC1; border-radius: 0.625rem;box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.05);}
.keyfacts h3 {font-family: 'Heebo', sans-serif; text-transform: uppercase; writing-mode: sideways-lr; text-align: center; white-space: nowrap; word-spacing: 0.25rem; font-size: 1rem; font-weight: 450; background-color: #191f22; color: #fff; margin: 0; padding: 1.5rem 0.75rem; border-radius: 0.625rem 0 0 0.625rem;}
.keyfacts > div div {display: flex; align-items: center; padding: 0.5rem 1.5rem;}
.keyfacts ul {}
.keyfacts li {margin: 0.5rem 0; display: flex;}
.keyfacts li::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: 'FILL' 0, 'wght' 500, 'GRAD' -25, 'opsz' 48; content: "\e8dc"; display: block; vertical-align: middle; padding-right: 0.75rem;}
.keyfacts .highlights li::before {content: "\e8dc";}
.keyfacts .lowlights li::before {content: "\e8db";}

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

.buttonblue {display: inline-block; color: #fff; padding: 1.75rem 1.75rem; border-radius: 0.25rem; background-color: #006583; font-size: 0.9375rem;}

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

.reviewscards {margin: 4rem auto; display: flex; flex-wrap: wrap; gap: 2rem;}
.reviewscards a {flex: calc(25% - ((2rem * 3) / 4)) 0 0; display: flex; flex-direction: column; justify-content: space-between; gap: 1.25rem; background: #f3f3f4; border: 1px solid #BEBEC1; border-radius: 0.625rem; box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.05); padding: 1.25rem; text-align:  left;}
.reviewscards a:hover {box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2)}
.reviewscards h2 {align-self: flex-start; font-size: 0.875rem; color: #191f22; background-color: #dbdbde; font-weight: 375; margin: 0.25rem 0 -0.375rem 0; padding: 0.125rem 0.5rem; border-radius: 0.375rem;}
.reviewscards a h3 {font-size: 1.375rem; font-weight: 525; line-height: 1.25; margin: 0;}
.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;}
.reviewdetails .stars span {font-size: 1.0625rem; color: #959899;}
.reviewdetails .stars .icon::before {font-variation-settings: 'FILL' 1, 'wght' 800, 'GRAD' -25, 'opsz' 48; }
.reviewdetails .stars .fill {color: #191f22;}
.reviewdetails .stars .colored62::before {background: linear-gradient(to right, #191f22 62%, #959899 62%); -webkit-background-clip: text; -webkit-text-fill-color: transparent;}
.reviewdetails .stars .colored35::before {background: linear-gradient(to right, #191f22 35%, #959899 35%); -webkit-background-clip: text; -webkit-text-fill-color: transparent;}
.reviewdetails .stars .colored50::before {background: linear-gradient(to right, #191f22 50%, #959899 50%); -webkit-background-clip: text; -webkit-text-fill-color: transparent;}

.carmodel {display: flex; justify-content: space-between; align-items: center;}
.carmodel .icon-photo {font-weight: 575; font-size: 0.9375rem; color: #535457;}
.carmodel .icon-photo::before {content: "\e412"; font-variation-settings: 'FILL' 1, 'wght' 600; color: #959899; padding-right: 0.25rem;}
.carfacts {display: flex; flex-wrap: wrap; align-items: center; 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; background-color: #eeeff1; border-radius: 0.625rem; max-width: 1024px; margin: 3rem auto;}
.goto > div {flex: 50% 0 0; padding: 5rem 1.5rem 1.5rem 1.5rem; text-align: left;}
.goto ul {display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.5rem;}
.goto ul li {flex: calc(50% - 0.375rem) 0 0; font-size: 1rem;}
.goto a {display: block; color: #111; background-color: #d0d0d6; color: #191f22; border-radius: 0.5rem; padding: 0.875rem 1.25rem;}
.goto a:hover {background-color: #e7e7eb;}
.goto .icon::before {padding-right: 0.375rem; font-variation-settings: 'wght' 250; font-size: 1.5rem; color: #191f22;}
.goto h3 {margin: 0; font-size: 1.25rem; font-weight: 400;}
.goto .imagewrap {background-size: cover; background-position: center; border-radius: 0 0.625rem 0.625rem 0;}

#Bewertung {max-width: 1160px; font-family: 'Archivo', sans-serif; font-weight: 500; font-size: 1.125rem; background-color: #eeeff1; border-radius: 0.625rem; padding: 2.5rem 67px; margin: 3rem auto; color:#535457; scroll-margin-top: 2rem;}
#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: 2.125rem auto 0 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: 1160px; margin: 0 auto;}
.data h2 {color: #CBCCCD; font-weight: 400; font-size: 1.3175rem; text-align: left}
.data 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(25% - 1.59375rem); 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.25rem; font-weight: 475; color: #fff;}

.ladezeit {display: flex; justify-content: space-between; gap: 0 1rem; margin-bottom: 1rem;}
.ladezeit div {flex: 1;}
.ladezeit ul {display: flex; flex-direction: column; gap: 1rem; margin-bottom: 1.5rem; 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: 1rem; border-radius: 0.625rem;}
.ladezeit h3 {color: #fff; font-size: 1.125rem; font-weight: 350; margin: 0 0 0.3175rem 0;}
.ladezeit strong {color: #fff; font-size: 1.25rem; white-space: nowrap;}
.ladezeit .icon::before {padding-right: 0.375rem; font-size: 1.75rem;}


.quelle {text-align: left; font-size: 0.9375rem; color: #959899;}

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

.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; 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 0 1rem 0; font-size: 1.375rem; font-weight: 550;}
.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: #191f22; font-weight: 375; margin-bottom: 1rem;}
.toplights li {background-color: #dbdbde; font-weight: 375; padding: 0.125rem 0.5rem; border-radius: 0.375rem; white-space: nowrap;}
.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; padding: 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;}
.initialen {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;}

.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 > li:last-child {border-bottom: none;}

.resumee {max-width: 1160px; margin: 3rem auto; background-color: #eeeff1; padding: 2.5rem 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-bottom: 2.25rem;}
.driver a {padding: 0.6875rem 1.125rem; color: #fff; background-color: #191f22; font-family: 'Heebo', sans-serif; font-size:  0.8125rem; 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: 2rem 0 0 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.5rem 1.125rem; color: #535457; text-decoration: none; background-color: #fff; 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);}

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

.usercarbox {display: flex; flex-direction: row-reverse; justify-content: center; align-items: center; gap: 3rem 5rem; font-family: 'Archivo', sans-serif; margin: 2rem 0 4rem 0; padding: 0 1.5rem;}
.usercarbox a {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 > div {flex: 0 1 600px;}
.usercarbox > div h1 {font-size: 2.875rem; margin-top: 0;}
.usercarbox > div ul {font-size: 1.0625rem; font-weight: 350;}
.usercarbox > div ul li {display: flex; flex-wrap: wrap; align-items: center; padding: 0.0625rem 0; line-height: 1.5;}
.usercarbox > div ul li a {margin-left: 0.375rem; display: inline-block; text-decoration: underline; text-underline-offset: 0.2rem; text-decoration-thickness: 1px;}
.usercarbox ul .icon::before {padding-right: 0.4375rem; font-variation-settings: 'wght' 300;}
.usercarbox .stars {background-color: #2d3033; padding: 0.25rem 1.5rem; border-radius: 0.5rem;}
.usercarbox .stars span {font-size: 1.3125rem; color: #5e6063;}
.usercarbox .stars .icon::before {font-variation-settings: 'FILL' 1, 'wght' 300, 'GRAD' -25, 'opsz' 48; }
.usercarbox .stars .fill  {color: #fafafb;}
.usercarbox .stars .colored62::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;}


footer {background-color: #191F22; padding: 5rem 1.5rem;}
.footer-wrap {max-width: 1470px; margin: 0 auto;}
footer p {font-size: 1.125rem; font-weight: 275; color: #959899; margin: 0.5rem 0;}.about {display: flex; gap: 4rem 0;}
footer h4 {font-size: 1.125rem; color: #eeeff1; font-weight: 300;}
footer .detailswrap {display: flex; flex: 40% 0 0; margin-left: 4rem;}
footer details {flex: 1;}
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-weight: 150;}
.top:hover::before {text-decoration: none; color: #fff; font-variation-settings: 'FILL' 1;}


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

@media screen and (max-width: 1580px) {
	.reviewscards a {flex: calc(33.33333% - ((2rem * 2) / 3)) 0 0;}
}
@media screen and (max-width: 1470px) {
	
}
@media screen and (max-width: 1366px) {

}
@media screen and (max-width: 1280px) {
	
	.reviewscards a {flex: calc(50% - ((2rem) / 2)) 0 0;}
}

@media screen and (max-width: 1180px) {
	.teaser .brands li {flex: calc(25% - ((1rem * 3) / 4)) 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;}
	.top {display: none;}
	
	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);}
	
	#Bewertung {padding: 2.5rem 1.5rem; margin: 3rem -1.5rem 3rem -1.5rem; border-radius: 0}	
	
	
}

@media screen and (max-width: 1024px) {
	
	.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;}
	.goto > div {padding-top: 3rem;}
	.goto .icon {display: flex; flex-direction: column; gap: 0.5rem;}
	
	.usercarbox {gap: 3rem;}
	.usercarbox a {flex: 260px 0 0;}
	.cardata dl {flex: 0 0 calc(50% - .375rem);}
}

@media screen and (max-width: 920px) {
	
	.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%;}

	.keyfacts > div {flex-direction: column; gap: 0rem; margin: 0 auto;}
	.keyfacts h3 {writing-mode: horizontal-tb; padding: 1rem; border-radius: 0.625rem 0.625rem 0 0;}
	.ladezeit { flex-wrap: wrap;}
	.ladezeit div {flex: 100% 1 1;}
	.columns {columns: 1;}

	.reviewer {margin-top: 0;}
	.goto {flex-direction: column-reverse;}
	.goto > div {flex: 100% 0 0;}
	.goto .imagewrap {flex: 500px; border-radius: 0.625rem 0.625rem 0 0;}
	.goto .icon {display: block;}
	.goto ul li {flex: calc(33.3333% - 0.5rem) 0 0;}
	
	
	.rating li {flex: calc(25% - 0.5625rem) 0 0;}
}
@media screen and (max-width: 820px) {
	header ul ul {display: none;}
	header .mobile {display: block;}
	
	.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 a {flex: 1 1 auto;}
	.usercarbox > div {flex: auto 1 1;}

	.keyfacts {flex-wrap: wrap; gap: 2.5rem;}
	.keyfacts > div {flex: 0 1 500px; }	
	.reviewscards a {flex: 100% 1 1;}
}

@media screen and (max-width: 760px) {
	.rating li {flex: calc(50% - 0.375rem) 0 0;}
	
	.goto {margin-left: -1.5rem; margin-right: -1.5rem; border-radius: 0;}
	.goto > div {padding: 3rem 1.5rem 1.75rem 1.5rem;}
	.goto ul li {flex: calc(50% - 0.5rem) 0 0;}
	.goto .imagewrap {flex: 400px; border-radius: 0;}
	.goto .icon {display: flex; flex-direction: column; gap: 0.25rem;}
}
@media screen and (max-width: 620px) {
	.gallery > div figure {flex: 1 1 100%;}
}

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

}