@charset "UTF-8";
html, body {
  background: #FFF;
  color: #333;
  font-family: "Public Sans", Arial, sans-serif;
  font-size: 16px;
  height: 100%;
  margin: 0;
  min-height: 100%;
  padding: 0;
  position: relative;
}

ol, ul {
  list-style: none;
}

.x {
  display: none !important;
}

select {
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

button, label {
  cursor: pointer;
}

a {
  color: inherit;
  text-decoration: none;
}

/* Desktop -------------------------------------------------------------------------------------- */
@media screen and (min-width: 720px) {
  button[data-type=nav] {
    display: none;
  }
  #grid {
    display: flex;
    background: blue;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    gap: 30px;
    justify-content: center;
    opacity: 0.3;
    z-index: 999;
  }
  #grid div {
    background: pink;
    height: 5000px;
    width: 80px;
  }
  .skip-link-top {
    background: #055063;
    color: #FFF;
    display: block;
    font-weight: 500;
    height: 0;
    overflow: hidden;
    text-align: center;
    text-decoration: underline;
    width: 0;
    z-index: 900;
  }
  .skip-link-top:focus-visible {
    height: auto;
    padding: 15px;
    outline: none;
    overflow: visible;
    position: absolute;
    width: 100%;
  }
  header .top {
    background: #E91B2D;
    display: flex;
    font-size: 14px;
    justify-content: center;
    padding: 0 30px 0 20px;
  }
  header .top .wrap {
    align-items: center;
    display: flex;
    width: 100%;
    max-width: 1300px;
    height: 70px;
  }
  header .top .logo a {
    border-radius: 4px;
    display: block;
    padding: 4px 10px;
    transition: all 0.15s ease-in-out;
  }
  header .top .logo a svg {
    display: block;
  }
  header .top .logo a:focus-visible {
    background: #fff;
    outline: none;
  }
  header .top .logo a:focus-visible svg path {
    fill: #333;
  }
  header .top .search {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    padding: 0 30px;
  }
  header .top .search form {
    display: flex;
    max-width: 500px;
    position: relative;
    justify-content: center;
    width: 100%;
  }
  header .top .search input {
    background: #FFF;
    border: 2px solid #FFF;
    border-radius: 50px;
    box-sizing: border-box;
    font-size: 14px;
    height: 40px;
    line-height: 40px;
    max-width: 500px;
    text-align: center;
    transition: all 0.15s ease-in-out;
    width: 100%;
  }
  header .top .search input:focus-visible {
    border-color: #333;
    outline: none;
  }
  header .top .search button {
    align-items: center;
    background: transparent;
    border: none;
    border-radius: 50px;
    display: flex;
    height: 36px;
    justify-content: center;
    left: 2px;
    position: absolute;
    top: 2px;
    width: 36px;
  }
  header .top .search button:focus-visible {
    background: #333;
    border: none;
    outline: none;
  }
  header .top .search button:focus-visible path {
    color: #FFF;
  }
  header .top .search button svg {
    display: block;
    width: 20px;
  }
  header .top .search button svg path {
    color: #333;
  }
  header .top .meta {
    align-items: center;
    display: flex;
    gap: 10px;
  }
  header .top .meta a {
    border-bottom: 2px solid transparent;
    border-radius: 20px;
    color: #FFF;
    padding: 10px 15px 8px 15px;
  }
  header .top .meta a:hover {
    border-color: rgb(244.22, 143.28, 152.1);
    border-radius: 0;
    margin: 6px 15px;
    padding: 4px 0 2px 0;
  }
  header .top .meta a:focus-visible {
    background: #FFF;
    border-radius: 20px;
    color: #333;
    margin: 0;
    outline: none;
    padding: 10px 15px;
  }
  header .top .meta .signup {
    background: rgb(120.84, 11.66, 21.2);
    border: none;
    color: #FFF;
    padding: 10px 15px;
    transition: all 0.15s ease-in-out;
  }
  header .top .meta .signup:hover, header .top .meta .signup:focus-visible {
    background: #FFF;
    border-radius: 20px;
    color: #333;
    margin: 0;
    padding: 10px 15px;
  }
  header .nav {
    background: #F1F6F8;
    display: flex;
    justify-content: center;
    padding: 0 40px;
  }
  header .nav .wrap {
    display: flex;
    width: 100%;
    max-width: 1290px;
    justify-content: center;
  }
  header .nav .wrap ul {
    display: flex;
    padding: 6px 0;
    gap: 18px;
    flex-wrap: wrap;
    justify-content: center;
    margin: 0;
  }
  header .nav .wrap ul li {
    display: flex;
  }
  header .nav .wrap ul li svg {
    display: block;
  }
  header .nav .wrap ul li a {
    align-items: center;
    color: #333;
    display: flex;
    gap: 5px;
    padding: 8px 13px 6px 13px;
  }
  header .nav .wrap ul li a span {
    border-bottom: 2px solid transparent;
  }
  header .nav .wrap ul li a.a, header .nav .wrap ul li a:hover {
    margin: 6px 13px;
    padding: 2px 0 0 0;
  }
  header .nav .wrap ul li a.a span, header .nav .wrap ul li a:hover span {
    color: inherit;
    border-color: #E91B2D;
  }
  header .nav .wrap ul li a:focus-visible {
    background: #333;
    border-radius: 50px;
    color: #FFF;
    outline: none;
    transition: all 0.15s ease-in-out;
  }
  main {
    display: flex;
    justify-content: center;
    margin: 30px 0 0 0;
  }
  main .wrap {
    height: 100%;
    padding: 0 30px;
    width: 1290px;
  }
  main .hl {
    display: flex;
    font-size: 18px;
    font-weight: 700;
    margin: 0;
    padding: 5px 0 0 0;
    position: relative;
  }
  main .hl:after {
    background: #e91b2d;
    content: "";
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 30px;
    height: 4px;
  }
  main article .left,
  main article .right {
    width: 190px;
  }
  main article .left .sticky,
  main article .right .sticky {
    padding: 20px 0;
    position: sticky; /* das eltern-element wird zum sticky container */
    top: 0;
  }
  main article .left ol {
    font-size: 14px;
    list-style: decimal;
    margin: 0;
    padding: 10px 20px 0 0;
  }
  main article .left ol li {
    line-height: 20px;
    list-style-position: inside;
    padding: 10px 0 0 0;
  }
  main article .left ol li a:hover {
    border-bottom: 2px solid #DDD;
  }
  main article .left ol .active {
    color: #e91b2d;
    font-weight: 700;
  }
  main article .left ol .active a:hover {
    border-bottom: 2px solid rgb(250.952, 213.048, 216.36);
  }
  main article .right .premium {
    align-items: center;
    background: #F1F6F8;
    display: flex;
    flex-direction: column;
    margin: 0 0 20px 0;
    padding: 20px 30px 30px 30px;
  }
  main article .right .premium span {
    display: block;
    font-size: 60px;
    font-weight: 900;
  }
  main article .right .premium em {
    display: block;
    font-size: 16px;
    font-style: normal;
    padding: 15px 0 25px 0;
    text-align: center;
  }
  main article .right .premium a {
    background: #055063;
    color: #FFF;
    display: flex;
    font-size: 14px;
    border-radius: 50px;
    align-items: center;
    padding: 0 20px;
    height: 40px;
  }
  main article .right .more {
    padding: 0 10px 25px 30px;
  }
  main article .right .more ul {
    margin: 0;
    list-style: disc;
    padding: 5px 0 0 0;
  }
  main article .right .more ul li {
    margin: 10px 0 0 15px;
    padding: 0;
  }
  main article .right .more a {
    font-size: 14px;
  }
  main article .center {
    flex: 1;
  }
  main article .head {
    display: flex;
    padding: 20px 0 0 0;
  }
  main article .head .dachzeile {
    color: #e91b2d;
    display: block;
    font-size: 20px;
    font-weight: 700;
    padding: 5px 30px 0 30px;
  }
  main article .head .headline {
    color: #333;
    font-size: 48px;
    font-weight: 900;
    line-height: 48px;
    margin: 0;
    padding: 5px 30px 5px 30px;
  }
  main article .head .vorspann p {
    margin: 0;
    color: #333;
    font-size: 20px;
    font-weight: 500;
    line-height: 28px;
    padding: 15px 30px 15px 30px;
  }
  main article .head .date {
    color: #999;
    display: flex;
    font-size: 14px;
    padding: 10px 30px 10px 30px;
  }
  main article .head .date span a {
    border-bottom: 1px solid #CCC;
  }
  main article .head .date span a:hover {
    border-color: #666;
    color: #333;
  }
  main article .head .date span a:focus-visible {
    background: #EEE;
    border-color: #999;
    color: #333;
    outline: none;
  }
  main article .head .date span:before {
    content: "•";
    display: inline-block;
    padding: 0 5px;
  }
  main article .head .date span:first-child:before {
    content: "";
    padding: 0;
  }
  main article .head .date .author:after {
    content: ", Daniel Smolcic";
  }
  main article .head .date .author.dsm:after {
    content: "Daniel Smolcic";
  }
  main article .body {
    display: flex;
  }
  main article .body .hero {
    display: flex;
    padding: 20px 0 5px 190px;
  }
  main article .body .hero.isolated {
    padding-left: 220px;
  }
  main article .body .hero.isolated img {
    margin: 0 auto;
    max-height: 400px;
    width: auto;
  }
  main article .body .hero img {
    display: block;
    width: 100%;
    max-width: 100%;
  }
  main article .body .hero dl {
    margin: 0;
    position: relative;
    width: 100%;
  }
  main article .body .hero dl dt a {
    display: block;
    position: relative;
    z-index: 100;
  }
  main article .body .hero dl dt a:before {
    background: #e91b2d url("https://supertest.de/img_2025/gallery-2.svg") no-repeat center left 15px/22px 22px;
    border-radius: 50px;
    top: 30px;
    box-sizing: border-box;
    color: #FFF;
    content: "Alle Bilder anzeigen";
    font-weight: 500;
    height: 40px;
    line-height: 40px;
    padding: 0 20px 0 45px;
    position: absolute;
    right: 30px;
  }
  main article .body .hero dl dt a:hover:before, main article .body .hero dl dt a:focus-visible:before {
    background-color: #333;
  }
  main article .body .hero dl dd {
    color: #666;
    font-size: 14px;
    line-height: 18px;
    margin: 0;
    padding: 4px 0;
  }
  main article .body .hero dl dd:after {
    background: #FFF;
    bottom: 8px;
    content: attr(data-copyright);
    color: #999;
    font-size: 11px;
    line-height: 1;
    opacity: 0.65;
    padding: 3px 5px;
    position: absolute;
    right: 0;
  }
  main article .body .text {
    display: flex;
  }
  main article .body .article {
    flex: 1;
    padding: 0 30px;
  }
  main article .body .article .hl {
    padding: 25px 0 0 0;
  }
  main article .body .article h3 {
    font-size: 18px;
    font-weight: 700;
    margin: 0;
    padding: 25px 0 0 0;
  }
  main article .body .article p {
    font-size: 16px;
    line-height: 24px;
    padding: 15px 0 5px 0;
    margin: 0;
  }
  main article .body .article p a {
    border-bottom: 2px solid #E91B2D;
    transition: all 0.15s ease-in-out;
    margin: 0 1px;
  }
  main article .body .article p a:hover, main article .body .article p a:focus-visible {
    color: rgb(51.072, 4.928, 8.96);
    border-color: #e91b2d;
    outline: none;
  }
  main article .body .article p a:focus-visible {
    background: #DDD;
    border-color: #CCC;
  }
  main article .body .article ul {
    list-style: disc;
    margin: 0 0 0 20px;
    padding: 10px 0;
  }
  main article .body .article ul ul {
    padding: 0 0 10px 0;
  }
  main article .body .article ul li {
    line-height: 24px;
    padding: 5px 0 0 0;
  }
  main article .body .article .fazittext {
    font-weight: 500;
  }
  main article .body .article .inline-img {
    padding: 10px 0 0 0;
  }
  main article .body .article .inline-img.isolated dt {
    padding-bottom: 10px;
  }
  main article .body .article .inline-img.isolated img {
    margin: auto;
    max-height: 500px;
  }
  main article .body .article .inline-img dt {
    position: relative;
  }
  main article .body .article .inline-img dt:after {
    content: attr(data-copyright);
    color: #666;
    opacity: 0.65;
    display: block;
    font-size: 11px;
    position: absolute;
    transform: rotate(270deg);
    transform-origin: 100% 0;
    top: 0;
    right: 0;
  }
  main article .body .article .inline-img img {
    display: block;
    max-width: 100%;
  }
  main article .body .article .inline-img dd {
    background: #F1F6F8;
    font-size: 16px;
    line-height: 22px;
    margin: 0;
    padding: 10px 15px 12px 15px;
  }
  main article .body .article .rating {
    display: flex;
    gap: 30px;
    box-sizing: border-box;
    padding: 15px 0 5px 0;
    width: 100%;
  }
  main article .body .article .rating .pro-con {
    background: #F1F6F8;
    display: flex;
    flex: 1;
    gap: 30px;
    list-style: none;
    margin: 0;
    padding: 0 0 15px 0;
  }
  main article .body .article .rating .pro-con span {
    align-items: center;
    display: flex;
    font-size: 18px;
    font-weight: 700;
    padding: 22px 0 10px 22px;
  }
  main article .body .article .rating .pro-con span svg {
    margin: 0 10px 0 0;
  }
  main article .body .article .rating .pro-con li {
    padding: 0;
  }
  main article .body .article .rating .pro-con li.pro,
  main article .body .article .rating .pro-con li.con {
    width: 50%;
  }
  main article .body .article .rating .pro-con li.pro ul,
  main article .body .article .rating .pro-con li.con ul {
    list-style: none;
    margin: 0 0 0 1px;
    padding: 0 20px 0 27px;
  }
  main article .body .article .rating .pro-con li.pro ul li,
  main article .body .article .rating .pro-con li.con ul li {
    background: url("https://supertest.de/img_2025/plus.svg") no-repeat left center/20px 20px;
    font-size: 16px;
    line-height: 18px;
    padding: 5px 0 5px 37px;
  }
  main article .body .article .rating .pro-con li.pro.con ul li,
  main article .body .article .rating .pro-con li.con.con ul li {
    background-image: url("https://supertest.de/img_2025/minus.svg");
  }
  main article .body .article .rating .seal {
    width: 190px;
  }
  main article .body .article .rating .seal div {
    background: #FFF;
    display: flex;
    flex-direction: column;
    height: 100%;
  }
  main article .body .article .rating .seal div img {
    background: #232E75;
    display: block;
    padding: 13px 15px 10px 15px;
  }
  main article .body .article .rating .seal div span {
    display: flex;
    flex-direction: column;
    border-left: 1px solid #999;
    border-right: 1px solid #999;
    flex: 1;
    align-items: center;
    justify-content: center;
  }
  main article .body .article .rating .seal div span em {
    display: block;
    font-size: 24px;
    font-style: normal;
    font-weight: 700;
    padding: 12px 0 9px 0;
    text-align: center;
  }
  main article .body .article .rating .seal div span b {
    display: block;
    font-size: 14px;
    font-weight: 400;
    text-align: center;
  }
  main article .body .article .rating .seal div span i {
    color: #48BBE0;
    display: block;
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    padding: 3px 10px 13px 10px;
    text-align: center;
  }
  main article .body .article .rating .seal div strong {
    background: #EAEAEA;
    border: 1px solid #999;
    border-top: none;
    color: #666;
    display: block;
    font-size: 11px;
    font-weight: 400;
    padding: 5px 0;
    text-align: center;
  }
  main article .body .article .tabelle {
    padding: 25px 0 10px 0;
  }
  main article .body .article .tabelle table {
    width: 100%;
  }
  main article .body .article .tabelle tr {
    display: flex;
    width: 100%;
  }
  main article .body .article .tabelle tr.criteria th, main article .body .article .tabelle tr.criteria td {
    background: #FFFAB9;
    color: #333;
    font-weight: 700;
  }
  main article .body .article .tabelle tr.overall th, main article .body .article .tabelle tr.overall td {
    background: #FCEC80;
    color: #333;
    font-weight: 700;
  }
  main article .body .article .tabelle tr.overall th {
    background: #FCEC80 url("https://supertest.de/img_2025/logo3.svg") no-repeat left 20px center/120px 20px;
    padding-left: 150px;
  }
  main article .body .article .tabelle tr.odd th, main article .body .article .tabelle tr.odd td {
    background: #F8F8F8;
  }
  main article .body .article .tabelle th, main article .body .article .tabelle td {
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    color: #666;
    font-weight: 400;
    padding: 10px 20px;
    text-align: left;
  }
  main article .body .article .tabelle th {
    flex: 1;
    display: flex;
  }
  main article .body .article .tabelle th div {
    flex: 1;
  }
  main article .body .article .tabelle th div:after {
    content: attr(data-weight);
    float: right;
    font-weight: 400;
  }
  main article .body .article .tabelle td {
    border-left: 1px solid rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    width: 220px;
    box-sizing: border-box;
  }
  main article .body .article .tabelle td i, main article .body .article .tabelle td span {
    background: url("https://supertest.de/img_2025/good.svg") no-repeat center center/16px 16px;
    width: 16px;
    height: 16px;
  }
  main article .body .article .tabelle td i {
    background-image: url("https://supertest.de/img_2025/slash.svg");
  }
  main article .body .article .tabelle td .average {
    background-image: url("https://supertest.de/img_2025/average.svg");
    background-size: 14px 14px;
  }
  main article .body .article .tabelle td .bad {
    background-image: url("https://supertest.de/img_2025/bad.svg");
  }
  main article .body .article .klima {
    padding: 15px 0 0 0;
    position: relative;
    z-index: 10;
  }
  main article .body .article .klima .t1 {
    background: #6CF;
  }
  main article .body .article .klima .t2 {
    background: #8DF;
  }
  main article .body .article .klima .t3 {
    background: #AEF;
  }
  main article .body .article .klima .t4 {
    background: #CFF;
  }
  main article .body .article .klima .t5 {
    background: #FF9;
  }
  main article .body .article .klima .t6 {
    background: #FC6;
  }
  main article .body .article .klima .t7 {
    background: #FB5;
  }
  main article .body .article .klima .t8 {
    background: #FA4;
  }
  main article .body .article .klima .t9 {
    background: #F93;
  }
  main article .body .article .klima .t10 {
    background: #F82;
  }
  main article .body .article .klima .t11 {
    background: #F71;
  }
  main article .body .article .klima .t12 {
    background: #F60;
  }
  main article .body .article .klima .s1 {
    background: #FFC;
  }
  main article .body .article .klima .s2 {
    background: #FFFAB9;
  }
  main article .body .article .klima .s3 {
    background: #FFF6A7;
  }
  main article .body .article .klima .s4 {
    background: #FFF194;
  }
  main article .body .article .klima .s5 {
    background: #FFEC82;
  }
  main article .body .article .klima .s6 {
    background: #FFE86F;
  }
  main article .body .article .klima .s7 {
    background: #FFE35D;
  }
  main article .body .article .klima .s8 {
    background: #FFDF4A;
  }
  main article .body .article .klima .s9 {
    background: #FFDA38;
  }
  main article .body .article .klima .s10 {
    background: #FFD525;
  }
  main article .body .article .klima .s11 {
    background: #FFD113;
  }
  main article .body .article .klima .s12 {
    background: #FC0;
  }
  main article .body .article .klima .w1 {
    background: #CFF;
  }
  main article .body .article .klima .w2 {
    background: #B9F6FA;
  }
  main article .body .article .klima .w3 {
    background: #A7ECF6;
  }
  main article .body .article .klima .w4 {
    background: #94E3F1;
  }
  main article .body .article .klima .w5 {
    background: #82DAEC;
  }
  main article .body .article .klima .w6 {
    background: #6FD1E8;
  }
  main article .body .article .klima .w7 {
    background: #5DC7E3;
    color: #FFF;
  }
  main article .body .article .klima .w8 {
    background: #4ABEDF;
    color: #FFF;
  }
  main article .body .article .klima .w9 {
    background: #38B5DA;
    color: #FFF;
  }
  main article .body .article .klima .w10 {
    background: #25ACD5;
    color: #FFF;
  }
  main article .body .article .klima .w11 {
    background: #13A2D1;
    color: #FFF;
  }
  main article .body .article .klima .w12 {
    background: #09C;
    color: #FFF;
  }
  main article .body .article .klima .r1 {
    background: #9CF;
  }
  main article .body .article .klima .r2 {
    background: #8BBEF6;
  }
  main article .body .article .klima .r3 {
    background: #7DB0EC;
  }
  main article .body .article .klima .r4 {
    background: #6FA2E3;
  }
  main article .body .article .klima .r5 {
    background: #6194DA;
    color: #FFF;
  }
  main article .body .article .klima .r6 {
    background: #5386D1;
    color: #FFF;
  }
  main article .body .article .klima .r7 {
    background: #4679C7;
    color: #FFF;
  }
  main article .body .article .klima .r8 {
    background: #386BBE;
    color: #FFF;
  }
  main article .body .article .klima .r9 {
    background: #2A5DB5;
    color: #FFF;
  }
  main article .body .article .klima .r10 {
    background: #1C4FAC;
    color: #FFF;
  }
  main article .body .article .klima .r11 {
    background: #0E41A2;
    color: #FFF;
  }
  main article .body .article .klima .r12 {
    background: #039;
    color: #FFF;
  }
  main article .body .article .klima table {
    display: block;
    font-size: 14px;
    width: 100%;
  }
  main article .body .article .klima table tr {
    display: flex;
    padding: 5px 0;
  }
  main article .body .article .klima table th {
    border-left: 1px solid transparent;
    box-sizing: border-box;
    color: #ccc;
    font-size: 12px;
    font-weight: 400;
    width: 52px;
  }
  main article .body .article .klima table th:first-child {
    order: 13;
    width: auto;
  }
  main article .body .article .klima table th span {
    left: -2000px;
    overflow: hidden;
    position: absolute;
    text-indent: 300px;
    top: 0;
  }
  main article .body .article .klima table th:nth-of-type(2):before {
    content: "Jan";
  }
  main article .body .article .klima table th:nth-of-type(3):before {
    content: "Feb";
  }
  main article .body .article .klima table th:nth-of-type(4):before {
    content: "Mrz";
  }
  main article .body .article .klima table th:nth-of-type(5):before {
    content: "Apr";
  }
  main article .body .article .klima table th:nth-of-type(6):before {
    content: "Mai";
  }
  main article .body .article .klima table th:nth-of-type(7):before {
    content: "Jun";
  }
  main article .body .article .klima table th:nth-of-type(8):before {
    content: "Jul";
  }
  main article .body .article .klima table th:nth-of-type(9):before {
    content: "Aug";
  }
  main article .body .article .klima table th:nth-of-type(10):before {
    content: "Sept";
  }
  main article .body .article .klima table th:nth-of-type(11):before {
    content: "Okt";
  }
  main article .body .article .klima table th:nth-of-type(12):before {
    content: "Nov";
  }
  main article .body .article .klima table th:nth-of-type(13):before {
    content: "Dez";
  }
  main article .body .article .klima table td {
    align-items: center;
    border-left: 1px solid #FFF;
    box-sizing: border-box;
    display: flex;
    height: 40px;
    justify-content: center;
    padding: 0;
    width: 52px;
  }
  main article .body .article .klima table td:first-child {
    justify-content: left;
    order: 13;
    font-weight: 500;
    padding-left: 50px;
    width: 220px;
  }
  main article .body .article .klima table tr td:first-child {
    background: url("https://supertest.de/img_2025/sun.svg") no-repeat left 20px center/20px 20px;
  }
  main article .body .article .klima table tr.night td:first-child {
    background-image: url("https://supertest.de/img_2025/moon.svg");
  }
  main article .body .article .klima table tr.rain td:first-child {
    background-image: url("https://supertest.de/img_2025/rain.svg");
  }
  main article .body .article .klima table tr.sun td:first-child {
    background-image: url("https://supertest.de/img_2025/time.svg");
  }
  main article .body .article .klima table tr.water td:first-child {
    background-image: url("https://supertest.de/img_2025/water.svg");
  }
  main article .body .article .product-box {
    padding: 30px 0 20px 0;
  }
  main article .body .article .product-box .product {
    display: flex;
  }
  main article .body .article .product-box .img {
    display: flex;
    width: 190px;
    align-items: center;
    padding: 15px 0;
    justify-content: center;
  }
  main article .body .article .product-box .img img {
    display: block;
    max-width: 100%;
    max-height: 150px;
  }
  main article .body .article .product-box .cell {
    flex: 1;
    padding: 30px;
  }
  main article .body .article .product-box .cell .name {
    padding: 0;
  }
  main article .body .article .product-box .cell .descr {
    padding: 20px 0 0 0;
    line-height: 24px;
  }
  main article .body .article .product-box .inner {
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    display: flex;
    flex: 1;
  }
  main article .body .article .product-box .price {
    align-items: center;
    background: #e91b2d;
    display: flex;
    justify-content: center;
    flex-direction: column;
    width: 220px;
    padding: 20px;
    position: relative;
    box-sizing: border-box;
  }
  main article .body .article .product-box .price:before {
    background: #e91b2d;
    content: "";
    position: absolute;
    top: -5px;
    right: 0;
    width: 220px;
    height: 6px;
    border-top-right-radius: 5px;
    border-top-left-radius: 5px;
  }
  main article .body .article .product-box .price:after {
    background: #e91b2d;
    content: "";
    position: absolute;
    bottom: -5px;
    right: 0;
    width: 220px;
    height: 6px;
    top: auto;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
  }
  main article .body .article .product-box .price b {
    background: url("https://supertest.de/img_2025/amazon-2.svg") no-repeat center top/60px 19px;
    color: #FFF;
    font-size: 20px;
    font-weight: 700;
    padding: 35px 0 0 0;
  }
  main article .body .article .product-box .price span {
    font-size: 14px;
    color: #FFF;
    text-decoration: line-through;
    opacity: 0.7;
    padding: 5px 0 0 0;
  }
  main article .body .article .product-box .price a {
    background: #FFF;
    background: #000;
    border-radius: 50px;
    color: #FFF;
    font-size: 14px;
    font-weight: 700;
    line-height: 40px;
    height: 40px;
    margin: 20px 0 0 0;
    padding: 0 20px;
    text-align: center;
    transition: all 0.15s ease-in-out;
  }
  main article .body .article .product-box .price a:hover {
    background: #FFF;
    color: #333;
  }
  main article .body .article .product-box .price a:focus-visible {
    background: #FFF;
    color: #333;
    outline: none;
  }
  main article .body .article .product-box .price strong {
    color: #FFF;
    font-size: 14px;
    font-weight: 700;
    font-weight: 400;
    padding: 5px 0 0 0;
    opacity: 0.8;
  }
  main .vergleich .headline {
    color: #333;
    font-size: 36px;
    font-weight: 900;
    padding: 70px 220px 20px 220px;
  }
  main .vergleich .table2 {
    display: flex;
    flex-wrap: wrap;
    margin: 0 0 0 220px;
  }
  main .vergleich .table2.spalten-2 .cell {
    width: 550px;
  }
  main .vergleich .table2.spalten-2 .first {
    width: 520px;
  }
  main .vergleich .table2.spalten-3 .cell {
    width: 367px;
  }
  main .vergleich .table2.spalten-3 .first {
    width: 336px;
  }
  main .vergleich .table2.spalten-4 .cell {
    width: 275px;
  }
  main .vergleich .table2.spalten-4 .first {
    width: 245px;
  }
  main .vergleich .table2.spalten-5 .cell {
    width: 220px;
  }
  main .vergleich .table2.spalten-5 .first {
    width: 190px;
  }
  main .vergleich .table2 .cell {
    border-top: 1px solid #DDD;
    box-sizing: border-box;
    display: flex;
    flex-grow: 1;
    min-height: 40px;
    padding: 10px 0 10px 30px;
    position: relative;
  }
  main .vergleich .table2 .cell.odd {
    background: rgb(247.35, 247.35, 247.35);
  }
  main .vergleich .table2 .cell.first {
    background: #e91b2d;
    border-top: 1px solid transparent;
    color: #FFF;
    padding: 10px 15px 10px 15px;
  }
  main .vergleich .table2 .cell.first.img {
    padding: 10px 0;
  }
  main .vergleich .table2 .cell.first:before {
    border-top: 1px solid #DDD;
    color: #333;
    content: attr(data-label);
    font-weight: 700;
    padding: 10px 0;
    position: absolute;
    left: -220px;
    top: 0;
    width: 220px;
  }
  main .vergleich .table2 .cell.first.logo:before, main .vergleich .table2 .cell.first.bottom:before {
    color: #CCC;
    font-size: 11px;
    font-weight: 400;
  }
  main .vergleich .table2 .cell.img {
    border: none;
  }
  main .vergleich .table2 .cell.img a {
    border: 3px solid transparent;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 7px;
  }
  main .vergleich .table2 .cell.img a img {
    display: block;
    max-width: 90%;
    max-height: 150px;
  }
  main .vergleich .table2 .cell.img a:focus-visible {
    border-color: #333;
    border-radius: 5px;
    outline: none;
  }
  main .vergleich .table2 .cell.img:before {
    border-top: none;
  }
  main .vergleich .table2 .cell.img.first {
    background: none;
  }
  main .vergleich .table2 .cell.img.first:before {
    color: #CCC;
    font-size: 10px;
    font-weight: 400;
    padding: 0;
  }
  main .vergleich .table2 .cell.name {
    border: none;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    flex-direction: column;
  }
  main .vergleich .table2 .cell.name:before {
    border-top: none;
  }
  main .vergleich .table2 .cell.name i {
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
  }
  main .vergleich .table2 .cell.name div {
    font-size: 20px;
    font-weight: 700;
    padding: 0 0 10px 0;
  }
  main .vergleich .table2 .cell.name span {
    color: #999;
    display: inline;
    font-size: 14px;
    font-weight: 500;
  }
  main .vergleich .table2 .cell.name span b {
    background: #e91b2d;
    color: #FFF;
    display: inline-block;
    margin: 0 5px 0 0;
    font-weight: 400;
    padding: 0 3px;
  }
  main .vergleich .table2 .cell.name.first span {
    color: rgb(248.708, 189.792, 194.94);
  }
  main .vergleich .table2 .cell.name.first span b {
    background: #fc0;
    color: #000;
  }
  main .vergleich .table2 .cell.logo {
    padding-bottom: 5px;
    padding-top: 15px;
  }
  main .vergleich .table2 .cell.logo div {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
  }
  main .vergleich .table2 .cell.logo img {
    display: block;
    margin: auto;
    max-height: 40px;
    max-width: 80px;
  }
  main .vergleich .table2 .cell.cta {
    padding-bottom: 15px;
    border: none;
  }
  main .vergleich .table2 .cell.cta div {
    text-align: center;
    width: 100%;
  }
  main .vergleich .table2 .cell.cta a {
    align-items: center;
    background: #DDD;
    border-radius: 4px;
    border-radius: 50px;
    display: flex;
    color: #333;
    font-weight: 700;
    height: 40px;
    justify-content: center;
    margin: 0 0 5px 0;
    transition: all 0.15s ease-in-out;
  }
  main .vergleich .table2 .cell.cta a:hover, main .vergleich .table2 .cell.cta a:focus-visible {
    background: #333;
    color: #FFF;
    outline: none;
  }
  main .vergleich .table2 .cell.cta strong {
    font-size: 14px;
    font-weight: 500;
  }
  main .vergleich .table2 .cell.cta.first a {
    border: none;
    color: #333;
    background: #fff;
    font-weight: 700;
  }
  main .vergleich .table2 .cell.cta.first a:hover, main .vergleich .table2 .cell.cta.first a:focus-visible {
    background: #333;
    color: #FFF;
  }
  main .vergleich .table2 .cell.cta.first strong {
    color: rgb(250.952, 213.048, 216.36);
  }
  main .vergleich .table2 .cell.cta.first:before {
    border: none;
  }
  main .vergleich .table2 .cell.bottom {
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    padding-bottom: 15px;
    padding-top: 15px;
  }
  main .vergleich .table2 .cell.bottom div {
    width: 100%;
  }
  main .vergleich .table2 .cell.bottom a {
    align-items: center;
    background: #DDD;
    border-radius: 4px;
    border-radius: 50px;
    display: flex;
    color: #333;
    font-weight: 700;
    height: 40px;
    justify-content: center;
    transition: all 0.15s ease-in-out;
  }
  main .vergleich .table2 .cell.bottom a:hover, main .vergleich .table2 .cell.bottom a:focus-visible {
    background: #333;
    color: #FFF;
    outline: none;
  }
  main .vergleich .table2 .cell.bottom.first a {
    border: none;
    color: #333;
    background: #fff;
  }
  main .vergleich .table2 .cell.bottom.first a:hover, main .vergleich .table2 .cell.bottom.first a:focus-visible {
    background: #333;
    color: #FFF;
  }
  main .vergleich .table {
    display: none;
  }
  main .alternativen .headline {
    color: #333;
    font-size: 36px;
    font-weight: 900;
    padding: 70px 220px 20px 220px;
  }
  main .alternativen .flexbox {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 60px;
    padding: 0 220px;
    width: 100%;
  }
  main .alternativen a {
    display: flex;
    gap: 24px;
  }
  main .alternativen a .left {
    width: 300px;
  }
  main .alternativen a .left.isolated {
    align-items: center;
    display: flex;
    justify-content: center;
  }
  main .alternativen a .left.isolated img {
    max-height: 200px;
  }
  main .alternativen a .left img {
    display: block;
    max-width: 100%;
  }
  main .alternativen a .right {
    width: 520px;
  }
  main .alternativen a .right .dz-hl {
    display: block;
    padding: 4px 0 2px 6px;
    border: 2px solid transparent;
  }
  main .alternativen a .right .dz-hl b {
    color: #e91b2d;
    display: block;
    font-size: 18px;
  }
  main .alternativen a .right .dz-hl span {
    border-bottom: 2px solid transparent;
    display: inline-block;
    font-size: 26px;
    font-weight: 900;
  }
  main .alternativen a .right p {
    font-size: 16px;
    margin: 0;
    line-height: 24px;
    padding: 15px 0 0 10px;
  }
  main .alternativen a .right p:before {
    color: #999;
    content: attr(data-date);
  }
  main .alternativen a:hover {
    outline: none;
  }
  main .alternativen a:hover .dz-hl span {
    display: inline-block;
    border-bottom: 2px solid #e91b2d;
  }
  main .alternativen a:focus-visible {
    outline: none;
  }
  main .alternativen a:focus-visible .dz-hl {
    border: 2px solid #333;
    border-radius: 3px;
  }
  .top-teaser {
    align-items: center;
    display: flex;
    justify-content: center;
    margin: 18px 0 0 0;
  }
  .top-teaser .wrap {
    display: flex;
    gap: 6px;
    max-width: 1330px;
    width: 100%;
  }
  .top-teaser .wrap .left {
    box-sizing: border-box;
    margin: 0 0 0 8px;
    width: 984px;
  }
  .top-teaser .wrap .left > a {
    border: 2px solid transparent;
    display: block;
    padding: 10px;
  }
  .top-teaser .wrap .left > a:hover b {
    color: #055063;
    text-decoration: underline;
  }
  .top-teaser .wrap .left > a:focus-visible {
    border-color: #333;
    border-radius: 3px;
    outline: none;
  }
  .top-teaser .wrap .left .img {
    position: relative;
  }
  .top-teaser .wrap .left .img.isolated img {
    margin: 0 auto;
    max-height: 500px;
  }
  .top-teaser .wrap .left .img .headline {
    background: #FFF;
    bottom: -5px;
    left: 0;
    padding: 20px 30px 0 0;
    position: absolute;
    right: 330px;
  }
  .top-teaser .wrap .left .img .headline span {
    color: #e91b2d;
    display: block;
    font-size: 18px;
    font-weight: 700;
  }
  .top-teaser .wrap .left .img .headline b {
    display: block;
    font-size: 40px;
    font-weight: 900;
    line-height: 42px;
    padding: 3px 0 0 0;
  }
  .top-teaser .wrap .left .unten {
    display: table;
  }
  .top-teaser .wrap .left .unten p {
    font-size: 18px;
    line-height: 26px;
    padding: 8px 60px 0 12px;
    display: table-cell;
  }
  .top-teaser .wrap .left .unten .link {
    padding: 30px 12px 0 0;
    width: 330px;
    display: table-cell;
    vertical-align: bottom;
  }
  .top-teaser .wrap .left .unten .link a {
    background: #e91b2d;
    color: #FFF;
    font-size: 14px;
    border-radius: 50px;
    padding: 0 15px;
    height: 40px;
    line-height: 40px;
    display: inline-block;
    transition: all 0.15s ease-in-out;
  }
  .top-teaser .wrap .left .unten .link a span:before {
    content: attr(data-before);
  }
  .top-teaser .wrap .left .unten .link a:hover {
    background: #055063;
  }
  .top-teaser .wrap .left .unten .link a:focus-visible {
    background: #333;
    outline: none;
  }
  .top-teaser .wrap .right {
    display: flex;
    flex-direction: column;
    width: 327px;
  }
  .top-teaser .wrap .right .top {
    display: flex;
    gap: 30px;
    padding: 0 0 15px 12px;
    align-items: center;
  }
  .top-teaser .wrap .right .top div {
    flex: 1;
    font-size: 18px;
    font-weight: 700;
  }
  .top-teaser .wrap .right .top a {
    border-radius: 50px;
    display: flex;
    font-size: 14px;
    line-height: 1;
    color: #e91b2d;
    padding: 8px 15px;
    font-weight: 500;
    transition: all 0.15s ease-in-out;
  }
  .top-teaser .wrap .right .top a span {
    border-bottom: 2px solid transparent;
    display: block;
    padding: 2px 0;
  }
  .top-teaser .wrap .right .top a:before {
    content: attr(data-before);
    padding: 2px 0;
  }
  .top-teaser .wrap .right .top a:hover {
    color: #333;
  }
  .top-teaser .wrap .right .top a:hover span {
    border-bottom: 2px solid #e91b2d;
  }
  .top-teaser .wrap .right .top a:focus-visible {
    background: #333;
    color: #fff;
    outline: none;
  }
  .top-teaser .wrap .right ol {
    border-top: 1px solid #DDD;
    display: flex;
    flex-direction: column;
    margin: 0 5px 0 0;
    padding: 0;
    gap: 5px;
  }
  .top-teaser .wrap .right ol li {
    display: flex;
  }
  .top-teaser .wrap .right ol li a {
    border: 2px solid transparent;
    display: table;
    width: 100%;
    height: 90px;
    padding: 0 10px;
  }
  .top-teaser .wrap .right ol li a:hover b {
    color: #055063;
    text-decoration: underline;
  }
  .top-teaser .wrap .right ol li a:focus-visible {
    border-color: #333;
    border-radius: 3px;
    outline: none;
  }
  .top-teaser .wrap .right ol li a span {
    display: table-cell;
    padding: 0 10px 0 0;
    line-height: 22px;
    vertical-align: middle;
  }
  .top-teaser .wrap .right ol li a:before {
    color: #e91b2d;
    content: attr(data-count);
    display: table-cell;
    font-size: 40px;
    font-weight: 900;
    vertical-align: middle;
    width: 60px;
    box-sizing: border-box;
    padding: 0 0 0 5px;
  }
  .top-teaser .wrap .right ol li b {
    display: block;
    font-weight: 900;
    font-size: 18px;
    line-height: 22px;
  }
  .top-teaser .wrap .right ol li b:after {
    content: attr(data-after);
  }
  .top-teaser img {
    display: block;
    max-width: 100%;
  }
  .category-teaser {
    display: flex;
    align-items: center;
    flex-direction: column;
    margin: 70px 0 0 0;
    padding: 0 10px;
  }
  .category-teaser .oben {
    display: flex;
    width: 100%;
    max-width: 1330px;
    flex-direction: column;
  }
  .category-teaser .oben .block-top {
    display: flex;
    align-items: center;
    padding: 0 0 0 20px;
  }
  .category-teaser .oben .block-top .name {
    flex: 1;
    font-size: 34px;
    font-weight: 900;
    padding: 0 0 12px 0;
  }
  .category-teaser .oben .block-top .more {
    color: #e91b2d;
    padding: 0 5px 12px 0;
  }
  .category-teaser .oben .block-top .more a {
    border-radius: 50px;
    display: flex;
    font-size: 14px;
    line-height: 1;
    color: #e91b2d;
    padding: 8px 15px;
    font-weight: 500;
    transition: all 0.15s ease-in-out;
  }
  .category-teaser .oben .block-top .more a span {
    border-bottom: 2px solid transparent;
    display: block;
    padding: 2px 0;
  }
  .category-teaser .oben .block-top .more a:before {
    content: attr(data-before);
    padding: 2px 0;
  }
  .category-teaser .oben .block-top .more a:hover {
    color: #333;
  }
  .category-teaser .oben .block-top .more a:hover span {
    border-bottom: 2px solid #e91b2d;
  }
  .category-teaser .oben .block-top .more a:focus-visible {
    background: #333;
    color: #fff;
    outline: none;
  }
  .category-teaser .oben .block-bottom {
    border-top: 1px solid #DDD;
    margin: 0 20px;
  }
  .category-teaser .oben .block-bottom ul {
    display: flex;
    margin: 20px 0 10px 0;
    padding: 0;
    font-size: 14px;
    gap: 10px;
  }
  .category-teaser .oben .block-bottom ul li {
    margin: 0;
    padding: 0;
  }
  .category-teaser .oben .block-bottom ul a {
    background: #F1F6F8;
    border-radius: 50px;
    padding: 0 20px;
    height: 40px;
    display: flex;
    align-items: center;
    transition: all 0.15s ease-in-out;
  }
  .category-teaser .oben .block-bottom ul a span {
    white-space: nowrap;
  }
  .category-teaser .oben .block-bottom ul a span:after {
    content: "❯";
    display: inline-block;
    font-size: 12px;
    margin: 0 0 0 10px;
  }
  .category-teaser .oben .block-bottom ul a:hover {
    background: #055063;
    color: #FFF;
  }
  .category-teaser .oben .block-bottom ul a:focus {
    background: #333;
    color: #FFF;
    outline: none;
  }
  .category-teaser .unten {
    display: flex;
    gap: 6px;
    width: 100%;
    max-width: 1330px;
    flex-direction: row;
  }
  .category-teaser .left {
    flex: 1;
    margin: 0 0 0 8px;
  }
  .category-teaser .left a {
    border: 2px solid transparent;
    display: block;
    padding: 10px;
  }
  .category-teaser .left a:hover b {
    color: #055063;
    text-decoration: underline;
  }
  .category-teaser .left a:focus-visible {
    border-color: #333;
    border-radius: 3px;
    outline: none;
  }
  .category-teaser .left .img {
    position: relative;
  }
  .category-teaser .left .img.isolated picture {
    display: block;
    padding: 0 0 80px 0;
  }
  .category-teaser .left .img.isolated picture img {
    margin: 0 auto;
    max-height: 400px;
  }
  .category-teaser .left .img .headline {
    background: #FFF;
    bottom: -5px;
    left: 0;
    padding: 20px 30px 0 0;
    position: absolute;
    right: 110px;
  }
  .category-teaser .left .img .headline span {
    color: #e91b2d;
    display: inline-block;
    font-size: 18px;
    font-weight: 700;
  }
  .category-teaser .left .img .headline b {
    display: block;
    font-size: 40px;
    font-weight: 900;
    line-height: 40px;
    padding: 0;
  }
  .category-teaser .left .text p {
    font-size: 18px;
    line-height: 26px;
    padding: 8px 110px 0 12px;
    display: table-cell;
  }
  .category-teaser .left img {
    display: block;
    max-width: 100%;
  }
  .category-teaser .right {
    display: flex;
    flex-direction: column;
    gap: 5px;
    width: 542px;
    padding: 0 10px 0 0;
  }
  .category-teaser .right a {
    border: 2px solid transparent;
    display: flex;
    flex-direction: row;
    gap: 30px;
    padding: 10px;
  }
  .category-teaser .right a:hover b {
    color: #055063;
    text-decoration: underline;
  }
  .category-teaser .right a:focus-visible {
    border-color: #333;
    border-radius: 3px;
    outline: none;
  }
  .category-teaser .right a picture {
    display: block;
    width: 190px;
  }
  .category-teaser .right a picture.isolated img {
    margin: 0 auto;
    max-height: 150px;
  }
  .category-teaser .right a picture img {
    display: block;
    max-width: 100%;
  }
  .category-teaser .right a .text {
    flex: 1;
  }
  .category-teaser .right a .text span {
    color: #e91b2d;
    display: block;
    font-weight: 700;
    padding: 0 0 3px 0;
  }
  .category-teaser .right a .text b {
    display: block;
    font-size: 20px;
    font-weight: 900;
  }
  .category-teaser .right a .text p {
    line-height: 22px;
    padding: 10px 0 0 0;
    margin: 0;
  }
  .three-teaser {
    align-items: center;
    display: flex;
    flex-direction: column;
    margin: 70px 0 0 0;
    padding: 0 20px;
  }
  .three-teaser .wrap {
    display: flex;
    gap: 10px;
    max-width: 1310px;
    width: 100%;
  }
  .three-teaser a {
    width: 430px;
  }
  .three-teaser a picture {
    background: #FFF;
    display: flex;
    margin: 10px;
    justify-content: center;
    height: 250px;
  }
  .three-teaser a picture.isolated img {
    box-sizing: border-box;
    padding: 10px;
    width: auto;
  }
  .three-teaser a picture img {
    display: block;
    width: 100%;
  }
  .three-teaser a:hover b {
    color: #055063;
    text-decoration: underline;
  }
  .three-teaser a:focus-visible {
    background: #FFF;
    border-radius: 3px;
    outline: 2px solid #333;
  }
  .three-teaser span {
    color: #e91b2d;
    display: block;
    font-weight: 700;
    padding: 5px 10px 5px 10px;
  }
  .three-teaser b {
    display: block;
    font-size: 24px;
    font-weight: 900;
    line-height: 26px;
    padding: 0 10px;
  }
  .three-teaser p {
    line-height: 24px;
    margin: 10px 10px 6px 10px;
  }
  .four-teaser {
    background: #F1F6F8;
    display: flex;
    align-items: center;
    flex-direction: column;
    margin: 70px 0 0 0;
    padding: 0 20px;
  }
  .four-teaser .wrap {
    display: flex;
    gap: 10px;
    padding: 30px 0;
    max-width: 1310px;
    width: 100%;
  }
  .four-teaser a span {
    color: #e91b2d;
    display: block;
    font-weight: 700;
    padding: 8px 10px 5px 10px;
  }
  .four-teaser a b {
    display: block;
    font-size: 24px;
    font-weight: 900;
    line-height: 26px;
    padding: 0 10px;
  }
  .four-teaser a p {
    line-height: 24px;
    margin: 15px 10px 6px 10px;
  }
  .four-teaser a:hover b {
    color: #055063;
    text-decoration: underline;
  }
  .four-teaser a:focus-visible {
    background: #FFF;
    border-radius: 3px;
    outline: 2px solid #333;
  }
  .list-teaser {
    align-items: center;
    display: flex;
    justify-content: center;
    margin: 70px 0 0 0;
  }
  .list-teaser .wrap {
    display: flex;
    max-width: 1330px;
    width: 100%;
    flex-direction: column;
  }
  .list-teaser .top {
    display: flex;
    align-items: center;
    padding: 0 0 0 20px;
  }
  .list-teaser .top .name {
    flex: 1;
    font-size: 34px;
    font-weight: 900;
    padding: 0 0 12px 0;
  }
  .list-teaser .top .more {
    color: #e91b2d;
    padding: 0 5px 12px 0;
  }
  .list-teaser .top .more a {
    border-radius: 50px;
    display: flex;
    font-size: 14px;
    line-height: 1;
    color: #e91b2d;
    padding: 8px 15px;
    font-weight: 500;
    transition: all 0.15s ease-in-out;
  }
  .list-teaser .top .more a span {
    border-bottom: 2px solid transparent;
    display: block;
    padding: 2px 0;
  }
  .list-teaser .top .more a:before {
    content: attr(data-before);
    padding: 2px 0;
  }
  .list-teaser .top .more a:hover {
    color: #333;
  }
  .list-teaser .top .more a:hover span {
    border-bottom: 2px solid #e91b2d;
  }
  .list-teaser .top .more a:focus-visible {
    background: #333;
    color: #fff;
    outline: none;
  }
  .list-teaser .line {
    border-bottom: 1px solid #CCC;
    margin: 0 20px 7px 20px;
  }
  .list-teaser ol {
    margin: 0 10px;
    padding: 0;
    display: flex;
    gap: 6px;
  }
  .list-teaser ol li {
    display: flex;
    width: 20%;
  }
  .list-teaser ol li a {
    border-radius: 3px;
    border: 2px solid #000;
    border: 2px solid transparent;
    display: table;
    padding: 5px 10px;
    font-size: 16px;
  }
  .list-teaser ol li a span {
    display: inline-block;
    padding: 5px 0 4px 0;
  }
  .list-teaser ol li a:hover b {
    color: #055063;
    text-decoration: underline;
  }
  .list-teaser ol li a:before {
    color: #e91b2d;
    content: attr(data-count);
    display: table-cell;
    font-size: 40px;
    font-weight: 900;
    vertical-align: top;
    width: 40px;
    box-sizing: border-box;
  }
  .rubrik {
    align-items: center;
    display: flex;
    justify-content: center;
    padding: 15px 0 0 0;
    width: 100%;
  }
  .rubrik .wrap {
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    max-width: 1330px;
    padding: 5px;
    width: 100%;
  }
  .rubrik a {
    border: 2px solid transparent;
    display: block;
    box-sizing: border-box;
    width: 25%;
    margin: 0 0 20px 0;
    padding: 13px 13px 8px 13px;
  }
  .rubrik a:hover em {
    color: #055063;
    text-decoration: underline;
  }
  .rubrik a:focus-visible {
    border-color: #333;
    border-radius: 4px;
    outline: none;
  }
  .rubrik a .lft {
    display: flex;
    height: 200px;
    justify-content: center;
  }
  .rubrik a .lft.isolated {
    align-items: center;
    display: flex;
    height: 200px;
    justify-content: center;
  }
  .rubrik a .lft.isolated img {
    height: auto;
    max-height: 200px;
    width: auto;
    max-width: 100%;
  }
  .rubrik a .rgt b {
    color: #e91b2d;
    display: block;
    font-size: 16px;
    font-weight: 700;
    padding: 10px 0 0 0;
  }
  .rubrik a .rgt em {
    display: block;
    font-size: 24px;
    font-style: normal;
    font-weight: 900;
  }
  .rubrik a .rgt p {
    line-height: 22px;
    margin: 0;
    padding: 10px 0 0 0;
  }
  .rubrik a img {
    display: block;
    height: 200px;
    width: 100%;
  }
  .pagination {
    display: flex;
    justify-content: center;
    width: 100%;
  }
  .pagination .wrap {
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    max-width: 1330px;
    padding: 20px;
    width: 100%;
    gap: 20px;
  }
  .pagination b, .pagination a, .pagination span {
    align-items: center;
    border: 2px solid transparent;
    border-radius: 50px;
    display: flex;
    height: 36px;
    justify-content: center;
    min-width: 36px;
    position: relative;
  }
  .pagination b {
    background: #055063;
    color: #FFF;
  }
  .pagination a:hover {
    background: #333;
    color: #FFF;
  }
  .pagination a:focus-visible {
    border-color: #333;
    outline: none;
  }
  .pagination span {
    min-width: auto;
  }
  .pagination span:before {
    content: "...";
  }
  .newsletter {
    background: #e91b2d;
    background: #055063;
    display: flex;
    justify-content: center;
    padding: 0 30px 0 30px;
    margin: 60px 0 0 0;
  }
  .newsletter .wrap {
    display: flex;
    padding: 0 30px;
    width: 1290px;
    gap: 30px;
    align-items: center;
  }
  .newsletter .left {
    color: #FFF;
    padding: 30px 0 35px 0;
    width: 50%;
  }
  .newsletter .left div {
    font-size: 28px;
    font-weight: 700;
    padding: 0 0 5px 0;
  }
  .newsletter .left span {
    opacity: 0.5;
  }
  .newsletter .right {
    display: flex;
    align-items: center;
    padding: 30px 0;
    width: 50%;
  }
  .newsletter .right form {
    display: flex;
    flex: 1;
    position: relative;
  }
  .newsletter .right form input {
    background: #FFF;
    border: none;
    border-radius: 50px;
    font-family: inherit;
    height: 40px;
    padding: 0 15px;
    width: 100%;
    box-sizing: border-box;
  }
  .newsletter .right form button {
    background: #333;
    border: none;
    color: #FFF;
    font-family: inherit;
    font-weight: 500;
    position: absolute;
    top: 2px;
    right: 2px;
    height: 36px;
    padding: 0 15px;
    border-radius: 50px;
    margin: 0;
  }
  footer {
    background: #e91b2d;
    display: flex;
    justify-content: center;
    padding: 0 30px 0 30px;
  }
  footer .wrap {
    display: flex;
    padding: 0 30px;
    width: 1290px;
    align-items: center;
    flex-direction: column;
  }
  footer .oben {
    display: flex;
    flex-direction: row;
    width: 100%;
    align-items: center;
  }
  footer .oben img {
    display: block;
    margin: 20px 0;
  }
  footer .oben ul {
    margin: 0;
    display: flex;
    flex: 1;
    flex-direction: row;
    gap: 30px;
    justify-content: flex-end;
  }
  footer .oben a {
    color: #FFF;
  }
  footer .oben a:focus-visible {
    outline: none;
  }
  footer .unten {
    width: 100%;
    padding: 0 0 30px 0;
    position: relative;
  }
  footer .unten p {
    margin: 0;
    font-size: 12px;
    color: #FFF;
    opacity: 0.65;
  }
  footer .unten p:before {
    content: "Wir verwenden Cookies, um ein optimales Webseitenerlebnis zu ermöglichen. Über unsere Datenschutzerklärung können Sie sich austragen (Opt-out). Wir sind ein unabhängiges Verbraucherportal. Unser Netzwerk aus Experten recherchiert, testet und vergleicht alle Produkte objektiv. Mit unserer Erfahrung und unserem breiten Netzwerk decken wir verschiedene Segmente optimal ab. Auf unserem Portal finden Sie keine von Herstellern finanzierten Inhalte. Wir finanzieren uns ausschließlich über Anzeigen und Affiliate-Links, bei denen von dem verlinkten Shop ggf. eine Vergütung erhalten. Für unsere Nutzer entstehen zu keinem Zeitpunkt Kosten. Alle Produkte wurden von uns selbst getestet.";
    display: block;
    padding: 0 0 11px;
  }
  footer .unten span {
    color: #FFF;
    font-weight: 500;
    position: absolute;
    bottom: 30px;
    right: 0;
    font-size: 12px;
  }
  footer .unten span a {
    border-bottom: 2px solid rgb(241.976, 120.024, 130.68);
  }
}
/* Handy ---------------------------------------------------------------------------------------- */
@media screen and (max-width: 720px) {
  button[data-type=nav] {
    align-items: center;
    background: transparent;
    border: none;
    display: flex;
    justify-content: center;
    height: 40px;
    right: 15px;
    position: absolute;
    position: fixed;
    top: 10px;
    width: 40px;
    z-index: 110;
  }
  button[data-type=nav] span {
    display: none;
  }
  button[data-type=nav] svg path {
    color: #fff;
  }
  header .top .logo {
    align-items: center;
    background: #e91b2d;
    box-sizing: border-box;
    display: flex;
    height: 60px;
    padding: 0 0 0 11px;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 100;
  }
  header .top .logo a {
    padding: 0 9px;
  }
  header .top .logo svg {
    display: block;
    width: 170px;
  }
  header .top .search {
    align-items: center;
    background: #FFF;
    box-sizing: border-box;
    display: flex;
    display: none;
    flex: 1;
    height: 70px;
    justify-content: center;
    padding: 20px 20px 10px 20px;
    position: absolute;
    top: 60px;
    width: 100%;
    z-index: 90;
  }
  header .top .search form {
    display: flex;
    position: relative;
    width: 100%;
    justify-content: center;
  }
  header .top .search form input {
    background: #eee;
    border: 2px solid #ccc;
    border-radius: 50px;
    box-sizing: border-box;
    height: 40px;
    line-height: 40px;
    width: 100%;
    text-align: center;
    transition: all 0.15s ease-in-out;
  }
  header .top .search form input:focus-visible {
    border-color: #666;
    outline: none;
  }
  header .top .search form button {
    align-items: center;
    background: transparent;
    border: none;
    display: flex;
    height: 36px;
    justify-content: center;
    left: 2px;
    position: absolute;
    top: 2px;
    width: 36px;
  }
  header .top .search form button svg {
    display: block;
    width: 20px;
  }
  header .top .search form button svg path {
    color: #666;
  }
  header .top .meta {
    background: #FFF;
    box-sizing: border-box;
    display: none;
    gap: 20px;
    height: 50px;
    padding: 0 20px;
    position: absolute;
    text-align: center;
    top: 130px;
    width: 100%;
  }
  header .top .meta a {
    display: inline-block;
    padding: 10px;
    text-decoration: underline;
  }
  header .nav {
    background: #FFF;
    border-top: 1px solid #CCC;
    box-sizing: border-box;
    display: none;
    padding: 10px 0;
    position: absolute;
    top: 180px;
    width: 100%;
    z-index: 50;
  }
  header .nav ul {
    box-sizing: border-box;
    margin: 0;
    padding: 0 10px;
    width: 100%;
    display: flex;
    flex-direction: column;
  }
  header .nav ul li {
    display: flex;
    margin: 0;
  }
  header .nav ul li a {
    align-items: center;
    box-sizing: border-box;
    display: flex;
    gap: 10px;
    padding: 10px;
    width: 100%;
  }
  header .nav ul li a svg {
    display: block;
  }
  header x.nav {
    background: yellow;
    bottom: 140px;
    bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
    top: 70px;
    padding: 0 0 140px 0;
  }
  header x.nav ul {
    background: orange;
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 10px 20px;
    overflow: auto;
    position: absolute;
    bottom: 140px;
    top: 0;
    left: 0;
    right: 0;
  }
  header x.nav ul li {
    background: lime;
    display: flex;
    padding: 10px 0;
  }
  header x.nav ul li a {
    background: orangered;
    display: flex;
    width: 100%;
    gap: 10px;
    align-items: center;
  }
  header x.nav ul li a svg {
    display: block;
  }
  header x.login {
    align-items: center;
    background: rgb(120.84, 11.66, 21.2);
    border-radius: 50px;
    color: #FFF;
    display: flex;
    font-size: 14px;
    height: 40px;
    padding: 0 15px 0 15px;
    position: absolute;
    right: 15px;
    top: 15px;
    z-index: 50;
  }
  header x.search {
    background: lime;
    padding: 0 15px;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
  }
  main .hl {
    display: flex;
    font-size: 18px;
    font-weight: 700;
    margin: 0 20px;
    padding: 5px 0 0 0;
    position: relative;
  }
  main .hl:after {
    background: #e91b2d;
    content: "";
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 30px;
    height: 4px;
  }
  main article {
    display: block;
    margin: 60px 0 0 0;
  }
  main .head .dachzeile {
    color: #e91b2d;
    display: block;
    font-size: 16px;
    font-weight: 700;
    padding: 25px 20px 0 20px;
    text-transform: uppercase;
  }
  main .head .headline {
    color: #333;
    font-size: 34px;
    font-weight: 900;
    line-height: 36px;
    margin: 0;
    padding: 5px 20px 5px 20px;
  }
  main .head .vorspann p {
    margin: 0;
    color: #333;
    font-size: 18px;
    font-weight: 500;
    line-height: 24px;
    padding: 15px 20px 15px 20px;
  }
  main .head .date {
    color: #999;
    font-size: 14px;
    line-height: 20px;
    padding: 10px 20px 10px 20px;
  }
  main .head .date span:before {
    content: "•";
    display: inline-block;
    padding: 0 5px;
  }
  main .head .date span:first-child:before {
    content: "";
    padding: 0;
  }
  main .head .date span a {
    border-bottom: 1px solid #CCC;
  }
  main .head .date .author:after {
    content: ", Daniel Smolcic";
  }
  main .head .date .author.dsm:after {
    content: "Daniel Smolcic";
  }
  main .hero {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 0 5px 0;
    width: 100%;
  }
  main .hero.isolated dt {
    padding: 0 0 15px 0;
  }
  main .hero.isolated img {
    max-height: 200px;
    width: auto;
  }
  main .hero img {
    margin: auto;
    display: block;
    max-width: 100%;
    width: 100%;
  }
  main .hero dl {
    margin: 0;
  }
  main .hero dl dd {
    color: #666;
    font-size: 14px;
    line-height: 18px;
    margin: 0;
    padding: 4px 20px;
  }
  main .hero dl dd:after {
    content: attr(data-copyright);
    color: #999;
  }
  main .article p {
    font-size: 16px;
    line-height: 24px;
    padding: 15px 20px 5px 20px;
    margin: 0;
  }
  main .article p a {
    border-bottom: 2px solid #666;
    transition: all 0.15s ease-in-out;
    margin: 0 1px;
  }
  main .article ul {
    list-style: disc;
    margin: 0 0 0 20px;
    padding: 10px 20px;
  }
  main .article ul ul {
    padding: 0 0 5px 0;
  }
  main .article ul li {
    padding: 5px 0 0 0;
  }
  main .article .inline-img {
    display: flex;
    flex-direction: column;
    padding: 10px 20px 0 20px;
    justify-content: center;
  }
  main .article .inline-img.isolated {
    padding-bottom: 10px;
  }
  main .article .inline-img.isolated img {
    margin: auto;
    max-height: 200px;
  }
  main .article .inline-img img {
    display: block;
    max-width: 100%;
  }
  main .article .inline-img dd {
    color: #666;
    font-size: 14px;
    line-height: 18px;
    margin: 0;
    padding: 4px 0 0 0;
  }
  main .article .inline-img dd:after {
    content: attr(data-copyright);
    color: #999;
  }
  main .article .rating .pro-con {
    background: #F1F6F8;
    display: flex;
    flex-direction: column;
    gap: 20px;
    list-style: none;
    margin: 15px 0 0 0;
    padding: 10px 0;
  }
  main .article .rating .pro-con span {
    align-items: center;
    display: flex;
    font-weight: 700;
    padding: 5px 0 5px 18px;
  }
  main .article .rating .pro-con span svg {
    margin: 0 10px 0 0;
  }
  main .article .rating .pro-con li.pro ul,
  main .article .rating .pro-con li.con ul {
    list-style: none;
    margin: 0;
    padding: 0 0 0 24px;
  }
  main .article .rating .pro-con li.pro ul li,
  main .article .rating .pro-con li.con ul li {
    background: url("https://supertest.de/img_2025/plus.svg") no-repeat left center/20px 20px;
    font-weight: 500;
    padding: 5px 0 5px 37px;
  }
  main .article .rating .pro-con li.pro.con ul li,
  main .article .rating .pro-con li.con.con ul li {
    background-image: url("https://supertest.de/img_2025/minus.svg");
  }
  main .article .rating .seal {
    display: flex;
    justify-content: center;
    margin: 20px 0 0 0;
  }
  main .article .rating .seal div {
    background: #FFF;
    width: 190px;
  }
  main .article .rating .seal div img {
    background: #232E75;
    display: block;
    padding: 13px 15px 10px 15px;
  }
  main .article .rating .seal div span {
    align-items: center;
    border-left: 1px solid #999;
    border-right: 1px solid #999;
    display: flex;
    flex-direction: column;
    flex: 1;
    justify-content: center;
  }
  main .article .rating .seal div span em {
    display: block;
    font-size: 24px;
    font-style: normal;
    font-weight: 700;
    padding: 12px 0 9px 0;
    text-align: center;
  }
  main .article .rating .seal div span b {
    display: block;
    font-size: 14px;
    font-weight: 400;
    text-align: center;
  }
  main .article .rating .seal div span i {
    color: #48BBE0;
    display: block;
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    padding: 3px 10px 13px 10px;
    text-align: center;
  }
  main .article .rating .seal div strong {
    background: #EAEAEA;
    border: 1px solid #999;
    border-top: none;
    color: #666;
    display: block;
    font-size: 11px;
    font-weight: 400;
    line-height: 14px;
    padding: 5px 0;
    text-align: center;
  }
  main .article .tabelle {
    padding: 25px 20px 10px 20px;
  }
  main .article .tabelle table {
    box-sizing: border-box;
    width: 100%;
  }
  main .article .tabelle tr.criteria th, main .article .tabelle tr.criteria td {
    background: #FFFAB9;
    font-weight: 700;
  }
  main .article .tabelle tr.overall th, main .article .tabelle tr.overall td {
    background: #FCEC80;
    font-weight: 700;
  }
  main .article .tabelle tr.odd th, main .article .tabelle tr.odd td {
    background: #F8F8F8;
  }
  main .article .tabelle th, main .article .tabelle td {
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    font-weight: 400;
    padding: 7px 10px;
    text-align: left;
  }
  main .article .tabelle td {
    font-weight: 700;
    line-height: 1;
    vertical-align: middle;
    white-space: nowrap;
  }
  main .article .tabelle td i, main .article .tabelle td span {
    background: url("https://supertest.de/img_2025/good.svg") no-repeat center center/16px 16px;
    display: inline-block;
    height: 16px;
    width: 16px;
  }
  main .article .tabelle td i {
    background-image: url("https://supertest.de/img_2025/slash.svg");
  }
  main .article .tabelle td .average {
    background-image: url("https://supertest.de/img_2025/average.svg");
    background-size: 14px 14px;
  }
  main .article .tabelle td .bad {
    background-image: url("https://supertest.de/img_2025/bad.svg");
  }
  main .article .klima {
    padding: 0 20px;
  }
  main .article .klima table, main .article .klima thead, main .article .klima tbody, main .article .klima th, main .article .klima tr, main .article .klima td {
    margin: 0;
    padding: 0;
  }
  main .article .klima table {
    width: 100%;
  }
  main .article .klima th {
    display: none;
  }
  main .article .klima tr {
    display: block;
  }
  main .article .klima tr.day td:after, main .article .klima tr.night td:after, main .article .klima tr.water td:after {
    content: " °C";
  }
  main .article .klima tr.sun td:after {
    content: " h";
  }
  main .article .klima td {
    border-top: 1px solid #FFF;
    display: block;
    height: 30px;
    line-height: 30px;
    padding: 0 0 0 80%;
    position: relative;
    text-align: center;
  }
  main .article .klima td:first-child {
    background: #FFF;
    border: none;
    font-weight: 700;
    margin: 15px 0 0 0;
    padding: 0;
    text-align: left;
  }
  main .article .klima td:first-child:before {
    display: none;
  }
  main .article .klima td:before {
    background: rgb(250.75, 250.75, 250.75);
    color: #666;
    height: 30px;
    padding: 0 10px;
    box-sizing: border-box;
    position: absolute;
    top: 0;
    left: 0;
    width: 80%;
    text-align: left;
    line-height: 30px;
  }
  main .article .klima td:nth-of-type(2):before, main .article .klima td:nth-of-type(4):before, main .article .klima td:nth-of-type(6):before, main .article .klima td:nth-of-type(8):before, main .article .klima td:nth-of-type(10):before, main .article .klima td:nth-of-type(12):before {
    background: rgb(243.1, 243.1, 243.1);
  }
  main .article .klima td:nth-of-type(2):before {
    content: "Januar";
  }
  main .article .klima td:nth-of-type(3):before {
    content: "Februar";
  }
  main .article .klima td:nth-of-type(4):before {
    content: "März";
  }
  main .article .klima td:nth-of-type(5):before {
    content: "April";
  }
  main .article .klima td:nth-of-type(6):before {
    content: "Mai";
  }
  main .article .klima td:nth-of-type(7):before {
    content: "Juni";
  }
  main .article .klima td:nth-of-type(8):before {
    content: "Juli";
  }
  main .article .klima td:nth-of-type(9):before {
    content: "August";
  }
  main .article .klima td:nth-of-type(10):before {
    content: "September";
  }
  main .article .klima td:nth-of-type(11):before {
    content: "Oktober";
  }
  main .article .klima td:nth-of-type(12):before {
    content: "November";
  }
  main .article .klima td:nth-of-type(13):before {
    content: "Dezember";
  }
  main .article .klima .t1 {
    background: #6CF;
  }
  main .article .klima .t2 {
    background: #8DF;
  }
  main .article .klima .t3 {
    background: #AEF;
  }
  main .article .klima .t4 {
    background: #CFF;
  }
  main .article .klima .t5 {
    background: #FF9;
  }
  main .article .klima .t6 {
    background: #FC6;
  }
  main .article .klima .t7 {
    background: #FB5;
  }
  main .article .klima .t8 {
    background: #FA4;
  }
  main .article .klima .t9 {
    background: #F93;
  }
  main .article .klima .t10 {
    background: #F82;
  }
  main .article .klima .t11 {
    background: #F71;
  }
  main .article .klima .t12 {
    background: #F60;
  }
  main .article .klima .s1 {
    background: #FFC;
  }
  main .article .klima .s2 {
    background: #FFFAB9;
  }
  main .article .klima .s3 {
    background: #FFF6A7;
  }
  main .article .klima .s4 {
    background: #FFF194;
  }
  main .article .klima .s5 {
    background: #FFEC82;
  }
  main .article .klima .s6 {
    background: #FFE86F;
  }
  main .article .klima .s7 {
    background: #FFE35D;
  }
  main .article .klima .s8 {
    background: #FFDF4A;
  }
  main .article .klima .s9 {
    background: #FFDA38;
  }
  main .article .klima .s10 {
    background: #FFD525;
  }
  main .article .klima .s11 {
    background: #FFD113;
  }
  main .article .klima .s12 {
    background: #FC0;
  }
  main .article .klima .w1 {
    background: #CFF;
  }
  main .article .klima .w2 {
    background: #B9F6FA;
  }
  main .article .klima .w3 {
    background: #A7ECF6;
  }
  main .article .klima .w4 {
    background: #94E3F1;
  }
  main .article .klima .w5 {
    background: #82DAEC;
  }
  main .article .klima .w6 {
    background: #6FD1E8;
  }
  main .article .klima .w7 {
    background: #5DC7E3;
    color: #FFF;
  }
  main .article .klima .w8 {
    background: #4ABEDF;
    color: #FFF;
  }
  main .article .klima .w9 {
    background: #38B5DA;
    color: #FFF;
  }
  main .article .klima .w10 {
    background: #25ACD5;
    color: #FFF;
  }
  main .article .klima .w11 {
    background: #13A2D1;
    color: #FFF;
  }
  main .article .klima .w12 {
    background: #09C;
    color: #FFF;
  }
  main .article .klima .r1 {
    background: #9CF;
  }
  main .article .klima .r2 {
    background: #8BBEF6;
  }
  main .article .klima .r3 {
    background: #7DB0EC;
  }
  main .article .klima .r4 {
    background: #6FA2E3;
  }
  main .article .klima .r5 {
    background: #6194DA;
    color: #FFF;
  }
  main .article .klima .r6 {
    background: #5386D1;
    color: #FFF;
  }
  main .article .klima .r7 {
    background: #4679C7;
    color: #FFF;
  }
  main .article .klima .r8 {
    background: #386BBE;
    color: #FFF;
  }
  main .article .klima .r9 {
    background: #2A5DB5;
    color: #FFF;
  }
  main .article .klima .r10 {
    background: #1C4FAC;
    color: #FFF;
  }
  main .article .klima .r11 {
    background: #0E41A2;
    color: #FFF;
  }
  main .article .klima .r12 {
    background: #039;
    color: #FFF;
  }
  main .article .product-box {
    padding: 20px 20px 10px 20px;
  }
  main .article .product-box .product .inner {
    border: 1px solid #DDD;
    border-bottom: none;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
  }
  main .article .product-box .product .inner .img {
    padding: 20px 40px;
  }
  main .article .product-box .product .inner .img picture {
    justify-content: center;
    display: flex;
    width: 100%;
  }
  main .article .product-box .product .inner .img picture img {
    display: block;
    max-width: 100%;
    max-height: 150px;
  }
  main .article .product-box .product .inner .name {
    margin: 0 20px;
  }
  main .article .product-box .product .inner .descr {
    padding: 20px;
    line-height: 24px;
  }
  main .article .product-box .product .price {
    background: #e91b2d;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    color: #FFF;
    padding: 20px;
    text-align: center;
  }
  main .article .product-box .product .price b {
    background: url("https://supertest.de/img_2025/amazon-2.svg") no-repeat center top/60px 19px;
    display: block;
    font-size: 24px;
    font-weight: 700;
    padding: 30px 0 0 0;
  }
  main .article .product-box .product .price span {
    font-size: 16px;
    display: block;
    text-decoration: line-through;
    opacity: 0.7;
    padding: 5px 0 0 0;
  }
  main .article .product-box .product .price a {
    background: #000;
    border-radius: 50px;
    display: inline-block;
    font-weight: 700;
    line-height: 40px;
    height: 40px;
    margin: 17px 0 0 0;
    padding: 0 20px;
  }
  main .article .product-box .product .price strong {
    display: block;
    font-size: 14px;
    font-weight: 400;
    padding: 5px 0 0 0;
    opacity: 0.8;
  }
  main .right .sticky .premium {
    display: none;
  }
  main .right .sticky .more {
    display: none;
  }
  main .vergleich {
    padding: 20px;
  }
  main .vergleich .headline {
    font-size: 24px;
    font-weight: 900;
  }
  main .vergleich .table2 div {
    background: #F1F6F8;
    border-left: 1px solid #CCC;
    border-right: 1px solid #CCC;
    box-sizing: border-box;
    display: table;
    font-size: 14px;
    width: 100%;
  }
  main .vergleich .table2 div div {
    border-bottom: 1px solid #CCC;
    border-right: none;
    display: table-cell;
    padding: 7px 10px;
    box-sizing: border-box;
    vertical-align: middle;
    width: 50%;
  }
  main .vergleich .table2 div div:before {
    display: none;
  }
  main .vergleich .table2 div.img {
    background: #FFF;
    border-top: 1px solid #CCC;
    display: block;
    display: flex;
    margin: 20px 0 0 0;
    width: 100%;
    justify-content: center;
  }
  main .vergleich .table2 div.img img {
    display: block;
    margin: 20px;
    max-height: 150px;
    max-width: 100%;
  }
  main .vergleich .table2 div.img:before {
    display: none;
  }
  main .vergleich .table2 div.name {
    background: #FFF;
    display: block;
    padding: 0 20px 15px 20px;
  }
  main .vergleich .table2 div.name i {
    display: block;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    padding: 10px 0 0 0;
  }
  main .vergleich .table2 div.name div {
    background: #FFF;
    border: none;
    display: block;
    font-size: 20px;
    font-weight: 700;
    padding: 0 0 10px 0;
    width: 100%;
  }
  main .vergleich .table2 div.name span {
    color: #999;
    display: inline;
    font-size: 14px;
    font-weight: 500;
  }
  main .vergleich .table2 div.name span b {
    background: #e91b2d;
    color: #FFF;
    display: inline-block;
    margin: 0 5px 0 0;
    font-weight: 400;
    padding: 0 3px;
  }
  main .vergleich .table2 div.name:before {
    display: none;
  }
  main .vergleich .table2 div.logo {
    border-top: 1px solid #CCC;
    display: block;
    position: relative;
  }
  main .vergleich .table2 div.logo:after {
    color: #CCC;
    content: attr(data-label);
    position: absolute;
    top: 3px;
    right: 5px;
    font-size: 10px;
  }
  main .vergleich .table2 div.logo div {
    background: #FFF;
    border: none;
    display: flex;
    justify-content: center;
    padding: 20px 0 0 0;
    width: 100%;
  }
  main .vergleich .table2 div.logo div picture img {
    display: block;
    max-height: 30px;
  }
  main .vergleich .table2 div.logo img {
    max-width: 100%;
  }
  main .vergleich .table2 div.logo:before {
    display: none;
  }
  main .vergleich .table2 div.cta {
    display: block;
  }
  main .vergleich .table2 div.cta div {
    background: #FFF;
    align-items: center;
    border: none;
    border-bottom: 1px solid #CCC;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 15px 20px 15px 20px;
    width: 100%;
  }
  main .vergleich .table2 div.cta a {
    align-items: center;
    background: #DDD;
    background: #e91b2d;
    border-radius: 50px;
    display: flex;
    color: #333;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    height: 40px;
    padding: 0 20px;
    justify-content: center;
  }
  main .vergleich .table2 div.cta strong {
    display: block;
    font-size: 14px;
    font-weight: 500;
    margin: 5px 0 0 0;
  }
  main .vergleich .table2 div.cta:before {
    display: none;
  }
  main .vergleich .table2 div.bottom {
    background: #FFF;
    border-bottom: 1px solid #CCC;
    border-top: 1px solid #CCC;
    display: flex;
    display: none;
    margin: 0 0 20px 0;
    width: 100%;
    justify-content: center;
    align-items: center;
    position: relative;
  }
  main .vergleich .table2 div.bottom:after {
    color: #CCC;
    content: attr(data-label);
    position: absolute;
    top: 3px;
    right: 5px;
    font-size: 10px;
  }
  main .vergleich .table2 div.bottom div {
    background: transparent;
    border: none;
    width: auto;
    padding: 10px;
  }
  main .vergleich .table2 div.bottom div a {
    color: #FFF;
    display: flex;
    background: #333;
    border-radius: 50px;
    height: 40px;
    align-items: center;
    padding: 0 20px;
    font-weight: 700;
  }
  main .vergleich .table2 div.bottom:before {
    display: none;
  }
  main .vergleich .table2 div:before {
    background: #FFF;
    border-bottom: 1px solid #CCC;
    box-sizing: border-box;
    content: attr(data-label);
    display: table-cell;
    font-weight: 700;
    padding: 7px 10px;
    text-align: left;
    width: 50%;
    vertical-align: middle;
  }
  main .alternativen {
    margin: 50px 20px 0 20px;
  }
  main .alternativen .headline {
    font-size: 24px;
    font-weight: 900;
    padding: 0 0 15px 0;
  }
  main .alternativen .flexbox {
    display: flex;
    flex-direction: column;
    gap: 30px;
  }
  main .alternativen picture {
    align-items: center;
    display: flex;
    justify-content: center;
    width: 100%;
  }
  main .alternativen picture img {
    display: block;
    max-width: 100%;
  }
  main .alternativen picture.isolated img {
    max-height: 180px;
  }
  main .alternativen .dz-hl b {
    color: #e91b2d;
    display: block;
    font-size: 14px;
    font-weight: 900;
    padding: 17px 0 3px 0;
    text-transform: uppercase;
  }
  main .alternativen .dz-hl span {
    display: block;
    font-size: 22px;
    font-weight: 900;
    line-height: 24px;
  }
  main .alternativen p {
    line-height: 22px;
    margin: 0;
    padding: 10px 0 5px 0;
  }
  .teaser {
    padding: 60px 0 0 0;
  }
  .top-teaser {
    padding: 20px;
  }
  .top-teaser .img.isolated picture {
    background: yellow;
  }
  .top-teaser .img.isolated picture img {
    margin: auto;
    max-height: 200px;
  }
  .top-teaser picture img {
    display: block;
    max-width: 100%;
  }
  .top-teaser .headline span {
    color: #e91b2d;
    display: block;
    font-size: 14px;
    font-weight: 900;
    padding: 17px 0 3px 0;
    text-transform: uppercase;
  }
  .top-teaser .headline b {
    display: block;
    font-size: 26px;
    font-weight: 900;
    line-height: 28px;
  }
  .top-teaser .unten p {
    line-height: 22px;
    margin: 0;
    padding: 10px 0 5px 0;
  }
  .top-teaser .unten .link {
    display: none;
  }
  .top-teaser .right .top {
    padding: 30px 0 12px 0;
  }
  .top-teaser .right .top div {
    font-size: 24px;
    font-weight: 900;
    padding: 0 0 5px 0;
  }
  .top-teaser .right .top a {
    color: #e91b2d;
    font-weight: 500;
  }
  .top-teaser .right .top a:before {
    content: attr(data-before);
    padding: 2px 0;
  }
  .top-teaser .right ol {
    border-top: 1px solid #CCC;
    margin: 0;
    padding: 15px 0 0 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
  }
  .top-teaser .right ol li a {
    box-sizing: border-box;
    display: table;
    width: 100%;
  }
  .top-teaser .right ol li a:before {
    color: #e91b2d;
    content: attr(data-count);
    display: table-cell;
    font-size: 30px;
    font-weight: 900;
    vertical-align: middle;
    width: 25px;
    padding: 0 15px 0 0;
    text-align: center;
  }
  .top-teaser .right ol li b:after {
    content: attr(data-after);
  }
  .category-teaser {
    margin: 45px 0 0 0;
  }
  .category-teaser .block-top {
    padding: 0 20px 15px 20px;
  }
  .category-teaser .block-top .name {
    flex: 1;
    font-size: 24px;
    font-weight: 900;
    padding: 0 0 5px 0;
  }
  .category-teaser .block-top a {
    color: #e91b2d;
    font-weight: 500;
  }
  .category-teaser .block-top a:before {
    content: attr(data-before);
    padding: 2px 0;
  }
  .category-teaser .block-bottom {
    overflow: hidden;
    height: 40px;
  }
  .category-teaser .block-bottom ul {
    overflow-x: auto;
    display: flex;
    margin: 0;
    padding: 0 20px 0 10px;
    height: 50px;
  }
  .category-teaser .block-bottom ul li {
    white-space: nowrap;
    padding: 0 0 0 10px;
  }
  .category-teaser .block-bottom ul li a {
    background: #F1F6F8;
    border-radius: 50px;
    padding: 0 20px;
    height: 40px;
    display: flex;
    align-items: center;
  }
  .category-teaser .block-bottom ul li a span {
    white-space: nowrap;
    padding: 0 15px 0 0;
    position: relative;
  }
  .category-teaser .block-bottom ul li a span:after {
    content: "❯";
    display: inline-block;
    font-size: 11px;
    font-weight: 400;
    position: absolute;
    right: 0;
    top: 2px;
  }
  .category-teaser .left {
    border-top: 1px solid #CCC;
    margin: 20px 20px 20px 20px;
  }
  .category-teaser .left a {
    display: block;
    padding: 20px 0 0 0;
  }
  .category-teaser .left a picture img {
    display: block;
    max-width: 100%;
  }
  .category-teaser .left .text {
    margin: 0;
  }
  .category-teaser .right {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }
  .category-teaser .right a {
    display: block;
    padding: 0 20px;
  }
  .category-teaser .right a picture img {
    display: block;
    max-width: 100%;
  }
  .category-teaser .left picture img,
  .category-teaser .right picture img {
    display: block;
    max-width: 100%;
  }
  .category-teaser .left span,
  .category-teaser .right span {
    color: #e91b2d;
    display: block;
    font-size: 14px;
    font-weight: 900;
    padding: 17px 0 3px 0;
    text-transform: uppercase;
  }
  .category-teaser .left b,
  .category-teaser .right b {
    display: block;
    font-size: 22px;
    font-weight: 900;
    line-height: 24px;
  }
  .category-teaser .left p,
  .category-teaser .right p {
    line-height: 22px;
    margin: 0;
    padding: 10px 0 5px 0;
  }
  .three-teaser {
    margin: 50px 20px 0 20px;
  }
  .three-teaser .wrap {
    display: flex;
    flex-direction: column;
    gap: 30px;
  }
  .three-teaser picture {
    align-items: center;
    display: flex;
    justify-content: center;
    width: 100%;
  }
  .three-teaser picture img {
    display: block;
    max-width: 100%;
  }
  .three-teaser picture.isolated img {
    max-height: 180px;
  }
  .three-teaser span {
    color: #e91b2d;
    display: block;
    font-size: 14px;
    font-weight: 900;
    padding: 17px 0 3px 0;
    text-transform: uppercase;
  }
  .three-teaser b {
    display: block;
    font-size: 22px;
    font-weight: 900;
    line-height: 24px;
  }
  .three-teaser p {
    line-height: 22px;
    margin: 0;
    padding: 10px 0 5px 0;
  }
  .four-teaser {
    background: #F1F6F8;
    margin: 50px 0 0 0;
    padding: 0 20px 15px 20px;
  }
  .four-teaser .wrap {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .four-teaser span {
    color: #e91b2d;
    display: block;
    font-size: 14px;
    font-weight: 900;
    padding: 17px 0 3px 0;
    text-transform: uppercase;
  }
  .four-teaser b {
    display: block;
    font-size: 22px;
    font-weight: 900;
    line-height: 24px;
  }
  .four-teaser p {
    line-height: 22px;
    margin: 0;
    padding: 10px 0 5px 0;
  }
  .list-teaser {
    margin: 45px 20px 0 20px;
  }
  .list-teaser .top {
    padding: 30px 0 12px 0;
  }
  .list-teaser .top .name {
    font-size: 24px;
    font-weight: 900;
    padding: 0 0 5px 0;
  }
  .list-teaser .top a {
    color: #e91b2d;
    font-weight: 500;
  }
  .list-teaser .top a:before {
    content: attr(data-before);
    padding: 2px 0;
  }
  .list-teaser ol {
    border-top: 1px solid #CCC;
    margin: 0;
    padding: 15px 0 0 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
  }
  .list-teaser ol li a {
    box-sizing: border-box;
    display: table;
    width: 100%;
  }
  .list-teaser ol li a:before {
    color: #e91b2d;
    content: attr(data-count);
    display: table-cell;
    font-size: 30px;
    font-weight: 900;
    vertical-align: middle;
    width: 25px;
    padding: 0 15px 0 0;
    text-align: center;
  }
  .newsletter {
    background: #055063;
    margin: 50px 0 0 0;
    padding: 0 20px;
  }
  .newsletter .left {
    color: #FFF;
    padding: 15px 0;
  }
  .newsletter .left div {
    font-size: 22px;
    font-weight: 700;
  }
  .newsletter .left span {
    font-size: 14px;
    opacity: 0.5;
  }
  .newsletter .right {
    padding: 0 0 20px 0;
  }
  .newsletter .right form {
    position: relative;
  }
  .newsletter .right form input {
    background: #FFF;
    border: none;
    border-radius: 50px;
    box-sizing: border-box;
    font-family: inherit;
    height: 40px;
    padding: 0 15px;
    width: 100%;
  }
  .newsletter .right form button {
    background: #DDD url("https://supertest.de/img_2025/arrow-right.svg") no-repeat center center;
    border: none;
    border-radius: 50px;
    font-family: inherit;
    height: 36px;
    margin: 0;
    overflow: hidden;
    position: absolute;
    right: 2px;
    text-indent: -1000px;
    top: 2px;
    width: 60px;
  }
  footer .oben {
    padding: 13px 20px 13px 20px;
  }
  footer .oben img {
    display: none;
  }
  footer .oben ul {
    display: flex;
    font-size: 14px;
    flex-direction: column;
    gap: 5px;
    margin: 0;
    padding: 0;
  }
  footer .oben ul li {
    margin: 0;
    padding: 0;
  }
  footer .oben ul li a {
    background: url("https://supertest.de/img_2025/point.svg") no-repeat center left/10px 10px;
    display: inline-block;
    padding: 5px 10px 5px 15px;
  }
  footer .unten p {
    font-size: 14px;
    font-weight: 500;
    margin: 0;
    padding: 0 20px 15px 20px;
  }
  footer .unten p:before {
    color: #CCC;
    content: "Wir verwenden Cookies, um ein optimales Webseitenerlebnis zu ermöglichen. Über unsere Datenschutzerklärung können Sie sich austragen (Opt-out). Wir sind ein unabhängiges Verbraucherportal. Unser Netzwerk aus Experten recherchiert, testet und vergleicht alle Produkte objektiv. Mit unserer Erfahrung und unserem breiten Netzwerk decken wir verschiedene Segmente optimal ab. Auf unserem Portal finden Sie keine von Herstellern finanzierten Inhalte. Wir finanzieren uns ausschließlich über Anzeigen und Affiliate-Links, bei denen von dem verlinkten Shop ggf. eine Vergütung erhalten. Für unsere Nutzer entstehen zu keinem Zeitpunkt Kosten. Alle Produkte wurden von uns selbst getestet.";
    display: block;
    font-size: 12px;
    font-weight: 400;
    line-height: 15px;
    padding: 0 0 13px 0;
  }
  footer .unten span {
    background: rgb(174.2, 215, 91);
    color: #FFF;
    color: green;
    display: block;
    font-size: 14px;
    font-weight: 500;
    padding: 10px 20px;
  }
}