* {
    /* margin-top: 0.5rem; */
    padding: 0;
    box-sizing: content-box;
    scroll-behavior: smooth;
    border: none;
    font-synthesis: none;
}

@font-face {
    font-family: 'GT-Flexa';
    src: url("fonts/GT-Flexa-Standard-Medium.woff2") format("woff2"),
        url("fonts/GT-Flexa-Standard-Medium.woff") format("woff");
    font-weight: bold;
}

@font-face {
    font-family: 'GT-Flexa';
    src: url("fonts/GT-Flexa-Standard-Light.woff2") format("woff2"),
        url("fonts/GT-Flexa-Standard-Light.woff") format("woff");
    font-weight: normal;
}

html {
    color: var(--color-text);
    background: var(--color-background);
}

:root {
    /* --font-family-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace; */
    /* --font-family-sans:  Arial, sans-serif, Helvetica;  */
    --font-family-sans: "GT-Flexa", sans-serif;

    --font-size-xxl: 3.2rem;
    --font-size-xl: 1.8rem;
    --font-size-l: 1.4rem;
    --font-size-m: 1.2rem;
    --font-size-ls: 1.0rem;
    --font-size-s: 0.9rem;
    /* --font-size-s: clamp(0.6rem, 0.8rem, 1.0rem); */
    --font-size-xs: 0.8rem;


    --font-weight-bold: 600;
    --font-weight-semibold: 600;
    --font-weight-normal: 400;

    --column-gap: 16px;

    --line-height-xl: 1.0;
    --line-height-l: 1.2;
    --line-height-m: 1.2;
    --line-height-sl: 1.2;
    --line-height-s: 1.2;

    --space-xs: 8px;
    --space-s: 16px;
    --space-m: 32px;
    --space-l: 64px;
    --space-xl: 128px;

    --color-black: #000;
    --color-white: #fff;
    --color-grey: #777;
    --color-light: #efefef;

    --color-red: #d15005;
    --color-red-navi: #fe6e1b;

    --color-orange: #ffae00;
    --color-pink: #ff00b7;
    --color-repro: #C7C4BF;

    --color-text: var(--color-black);
    --color-text-grey: var(--color-grey);
    --color-background: var(--color-white);
    --color-grey-repro: var(--color-repro);

    --color-line: #000;
    --swiper-navigation-size: 22px;
    --swiper-theme-color: #3c3c3d;

    --width: 1280px;
    --margin: calc(100vw - var(--width));
    --margin-left: calc(var(--margin) / 2);
    --margin-right: calc(var(--margin) / 2);
}


/* GRID mobile –––––––––––––––––––––––––––––––––*/
.burger-image,
.grid-head-mobile,
.grid-head-1-1-mobile,
.grid-head-2-1-mobile
.grid-head-3-1-mobile {
    display: none;
}

/*GRID-------------------------*/

.grid-head {
    display: grid;
    grid-template-columns: 1fr 2fr;
    padding-top: 2rem;
    padding-bottom: 0.5rem;
    /* background-color: rgba(0, 204, 255, 0.5); */
    column-gap: var(--column-gap);

}

.grid-head-1-1 {
    grid-column: 1 / span 1;
    /* border-bottom: 3px solid var(--color-line); */

}

.grid-head-2-1 {
    grid-column: 2 / span 1;
}

.menu-item li:not(:last-child):after {
    content: "/ ";
    margin: 0px;
    white-space: pre;
}
.menu-item:last-child {
    justify-self: end;
    margin-right: 0;
}


/* SPACERS */

.space-m {
    padding-bottom: var(--space-m);
}

/* MENÜ –––––––––––––––––––––––––––––––––*/

.logo {
    font-size: var(--font-size-m);
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.02rem;
    /* padding-bottom: 0.5rem; */
    cursor: pointer
}



.menu {
    display: grid;
    font-size: var(--font-size-m);
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height-l);
    text-transform: uppercase;
    letter-spacing: 0.04rem;
    cursor: pointer;
    grid-auto-flow: column;
    grid-template-columns: 1fr 1fr 1fr;
}

.menu-item {
    margin-right: 0.2rem;
    display: flex;
    flex-direction: row;
}

.menu-item:nth-child(2) {
    justify-self: center;
}


.menu-item:nth-child(1) {
    margin-right: 2rem;
}



/* WARENKORB */
.details-cart {
    position: relative;
    z-index: 20;
    align-self: end;
    width: 100%;
}
.details-cart summary {
    list-style: none;
    cursor: pointer;
    padding: var(--spacing-m);
    text-align: right;
}
.details-cart summary:focus {
    outline: 0;
}
.details-cart summary::-webkit-details-marker {
    display: none;
}

/* Mocks .details-cart summary */
.link-cart {
    padding: var(--spacing-m);
    font-weight: 600;
    text-align: right;
    align-self: end;
}

.cart {
    width: var(--width);
    font-size: var(--font-size-m);
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height-l);
}

.details-cart .cart {
    position: absolute;
    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-gap: var(--column-gap);
    background-color: white;
    width: var(--width);
    top: 36px;
    right: 0px;
    box-shadow: 0px 8px 16px #000000a6;
}
.cart table {
    width: 100%;
    display: grid;
    grid-template-rows: 1fr auto auto;
}
.cart a {
    text-decoration: none;
    color: inherit;
}
.cart img {
    width: 100%;
    height: auto;
}
.cart table {
    margin-bottom: var(--space-m);
}
.cart tr {
    vertical-align: middle;
    display: grid;
    grid-template-columns: 50% 1fr 1fr 1fr;
    column-gap: var(--column-gap);
}
.cart th,
.cart td {
    padding: var(--spacing-s);
}
.cart th {
    text-align: left;
    font-weight: 600;
}
.cart thead {
    font-weight: 600;
}
.cart tbody {
    border-bottom: 2px solid black;
    padding-bottom: var(--space-m);
    display: grid;
    gap: var(--column-gap);
}
.cart tbody th {
    font-weight: 400;
}
.cart tbody a {
    display: grid;
    grid-template-columns: 3fr 9fr;
    grid-template-rows: auto auto;
    column-gap: var(--column-gap);
    padding: 0;
}
.cart tbody th img {
    grid-row-end: span 2;
}
.cart tbody th strong,
.cart tbody th small {
    grid-column-start: 2;
}
.cart tbody th small {
    font-size: inherit;
}
.cart tbody th strong {
    display: block;
    min-width: 6rem;
}
.cart td:nth-last-child(1){
    text-align: end;
    grid-column: 4;
}
.cart tfoot {
    padding-top: var(--space-m);
    padding-bottom: var(--space-m);
    border-bottom: 2px solid black;
}
.cart tfoot th,
.cart tfoot td {
    padding-top: var(--spacing-xs);
    padding-bottom: var(--spacing-xs);
}
.cart tfoot th {
    text-align: end;
}
.cart button[data-action="remove"]:where(:focus-visible, :hover) {
    text-decoration: underline;
}
.cart .button-white {
    margin-inline-start: auto;
}
.cart-info {
    padding: var(--spacing-l);
    text-align: left;
}
.cart-quantity {
    display: flex;
    justify-items: start;
}

.cart-shipping-destination {
    display: grid;
    grid-auto-flow: row;
    gap: var(--column-gap);
}
.cart tbody td strong{
    display: none;
}

.remove {
    padding: 0 12px;
    margin-left: 8px;
}

.order p, .order > .text > .table {
    font-size: var(--font-size-m);
    width: 100%;
}

.order > .text {
    width: 66%;   
}

.order > .text > .table > tbody > tr{
    display: grid;
    grid-template-columns: 1fr 2fr;
}

.swiper-container {
    container-type: inline-size;
}

/* —————————————————————————————————————————————————— */
/* mobile 768px —————————————————————————————————————— */

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

    :root {

        --font-size-xxl: 3.2rem;
        --font-size-xl: 1.8rem;
        --font-size-l: 1.4rem;
        --font-size-m: 1.2rem;
        --font-size-ls: 1.0rem;
        --font-size-s: 0.9rem;
        /* --font-size-s: clamp(0.6rem, 0.8rem, 1.0rem); */
        --font-size-xs: 0.8rem;


        --width: calc(100vw - 24px);
        --margin: 24px;
        --margin-left: calc(var(--margin) / 2);
        --margin-right: calc(var(--margin) / 2);


        --column-gap: 8px;
    }

    .grid-head-1-2 {
        display: none;    
    }




    /* mobile GRID-------------------------*/



    .grid-head-mobile {
        grid-template-columns: 3fr 1fr;
        display: grid;
        flex-direction: column;
        border-bottom: 1px solid var(--color-line);
        padding-top: 0.2rem;
        padding-bottom: 1.0rem;
        /* line-height: 2.0rem; */
        margin-bottom: 2.0rem;

    }

    .menu-item:nth-child(1) {
        margin-right: 0.2rem;
    }

    .grid-head-1-1 {
        grid-column: 1/ span 2;
        grid-row: 1/ span 1;    
        /* display: flex; */
        /* flex-direction: column; */
        /* background-color: aquamarine; */

    }
    .grid-head-2-1 {
        grid-column: 1 / span 3;
        grid-row: 2 / span 1;  
        /* flex-direction: column; */
    }

    .menu {
        grid-template-columns: auto auto auto;
    }

    .details-cart .cart {
        grid-template-columns: auto;
        top: 28px;
        top: 28px;
        width: calc(100vw - 24px);
        padding: 12px;
        right: -12px;
    }

    .cart tr {
        grid-template-columns: 50% 2fr 1fr 1fr;
    }
}

@media only screen and (max-width:640px) {
    .cart thead {
        display: none;
    }

    .cart tbody tr {
        display: flex;
        flex-direction: column;
        gap: var(--column-gap);
    }

    .cart tbody tr:not(:first-child) {
        margin-top: 12px;
        border-top: 2px solid black;
        padding-top: 12px;
    }

    .cart tbody td:nth-last-child(1){
        text-align: start;
    }

    .cart tbody td strong{
        display: block;
    }

    .cart tfoot, .cart tfoot tr:first-child{
        text-align: start;
        display: flex;
        flex-direction: column;
        gap: var(--column-gap);
    }

    .cart tfoot tr {
        text-align: grid;
    }

    .cart tfoot th {
        text-align: start;
    }

    .cart tfoot tax {
        display: flex;
        flex-direction: row;
    }
}

@media only screen and (max-width: 420px) {
    .menu {
        display: flex;
        flex-direction: column;
        gap: var(--column-gap);
    }
    .details-cart summary {
        text-align: left;
    }
}