/* --- Variablen --- */

:root {
    --schwarz1: rgba(0, 0, 0, 1.0);
    --schwarz0: rgba(0, 0, 0, 0.0);
    --schwarz02: rgba(0, 0, 0, 0.2);
    --schwarz04: rgba(0, 0, 0, 0.4);
    --schwarz07: rgba(0, 0, 0, 0.7);

    --weiss1: rgba(255, 255, 255, 1.0);
    --beige1: rgba(253, 251, 252, 1.0);
    --gruen1: rgba(39, 135, 0, 1.0);
    --dunkelrot1: rgba(116, 11, 9, 1.0);
    
    --orange1: rgba(175, 121, 75, 1.0);
    --orange03: rgba(175, 121, 75, 0.3);
    --orange06: rgba(175, 121, 75, 0.6);


    --zeit01: .1s;
    --zeit03: .3s;

    --maxwidth: 1520px;

    --fontregular: 'Nunito Sans', sans-serif;
    --fontbold: 'Nunito Sans Bold', sans-serif;
}

/* --- Reset --- */

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins,
kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot,
thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}

body {
	line-height: 1;
}

ol, ul {
	list-style: none;
}

blockquote, q {
	quotes: none;
}

blockquote::before, blockquote::after,
q::before, q::after {
	content: '';
	content: none;
}

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

/* --- Fonts --- */

@font-face {
    font-family: 'Nunito Sans';
    src: url('../fonts/NunitoSans.woff2') format('woff2'),
        url('../fonts/NunitoSans.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Nunito Sans Bold';
    src: url('../fonts/NunitoSansBold.woff2') format('woff2'),
        url('../fonts/NunitoSansBold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

/* --- Font-Sizes --- */

body {
    font-size: 16px;    
}

.news-item .item-datum {
    font-size: 18px;
}

footer .info p,
footer nav a {
    font-size: 18px;
}

.news-item,
.newsbeitrag-datum,
.merkliste-titel,
.text,
/* .artikelliste-artikel .info-bezeichnung,
.kategorieliste-kategorie .kategorie-info h6, */
.artikelinfo-artikelname,
.artikelinfo-kurzbeschreibung,
.artikelansicht-artikelbeschreibung,
.artikelansicht-empfehlungen h3,
footer .info h6 {
    font-size: 20px;
}

.text h1,
.news-container h2,
.artikelinfo-artikelpreis {
    font-size: 20px;
}

@media screen and (min-width: 320px) {

    body {
        font-size: calc(16px + (20 - 16) * (100vw - 320px) / (1520 - 320));
    }

    .news-item .item-datum {
        font-size: calc(18px + (24 - 18) * (100vw - 320px) / (1520 - 320));
    }

    footer .info p,
    footer nav a {
        font-size: calc(18px + (26 - 18) * (100vw - 320px) / (1520 - 320));
    }

    .news-item,
    .newsbeitrag-datum,
    .merkliste-titel,
    .text,
    /* .artikelliste-artikel .info-bezeichnung,
    .kategorieliste-kategorie .kategorie-info h6, */
    .artikelinfo-artikelname,
    .artikelinfo-kurzbeschreibung,
    .artikelansicht-artikelbeschreibung,
    .artikelansicht-empfehlungen h3,
    footer .info h6 {
        font-size: calc(20px + (30 - 20) * (100vw - 320px) / (1520 - 320));
    }

    .text h1,
    .news-container h2,
    .artikelinfo-artikelpreis {
        font-size: calc(20px + (40 - 20) * (100vw - 320px) / (1520 - 320));
    }

}

@media screen and (min-width: 1520px) {

    body {
        font-size: 20px;
    }

    .news-item .item-datum {
        font-size: 24px;
    }

    footer .info p,
    footer nav a {
        font-size: 26px;
    }

    .news-item,
    .newsbeitrag-datum,
    .merkliste-titel,
    .text,
    /* .artikelliste-artikel .info-bezeichnung,
    .kategorieliste-kategorie .kategorie-info h6, */
    .artikelinfo-artikelname,
    .artikelinfo-kurzbeschreibung,
    .artikelansicht-artikelbeschreibung,
    .artikelansicht-empfehlungen h3,
    footer .info h6 {
        font-size: 30px;
    }

    .text h1,
    .news-container h2,
    .artikelinfo-artikelpreis {
        font-size: 40px;
    }

}


/* --- Global --- */

html {
    min-height: 100%;
	overflow-y: scroll;
    scroll-behavior: smooth;
	width: 100%;
}

.has-overlay-opened {
    position: fixed;
}

body {
    background-color: var(--weiss1);
    box-sizing: border-box;
    font-family: var(--fontregular);
    min-height: 100vh;
    overflow-x: hidden;
    position: relative;
    width: 100%;

	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.is-loading body {
    opacity: 0;
    transition: opacity 2s;
}

.overlay {
    background-color: var(--schwarz07);
    height: 100%;
    left: 0;
    position: fixed;
    top: 0;
    transition: visibility var(--zeit03);
    width: 100%;
    visibility: hidden;
    z-index: 9999;
}

.has-overlay-opened .overlay {
    visibility: visible;
}

strong {
    font-family: var(--fontbold);
}

i {
    font-style: italic;
}

/* --- Header --- */

header {
    background-color: var(--weiss1);
    box-sizing: border-box;
    height: 200px;
    padding: 0 20px;
    position: fixed;
    top: 0;
    transition: height var(--zeit03);
    width: 100%;
    z-index: 100;
}

.is-scrolled header {
    height: 100px;
}

.header-content {
    height: 100%;
    margin: 0 auto;
    max-width: var(--maxwidth);
    position: relative;
    width: 100%;
}

/* Logo */

.logo {    
    background-repeat: no-repeat;
    background-size: contain;    
    left: 20px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    transition: all var(--zeit03);
}

.logo::after {
    content: '';
    display: block;
    padding-top: 100%;
    width: 100%;
}

.logo-big {
    background-image: url(../img/logo.png);
    display: block;
    /* top: 35px; */
    width: 130px;
}

.logo-small {
    background-image: url(../img/logo-klein.png);
    display: none;
    /* top: 17px; */
    width: 66px;
}

.is-scrolled .logo-big {
    display: none;
}

.is-scrolled .logo-small {
    display: block;
}

/* Navigation */

header nav {
    left: 50%;
    max-width: 650px;
    position: absolute;
    text-transform: uppercase;
    top: 40px;
    transform: translateX(-50%);
    width: 50%;
}

header .level1-menu {
    display: flex;
    justify-content: space-between;
    width: 100%;
}

header .level1-item {
    border-bottom: 30px solid transparent;
    position: relative;
}

header nav a,
header nav span {
    color: var(--schwarz1);
    cursor: pointer;
    text-decoration-color: var(--weiss1);
    text-decoration-thickness: 0.09em;
    text-underline-offset: 2.5px;
    transition: text-decoration-color var(--zeit03);
    white-space: nowrap;
}

header .level2-menu {
    background-color: var(--weiss1);
    box-shadow: 0 0 4px var(--schwarz04);
    box-sizing: border-box;
    display: none;
    left: -20px;
    line-height: 150%;
    padding: 10px 20px;
    position: absolute;
    top: 50px;
}

header .level2-menu::before {
    border: 15px solid var(--schwarz1);
    border-color: transparent transparent var(--weiss1) var(--weiss1);
    box-shadow: -2px 2px 2px var(--schwarz02);
    box-sizing: border-box;
    content: "";
    height: 0;
    left: 100px;
    position: absolute;
    top: 0;
    transform: rotate(135deg);
    transform-origin: -1px 0;
    width: 0;
}

header .level1-item:hover > a,
header .level2-item:hover > a {
    text-decoration-color: var(--schwarz1);
}

header .level1-item:hover .level2-menu {
    display: block;
}

.button-menu {
    cursor: pointer;
    display: none;
    height: 24px;
    left: 0;
    line-height: 26px;
    padding: 0 0 0 45px;
    position: absolute;
    text-transform: uppercase;
    top: 50%;
    transform: translateY(-50%);
    transition: top .2s;
    width: 40px;
    -webkit-tap-highlight-color: var(--schwarz0);
}

.button-menu span {
    background: var(--schwarz1);
    bottom: 0;
    height: 3px;
    left: 0;
    margin: auto;
    position: absolute;
    top: 0;
    width: 36px;
}

.button-menu span:before,
.button-menu span:after {
    background: var(--schwarz1);
    content: '';
    display: block;
    height: inherit;
    position: absolute;
    transition: transform .2s;
    width: inherit;
}

.button-menu span:before {
    top: -8px;
}

.button-menu span:after {
    bottom: -8px;
}

/* Buttons für Merkliste + Suche */

.merkliste-suche {
    position: absolute;
    right: 3%;
    top: 40px;
}

.merkliste-suche span {
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 110%;
    box-sizing: border-box;
    cursor: pointer;
    display: inline-block;
    height: 30px;
    position: relative;
    transition: transform var(--zeit03);
    width: 30px;
}

.btn-merkliste-oeffnen {
    background-image: url(../img/icon-merkliste.svg);
    margin: 0 10px 0 0;
}
  
.has-merkliste .btn-merkliste-oeffnen {
    filter: brightness(0) saturate(100%) invert(34%) sepia(28%) saturate(6740%) hue-rotate(75deg) brightness(95%) contrast(101%);
}
  
.btn-merkliste-oeffnen:hover,
.btn-suche-oeffnen:hover {
    transform: scale(1.2);
}

.btn-suche-oeffnen {
    background-image: url(../img/icon-suche.svg);
}

/* Suche */
  
.box-suche {
    display: none;
    left: 50%;
    max-width: 500px;
    position: absolute;
    top: 50%;
    transform: translate3d(-50%, -50%, 0);
    width: 100%;
}

.box-suche.aktiv {
    display: block;
}

.box-suche form {
    display: flex;
}

.box-suche input {
    border: 0;
    box-sizing: border-box;
    line-height: 40px;
    padding: 0 10px;
    width: calc(100% - 100px);
}

.btn-suchen,
.btn-suche-schliessen {
    background: transparent;
    box-sizing: border-box;
    cursor: pointer;
    display: block;
    position: relative;
}

.btn-suchen {
    border: 4px solid var(--weiss1);
    border-radius: 100%;
    height: 20px;
    left: 10px;
    top: 6px;
    width: 20px;
}

.btn-suchen::after {
    background-color: var(--weiss1);
    border-radius: 3px;
    box-sizing: border-box;
    content: "";
    display: block;
    height: 14px;
    left: 14px;
    position: absolute;
    top: 10px;
    transform: rotate(-45deg);
    width: 4px;
}

.btn-suche-schliessen {
    border: 0;
    height: 40px;
    left: 20px;
    width: 40px;
}

.btn-suche-schliessen::before,
.btn-suche-schliessen::after {
    background-color: var(--weiss1);
    content: "";
    height: 4px;
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
    width: 70%;
}

.btn-suche-schliessen::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

/* Merkliste */

.box-merkliste,
.box-anfrage {
    background-color: var(--weiss1);
    display: flex;
    flex-direction: column;
    height: 100%;
    max-width: 500px;
    position: fixed;
    right: -100%;
    top: 0;
    transition: right var(--zeit03);
    width: 80%;
}

.box-merkliste.aktiv,
.box-anfrage.aktiv {
    right: 0;
}

.merkliste-top,
.anfrage-top {
    align-items: center;
    display: flex;
    height: 60px;
    line-height: 60px;
    flex-wrap: nowrap;
    justify-content: space-between;
    padding-left: 20px;
}

.btn-merkliste-schliessen {
    background: transparent;
    border: 0;
    box-sizing: border-box;
    cursor: pointer;
    display: block;
    height: 40px;
    position: relative;
    right: 10px;
    width: 40px;
}

.btn-merkliste-schliessen::before,
.btn-merkliste-schliessen::after {
    background-color: var(--schwarz1);
    content: "";
    height: 4px;
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
    width: 70%;
}

.btn-merkliste-schliessen::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

.merkliste-leer {
    box-sizing: border-box;
    padding: 0 20px;
    width: 100%;
}

.merkliste-inhalt,
.anfrage-inhalt {
    box-sizing: border-box;
    height: 100vh;
    padding: 0 20px;
    width: 100%;
}

.merkliste-item {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
}

.anfrage-inhalt input {
    border: 1px solid var(--schwarz1);
    box-sizing: border-box;
    font-family: var(--fontregular);
    height: 40px;
    line-height: 40px;
    margin-top: 20px;
    padding: 0 10px;
    width: 100%;
}

.merkliste-artikelbild {
    flex: 0 0 24%;
    font-size: 0;
    line-height: 0;
}

.merkliste-artikelbild img {
    height: auto;
    width: 100%;
}

.merkliste-artikelinfo {
    flex: 0 0 75%;
}

.merkliste-artikelinfo-name {
    line-height: 140%;
}

.merkliste-artikelinfo-anzahl {
    display: flex;
    flex-wrap: nowrap;
    font-size: 18px;
    line-height: 140%;
}

.merkliste-artikelinfo .anzahl-aendern-loeschen {
    margin-left: 10px;
}

.merkliste-artikelinfo .btn-anzahl,
.merkliste-artikelinfo .btn-loeschen {
    background-color: var(--orange1);
    border-radius: 100%;
    color: var(--weiss1);
    cursor: pointer;
    display: inline-block;
    font-family: var(--fontbold);
    line-height: 20px;
    margin: 0 4px;
    text-align: center;
    user-select: none;
    width: 20px;
}

.merkliste-artikelinfo-preis {
    font-size: 18px;
    line-height: 140%;
    margin-top: 20px;
}

.merkliste-artikelinfo-preis span {
    font-family: var(--fontbold);
}

.merkliste-bottom {
    display: none;
    padding: 20px;
}

.has-merkliste .merkliste-bottom {
    display: block;
}

.merkliste-hinweis,
.anfrage-hinweis {
    font-size: 16px;
    line-height: 140%;
}

.btn-merkliste-anfragen,
.btn-anfrage-absenden {
    background-color: var(--orange1);
    border: 0;
    color: var(--weiss1);
    cursor: pointer;
    line-height: 40px;
    margin-top: 20px;
    padding: 0 20px;
}

.btn-anfrage-zurueck {
    cursor: pointer;
}

/* --- Main --- */

main {
    box-sizing: border-box;
    min-height: calc(100vh - 350px);
    padding-bottom: 20px;
    padding-top: 200px;
    transition: padding var(--zeit03);
    width: 100%;
}

.is-scrolled main {
    padding-top: 100px;
}

@media screen and (max-width: 1560px) {

    main {
        padding-left: 20px;
        padding-right: 20px;
    }

}

@media screen and (max-width: 900px) {

    main {
        min-height: calc(100vh - 600px);
    }

}

/* Navigation für Slideshow, News & Empfehlungen */

.btn-prev,
.btn-next {
    background-color: var(--orange03);
    border-radius: 100%;
    cursor: pointer;
    display: block;
    height: 100px;
    position: absolute;
    transition: background-color var(--zeit03);
    width: 100px;
    z-index: 1;
}

.btn-prev:hover,
.btn-next:hover  {
    background-color: var(--orange06);  
}

.btn-prev {
    left: -50px;
}

.btn-next {
    right: -50px;
}

.btn-prev::before,
.btn-prev::after,
.btn-next::before,
.btn-next::after {
    background-color: var(--weiss1);
    border-radius: 4px;
    content: '';
    display: block;
    height: 2px;
    position: absolute;
    transition: transform var(--zeit03);
    width: 21px;
}

.btn-prev::before,
.btn-next::before {
    top: 42px;
}

.btn-prev::after,
.btn-next::after {
    bottom: 42px;
}

.btn-prev::before,
.btn-prev::after {
    right: 18px;
}

.btn-next::before,
.btn-next::after {
    left: 18px;
}

.btn-prev::before,
.btn-next::after {
    transform: rotate(-45deg);
}

.btn-prev::after,
.btn-next::before {
    transform: rotate(45deg);
}

.slideshow-container .btn-prev,
.slideshow-container .btn-next,
.artikel-artikelbilder .btn-prev,
.artikel-artikelbilder .btn-next {
    top: 50%;
    transform: translateY(-50%); 
}

/* Slideshow */

.slideshow-container {
    box-sizing: border-box;
    margin: 0 auto;
    max-width: var(--maxwidth);
    overflow: hidden;
    position: relative;
    width: 100%;
}

.slideshow {
    position: relative;
    width: 100%;
    padding-top: 61.84%;
    overflow: hidden;
}

.slideshow-image {
    position: absolute;
    top: 0;
    height: 100%;
    left: 0;
    opacity: 0;
    transition: opacity 1s;
    width: 100%;
}

.slideshow-image.active {
    opacity: 1;
}

.slideshow img {
    width: 100%;
}

.slideshow-dots {
    bottom: 10px;
    left: 0;
    margin: auto;
    position: absolute;
    right: 0;
    text-align: center;
}

.dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: var(--orange03);
    margin: 0 5px;
    cursor: pointer;
}

.dot:hover,
.dot.active {
    background-color: var(--orange06);
}

/* --- Brotkruemel --- */

.brotkruemel {
    box-sizing: border-box;
    line-height: 140%;
    margin: 0 auto;
    padding: 20px 3% 40px 3%;
    max-width: var(--maxwidth);
    text-transform: uppercase;
    width: 100%;
}

.kategorieansicht .brotkruemel {
    padding: 20px 0 40px 0;
    max-width: none;
}

.brotkruemel li {
    display: inline-block;
}

.brotkruemel li::after {
    content: '\002F';
    display: inline-block;
    margin: 0 1px 0 2px;
}

.brotkruemel li:last-child::after {
    display: none;
}

.brotkruemel a {
    color: var(--schwarz1);
    text-decoration-color: var(--weiss1);
    text-decoration-thickness: 0.09em;
    text-underline-offset: 2.5px;
    transition: text-decoration-color var(--zeit03);
}

.brotkruemel a:hover {
    text-decoration-color: var(--schwarz1);
}

/* --- News & Empfehlungen --- */

@media screen and (max-width: 1560px) {

    .news,
    .artikelansicht-empfehlungen {
        padding-left: 20px;
        padding-right: 20px;
    }

}

.news-container,
.empfehlungen-container {
    background-color: var(--beige1);
    overflow: hidden;
    padding: 30px 0;
    position: relative;
    width: 100%;
}

.news-content,
.empfehlungen-content {
    box-sizing: border-box;
    margin: 0 auto;
    max-width: var(--maxwidth);
    overflow: hidden;
    position: relative;
    width: 100%;
}

.news-container h2 {
    line-height: 140%;
    margin-bottom: 30px;
} 

.news-wrapper,
.empfehlungen-wrapper {
    display: flex;
    flex-wrap: nowrap;
    transition: transform var(--zeit03) ease-in-out;
}

.news-item,
.empfehlungen-item {
    line-height: 120%;
    margin-bottom: 2%;
    margin-right: 2%;
}

.news-item {
    flex: 0 0 32%;
}

.empfehlungen-item {
    color: var(--schwarz1);
    cursor: pointer;
    flex: 0 0 23.5%;
    text-decoration: none;
}

@media screen and (max-width: 1200px) {

    .empfehlungen-item {
        flex: 0 0 32%;
    }

}

@media screen and (max-width: 900px) {

    .news-item,
    .empfehlungen-item {
        flex: 0 0 49%;
    }

}

@media screen and (max-width: 600px) {

    .news-item,
    .empfehlungen-item {
        flex: 0 0 100%;
        margin-right: 0;
    }

}

.news-item .item-bild,
.empfehlungen-item .item-bild {
    display: block;
    font-size: 0;
    line-height: 0;
}

.empfehlungen-item .item-bild {
    margin-bottom: 20px;
}

.news-item .item-bild img,
.empfehlungen-item .item-bild img {
    width: 100%;
}

.news-item .item-datum {
    line-height: 140%;
    margin: 30px 0;
}

.news-item .item-titel {
    line-height: 140%;
    text-transform: uppercase;
}

.news-item .item-text {
    line-height: 140%;
    margin: 30px 0;
}

.news-item .item-weiterlesen {
    color: var(--schwarz1);
    line-height: 140%;
    text-decoration-color: var(--weiss1);
    text-decoration-thickness: 0.09em;
    text-underline-offset: 2.5px;
    transition: text-decoration-color var(--zeit03);
}

.news-item .item-weiterlesen:hover {
    text-decoration-color: var(--schwarz1);
}

.empfehlungen-item .item-titel {
    line-height: 140%;
    text-transform: uppercase;
}

.empfehlungen-item .item-material,
.empfehlungen-item .item-preis {
    font-size: 16px;
    line-height: 140%;
    text-transform: uppercase;
}

/* --- Beitrag --- */

.text {
    box-sizing: border-box;
    margin: 0 auto;
    padding: 40px 3%;
    max-width: var(--maxwidth);
    width: 100%;
}

.newsbeitrag-datum {
    line-height: 140%;
    margin-bottom: 30px;
}

.text h1 {
    line-height: 140%;
    margin-bottom: 30px;
    text-transform: uppercase;
}

.text-image {
    box-sizing: border-box;
    font-size: 0;
    line-height: 0;
    margin-bottom: 30px;
    margin-left: auto;
    margin-right: auto;
    max-width: var(--maxwidth);
    width: 100%;
}

.text-image img {
    height: auto;
    max-width: 100%;
}

.text p {
    line-height: 140%;
    margin-bottom: 30px;
}

.text ul {
    line-height: 140%;
    list-style-type: square;
    margin-bottom: 30px;
    margin-left: 25px;
}

.text ol {
    line-height: 140%;
    list-style-type: decimal-leading-zero;
    margin-bottom: 30px;
    margin-left: 50px;
}


.text a {
    color: var(--schwarz1);
    text-decoration-color: var(--schwarz1);
    text-decoration-thickness: 0.09em;
    text-underline-offset: 2.5px;
    transition: text-decoration-color var(--zeit03);
}

.text a:hover {
    text-decoration-color: var(--weiss1);
}

.text p:last-child,
.text ul:last-child,
.text ol:last-child,
.text-image:first-child,
.text-image:last-child {
    margin-bottom: 0;
}

.text-angebot {
    background-color: var(--dunkelrot1);
    color: var(--weiss1);
    margin-bottom: 30px;
    padding: 40px 0;
    position: relative;
    z-index: 1;
}

.text-angebot::before,
.text-angebot::after {
    background: inherit;
    bottom: 0;
    content: '';
    display: block;
    position: absolute;
    top: 0;
    width: 100vw;
    z-index: -1;
}

.text-angebot::before {
    left: -100%;
}

.text-angebot::after {
    right: -100%;
}

/* --- Kategorieansicht --- */

.kategorieansicht {
    margin: 0 auto;
    max-width: var(--maxwidth);
}

.kategorieansicht-content {
    display: flex;
    justify-content: space-between;
}

.kategorieansicht-navigation {
    flex-shrink: 0;
    width: 265px;
}

.kategorieansicht-kategorieliste,
.kategorieansicht-rechts {
    box-sizing: border-box;
    padding-left: 40px;
    width: calc(100% - 265px);
}

.kategorieansicht-navigation li {
    margin-bottom: 20px;
}

.kategorieansicht-navigation a {
    color: var(--schwarz1);
    line-height: 140%;
    text-decoration-color: var(--weiss1);
    text-decoration-thickness: 0.09em;
    text-underline-offset: 2.5px;
    text-transform: uppercase;
    transition: text-decoration-color var(--zeit03);
}

.kategorieansicht-navigation a:hover {
    text-decoration-color: var(--schwarz1);
}

.kategorieansicht-info {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    margin-bottom: 40px;
}

.kategorieansicht-info .info-kategoriebild {    
    padding-right: 40px;
    width: 32%;
}

.kategorieansicht-info .info-kategoriebild img {
    height: auto;
    width: 100%;
}

.kategorieansicht-info .info-kategoriebeschreibung {
    align-self: flex-end;
    box-sizing: border-box;
    width: 68%;
}

.kategorieansicht-info .info-kategoriebeschreibung h1 {
    font-family: var(--fontbold);
    line-height: 140%;
    margin-bottom: 20px;
    text-transform: uppercase;
}

.kategorieansicht-info .info-kategoriebeschreibung p {
    line-height: 140%;
    margin-bottom: 20px;
}

.kategorieansicht-kategorieliste,
.kategorieansicht-artikelliste {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.kategorieansicht-kategorieliste::after,
.kategorieansicht-artikelliste::after {
    display: inline-block;
    content: '';
    width: 32%;
}

.kategorieliste-kategorie,
.artikelliste-artikel {
    background-color: var(--beige1);
    display: block;
    flex: 0 0 32%;
    margin-bottom: 2%;
    overflow: hidden;
    position: relative;
    text-decoration: none;
    z-index: 0;
}

.kategorieliste-kategorie::after,
.artikelliste-artikel::after {
    background-color: transparent;
    bottom: 0;
    content: '';
    display: block;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    transition: background-color var(--zeit03);
}

.kategorieliste-kategorie:hover::after,
.artikelliste-artikel:hover::after {
    background-color: var(--orange06);
}

.kategorieliste-kategorie .kategorie-bild,
.artikelliste-artikel .artikel-bild img {
    height: auto;
    width: 100%;
}

.kategorieliste-kategorie .kategorie-info,
.artikelliste-artikel .artikel-info {    
    padding: 20px;    
    text-decoration: none;
    z-index: 1;
}

.kategorieliste-kategorie .kategorie-info {
    bottom: 0;
    color: var(--weiss1);
    left: 0;
    position: absolute;
    right: 0;
    transition: visibility var(--zeit01);
    visibility: hidden;
}

.artikelliste-artikel .artikel-info {
    color: var(--schwarz1);
    position: relative;
    transition: color var(--zeit01);
} 

.kategorieliste-kategorie:hover .kategorie-info {
    visibility: visible;
}

.artikelliste-artikel:hover .artikel-info {
    color: var(--weiss1);
}

.kategorieliste-kategorie .kategorie-info h6  {
    line-height: 140%;
    margin-bottom: 20px;
}

.kategorieliste-kategorie .kategorie-info span {
    font-size: 16px;
    line-height: 140%;
}

.artikelliste-artikel .info-bezeichnung {
    line-height: 140%;
}

.artikelliste-artikel .info-material {
    font-size: 16px;
    line-height: 140%;
}

.artikelliste-artikel .info-preis {
    font-size: 18px;
    line-height: 140%;
}

/* --- Artikelansicht --- */

.artikel-artikelbilder {
    overflow: hidden;
    position: relative;
    width: 100%;
}

.artikelbilder-inner {
    aspect-ratio: 1 / 1;
}

.artikelbilder-bild {    
    position: absolute;
    top: 0;
    height: 100%;
    left: 0;
    opacity: 0;
    transition: opacity 1s;
    width: 100%;
}

.artikelbilder-bild.active {
    opacity: 1;
}

.artikelbilder-bild img {
    height: auto;
    width: 100%;
}

.artikelbilder-dots {
    bottom: 10px;
    left: 0;
    margin: auto;
    position: absolute;
    right: 0;
    text-align: center;
}

.artikel-artikelbilder .dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: var(--orange03);
    margin: 0 5px;
    cursor: pointer;
}

.artikel-artikelbilder .dot:hover,
.artikel-artikelbilder .dot.active {
    background-color: var(--orange06);
}

.artikelansicht-artikel {
    box-sizing: border-box;
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    margin: 0 auto;
    max-width: var(--maxwidth);
    padding-bottom: 40px;
    width: 100%;
}

.artikel-artikelbilder,
.artikel-artikelinfo {
    flex: 0 0 48%;
}

.artikelinfo-artikelname {
    line-height: 140%;
    margin-bottom: 20px;
    text-transform: uppercase;
}

.artikelinfo-kurzbeschreibung {
    line-height: 140%;
    margin-bottom: 30px;
}

.artikelinfo-artikelnummer {
    line-height: 140%;
}

.artikelinfo-technische-daten {
    line-height: 140%;
}

.artikelinfo-artikelpreis {
    line-height: 140%;
    margin-top: 100px
}

.artikelinfo-mengenauswahl {
    border: 1px solid var(--orange1);
    display: inline-block;
    margin-top: 30px;
}

.artikelinfo-mengenauswahl select {
    -webkit-appearance:none;
    -moz-appearance:none;
    -ms-appearance:none;
    appearance: none;
    background: none;
    border: 1px solid var(--orange1);
    box-shadow: none;
    box-sizing: border-box;
    color: var(--orange1);
    cursor: pointer;
    flex: 1;
    font-family: var(--fontregular);
    outline: 0;
    padding: 0 20px;
}
 
.artikelinfo-mengenauswahl select::-ms-expand {
    display: none;
}
 
.artikelinfo-mengenauswahl  {
    background: none;
    border-radius: 0;
    box-sizing: border-box;
    display: flex;
    height: 45px;
    line-height: 45px;
    position: relative;
    overflow: hidden;
    width: 130px;
}
 
.artikelinfo-mengenauswahl::after {
    background: none;
    color: var(--orange1);
    content: '\276e';
    cursor: pointer;
    position: absolute;
    right: 0;
    padding: 0 20px;
    pointer-events: none;
    top: 0;
    transform: rotate(-90deg);
}

.btn-artikelinfo-merkliste {
    background-color: var(--orange1);
    border: 0;
    color: var(--weiss1);
    cursor: pointer;
    font-family: var(--fontregular);
    height: 45px;
    margin-top: 45px;
    padding: 0 20px;
}

.cookies-disabled .artikelinfo-mengenauswahl,
.cookies-disabled .btn-artikelinfo-merkliste,
.cookies-enabled .btn-artikelinfo-merkliste.saved {
    background-color: var(--orange06);
    cursor: default;
    pointer-events: none;
}

.artikelansicht-navigation {   
    box-sizing: border-box; 
    line-height: 60px;
    margin: 0 auto;
    max-width: 760px;
    padding: 0 20px 70px 20px;
    text-align: center;
    width: 100%;
}

.artikelansicht-navigation ul {
    display: flex;
    justify-content: space-between;
}

.artikelansicht-navigation a {
    color: var(--schwarz1);
    text-decoration-color: var(--weiss1);
    text-decoration-thickness: 0.09em;
    text-underline-offset: 2.5px;
    transition: text-decoration-color var(--zeit03);
}

.artikelansicht-navigation a:hover {
    text-decoration-color: var(--schwarz1);
}

.artikelansicht-artikelbeschreibung {
    box-sizing: border-box;
    margin: 0 auto;
    max-width: var(--maxwidth);
    padding-bottom: 70px;
    width: 100%;
}

.artikelansicht-artikelbeschreibung h2 {
    line-height: 140%;
    margin-bottom: 20px;
    text-transform: uppercase;
}

.artikelansicht-artikelbeschreibung p {
    line-height: 140%;
    margin-bottom: 20px;
}

.artikelansicht-artikelbeschreibung p:last-child {
    margin: 0;
}

.artikelansicht-empfehlungen h3 {
    line-height: 140%;
    margin-bottom: 30px;
    text-align: center;
}

/* --- Footer --- */

footer {
    background-color: var(--schwarz1);
    box-sizing: border-box;
    color: var(--weiss1);
    flex-shrink: 0;
    height: 350px;
    padding: 40px 20px;
    width: 100%;
}

footer a {
    color: var(--weiss1);
    text-decoration-color: var(--schwarz1);
    text-decoration-thickness: 0.09em;
    text-underline-offset: 2.5px;
    transition: text-decoration-color var(--zeit03);
}

footer a:hover {
    text-decoration-color: var(--weiss1);
}

.footer-content {
    height: 100%;
    margin: 0 auto;
    max-width: var(--maxwidth);
    position: relative;
    width: 100%;
}

footer .info h6 {
    line-height: 140%;
    margin-bottom: 20px;
    text-transform: uppercase;
}

footer nav {
    bottom: 0;
    position: absolute;
    right: 0;
    text-align: right;
}

footer .info p {
    line-height: 140%;
    margin-bottom: 30px;
}

footer nav li {
    margin-bottom: 30px;
}

footer nav a {
    line-height: 140%;
    text-transform: uppercase;
}

footer .info p:last-child,
footer nav li:last-child {
    margin: 0;
}

/* --- Cookies --- */

.cookie-consent-banner {    
    background-color: var(--schwarz1);
    border: 2px solid var(--weiss1);
    bottom: 10px;
    box-sizing: border-box;
    color: var(--weiss1);
    left: 10px;
    line-height: 150%;
    max-width: 360px;
    padding: 20px;
    position: fixed;
    width: 80%;
    z-index: 9999;
}

.cookie-consent-banner button {
    border: 0;
    background-color: var(--weiss1);
    color: var(--schwarz1);
    cursor: pointer;
    font-size: 16px;
    height: 30px;
    margin-top: 20px;
    width: 150px;
}

.btn-cookies-erlauben {
    margin-right: 10px;
}

@media screen and (max-width: 950px) {

    header {
        height: 100px;
    }

    .button-menu {
        display: block;
    }

    header nav {
        display: none;
    }

    .logo {    
        left: 0;
        margin: auto;
        right: 0;
    }

    .logo::after {
        content: '';
        display: block;
        padding-top: 100%;
        width: 100%;
    }

    .logo-big {
        display: none;
    }

    .logo-small {
        display: block;
    }

    .merkliste-suche {
        top: 50%;
        transform: translateY(-50%);
    }

    main {
        min-height: auto;
        padding-left: 0;
        padding-right: 0;
        padding-top: 100px;
    }

    .kategorieansicht .brotkruemel,
    .kategorieansicht-content {
        padding-left: 3%;
        padding-right: 3%;
    }

    .kategorieansicht-navigation {
        display: none;
    }

    .kategorieansicht-kategorieliste,
    .kategorieansicht-rechts {
        padding-left: 0;
        width: 100%;
    }

    footer {
        height: auto;
    }

    footer nav {
        bottom: auto;
        margin-top: 100px;
        position: relative;
        right: auto;
        text-align: left;
    }

}

@media screen and (max-width: 600px) {

    .kategorieansicht-info {
        display: block;
    }

    .kategorieansicht-info .info-kategoriebild,
    .kategorieansicht-info .info-kategoriebeschreibung {
        width: 100%;
    }

    .kategorieansicht-info .info-kategoriebeschreibung {
        padding-left: 0;
        padding-top: 40px;
    }

    .kategorieliste-kategorie,
    .artikelliste-artikel {
        flex: 0 0 49%;
    }

    .artikelansicht-artikel {
        display: block;
        padding-left: 3%;
        padding-right: 3%;
    }

}

@media screen and (max-width: 400px) {

    .kategorieliste-kategorie,
    .artikelliste-artikel {
        flex: 0 0 100%;
    }

}