:root {
    --black: #000000;
    --rose: #f2969a;
    --red: #d73327;
    --cream: #f9ddd1;
    --green: #a2ac78;
    --logo-start: url(/assets/logo-start-light-BNMkGbtY.svg);
    --logo-header: url(/assets/logo-wortmarke-schwarz-CSA3uJIK.svg);
    --apfel-icon: url("data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'?%3e%3csvg%20id='Ebene_1'%20data-name='Ebene%201'%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2056.18%2050'%3e%3cpath%20d='M51.36,16.35c-1.04-1.33-3.48-4.44-7.94-6.38-6.2-2.7-11.92-1.46-15.01-.36.3-.64.62-1.27,1.02-1.87.36-.53,1.1-1.63,2.3-2.58,1.28-1.02,2.82-1.67,4.57-1.93.35-.05.66-.28.82-.6.17-.33.16-.71-.01-1.03-.29-.54-.81-1.24-1.68-1.52-.57-.18-1.47-.22-3.41,1.1-3.13,2.14-4.59,4.81-4.96,5.58-.37.76-.66,1.6-.66,1.61-.13.38-.22.79-.33,1.18-2.25-1.01-4.64-1.57-7.03-1.59h-.1c-7.22,0-12.13,4.67-13.91,6.68C-.41,20.85-1.58,30.47,2.22,38.06c4.42,8.83,14.34,12.63,21.86,11.82,1.22-.13,4.31-.46,7.43-2.52,1.63,1.14,3.99,2.32,7.01,2.59.41.04.81.05,1.22.05,3.07,0,6.08-1.03,8.95-3.08,3.04-2.18,6.8-6.53,7.44-14.93.16-2.05.26-9.24-4.77-15.64ZM38.02,37.38c.14-.89.51-3.24-.46-6.01-.37-1.06-.91-2.08-1.6-3.02-.44-.6-1.28-.73-1.87-.29-.6.44-.73,1.27-.29,1.87.53.73.95,1.51,1.23,2.32.75,2.12.46,3.93.34,4.71-.67,4.36-3.93,7.1-4.63,7.64-.01.01-.03.02-.04.03-2.79,2.13-5.78,2.45-6.91,2.57-6.61.72-15.3-2.62-19.17-10.36-3.32-6.64-2.32-15.03,2.44-20.42,1.54-1.74,5.76-5.77,11.9-5.77.03,0,.06,0,.08,0,2.54.01,5.1.73,7.43,2.07l.58.34,1.1-.47c2.18-.96,7.94-2.9,14.22-.18,3.83,1.66,5.98,4.4,6.9,5.57,4.44,5.64,4.34,11.98,4.21,13.78-.56,7.36-3.75,11.11-6.33,12.95-1.01.72-4.08,2.93-8.38,2.54-2.08-.18-3.78-.91-5.06-1.69,1.56-1.54,3.74-4.32,4.33-8.2Z'/%3e%3c/svg%3e");
    --apfel-icon-filled: url(../assets/icon/apfel-icon-filled.svg\ );
    --button-font-color: var(--black);
    --dialog-apfel-icon: url("data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'?%3e%3csvg%20id='Ebene_1'%20data-name='Ebene%201'%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2056.18%2050'%3e%3cdefs%3e%3cstyle%3e%20.cls-1%20{%20fill:%20%23f9ddd1;%20}%20%3c/style%3e%3c/defs%3e%3cpath%20class='cls-1'%20d='M51.36,16.35c-1.04-1.33-3.48-4.44-7.94-6.38-6.2-2.7-11.92-1.46-15.01-.36.3-.64.62-1.27,1.02-1.87.36-.53,1.1-1.63,2.3-2.58,1.28-1.02,2.82-1.67,4.57-1.93.35-.05.66-.28.82-.6.17-.33.16-.71-.01-1.03-.29-.54-.81-1.24-1.68-1.52-.57-.18-1.47-.22-3.41,1.1-3.13,2.14-4.59,4.81-4.96,5.58-.37.76-.66,1.6-.66,1.61-.13.38-.22.79-.33,1.18-2.25-1.01-4.64-1.57-7.03-1.59h-.1c-7.22,0-12.13,4.67-13.91,6.68C-.41,20.85-1.58,30.47,2.22,38.06c4.42,8.83,14.34,12.63,21.86,11.82,1.22-.13,4.31-.46,7.43-2.52,1.63,1.14,3.99,2.32,7.01,2.59.41.04.81.05,1.22.05,3.07,0,6.08-1.03,8.95-3.08,3.04-2.18,6.8-6.53,7.44-14.93.16-2.05.26-9.24-4.77-15.64ZM38.02,37.38c.14-.89.51-3.24-.46-6.01-.37-1.06-.91-2.08-1.6-3.02-.44-.6-1.28-.73-1.87-.29-.6.44-.73,1.27-.29,1.87.53.73.95,1.51,1.23,2.32.75,2.12.46,3.93.34,4.71-.67,4.36-3.93,7.1-4.63,7.64-.01.01-.03.02-.04.03-2.79,2.13-5.78,2.45-6.91,2.57-6.61.72-15.3-2.62-19.17-10.36-3.32-6.64-2.32-15.03,2.44-20.42,1.54-1.74,5.76-5.77,11.9-5.77.03,0,.06,0,.08,0,2.54.01,5.1.73,7.43,2.07l.58.34,1.1-.47c2.18-.96,7.94-2.9,14.22-.18,3.83,1.66,5.98,4.4,6.9,5.57,4.44,5.64,4.34,11.98,4.21,13.78-.56,7.36-3.75,11.11-6.33,12.95-1.01.72-4.08,2.93-8.38,2.54-2.08-.18-3.78-.91-5.06-1.69,1.56-1.54,3.74-4.32,4.33-8.2Z'/%3e%3c/svg%3e");
    --dialog-apfel-icon-filled: url(../assets/icon/apfel-icon-creme-filled.svg\ );
    --illustration-step-1: url(/assets/step-01-BPNzbYNL.svg);
    --illustration-step-2: url(/assets/step-02-BuXzT-Za.svg);
    --illustration-step-3: url(/assets/step-03-Y8r_qUEG.svg);
    --illustration-step-4: url(/assets/step-04-BSr-VGXO.svg);
    --illustration-step-5: url(/assets/step-05-BQGqrAiX.svg);
    --illustration-step-6: url(/assets/step-01-BPNzbYNL.svg)
}

html[data-theme=dark] {
    --black: #f9ddd1;
    --cream: #000000;
    --logo-start: url(/assets/logo-start-black-_VJKYaHf.svg);
    --logo-header: url(/assets/logo-wortmarke-creme-BJfbvFpL.svg);
    --apfel-icon: url("data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'?%3e%3csvg%20id='Ebene_1'%20data-name='Ebene%201'%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2056.18%2050'%3e%3cdefs%3e%3cstyle%3e%20.cls-1%20{%20fill:%20%23f9ddd1;%20}%20%3c/style%3e%3c/defs%3e%3cpath%20class='cls-1'%20d='M51.36,16.35c-1.04-1.33-3.48-4.44-7.94-6.38-6.2-2.7-11.92-1.46-15.01-.36.3-.64.62-1.27,1.02-1.87.36-.53,1.1-1.63,2.3-2.58,1.28-1.02,2.82-1.67,4.57-1.93.35-.05.66-.28.82-.6.17-.33.16-.71-.01-1.03-.29-.54-.81-1.24-1.68-1.52-.57-.18-1.47-.22-3.41,1.1-3.13,2.14-4.59,4.81-4.96,5.58-.37.76-.66,1.6-.66,1.61-.13.38-.22.79-.33,1.18-2.25-1.01-4.64-1.57-7.03-1.59h-.1c-7.22,0-12.13,4.67-13.91,6.68C-.41,20.85-1.58,30.47,2.22,38.06c4.42,8.83,14.34,12.63,21.86,11.82,1.22-.13,4.31-.46,7.43-2.52,1.63,1.14,3.99,2.32,7.01,2.59.41.04.81.05,1.22.05,3.07,0,6.08-1.03,8.95-3.08,3.04-2.18,6.8-6.53,7.44-14.93.16-2.05.26-9.24-4.77-15.64ZM38.02,37.38c.14-.89.51-3.24-.46-6.01-.37-1.06-.91-2.08-1.6-3.02-.44-.6-1.28-.73-1.87-.29-.6.44-.73,1.27-.29,1.87.53.73.95,1.51,1.23,2.32.75,2.12.46,3.93.34,4.71-.67,4.36-3.93,7.1-4.63,7.64-.01.01-.03.02-.04.03-2.79,2.13-5.78,2.45-6.91,2.57-6.61.72-15.3-2.62-19.17-10.36-3.32-6.64-2.32-15.03,2.44-20.42,1.54-1.74,5.76-5.77,11.9-5.77.03,0,.06,0,.08,0,2.54.01,5.1.73,7.43,2.07l.58.34,1.1-.47c2.18-.96,7.94-2.9,14.22-.18,3.83,1.66,5.98,4.4,6.9,5.57,4.44,5.64,4.34,11.98,4.21,13.78-.56,7.36-3.75,11.11-6.33,12.95-1.01.72-4.08,2.93-8.38,2.54-2.08-.18-3.78-.91-5.06-1.69,1.56-1.54,3.74-4.32,4.33-8.2Z'/%3e%3c/svg%3e");
    --apfel-icon-filled: url(../assets/icon/apfel-icon-creme-filled.svg\ );
    --button-font-color: #000000;
    --dialog-apfel-icon: url("data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'?%3e%3csvg%20id='Ebene_1'%20data-name='Ebene%201'%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2056.18%2050'%3e%3cpath%20d='M51.36,16.35c-1.04-1.33-3.48-4.44-7.94-6.38-6.2-2.7-11.92-1.46-15.01-.36.3-.64.62-1.27,1.02-1.87.36-.53,1.1-1.63,2.3-2.58,1.28-1.02,2.82-1.67,4.57-1.93.35-.05.66-.28.82-.6.17-.33.16-.71-.01-1.03-.29-.54-.81-1.24-1.68-1.52-.57-.18-1.47-.22-3.41,1.1-3.13,2.14-4.59,4.81-4.96,5.58-.37.76-.66,1.6-.66,1.61-.13.38-.22.79-.33,1.18-2.25-1.01-4.64-1.57-7.03-1.59h-.1c-7.22,0-12.13,4.67-13.91,6.68C-.41,20.85-1.58,30.47,2.22,38.06c4.42,8.83,14.34,12.63,21.86,11.82,1.22-.13,4.31-.46,7.43-2.52,1.63,1.14,3.99,2.32,7.01,2.59.41.04.81.05,1.22.05,3.07,0,6.08-1.03,8.95-3.08,3.04-2.18,6.8-6.53,7.44-14.93.16-2.05.26-9.24-4.77-15.64ZM38.02,37.38c.14-.89.51-3.24-.46-6.01-.37-1.06-.91-2.08-1.6-3.02-.44-.6-1.28-.73-1.87-.29-.6.44-.73,1.27-.29,1.87.53.73.95,1.51,1.23,2.32.75,2.12.46,3.93.34,4.71-.67,4.36-3.93,7.1-4.63,7.64-.01.01-.03.02-.04.03-2.79,2.13-5.78,2.45-6.91,2.57-6.61.72-15.3-2.62-19.17-10.36-3.32-6.64-2.32-15.03,2.44-20.42,1.54-1.74,5.76-5.77,11.9-5.77.03,0,.06,0,.08,0,2.54.01,5.1.73,7.43,2.07l.58.34,1.1-.47c2.18-.96,7.94-2.9,14.22-.18,3.83,1.66,5.98,4.4,6.9,5.57,4.44,5.64,4.34,11.98,4.21,13.78-.56,7.36-3.75,11.11-6.33,12.95-1.01.72-4.08,2.93-8.38,2.54-2.08-.18-3.78-.91-5.06-1.69,1.56-1.54,3.74-4.32,4.33-8.2Z'/%3e%3c/svg%3e");
    --dialog-apfel-icon-filled: url(../assets/icon/apfel-icon-filled.svg\ );
    --illustration-step-1: url(/assets/step-01-BPNzbYNL.svg);
    --illustration-step-2: url(/assets/step-02-dark-D28bdInl.svg);
    --illustration-step-3: url(/assets/step-03-dark-DwW43gd_.svg);
    --illustration-step-4: url(/assets/step-04-dark-Dm6-bCj3.svg);
    --illustration-step-5: url(/assets/step-05-dark-D4ACfPSP.svg);
    --illustration-step-6: url(/assets/step-01-BPNzbYNL.svg)
}

@font-face {
    font-family: Loose-Black;
    src: url(/assets/loos_extended_black-PFQhYHQZ.woff2) format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: Loose-Bold;
    src: url(/assets/loos_extended_bold-gCUU0ZPR.woff2) format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: Loose-Medium;
    src: url(/assets/loos_extrawide_medium-Cg6QlGXM.woff2) format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: Loose-Light;
    src: url(/assets/loos_extended_light-DT_Rurkr.woff2) format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: Loose-Extra-Light;
    src: url(/assets/loos_compressed_extra_light-bgh7EK60.woff2) format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap
}

header {
    position: fixed;
    top: 0;
    right: 0;
    width: 100vw;
    z-index: 100;
    box-sizing: border-box;
    padding: 12px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start
}

header > div {
    display: flex;
    gap: 12px;
    align-items: center;
    height: 25px
}

header img {
    height: 45px;
    width: auto;
    justify-self: flex-start
}

header button {
    text-decoration: underline;
    text-decoration-style: dotted;
    color: var(--black);
    background-color: transparent;
    padding: 0;
    font-size: 15px
}

header #logo {
    aspect-ratio: 550/438;
    height: 45px;
    background-image: var(--logo-header)
}

footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100vw;
    box-sizing: border-box;
    padding: 0 20px 12px
}

footer #bottom-bar {
    display: flex;
    justify-content: space-between
}

footer #bottom-bar button, footer #bottom-bar a {
    font-family: Loose-Extra-Light, sans-serif;
    text-transform: none;
    margin: 0;
    text-decoration: underline;
    text-decoration-style: dotted;
    color: var(--black);
    background-color: transparent;
    padding: 0;
    font-size: 15px
}

.carousel {
    display: flex;
    height: 100%;
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    overscroll-behavior-x: contain
}

.carousel > section {
    scroll-snap-align: start;
    scroll-snap-stop: always
}

.carousel::-webkit-scrollbar {
    display: none
}

section {
    width: 100vw;
    overflow-y: auto;
    flex: 0 0 100vw;
    height: 100vh;
    scroll-snap-align: start;
    text-align: center;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 65px 0 165px;
    box-sizing: border-box;
    scrollbar-width: none
}

section::-webkit-scrollbar {
    display: none
}

section .textbox {
    display: flex;
    flex-direction: column;
    padding: 0 20px;
    margin: 20px 0;
    background-color: transparent;
    color: var(--black)
}

section .textbox.rose {
    padding: 20px;
    margin: 0;
    background-color: var(--rose);
    color: #000
}

section .textbox.rose h2 {
    color: #000
}

section .textbox.black {
    padding: 20px;
    margin: 0;
    background-color: var(--black);
    color: var(--cream)
}

section .textbox, section .textbox p {
    text-align: left
}

section .textbox p {
    margin: 0
}

section .textbox p:not(:last-child) {
    margin: 0 0 12px
}

section .textbox a {
    font-weight: 700;
    text-decoration: underline;
    text-decoration-style: dotted;
    color: var(--red)
}

#spinner, #video-spinner {
    display: none;
    width: 25px;
    height: 25px;
    border: 5px solid rgba(0, 0, 0, .1);
    border-top-color: var(--rose);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    z-index: 9999;
    margin-left: auto
}

@keyframes spin {
    to {
        transform: rotate(360deg)
    }
}

nav {
    width: 100%;
    box-sizing: border-box;
    display: flex;
    gap: 12px;
    justify-content: center;
    margin-bottom: 4px
}

nav button {
    width: 22px;
    height: 22px;
    padding: 0;
    border-radius: 50%;
    transition: background-color .3s ease;
    background-color: var(--red)
}

nav button.active {
    background-color: var(--green)
}

#choose .category-list {
    margin: 0 20px;
    display: flex;
    gap: 12px;
    flex-direction: column
}

#choose .category-list button.toggle-btn {
    background-color: var(--rose);
    color: var(--button-font-color);
    line-height: 18px;
    scroll-margin-top: 65px
}

#choose .category-list button.toggle-btn.active {
    background-color: var(--red)
}

#choose .item {
    text-align: left;
    margin: 12px 0;
    font-family: Loose-Light, sans-serif;
    font-size: 15px
}

#choose .item .kink, #choose .item fieldset {
    margin-left: 12px
}

#choose .item:not(:last-child) {
    padding-bottom: 12px;
    border-bottom: 1px solid var(--rose)
}

#choose .weights p {
    text-transform: uppercase;
    font-family: Loose-Bold, sans-serif;
    font-size: 15px;
    margin-bottom: 4px
}

#choose .weights span.weight-img:not(:last-child) {
    margin-right: 4px
}

#share #qr-code canvas {
    display: block;
    margin: auto
}

#share #qr-code.hidden {
    display: none
}

#share #qr-video {
    width: 100%;
    aspect-ratio: 1/1;
    position: relative;
    padding-top: 40px
}

#share #qr-video > video {
    width: 100%;
    aspect-ratio: 1/1;
    object-fit: cover;
    object-position: center;
    -webkit-backface-visibility: hidden;
    transform: translateZ(0)
}

#share #qr-video.hidden {
    display: none
}

#share .share-scan-columns {
    display: grid;
    grid-template-columns:1fr auto 1fr;
    gap: 20px;
    margin-bottom: 20px;
    padding: 0 20px
}

#share .share-scan-columns .share-col, #share .share-scan-columns .scan-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    text-align: center
}

#share .share-scan-columns .share-col p, #share .share-scan-columns .scan-col p {
    margin: 0
}

#share .share-scan-columns .share-col a, #share .share-scan-columns .scan-col a {
    font-weight: 700;
    text-decoration: underline;
    text-decoration-style: dotted;
    color: var(--red)
}

#share .share-scan-columns .share-col button, #share .share-scan-columns .scan-col button {
    margin-top: auto
}

#share .share-scan-columns .col-separator {
    display: flex;
    flex-direction: column;
    align-items: center;
    align-self: stretch
}

#share .share-scan-columns .col-separator:before, #share .share-scan-columns .col-separator:after {
    content: "";
    flex: 1;
    width: 1px;
    background: var(--black);
    opacity: .25
}

#share .share-scan-columns .col-separator span {
    padding: 4px 0;
    font-size: 15px;
    opacity: .5
}

#share #video-spinner {
    width: 90px;
    height: 90px;
    margin: auto;
    position: absolute;
    top: 25%;
    left: 0;
    right: 0
}

#share #file-input {
    margin-top: 20px;
    align-self: center;
    display: none;
    gap: 12px
}

#share #file-input #drop {
    padding: 12px;
    border: 1px solid var(--black);
    text-align: center;
    font-family: Loose-Medium, sans-serif
}

dialog {
    background-color: var(--black);
    color: var(--cream);
    padding: 20px 20px 20px 65px;
    border: none;
    box-sizing: border-box;
    position: relative
}

dialog h2 {
    font-family: Loose-Bold, sans-serif;
    font-size: 20px;
    color: var(--cream);
    padding: 0;
    margin: 0 0 12px;
    word-break: break-word
}

dialog > button {
    background: transparent url("data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'?%3e%3csvg%20id='Ebene_1'%20data-name='Ebene%201'%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2050%2050'%3e%3cdefs%3e%3cstyle%3e%20.cls-2%20{%20fill:%20%231d1d1b;%20}%20.cls-1%20{%20fill:%20%23f0ddd1;%20}%20%3c/style%3e%3c/defs%3e%3cpath%20class='cls-1'%20d='M24.98,50c13.8,0,25-11.2,25-25S38.78,0,24.98,0-.02,11.19-.02,25s11.19,25,25,25'/%3e%3cpolygon%20class='cls-2'%20points='38.29%2016.7%2033.23%2011.65%2024.93%2019.95%2016.63%2011.65%2011.58%2016.7%2019.88%2025%2011.58%2033.3%2016.63%2038.35%2024.93%2030.05%2033.23%2038.35%2038.29%2033.3%2029.99%2025%2038.29%2016.7'/%3e%3c/svg%3e") no-repeat center center;
    background-size: 20px;
    position: absolute;
    left: 22.5px;
    top: 22.5px;
    width: 32px;
    height: 32px;
    border: none;
    cursor: pointer;
    padding: 0;
    margin: 0
}

dialog::backdrop {
    background: #0009
}

#start {
    display: flex
}

#start button#start-next-button {
    background-color: var(--red);
    font-family: Loose-Black, sans-serif;
    color: #f9ddd1;
    align-self: flex-end;
    margin: 20px 20px 20px 0;
    background-image: url("data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'?%3e%3csvg%20id='Ebene_1'%20data-name='Ebene%201'%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2051.31%2050'%20fill='%23f9ddd1'%3e%3cpath%20class='cls-1'%20d='M16.96,5.97v8.72l21.48,9.28v1.76l-21.48,10.28v9.02l32.97-17.66c1.86-1,1.84-3.68-.05-4.64L16.96,5.97Z'/%3e%3crect%20class='cls-1'%20y='21.04'%20width='38.9'%20height='7.92'/%3e%3c/svg%3e")
}

#start > div:not(.offline-message) h1 {
    font-family: Loose-Black, sans-serif;
    text-align: left;
    background-color: transparent;
    color: var(--black);
    font-size: 20px;
    margin: 0;
    padding: 0
}

#start .textbox.black {
    font-family: Loose-Bold, sans-serif;
    font-size: 15px
}

#start .textbox.rose {
    margin-top: 65px
}

#start a {
    align-self: center
}

#start #logo {
    aspect-ratio: 414/651;
    width: clamp(72px, 30vw, 128px);
    height: auto;
    margin: 0 0 20px;
    background-image: var(--logo-start)
}

#start .step {
    width: 100%
}

#start .step > div[role=img] {
    width: 100%;
    max-width: 480px;
    height: clamp(72px, 18vw, 220px);
    margin: 20px 0;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    background-image: var(--illustration-step-1)
}

#start .step > div[role=img][aria-hidden=true] {
    pointer-events: none;
    opacity: .9
}

#start .step[data-step="1"] > div[role=img] {
    background-image: var(--illustration-step-1)
}

#start .step[data-step="2"] > div[role=img] {
    background-image: var(--illustration-step-2)
}

#start .step[data-step="3"] > div[role=img] {
    background-image: var(--illustration-step-3)
}

#start .step[data-step="4"] > div[role=img] {
    background-image: var(--illustration-step-4)
}

#start .step[data-step="5"] > div[role=img] {
    background-image: var(--illustration-step-5)
}

#start .step[data-step="6"] > div[role=img] {
    background-image: var(--illustration-step-6)
}

#compare .list {
    font-family: Loose-Light, sans-serif;
    font-size: 15px;
    display: grid;
    grid-template-columns:repeat(2, 1fr);
    place-items: flex-start;
    padding: 0 20px;
    width: 100%;
    box-sizing: border-box
}

#compare .list > *:nth-child(3n+2) {
    place-self: flex-end
}

#compare .list div.legend {
    font-family: Loose-Bold, sans-serif
}

#compare .list div.kink {
    margin-top: 12px;
    padding-top: 12px;
    grid-column: span 2;
    width: 100%;
    border-top: 1px solid var(--rose)
}

#compare .list input[type=radio], #compare .list label {
    pointer-events: none;
    cursor: default
}

.kink {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 5px
}

fieldset {
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
    border: none
}

fieldset label {
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px
}

fieldset label input[type=radio] {
    width: 0;
    opacity: 0;
    pointer-events: none;
    margin: 0;
    padding: 0;
    height: 0
}

fieldset label > .weight-img {
    display: inline-block;
    width: 30px;
    height: 30px;
    background: transparent var(--apfel-icon) no-repeat center center;
    cursor: pointer;
    border: 2px solid transparent;
    border-radius: 8px;
    transition: border-color .2s
}

fieldset label > .weight-img:not(:last-child) {
    margin-right: 5px
}

fieldset label:has(>input[type=radio]:checked) .weight-img {
    background-image: var(--apfel-icon-filled)
}

fieldset label:has(>input[type=radio]:checked) ~ label .weight-img {
    background-image: var(--apfel-icon-filled)
}

#logo {
    background-position: center center;
    background-size: contain;
    background-repeat: no-repeat
}

.offline-message {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    box-sizing: border-box
}

.offline-message h1 {
    font-family: Loose-Bold, sans-serif;
    background-color: var(--black);
    color: var(--cream);
    padding: 15px 20px 10px;
    font-size: 24px;
    margin: 0;
    width: 100%;
    box-sizing: border-box;
    text-transform: uppercase
}

.offline-message p {
    padding: 20px;
    margin: 0;
    text-align: left;
    font-size: 20px;
    color: var(--black)
}

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    font-family: Loose-Extra-Light, sans-serif;
    background-color: var(--cream);
    color: var(--black);
    font-size: 20px;
    line-height: 1.4;
    overflow-y: hidden
}

@media (min-width: 650px) {
    section {
        padding-left: 25vw !important;
        padding-right: 25vw !important
    }

    h1 {
        width: auto !important;
        margin: 0 auto !important
    }

    .textbox:not(.rose):not(.black) {
        padding-left: 0 !important;
        padding-right: 0 !important
    }

    .category-list {
        margin: 0 !important
    }
}

* {
    -webkit-tap-highlight-color: transparent;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0)
}

main {
    width: 100vw;
    overflow: hidden;
    position: relative
}

h1 {
    font-family: Loose-Bold, sans-serif;
    color: var(--cream);
    text-transform: uppercase;
    background-color: var(--black);
    padding: 15px 20px 10px;
    font-size: 24px;
    margin: 0;
    width: 100%;
    text-align: left;
    box-sizing: border-box
}

h2 {
    font-family: Loose-Bold, sans-serif;
    color: var(--black);
    font-size: 20px;
    margin: 0 0 20px
}

h4 {
    margin: 0 0 12px
}

.headline {
    display: flex;
    width: 100%
}

.headline h1 {
    flex-grow: 1
}

.headline button {
    height: 100%
}

.headline button[disabled] {
    display: none
}

button {
    font-family: Loose-Medium, sans-serif;
    padding: 12px 12px 7px;
    color: var(--black);
    text-transform: uppercase;
    background-color: var(--green);
    font-size: 20px;
    margin: 0;
    border: none;
    border-radius: 0;
    cursor: pointer;
    text-align: left
}

button[aria-pressed=true] {
    background-color: var(--red)
}

button:focus {
    outline: none
}

button:focus, button:focus-visible {
    box-shadow: none
}

button.info-btn {
    color: var(--cream);
    background: var(--black) none;
    width: 20px;
    height: 20px;
    flex: 20px 0 0;
    border-radius: 50%;
    border: none;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center
}

button.info-btn svg {
    width: 20px;
    height: 20px
}

button.next-button {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #000;
    background-image: url("data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'?%3e%3csvg%20id='Ebene_1'%20data-name='Ebene%201'%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2051.31%2050'%20fill='currentColor'%3e%3cpath%20class='cls-1'%20d='M16.96,5.97v8.72l21.48,9.28v1.76l-21.48,10.28v9.02l32.97-17.66c1.86-1,1.84-3.68-.05-4.64L16.96,5.97Z'/%3e%3crect%20class='cls-1'%20y='21.04'%20width='38.9'%20height='7.92'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 13px center;
    background-size: 20px;
    font-family: Loose-Medium, sans-serif;
    font-size: 20px;
    line-height: 18px;
    padding: 12px 40px 7px 10px;
    border: none;
    cursor: pointer;
    width: fit-content;
    align-self: flex-start
}

button.next-button.reverse {
    background-image: url("data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'?%3e%3csvg%20id='Ebene_1'%20data-name='Ebene%201'%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2051.31%2050'%20fill='currentColor'%3e%3c!--%20mirrored%20group:%20translate%20by%20width%20then%20scale%20-1%20on%20X%20to%20flip%20horizontally%20--%3e%3cg%20transform='translate(51.31%200)%20scale(-1%201)'%3e%3cpath%20class='cls-1'%20d='M16.96,5.97v8.72l21.48,9.28v1.76l-21.48,10.28v9.02l32.97-17.66c1.86-1,1.84-3.68-.05-4.64L16.96,5.97Z'/%3e%3crect%20class='cls-1'%20y='21.04'%20width='38.9'%20height='7.92'/%3e%3c/g%3e%3c/svg%3e")
}

button#toggle-theme {
    background: transparent url("data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'?%3e%3csvg%20id='Ebene_1'%20data-name='Ebene%201'%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2050%2050'%3e%3cdefs%3e%3cstyle%3e%20.cls-1%20{%20fill:%20%231d1d1b;%20}%20%3c/style%3e%3c/defs%3e%3cpath%20class='cls-1'%20d='M47.08,30.42h0c-.73.77-1.53,1.44-2.37,1.98-6.96,4.54-16.72,2.01-21.76-5.64-5.04-7.65-3.48-17.57,3.48-22.11.84-.55,1.77-1.01,2.77-1.37.76-.28,1.24-1.02,1.17-1.79-.08-.77-.68-1.35-1.47-1.41-5.84-.46-11.81,1.08-16.81,4.34C.08,12.26-3.61,27.86,3.87,39.21c7.48,11.35,23.33,14.21,35.33,6.37,5-3.26,8.8-8.09,10.7-13.6.26-.75-.04-1.53-.72-1.91-.68-.38-1.55-.23-2.11.35ZM37.59,43.14c-10.58,6.9-24.55,4.38-31.14-5.61C-.13,27.52,3.12,13.77,13.69,6.87c2.96-1.93,6.31-3.18,9.75-3.67-7.22,5.81-8.68,16.76-3.09,25.25,5.59,8.49,16.27,11.52,24.5,7.25-1.82,2.95-4.31,5.51-7.27,7.44Z'/%3e%3c/svg%3e") no-repeat left 0;
    height: 20px;
    padding-left: 32px;
    background-size: 20px
}

button#toggle-theme[dark-mode=true] {
    background-image: url("data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'?%3e%3csvg%20id='Ebene_1'%20data-name='Ebene%201'%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2050%2050'%3e%3cdefs%3e%3cstyle%3e%20.cls-1%20{%20fill:%20none;%20}%20.cls-2%20{%20fill:%20%23f0ddd1;%20}%20%3c/style%3e%3c/defs%3e%3cpath%20class='cls-2'%20d='M40.85,30.91l7.15,2.33c.8.26,1.66-.17,1.92-.95h0c.26-.78-.17-1.63-.97-1.89l-7.28-2.37c.18-.98.29-1.99.29-3.03,0-1.53-.23-3-.62-4.41l7.59-2.35c.8-.25,1.25-1.09.99-1.88h0c-.25-.78-1.11-1.22-1.9-.97l-7.74,2.4c-1.11-2.27-2.71-4.27-4.69-5.83l4.09-5.49c.5-.67.35-1.6-.33-2.09h0c-.68-.49-1.63-.35-2.12.32l-4.17,5.59c-2.17-1.16-4.63-1.85-7.24-1.98V1.5c0-.83-.68-1.5-1.52-1.5h0c-.84,0-1.52.67-1.52,1.5v6.93c-2.6.33-5.02,1.24-7.12,2.6l-4.03-5.52c-.49-.67-1.44-.82-2.12-.34h0c-.68.48-.84,1.42-.35,2.09l4.12,5.64c-1.83,1.72-3.27,3.83-4.18,6.19l-7.1-2.28c-.8-.26-1.65.17-1.91.95h0c-.26.79.17,1.63.97,1.89l7.22,2.32c-.18.98-.29,1.99-.29,3.03,0,1.53.23,3,.62,4.41l-7.55,2.37c-.8.25-1.24,1.09-.99,1.88h0c.26.79,1.11,1.22,1.91.97l7.69-2.41c1.11,2.27,2.71,4.27,4.69,5.83l-4.09,5.48c-.5.67-.35,1.6.33,2.09h0c.68.49,1.63.35,2.12-.32l4.16-5.59c2.18,1.17,4.66,1.86,7.29,1.98l-.03,6.81c0,.83.67,1.5,1.51,1.5h0c.84,0,1.52-.66,1.53-1.49l.03-6.94c2.59-.34,4.99-1.24,7.08-2.59l4.03,5.52c.49.67,1.44.82,2.12.34h0c.68-.48.84-1.42.35-2.09l-4.12-5.64c1.83-1.72,3.27-3.83,4.18-6.19ZM11.14,26.79c-1.16-8.97,6.54-16.56,15.65-15.42,6.21.78,11.22,5.72,12.01,11.83,1.16,8.97-6.54,16.55-15.65,15.41-6.21-.78-11.23-5.71-12.02-11.83Z'/%3e%3cline%20class='cls-1'%20x1='41.09'%20y1='20.71'%20x2='50'%20y2='17.9'/%3e%3c/svg%3e")
}

.weight-img {
    display: inline-block;
    width: 20px;
    height: 20px;
    background: transparent var(--apfel-icon) no-repeat center center;
    transform: translateY(3px)
}

.weight-img.filled {
    background-image: var(--apfel-icon-filled)
}