@charset "UTF-8";
x#grid {
  display: flex;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  gap: 20px;
  justify-content: center;
  opacity: 0.2;
  z-index: 999;
}
x#grid div {
  background: blue;
  height: 10000px;
  width: 180px;
}

html, body {
  background: #FFF;
  color: #333;
  font-family: "Public Sans", Roboto, Montserrat, "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: 768px) {
  button[data-type=nav] {
    display: none;
  }
  .skip-link-top {
    background: #333;
    color: #FFF;
    display: block;
    font-weight: 600;
    height: 0;
    overflow: hidden;
    text-align: center;
    text-decoration: underline;
    text-decoration-color: #fa3707;
    text-decoration-thickness: 2px;
    text-underline-offset: 2px;
    width: 0;
    z-index: 900;
  }
  .skip-link-top:focus-visible {
    box-sizing: border-box;
    height: auto;
    padding: 15px;
    outline: none;
    overflow: visible;
    position: absolute;
    width: 100%;
  }
  header {
    /* Logo und Login */
  }
  header .top {
    display: flex;
    justify-content: center;
    padding: 0 10px;
  }
  header .top .wrap {
    display: flex;
    justify-content: space-between;
    max-width: 1200px;
    width: 100%;
  }
  header .top .logo {
    padding: 14px 0 9px 0;
  }
  header .top .logo a {
    display: block;
    padding: 10px;
  }
  header .top .logo a svg {
    display: block;
  }
  header .top .logo a:focus-visible {
    outline: 2px dashed #999;
    border-radius: 5px;
  }
  header .top .search {
    display: none;
  }
  header .top .meta {
    align-items: center;
    display: flex;
    font-weight: 400;
    gap: 10px;
    padding: 0 10px;
  }
  header .top .meta a {
    border-radius: 5px;
    line-height: 40px;
    padding: 0 15px;
  }
  header .top .meta a:hover {
    text-decoration: underline;
    text-decoration-color: #fa3707;
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
  }
  header .top .meta a:focus-visible {
    outline: 2px dashed #999;
    text-decoration: none;
  }
  header .top .meta .login {
    background: #333;
    color: #FFF;
  }
  header .top .meta .login:hover {
    background: #fa3707;
    text-decoration: none;
  }
  header .top .meta .login:focus-visible {
    background: #EEE;
    color: #333;
    outline: 2px dashed #999;
  }
  header {
    /* Navigation */
  }
  header .nav {
    display: flex;
    justify-content: center;
    padding: 0 20px;
  }
  header .nav .wrap {
    background: #F3F3F6;
    border-radius: 5px;
    box-sizing: border-box;
    display: flex;
    height: 50px;
    width: 100%;
    max-width: 1180px;
    padding: 0 10px;
  }
  header .nav ul {
    display: flex;
    padding: 0;
    gap: 20px;
    margin: 0;
  }
  header .nav ul li {
    display: flex;
    align-items: center;
    position: relative;
  }
  header .nav ul li svg {
    display: block;
  }
  header .nav ul li a {
    align-items: center;
    font-weight: 600;
    display: flex;
    gap: 5px;
    padding: 7px 10px;
  }
  header .nav ul li a.a span, header .nav ul li a:hover span {
    text-decoration: underline;
    text-decoration-color: #fa3707;
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
  }
  header .nav ul li a:focus-visible {
    outline: 2px dashed #999;
    border-radius: 5px;
  }
  header .open-nav {
    display: none;
  }
  header .open-nav:after {
    background: #000;
    bottom: 0;
    content: "";
    left: 0;
    opacity: 0.5;
    position: fixed;
    right: 0;
    top: 0;
    width: 100%;
    z-index: 20;
  }
  header .open-nav .first {
    background: #FFF;
    bottom: 0;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
    box-sizing: border-box;
    left: 0;
    position: fixed;
    top: 0;
    width: 300px;
    z-index: 40;
  }
  header .open-nav .first ul {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
    padding: 16px 20px;
  }
  header .open-nav .first ul li {
    align-items: center;
    display: flex;
    position: relative;
  }
  header .open-nav .first ul li.more:after {
    border-top: 2px solid #666;
    border-right: 2px solid #666;
    content: "";
    height: 6px;
    position: absolute;
    right: 0;
    top: 15px;
    rotate: 45deg;
    width: 6px;
  }
  header .open-nav .first ul li a {
    align-items: center;
    font-weight: 600;
    display: flex;
    gap: 5px;
    padding: 7px 10px;
  }
  header .open-nav .first ul li a.a span, header .open-nav .first ul li a:hover span {
    text-decoration: underline;
    text-decoration-color: #fa3707;
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
  }
  header .open-nav .first ul li a:focus-visible {
    outline: 2px dashed #999;
    border-radius: 5px;
  }
  header .open-nav .second {
    background: #FFF;
    bottom: 0;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
    left: 300px;
    position: fixed;
    top: 0;
    width: 300px;
    z-index: 30;
  }
  header .open-nav .second ul {
    display: flex;
    flex-direction: column;
    gap: 40px;
    margin: 0;
    padding: 20px 25px;
  }
  header .open-nav .second ul span {
    font-size: 20px;
    font-weight: 700;
  }
  header .open-nav .second ul li .sub {
    gap: 0;
    padding: 0;
  }
  header .open-nav .second ul li .sub li {
    padding: 12px 0 0 12px;
  }
  header .open-nav .second ul li .sub li a {
    display: flex;
    padding: 4px 8px;
    width: -moz-fit-content;
    width: fit-content;
  }
  header .open-nav .second ul li .sub li a:focus-visible {
    border-radius: 5px;
    outline: 2px dashed #fa3707;
  }
  header .open-nav .second ul li .sub li a:hover {
    text-decoration: underline;
    text-decoration-color: #fa3707;
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
  }
  header {
    /* Breadcrumb */
  }
  header .bc {
    display: flex;
    justify-content: center;
    padding: 0 10px;
  }
  header .bc ul {
    display: flex;
    gap: 5px;
    margin: 0;
    padding: 10px 5px 0 5px;
    max-width: 1190px;
    width: 100%;
  }
  header .bc li {
    background: url("../img/arrow-grey.svg") no-repeat center left/20px 20px;
    display: flex;
    font-size: 14px;
    font-weight: 400;
    padding: 0 0 0 25px;
  }
  header .bc li:first-child {
    background: none;
    padding: 0;
  }
  header .bc a {
    padding: 5px;
  }
  header .bc a:hover {
    text-decoration: underline;
    text-decoration-color: #fa3707; /* Farbe der Linie */
    text-decoration-thickness: 2px; /* Dicke der Linie */
    text-underline-offset: 3px;
  }
  header .bc a:focus-visible {
    border-radius: 5px;
    outline: 2px dashed #999;
    text-decoration: none;
  }
  .section-top {
    padding: 0 0 40px 0;
  }
  .section-top .top {
    align-items: center;
    border-bottom: 1px solid #CCC;
    display: flex;
    justify-content: space-between;
    margin: 0 10px;
  }
  .section-top .top .name {
    font-size: 24px;
    font-weight: 800;
    padding: 5px 0;
  }
  .section-top .top .more {
    background: url("../img/arrow-red.svg") no-repeat left 7px center/20px 20px;
    border-radius: 5px;
    color: #fa3707;
    font-weight: 600;
    height: 40px;
    line-height: 40px;
    padding: 0 10px 0 30px;
  }
  .section-top .top .more:hover {
    color: #333;
    text-decoration: underline;
    text-decoration-color: #fa3707;
    text-decoration-thickness: 2px;
    text-underline-offset: 2px;
  }
  .section-top .top .more:focus-visible {
    background-image: url("../img/arrow-grey.svg");
    color: #666;
    outline: 2px dashed #999;
  }
  .section-top ul {
    display: flex;
    gap: 10px;
    margin: 0;
    padding: 10px 10px 0 10px;
  }
  .section-top ul li {
    display: flex;
  }
  .section-top ul li a {
    background: #F3F3F6 url("../img/arrow-grey.svg") no-repeat center right 10px/20px 20px;
    border-radius: 5px;
    height: 40px;
    line-height: 40px;
    padding: 0 35px 0 15px;
  }
  .section-top ul li a:hover {
    background-color: #333;
    background-image: url("../img/arrow-white.svg");
    color: #FFF;
  }
  .section-top ul li a:focus-visible {
    outline: 2px dashed #999;
  }
  .section-top .items {
    display: grid;
    grid-template-columns: 4fr 2fr;
  }
  .section-top .items .left a {
    display: block;
    padding: 10px;
    position: relative;
  }
  .section-top .items .left a:hover .hl {
    text-decoration: underline;
    text-decoration-color: #fa3707;
    text-decoration-thickness: 3px;
    text-underline-offset: 3px;
  }
  .section-top .items .left a:focus-visible {
    border-radius: 5px;
    outline: 2px dashed #999;
  }
  .section-top .items .left a .img picture {
    aspect-ratio: 780/500;
    display: flex;
  }
  .section-top .items .left a .img picture img {
    border-radius: 5px;
    display: block;
    height: auto;
    -o-object-fit: cover;
       object-fit: cover;
    overflow: hidden;
    width: 100%;
  }
  .section-top .items .left a .img.isolated picture img {
    -o-object-fit: contain;
       object-fit: contain;
  }
  .section-top .items .left a .inner {
    box-sizing: border-box;
    bottom: 5px;
    left: 0;
    position: absolute;
    width: 75%;
  }
  .section-top .items .left a .inner div {
    background: #FFF;
    border-top-right-radius: 5px;
    margin: 0 10px;
    padding: 10px 20px 0 0;
  }
  .section-top .items .left a .inner .dz {
    color: #fa3707;
    display: block;
    font-size: 20px;
    font-weight: 700;
    padding: 10px 0 7px 0;
  }
  .section-top .items .left a .inner .hl {
    display: block;
    font-size: 36px;
    font-weight: 900;
    line-height: 36px;
  }
  .section-top .items .left .text p {
    font-size: 18px;
    line-height: 1.5;
    margin: 0;
    padding: 13px 10px 0 10px;
  }
  .section-top .items .left.sub .inner .dz {
    font-size: 18px;
    padding: 10px 0 5px 0;
  }
  .section-top .items .left.sub .inner .hl {
    font-size: 30px;
    line-height: 30px;
  }
  .section-top .items .left.sub .text {
    display: grid;
    grid-template-columns: 3fr 1fr;
  }
  .section-top .items .left.sub .text p {
    font-size: 16px;
    padding: 10px 10px 0 10px;
  }
  .section-top .items .left.sub .text span {
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    padding: 10px 10px 4px 10px;
  }
  .section-top .items .left.sub .text span a {
    background: #fa3707 url("../img/arrow-white.svg") no-repeat center left 10px/20px 20px;
    border-radius: 5px;
    color: #FFF;
    height: 40px;
    line-height: 40px;
    padding: 0 15px 0 35px;
  }
  .section-top .items .left.sub .text span a:hover {
    background-color: #333;
  }
  .section-top .items .left.sub .text span a:focus-visible {
    background-color: #F3F3F6;
    background-image: url("../img/arrow-grey.svg");
    color: #333;
  }
  .section-top .items .toplist {
    padding: 10px;
  }
  .section-top .items .toplist div {
    font-size: 24px;
    font-weight: 800;
    padding: 0 0 15px 0;
  }
  .section-top .items .toplist ol {
    display: grid;
    grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
    margin: 0;
    padding: 0;
    gap: 30px;
  }
  .section-top .items .toplist ol li {
    display: flex;
  }
  .section-top .items .toplist ol li a {
    display: table;
    width: 100%;
  }
  .section-top .items .toplist ol li a:hover i {
    text-decoration: underline;
    text-decoration-color: #fa3707;
    text-decoration-thickness: 2px;
    text-underline-offset: 2px;
  }
  .section-top .items .toplist ol li a:focus-visible {
    border-radius: 5px;
    outline: 2px dashed #999;
  }
  .section-top .items .toplist ol li a span {
    display: table-cell;
    font-size: 16px;
    vertical-align: middle;
    padding: 0 0 0 20px;
  }
  .section-top .items .toplist ol li a span b {
    display: block;
    font-size: 20px;
  }
  .section-top .items .toplist ol li a span i {
    font-style: normal;
  }
  .section-top .items .toplist ol li a:before {
    color: #fa3707;
    content: attr(data-count);
    font-size: 50px;
    font-weight: 900;
    width: 45px;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
  }
  .section-top .items .further {
    display: flex;
    flex-direction: column;
  }
  .section-top .items .further a {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    padding: 10px;
    align-items: center;
  }
  .section-top .items .further a:hover div span {
    text-decoration: underline;
    text-decoration-color: #fa3707;
    text-decoration-thickness: 2px;
    text-underline-offset: 2px;
  }
  .section-top .items .further a:focus-visible {
    border-radius: 5px;
    outline: 2px dashed #999;
  }
  .section-top .items .further a picture {
    display: flex;
    aspect-ratio: 180/110;
  }
  .section-top .items .further a picture img {
    border-radius: 5px;
    display: block;
    height: auto;
    -o-object-fit: cover;
       object-fit: cover;
    width: 100%;
  }
  .section-top .items .further a div {
    line-height: 22px;
  }
  .section-top .items .further a div b {
    font-weight: 700;
  }
  .section-top .items .further a div b:after {
    content: attr(data-after);
  }
  .section-bottom .wrap {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
  }
  .section-bottom .wrap a {
    display: flex;
    flex-direction: column;
    margin: 0 0 40px 0;
    padding: 10px;
  }
  .section-bottom .wrap a:hover em {
    text-decoration: underline;
    text-decoration-color: #fa3707;
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
  }
  .section-bottom .wrap a:focus-visible {
    border-radius: 5px;
    outline: 2px dashed #999;
  }
  .section-bottom .wrap a .lft {
    display: flex;
  }
  .section-bottom .wrap a .lft.isolated picture img {
    -o-object-fit: contain;
       object-fit: contain;
  }
  .section-bottom .wrap a .lft picture {
    display: flex;
    aspect-ratio: 180/110;
  }
  .section-bottom .wrap a .lft picture img {
    border-radius: 5px;
    display: block;
    height: auto;
    -o-object-fit: cover;
       object-fit: cover;
    width: 100%;
  }
  .section-bottom .wrap a .rgt b {
    color: #fa3707;
    display: block;
    font-size: 16px;
    padding: 10px 0 0 0;
  }
  .section-bottom .wrap a .rgt em {
    font-size: 24px;
    display: block;
    font-style: normal;
    font-weight: 800;
    line-height: 28px;
    padding: 3px 0 10px 0;
  }
  .section-bottom .wrap a .rgt p {
    font-size: 16px;
    line-height: 22px;
    margin: 0;
  }
  .section-bottom .wrap img {
    max-width: 100%;
  }
  .pagination {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
    padding: 0 10px;
  }
  .pagination a, .pagination b, .pagination span {
    align-items: center;
    background: #F3F3F6;
    border-radius: 5px;
    display: flex;
    height: 40px;
    justify-content: center;
    min-width: 40px;
  }
  .pagination a:hover {
    background: #fa3707;
    color: #FFF;
  }
  .pagination a:focus-visible {
    outline: 2px dashed #999;
  }
  .pagination b {
    background: #333;
    color: #FFF;
    font-weight: 600;
  }
  .pagination span {
    background: none;
    color: #666;
    min-width: auto;
  }
  .pagination span:before {
    content: "...";
  }
  #gallery {
    background: #F3F3F6;
  }
  #gallery .back {
    display: flex;
    justify-content: center;
    padding: 0 10px;
  }
  #gallery .back .wrap {
    display: flex;
    justify-content: space-between;
    max-width: 1200px;
    width: 100%;
  }
  #gallery .back .logo {
    padding: 14px 0 9px 0;
  }
  #gallery .back .logo a {
    display: block;
    padding: 10px;
  }
  #gallery .back .logo a svg {
    display: block;
  }
  #gallery .back .logo a:focus-visible {
    outline: 2px dashed #999;
    border-radius: 5px;
  }
  #gallery .back .close {
    align-items: center;
    display: flex;
  }
  #gallery .back .close a {
    background: #333;
    border-radius: 50%;
    height: 40px;
    margin: 10px;
    position: relative;
    width: 40px;
  }
  #gallery .back .close a:before, #gallery .back .close a:after {
    content: "";
    position: absolute;
    width: 20px;
    height: 2px;
    background: #FFF;
    top: 50%;
    left: 50%;
    margin-left: -10px;
    margin-top: -1px;
  }
  #gallery .back .close a:before {
    transform: rotate(45deg);
  }
  #gallery .back .close a:after {
    transform: rotate(-45deg);
  }
  #gallery .back .close a:hover {
    background: #999;
    text-decoration: none;
  }
  #gallery .back .close a:focus-visible {
    background: #EEE;
    color: #333;
    outline: 2px dashed #999;
  }
  #gallery .back .close a:focus-visible:before, #gallery .back .close a:focus-visible:after {
    background: #666;
  }
  #gallery .images {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    margin: auto;
    max-width: 1220px;
    width: 100%;
  }
  #gallery .images .top {
    padding: 5px 10px 30px 10px;
  }
  #gallery .images .top h1 {
    color: #fa3707;
    font-size: 20px;
    font-weight: 700;
    margin: 0;
    padding: 0 10px;
  }
  #gallery .images .top h2 {
    font-size: 48px;
    font-weight: 900;
    margin: 0;
    padding: 0 10px;
  }
  #gallery .images .inner {
    padding: 0 10px;
  }
  #gallery .images dl {
    background: #FFF;
    border-radius: 5px;
    display: grid;
    grid-template-columns: 3fr 1fr;
    overflow: hidden;
    margin: 0 10px 40px 10px;
  }
  #gallery .images dl dt picture div {
    display: flex;
    aspect-ratio: 3/2;
    overflow: hidden;
  }
  #gallery .images dl dt picture div.isolated {
    box-sizing: border-box;
    padding: 40px;
  }
  #gallery .images dl dt picture div.isolated img {
    -o-object-fit: contain;
       object-fit: contain;
  }
  #gallery .images dl dt picture div img {
    display: block;
    height: auto;
    -o-object-fit: cover;
       object-fit: cover;
    width: 100%;
  }
  #gallery .images dl dd {
    margin: 0;
    padding: 15px 20px 15px 40px;
  }
  #gallery .images dl dd span {
    font-weight: 700;
  }
  #gallery .images dl dd p {
    line-height: 1.5;
    position: relative;
  }
  #gallery .images dl dd p a {
    margin: -2px;
    padding: 2px;
    text-decoration: underline;
    text-decoration-color: #fa3707;
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
  }
  #gallery .images dl dd p a:hover {
    color: #fa3707;
  }
  #gallery .images dl dd p a:focus-visible {
    border-radius: 5px;
    outline: 2px dashed #fa3707;
    text-decoration: none;
  }
  #gallery .images dl dd p:after {
    border-bottom: 7px solid transparent;
    border-right: 12px solid #CCC;
    border-top: 7px solid transparent;
    content: "";
    left: -25px;
    position: absolute;
    top: 6px;
  }
  #gallery .images dl dd .credit {
    color: #CCC;
    font-size: 12px;
  }
  #gallery .images dl dd .ds {
    color: #CCC;
    display: block;
    font-size: 12px;
  }
  #gallery .images dl dd .ds:before {
    content: "Bild: ";
  }
  #gallery .images dl dd .ds:after {
    content: "Daniel Smolcic";
  }
  #gallery .images .button {
    display: flex;
    font-weight: 400;
    padding: 0 0 40px 0;
    justify-content: center;
  }
  #gallery .images .button a {
    background: #333;
    border-radius: 5px;
    color: #FFF;
    line-height: 40px;
    padding: 0 15px;
  }
  #gallery .images .button a:hover {
    background: #999;
    text-decoration: none;
  }
  #gallery .images .button a:focus-visible {
    background: #EEE;
    color: #333;
    outline: 2px dashed #999;
  }
  #body {
    display: flex;
    justify-content: center;
    margin: 25px 0 0 0;
    padding: 0 10px;
  }
  #body .wrap {
    max-width: 1200px;
    width: 100%;
  }
  #body article #hero .h1 {
    color: #fa3707;
    display: block;
    font-size: 20px;
    font-weight: 700;
    max-width: 980px;
    padding: 0 10px;
    width: 100%;
  }
  #body article #hero .h2 {
    font-size: 48px;
    font-weight: 900;
    margin: 0 0 20px 0;
    max-width: 980px;
    padding: 0 10px;
  }
  #body article #hero p {
    font-size: 24px;
    font-weight: 700;
    line-height: 1.5;
    margin: 20px 0;
    max-width: 980px;
    padding: 0 10px;
  }
  #body article #hero .meta {
    color: #666;
    display: flex;
    font-size: 14px;
    font-weight: 400;
    margin: 25px 0 30px 0;
    max-width: 980px;
    padding: 0 10px;
  }
  #body article #hero .meta .me:after {
    content: attr(data-author);
  }
  #body article #hero .meta span:before {
    content: "·";
    font-weight: 600;
    margin: 0 8px;
  }
  #body article #hero .meta span:first-child::before {
    display: none;
  }
  #body article #hero .meta a {
    color: #333;
  }
  #body article #hero .meta a:hover {
    text-decoration: underline;
    text-decoration-color: #fa3707; /* Farbe der Linie */
    text-decoration-thickness: 2px; /* Dicke der Linie */
    text-underline-offset: 3px;
  }
  #body article #hero .meta a:focus-visible {
    border-radius: 5px;
    outline: 2px dashed #999;
  }
  #body article #images {
    display: grid;
    grid-template-columns: 5fr 1fr;
  }
  #body article #images .big {
    padding: 0 10px;
  }
  #body article #images .big a {
    aspect-ratio: 980/540;
    border-radius: 5px;
    display: block;
    overflow: hidden;
    width: 100%;
  }
  #body article #images .big a img {
    -o-object-fit: cover;
       object-fit: cover;
  }
  #body article #images .big a.isolated img {
    -o-object-fit: contain;
       object-fit: contain;
  }
  #body article #images .small {
    display: grid;
    gap: 20px;
    padding: 0 10px;
  }
  #body article #images .small a {
    aspect-ratio: 180/120;
    border-radius: 5px;
    display: block;
    width: 100%;
    overflow: hidden;
  }
  #body article #images .small a img {
    -o-object-fit: cover;
       object-fit: cover;
  }
  #body article #images .small a.isolated img {
    -o-object-fit: contain;
       object-fit: contain;
  }
  #body article #images .small a.more {
    align-items: flex-end;
    background: #F3F3F6;
    border: 2px solid #CCC;
    box-sizing: border-box;
    display: flex;
    font-weight: 600;
    justify-content: right;
    padding: 17px 20px;
  }
  #body article #images .small a.more span {
    background: url("../img/arrow-grey.svg") no-repeat left center;
    display: flex;
    padding: 0 0 0 30px;
  }
  #body article #images .small a.more:hover {
    background: #FFF;
    border-color: #DDD;
  }
  #body article #images .small a.more:focus-visible {
    background: #FFF;
    border: 2px dashed #999;
    outline: none;
  }
  #body article #images img,
  #body article #images a.more {
    width: 100%;
    height: 100%;
    display: block;
  }
  #body article #images a.more:hover {
    text-decoration: underline;
    text-decoration-color: #fa3707;
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
  }
  #body article #image {
    display: flex;
    margin: 0 10px;
    justify-content: center;
    position: relative;
  }
  #body article #image:after {
    color: #CCC;
    content: attr(data-credit);
    font-size: 11px;
    left: 100%;
    position: absolute;
    top: 0;
    transform-origin: top left;
    transform: rotate(-90deg) translateX(-100%);
    white-space: nowrap;
  }
  #body article #image.isolated {
    box-sizing: border-box;
    padding: 0 0 20px 0;
  }
  #body article #image.isolated img {
    max-height: 600px;
  }
  #body article #image a {
    display: block;
  }
  #body article #image a:focus-visible {
    border-radius: 5px;
    outline: 2px dashed #999;
  }
  #body article #image img {
    border-radius: 5px;
    display: block;
    max-width: 100%;
    overflow: hidden;
  }
  #body article #content {
    align-items: stretch; /* Wichtig: Sorgt dafür, dass #left so hoch wie #center ist */
    display: flex;
    position: relative;
  }
  #body article #content #left {
    flex-shrink: 0;
    width: 200px;
  }
  #body article #content #left .toc {
    position: sticky;
    top: 0;
    padding: 25px 10px;
  }
  #body article #content #left .toc #toc-details summary {
    list-style: none;
    font-size: 24px;
    font-weight: 700;
    position: relative;
    pointer-events: none;
  }
  #body article #content #left .toc #toc-details summary:after {
    background: #fa3707;
    top: 4px;
    content: "";
    height: 21px;
    left: -15px;
    position: absolute;
    width: 5px;
  }
  #body article #content #left .toc #toc-details ol {
    counter-reset: toc-counter;
    display: flex;
    flex-direction: column;
    font-weight: 600;
    font-weight: 400;
    gap: 10px;
    padding: 0;
  }
  #body article #content #left .toc #toc-details ol li {
    counter-increment: toc-counter;
  }
  #body article #content #left .toc #toc-details ol li:before {
    content: counter(toc-counter) ". ";
  }
  #body article #content #left .toc #toc-details ol li.a {
    color: #fa3707;
    font-weight: 700;
  }
  #body article #content #left .toc #toc-details ol li a:hover {
    text-decoration: underline;
    text-decoration-color: #fa3707; /* Farbe der Linie */
    text-decoration-thickness: 2px; /* Dicke der Linie */
    text-underline-offset: 3px;
  }
  #body article #content #center {
    flex-grow: 1;
  }
  #body article #content #center .article-grid {
    display: flex;
  }
  #body article #content #center .article-grid .main {
    width: 100%;
  }
  #body article #content #center .article-grid .right {
    flex-shrink: 0;
    width: 200px;
  }
  #body article #content #center .article-grid .right .facts {
    display: flex;
    flex-direction: column;
    gap: 30px;
    padding: 25px 10px;
  }
  #body article #content #center .article-grid .right dl {
    margin: 0;
    padding: 0;
  }
  #body article #content #center .article-grid .right dl dt {
    font-weight: 700;
    padding: 0 0 5px 0;
  }
  #body article #content #center .article-grid .right dl dd {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin: 0;
    padding: 0;
  }
  #body article #content #center .article-grid .right dl dd a {
    background: #F3F3F6;
    border-radius: 5px;
    padding: 5px 10px;
  }
  #body article #content #center .article-grid .right dl dd a:hover {
    background: #fa3707;
    color: #FFF;
  }
  #body article #content #center .article-grid .right dl dd a:focus {
    background: transparent;
    outline: 2px dashed #999;
  }
  #body article #content #center h3 {
    font-size: 24px;
    font-weight: 700;
    margin: 25px 0 10px 0;
    position: relative;
  }
  #body article #content #center h3.indent {
    margin-left: 10px;
  }
  #body article #content #center h3:before {
    background: #fa3707;
    top: 4px;
    content: "";
    height: 21px;
    left: -15px;
    position: absolute;
    width: 5px;
  }
  #body article #content #center .verdict {
    background: #F3F3F6;
    border-radius: 5px;
    display: flex;
    gap: 20px;
    margin: 20px 10px 25px 10px;
    padding: 0 20px 35px 0;
  }
  #body article #content #center .verdict .grid-1 {
    width: 140px;
    flex-shrink: 0;
  }
  #body article #content #center .verdict .grid-3 {
    flex-grow: 1;
    padding: 0 0 0 40px;
  }
  #body article #content #center .verdict .circle {
    align-items: center;
    /* Konischer Verlauf: Er startet oben (from 0deg) und verteilt die Farben */
    background: conic-gradient(var(--farbe1) 0% var(--anteil), var(--farbe2) var(--anteil) 100%);
    border: 6px solid #333;
    border-radius: 50%;
    display: flex;
    height: 100px;
    justify-content: center;
    position: relative;
    width: 100px;
    margin: 25px 50px;
    box-sizing: border-box;
    /* Das "Loch" in der Mitte, um den Rand-Effekt zu erzeugen */
  }
  #body article #content #center .verdict .circle:before {
    background: #333;
    border-radius: 50%;
    content: "";
    height: calc(100% - 10px);
    position: absolute;
    width: calc(100% - 10px);
  }
  #body article #content #center .verdict .circle div {
    color: #FFF;
    display: flex;
    gap: 2px;
    position: absolute;
  }
  #body article #content #center .verdict .circle div span {
    font-size: 26px;
    font-weight: 800;
  }
  #body article #content #center .verdict .circle div span:last-child {
    font-size: 12px;
    padding: 4px 0 0 0;
  }
  #body article #content #center .verdict h4 {
    font-size: 30px;
    font-weight: 800;
    margin: 0;
    padding: 35px 0 5px 0;
  }
  #body article #content #center .verdict .best-for {
    display: flex;
    font-weight: 400;
    gap: 10px;
  }
  #body article #content #center .verdict .best-for a {
    color: #666;
    text-decoration: underline;
    text-decoration-color: #DDD;
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
  }
  #body article #content #center .verdict .best-for a:hover {
    text-decoration-color: #fa3707;
  }
  #body article #content #center .verdict h5 {
    font-size: 24px;
    font-weight: 700;
    margin: 0;
    padding: 30px 0 10px 0;
  }
  #body article #content #center .verdict dl {
    align-items: center; /* Vertikale Zentrierung */
    -moz-column-gap: 20px;
         column-gap: 20px; /* Abstand zwischen dt und dd */
    display: grid;
    grid-template-columns: 140px 1fr;
    margin: 0;
    padding: 0 0 5px 0;
    row-gap: 10px; /* Abstand zwischen den Zeilen */
  }
  #body article #content #center .verdict dl dt {
    font-weight: 400;
    flex-shrink: 0;
    margin: 0;
    width: 180px;
  }
  #body article #content #center .verdict dl dd {
    display: flex;
    align-items: center;
    gap: 20px;
    margin: 0;
  }
  #body article #content #center .verdict dl dd .bar {
    flex-grow: 1; /* Der Balken nimmt den verfügbaren Platz im dd ein */
    height: 8px;
    background: #FFF;
    border-radius: 5px;
    overflow: hidden;
  }
  #body article #content #center .verdict dl dd .bar span {
    background: #fa3707;
    border-radius: 5px;
    display: block;
    height: 8px;
    width: 10px;
  }
  #body article #content #center .verdict dl .rating {
    color: #999;
    font-weight: 400;
  }
  #body article #content #center .verdict dl .rating span {
    color: #333;
    font-weight: 700;
  }
  #body article #content #center .verdict .pro-contra.split {
    display: flex;
    padding: 0 15px 0 0;
    gap: 40px;
  }
  #body article #content #center .verdict .pro-contra.split .lft,
  #body article #content #center .verdict .pro-contra.split .rgt {
    width: 50%;
  }
  #body article #content #center .verdict .pro-contra .hl {
    background: url("../img/pro.svg") no-repeat;
    font-size: 24px;
    font-weight: 700;
    margin: 30px 0 10px 0;
    padding: 0 0 0 45px;
  }
  #body article #content #center .verdict .pro-contra .hl.contra {
    background: url("../img/contra.svg") no-repeat;
  }
  #body article #content #center .verdict .pro-contra ul {
    display: flex;
    flex-direction: column;
    font-size: 16px;
    font-weight: 400;
    gap: 10px;
    margin: 0;
    padding: 0 0 0 46px;
  }
  #body article #content #center .verdict .pro-contra ul li {
    padding: 0 0 0 15px;
    position: relative;
  }
  #body article #content #center .verdict .pro-contra ul li:before {
    background: #333;
    border-radius: 50%;
    content: "";
    height: 5px;
    left: 0;
    position: absolute;
    top: 8px;
    width: 5px;
  }
  #body article #content #center .text {
    padding: 0 210px 0 10px;
  }
  #body article #content #center .text p {
    font-size: 18px;
    line-height: 1.5;
  }
  #body article #content #center .text p a, #body article #content #center .text ul a {
    padding: 2px;
    margin: -2px;
    text-decoration: underline;
    text-decoration-color: #fa3707; /* Farbe der Linie */
    text-decoration-thickness: 2px; /* Dicke der Linie */
    text-underline-offset: 3px;
  }
  #body article #content #center .text p a:hover, #body article #content #center .text ul a:hover {
    color: #fa3707;
  }
  #body article #content #center .text p a:focus-visible, #body article #content #center .text ul a:focus-visible {
    background: #FFF;
    border-radius: 5px;
    outline: 2px dashed #fa3707;
    text-decoration: none;
  }
  #body article #content #center .text ul {
    display: flex;
    flex-direction: column;
    font-size: 18px;
    gap: 10px;
    list-style: disc;
    margin: 0 0 0 20px;
    padding: 0;
  }
  #body article #content #center .text ul ul {
    padding: 0 0 10px 0;
  }
  #body article #content #center .text ul li {
    line-height: 1.5;
    padding: 5px 0 0 0;
  }
  #body article #content #center .text .summary p {
    font-weight: 700;
  }
  #body article #content #center .text .summary p strong {
    font-weight: 700;
  }
  #body article #content #center .text dl {
    display: flex;
    flex-direction: column;
    position: relative;
  }
  #body article #content #center .text dl dt {
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    overflow: hidden;
  }
  #body article #content #center .text dl dd {
    background: #F3F3F6;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    color: #666;
    font-size: 16px;
    line-height: 22px;
    margin: 0;
    padding: 8px 15px;
  }
  #body article #content #center .text dl _span {
    color: #666;
    display: block;
    font-size: 11px;
    font-weight: 400;
    opacity: 0.65;
    padding: 3px 0 0 0;
    position: absolute;
    right: 15px;
    top: 0;
    transform: rotate(270deg);
    transform-origin: 100% 0;
  }
  #body article #content #center .text dl _span:before {
    content: "Bild: ";
  }
  #body article #content #center .text dl _span.me:after {
    content: "Daniel Smolcic";
  }
  #body article #content #center .text dl img {
    display: block;
    max-width: 100%;
  }
  #body article #content #center .text .klima {
    padding: 0 0 20px 0;
  }
  #body article #content #center .text .klima table {
    display: block;
    font-size: 14px;
    width: 100%;
  }
  #body article #content #center .text .klima table .t1 {
    background: #6CF;
  }
  #body article #content #center .text .klima table .t2 {
    background: #8DF;
  }
  #body article #content #center .text .klima table .t3 {
    background: #AEF;
  }
  #body article #content #center .text .klima table .t4 {
    background: #CFF;
  }
  #body article #content #center .text .klima table .t5 {
    background: #FF9;
  }
  #body article #content #center .text .klima table .t6 {
    background: #FC6;
  }
  #body article #content #center .text .klima table .t7 {
    background: #FB5;
  }
  #body article #content #center .text .klima table .t8 {
    background: #FA4;
  }
  #body article #content #center .text .klima table .t9 {
    background: #F93;
  }
  #body article #content #center .text .klima table .t10 {
    background: #F82;
  }
  #body article #content #center .text .klima table .t11 {
    background: #F71;
  }
  #body article #content #center .text .klima table .t12 {
    background: #F60;
  }
  #body article #content #center .text .klima table .s1 {
    background: #FFC;
  }
  #body article #content #center .text .klima table .s2 {
    background: #FFFAB9;
  }
  #body article #content #center .text .klima table .s3 {
    background: #FFF6A7;
  }
  #body article #content #center .text .klima table .s4 {
    background: #FFF194;
  }
  #body article #content #center .text .klima table .s5 {
    background: #FFEC82;
  }
  #body article #content #center .text .klima table .s6 {
    background: #FFE86F;
  }
  #body article #content #center .text .klima table .s7 {
    background: #FFE35D;
  }
  #body article #content #center .text .klima table .s8 {
    background: #FFDF4A;
  }
  #body article #content #center .text .klima table .s9 {
    background: #FFDA38;
  }
  #body article #content #center .text .klima table .s10 {
    background: #FFD525;
  }
  #body article #content #center .text .klima table .s11 {
    background: #FFD113;
  }
  #body article #content #center .text .klima table .s12 {
    background: #FC0;
  }
  #body article #content #center .text .klima table .w1 {
    background: #CFF;
  }
  #body article #content #center .text .klima table .w2 {
    background: #B9F6FA;
  }
  #body article #content #center .text .klima table .w3 {
    background: #A7ECF6;
  }
  #body article #content #center .text .klima table .w4 {
    background: #94E3F1;
  }
  #body article #content #center .text .klima table .w5 {
    background: #82DAEC;
  }
  #body article #content #center .text .klima table .w6 {
    background: #6FD1E8;
  }
  #body article #content #center .text .klima table .w7 {
    background: #5DC7E3;
    color: #FFF;
  }
  #body article #content #center .text .klima table .w8 {
    background: #4ABEDF;
    color: #FFF;
  }
  #body article #content #center .text .klima table .w9 {
    background: #38B5DA;
    color: #FFF;
  }
  #body article #content #center .text .klima table .w10 {
    background: #25ACD5;
    color: #FFF;
  }
  #body article #content #center .text .klima table .w11 {
    background: #13A2D1;
    color: #FFF;
  }
  #body article #content #center .text .klima table .w12 {
    background: #09C;
    color: #FFF;
  }
  #body article #content #center .text .klima table .r1 {
    background: #9CF;
  }
  #body article #content #center .text .klima table .r2 {
    background: #8BBEF6;
  }
  #body article #content #center .text .klima table .r3 {
    background: #7DB0EC;
  }
  #body article #content #center .text .klima table .r4 {
    background: #6FA2E3;
  }
  #body article #content #center .text .klima table .r5 {
    background: #6194DA;
    color: #FFF;
  }
  #body article #content #center .text .klima table .r6 {
    background: #5386D1;
    color: #FFF;
  }
  #body article #content #center .text .klima table .r7 {
    background: #4679C7;
    color: #FFF;
  }
  #body article #content #center .text .klima table .r8 {
    background: #386BBE;
    color: #FFF;
  }
  #body article #content #center .text .klima table .r9 {
    background: #2A5DB5;
    color: #FFF;
  }
  #body article #content #center .text .klima table .r10 {
    background: #1C4FAC;
    color: #FFF;
  }
  #body article #content #center .text .klima table .r11 {
    background: #0E41A2;
    color: #FFF;
  }
  #body article #content #center .text .klima table .r12 {
    background: #039;
    color: #FFF;
  }
  #body article #content #center .text .klima table tr {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    padding: 5px 0;
  }
  #body article #content #center .text .klima table tr th {
    border-left: 1px solid transparent;
    box-sizing: border-box;
    color: #999;
    font-size: 12px;
    font-weight: 400;
  }
  #body article #content #center .text .klima table tr th:first-child {
    order: 13;
    width: auto;
    width: 200px;
  }
  #body article #content #center .text .klima table tr th span {
    left: -2000px;
    overflow: hidden;
    position: absolute;
    text-indent: 300px;
    top: 0;
  }
  #body article #content #center .text .klima table tr th:nth-of-type(2):before {
    content: "Jan";
  }
  #body article #content #center .text .klima table tr th:nth-of-type(3):before {
    content: "Feb";
  }
  #body article #content #center .text .klima table tr th:nth-of-type(4):before {
    content: "Mrz";
  }
  #body article #content #center .text .klima table tr th:nth-of-type(5):before {
    content: "Apr";
  }
  #body article #content #center .text .klima table tr th:nth-of-type(6):before {
    content: "Mai";
  }
  #body article #content #center .text .klima table tr th:nth-of-type(7):before {
    content: "Jun";
  }
  #body article #content #center .text .klima table tr th:nth-of-type(8):before {
    content: "Jul";
  }
  #body article #content #center .text .klima table tr th:nth-of-type(9):before {
    content: "Aug";
  }
  #body article #content #center .text .klima table tr th:nth-of-type(10):before {
    content: "Sept";
  }
  #body article #content #center .text .klima table tr th:nth-of-type(11):before {
    content: "Okt";
  }
  #body article #content #center .text .klima table tr th:nth-of-type(12):before {
    content: "Nov";
  }
  #body article #content #center .text .klima table tr th:nth-of-type(13):before {
    content: "Dez";
  }
  #body article #content #center .text .klima table tr td {
    align-items: center;
    border-left: 1px solid #FFF;
    box-sizing: border-box;
    display: flex;
    font-weight: 400;
    height: 40px;
    justify-content: center;
  }
  #body article #content #center .text .klima table tr td:first-child {
    justify-content: left;
    order: 13;
    font-weight: 700;
    padding-left: 45px;
    width: 200px;
  }
  #body article #content #center .text .klima table tr td:first-child {
    background: url("../img/sun.svg") no-repeat left 20px center/20px 20px;
    justify-content: left;
    order: 13;
    font-weight: 600;
    width: 200px;
  }
  #body article #content #center .text .klima table tr.night td:first-child {
    background-image: url("../img/moon.svg");
  }
  #body article #content #center .text .klima table tr.rain td:first-child {
    background-image: url("../img/rain.svg");
  }
  #body article #content #center .text .klima table tr.sun td:first-child {
    background-image: url("../img/time.svg");
  }
  #body article #content #center .text .klima table tr.water td:first-child {
    background-image: url("../img/water.svg");
  }
  #body article #content #center .text .tabelle {
    padding: 10px 0 20px 0;
  }
  #body article #content #center .text .tabelle table {
    width: 100%;
  }
  #body article #content #center .text .tabelle tr {
    display: flex;
    width: 100%;
  }
  #body article #content #center .text .tabelle tr.criteria th, #body article #content #center .text .tabelle tr.criteria td {
    background: #FFFAB9;
    color: #333;
    font-weight: 700;
  }
  #body article #content #center .text .tabelle tr.overall th, #body article #content #center .text .tabelle tr.overall td {
    background: #FCEC80;
    color: #333;
    font-weight: 800;
  }
  #body article #content #center .text .tabelle tr.overall th {
    background: #FCEC80 url("../img/logo3.svg") no-repeat left 20px center/120px 20px;
    padding-left: 150px;
  }
  #body article #content #center .text .tabelle tr.odd th, #body article #content #center .text .tabelle tr.odd td {
    background: #F8F8F8;
  }
  #body article #content #center .text .tabelle th, #body article #content #center .text .tabelle td {
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    color: #666;
    font-weight: 400;
    padding: 10px 15px;
    text-align: left;
  }
  #body article #content #center .text .tabelle th {
    flex: 1;
    display: flex;
  }
  #body article #content #center .text .tabelle th div {
    flex: 1;
  }
  #body article #content #center .text .tabelle th div:after {
    content: attr(data-weight);
    float: right;
    font-weight: 400;
  }
  #body article #content #center .text .tabelle td {
    border-left: 1px solid rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    width: 200px;
    box-sizing: border-box;
  }
  #body article #content #center .text .tabelle td i, #body article #content #center .text .tabelle td span {
    background: url("../img/good.svg") no-repeat center center/16px 16px;
    width: 16px;
    height: 16px;
  }
  #body article #content #center .text .tabelle td i {
    background-image: url("../img/slash.svg");
  }
  #body article #content #center .text .tabelle td .average {
    background-image: url("../img/average.svg");
    background-size: 14px 14px;
  }
  #body article #content #center .text .tabelle td .bad {
    background-image: url("../img/bad.svg");
  }
  #body article #content #center .product-box {
    padding: 10px;
  }
  #body article #content #center .product-box .product {
    display: flex;
    gap: 20px;
  }
  #body article #content #center .product-box .inner {
    border-bottom: 1px solid #DDD;
    border-top: 1px solid #DDD;
    display: grid;
    grid-template-columns: 1fr 3fr;
    flex-grow: 1;
    gap: 30px;
    padding: 20px 0 20px 0;
  }
  #body article #content #center .product-box .inner .img {
    align-items: center;
    display: flex;
    justify-content: center;
  }
  #body article #content #center .product-box .inner .img a {
    display: block;
    padding: 10px;
  }
  #body article #content #center .product-box .inner .img a:focus-visible {
    border-radius: 5px;
    outline: 2px dashed #999;
  }
  #body article #content #center .product-box .inner .img img {
    display: block;
    max-height: 200px;
    max-width: 100%;
  }
  #body article #content #center .product-box .inner .cell {
    align-items: stretch;
    display: flex;
    flex-direction: column;
  }
  #body article #content #center .product-box .inner .cell .hl {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    flex: 1;
  }
  #body article #content #center .product-box .inner .cell .hl a {
    font-size: 24px;
    font-weight: 700;
    padding: 5px;
    text-decoration: underline;
    text-decoration-color: #fa3707;
    text-decoration-thickness: 3px;
    text-underline-offset: 3px;
  }
  #body article #content #center .product-box .inner .cell .hl a:hover {
    color: #fa3707;
  }
  #body article #content #center .product-box .inner .cell .hl a:focus-visible {
    border-radius: 5px;
    outline: 2px dashed #fa3707;
    text-decoration: none;
  }
  #body article #content #center .product-box .inner .cell .hl .rating {
    display: flex;
    gap: 10px;
    padding: 15px 0 25px 5px;
  }
  #body article #content #center .product-box .inner .cell .hl .rating .value,
  #body article #content #center .product-box .inner .cell .hl .rating b {
    font-weight: 400;
  }
  #body article #content #center .product-box .inner .cell .hl .rating .stars {
    background: url("../img/stars-1.svg") no-repeat center center;
    height: 17px;
    width: 84px;
  }
  #body article #content #center .product-box .inner .cell .hl .rating .stars.stars-2 {
    background-image: url("../img/stars-2.svg");
  }
  #body article #content #center .product-box .inner .cell .hl .rating .stars.stars-3 {
    background-image: url("../img/stars-3.svg");
  }
  #body article #content #center .product-box .inner .cell .hl .rating .stars.stars-4 {
    background-image: url("../img/stars-4.svg");
  }
  #body article #content #center .product-box .inner .cell .hl .rating .stars.stars-5 {
    background-image: url("../img/stars-5.svg");
  }
  #body article #content #center .product-box .inner .cell .hl .rating .stars.stars-6 {
    background-image: url("../img/stars-6.svg");
  }
  #body article #content #center .product-box .inner .cell .hl .rating .stars.stars-7 {
    background-image: url("../img/stars-7.svg");
  }
  #body article #content #center .product-box .inner .cell .hl .rating .stars.stars-8 {
    background-image: url("../img/stars-8.svg");
  }
  #body article #content #center .product-box .inner .cell .hl .rating .stars.stars-9 {
    background-image: url("../img/stars-9.svg");
  }
  #body article #content #center .product-box .inner .cell .hl .rating .stars.stars-10 {
    background-image: url("../img/stars-10.svg");
  }
  #body article #content #center .product-box .inner .cell .descr {
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: end;
  }
  #body article #content #center .product-box .inner .cell .descr ul {
    font-weight: 400;
    margin: 0;
    padding: 0 0 0 5px;
  }
  #body article #content #center .product-box .inner .cell .descr ul li {
    background: url("../img/tick-product-box.svg") no-repeat top 3px left;
    line-height: 22px;
    padding: 4px 0 4px 34px;
  }
  #body article #content #center .product-box .price {
    align-items: stretch;
    background: #fa3707;
    border-radius: 5px;
    color: #FFF;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    width: 250px;
  }
  #body article #content #center .product-box .price .top {
    background: url("../img/amazon-2.svg") no-repeat top 30px center/80px 24px;
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
    padding: 75px 0 20px 0;
  }
  #body article #content #center .product-box .price .top b {
    display: block;
    font-size: 22px;
    font-weight: 700;
  }
  #body article #content #center .product-box .price .top s {
    display: block;
    font-size: 16px;
    font-weight: 400;
    opacity: 0.65;
    padding: 5px 0 0 0;
  }
  #body article #content #center .product-box .price .bottom {
    align-items: center;
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: end;
    padding: 0 0 20px 0;
  }
  #body article #content #center .product-box .price .bottom a {
    background: #333;
    border-radius: 5px;
    font-weight: 600;
    height: 40px;
    line-height: 40px;
    margin: 0 0 10px 0;
    padding: 0 15px;
  }
  #body article #content #center .product-box .price .bottom a:hover {
    background: #FFF;
    color: #333;
  }
  #body article #content #center .product-box .price .bottom a:focus-visible {
    outline: 2px dashed #FFF;
  }
  #body article #content #center .product-box .price .bottom em {
    display: block;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
  }
  #body article #content #center .related-text {
    padding: 10px 10px 20px 10px;
  }
  #body article #content #center .related-text h3 {
    margin: 0 0 20px 0;
  }
  #body article #content #center .related-text .items {
    display: flex;
    gap: 40px;
  }
  #body article #content #center .related-text .items a {
    background: #F3F3F6;
    border: 2px solid #F3F3F6;
    border-radius: 5px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
    line-height: 24px;
    padding: 13px 18px;
  }
  #body article #content #center .related-text .items a:hover {
    background: #FFF;
    border-color: #CCC;
  }
  #body article #content #center .related-text .items a:focus-visible {
    outline: 2px dashed #999;
  }
  #body article #content #center .related-text .items a span {
    color: #fa3707;
    font-weight: 600;
    width: 80%;
  }
  #body article #content #center .related-text .items a span:last-child {
    color: #333;
    font-weight: 700;
  }
  #body article #content #center .related-image {
    padding: 15px 5px;
  }
  #body article #content #center .related-image h3 {
    margin: 0 5px 15px 5px;
  }
  #body article #content #center .related-image a {
    display: flex;
    gap: 20px;
    padding: 5px;
    width: -moz-fit-content;
    width: fit-content;
  }
  #body article #content #center .related-image a:hover span:last-child {
    text-decoration: underline;
    text-decoration-color: #fa3707;
    text-decoration-thickness: 2px;
    text-underline-offset: 2px;
  }
  #body article #content #center .related-image a:focus-visible {
    border-radius: 5px;
    outline: 2px dashed #999;
  }
  #body article #content #center .related-image a .img {
    flex-shrink: 0;
    border-radius: 5px;
    overflow: hidden;
    width: 300px;
  }
  #body article #content #center .related-image a .img img {
    display: block;
    max-width: 100%;
  }
  #body article #content #center .related-image a .text {
    color: #fa3707;
    display: flex;
    flex-direction: column;
    font-size: 18px;
    font-weight: 600;
    gap: 10px;
    max-width: 460px;
  }
  #body article #content #center .related-image a span:last-child {
    color: #333;
    font-size: 24px;
    font-weight: 700;
    line-height: 32px;
  }
  #body .vergleich {
    padding: 70px 10px;
  }
  #body .vergleich .h1 {
    color: #fa3707;
    display: block;
    font-size: 20px;
    font-weight: 700;
    padding: 0 0 0 200px;
  }
  #body .vergleich .h2 {
    font-size: 48px;
    font-weight: 900;
    margin: 0 0 20px 0;
    padding: 0 0 0 200px;
  }
  #body .vergleich .table2 {
    display: flex;
    flex-wrap: wrap;
    margin: 0 0 0 200px;
  }
  #body .vergleich .table2.spalten-2 .cell {
    width: 490px;
  }
  #body .vergleich .table2.spalten-2 .first {
    width: 490px;
  }
  #body .vergleich .table2.spalten-3 .cell {
    width: 326px;
  }
  #body .vergleich .table2.spalten-3 .first {
    width: 326px;
  }
  #body .vergleich .table2.spalten-4 .cell {
    width: 245px;
  }
  #body .vergleich .table2.spalten-5 .cell {
    width: 196px;
  }
  #body .vergleich .table2.spalten-5 .first {
    width: 196px;
  }
  #body .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;
  }
  #body .vergleich .table2 .cell.first {
    background: #fa3707;
    border-top: 1px solid transparent;
    color: #FFF;
    padding: 10px 15px 10px 15px;
  }
  #body .vergleich .table2 .cell.first.img {
    padding: 10px 0;
  }
  #body .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: -200px;
    top: 0;
    width: 200px;
  }
  #body .vergleich .table2 .cell.first.logo:before, #body .vergleich .table2 .cell.first.bottom:before {
    color: #CCC;
    font-size: 11px;
    font-weight: 400;
  }
  #body .vergleich .table2 .cell.img {
    border: none;
  }
  #body .vergleich .table2 .cell.img a {
    align-items: center;
    border: 3px solid transparent;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 7px;
  }
  #body .vergleich .table2 .cell.img a img {
    display: block;
    margin: auto;
    max-width: 90%;
    max-height: 150px;
  }
  #body .vergleich .table2 .cell.img a:focus-visible {
    border-radius: 5px;
    outline: 2px dashed #999;
  }
  #body .vergleich .table2 .cell.img:before {
    border-top: none;
  }
  #body .vergleich .table2 .cell.img.first {
    background: none;
  }
  #body .vergleich .table2 .cell.img.first:before {
    color: #CCC;
    font-size: 10px;
    font-weight: 400;
    padding: 0;
  }
  #body .vergleich .table2 .cell.name {
    border: none;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    flex-direction: column;
  }
  #body .vergleich .table2 .cell.name:before {
    border-top: none;
  }
  #body .vergleich .table2 .cell.name i {
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
  }
  #body .vergleich .table2 .cell.name div {
    font-size: 20px;
    font-weight: 700;
    padding: 0 0 10px 0;
  }
  #body .vergleich .table2 .cell.name span {
    color: #666;
    display: inline;
    font-size: 14px;
    font-weight: 600;
  }
  #body .vergleich .table2 .cell.name span b {
    background: #fa3707;
    color: #FFF;
    display: inline-block;
    margin: 0 5px 0 0;
    font-weight: 600;
    padding: 0 3px;
  }
  #body .vergleich .table2 .cell.name.first span {
    color: #FFF;
    opacity: 0.65;
  }
  #body .vergleich .table2 .cell.name.first span b {
    background: #fc0;
    color: #000;
  }
  #body .vergleich .table2 .cell.logo {
    padding-bottom: 5px;
    padding-top: 15px;
  }
  #body .vergleich .table2 .cell.logo div {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
  }
  #body .vergleich .table2 .cell.logo img {
    display: block;
    margin: auto;
    max-height: 40px;
    max-width: 80px;
  }
  #body .vergleich .table2 .cell.cta {
    padding-bottom: 15px;
    border: none;
  }
  #body .vergleich .table2 .cell.cta div {
    text-align: center;
    width: 100%;
  }
  #body .vergleich .table2 .cell.cta a {
    align-items: center;
    background: #DDD;
    border-radius: 5px;
    border-radius: 50px;
    display: flex;
    color: #333;
    font-weight: 700;
    height: 40px;
    justify-content: center;
    margin: 0 0 5px 0;
  }
  #body .vergleich .table2 .cell.cta a:hover {
    background: #333;
    color: #FFF;
    outline: none;
  }
  #body .vergleich .table2 .cell.cta a:focus-visible {
    background: #EEE;
    outline: 2px dashed #999;
  }
  #body .vergleich .table2 .cell.cta strong {
    font-size: 14px;
    font-weight: 400;
  }
  #body .vergleich .table2 .cell.cta.first a {
    border: none;
    color: #333;
    background: #fff;
    font-weight: 700;
  }
  #body .vergleich .table2 .cell.cta.first a:hover {
    background: #333;
    color: #FFF;
  }
  #body .vergleich .table2 .cell.cta.first a:focus-visible {
    background: #333;
    color: #FFF;
    outline: 2px dashed #fc0;
  }
  #body .vergleich .table2 .cell.cta.first:before {
    border: none;
  }
  #body .vergleich .table2 .cell.bottom {
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    padding-bottom: 15px;
    padding-top: 15px;
  }
  #body .vergleich .table2 .cell.bottom div {
    width: 100%;
  }
  #body .vergleich .table2 .cell.bottom a {
    align-items: center;
    background: #DDD;
    border-radius: 5px;
    border-radius: 50px;
    display: flex;
    color: #333;
    font-weight: 700;
    height: 40px;
    justify-content: center;
  }
  #body .vergleich .table2 .cell.bottom a:hover {
    background: #333;
    color: #FFF;
    outline: none;
  }
  #body .vergleich .table2 .cell.bottom a:focus-visible {
    background: #EEE;
    outline: 2px dashed #999;
  }
  #body .vergleich .table2 .cell.bottom.first a {
    border: none;
    color: #333;
    background: #fff;
  }
  #body .vergleich .table2 .cell.bottom.first a:hover {
    background: #333;
    color: #FFF;
  }
  #body .vergleich .table2 .cell.bottom.first a:focus-visible {
    background: #333;
    color: #FFF;
    outline: 2px dashed #fc0;
  }
  #static .imprint {
    padding: 0 10px;
  }
  #static .imprint:before {
    content: "SUPERTEST \aSchubertstraße 27 \a 71394 Kernen \a Deutschland";
    font-size: 18px;
    line-height: 1.5;
    white-space: pre-wrap;
  }
  #static h2 {
    font-size: 24px;
    font-weight: 700;
    margin: 25px 10px 10px 10px;
    position: relative;
  }
  #static h2:after {
    background: #fa3707;
    bottom: -3px;
    content: "";
    height: 4px;
    left: 0;
    position: absolute;
    width: 50px;
  }
  #static p {
    font-size: 18px;
    line-height: 1.5;
    padding: 0 10px;
  }
  #static p a {
    padding: 2px;
    margin: -2px;
    text-decoration: underline;
    text-decoration-color: #fa3707; /* Farbe der Linie */
    text-decoration-thickness: 2px; /* Dicke der Linie */
    text-underline-offset: 3px;
  }
  #static p a:hover {
    color: #fa3707;
  }
  #static p a:focus-visible {
    background: #FFF;
    border-radius: 5px;
    outline: 2px dashed #fa3707;
    text-decoration: none;
  }
  #static ul {
    display: flex;
    flex-direction: column;
    font-size: 18px;
    gap: 10px;
    list-style: disc;
    margin: 0 0 0 20px;
    padding: 0 10px;
  }
  #static ul ul {
    padding: 0 0 10px 0;
  }
  #static ul li {
    line-height: 1.5;
    padding: 5px 0 0 0;
  }
  #static form {
    font-size: 16px;
  }
  #static form fieldset {
    border: none;
    display: flex;
    flex-direction: column;
    gap: 30px;
    margin: 0;
    padding: 0 10px;
  }
  #static form fieldset input[type=text],
  #static form fieldset select,
  #static form fieldset textarea {
    background: #F3F3F6;
    border: none;
    border-radius: 5px;
    box-sizing: border-box;
    font-family: inherit;
    font-size: 16px;
    font-weight: 400;
    height: 40px;
    line-height: 40px;
    max-width: 780px;
    padding: 0 12px;
    width: 100%;
  }
  #static form fieldset input[type=text]:focus-visible,
  #static form fieldset select:focus-visible,
  #static form fieldset textarea:focus-visible {
    outline: 2px dashed #999;
  }
  #static form fieldset select {
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
    background: #F3F3F6;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%238a97ab' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 18px;
    cursor: pointer;
    padding: 0 40px 0 12px;
    width: -moz-fit-content;
    width: fit-content;
  }
  #static form fieldset textarea {
    max-height: 600px;
    min-height: 200px;
    resize: vertical;
  }
  #static form fieldset button {
    background: #333;
    border: none;
    border-radius: 5px;
    color: #FFF;
    font-family: inherit;
    font-size: inherit;
    font-weight: 400;
    height: 40px;
    line-height: 40px;
    padding: 0 15px;
    width: -moz-fit-content;
    width: fit-content;
  }
  #static form fieldset button:hover {
    background: #fa3707;
    color: #FFF;
  }
  #static form fieldset button:focus-visible {
    background: #F3F3F6;
    color: #333;
    outline: 2px dashed #999;
  }
  #static form fieldset .checkbox {
    display: flex;
  }
  #static form fieldset .checkbox input[type=checkbox] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: #EEE;
    border-radius: 5px;
    box-sizing: border-box;
    cursor: pointer;
    flex-shrink: 0;
    height: 24px;
    margin: 0;
    position: relative;
    width: 24px;
  }
  #static form fieldset .checkbox input[type=checkbox]:focus-visible {
    outline: 2px dashed #999;
  }
  #static form fieldset .checkbox input[type=checkbox]:checked {
    background: #fa3707;
  }
  #static form fieldset .checkbox input[type=checkbox]:checked:after {
    border-bottom: 2px solid #FFF;
    border-right: 2px solid #FFF;
  }
  #static form fieldset .checkbox input[type=checkbox]:after {
    content: "";
    height: 10px;
    left: 8px;
    position: absolute;
    rotate: 45deg;
    top: 4px;
    width: 5px;
  }
  #static form fieldset .checkbox label {
    font-weight: 400;
    line-height: 26px;
    padding: 0 0 0 10px;
  }
  #static form fieldset .checkbox label a {
    margin: -2px;
    padding: 2px;
    text-decoration: underline;
    text-decoration-color: #fa3707;
    text-decoration-thickness: 2px;
    text-underline-offset: 2px;
  }
  #static form fieldset .checkbox label a:hover {
    color: #fa3707;
  }
  #static form fieldset .checkbox label a:focus-visible {
    border-radius: 5px;
    outline: 2px dashed #999;
    text-decoration: none;
  }
  #static form fieldset label {
    font-weight: 700;
  }
  #static form fieldset .label {
    padding: 0 0 7px 0;
  }
  #static form fieldset .error {
    color: #fa3707;
    padding: 7px 0 0 0;
  }
  #newsletter {
    display: flex;
    justify-content: center;
    padding: 25px 20px 5px 20px;
  }
  #newsletter .wrap {
    background: #bcdfe8 url("../img/mail-fast.svg") no-repeat left 20px center/80px 80px;
    border-radius: 5px;
    box-sizing: border-box;
    display: flex;
    max-width: 1180px;
    gap: 20px;
    padding: 0 20px 0 120px;
    width: 100%;
  }
  #newsletter .left {
    padding: 15px 0;
    width: 50%;
  }
  #newsletter .left div {
    font-size: 26px;
    font-weight: 800;
    padding: 0 0 5px 0;
  }
  #newsletter .left span {
    font-size: 14px;
  }
  #newsletter .right {
    display: flex;
    align-items: center;
    width: 50%;
  }
  #newsletter .right form {
    display: flex;
    flex: 1;
    position: relative;
  }
  #newsletter .right form input {
    background: #FFF;
    border: none;
    border-radius: 5px;
    font-family: inherit;
    font-size: inherit;
    height: 44px;
    padding: 0 15px;
    width: 100%;
    box-sizing: border-box;
  }
  #newsletter .right form input:focus-visible {
    outline: 2px dashed #999;
  }
  #newsletter .right form button {
    background: #333;
    border: none;
    border-radius: 5px;
    color: #FFF;
    font-family: inherit;
    font-size: inherit;
    font-weight: 400;
    position: absolute;
    top: 2px;
    right: 2px;
    height: 40px;
    margin: 0;
    padding: 0 15px;
  }
  #newsletter .right form button:focus-visible {
    background: #EEE;
    color: #333;
    outline: 2px dashed #999;
  }
  footer {
    display: flex;
    justify-content: center;
    padding: 0 10px 0 20px;
  }
  footer .wrap {
    align-items: center;
    display: flex;
    flex-direction: column;
    width: 1190px;
  }
  footer .top {
    display: flex;
    width: 100%;
    align-items: center;
  }
  footer .top img {
    display: block;
    margin: 20px 0;
  }
  footer .top ul {
    display: flex;
    flex: 1;
    gap: 20px;
    justify-content: flex-end;
  }
  footer .top a {
    border-radius: 5px;
    padding: 5px 10px;
  }
  footer .top a:hover {
    text-decoration: underline;
    text-decoration-color: #fa3707;
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
  }
  footer .top a:focus-visible {
    outline: 2px dashed #999;
  }
  footer .bottom {
    width: 100%;
    padding: 0 0 20px 0;
    position: relative;
  }
  footer .bottom p {
    font-size: 12px;
    line-height: 1.4;
    margin: 0;
  }
  footer .bottom 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 10px 12px 0;
  }
  footer .bottom span {
    font-weight: 600;
    position: absolute;
    bottom: 20px;
    right: 0;
    font-size: 12px;
  }
  footer .bottom span a {
    padding: 5px 10px;
  }
  footer .bottom span a:hover {
    text-decoration: underline;
    text-decoration-color: #fa3707;
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
  }
  footer .bottom span a:focus-visible {
    border-radius: 5px;
    outline: 2px dashed #999;
  }
}
/* Mobile --------------------------------------------------------------------------------------- */
@media screen and (max-width: 768px) {
  button[data-type=nav] {
    align-items: center;
    background: transparent;
    border: none;
    color: #333;
    display: flex;
    justify-content: center;
    height: 40px;
    right: 25px;
    position: fixed;
    top: 25px;
    width: 40px;
    z-index: 200;
  }
  button[data-type=nav] span {
    display: none;
  }
  .skip-link-top {
    display: none;
  }
  main {
    padding: 90px 0 0 0;
  }
  header {
    position: relative;
    z-index: 5000;
  }
  header .top {
    background: #FFF;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    padding: 15px 15px 0 15px;
  }
  header .top .wrap {
    background: #f3f3f6;
    border-radius: 5px;
    z-index: 1000;
  }
  header .top .scrollShadow {
    box-shadow: 0 1px 1px #CCC;
  }
  header .top .logo {
    box-sizing: border-box;
    display: flex;
    padding: 8px 5px 2px 5px;
  }
  header .top .logo a {
    aspect-ratio: 240/40;
    padding: 5px 10px;
  }
  header .top .logo svg {
    display: block;
    max-width: 200px;
  }
  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 {
    display: none;
  }
  header .nav {
    display: none;
  }
  header .open-nav {
    display: none;
  }
  header x.login {
    align-items: center;
    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;
  }
  header {
    /* Breadcrumb */
  }
  header .bc {
    display: none;
  }
  .section-top .top {
    padding: 0 15px;
  }
  .section-top .top .name {
    display: block;
    font-size: 22px;
    font-weight: 800;
    padding: 15px 0 10px 0;
  }
  .section-top .top .more {
    display: none;
  }
  .section-top .scroll {
    overflow: hidden;
    height: 35px;
  }
  .section-top .scroll ul {
    box-sizing: border-box;
    display: flex;
    margin: 0;
    width: 100%;
    padding: 0 15px 0 0;
    overflow-x: auto;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }
  .section-top .scroll ul li {
    display: flex;
    margin: 0 0 10px 15px;
  }
  .section-top .scroll ul li a {
    background: #F3F3F6;
    border-radius: 5px;
    height: 35px;
    line-height: 35px;
    padding: 0 15px;
  }
  .section-top .items {
    display: flex;
    flex-direction: column;
  }
  .section-top .items .left {
    padding: 15px;
  }
  .section-top .items .left.sub {
    padding: 15px 15px 40px 15px;
  }
  .section-top .items .left a {
    display: block;
  }
  .section-top .items .left a .img picture {
    aspect-ratio: 780/500;
    display: flex;
  }
  .section-top .items .left a .img picture img {
    border-radius: 5px;
    display: block;
    height: auto;
    -o-object-fit: cover;
       object-fit: cover;
    overflow: hidden;
    width: 100%;
  }
  .section-top .items .left a .inner {
    padding: 0 15px 0 0;
  }
  .section-top .items .left a .inner div {
    display: flex;
    flex-direction: column;
  }
  .section-top .items .left a .inner .dz {
    color: #fa3707;
    display: block;
    font-size: 18px;
    font-weight: 700;
    padding: 15px 0 3px 0;
  }
  .section-top .items .left a .inner .hl {
    display: block;
    font-size: 28px;
    font-weight: 800;
    line-height: 30px;
  }
  .section-top .items .left .text p {
    line-height: 24px;
    margin: 0;
    font-size: 18px;
    padding: 10px 0 0 0;
  }
  .section-top .items .toplist {
    padding: 15px;
  }
  .section-top .items .toplist div {
    font-size: 22px;
    font-weight: 800;
    padding: 0 0 15px 0;
  }
  .section-top .items .toplist ol {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    gap: 15px;
  }
  .section-top .items .toplist ol li a span {
    display: table-cell;
    vertical-align: middle;
    padding: 0 0 0 10px;
  }
  .section-top .items .toplist ol li a span b {
    display: block;
    font-size: 18px;
  }
  .section-top .items .toplist ol li a span i {
    font-style: normal;
  }
  .section-top .items .toplist ol li a:before {
    color: #fa3707;
    content: attr(data-count);
    font-size: 40px;
    font-weight: 900;
    width: 45px;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
  }
  .section-top .items .further {
    display: flex;
    flex-direction: column;
    gap: 15px;
  }
  .section-top .items .further a {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-columns: 3fr 5fr;
    gap: 15px;
    line-height: 20px;
    padding: 0 15px;
    align-items: center;
  }
  .section-top .items .further a picture {
    display: flex;
    aspect-ratio: 180/120;
  }
  .section-top .items .further a picture img {
    border-radius: 5px;
    display: block;
    height: auto;
    -o-object-fit: cover;
       object-fit: cover;
    width: 100%;
  }
  .section-top .items .further a div {
    line-height: 22px;
    font-size: 18px;
  }
  .section-top .items .further a div b {
    font-weight: 700;
  }
  .section-top .items .further a div b:after {
    content: attr(data-after);
  }
  .section-bottom .wrap {
    display: flex;
    flex-direction: column;
    gap: 15px;
    padding: 50px 0 0 0;
  }
  .section-bottom .wrap a {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    padding: 0 15px;
    align-items: center;
  }
  .section-bottom .wrap a:first-child {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding-bottom: 30px;
  }
  .section-bottom .wrap a:first-child picture {
    aspect-ratio: 780/500;
    display: flex;
  }
  .section-bottom .wrap a:first-child picture img {
    border-radius: 5px;
    display: block;
    height: auto;
    -o-object-fit: cover;
       object-fit: cover;
    overflow: hidden;
    width: 100%;
  }
  .section-bottom .wrap a:first-child b {
    color: #fa3707;
    display: block;
    font-size: 18px;
    font-weight: 700;
    padding: 15px 0 3px 0;
  }
  .section-bottom .wrap a:first-child b:after {
    content: "";
  }
  .section-bottom .wrap a:first-child em {
    display: block;
    font-size: 28px;
    font-weight: 800;
    line-height: 30px;
  }
  .section-bottom .wrap a:first-child p {
    display: block;
    margin: 0;
    font-size: 18px;
    line-height: 24px;
    padding: 10px 0 0 0;
  }
  .section-bottom .wrap a div.isolated picture img {
    -o-object-fit: contain;
       object-fit: contain;
    padding: 0 10px;
  }
  .section-bottom .wrap a div picture {
    display: flex;
    aspect-ratio: 180/110;
  }
  .section-bottom .wrap a div picture img {
    border-radius: 5px;
    box-sizing: border-box;
    display: block;
    height: auto;
    -o-object-fit: cover;
       object-fit: cover;
    width: 100%;
  }
  .section-bottom .wrap a div b {
    font-weight: 700;
  }
  .section-bottom .wrap a div b:after {
    content: attr(data-after);
  }
  .section-bottom .wrap a div em {
    font-style: normal;
  }
  .section-bottom .wrap a div p {
    display: none;
  }
  .pagination {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    justify-content: center;
    padding: 30px 15px 0 15px;
  }
  .pagination a, .pagination b, .pagination span {
    align-items: center;
    background: #F3F3F6;
    border-radius: 5px;
    display: flex;
    height: 40px;
    justify-content: center;
    min-width: 40px;
  }
  .pagination b {
    background: #333;
    color: #FFF;
    font-weight: 600;
  }
  .pagination span {
    background: none;
    color: #666;
    min-width: auto;
  }
  .pagination span:before {
    content: "...";
  }
  .pagination .desktop-only {
    display: none;
  }
  #gallery .wrap {
    background: #f3f3f6;
    border-radius: 5px;
    position: fixed;
    top: 15px;
    left: 15px;
    right: 15px;
    z-index: 100;
  }
  #gallery .wrap .logo {
    box-sizing: border-box;
    display: flex;
    padding: 8px 5px 2px 5px;
  }
  #gallery .wrap .logo a {
    aspect-ratio: 240/40;
    padding: 5px 10px;
  }
  #gallery .wrap .logo a img, #gallery .wrap .logo a svg {
    display: block;
    max-width: 200px;
  }
  #gallery .wrap .close a {
    border-radius: 50%;
    height: 40px;
    position: fixed;
    right: 25px;
    top: 25px;
    width: 40px;
  }
  #gallery .wrap .close a:before, #gallery .wrap .close a:after {
    content: "";
    position: absolute;
    width: 20px;
    height: 2px;
    background: #FFF;
    background: #333;
    top: 50%;
    left: 50%;
    margin-left: -10px;
    margin-top: -1px;
  }
  #gallery .wrap .close a:before {
    transform: rotate(45deg);
  }
  #gallery .wrap .close a:after {
    transform: rotate(-45deg);
  }
  #gallery .images .top {
    padding: 90px 15px 0 15px;
  }
  #gallery .images .top h1 {
    color: #fa3707;
    font-size: 18px;
    font-weight: 700;
    margin: 0;
    padding: 0 30px 0 0;
  }
  #gallery .images .top h2 {
    font-size: 28px;
    font-weight: 800;
    margin: 0;
    padding: 0 30px 0 0;
  }
  #gallery .images .inner {
    display: flex;
    flex-direction: column;
  }
  #gallery .images dl {
    margin: 0;
    padding: 0 15px;
  }
  #gallery .images dl dt {
    padding: 15px 0 0 0;
  }
  #gallery .images dl dt picture div {
    display: flex;
    aspect-ratio: 3/2;
    overflow: hidden;
  }
  #gallery .images dl dt picture div.isolated {
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    border: 2px solid #f3f3f6;
    border-bottom: none;
    box-sizing: border-box;
    padding: 20px;
  }
  #gallery .images dl dt picture div.isolated img {
    -o-object-fit: contain;
       object-fit: contain;
  }
  #gallery .images dl dt picture div img {
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    display: block;
    height: auto;
    -o-object-fit: cover;
       object-fit: cover;
    width: 100%;
  }
  #gallery .images dl dd {
    background: #f3f3f6;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    margin: 0;
    padding: 8px 13px;
    line-height: 1.5;
  }
  #gallery .images dl dd span {
    font-weight: 800;
    float: left;
    margin: 0 5px 0 0;
  }
  #gallery .images dl dd p {
    display: inline;
    margin: 0;
  }
  #gallery .images dl dd p a {
    text-decoration: underline;
    text-decoration-color: #fa3707;
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
  }
  #gallery .images dl dd div {
    color: #CCC;
    font-size: 13px;
    padding: 2px 0 0 0;
  }
  #gallery .images dl dd .ds:before {
    content: "Bild: ";
  }
  #gallery .images dl dd .ds:after {
    content: "Daniel Smolcic";
  }
  #gallery .images .button {
    display: flex;
    padding: 25px 15px 30px 15px;
    justify-content: center;
  }
  #gallery .images .button a {
    text-decoration: underline;
  }
  #body article #hero .h1 {
    color: #fa3707;
    display: block;
    font-size: 18px;
    font-weight: 700;
    padding: 0 15px;
  }
  #body article #hero .h2 {
    font-size: 28px;
    font-weight: 800;
    margin: 0 0 20px 0;
    padding: 0 15px;
  }
  #body article #hero p {
    font-size: 18px;
    font-weight: 600;
    line-height: 1.4;
    margin: 20px 0;
    max-width: 980px;
    padding: 0 15px;
  }
  #body article #hero .meta {
    color: #999;
    font-size: 14px;
    font-weight: 400;
    margin: 25px 0 30px 0;
    max-width: 980px;
    padding: 0 15px;
  }
  #body article #hero .meta .me:after {
    content: ", Daniel Smolcic";
  }
  #body article #hero .meta span.author {
    display: block;
    padding: 0 0 5px 0;
  }
  #body article #hero .meta span.date:after, #body article #hero .meta span.time:after {
    content: ", ";
  }
  #body article #hero .meta a {
    color: #333;
  }
  #body article #hero .meta a:hover {
    text-decoration: underline;
    text-decoration-color: #fa3707; /* Farbe der Linie */
    text-decoration-thickness: 2px; /* Dicke der Linie */
    text-underline-offset: 3px;
  }
  #body article #hero .meta a:focus-visible {
    border-radius: 5px;
    outline: 2px dashed #999;
  }
  #body article #images {
    display: flex;
    flex-direction: column;
    padding: 0 15px;
  }
  #body article #images .big a {
    aspect-ratio: 90/60;
    border-radius: 5px;
    display: block;
    overflow: hidden;
    width: 100%;
  }
  #body article #images .big a img {
    -o-object-fit: cover;
       object-fit: cover;
  }
  #body article #images .big a.isolated img {
    -o-object-fit: contain;
       object-fit: contain;
  }
  #body article #images .small {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 10px 0 0 0;
  }
  #body article #images .small a {
    aspect-ratio: 90/60;
    border-radius: 5px;
    display: block;
    overflow: hidden;
    flex: 1 0 calc(33.33% - 7px);
  }
  #body article #images .small a img {
    -o-object-fit: cover;
       object-fit: cover;
  }
  #body article #images .small a.isolated img {
    -o-object-fit: contain;
       object-fit: contain;
  }
  #body article #images .small a.more {
    aspect-ratio: initial;
    color: #FFF;
    flex: 1 0 100%;
    background: #333;
    display: flex;
    line-height: 40px;
    font-weight: 600;
    justify-content: center;
  }
  #body article #images .small a.more span {
    background: url("../img/arrow-white.svg") no-repeat left center;
    display: flex;
    padding: 0 0 0 30px;
  }
  #body article #images img {
    width: 100%;
    height: 100%;
    display: block;
  }
  #body article #image {
    display: flex;
    margin: 0 15px;
    justify-content: center;
  }
  #body article #image.isolated {
    box-sizing: border-box;
    padding: 15px 30px;
  }
  #body article #image.isolated img {
    max-height: 200px;
  }
  #body article #image a {
    display: block;
  }
  #body article #image img {
    border-radius: 5px;
    display: block;
    max-width: 100%;
    overflow: hidden;
  }
  #body article #content #left {
    display: none;
    padding: 0 15px;
  }
  #body article #content #left summary {
    background: url("../img/arrow-grey.svg") no-repeat left center;
    font-size: 20px;
    font-weight: 800;
    list-style: none;
    padding: 0 0 0 30px;
    position: relative;
  }
  #body article #content #left summary:after {
    content: "sverzeichnis";
  }
  #body article #content #center .main {
    display: flex;
    flex-direction: column;
  }
  #body article #content #center .article-grid .right {
    display: none;
  }
  #body article #content #center h3 {
    font-size: 20px;
    font-weight: 800;
    margin: 25px 15px 10px 15px;
    position: relative;
  }
  #body article #content #center h3:after {
    background: #fa3707;
    bottom: -3px;
    content: "";
    height: 3px;
    left: 0;
    position: absolute;
    width: 30px;
  }
  #body article #content #center .verdict {
    order: 2;
    background: #F3F3F6;
    border-radius: 5px;
    margin: 20px 15px 25px 15px;
    padding: 0 0 10px 0;
    position: relative;
  }
  #body article #content #center .verdict .grid-1 {
    left: 15px;
    position: absolute;
    top: 15px;
  }
  #body article #content #center .verdict .oben {
    display: flex;
    flex-direction: column;
    min-height: 100px;
    justify-content: center;
    padding: 0 15px 0 100px;
  }
  #body article #content #center .verdict .circle {
    align-items: center;
    /* Konischer Verlauf: Er startet oben (from 0deg) und verteilt die Farben */
    background: conic-gradient(var(--farbe1) 0% var(--anteil), var(--farbe2) var(--anteil) 100%);
    border: 4px solid #333;
    border-radius: 50%;
    display: flex;
    height: 70px;
    justify-content: center;
    width: 70px;
    box-sizing: border-box;
    /* Das "Loch" in der Mitte, um den Rand-Effekt zu erzeugen */
  }
  #body article #content #center .verdict .circle:before {
    background: #333;
    border-radius: 50%;
    content: "";
    height: 52px;
    position: absolute;
    width: 52px;
  }
  #body article #content #center .verdict .circle div {
    color: #FFF;
    display: flex;
    gap: 2px;
    position: absolute;
  }
  #body article #content #center .verdict .circle div span {
    display: block;
    font-size: 16px;
    font-weight: 700;
  }
  #body article #content #center .verdict .circle div span:last-child {
    font-size: 10px;
    padding: 4px 0 0 0;
  }
  #body article #content #center .verdict h4 {
    font-size: 20px;
    font-weight: 800;
    margin: 0;
  }
  #body article #content #center .verdict .best-for {
    font-weight: 400;
  }
  #body article #content #center .verdict .best-for a {
    color: #666;
    margin: 0 0 0 5px;
    text-decoration: underline;
    text-decoration-color: #CCC;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
  }
  #body article #content #center .verdict h5 {
    font-size: 20px;
    font-weight: 800;
    margin: 0;
    padding: 15px 15px 7px 15px;
  }
  #body article #content #center .verdict dl {
    align-items: center; /* Vertikale Zentrierung */
    -moz-column-gap: 20px;
         column-gap: 20px; /* Abstand zwischen dt und dd */
    display: grid;
    grid-template-columns: 140px 1fr;
    margin: 0;
    padding: 0 15px 5px 15px;
    row-gap: 10px; /* Abstand zwischen den Zeilen */
  }
  #body article #content #center .verdict dl dt {
    font-weight: 400;
    flex-shrink: 0;
    margin: 0;
    width: 180px;
  }
  #body article #content #center .verdict dl dd {
    display: flex;
    align-items: center;
    gap: 20px;
    margin: 0;
  }
  #body article #content #center .verdict dl dd .bar {
    flex-grow: 1; /* Der Balken nimmt den verfügbaren Platz im dd ein */
    height: 8px;
    background: #FFF;
    border-radius: 5px;
    overflow: hidden;
  }
  #body article #content #center .verdict dl dd .bar span {
    background: #fa3707;
    border-radius: 5px;
    display: block;
    height: 8px;
    width: 10px;
  }
  #body article #content #center .verdict dl .rating {
    color: #999;
    font-weight: 400;
  }
  #body article #content #center .verdict dl .rating span {
    color: #333;
    font-weight: 700;
  }
  #body article #content #center .verdict .pro-contra .hl {
    background: url("../img/pro.svg") no-repeat top left;
    background-size: 22px 22px;
    font-size: 20px;
    font-weight: 800;
    margin: 30px 15px 5px 15px;
    padding: 0 0 0 35px;
  }
  #body article #content #center .verdict .pro-contra .hl.contra {
    background-image: url("../img/contra.svg");
  }
  #body article #content #center .verdict .pro-contra ul {
    display: flex;
    flex-direction: column;
    font-size: 16px;
    font-weight: 400;
    gap: 10px;
    margin: 0;
    padding: 0 0 0 50px;
  }
  #body article #content #center .verdict .pro-contra ul li {
    padding: 0 0 0 15px;
    position: relative;
  }
  #body article #content #center .verdict .pro-contra ul li:before {
    background: #333;
    border-radius: 50%;
    content: "";
    height: 5px;
    left: 0;
    position: absolute;
    top: 8px;
    width: 5px;
  }
  #body article #content #center .text {
    order: 1;
  }
  #body article #content #center .text p {
    font-size: 18px;
    line-height: 1.5;
    padding: 0 15px;
  }
  #body article #content #center .text p a, #body article #content #center .text ul a {
    padding: 2px;
    margin: -2px;
    text-decoration: underline;
    text-decoration-color: #fa3707; /* Farbe der Linie */
    text-decoration-thickness: 2px; /* Dicke der Linie */
    text-underline-offset: 3px;
  }
  #body article #content #center .text p a:hover, #body article #content #center .text ul a:hover {
    color: #fa3707;
  }
  #body article #content #center .text p a:focus-visible, #body article #content #center .text ul a:focus-visible {
    background: #FFF;
    border-radius: 5px;
    outline: 2px dashed #fa3707;
    text-decoration: none;
  }
  #body article #content #center .text ul {
    display: flex;
    flex-direction: column;
    font-size: 18px;
    gap: 10px;
    list-style: disc;
    margin: 0 0 0 20px;
    padding: 0 10px;
  }
  #body article #content #center .text ul ul {
    padding: 0 0 10px 0;
  }
  #body article #content #center .text ul li {
    line-height: 1.5;
    padding: 5px 0 0 0;
  }
  #body article #content #center .text .summary p {
    font-weight: 600;
  }
  #body article #content #center .text dl {
    display: flex;
    flex-direction: column;
    margin: 0 15px;
    position: relative;
  }
  #body article #content #center .text dl dt {
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    overflow: hidden;
  }
  #body article #content #center .text dl dt img {
    aspect-ratio: 90/60;
    display: block;
    height: 100%;
    max-width: 100%;
    -o-object-fit: cover;
       object-fit: cover;
  }
  #body article #content #center .text dl dd {
    background: #F3F3F6;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    color: #666;
    font-size: 16px;
    line-height: 1.5;
    margin: 0;
    padding: 5px 10px;
  }
  #body article #content #center .text dl span {
    color: #666;
    display: block;
    font-size: 11px;
    font-weight: 400;
    opacity: 0.65;
    padding: 1px 0 0 0;
    position: absolute;
    right: 0;
    top: 0;
    line-height: 1;
    transform: rotate(270deg);
    transform-origin: top right;
    white-space: nowrap;
  }
  #body article #content #center .text dl span:before {
    content: "Bild: ";
  }
  #body article #content #center .text dl span.me:after {
    content: "Daniel Smolcic";
  }
  #body article #content #center .text .klima {
    padding: 0 15px;
  }
  #body article #content #center .text .klima table, #body article #content #center .text .klima thead, #body article #content #center .text .klima tbody, #body article #content #center .text .klima th, #body article #content #center .text .klima tr, #body article #content #center .text .klima td {
    margin: 0;
    padding: 0;
  }
  #body article #content #center .text .klima table {
    width: 100%;
  }
  #body article #content #center .text .klima th {
    display: none;
  }
  #body article #content #center .text .klima tr {
    display: block;
  }
  #body article #content #center .text .klima tr.day td:after, #body article #content #center .text .klima tr.night td:after, #body article #content #center .text .klima tr.water td:after {
    content: " °C";
  }
  #body article #content #center .text .klima tr.sun td:after {
    content: " h";
  }
  #body article #content #center .text .klima td {
    border-top: 1px solid #FFF;
    display: block;
    height: 30px;
    line-height: 30px;
    padding: 0 0 0 80%;
    position: relative;
    text-align: center;
  }
  #body article #content #center .text .klima td:first-child {
    background: #FFF;
    border: none;
    font-weight: 800;
    margin: 15px 0 0 0;
    padding: 0;
    text-align: left;
  }
  #body article #content #center .text .klima td:first-child:before {
    display: none;
  }
  #body article #content #center .text .klima td:before {
    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;
  }
  #body article #content #center .text .klima td:nth-of-type(2):before {
    content: "Januar";
  }
  #body article #content #center .text .klima td:nth-of-type(3):before {
    content: "Februar";
  }
  #body article #content #center .text .klima td:nth-of-type(4):before {
    content: "März";
  }
  #body article #content #center .text .klima td:nth-of-type(5):before {
    content: "April";
  }
  #body article #content #center .text .klima td:nth-of-type(6):before {
    content: "Mai";
  }
  #body article #content #center .text .klima td:nth-of-type(7):before {
    content: "Juni";
  }
  #body article #content #center .text .klima td:nth-of-type(8):before {
    content: "Juli";
  }
  #body article #content #center .text .klima td:nth-of-type(9):before {
    content: "August";
  }
  #body article #content #center .text .klima td:nth-of-type(10):before {
    content: "September";
  }
  #body article #content #center .text .klima td:nth-of-type(11):before {
    content: "Oktober";
  }
  #body article #content #center .text .klima td:nth-of-type(12):before {
    content: "November";
  }
  #body article #content #center .text .klima td:nth-of-type(13):before {
    content: "Dezember";
  }
  #body article #content #center .text .klima .t1 {
    background: #6CF;
  }
  #body article #content #center .text .klima .t2 {
    background: #8DF;
  }
  #body article #content #center .text .klima .t3 {
    background: #AEF;
  }
  #body article #content #center .text .klima .t4 {
    background: #CFF;
  }
  #body article #content #center .text .klima .t5 {
    background: #FF9;
  }
  #body article #content #center .text .klima .t6 {
    background: #FC6;
  }
  #body article #content #center .text .klima .t7 {
    background: #FB5;
  }
  #body article #content #center .text .klima .t8 {
    background: #FA4;
  }
  #body article #content #center .text .klima .t9 {
    background: #F93;
  }
  #body article #content #center .text .klima .t10 {
    background: #F82;
  }
  #body article #content #center .text .klima .t11 {
    background: #F71;
  }
  #body article #content #center .text .klima .t12 {
    background: #F60;
  }
  #body article #content #center .text .klima .s1 {
    background: #FFC;
  }
  #body article #content #center .text .klima .s2 {
    background: #FFFAB9;
  }
  #body article #content #center .text .klima .s3 {
    background: #FFF6A7;
  }
  #body article #content #center .text .klima .s4 {
    background: #FFF194;
  }
  #body article #content #center .text .klima .s5 {
    background: #FFEC82;
  }
  #body article #content #center .text .klima .s6 {
    background: #FFE86F;
  }
  #body article #content #center .text .klima .s7 {
    background: #FFE35D;
  }
  #body article #content #center .text .klima .s8 {
    background: #FFDF4A;
  }
  #body article #content #center .text .klima .s9 {
    background: #FFDA38;
  }
  #body article #content #center .text .klima .s10 {
    background: #FFD525;
  }
  #body article #content #center .text .klima .s11 {
    background: #FFD113;
  }
  #body article #content #center .text .klima .s12 {
    background: #FC0;
  }
  #body article #content #center .text .klima .w1 {
    background: #CFF;
  }
  #body article #content #center .text .klima .w2 {
    background: #B9F6FA;
  }
  #body article #content #center .text .klima .w3 {
    background: #A7ECF6;
  }
  #body article #content #center .text .klima .w4 {
    background: #94E3F1;
  }
  #body article #content #center .text .klima .w5 {
    background: #82DAEC;
  }
  #body article #content #center .text .klima .w6 {
    background: #6FD1E8;
  }
  #body article #content #center .text .klima .w7 {
    background: #5DC7E3;
    color: #FFF;
  }
  #body article #content #center .text .klima .w8 {
    background: #4ABEDF;
    color: #FFF;
  }
  #body article #content #center .text .klima .w9 {
    background: #38B5DA;
    color: #FFF;
  }
  #body article #content #center .text .klima .w10 {
    background: #25ACD5;
    color: #FFF;
  }
  #body article #content #center .text .klima .w11 {
    background: #13A2D1;
    color: #FFF;
  }
  #body article #content #center .text .klima .w12 {
    background: #09C;
    color: #FFF;
  }
  #body article #content #center .text .klima .r1 {
    background: #9CF;
  }
  #body article #content #center .text .klima .r2 {
    background: #8BBEF6;
  }
  #body article #content #center .text .klima .r3 {
    background: #7DB0EC;
  }
  #body article #content #center .text .klima .r4 {
    background: #6FA2E3;
  }
  #body article #content #center .text .klima .r5 {
    background: #6194DA;
    color: #FFF;
  }
  #body article #content #center .text .klima .r6 {
    background: #5386D1;
    color: #FFF;
  }
  #body article #content #center .text .klima .r7 {
    background: #4679C7;
    color: #FFF;
  }
  #body article #content #center .text .klima .r8 {
    background: #386BBE;
    color: #FFF;
  }
  #body article #content #center .text .klima .r9 {
    background: #2A5DB5;
    color: #FFF;
  }
  #body article #content #center .text .klima .r10 {
    background: #1C4FAC;
    color: #FFF;
  }
  #body article #content #center .text .klima .r11 {
    background: #0E41A2;
    color: #FFF;
  }
  #body article #content #center .text .klima .r12 {
    background: #039;
    color: #FFF;
  }
  #body article #content #center .text .tabelle {
    padding: 15px;
  }
  #body article #content #center .text .tabelle table {
    width: 100%;
  }
  #body article #content #center .text .tabelle tr.criteria th, #body article #content #center .text .tabelle tr.criteria td {
    background: #FFFAB9;
    font-weight: 700;
  }
  #body article #content #center .text .tabelle tr.overall th, #body article #content #center .text .tabelle tr.overall td {
    background: #FCEC80;
  }
  #body article #content #center .text .tabelle tr.odd th, #body article #content #center .text .tabelle tr.odd td {
    background: #F8F8F8;
  }
  #body article #content #center .text .tabelle th, #body article #content #center .text .tabelle td {
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    font-weight: 400;
    padding: 10px 15px;
    text-align: left;
  }
  #body article #content #center .text .tabelle th div:after {
    content: attr(data-weight);
    float: right;
    font-weight: 400;
  }
  #body article #content #center .text .tabelle td {
    border-left: 1px solid rgba(0, 0, 0, 0.1);
    white-space: nowrap;
  }
  #body article #content #center .text .tabelle td i, #body article #content #center .text .tabelle td span {
    background: url("../img/good.svg") no-repeat center center/16px 16px;
    display: inline-block;
    width: 16px;
    height: 16px;
  }
  #body article #content #center .text .tabelle td i {
    background-image: url("../img/slash.svg");
  }
  #body article #content #center .text .tabelle td .average {
    background-image: url("../img/average.svg");
    background-size: 14px 14px;
  }
  #body article #content #center .text .tabelle td .bad {
    background-image: url("../img/bad.svg");
  }
  #body article #content #center .product-box .product {
    display: flex;
    flex-direction: column;
    padding: 0 15px;
  }
  #body article #content #center .product-box .inner {
    display: flex;
    flex-direction: column;
  }
  #body article #content #center .product-box .inner .img {
    align-items: center;
    display: flex;
    justify-content: center;
    order: 2;
  }
  #body article #content #center .product-box .inner .img a {
    display: block;
    padding: 15px 30px;
  }
  #body article #content #center .product-box .inner .img img {
    display: block;
    max-height: 200px;
    max-width: 100%;
  }
  #body article #content #center .product-box .inner .cell {
    display: contents;
  }
  #body article #content #center .product-box .inner .cell .hl {
    order: 1;
  }
  #body article #content #center .product-box .inner .cell .hl a {
    font-size: 20px;
    font-weight: 700;
  }
  #body article #content #center .product-box .inner .cell .hl .rating {
    display: flex;
    font-size: 14px;
    gap: 10px;
    padding: 5px 0 0 0;
  }
  #body article #content #center .product-box .inner .cell .hl .rating .value,
  #body article #content #center .product-box .inner .cell .hl .rating b {
    font-weight: 400;
  }
  #body article #content #center .product-box .inner .cell .hl .rating .stars {
    background: url("../img/stars-1.svg") no-repeat center center;
    height: 17px;
    width: 84px;
  }
  #body article #content #center .product-box .inner .cell .hl .rating .stars.stars-2 {
    background-image: url("../img/stars-2.svg");
  }
  #body article #content #center .product-box .inner .cell .hl .rating .stars.stars-3 {
    background-image: url("../img/stars-3.svg");
  }
  #body article #content #center .product-box .inner .cell .hl .rating .stars.stars-4 {
    background-image: url("../img/stars-4.svg");
  }
  #body article #content #center .product-box .inner .cell .hl .rating .stars.stars-5 {
    background-image: url("../img/stars-5.svg");
  }
  #body article #content #center .product-box .inner .cell .hl .rating .stars.stars-6 {
    background-image: url("../img/stars-6.svg");
  }
  #body article #content #center .product-box .inner .cell .hl .rating .stars.stars-7 {
    background-image: url("../img/stars-7.svg");
  }
  #body article #content #center .product-box .inner .cell .hl .rating .stars.stars-8 {
    background-image: url("../img/stars-8.svg");
  }
  #body article #content #center .product-box .inner .cell .hl .rating .stars.stars-9 {
    background-image: url("../img/stars-9.svg");
  }
  #body article #content #center .product-box .inner .cell .hl .rating .stars.stars-10 {
    background-image: url("../img/stars-10.svg");
  }
  #body article #content #center .product-box .inner .cell .descr {
    order: 3;
  }
  #body article #content #center .product-box .inner .cell .descr ul {
    font-weight: 400;
    margin: 0;
    padding: 0 0 0 5px;
  }
  #body article #content #center .product-box .inner .cell .descr ul li {
    background: url("../img/tick-product-box.svg") no-repeat top 3px left;
    line-height: 22px;
    padding: 4px 0 4px 34px;
  }
  #body article #content #center .product-box .price {
    order: 4;
  }
  #body article #content #center .product-box .price .top {
    padding: 10px 0 15px 0;
  }
  #body article #content #center .product-box .price .top b {
    display: block;
    font-size: 22px;
    font-weight: 700;
    text-align: center;
  }
  #body article #content #center .product-box .price .top s {
    display: block;
    font-size: 16px;
    font-weight: 400;
    opacity: 0.65;
    padding: 5px 0 0 0;
    text-align: center;
  }
  #body article #content #center .product-box .price .bottom a {
    background: #fa3707;
    border-radius: 5px;
    box-sizing: border-box;
    font-size: 18px;
    font-weight: 600;
    color: #FFF;
    display: block;
    height: 40px;
    line-height: 40px;
    padding: 0 15px;
    text-align: center;
  }
  #body article #content #center .product-box .price .bottom a:after {
    content: attr(mobile-text);
  }
  #body article #content #center .product-box .price .bottom em {
    display: block;
    font-style: normal;
    font-weight: 400;
    text-align: center;
    padding: 5px 0 0 0;
  }
  #body article #content #center .related-text {
    padding: 15px;
  }
  #body article #content #center .related-text h3 {
    margin: 0 0 15px 0;
  }
  #body article #content #center .related-text .items {
    display: flex;
    flex-direction: column;
    gap: 15px;
  }
  #body article #content #center .related-text .items a {
    background: #F3F3F6;
    border: 2px solid #F3F3F6;
    border-radius: 5px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 5px;
    flex: 1;
    line-height: 24px;
    padding: 10px 15px;
  }
  #body article #content #center .related-text .items a:hover {
    background: #FFF;
    border-color: #CCC;
  }
  #body article #content #center .related-text .items a:focus-visible {
    outline: 2px dashed #999;
  }
  #body article #content #center .related-text .items a span {
    color: #fa3707;
    font-weight: 600;
    width: 80%;
  }
  #body article #content #center .related-text .items a span:last-child {
    color: #333;
    font-weight: 700;
  }
  #body article #content #center .related-image h3 {
    margin: 0 15px;
  }
  #body article #content #center .related-image a {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 15px;
    width: -moz-fit-content;
    width: fit-content;
  }
  #body article #content #center .related-image a .img {
    border-radius: 5px;
    display: flex;
    overflow: hidden;
    -o-object-fit: contain;
       object-fit: contain;
  }
  #body article #content #center .related-image a .img img {
    aspect-ratio: 90/60;
    width: 100%;
  }
  #body article #content #center .related-image a .text {
    color: #fa3707;
    display: flex;
    flex-direction: column;
    font-weight: 700;
    gap: 5px;
    max-width: 460px;
  }
  #body article #content #center .related-image a span:last-child {
    color: #333;
    font-size: 20px;
    font-weight: 700;
    line-height: 24px;
  }
  #body .vergleich {
    padding: 15px;
  }
  #body .vergleich .headline {
    font-size: 24px;
    font-weight: 900;
  }
  #body .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%;
  }
  #body .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%;
  }
  #body .vergleich .table2 div div:before {
    display: none;
  }
  #body .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;
  }
  #body .vergleich .table2 div.img img {
    display: block;
    margin: 20px;
    max-height: 150px;
    max-width: 100%;
  }
  #body .vergleich .table2 div.img:before {
    display: none;
  }
  #body .vergleich .table2 div.name {
    background: #FFF;
    display: block;
    padding: 0 20px 15px 20px;
  }
  #body .vergleich .table2 div.name i {
    display: block;
    font-size: 16px;
    font-style: normal;
    font-weight: 800;
    padding: 10px 0 0 0;
  }
  #body .vergleich .table2 div.name div {
    background: #FFF;
    border: none;
    display: block;
    font-size: 20px;
    font-weight: 800;
    padding: 0 0 10px 0;
    width: 100%;
  }
  #body .vergleich .table2 div.name span {
    color: #999;
    display: inline;
    font-size: 14px;
    font-weight: 500;
  }
  #body .vergleich .table2 div.name span b {
    background: #fa3707;
    color: #FFF;
    display: inline-block;
    margin: 0 5px 0 0;
    font-weight: 400;
    padding: 0 3px;
  }
  #body .vergleich .table2 div.name:before {
    display: none;
  }
  #body .vergleich .table2 div.logo {
    border-top: 1px solid #CCC;
    display: block;
    position: relative;
  }
  #body .vergleich .table2 div.logo:after {
    color: #CCC;
    content: attr(data-label);
    position: absolute;
    top: 3px;
    right: 5px;
    font-size: 10px;
  }
  #body .vergleich .table2 div.logo div {
    background: #FFF;
    border: none;
    display: flex;
    justify-content: center;
    padding: 20px 0 0 0;
    width: 100%;
  }
  #body .vergleich .table2 div.logo div picture img {
    display: block;
    max-height: 30px;
  }
  #body .vergleich .table2 div.logo img {
    max-width: 100%;
  }
  #body .vergleich .table2 div.logo:before {
    display: none;
  }
  #body .vergleich .table2 div.cta {
    display: block;
  }
  #body .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%;
  }
  #body .vergleich .table2 div.cta a {
    align-items: center;
    background: #DDD;
    background: #fa3707;
    border-radius: 50px;
    display: flex;
    color: #333;
    color: #fff;
    font-size: 16px;
    font-weight: 800;
    height: 40px;
    padding: 0 20px;
    justify-content: center;
  }
  #body .vergleich .table2 div.cta strong {
    display: block;
    font-size: 14px;
    font-weight: 500;
    margin: 5px 0 0 0;
  }
  #body .vergleich .table2 div.cta:before {
    display: none;
  }
  #body .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;
  }
  #body .vergleich .table2 div.bottom:after {
    color: #CCC;
    content: attr(data-label);
    position: absolute;
    top: 3px;
    right: 5px;
    font-size: 10px;
  }
  #body .vergleich .table2 div.bottom div {
    background: transparent;
    border: none;
    width: auto;
    padding: 10px;
  }
  #body .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: 800;
  }
  #body .vergleich .table2 div.bottom:before {
    display: none;
  }
  #body .vergleich .table2 div:before {
    background: #FFF;
    border-bottom: 1px solid #CCC;
    box-sizing: border-box;
    content: attr(data-label);
    display: table-cell;
    font-weight: 800;
    padding: 7px 10px;
    text-align: left;
    width: 50%;
    vertical-align: middle;
  }
  #newsletter {
    background: #bcdfe8;
    margin: 50px 0 0 0;
    padding: 0 15px;
  }
  #newsletter .left {
    padding: 15px 0;
  }
  #newsletter .left div {
    font-size: 20px;
    font-weight: 800;
    padding: 0 0 5px 0;
  }
  #newsletter .left span {
    font-size: 14px;
  }
  #newsletter .right {
    padding: 0 0 20px 0;
  }
  #newsletter .right form {
    position: relative;
    z-index: 500;
  }
  #newsletter .right form input {
    background: #FFF;
    border: none;
    border-radius: 5px;
    font-family: inherit;
    font-size: inherit;
    height: 44px;
    padding: 0 15px;
    width: 100%;
    box-sizing: border-box;
  }
  #newsletter .right form button {
    background: #333 url("../img/send.svg") no-repeat center center;
    border: none;
    border-radius: 5px;
    height: 40px;
    margin: 0;
    overflow: hidden;
    position: absolute;
    right: 2px;
    text-indent: -1000px;
    top: 2px;
    width: 40px;
  }
  footer .top {
    padding: 10px 5px;
  }
  footer .top img {
    display: none;
  }
  footer .top ul {
    display: flex;
    font-size: 14px;
    margin: 0;
    padding: 0;
  }
  footer .top ul li {
    display: flex;
  }
  footer .top ul li a {
    padding: 7px 10px;
  }
  footer .bottom p {
    font-size: 14px;
    font-weight: 600;
    margin: 0;
    padding: 0 15px 15px 15px;
  }
  footer .bottom 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 .bottom span {
    color: #FFF;
    color: green;
    display: block;
    font-size: 14px;
    font-weight: 600;
    padding: 0 15px 15px 15px;
  }
}