.fa-spin {
    transform-origin: 50% 46% !important;
}

:root,
html,
body {
    --icom-default-border-radius: 0px;
    --icom-default-gap: calc(var(--icom-default-border-radius) * 0.8);
    --icom-button-default-border-radius: 0px;
    --icom-button-default-padding-x: 1.4em;
    --icom-button-default-padding-y: 1.1em;
    --icom-heading-default-weight: 400;
    --icom-header-default-height: 3.5rem;
    --icom-header-default-nav-box-shadow:
        0 0 .5rem rgba(0, 0, 0, .2),
        0 0 1rem rgba(0, 0, 0, .1);


    --mud-palette-black: rgba(39, 44, 52, 1) !important;
    --mud-palette-white: rgba(255, 255, 255, 1) !important;
    --mud-palette-primary: #186348 !important;
    --mud-palette-primary-text: #ffffff !important;
    --mud-palette-primary-darken: #0b3c2a !important;
    --mud-palette-primary-lighten: #25795a !important;
    --mud-palette-primary-hover: #daeae4 !important;
    /* --mud-palette-primary: #06244D !important;
    --mud-palette-primary-text: #ffffff !important;
    --mud-palette-primary-darken: #03142e !important;
    --mud-palette-primary-lighten: #0f3d7e !important;
    --mud-palette-primary-hover: #F1F2F8 !important; */
    --mud-palette-secondary: #d8b141 !important;
    --mud-palette-secondary-text: var(--mud-palette-primary) !important;
    --mud-palette-secondary-darken: #927621 !important;
    --mud-palette-secondary-lighten: #efcb5f !important;
    --mud-palette-secondary-hover: #ebe5d5 !important;
    /* --mud-palette-secondary: #C82234 !important;
    --mud-palette-secondary-text: #ffffff !important;
    --mud-palette-secondary-darken: #931120 !important;
    --mud-palette-secondary-lighten: #e73b4f !important;
    --mud-palette-secondary-hover: #f5dbde !important; */
    --mud-palette-tertiary: #4f697e !important;
    --mud-palette-tertiary-rgb: 69, 80, 89 !important;
    --mud-palette-tertiary-text: #ffffff !important;
    --mud-palette-tertiary-darken: #212d37 !important;
    --mud-palette-tertiary-lighten: #567c9a !important;
    --mud-palette-tertiary-hover: #D8E7F3 !important;
    --mud-palette-info: rgba(33, 150, 243, 1) !important;
    --mud-palette-info-text: rgba(255, 255, 255, 1) !important;
    --mud-palette-info-darken: rgb(12, 128, 223) !important;
    --mud-palette-info-lighten: rgb(71, 167, 245) !important;
    --mud-palette-info-hover: rgba(33, 150, 243, 0.058823529411764705) !important;
    --mud-palette-success: rgba(0, 200, 83, 1) !important;
    --mud-palette-success-text: rgba(255, 255, 255, 1) !important;
    --mud-palette-success-darken: rgb(0, 163, 68) !important;
    --mud-palette-success-lighten: rgb(0, 235, 98) !important;
    --mud-palette-success-hover: rgba(0, 200, 83, 0.058823529411764705) !important;
    --mud-palette-warning: rgba(255, 152, 0, 1) !important;
    --mud-palette-warning-text: rgba(255, 255, 255, 1) !important;
    --mud-palette-warning-darken: rgb(214, 129, 0) !important;
    --mud-palette-warning-lighten: rgb(255, 167, 36) !important;
    --mud-palette-warning-hover: rgba(255, 152, 0, 0.058823529411764705) !important;
    --mud-palette-error: rgba(244, 67, 54, 1) !important;
    --mud-palette-error-text: rgba(255, 255, 255, 1) !important;
    --mud-palette-error-darken: rgb(242, 28, 13) !important;
    --mud-palette-error-lighten: rgb(246, 96, 85) !important;
    --mud-palette-error-hover: rgba(244, 67, 54, 0.058823529411764705) !important;
    --mud-palette-dark: rgba(66, 66, 66, 1) !important;
    --mud-palette-dark-text: rgba(255, 255, 255, 1) !important;
    --mud-palette-dark-darken: rgb(46, 46, 46) !important;
    --mud-palette-dark-lighten: rgb(87, 87, 87) !important;
    --mud-palette-dark-hover: rgba(66, 66, 66, 0.058823529411764705) !important;

    --icom-light: #f8f9fa;
    --icom-dark: #171819;

    --icom-error-light: color-mix(in srgb, var(--icom-error) 10%, transparent);
    /* --icom-primary: #06244D;
    --icom-primary-dark: #03142e;
    --icom-primary-light: #F1F2F8;
    --icom-secondary: #C82234;
    --icom-secondary-dark:  #560a13;
    --icom-secondary-light: #f5dbde;
    --icom-tertiary: #D8E7F3;
    --icom-tertiary-dark:  #64788a;
    --icom-tertiary-light: #e7f2fb; */

    /* --icom-header-default-nav-color: var(--icom-primary);
    --icom-header-default-nav-bg-color: white; */

    --font-heading: "Colatera Soft", sans-serif;
    --font-body: "Lexend Deca", sans-serif;

    --box-shadow-1:
        0 0 1rem rgba(0, 0, 0, .2),
        0 0 2rem rgba(0, 0, 0, .1);

    --box-shadow-2:
        0 0 .5rem rgba(0, 0, 0, .1),
        0 0 1rem rgba(0, 0, 0, .05);
}

::selection {
    background-color: var(--icom-light);
    color: var(--icom-primary);
}

@font-face {
    font-family: "Colatera Soft";
    font-style: normal;
    font-weight: 400;
    src: url("https://wienerwaldmenu.blob.core.windows.net/menucard/ColateraSoft.ttf") format("truetype");
}

/* h1, h2, h3, h4, h5, h6 */
body,
html {
    font-family: var(--font-body);
    /* --mud-typography-default-size: 1rem !important; */
    background-color: var(--icom-secondary-light);
    background-image: url("/img/background/background-elements-yellow.svg");
    background-size: 60%;
    background-repeat: repeat;
    background-position: center;
    color: var(--icom-primary);
    margin: 0;
    padding: 0;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--font-heading) !important;
    font-weight: 400 !important;
    line-height: 1.1;
    text-wrap: pretty;
    margin-bottom: .5em;
    text-transform: uppercase;
}

h1, .h1 {
    font-size: 1.5rem;
    font-size: clamp(1.5rem, 5vw + 1rem, 4rem);
    line-height: 1;
}

h2, .h2 {
    font-size: 1.2rem;
    font-size: clamp(1.2rem, 2vw + 1rem, 2rem);
    line-height: 1.2;
}

[class="mud-input"] {
    font-family: var(--mud-typography-default-family);
}

img {
    width: 100%;
    max-width: 100%;
    display: block;
}

p, .p
ul, ol, .ul, .ol,
li, .li {
    font-size: 1.2rem;
    font-weight: 300;
    text-wrap: pretty;
    line-height: 1.3;
}

p, .p {
    & a {
        text-decoration: underline;
    }
}

.no-underline,
.no-underline a{
    text-decoration: none !important;
}

ul.wiener-list,
ol.wiener-list,
.wiener-list ul,
.wiener-list ol {
    list-style-type: none;
    list-style-position: unset;
    margin-left: 2em;
    padding: 0;

    & li {
        position: relative;
        padding-left: 0;
        margin-bottom: .5em;
        &::before {
            content: "\f7fb";
            font-family: "Font Awesome 6 Pro";
            font-weight: 900;
            display: inline-block;
            margin-left: -1.5em;
            margin-bottom: -0.125em;
            width: 1.5em;
            height: 1em;
            padding-right: .5em;
        }
    }
}


.icom-btn {
    font-size: clamp(.75rem, 3vw, 1.4rem);
    font-family: var(--font-heading);
}

.upper {
    text-transform: uppercase;
}
.lower {
    text-transform: lowercase;
}

#header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 5;
    color: var(--icom-secondary);
    display: flex;
    justify-content: center;
    --toprow-height: 5rem;

    &::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: var(--toprow-height);
        background-color: var(--icom-primary);
        box-shadow: 
            0 0 1rem rgba(0, 0, 0, .2), 
            0 0 2rem rgba(0, 0, 0, .1);
    }

    & a,
    & button {
        color: inherit;
    }
    
    & > .inner {
        position: relative;
        z-index: 1;
        width: 100%;
        display: flex;
        align-items: flex-start;
        max-width: 1400px;
        & #nav-logo {
            padding: 1rem;
            background-color: var(--icom-secondary-light);
            box-shadow: 
                0 0 1rem rgba(0, 0, 0, .2), 
                0 0 2rem rgba(0, 0, 0, .1);
            & img {
                width: 100px;
                height: auto;
            }
        }
        &  #header-toprow {
            width: 100%;
            height: var(--toprow-height);
            background-color: var(--icom-primary);
            display: flex;
            align-items: center;
            justify-content: space-between;

            & #header-restaurant-name {
                margin-left: 2rem;
                font-family: var(--font-heading);
                color: var(--icom-secondary-light);
                text-transform: uppercase;
                font-size: 1.2rem;
                font-weight: 300;
            }


            & #nav-toggler {
                transition: .2s ease-in-out;
                font-weight: 400 !important;
                padding: .5em;
                font-size: 1.5rem;
                display: none;
                margin-left: auto;
                &:hover {
                    color: var(--icom-primary) !important;
                    background-color: var(--icom-secondary);
                }

                @media(max-width: 850px) {
                    display: block;
                }
            }

            & #header-nav {

                @media(max-width: 858px) {
                    transform: translateY(-100%);
                    position: fixed;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100%;
                    overflow-y: scroll;
                    display: flex;
                    padding: 2rem;
                    background-color: var(--icom-primary);
                    background-image: url("/img/background/background-grid-yellow.svg");
                    background-blend-mode: soft-light;
                    background-repeat: no-repeat;
                    background-position: center;
                    background-size: cover;
                    transition: .3s ease-in-out;

                    & #header-nav-ul {
                        display: none;
                    }

                    &.show {
                        transform: translateY(0);
                        & #header-nav-ul {
                            display: flex;
                        }
                    }

                    & > * {
                        margin: auto;
                    }
                }
            }
            
            & #header-nav-ul {
                display: flex;
                align-items: center;
                justify-content: center;
                list-style: none;
                padding: 0;
                margin: 0;
                font-size: 1.2rem;
                font-weight: 400;
                text-transform: uppercase;
                font-family: var(--font-heading);
                width: 100%;
                
                & a {
                    padding: .5em 1em;
                    text-decoration: none;
                    transition: .2s ease-in-out;
                    display: block;
                    position: relative;
                    &:hover {
                        color: var(--icom-primary) !important;
                        background-color: var(--icom-secondary);
                    }

                    
                    &.active {
                        &::after {
                            content: "";
                            position: absolute;
                            bottom: 0;
                            left: 1em;
                            width: calc(100% - 2em);
                            height: .25rem;
                            background-color: var(--icom-secondary);
                        }
                    }
                }
            
                @media(max-width: 850px) {
                    flex-direction: column;
                    gap: 1rem;
                    font-size: 1.5rem;
                }
            }
        }
    }
}


#footer {
    margin-top: auto;
    background-color: var(--icom-primary);
    color: var(--icom-secondary);

    & p {
        font-size: inherit;
    }

    & a {
        color: inherit;
        text-decoration: none;
    }

    & > .inner {
        display: grid;
        grid-template-columns: auto 300px;
        min-height: 250px;

        @media(max-width: 768px) {
            grid-template-columns: 1fr;
        }

        & .footer-text {
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            gap: 1rem;
            padding: 2rem;
            text-align: center;

            & > * {
                margin: 0;
            }
        }

        & .footer-logo {
            padding: 2rem;
            display: flex;
            background-color: var(--icom-secondary-light);

            & img {
                width: 150px;
                height: auto;
                margin: auto;
            }
        }
    }
}

.primary-elements {
    background-color: var(--icom-primary);
    color: var(--icom-secondary);
    background-image: url("/img/background/background-elements-yellow.svg");
    background-size: 60%;
    background-repeat: repeat;
    background-position: center;
    background-blend-mode: soft-light;    
}

*:is(:not(input, textarea)):focus-visible {
    outline: 2px solid red !important;
    outline-offset: 2px !important;
}

footer a:hover {
    color: currentColor !important;
    text-decoration: underline;
}

.info-box {
    background-color: var(--icom-secondary);
    padding: .5rem;
    text-align: center;
    color: var(--icom-primary);

    & > .inner {
        padding: 1rem;
        &.info-box-border {
            border: .25rem dashed var(--icom-primary);
        }
    }

    & .info-box-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        align-content: center;
        justify-items: center;
        gap: 1rem;
        max-width: max(1200px, 80vw);
        margin: auto;
        & > * {
            margin: 0;
        }
    }
    
    & .info-box-icon {
        font-size: 2rem;
    }
}




.wiener-hero-boxes {
    display: grid;
    grid-template-columns: auto min(900px, 66vw) min(500px, 33vw) auto;

    & > * {
        min-height: 300px;
    }

    & > .left {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        grid-column: 2 / 3;
        & > .inner {
            padding: 2rem;
            width: 100%;
        }
    }

    & > .right {
        grid-column: 3 / 5;
        background-position: center;
        background-size: cover;
    }

    @media(max-width: 768px) {
        grid-template-columns: 1fr;
        & > .left,
        & > .right {
            grid-column: 1 / -1;
        }
        & > .left {
            justify-content: center;
            order: 2;
        }
        flex-direction: column-reverse;
    }

}

.wiener-boxes {
    --columns: 1.2fr 1fr;
    display: grid;
    grid-template-columns: var(--columns);
    color: var(--icom-secondary);
    background-color: var(--icom-primary);

    &.secondary {
        color: var(--icom-primary);
        background-color: var(--icom-secondary);
    }

    & > * {
        min-height: 300px;
    }

    & > .left {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        & > .inner {
            padding: clamp(1rem, 3vw + 1rem, 4rem);
            width: 100%;
        }
    }

    & > .right {
        background-position: center;
        background-size: cover;
    }

    &.reverse {
        & > .left {
            order: 2;
        }
        & > .right {
            order: 1;
        }
    }

    @media(max-width: 768px) {
        grid-template-columns: 1fr;
        & > .left,
        & > .right {
            grid-column: 1 / -1;
        }
        & > .left {
            justify-content: center;
            order: 2;
        }
        flex-direction: column-reverse;
    }

}

.wiener-boxes3 {
    --columns: 1fr 2fr 1fr;
    display: grid;
    grid-template-columns: var(--columns);
    color: var(--icom-secondary);
    background-color: var(--icom-primary);

    &.secondary {
        color: var(--icom-primary);
        background-color: var(--icom-secondary);
    }

    & > * {
        min-height: 400px;
    }

    & > .middle {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        & > .inner {
            padding: clamp(1rem, 3vw + 1rem, 4rem);
            width: 100%;
        }
    }

    & > .right,
    & > .left {
        background-position: center;
        background-size: cover;
    }

    @media(max-width: 1024px) {
        grid-template-columns: 1fr;
        & > .middle {
            justify-content: center;
        }
        flex-direction: column-reverse;
    }

}

.wiener-section-splitter {
    --columns: auto 400px;
    display: grid;
    grid-template-columns: var(--columns);
    color: var(--icom-secondary);
    background-color: var(--icom-primary);
    background-image: url("/img/background/background-grid2-yellow.svg");
    background-blend-mode: soft-light;
    background-size: 1200px;
    &.secondary {
        color: var(--icom-primary);
        background-color: var(--icom-secondary);
        background-image: url("/img/background/background-grid2-green.svg");
    }

    & > * {
        min-height: 300px;
    }

    & > .left {
        display: flex;
        align-items: center;
        justify-content: center;
        & > .inner {
            padding: clamp(2rem, 4vw + 1rem, 4rem);
            max-width: 100%;
            width: auto;
        }
    }

    & > .right {
        background-position: center;
        background-size: cover;
    }

    &.reverse {
        & > .left {
            order: 2;
        }
        & > .right {
            order: 1;
        }
    }

    @media(max-width: 768px) {
        grid-template-columns: 1fr;
        & > .left,
        & > .right {
            grid-column: 1 / -1;
        }
        & > .left {
            justify-content: center;
            order: 2;
        }
        flex-direction: column-reverse;
    }

}


.wiener-news {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 2rem;

    & time {
        font-size: inherit;
    }

    & .wiener-news-item {
        display: flex;
        flex-direction: column;
        background-color: var(--icom-primary);
        color: var(--icom-secondary);

        & .wiener-news-item-image {
            width: 100%;
            aspect-ratio: 16 / 9;
            object-fit: cover;
            object-position: center;
        }

        & .wiener-news-item-content {
            padding: 2rem;
            display: flex;
            flex-direction: column;
            gap: 1rem;

            & .wiener-news-item-meta {
                font-size: 1rem;
                display: flex;
                flex-wrap: wrap;
                justify-content: space-between;
            }

            & > * {
                margin: 0;
            }
        }
    }
}

#body {
    .icom-post-item-full-dialog {
        background-color: transparent;
    }
    & .icom-post-item-full-dialog-background {
        background-color: var(--icom-primary);
        background-image: url("/img/background/background-elements-yellow.svg");
        background-blend-mode: soft-light;
        background-size: 1200px;
        opacity: 1;
    }
    
    & .icom-post-item-full-dialog-content {
        border: none;
        background-color: var(--icom-secondary-light);
        color: var(--icom-primary);
    }

    & .icom-post-item-full-dialog-content-close {
        & button {
            color: var(--icom-secondary);
            background-color: var(--icom-primary);
            
        }
    }

    & .icom-btn-style-outlined {
        border-width: 3px;
    }

    & .mud-input-root-filled {
        mask-image: unset !important;
        font-size: 1.2rem;
        padding: 1em;
        background-color: rgba(0, 0, 0, 0.1) !important;
    }
    & .mud-input-filled {
        background-color: transparent !important;
    }
}



.wiener-jobs {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 2rem;

    & .wiener-jobs-item {
        display: flex;
        flex-direction: column;
        background-color: var(--icom-primary);
        color: var(--icom-secondary);
        /* border-top-left-radius: 999px;
        border-top-right-radius: 999px; */
        overflow: hidden;
        box-shadow: 0 0 1rem rgba(0, 0, 0, .2), 0 0 2rem rgba(0, 0, 0, .1);

        & .wiener-jobs-item-image {
            width: 100%;
            aspect-ratio: 1 / 1;
            object-fit: cover;
            object-position: center;
        }

        & .wiener-jobs-item-content {
            position: relative;
            padding: 1rem;
            display: flex;
            flex-direction: column;
            gap: 1rem;

            & .wiener-jobs-item-shop {
                /* position: absolute; */
                /* width: auto; */
                /* left: 0; */
                /* bottom: 100%; */
                width: 100%;
                display: flex;
                align-items: center;
                justify-content: center;
                margin-top: -2rem;
                & > .inner {
                    width: auto;
                    max-width: 100%;
                    padding: .5rem 1rem;
                    background-color: var(--icom-secondary-light);
                    color: var(--icom-primary);
                    text-align: center;
                }
            }
        }

    }
}


.wiener-job {

    & .wiener-job-hero {
        background-color: var(--icom-primary);
        background-image: url("/img/background/background-elements-yellow.svg");
        background-blend-mode: soft-light;
        background-size: 1200px;
        color: var(--icom-secondary);
        display: flex;
        padding-top: 8rem;
        padding-bottom: 4rem;

        & > .inner {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 2rem;
            padding: 2rem;
            text-align: center;
            width: 100%;
            max-width: 800px;
            margin: auto;

            & > * {
                margin: 0;
            }

            & .wiener-job-title-overline {
                font-size: 1.2rem;
                font-weight: 400;
            }

            & .wiener-job-shop {
                background-color: var(--icom-secondary-light);
                color: var(--icom-primary);
                padding: .5rem 1rem;
            }

            & .wiener-job-hero-image {
                width: 100%;
                max-width: 300px;
                height: auto;
                aspect-ratio: 1 / 1;
                object-fit: cover;
                object-position: center;
                border-radius: 999px;
                border: .25rem solid var(--icom-secondary);
            }
        }
    }

    & .wiener-job-content {
        width: 100;
        max-width: 800px;
        margin: auto;
        margin-top: 4rem;
        margin-bottom: 4rem;
        padding: 2rem;
        color: var(--icom-primary);

        li::before {
            color: var(--icom-secondary);
        }

        h1, h2, h3, h4, h5, h6 {
            /* font-weight: 400; */
            margin-top: 2em;
            display: flex;
            align-items: flex-end;
        }

        & img {
            display: inline-block;
            width: auto;
            height: 1.5em;
            margin-right: .5em;
        }

    }

    & .wiener-job-cta-section {
        display: flex;
        padding: 4rem 2rem;
        background-color: var(--icom-primary);
        color: var(--icom-secondary);

        & p a {
            color: var(--icom-secondary);
        }

        & > .inner {
            display: grid;
            grid-template-columns: 1fr 1fr;
            align-items: center;
            gap: 2rem;
            width: 100%;
            max-width: 1200px;
            margin: auto;

            & > .left {
                text-align: left;
                display: flex;
                flex-direction: column;
                justify-content: center;
                gap: 1rem;

                & > * {
                    margin: 0;
                }
            }

            & > .right {}
        }
    }
}

.wiener-topic-box-wrapper {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 2rem;

    @media(max-width: 768px) {
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    }

    & .wiener-topic-box {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
        background-color: var(--icom-primary);
        color: var(--icom-secondary);
        background-image: url("/img/background/background-grid2-yellow.svg");
        background-blend-mode: soft-light;
        background-size: 1200px;

        & > .content {
            padding: 2rem;
        }

        & > .wiener-topic-box-image {
            width: 100%;
            height: auto;
            aspect-ratio: 1 / 1;
            object-fit: cover;
            object-position: center;
        }
            
    }
}
























/* ------ */
/* ------ */
/* ------ */
/* ------ */

.fade-in {
    opacity: 0;
    transform: translateY(4rem);
}

.scale-in {
    opacity: 0;
    transform: scale(0.7);
}





























