/* Automatisch erzeugt von tools/shop-header/build.py – nicht von Hand ändern. */

/* ==== Schriften ==== */
@font-face {
        font-family: "GT America";
        src: url("../fonts/GT America/GT-America-Standard-Regular.woff2") format("woff2");
        font-weight: 400;
        font-style: normal;
    }
@font-face {
        font-family: "GT America";
        src: url("../fonts/GT America/GT-America-Standard-Medium.woff2") format("woff2");
        font-weight: 500;
        font-style: normal;
    }
@font-face {
        font-family: "GT America";
        src: url("../fonts/GT America/GT-America-Standard-Bold.woff2") format("woff2");
        font-weight: 700;
        font-style: normal;
    }
@font-face {
        font-family: "GT America";
        src: url("../fonts/GT America/GT-America-Standard-Regular-Italic.woff2") format("woff2");
        font-weight: 400;
        font-style: italic;
    }
@font-face {
        font-family: "GT America";
        src: url("../fonts/GT America/GT-America-Standard-Bold-Italic.woff2") format("woff2");
        font-weight: 700;
        font-style: italic;
    }
@font-face {
        font-family: "Rhymes";
        src: url("../fonts/Rhymes/Rhymes Text Regular.woff2") format("woff2");
        font-weight: 400;
        font-style: normal;
    }
@font-face {
        font-family: "Rhymes";
        src: url("../fonts/Rhymes/Rhymes Text SemiBold.woff2") format("woff2");
        font-weight: 600;
        font-style: normal;
    }

/* ==== Grundlage (tools/shop-header/base.css) ==== */
/* Höhe der Kopfzeile wie auf der Website */
:root { --hh: 55px; }
@media (max-width: 1000px) { :root { --hh: calc(34px + env(safe-area-inset-top, 0px)); } }

/* Abschirmung gegen die Stile des Shop-Themes: in Kopfzeile, Menü und Footer gelten nur die Grundwerte des Browsers
   und die Regeln der Website (die folgen weiter unten und gewinnen) */
/* SVG-Inhalte ausgenommen: ihre Attribute (Pfade d, transform ...) zählen als Stilwerte und würden sonst mit zurückgesetzt */
:is(#grau-hd, #grau-ov, #grau-ft),
:is(#grau-hd, #grau-ov, #grau-ft) *:not(svg *),
:is(#grau-hd, #grau-ov, #grau-ft) *:not(svg *)::before,
:is(#grau-hd, #grau-ov, #grau-ft) *:not(svg *)::after { all: revert; }

/* Was auf der Website html/body vorgeben (Schrift, Farbe), gilt hier für die drei Bereiche */
:is(#grau-hd, #grau-ov, #grau-ft) {
    font-family: 'GT America', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: normal;
    letter-spacing: normal;
    word-spacing: normal;
    color: #000;
    text-transform: none;
    text-align: left;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}


/* ==== Kopfzeile und Menü der Website ==== */
/* ---- aus assets/css/index.css ---- */
:is(#grau-hd,#grau-ov) a {color: rgb(0, 0, 0); 
    text-decoration: none;}
:is(#grau-hd,#grau-ov) a:visited {color: black;}
@media (hover: hover) {
:is(#grau-hd,#grau-ov) a:hover,
:is(#grau-hd,#grau-ov) a:active {color: black;}
}
@media (prefers-reduced-motion: reduce) {
:is(#grau-hd,#grau-ov) *,
:is(#grau-hd,#grau-ov) *::before,
:is(#grau-hd,#grau-ov) *::after {animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;}
}
@media (max-width: 1000px) {
:is(#grau-hd,#grau-ov) .header {position: fixed; top: 0; left: 0; right: 0;}
html:has(.menu.open),
html:has(.search-results.open) {overflow: hidden;}
}

/* ---- aus assets/css/theme-bw.css ---- */
:is(#grau-hd,#grau-ov) img,
:is(#grau-hd,#grau-ov) video,
:is(#grau-hd,#grau-ov) canvas,
:is(#grau-hd,#grau-ov) picture,
:is(#grau-hd,#grau-ov) figure img,
:is(#grau-hd,#grau-ov) .spotlight-image-article,
:is(#grau-hd,#grau-ov) .article-image img,
:is(#grau-hd,#grau-ov) .magazine-image img,
:is(#grau-hd,#grau-ov) [style*="background-image"] {-webkit-filter: grayscale(1);
    filter: grayscale(1);}
:is(#grau-hd,#grau-ov) .logo img,
:is(#grau-hd,#grau-ov) .logo picture,
:is(#grau-hd,#grau-ov) .right-icons svg,
:is(#grau-hd,#grau-ov) header img {-webkit-filter: none; filter: none;}

/* ---- aus assets/css/parts/header.1.css ---- */
:is(#grau-hd,#grau-ov) .header {display: flex;
        justify-content: space-between;
        align-items: center;
        box-sizing: border-box;
        width: 100%;
        height: 7vh;
        background-color: rgb(255, 255, 255);
        z-index: 10;}
:is(#grau-hd,#grau-ov) .right-icons,
:is(#grau-hd,#grau-ov) .left-icons,
:is(#grau-hd,#grau-ov) .logo {box-sizing: border-box;
        transition: 0.2s ease-in-out;}
:is(#grau-hd,#grau-ov) .right-icons,
:is(#grau-hd,#grau-ov) .left-icons {display: flex;
        height: 100%;
        align-items: center;
        width: 30vw;}
:is(#grau-hd,#grau-ov) .right-icons {position: relative;
            transition: 1s ease-in-out;}
:is(#grau-hd,#grau-ov) .menu-icon,
:is(#grau-hd,#grau-ov) .search-icon,
:is(#grau-hd,#grau-ov) .shop-icon,
:is(#grau-hd,#grau-ov) .cross-icon {width: auto;
        height: 100%; 
        display: flex;
        align-items: center; 
        z-index: 11;
        cursor: pointer;}
:is(#grau-hd,#grau-ov) .cross-icon {position: absolute;
        cursor: pointer;
        right: -30vw;
        transition: 0.2s ease-in-out;
        border-radius: 50%;}
:is(#grau-hd,#grau-ov) .cross-icon.open {right: 0px;}
:is(#grau-hd,#grau-ov) .right-icons-false {width: 0vw;
        background-color: rgb(255, 0, 0, 0);
        height: 100%;
        transition: 0.2s ease-in-out;}
:is(#grau-hd,#grau-ov) .right-icons-color {right: 0px;
        background-color: rgba(255, 255, 255, 1);
        position: absolute;
        width: 0vw;
        height: 100%;
        z-index: 10;
        transition: 0.2s ease-in-out;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;}
:is(#grau-hd,#grau-ov) .input-field {display: none;
        width: 60%;
        padding: 10px;
        margin: 0px 10px 0px 10px;
        border: 1px solid #ccc;
        border-radius: 5px;
        font-size: 24px;
        outline: none;
        box-sizing: border-box;
        font-family: "GT America";
        font-style: normal;}
:is(#grau-hd,#grau-ov) .right-icons-color.open .input-field {display: block;}
:is(#grau-hd,#grau-ov) .menu-icon {position: relative;
        width: 35px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        height: 30px;
        z-index: 10;
        transition: 0.3s ease;}
:is(#grau-hd,#grau-ov) .menu-icon span {background-color: black;
            height: 5px;
            width: 100%;
            border-radius: 3px;
            transition: 0.3s ease;
            z-index: 10;
            transform-origin: center;}
@media (min-width:1000px) {
:is(#grau-hd,#grau-ov) .menu-icon span {border-radius: 100%; height: 4px; width: 38px;}
}
@media (max-width:1000px) {
:is(#grau-hd,#grau-ov) .menu-icon span {border-radius: 100%;}
}
:is(#grau-hd,#grau-ov) .menu-icon.open {transform: translate(-10px);}
:is(#grau-hd,#grau-ov) .menu-icon.open span:nth-child(1) {transform: rotate(45deg) translate(13px, 5px);
            width: 40px;}
:is(#grau-hd,#grau-ov) .menu-icon.open span:nth-child(2) {opacity: 0; 
            transform: translate(10px);}
:is(#grau-hd,#grau-ov) .menu-icon.open span:nth-child(3) {transform: rotate(-45deg) translate(13px, -5px);
            width: 40px;}
:is(#grau-hd,#grau-ov) .logo {position: relative;
        text-decoration: none;
        flex: 1;
        text-align: center;
        color: black;
        font-weight: 700;
        height: 100%; 
        display: flex; 
        justify-content: center; 
        align-items: center;}
@media (hover: hover) {
:is(#grau-hd,#grau-ov) .logo img:hover {opacity: 80%;}
}
:is(#grau-hd,#grau-ov) .logo picture,
:is(#grau-hd,#grau-ov) .logo img {display: flex; 
            justify-content: center; 
            align-items: center; 
            height: 90%; 
            width: 90%; 
            padding: 5px;
            box-sizing: border-box;
            object-fit: contain; 
            object-position: center;}
:is(#grau-hd,#grau-ov) .search-icon svg,
:is(#grau-hd,#grau-ov) .shop-icon svg,
:is(#grau-hd,#grau-ov) .cross-icon svg {width: auto;
        height: 100%; 
        display: flex; 
        justify-content: center; 
        align-items: center; 
        box-sizing: border-box;}
:is(#grau-hd,#grau-ov) .search-results {position: fixed;
            top: 7vh;
            right: -30vw; 
            width: 30vw;
            height: calc(170% - 7vh); 
            overflow-y: auto; 
            background-color: rgba(255, 255, 255, 1);
            color: black;
            z-index: 11;
            transition: right 0.2s ease-in-out;
            display: flex;
            flex-direction: column; 
            justify-content: flex-start;
            align-items: flex-start;}
@media (min-width:1000px) {
:is(#grau-hd,#grau-ov) .shop-icon,
:is(#grau-hd,#grau-ov) .search-icon,
:is(#grau-hd,#grau-ov) .cross-icon {position: absolute;
                padding: 10px 20px 10px 0px;
                box-sizing: border-box;
                transition: 0.2s ease-in-out;
                opacity: 1;}
:is(#grau-hd,#grau-ov) .search-icon {right: 0px; visibility: visible;}
:is(#grau-hd,#grau-ov) .search-icon.open {transform: translateX(calc(-30vw + 100%));}
:is(#grau-hd,#grau-ov) .shop-icon {right: 0px; visibility: visible;}
:is(#grau-hd,#grau-ov) .shop-icon.open {right: calc(30vw - 90px);}
:is(#grau-hd,#grau-ov) .search-icon.hidden,
:is(#grau-hd,#grau-ov) .shop-icon.hidden {visibility: hidden; opacity: 0; transition: 0.2s ease-in-out;}
:is(#grau-hd,#grau-ov) .right-icons,
:is(#grau-hd,#grau-ov) .left-icons,
:is(#grau-hd,#grau-ov) .logo {padding: 10px 30px;}
:is(#grau-hd,#grau-ov) .right-icons,
:is(#grau-hd,#grau-ov) .left-icons {gap: 30px;}
:is(#grau-hd,#grau-ov) .logo picture,
:is(#grau-hd,#grau-ov) .logo img {padding: 2px;}
:is(#grau-hd,#grau-ov) .search-icon svg,
:is(#grau-hd,#grau-ov) .shop-icon svg,
:is(#grau-hd,#grau-ov) .cross-icon svg {padding: 3px;}
:is(#grau-hd,#grau-ov) .search-results {top: 7vh;
                right: -30vw;
                width: 30vw;
                height: calc(170% - 7vh);
                font-size: 60px;
                overflow-y: auto;}
:is(#grau-hd,#grau-ov) .right-icons-color.open {width: 30vw;
                height: 2000px;}
:is(#grau-hd,#grau-ov) .right-icons-false.open,
:is(#grau-hd,#grau-ov) .left-icons.open,
:is(#grau-hd,#grau-ov) .logo.open {width: 23.333vw;}
:is(#grau-hd,#grau-ov) .search-results.open {right: 0;
                width: 30vw;
                height: 93%;
                overflow-y: auto;}
}
@media (max-width:1000px) {
:is(#grau-hd,#grau-ov) .header {padding: 10px 20px;
                height: var(--hh);}
:is(#grau-hd,#grau-ov) .right-icons,
:is(#grau-hd,#grau-ov) .left-icons {gap: 15px;}
:is(#grau-hd,#grau-ov) .search-icon svg,
:is(#grau-hd,#grau-ov) .shop-icon svg,
:is(#grau-hd,#grau-ov) .cross-icon svg {padding: 4px;}
:is(#grau-hd,#grau-ov) .logo picture,
:is(#grau-hd,#grau-ov) .logo img {padding: 10px;
                height: 100px; 
                width: 180px;}
:is(#grau-hd,#grau-ov) .menu-icon {width: 27px;
                height: 22px;
                padding-bottom: 5px;}
:is(#grau-hd,#grau-ov) .menu-icon span {height: 2.5px;
                width: 100%;}
:is(#grau-hd,#grau-ov) .menu-icon.open {transform: translate(-10px);}
:is(#grau-hd,#grau-ov) .menu-icon.open span:nth-child(1) {transform: rotate(45deg) translate(12.5px, 2px);
                width: 30px;}
:is(#grau-hd,#grau-ov) .menu-icon.open span:nth-child(2) {opacity: 0; 
                transform: translate(10px);}
:is(#grau-hd,#grau-ov) .menu-icon.open span:nth-child(3) {transform: rotate(-45deg) translate(12.5px, -2px);
                width: 30px;}
:is(#grau-hd,#grau-ov) .shop-icon,
:is(#grau-hd,#grau-ov) .search-icon,
:is(#grau-hd,#grau-ov) .cross-icon {position: absolute;
                padding: 0px 0px 0px 0px;
                box-sizing: border-box;
                transition: 0.2s ease-in-out;
                opacity: 1;}
:is(#grau-hd,#grau-ov) .search-icon {right: 0px; visibility: visible;}
:is(#grau-hd,#grau-ov) .search-icon.open {right: calc(100vw - 70px);}
:is(#grau-hd,#grau-ov) .shop-icon {right: 0vw; visibility: visible;}
:is(#grau-hd,#grau-ov) .shop-icon.open {right: calc(100vw - 70px);}
:is(#grau-hd,#grau-ov) .search-icon.hidden,
:is(#grau-hd,#grau-ov) .shop-icon.hidden {visibility: hidden; opacity: 0; transition: 0.2s ease-in-out;}
:is(#grau-hd,#grau-ov) .search-results {top: var(--hh);
                right: -100vw;
                width: 100vw;
                height: calc(100% - var(--hh));
                font-size: 40px;}
:is(#grau-hd,#grau-ov) .right-icons-color.open {width: 100vw;
                height: 2000px;}
:is(#grau-hd,#grau-ov) .right-icons-false.open,
:is(#grau-hd,#grau-ov) .left-icons.open,
:is(#grau-hd,#grau-ov) .logo.open {width: 0vw;
                opacity: 0;}
:is(#grau-hd,#grau-ov) .search-results.open {right: 0;
                width: 100vw;
                height: calc(100% - var(--hh));}
}
:is(#grau-hd,#grau-ov) .shop-active,
:is(#grau-hd,#grau-ov) .search-active {height: 100%;
        transition: 0.2s ease-in-out;}
:is(#grau-hd,#grau-ov) .highlight {color: red; 
        font-weight: bold;}
:is(#grau-hd,#grau-ov) #articlesList,
:is(#grau-hd,#grau-ov) #productsList {width: 100%;}
:is(#grau-hd,#grau-ov) ul {list-style: none; 
        padding: 0;        
        margin: 0;}
:is(#grau-hd,#grau-ov) .search-item,
:is(#grau-hd,#grau-ov) .search-item a {border: 1px solid black;
    box-sizing: border-box;
    width: 100%;
    height: 160px;
    display: flex;
    justify-content: space-between; 
    align-items: center;}
:is(#grau-hd,#grau-ov) .search-item a {padding: 20px;
        border: 0px;}
:is(#grau-hd,#grau-ov) .item-written {width: 60%;
        height: 100%;
        text-align: left;
        padding-right: 20px;
        font-size: clamp(17px, 1.3vw, 20px);
        display: flex;
        flex-direction: column;
        justify-content: flex-start; 
        position: relative;}
:is(#grau-hd,#grau-ov) .title {font-size: clamp(20px, 1.7vw, 25px);
        margin-bottom: 5px;}
:is(#grau-hd,#grau-ov) .date,
:is(#grau-hd,#grau-ov) .contributors {margin-bottom: 5px;}
:is(#grau-hd,#grau-ov) .item-type {color: #888; 
        font-style: italic;
        text-align: right;
        position: absolute; 
        bottom: -4px;
        right: 15px;}
:is(#grau-hd,#grau-ov) .searchbar-image-container {width: 40%;
    height: 100%;
    position: relative; 
    display: flex;
    justify-content: center;
    align-items: center; 
    overflow: hidden;}
:is(#grau-hd,#grau-ov) .searchbar-product-image,
:is(#grau-hd,#grau-ov) .searchbar-article-image {width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;}
:is(#grau-hd,#grau-ov) .searchbar-product-image img,
:is(#grau-hd,#grau-ov) .searchbar-article-image img,
:is(#grau-hd,#grau-ov) .searchbar-product-image picture {max-width: 100%; 
    max-height: 100%; 
    width: 100%;
    height: 100%;
    object-fit: contain;}
@media (max-width:1000px) {
:is(#grau-hd,#grau-ov) .search-item,
:is(#grau-hd,#grau-ov) .search-item a {border: 0.5px solid black;
            height: 120px;}
:is(#grau-hd,#grau-ov) .search-item a {padding: 15px;}
:is(#grau-hd,#grau-ov) .item-written {padding-right: 10px;
            font-size: clamp(16px, 3vw, 20px);}
:is(#grau-hd,#grau-ov) .title {font-size: clamp(18px, 2.4vw, 24px);
            margin-bottom: 5px;}
:is(#grau-hd,#grau-ov) .date,
:is(#grau-hd,#grau-ov) .contributors {margin-bottom: 3px;}
:is(#grau-hd,#grau-ov) .item-type {color: #888; 
            font-style: italic;
            text-align: right;
            position: absolute; 
            bottom: -4px;
            right: 10px;}
}

/* ---- aus assets/css/parts/header.mobile.css ---- */
@media (max-width: 1000px) {
:is(#grau-hd,#grau-ov) .menu-icon {position: relative;}
:is(#grau-hd,#grau-ov) .menu-icon::after,
:is(#grau-hd,#grau-ov) .search-icon::after,
:is(#grau-hd,#grau-ov) .cross-icon::after {content: "";
        position: absolute;
        inset: -10px;}
:is(#grau-hd,#grau-ov) .item-subtitle a {position: relative;}
:is(#grau-hd,#grau-ov) .item-subtitle a::after {content: "";
        position: absolute;
        inset: -10px 0;}
:is(#grau-hd,#grau-ov) .header .logo picture,
:is(#grau-hd,#grau-ov) .header .logo img {padding: 0;
        width: min(320px, calc(100vw - 130px));
        height: 100px;
        max-width: none;}
}
:is(#grau-hd,#grau-ov) .input-field {caret-color: #000; accent-color: #000;}
:is(#grau-hd,#grau-ov) .input-field:focus {border-color: #000;}
@media (max-width: 1000px) {
:is(#grau-hd,#grau-ov) .search-icon,
:is(#grau-hd,#grau-ov) .cross-icon {transition: opacity .3s ease, transform .3s ease;}
:is(#grau-hd,#grau-ov) .search-icon.open {visibility: visible; opacity: 0; right: 0; transform: rotate(90deg) scale(.5); pointer-events: none;}
:is(#grau-hd,#grau-ov) .cross-icon {right: 0; opacity: 0; transform: rotate(-90deg) scale(.5); pointer-events: none;}
:is(#grau-hd,#grau-ov) .cross-icon.open {right: 0; opacity: 1; transform: none; pointer-events: auto;}
:is(#grau-hd,#grau-ov) .search-results {transition: right .3s ease; padding-top: 88px; opacity: 1 !important; background: #fff; z-index: 9;}
:is(#grau-hd,#grau-ov) .left-icons.open {width: 30vw; opacity: 1;}
:is(#grau-hd,#grau-ov) .logo.open {width: auto; opacity: 1;}
:is(#grau-hd,#grau-ov) .right-icons-color {position: fixed;
        top: var(--hh);
        right: -100vw;
        width: 100vw;
        height: 72px;
        box-sizing: border-box;
        padding: 0 16px;
        z-index: 12;
        flex-direction: row;
        transition: right .3s ease;}
:is(#grau-hd,#grau-ov) .right-icons-color.open {right: 0; width: 100vw; height: 72px;}
:is(#grau-hd,#grau-ov) .right-icons-color .input-field {width: 100%; margin: 0;}
:is(#grau-hd,#grau-ov) .search-results {box-sizing: border-box;}
:is(#grau-hd,#grau-ov) .search-item,
:is(#grau-hd,#grau-ov) .search-item a {border-left: 0; border-right: 0; border-top: 0; border-bottom: 1px solid #000;}
:is(#grau-hd,#grau-ov) .search-item a {border-bottom: 0;}
}
@media (max-width: 1000px) {
:is(#grau-hd,#grau-ov) .cross-icon svg {width: 23px; height: 23px; padding: 0; margin-bottom: 4px;}
}
@media (max-width: 1000px) {
:is(#grau-hd,#grau-ov) .menu:not(.open),
:is(#grau-hd,#grau-ov) .search-results:not(.open),
:is(#grau-hd,#grau-ov) .right-icons-color:not(.open) {visibility: hidden;
        transition: left .3s ease, right .3s ease, width .3s ease, visibility 0s linear .3s;}
:is(#grau-hd,#grau-ov) .menu.open,
:is(#grau-hd,#grau-ov) .search-results.open,
:is(#grau-hd,#grau-ov) .right-icons-color.open {visibility: visible;
        transition: left .3s ease, right .3s ease, width .3s ease, visibility 0s;}
}
:is(#grau-hd,#grau-ov) .cart-icon {display: none;}
@media (max-width: 1000px) {
:is(#grau-hd,#grau-ov) .header {display: grid;
        grid-template-columns: 1fr auto;
        grid-template-rows: 46px 46px;
        align-items: center;
        padding: env(safe-area-inset-top, 0px) 20px 8px;   
        height: var(--hh);
        box-sizing: border-box;}
:is(#grau-hd,#grau-ov) .header .logo {grid-column: 1 / -1; grid-row: 1; width: auto; height: 46px; padding: 0;}
:is(#grau-hd,#grau-ov) .header .logo picture,
:is(#grau-hd,#grau-ov) .header .logo img {height: 46px; width: min(360px, calc(100vw - 32px)); padding: 0;}
:is(#grau-hd,#grau-ov) .header .left-icons {grid-column: 1; grid-row: 2; width: auto; height: 46px;}
:is(#grau-hd,#grau-ov) .header .right-icons {grid-column: 2; grid-row: 2; width: 35px; height: 46px; position: relative;}
:is(#grau-hd,#grau-ov) .header .right-icons-false {display: none;}
:is(#grau-hd,#grau-ov) .header .search-icon,
:is(#grau-hd,#grau-ov) .header .cross-icon {top: 5.5px; height: 35px;}
:is(#grau-hd,#grau-ov) .cart-icon {display: flex; position: absolute; right: 47px; top: 5.5px; width: 35px; height: 35px; z-index: 11;}
:is(#grau-hd,#grau-ov) .cart-icon {align-items: center; justify-content: center;}
:is(#grau-hd,#grau-ov) .cart-icon svg {height: 27px; width: 23.6px; display: block; overflow: visible;}
:is(#grau-hd,#grau-ov) .cart-icon .cart-count {top: 0; right: -2px;}
:is(#grau-hd,#grau-ov) .header .menu-icon {margin-top: 0;}
}
@media (max-width: 1000px) {
:is(#grau-hd,#grau-ov) .header {top: 0; transition: top .18s ease;}
html.header-hidden :is(#grau-hd,#grau-ov) .header {top: calc(-1 * var(--hh));}
}
@media (max-width: 1000px) and (prefers-reduced-motion: reduce) {
:is(#grau-hd,#grau-ov) .header {transition: none;}
}
@media (max-width: 1000px) {
:is(#grau-hd,#grau-ov) .header .menu-icon {width: 27px; height: 22px; padding: 0; margin: 0; align-self: center; transform: none;}
:is(#grau-hd,#grau-ov) .header .menu-icon.open {transform: none;}
:is(#grau-hd,#grau-ov) .header .menu-icon span {width: 100%; height: 2.5px;}
:is(#grau-hd,#grau-ov) .header .menu-icon.open span:nth-child(1) {transform: translateY(9.75px) rotate(45deg) scaleX(1.35); width: 100%;}
:is(#grau-hd,#grau-ov) .header .menu-icon.open span:nth-child(2) {opacity: 0; transform: scaleX(0);}
:is(#grau-hd,#grau-ov) .header .menu-icon.open span:nth-child(3) {transform: translateY(-9.75px) rotate(-45deg) scaleX(1.35); width: 100%;}
:is(#grau-hd,#grau-ov) .header .cross-icon {display: none;}
:is(#grau-hd,#grau-ov) .header .search-icon.open {visibility: visible; opacity: 1; transform: none; pointer-events: auto; right: 0;}
:is(#grau-hd,#grau-ov) .header .right-icons {margin-right: -4px;}
:is(#grau-hd,#grau-ov) .search-icon .lm-ring,
:is(#grau-hd,#grau-ov) .search-icon .lm-handle {transform-origin: 0 0;
        transition: transform .42s cubic-bezier(.55, 0, .3, 1), opacity .1s linear .32s;}
:is(#grau-hd,#grau-ov) .search-icon .lm-x polygon {opacity: 0; transition: opacity .1s linear 0s;}
:is(#grau-hd,#grau-ov) .search-icon.open .lm-x polygon {opacity: 1; transition: opacity .1s linear .32s;}
:is(#grau-hd,#grau-ov) .search-icon.open .lm-ring,
:is(#grau-hd,#grau-ov) .search-icon.open .lm-handle {opacity: 0; transition: transform .42s cubic-bezier(.55, 0, .3, 1), opacity .1s linear .32s;}
:is(#grau-hd,#grau-ov) .search-icon:not(.open) .lm-ring,
:is(#grau-hd,#grau-ov) .search-icon:not(.open) .lm-handle {transition: transform .42s cubic-bezier(.55, 0, .3, 1) .1s, opacity .1s linear 0s;}
:is(#grau-hd,#grau-ov) .search-icon.open .lm-ring {transform: translate(48.61px, 49.11px) rotate(-45deg) scale(1.92, 0.06) translate(-35.8px, -35.73px);}
:is(#grau-hd,#grau-ov) .search-icon.open .lm-handle {transform: translate(97.22px, 98.22px) rotate(45deg) scale(2.73, 1) rotate(-43.8deg) translate(-97.22px, -98.22px);}
}
@media (max-width: 1000px) and (prefers-reduced-motion: reduce) {
:is(#grau-hd,#grau-ov) .search-icon .lm-ring,
:is(#grau-hd,#grau-ov) .search-icon .lm-handle,
:is(#grau-hd,#grau-ov) .search-icon .lm-x polygon {transition: none !important;}
}
@media (min-width: 1001px) {
:is(#grau-hd,#grau-ov) .search-icon .lm-x polygon {opacity: 0;}
}
@media (max-width: 1000px) {
:is(#grau-hd,#grau-ov) .header .menu-icon span {visibility: hidden;}
:is(#grau-hd,#grau-ov) .header .search-icon > svg {visibility: hidden;}
:is(#grau-hd,#grau-ov) .header .menu-icon::before,
:is(#grau-hd,#grau-ov) .header .search-icon::before {content: "";
        position: absolute;
        left: 50%;
        top: 50%;
        width: 28px;
        height: 28px;
        margin: -14px 0 0 -14px;
        background-repeat: no-repeat;
        background-size: 2200% 100%;
        background-position: 0% 0;
        transition: background-position .42s steps(21);
        pointer-events: none;}
:is(#grau-hd,#grau-ov) .header .menu-icon::before {background-image: url("../icons/sprite-burger.png");}
:is(#grau-hd,#grau-ov) .header .search-icon::before {background-image: url("../icons/sprite-lupe.png");}
:is(#grau-hd,#grau-ov) .header .menu-icon.open::before,
:is(#grau-hd,#grau-ov) .header .search-icon.open::before {background-position: 100% 0;}
}
@media (max-width: 1000px) and (prefers-reduced-motion: reduce) {
:is(#grau-hd,#grau-ov) .header .menu-icon::before,
:is(#grau-hd,#grau-ov) .header .search-icon::before {transition: none;}
}
@media (max-width: 1000px) {
:is(#grau-hd,#grau-ov) .header {grid-template-columns: 72px minmax(0, 1fr) 72px;   
        grid-template-rows: 60px;
        padding: env(safe-area-inset-top, 0px) 20px 0;
        align-items: center;}
:is(#grau-hd,#grau-ov) .header .logo {grid-column: 2; grid-row: 1; height: 60px; justify-self: center; display: flex; align-items: center; justify-content: center;}
:is(#grau-hd,#grau-ov) .header .logo picture,
:is(#grau-hd,#grau-ov) .header .logo img {width: min(240px, calc(100vw - 166px)); height: 60px; padding: 0;}
:is(#grau-hd,#grau-ov) .header .left-icons {grid-column: 1; grid-row: 1; height: 60px; width: auto;}
:is(#grau-hd,#grau-ov) .header .right-icons {grid-column: 3; grid-row: 1; justify-self: end; height: 60px; width: 35px;}
:is(#grau-hd,#grau-ov) .header .search-icon {top: 12.5px;}
:is(#grau-hd,#grau-ov) .header .menu-icon {width: 19px; height: 15.4px;}
:is(#grau-hd,#grau-ov) .header .menu-icon::before,
:is(#grau-hd,#grau-ov) .header .search-icon::before {width: 19.6px; height: 19.6px; margin: -9.8px 0 0 -9.8px;}
:is(#grau-hd,#grau-ov) .cart-icon {right: 26px; top: 12.5px;}
:is(#grau-hd,#grau-ov) .cart-icon svg {height: 19px; width: 16.5px;}
}
@media (max-width: 1000px) {
:is(#grau-hd,#grau-ov) .header {grid-template-rows: 48px; padding: env(safe-area-inset-top, 0px) 14px 0;}
:is(#grau-hd,#grau-ov) .header .logo,
:is(#grau-hd,#grau-ov) .header .left-icons,
:is(#grau-hd,#grau-ov) .header .right-icons {height: 48px;}
:is(#grau-hd,#grau-ov) .header .logo picture,
:is(#grau-hd,#grau-ov) .header .logo img {height: 48px;}
:is(#grau-hd,#grau-ov) .header .logo img {transform: translateY(1.5px);}
:is(#grau-hd,#grau-ov) .header .search-icon {top: 6.5px;}
:is(#grau-hd,#grau-ov) .cart-icon {right: 36px; top: 4.5px;}
}
@media (max-width: 1000px) {
:is(#grau-hd,#grau-ov) .header {grid-template-rows: 42px;}
:is(#grau-hd,#grau-ov) .header .logo,
:is(#grau-hd,#grau-ov) .header .left-icons,
:is(#grau-hd,#grau-ov) .header .right-icons {height: 42px;}
:is(#grau-hd,#grau-ov) .header .logo picture,
:is(#grau-hd,#grau-ov) .header .logo img {height: 42px;}
:is(#grau-hd,#grau-ov) .header .logo img {transform: translateY(0.5px);}
:is(#grau-hd,#grau-ov) .header .menu-icon {transform: translateY(-1px);}
:is(#grau-hd,#grau-ov) .header .search-icon {top: 2.5px;}
:is(#grau-hd,#grau-ov) .cart-icon {top: 0.5px;}
}
@media (max-width: 1000px) {
:is(#grau-hd,#grau-ov) .header {grid-template-rows: 36px;}
:is(#grau-hd,#grau-ov) .header .logo,
:is(#grau-hd,#grau-ov) .header .left-icons,
:is(#grau-hd,#grau-ov) .header .right-icons {height: 36px;}
:is(#grau-hd,#grau-ov) .header .logo picture,
:is(#grau-hd,#grau-ov) .header .logo img {height: 36px;}
:is(#grau-hd,#grau-ov) .header .logo img {transform: translateY(-0.5px);}
:is(#grau-hd,#grau-ov) .header .menu-icon {transform: translateY(-2px);}
:is(#grau-hd,#grau-ov) .header .search-icon {top: -1.5px;}
:is(#grau-hd,#grau-ov) .cart-icon {top: -3.5px;}
}
@media (max-width: 1000px) {
:is(#grau-hd,#grau-ov) .right-icons-color,
:is(#grau-hd,#grau-ov) .right-icons-color.open {height: 56px; align-items: flex-start; padding: 0 12px;}
:is(#grau-hd,#grau-ov) .right-icons-color .input-field {height: 52px;
        border: 1px solid #ccc;
        border-radius: 0;
        -webkit-appearance: none;
        appearance: none;}
:is(#grau-hd,#grau-ov) .right-icons-color .input-field:focus {border-color: #000;}
:is(#grau-hd,#grau-ov) .search-results {padding-top: 68px;}
}
@media (max-width: 1000px) {
:is(#grau-hd,#grau-ov) .right-icons-color .input-field {caret-color: transparent;}
:is(#grau-hd,#grau-ov) .fake-caret {position: absolute; width: 1px; background: #000; pointer-events: none; display: none; animation: gm-caret-blink 1s steps(1) infinite;}
}
@keyframes gm-caret-blink { 0% { opacity: 1; } 50% { opacity: 0; } }
@media (min-width: 1001px) {
:is(#grau-hd,#grau-ov) .fake-caret {display: none !important;}
}
@media (max-width: 1000px) {
:is(#grau-hd,#grau-ov) .cart-icon {right: 30px;}
}
@media (max-width: 1000px) {
:is(#grau-hd,#grau-ov) .header {grid-template-rows: 34px;}
:is(#grau-hd,#grau-ov) .header .logo,
:is(#grau-hd,#grau-ov) .header .left-icons,
:is(#grau-hd,#grau-ov) .header .right-icons {height: 34px;}
:is(#grau-hd,#grau-ov) .header .logo picture,
:is(#grau-hd,#grau-ov) .header .logo img {height: 34px;}
:is(#grau-hd,#grau-ov) .header .logo img {transform: translateY(-1.5px);}
:is(#grau-hd,#grau-ov) .header .menu-icon {transform: translateY(-3px);}
:is(#grau-hd,#grau-ov) .header .search-icon {top: -3.5px;}
:is(#grau-hd,#grau-ov) .cart-icon {top: -5.5px;}
}
@media (max-width: 1000px) {
:is(#grau-hd,#grau-ov) .cart-icon svg {height: 20.5px; width: 17.8px;}
}
@media (max-width: 1000px) {
:is(#grau-hd,#grau-ov) .search-item,
:is(#grau-hd,#grau-ov) .search-item a {height: auto;}
:is(#grau-hd,#grau-ov) .search-item a {padding: 14px 16px; display: block;}
:is(#grau-hd,#grau-ov) .search-item .searchbar-image-container,
:is(#grau-hd,#grau-ov) .search-item .item-type {display: none;}
:is(#grau-hd,#grau-ov) .search-item .item-written {width: 100%; height: auto; padding-right: 0;}
:is(#grau-hd,#grau-ov) .search-item .title {font-size: 22px; line-height: 1.2; margin-bottom: 4px;}
:is(#grau-hd,#grau-ov) .search-item .contributors,
:is(#grau-hd,#grau-ov) .search-item .date {font-size: 16px; line-height: 1.3; margin-bottom: 0; color: #333;}
}
@media (max-width: 1000px) {
html.header-follow :is(#grau-hd,#grau-ov) .header {transition: none;}
}
@media (max-width: 1000px) {
:is(#grau-hd,#grau-ov) .menu,
:is(#grau-hd,#grau-ov) .menu.open {top: var(--hh); bottom: 0; height: auto;}
:is(#grau-hd,#grau-ov) .search-results,
:is(#grau-hd,#grau-ov) .search-results.open {top: var(--hh); bottom: 0; height: auto; padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px));}
}
@media (max-width: 1000px) {
html.header-engaged :is(#grau-hd,#grau-ov) .header {position: sticky; top: 0 !important; transition: none;}
}
@media (max-width: 1000px) {
:is(#grau-hd,#grau-ov) .menu,
:is(#grau-hd,#grau-ov) .menu.open,
:is(#grau-hd,#grau-ov) .search-results,
:is(#grau-hd,#grau-ov) .search-results.open {position: absolute; top: var(--ov-top, var(--hh)); bottom: auto; height: calc(100vh - var(--hh)); height: calc(100lvh - var(--hh));}
}
@media (max-width: 1000px) {
:is(#grau-hd,#grau-ov) .menu,
:is(#grau-hd,#grau-ov) .menu.open {box-sizing: content-box; height: calc(100lvh - var(--hh)); padding-bottom: 150px;}
:is(#grau-hd,#grau-ov) .item-others .item-content {padding-bottom: calc(90px + env(safe-area-inset-bottom, 0px));}
:is(#grau-hd,#grau-ov) .search-results,
:is(#grau-hd,#grau-ov) .search-results.open {height: calc(100lvh - var(--hh) + 150px); padding-bottom: calc(230px + env(safe-area-inset-bottom, 0px));}
:is(#grau-hd,#grau-ov) .menu:not(.open),
:is(#grau-hd,#grau-ov) .search-results:not(.open) {height: 0; padding-bottom: 0; overflow: hidden; transition: left .3s ease, right .3s ease, visibility 0s linear .3s, height 0s linear .3s, padding 0s linear .3s;}
}
@media (max-width: 1000px) {
:is(#grau-hd,#grau-ov) .menu.open {background-color: #ddd;}
:is(#grau-hd,#grau-ov) .search-results,
:is(#grau-hd,#grau-ov) .menu {overscroll-behavior: none;}
}
html.header-snap :is(#grau-hd,#grau-ov) .header {transition: none !important;}
:is(#grau-hd,#grau-ov) .header,
:is(#grau-hd,#grau-ov) .header *,
:is(#grau-hd,#grau-ov) .menu,
:is(#grau-hd,#grau-ov) .menu *,
:is(#grau-hd,#grau-ov) .search-results,
:is(#grau-hd,#grau-ov) .search-results * {-webkit-tap-highlight-color: transparent;}
:is(#grau-hd,#grau-ov) .search-results,
:is(#grau-hd,#grau-ov) .menu {scrollbar-width: none;}
:is(#grau-hd,#grau-ov) .search-results::-webkit-scrollbar,
:is(#grau-hd,#grau-ov) .menu::-webkit-scrollbar {display: none; width: 0; height: 0;}
:is(#grau-hd,#grau-ov) .header .cart-icon .cart-count {position: absolute; left: 0; bottom: 0; top: auto; right: auto; transform: none;
    min-width: 14px; height: 14px; padding: 0 3px; box-sizing: border-box; border-radius: 7px;
    background: #000; color: #fff; font: 700 9px/14px "GT America", sans-serif; text-align: center; pointer-events: none;}
:is(#grau-hd,#grau-ov) .header .cart-icon .cart-count:empty {display: none;}
:is(#grau-hd,#grau-ov) .search-results.cart-slide {padding: 0 !important;}
:is(#grau-hd,#grau-ov) .cart-slide-title {font-family: "Rhymes", Georgia, serif; font-weight: 400; font-style: normal; font-size: 31.2px; line-height: 1.2; color: #000; margin: 0; padding: 15px 15px 12px;}
@media (min-width: 1001px) {
:is(#grau-hd,#grau-ov) .search-results.cart-slide {position: fixed; top: 7vh; width: 100vw; right: -100vw; height: 93vh; transition: right .3s ease; background: #fff; z-index: 9;}
:is(#grau-hd,#grau-ov) .search-results.cart-slide.open {right: 0; width: 100vw; height: 93vh;}
:is(#grau-hd,#grau-ov) .cart-slide-title {font-size: 50px; line-height: normal; padding: 11px 0 16px 70px;}
}
:is(#grau-hd,#grau-ov) .header .cart-icon .cart-count:not(:empty) {display: flex; align-items: center; justify-content: center;
    width: auto; min-width: 14px; height: 14px; padding: 0 3px; line-height: 1;
    font-family: "GT America", -apple-system, "Helvetica Neue", Arial, sans-serif; font-size: 9px; font-weight: 700;
    font-variant-numeric: tabular-nums; -webkit-text-size-adjust: 100%;}
html.grau-noanim :is(#grau-hd,#grau-ov) *,
html.grau-noanim :is(#grau-hd,#grau-ov) *::before,
html.grau-noanim :is(#grau-hd,#grau-ov) *::after {transition: none !important; animation: none !important;}
:is(#grau-hd,#grau-ov) .cart-slide img {-webkit-filter: none !important; filter: none !important;}
@media (max-width: 1000px) {
:is(#grau-hd,#grau-ov) .cart-slide .cart-slide-title {padding: 15px 15px 0; text-transform: capitalize;}
:is(#grau-hd,#grau-ov) .cart-slide .cs-items {margin-top: 35px; padding: 0 15px;}
:is(#grau-hd,#grau-ov) .cart-slide .cs-row {display: flex; gap: 15px; height: 133px; margin-bottom: 35px;}
:is(#grau-hd,#grau-ov) .cart-slide .cs-img {width: 100px; height: 125px; object-fit: cover; background: #000; flex: none; display: block;}
:is(#grau-hd,#grau-ov) .cart-slide .cs-det {flex: 1; min-width: 0; font-family: Inter, -apple-system, "Helvetica Neue", Arial, sans-serif; letter-spacing: .6px;}
:is(#grau-hd,#grau-ov) .cart-slide .cs-name {font-size: 15px; line-height: 19.5px; color: #121212; white-space: pre-line; text-transform: uppercase;}
:is(#grau-hd,#grau-ov) .cart-slide .cs-price {margin-top: 6px; font-size: 14px; line-height: 21px; color: rgba(18, 18, 18, .75);}
:is(#grau-hd,#grau-ov) .cart-slide .cs-qrow {margin-top: 24px; display: flex; align-items: center; gap: 5px;}
:is(#grau-hd,#grau-ov) .cart-slide .cs-qty {width: 105px; height: 36px; box-sizing: border-box; border: 1px solid #121212; border-radius: 4px;
        display: flex; align-items: center; justify-content: space-between; color: #121212; font-size: 16px; font-weight: 500; letter-spacing: 0;}
:is(#grau-hd,#grau-ov) .cart-slide .cs-qty span {width: 34px; text-align: center; color: #808080; font: 400 18px Arial, sans-serif;}
:is(#grau-hd,#grau-ov) .cart-slide .cs-qty b {font-weight: 500;}
:is(#grau-hd,#grau-ov) .cart-slide .cs-del {width: 37px; height: 36px; display: flex; align-items: center; justify-content: center;}
:is(#grau-hd,#grau-ov) .cart-slide .cs-del svg {width: 14px; height: 16px; fill: none; stroke: rgba(18, 18, 18, .5); stroke-width: 1.1;}
:is(#grau-hd,#grau-ov) .cart-slide .cs-foot {position: absolute; left: 0; right: 0; height: 139px; background: #fff; padding: 0 15px; box-sizing: border-box;
        font-family: Inter, -apple-system, "Helvetica Neue", Arial, sans-serif; letter-spacing: .6px;}
:is(#grau-hd,#grau-ov) .cart-slide .cs-tot {margin-top: 27px; height: 18px; display: flex; justify-content: space-between; align-items: center;}
:is(#grau-hd,#grau-ov) .cart-slide .cs-tot b {font-weight: 600; font-size: 17px; color: #121212; letter-spacing: normal;}
:is(#grau-hd,#grau-ov) .cart-slide .cs-tot span {font-size: 18px; color: rgba(18, 18, 18, .75);}
:is(#grau-hd,#grau-ov) .cart-slide .cs-btn {margin-top: 12px; height: 50px; background: #000; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 15px; letter-spacing: 1px;}
}

/* ---- aus assets/css/parts/menu.1.css ---- */
:is(#grau-hd,#grau-ov) .menu {position: fixed;
    left: -100%; 
    width: 100%;
    color: black;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: left 0.3s ease;
    z-index: 9;}
:is(#grau-hd,#grau-ov) .menu.open {left: 0; 
        z-index: 9;}
:is(#grau-hd,#grau-ov) .menu-grid {display: flex;
        width: 100%;
        height: 100%;
        flex-direction: column;
        background-color: #ddd;}
@media (hover: hover) {
:is(#grau-hd,#grau-ov) .item-subtitle:hover,
:is(#grau-hd,#grau-ov) .item-title a:hover {opacity: 60%;}
}
@media (hover: hover) {
:is(#grau-hd,#grau-ov) .item-images a:hover {opacity: 80%;}
}
:is(#grau-hd,#grau-ov) .menu-item {flex: 1; 
        display: flex;}
:is(#grau-hd,#grau-ov) .menu-item:last-child {border-bottom: none;}
:is(#grau-hd,#grau-ov) .menu-content {display: flex;
        flex-direction: column;
        width: 100%;
        height: 100%;}
:is(#grau-hd,#grau-ov) .item-title {font-size: 40px;
        font-weight: 700;
        text-align: left;
        box-sizing: border-box;
        height: 20%;
        width: 100%;
        text-decoration: underline;
        text-decoration-thickness: 3px; 
        text-underline-offset: 3px;}
:is(#grau-hd,#grau-ov) .item-content {display: flex;
        font-size: 30px;
        font-weight: 700;
        text-align: right;
        align-items: flex-end;
        justify-content: flex-end;
        gap: 70px;
        box-sizing: border-box;
        height: 80%;
        width: 100%;}
:is(#grau-hd,#grau-ov) .menu-item.item-products {background: linear-gradient(to bottom, #ccc 0%, rgba(255, 255, 255, 0) 100%);}
:is(#grau-hd,#grau-ov) .menu-item.item-articles {background: linear-gradient(to bottom, #999 0%, rgba(255, 255, 255, 0) 100%);}
:is(#grau-hd,#grau-ov) .menu-item.item-others {background: linear-gradient(to bottom, #aaa 0%, rgba(255, 255, 255, 0) 100%);}
@media (min-width: 1000px) {
:is(#grau-hd,#grau-ov) .menu {height: 93%;
        top: 7%;}
:is(#grau-hd,#grau-ov) .item-title {padding: 15px;
            padding-left: 20px;}
:is(#grau-hd,#grau-ov) .item-content {padding: 15px;
            padding-right: 25px;
            padding-bottom: 22px;}
:is(#grau-hd,#grau-ov) .item-content .item-images {width: 70%;
            height: 100%;
            display: flex;
            align-items: flex-end;
            justify-content: flex-end;
            gap: 30px;}
:is(#grau-hd,#grau-ov) .item-content .item-images a {margin: 0;
            padding: 0;}
:is(#grau-hd,#grau-ov) .item-subtitle {text-decoration: underline;
            text-decoration-thickness: 4px;
            text-underline-offset: 7px;}
}
@media (max-width: 1000px) {
:is(#grau-hd,#grau-ov) .menu {height: calc(100% - var(--hh));
        top: var(--hh);}
:is(#grau-hd,#grau-ov) .item-title {height: 20%;
            padding-left: 15px;
            padding-top: 15px;
            font-size: clamp(25px, 8vw, 40px);
            text-decoration-thickness: 2px; 
            text-underline-offset: 3px;}
:is(#grau-hd,#grau-ov) .item-content {padding-bottom: 17px;
            padding-right: 15px;
            height: 80%;
            display: flex;
            align-items: flex-end;
            justify-content: flex-end;
            flex-direction: column;
            gap: 5px;
            font-size: clamp(20px, 3vh, 35px);}
:is(#grau-hd,#grau-ov) .item-content .item-images {width: 100%;
            height: 8vh;
            align-items: flex-end;
            justify-content: flex-end;
            display: flex;
            gap: 10px;}
:is(#grau-hd,#grau-ov) .item-content .item-images img {height: 50px;
            width: auto;}
:is(#grau-hd,#grau-ov) .item-others .item-content {padding-bottom: 20px;}
:is(#grau-hd,#grau-ov) .item-subtitle {text-decoration: underline;
        text-decoration-thickness: 3px;
        text-underline-offset: 6px;}
}
:is(#grau-hd,#grau-ov) .item-articles .item-subtitle.all {margin-bottom: 14px;}
:is(#grau-hd,#grau-ov) .item-articles .item-subtitle:not(.all) a {color: rgba(0, 0, 0, 0.6);}
:is(#grau-hd,#grau-ov) .menu-item {cursor: pointer;}
:is(#grau-hd,#grau-ov) .item-title:has(.ul-gap) {text-decoration: none;}
:is(#grau-hd,#grau-ov) .item-title .ul-part {text-decoration: underline;
    text-decoration-thickness: inherit;
    text-underline-offset: 3px;
    text-decoration-skip-ink: none;}
:is(#grau-hd,#grau-ov) .item-title .ul-gap {margin: 0 1px;}
@media (min-width: 1001px) {
:is(#grau-hd,#grau-ov) .item-title .ul-part {text-decoration-thickness: 3px;}
}
@media (max-width: 1000px) {
:is(#grau-hd,#grau-ov) .item-title .ul-part {text-decoration-thickness: 2px;}
}
:is(#grau-hd,#grau-ov) .item-subtitle,
:is(#grau-hd,#grau-ov) .item-subtitle a {font-family: "Rhymes", Georgia, serif; font-weight: 400;}
:is(#grau-hd,#grau-ov) .item-subtitle {line-height: 1.6;}
@media (max-width: 1000px) {
:is(#grau-hd,#grau-ov) .item-subtitle {text-underline-offset: 4px;}
}
:is(#grau-hd,#grau-ov) .item-articles .item-subtitle:not(.all) {text-decoration-color: rgba(0, 0, 0, 0.6);}
:is(#grau-hd,#grau-ov) .item-title,
:is(#grau-hd,#grau-ov) .item-title .ul-part {text-decoration-thickness: 1px !important;}
:is(#grau-hd,#grau-ov) .item-title:has(.ul-part) {text-decoration: none;}
:is(#grau-hd,#grau-ov) .item-title .ul-gap {margin: 0;}
:is(#grau-hd,#grau-ov) .item-subtitle {text-decoration: none;}
:is(#grau-hd,#grau-ov) .item-subtitle a {text-decoration: underline; text-decoration-color: currentColor; text-decoration-thickness: 4px; text-underline-offset: 9px;}
@media (max-width: 1000px) {
:is(#grau-hd,#grau-ov) .item-subtitle a {text-decoration-thickness: 3px; text-underline-offset: 7px;}
}
@media (max-width: 1000px) {
:is(#grau-hd,#grau-ov) .menu-item {flex: 1 1 auto;}
:is(#grau-hd,#grau-ov) .item-others .item-content {padding-bottom: calc(70px + env(safe-area-inset-bottom, 0px));}
}
:is(#grau-hd,#grau-ov) .item-title .ul-gap {margin: 0 0 0 1px;}
:is(#grau-hd,#grau-ov) .item-title .ul-after-gap {text-decoration-color: transparent;
    background-image: linear-gradient(currentColor, currentColor);
    background-repeat: no-repeat;
    background-size: calc(100% - 1.3px) 1px;
    background-position: 1.3px calc(100% - 4px);}

/* ==== Footer der Website ==== */
/* ---- aus assets/css/parts/footer.1.css ---- */
#grau-ft .footer {position: relative; 
    text-align: left; 
    bottom: 0;
    z-index: 2;
    border-top: 2px solid black;
    border-bottom: 0px;
    box-sizing: border-box;
    width: 100%;
    padding: 20px;
    display: flex;
    gap: 10px;
    background-color: white;}
#grau-ft .footer-link,
#grau-ft .footer-backtotop,
#grau-ft .footer-nav ul {border: 2px solid black;
    padding: 4px;}
#grau-ft .footer-backtotop {cursor: pointer;
    text-align: center;
    font-size: 1em;
    line-height: 1.5;
    border: 2px solid black;
    transition: transform 0.3s ease, color 0.3s ease;}
@media (hover: hover) {
#grau-ft .footer-backtotop:hover {transform: translateY(-5px);
    color: #333;}
}
#grau-ft .footer-backtotop::before {content: "↑";
    display: block;
    font-size: 1.5rem;
    margin-bottom: 5px;}
#grau-ft .footer a {text-decoration: none;
    font-size: 1em;
    color: black;}
@media (hover: hover) {
#grau-ft .footer a:hover {text-decoration: underline;}
}
#grau-ft .footer-nav ul {list-style: none;
    margin: 0;
    display: flex;
    gap: 10px;
    text-align: center;}
@media (min-width: 600px) {
#grau-ft .footer {flex-direction: row;
        justify-content: space-between;
        align-items: center;}
#grau-ft .footer-nav ul {flex-direction: row;}
}
@media (max-width: 600px) {
#grau-ft .footer {flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        align-items: center;
        gap: 15px;
        padding: 5px;}
#grau-ft .footer-nav ul {flex-direction: column;
        gap: 10px;}
}

/* ---- aus assets/css/parts/footer.mobile.css ---- */
@media (max-width: 600px) {
#grau-ft .footer {flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: 16px;
        padding: 20px 16px calc(14px + env(safe-area-inset-bottom, 0px));   
        background: #fff;   
        border-top: 0;}
#grau-ft .footer .footer-link,
#grau-ft .footer .footer-backtotop,
#grau-ft .footer .footer-nav {box-sizing: border-box;
        width: 100%;
        margin: 0;}
#grau-ft .footer .footer-link,
#grau-ft .footer .footer-backtotop {display: flex;
        align-items: center;
        justify-content: center;
        min-height: 56px;
        padding: 10px 16px;
        border: 2px solid #000;}
#grau-ft .footer .footer-link,
#grau-ft .footer .footer-backtotop,
#grau-ft .footer .footer-nav li a {font-size: 18px; line-height: 1.2;}
#grau-ft .footer .footer-backtotop {position: relative; z-index: 2;}
#grau-ft .footer .footer-backtotop::before {content: "";
        display: block;
        position: absolute;
        left: 20px;
        top: 50%;
        width: 18px;
        height: 22px;
        margin: 0;
        transform: translateY(-50%);
        pointer-events: none;
        background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 82 100'%3E%3Cg transform='translate%280 100%29 rotate%28-90%29'%3E%3Cpolygon points='99.98%2C41 71.69%2C12.52 58.39%2C1.77 53.09%2C0 54.86%2C5.3 65.6%2C18.6 88.16%2C41 65.6%2C63.4 54.86%2C76.7 53.09%2C82 58.39%2C80.23 71.69%2C69.48 '/%3E%3Cpolygon points='94.09%2C45.18 22%2C45.3 5%2C43.5 0%2C41 5%2C38.5 22%2C36.7 94.09%2C36.82 '/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;}
#grau-ft .footer .footer-nav {border: 2px solid #000; padding: 8px 0;}
#grau-ft .footer .footer-nav ul {border: 0;
        padding: 0;
        margin: 0;
        width: 100%;
        flex-direction: column;
        gap: 0;}
#grau-ft .footer .footer-nav li {width: 100%;}
#grau-ft .footer .footer-nav li a {display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        min-height: 52px;
        padding: 0 16px;
        box-sizing: border-box;}
}
@media (max-width: 600px) {
#grau-ft .footer .footer-link,
#grau-ft .footer .footer-backtotop,
#grau-ft .footer .footer-nav {border: 1px solid #000;}
}
@media (max-width: 600px) {
#grau-ft .footer {gap: 8px; padding-left: 16px; padding-right: 16px;}
}
@media (max-width: 600px) {
#grau-ft .footer .footer-link,
#grau-ft .footer .footer-backtotop,
#grau-ft .footer .footer-nav li a {font-family: "Rhymes", Georgia, serif;
        font-weight: 400;
        font-size: 25.32px;
        line-height: 1.6;
        color: #000;}
#grau-ft .footer .footer-link,
#grau-ft .footer .footer-nav li a,
#grau-ft .footer .footer-backtotop {text-decoration: underline;
        text-decoration-thickness: 3px;
        text-underline-offset: 7px;}
}
@media (max-width: 600px) {
#grau-ft .footer .footer-link,
#grau-ft .footer .footer-backtotop,
#grau-ft .footer .footer-nav li a {font-size: clamp(20px, 3vh, 35px); text-decoration: none;}
}

/* ==== Ergänzungen für den Shop (tools/shop-header/shop.css) ==== */
/* Kopfzeile: #grau-hd hält im Seitenfluss den Platz frei, die Leiste selbst liegt fest oben.
   Am Desktop scrollt auf der Website nur der Inhaltsbereich, im Shop die ganze Seite: darum dort ebenfalls fest. */
#grau-hd { display: block; position: relative; height: var(--hh); }
@media (min-width: 1001px) {
    #grau-hd { height: 7vh; }
    #grau-hd .header { position: fixed; top: 0; left: 0; right: 0; }
}

/* Shopify-Abschnitt der Kopfzeile: kein eigenes Kleben/Verstecken des Themes, liegt über dem Shop-Inhalt */
.section-header { position: relative !important; top: auto !important; z-index: 50 !important; margin: 0 !important; transform: none !important; }

/* Handy: Menü-Ebene hängt (wie auf der Website) direkt an body und wird an der aktuellen Scrollstelle aufgemacht */
@media (max-width: 1000px) {
    body { position: relative; overflow-x: clip; }
}
#grau-ov { display: block; position: static; }

/* Anzahl im Warenkorb: Aussehen kommt von der Website (header.mobile.css, .header .cart-icon .cart-count) */

/* Der Warenkorb-Zähler des Themes bleibt unsichtbar im Code: das Theme aktualisiert ihn nach "In den Warenkorb",
   grau-shop.js liest daraus die neue Anzahl */
#cart-icon-bubble.grau-source { display: none !important; }

/* Footer: volle Breite, ohne Abstände des Themes */
#grau-ft { display: block; }
.section-footer, .footer-group { margin: 0 !important; padding: 0 !important; }

/* Das Shop-Theme setzt eigene Abstände mit !important (z. B. header.header { padding: 10px 15px 0 !important }).
   Die Werte der Website gelten hier darum ebenfalls mit !important. */
#grau-hd .header { padding: 0 !important; margin: 0 !important; max-width: none !important; }
@media (max-width: 1000px) {
    #grau-hd .header { padding: env(safe-area-inset-top, 0px) 14px 0 !important; }
}


/* Suche offen: der Shop-Inhalt dahinter bleibt stehen, ist aber unsichtbar (wie main.search-open auf der Website) */
body.search-active #MainContent,
body.search-active .shopify-section-group-footer-group { visibility: hidden; }

/* Unten (unter dem Footer und hinter Safaris Leiste) schwarz wie der Footer; oben bleibt es weiß wie die Kopfzeile */
html { background: #000 linear-gradient(#fff, #fff) no-repeat 0 0 / 100% 50% !important; }   /* Grundfarbe Schwarz, Weiß nur einmal oben (ein Verlauf würde sich unter dem Seitenende wiederholen) */

/* Warenkorb-Seite: Inhalt schiebt sich beim Öffnen als Ganzes von rechts herein (wie die Suche, 0,3 s)
   und beim Schließen (Kreuz) wieder nach rechts hinaus. Die Kopfzeile bleibt stehen, die Tasche blendet aus. */
@keyframes grau-cart-in { from { transform: translateX(100vw); } to { transform: translateX(0); } }
/* Alles fährt per transform (gleich schnell, flüssig). Nicht #MainContent als Ganzes bewegen: der unten festgemachte
   Checkout-Block hinge sonst während der Bewegung an der Seite. Darum: jeder Teil des Inhalts einzeln, der Block selbst auch. */
body:has(#MainContent cart-items) #MainContent > *:not(:has(.cart__footer)),
body:has(#MainContent cart-items) .cart__footer { animation: grau-cart-in .3s ease backwards; }
body.grau-cart-leaving #MainContent,
body.grau-cart-leaving .shopify-section-group-footer-group { transform: translateX(100vw); }
#grau-hd .cart-icon { transition: opacity .3s ease; }
#grau-hd .cart-icon.grau-hide { opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
    body:has(#MainContent cart-items) #MainContent > *,
    body:has(#MainContent cart-items) .cart__footer { animation: none; }
}

/* Seite seitlich nicht verschiebbar (wie auf der Website: html und body abgeschnitten) */
@media (max-width: 1000px) { html { overflow-x: clip; } }

/* Kein grauer Kasten beim Antippen der Symbole (auch nicht als Fokus-Rahmen) */
:is(#grau-hd, #grau-ov, #grau-ft) * { -webkit-tap-highlight-color: transparent !important; }
:is(#grau-hd, #grau-ov, #grau-ft) :focus:not(:focus-visible) { outline: none !important; }
:is(#grau-hd, #grau-ov, #grau-ft) :is(.menu-icon, .search-icon, .cross-icon, .cart-icon, .footer-backtotop):active { background: transparent !important; }

/* Nichts darf seitlich überstehen: das geschlossene Suchfeld (liegt sonst rechts neben dem Bildschirm) und
   Shopifys Vorschau-/Admin-Leiste (nur für angemeldete Admins sichtbar) */
@media (max-width: 1000px) {
    #grau-hd .right-icons-color:not(.open) { display: none !important; }
    #PBarNextFrameWrapper { left: 0 !important; right: 0 !important; width: auto !important; max-width: 100vw !important; overflow: hidden !important; }
    html, body { overscroll-behavior-x: none; }
}

/* Im ganzen Shop kein grauer Kasten beim Antippen (auch Plus, Minus, Mülleimer im Warenkorb) */
html, html * { -webkit-tap-highlight-color: transparent !important; }

/* Kein Heranzoomen beim Antippen von Eingabefeldern (iPhone zoomt bei Schrift unter 16 px), z. B. die Anzahl im Warenkorb */
@media (max-width: 1000px) {
    input, select, textarea, .quantity__input { font-size: 16px !important; }
}

/* Warenkorb-Seite: Das Theme blendet dort Kopfzeile und Footer aus (alte Regel body:has(#main-cart-items) .section-header {display:none!important}).
   Die GRAU-Kopfzeile gehört dazu (Burger, Logo, Kreuz statt Lupe); der Footer bleibt weg, der Warenkorb wirkt wie eine geöffnete Ebene. */
html body:has(#main-cart-items) .shopify-section.section-header { display: block !important; }
/* Seite immer mindestens bildschirmhoch und weiß: Schwarz erscheint nur unterhalb, beim Ziehen über das Ende hinaus */
html body { min-height: 100vh !important; min-height: 100svh !important; }   /* kleinste sichtbare Höhe: passt alles auf den Bildschirm, lässt sich nichts verschieben */

/* "Your cart" wie der Seitentitel "Articles" der Website: Rhymes, gleiche Größe, gleiche Stelle */
#MainContent [class*="__cart-items-padding"] { padding-top: 0 !important; }
/* Titelbereich in voller Höhe; Abstand zum ersten Produkt = Abstand zwischen den Produkten (35 px) */
cart-items .title-wrapper-with-link { display: block !important; height: auto !important; margin: 0 0 35px !important; padding: 15px 0 0 !important; }
cart-items .title-wrapper-with-link .title {
    font-family: 'Rhymes', Georgia, serif !important; font-weight: 400 !important; font-style: normal !important;
    font-size: 31.2px !important; line-height: 1.2 !important; letter-spacing: normal !important;
    color: #000 !important; margin: 0 !important; text-transform: capitalize !important;   /* Your Cart */
}
@media (min-width: 1001px) {
    cart-items .title-wrapper-with-link { padding: 11px 0 0 20px !important; }
    cart-items .title-wrapper-with-link .title { font-size: 50px !important; line-height: normal !important; }
}

/* Das alte Schließen-Kreuz der Warenkorb-Seite (Link neben dem Titel) entfällt: das Kreuz sitzt jetzt in der Kopfzeile */
cart-items .title-wrapper-with-link > a { display: none !important; }
/* Desktop gleich wie Handy: auf der Warenkorb-Seite nur das Kreuz (keine Lupe daneben) und kein Footer */
@media (min-width: 1001px) {
    html body:has(#main-cart-items) #grau-hd .search-icon { visibility: hidden !important; }
    html body:has(#main-cart-items) .shopify-section-group-footer-group { display: none !important; }
}

/* Warenkorb-Seite: kein Nachfedern und kein Verschieben, wenn alles auf den Bildschirm passt */
html:has(#main-cart-items) { overscroll-behavior: none; }