:root {
    --mainGradient-color1: #EB551D;
    --mainGradient-color2: #FDC700;
    --mainGradient: linear-gradient(to right, var(--mainGradient-color1), var(--mainGradient-color2));
    --mainGradient-light-color1: #eb541d62;
    --mainGradient-light-color2: #fdc60085;
    --mainGradient-light: linear-gradient(to right, var(--mainGradient-light-color1), var(--mainGradient-light-color2));

    --white: #fff;
    --softWhite: #F3F4F6;
    --lightGray: #A5A5A5;
    --gray: #606060;
    --darkGray: #343434;
    --black: #000000;
    --shadowGray: #0000004D;
    --shadowLightgray: #00000029;

    --secondaryHeaderLineShadow: #0000001A;
    --secondaryHeaderLineShadowHover: #00000054;

    --sliderBarBackground: #E8EBED;

    --fontSize: 1rem;
    --fontFamily: 'Roboto';
    --fontFamilyHighlight: 'Roboto Slab';


    --columnCount: 8;
    --columnWidth: calc(1418px / var(--columnCount));
}

h1 {
    font-family: Merriweather;
    font-size: 3.125em;
    font-weight: 400;
    margin-bottom: 1.2em;
}

#text_inhalt h2 {
    font-size: 1.75em;
    font-weight: 400;
    line-height: 1.175;
    text-align: left;
    margin: 0;
    margin-bottom: 1.25em;
}

h2[id],
h3[id],
h4[id] {
    scroll-margin-top: 90px;
}

.main {
    max-width: 1418px;
}

.block {
    margin-bottom: 6.25em;
}

.primaryButton,
.ghostToPrimaryhover,
.ghostButton,
.linkButton,
.secondaryButton {
    border: none;
    border-radius: 0.313em;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 0.488em;
    padding: 0 1.2em;
    height: 3.111em;
    cursor: pointer;
    -webkit-box-shadow: 0px 0px 0px 0px var(--softWhite);
    box-shadow: 0px 0px 0px 0px var(--softWhite);
    transition-duration: 200ms;
    font-size: var(--fontSize);
    -webkit-user-select: none;
    /* Safari */
    -ms-user-select: none;
    /* IE 10 and IE 11 */
    user-select: none;
    text-decoration: none;
    box-sizing: border-box;
    pointer-events: unset !important;
}

.primaryButton.small,
.ghostToPrimaryhover.small,
.ghostButton.small,
.linkButton.small,
.secondaryButton.small {
    padding: 0 0.7em;
    height: 2em;
}

.linkButton {
    padding: 0;
    color: #000;
}

.primaryButton.checked::after,
.ghostToPrimaryhover.checked:hover::after,
.ghostButton.checked::after,
.ghostToPrimaryhover.checked::after,
.linkButton.checked::after,
.secondaryButton.checked::after {
    content: "";
    width: 1.2em;
    height: 1.2em;
    background-size: 1.2em;
    background-image: url('/ajax/getIcon.php?src=/bilder/iconsBlack/checked.svg&primaryColor=fff');
}

.ghostButton.checked::after,
.ghostToPrimaryhover.checked::after,
.linkButton.checked::after {
    background-image: url('/ajax/getIcon.php?src=/bilder/iconsBlack/checked.svg&primaryColor=000');
}



.primaryButton img,
.primaryButton svg,
.ghostToPrimaryhover img,
.ghostToPrimaryhover svg,
.ghostButton img,
.ghostButton svg,
.linkButton img,
.linkButton svg,
.secondaryButton img,
.secondaryButton svg {
    width: 1.2em;
    flex-shrink: 0;
}

.primaryButton svg,
.ghostToPrimaryhover:hover svg {
    --svgColor: #fff;
}

.linkButton svg,
.ghostButton svg {
    --svgColor: #000;
}

.ghostButton.ghostButton.highlight svg {
    --svgColor: rgba(230, 45, 0, 1);
}

.primaryButton,
.ghostToPrimaryhover:hover {
    border: none;
    background: var(--mainGradient);
    color: #fff;
}

.primaryButton,
.ghostToPrimaryhover:hover svg {
    --svgColor: var(--white);
}

.primaryButton:hover,
.ghostToPrimaryhover:hover {
    -webkit-box-shadow: 0px 0px 6px 0px rgb(0 0 0 / 50%);
    box-shadow: 0px 0px 6px 0px rgb(0 0 0 / 50%);
}

.primaryButton:disabled {
    background: var(--mainGradient-light);
    -webkit-box-shadow: 0px 0px 0px 0px var(--softWhite);
    box-shadow: 0px 0px 0px 0px var(--softWhite);
}

.ghostButton,
.ghostToPrimaryhover {
    background-color: #0000;
    color: #000;
    border: solid 1px #000;
    box-sizing: border-box;
    transition: border-color 200ms ease;
    transition: background-color 200ms ease;
}

.ghostButton svg,
.ghostToPrimaryhover svg {
    transition-duration: 200ms;
}

.ghostButton.inactive,
.ghostToPrimaryhover.inactive {
    border-color: var(--lightGray);
}

.ghostButton.inactive svg,
.ghostToPrimaryhover.inactive svg {
    --svgColor: var(--lightGray);
}

.ghostButton.active svg {
    --svgColor: var(--primaryColor);
}

.ghostButton:hover {
    -webkit-box-shadow: 0px 0px 12px 0px var(--shadowGray);
    box-shadow: 0px 0px 12px 0px var(--shadowGray);
}

.ghostButton.highlight {
    border: solid 1px rgba(230, 45, 0, 1);
    color: rgba(230, 45, 0, 1);
}

.ghostButton.highlight:hover {

    -webkit-box-shadow: 0px 0px 12px 0px rgba(230, 46, 0, 0.218);
    box-shadow: 0px 0px 12px 0px rgba(230, 46, 0, 0.218);
}

.ghostButton:disabled {
    border-color: var(--lightGray);
    color: var(--lightGray);
}

.ghostButton.highlight:disabled {
    border-color: rgba(230, 46, 0, 0.537);
    color: rgba(230, 46, 0, 0.537);
}

.linkButton {
    background-color: #0000;
}

.linkButton:hover {
    text-decoration: underline;
}

.linkButton:disabled {
    color: var(--lightGray);
}

/* am ende der buttons platziert damit die shadow werte der hovereffekte Überschrieben werden */
.primaryButton:disabled,
.ghostButton:disabled,
.linkButton:disabled,
.secondaryButton:disabled {
    -webkit-box-shadow: 0px 0px 0px 0px var(--softWhite);
    box-shadow: 0px 0px 0px 0px var(--softWhite);
    cursor: auto;
    text-decoration: none;
}

@media (max-width: 500px) {

    .primaryButton,
    .ghostButton,
    .linkButton,
    .secondaryButton {
        gap: 0.8em;
    }
}

.bannerZweispalitg {
    display: grid;
    align-items: center;
    column-gap: 2.938em;
}

.bannerZweispalitg {
    grid-template-columns: 2fr 1fr;
}

.bannerZweispalitg:not(:has(> .banner:first-child)) {
    grid-template-columns: 1fr 2fr;
}


.bannerZweispalitg .banner {
    position: relative;
    max-width: 100%;
    border-radius: 1.25em;
    overflow: hidden;
    grid-row: 1/3;
    grid-column: 2;
}



@media (max-width: 1000px) {
    h1 {
        font-size: 2em;
    }

    .bannerZweispalitg {
        grid-template-columns: 100% !important;
    }

    .bannerZweispalitg {
        gap: 1em;
    }

    .bannerZweispalitg .banner {
        grid-row: 2;
        grid-column: 1;
    }

    .bannerZweispalitg h2 {
        margin-bottom: 0 !important;
    }
}

@media (max-width: 600px) {
    h1 {
        font-size: 1.5em;
    }
}



.bannerZweispalitg .banner img {
    max-width: 100%;
    display: block;
}

.flexImgTxtBlock {
    display: flex;
    gap: 1em;
}

.flexImgTxtBlock .text {
    flex-grow: 1;
}

.flexImgTxtBlock>*:not(.text) {
    max-height: 100%;
}

.flexImgTxtBlock .text h2+p,
.flexImgTxtBlock .text h3+p,
.flexImgTxtBlock .text h4+p,
.flexImgTxtBlock .text h5+p {
    margin-top: 0;
}

.flexImgTxtBlock .text h2,
.flexImgTxtBlock .text h3,
.flexImgTxtBlock .text h4,
.flexImgTxtBlock .text h5 {
    padding-bottom: 0.625em;
}

@media (max-width: 1000px) {

    .flexImgTxtBlock>.hideMobile {
        display: none;
    }
}



.table {
    display: grid;
    grid-template-columns: var(--columnWidth);
    min-width: var(--columnWidth) !important;
    grid-auto-rows: 4.375em;
    transition-duration: 200ms;
    transform: translateX(0);
    overflow: hidden;
}


.table img {
    width: 32px;
}

.table>* {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.table .nextToCompare {
    display: flex;
    align-items: center;
}

.table .nextToCompare span {
    font-size: 1.4em;
}

.table>*:nth-child(odd) {
    background-color: rgba(241, 241, 241, 1);
}

.table>*:not(.table:last-child>*) {
    border-right: solid 1px rgba(230, 45, 0, 1);
}

.table .headline {
    position: relative;
    overflow: hidden;
    border-color: #fff !important;
    color: #fff;
}

.table:last-child .headline {
    border-top-right-radius: 6px;
}

.table:last-child>*:last-child {
    border-bottom-right-radius: 6px;
}

.table .headline span {
    position: relative;
    z-index: 2;
    font-weight: 700;
    text-align: center;
}

.table .headline::before {
    position: absolute;
    content: "";
    width: calc(var(--columnWidth) * var(--columnCount));
    background: RGBA(230, 45, 0, 1);
    background: linear-gradient(45deg, rgba(230, 45, 0, 1) 0%, rgba(253, 199, 0, 1) 100%);
    transform: translateX(calc(-1 * calc(var(--pos) * var(--columnWidth))));
    height: 100%;
    align-self: start;
}

.table .cover {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (max-width: 500px) {
    .table {
        --columnWidth: 40vw;
    }
}


.bigCard {
    flex-grow: 1;
}

.card {
    display: flex;
    width: 28.688em;
    max-width: 100%;
    min-width: min(24.563em, 100%);
    flex-direction: column;
    border-radius: 20px;
    -webkit-box-shadow: 0px 0px 24px 0px rgba(0, 0, 0, 0.25);
    box-shadow: 0px 0px 24px 0px rgba(0, 0, 0, 0.25);
    padding: 1.25em 0;
    gap: 0.625em;
    position: relative;
    transform: scale(1);
    transition-duration: 200ms;
    overflow: hidden;
}

.card:has(.cover:first-child) {
    padding: 0;
}

.card:has(.cover:last-child) {
    padding-bottom: 0;
}

.card:hover,
.card.bannerCard:hover {
    transform: scale(1.025);
}

.card.bannerCard {
    width: 90%;
    min-width: 90%;
    transform: scale(1.007);
}

.card.square {
    width: 24.563em;
}

.card.wideCard {
    max-width: 100%;
    width: 59.063em;
}

.card.wideCard .cover>* {
    aspect-ratio: 945/400;
}

.card.square .cover>* {
    aspect-ratio: 1;
}

.card .headline,
.card .actionRow,
.card .description {
    padding: 0 1.25em;
}

.card .headline>span.title {
    font-size: 1.875em;
    font-family: Merriweather;
}

.card .headline.small>span.title {
    font-size: 1.313em;
}

.card .priceLabel {
    aspect-ratio: 1;
    border-radius: 50%;
    border-bottom-left-radius: 0;
    position: absolute;
    top: 2.563em;
    right: 1.25em;
    background: #E62D00;
    background: linear-gradient(45deg, rgba(230, 45, 0, 1) 0%, rgba(253, 199, 0, 1) 100%);
    width: 6.875em;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #fff;
    z-index: 10;
    max-width: 33%;
}

@media (max-width: 500px) {
    .card .priceLabel {
        max-width: 33%;
        font-size: 0.7em;
        top: unset;
        bottom: -6em;
    }

    .card .headline {
        position: relative;
    }
}



.einklappLabel {
    display: none;
}

@media (max-width: 700px) {
    .eingeklappt {
        height: 6em;
        overflow: hidden;
        position: relative;
    }

    .eingeklappt::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 3.5em;
        background: linear-gradient(0deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
    }

    .einklappbar {
        margin-bottom: 0.3em;
    }

    .einklappLabel {
        display: block;
        color: #E62D00;
        cursor: pointer;
        margin-bottom: 1em;
        font-weight: 500;
    }
}

.card .priceLabel span {
    font-size: 1.5em;
}

.card .priceLabel::before {
    content: 'Ab';
    font-size: 1.25em;
}

.card .cover {
    position: relative;
}

.card .cover>* {
    aspect-ratio: 459/230;
    object-fit: cover;
    width: 100%;
    display: block;
}

.card .cover:has(.videoLabel) {
    cursor: pointer;
}

.card .cover .videoLabel {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(1);
    width: 8.75em;
    max-width: 25%;
    aspect-ratio: 1;
    background: var(--mainGradient);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition-duration: 200ms;
}

.card .cover:hover .videoLabel {
    transform: translate(-50%, -50%) scale(1.2);
}

.card .cover .videoLabel::after {
    content: "";
    transform: translate(13%, 3%);
    width: 39%;
    background: url(/ajax/getIcon.php?src=/bilder/iconsBlack/play.svg&primaryColor=fff);
    aspect-ratio: 48 / 54;
    background-size: 100%;
}

.card.bannerCard .cover>* {
    aspect-ratio: 1219/400;
}

.card .actionRow {
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
    flex-wrap: wrap;
}

.card>*:last-child {
    flex-grow: 1;
    align-items: end;
}

.stoffBanner .onTop {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 2em;
    height: 80%;
}

.inhaltsverzeichniss {
    align-self: start;
}

.inhaltsverzeichniss ol {
    padding-left: 1em;
    margin: 0;
    font-weight: 400;
}

.inhaltsverzeichniss>ol>li {
    position: relative;
    padding-left: 1.4em;
}

.inhaltsverzeichniss ol {
    counter-reset: item;
    padding-left: 0;
    margin-left: 0;
}

.inhaltsverzeichniss li {
    display: block;
    margin-top: 0.625em;
}

.inhaltsverzeichniss li:before {
    content: counters(item, ".");
    counter-increment: item;
    font-weight: 400;
    margin-right: 0.5em;
    position: absolute;
    left: 0em;
}

.inhaltsverzeichniss ol ol li {
    padding-left: 0.7em;
}


.card .description>p:nth-child(1) {
    margin-top: 0;
}

.card .description>p:last-child {
    margin-bottom: 0;
}


.content {
    display: flex;
}

.content .wrapper {
    gap: 0 !important;
}

.content {
    border-radius: 6px;
    overflow: hidden;
}