/*
=========================================================
 VELVET TABLE — MATERIAL SYSTEM V4

 Dark brushed green metal
 Warm brass
 Smoked glass highlights

 Single top-level visual layer.
 No !important.
=========================================================
*/


body.mokka-demo {

    --vt-green-1000:#030a07;
    --vt-green-950:#06110c;
    --vt-green-900:#081a12;
    --vt-green-850:#0c2419;
    --vt-green-800:#113025;
    --vt-green-750:#173c2d;
    --vt-green-700:#1e4937;

    --vt-gold-900:#73501f;
    --vt-gold-800:#916a31;
    --vt-gold-700:#ad8447;
    --vt-gold-600:#cba45f;
    --vt-gold-500:#dfc07d;
    --vt-gold-400:#efd59c;

    --vt-cream:#f2e7d0;

    --vt-edge:
        rgba(225,190,120,.32);

    --vt-highlight:
        rgba(255,243,210,.13);

    --vt-shadow:
        0 22px 55px rgba(0,0,0,.22);

    --vt-nav-size:
        .78rem;

}


/* =========================================================
   MATERIAL BACKGROUND
   ========================================================= */

/*
 * Deutlich sichtbarer Metall-Look:
 * mehrere Grünabstufungen statt einer flachen Fläche.
 */

body.mokka-demo .mk-header,
body.mokka-demo .vt-review-strip-v2,
body.mokka-demo .mk-hero-copy,
body.mokka-demo .mk-atmosphere-copy,
body.mokka-demo .mk-hours,
body.mokka-demo .mk-gallery,
body.mokka-demo .mk-final {

    background-color:
        var(--vt-green-900);

    background-image:

        radial-gradient(
            ellipse at 18% -20%,
            rgba(238,205,139,.10) 0%,
            transparent 37%
        ),

        radial-gradient(
            ellipse at 82% 125%,
            rgba(74,132,100,.16) 0%,
            transparent 39%
        ),

        linear-gradient(
            112deg,
            #06140e 0%,
            #143428 16%,
            #091d15 29%,
            #1a4131 43%,
            #0a2117 56%,
            #214b39 72%,
            #0b2118 84%,
            #06160f 100%
        ),

        repeating-linear-gradient(
            90deg,
            rgba(255,255,255,.018) 0px,
            rgba(255,255,255,.018) 1px,
            rgba(0,0,0,.018) 1px,
            rgba(0,0,0,.018) 3px
        );

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.045),
        inset 0 -1px 0 rgba(0,0,0,.35);

}


/* =========================================================
   HEADER
   ========================================================= */

body.mokka-demo .mk-header {

    position:
        relative;

    overflow:
        hidden;

    border-bottom:
        1px solid
        rgba(221,185,114,.30);

    box-shadow:
        0 18px 42px rgba(0,0,0,.16),
        inset 0 1px 0 rgba(255,255,255,.045);

}


/* sichtbarer Metallreflex */

body.mokka-demo .mk-header::before {

    content:
        "";

    position:
        absolute;

    inset:
        0;

    pointer-events:
        none;

    background:
        linear-gradient(
            110deg,
            rgba(255,255,255,.055) 0%,
            transparent 21%,
            transparent 55%,
            rgba(220,178,97,.055) 74%,
            transparent 100%
        );

}


body.mokka-demo .mk-header::after {

    content:
        "";

    position:
        absolute;

    left:
        3%;

    right:
        3%;

    bottom:
        0;

    height:
        1px;

    pointer-events:
        none;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(239,207,142,.52),
            transparent
        );

}


body.mokka-demo .mk-header > * {

    position:
        relative;

    z-index:
        2;

}


/* =========================================================
   NAVIGATION TYPOGRAPHY
   exakt dieselbe Größe wie CTA
   ========================================================= */

body.mokka-demo .mk-nav a {

    font-size:
        var(--vt-nav-size);

    font-weight:
        900;

    letter-spacing:
        .09em;

    line-height:
        1;

}


body.mokka-demo .mk-reserve-top {

    font-size:
        var(--vt-nav-size);

    font-weight:
        900;

    letter-spacing:
        .09em;

    line-height:
        1;

}


/* =========================================================
   VELVET TABLE BRAND
   ========================================================= */

body.mokka-demo .mk-brand {

    color:
        var(--vt-gold-500);

    text-shadow:
        0 1px 0 rgba(255,245,219,.13),
        0 7px 22px rgba(0,0,0,.24);

}


/* =========================================================
   REVIEW STRIP
   ========================================================= */

body.mokka-demo .vt-review-strip-v2 {

    position:
        relative;

    overflow:
        hidden;

    border-top:
        1px solid rgba(218,180,106,.19);

    border-bottom:
        1px solid rgba(224,188,115,.31);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.04),
        0 11px 28px rgba(0,0,0,.14);

}


body.mokka-demo .vt-review-strip-v2::before {

    content:
        "";

    position:
        absolute;

    inset:
        0;

    pointer-events:
        none;

    background:

        linear-gradient(
            105deg,
            rgba(255,247,219,.055),
            transparent 22%,
            transparent 58%,
            rgba(214,174,99,.06),
            transparent 87%
        ),

        repeating-linear-gradient(
            91deg,
            transparent 0px,
            transparent 3px,
            rgba(255,255,255,.016) 4px,
            transparent 5px
        );

}


body.mokka-demo .vt-review-strip-v2__inner {

    position:
        relative;

    z-index:
        2;

}


/* Sterne metallischer */

body.mokka-demo .vt-review-strip-v2__stars {

    color:
        var(--vt-gold-500);

    text-shadow:
        0 1px 0 rgba(255,244,213,.28),
        0 3px 10px rgba(0,0,0,.26);

}


/* =========================================================
   MADE FOR SLOW DAYS
   rechte große Grünfläche
   ========================================================= */

body.mokka-demo .mk-atmosphere-copy {

    position:
        relative;

    overflow:
        hidden;

    background-image:

        radial-gradient(
            circle at 75% 10%,
            rgba(230,194,126,.09),
            transparent 30%
        ),

        linear-gradient(
            118deg,
            #07170f 0%,
            #16392a 18%,
            #0b2117 34%,
            #214a38 53%,
            #0c261b 69%,
            #1b4231 83%,
            #071810 100%
        ),

        repeating-linear-gradient(
            90deg,
            rgba(255,255,255,.018) 0,
            rgba(255,255,255,.018) 1px,
            transparent 1px,
            transparent 4px
        );

    box-shadow:
        inset 1px 0 0 rgba(231,199,136,.09),
        inset 0 1px 0 rgba(255,255,255,.035),
        inset 35px 0 80px rgba(0,0,0,.08);

}


body.mokka-demo .mk-atmosphere-copy::before {

    content:
        "";

    position:
        absolute;

    width:
        70%;

    height:
        160%;

    top:
        -30%;

    left:
        16%;

    pointer-events:
        none;

    transform:
        rotate(19deg);

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,246,215,.045),
            transparent
        );

}


body.mokka-demo .mk-atmosphere-copy > * {

    position:
        relative;

    z-index:
        2;

}


/* =========================================================
   HOURS
   ========================================================= */

body.mokka-demo .mk-hours {

    border-top:
        1px solid rgba(220,184,111,.27);

    border-bottom:
        1px solid rgba(220,184,111,.27);

}


body.mokka-demo .mk-hours-entry {

    background:
        rgba(3,15,10,.13);

    border-left-color:
        rgba(219,183,110,.20);

}


/* =========================================================
   DARK GALLERY / FINAL SECTIONS
   ========================================================= */

body.mokka-demo .mk-gallery,
body.mokka-demo .mk-final {

    border-top:
        1px solid rgba(218,181,110,.17);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.025);

}


/* =========================================================
   METAL CTA BUTTONS
   ========================================================= */

body.mokka-demo .mk-reserve-top,
body.mokka-demo .vt-review-strip-v2__action a,
body.mokka-demo .mk-btn,
body.mokka-demo .vt-menu-footer > a {

    position:
        relative;

    overflow:
        hidden;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        13px;

    border:
        1px solid
        rgba(221,183,109,.64);

    color:
        var(--vt-gold-400);

    background-image:
        linear-gradient(
            110deg,
            #081b13 0%,
            #1b392b 20%,
            #0b2118 39%,
            #264635 58%,
            #0c241a 74%,
            #132e22 100%
        );

    box-shadow:
        inset 0 1px 0 rgba(255,244,213,.10),
        inset 0 -1px 0 rgba(0,0,0,.42),
        0 8px 22px rgba(0,0,0,.14);

    text-decoration:
        none;

    transition:
        transform .20s ease,
        border-color .20s ease,
        box-shadow .20s ease;

}


body.mokka-demo .mk-reserve-top::before,
body.mokka-demo .vt-review-strip-v2__action a::before,
body.mokka-demo .mk-btn::before,
body.mokka-demo .vt-menu-footer > a::before {

    content:
        "";

    position:
        absolute;

    inset:
        0;

    pointer-events:
        none;

    transform:
        translateX(-90%);

    background:
        linear-gradient(
            108deg,
            transparent 15%,
            rgba(255,241,205,.14) 43%,
            transparent 68%
        );

    transition:
        transform .55s ease;

}


body.mokka-demo .mk-reserve-top:hover,
body.mokka-demo .vt-review-strip-v2__action a:hover,
body.mokka-demo .mk-btn:hover,
body.mokka-demo .vt-menu-footer > a:hover {

    transform:
        translateY(-1px);

    border-color:
        rgba(240,207,142,.88);

    box-shadow:
        inset 0 1px 0 rgba(255,244,213,.15),
        inset 0 -1px 0 rgba(0,0,0,.42),
        0 13px 28px rgba(0,0,0,.20);

}


body.mokka-demo .mk-reserve-top:hover::before,
body.mokka-demo .vt-review-strip-v2__action a:hover::before,
body.mokka-demo .mk-btn:hover::before,
body.mokka-demo .vt-menu-footer > a:hover::before {

    transform:
        translateX(90%);

}


/* =========================================================
   CSS-PFEILE
   keine Emojis
   ========================================================= */

body.mokka-demo .vt-css-arrow {

    position:
        relative;

    display:
        inline-block;

    flex:
        0 0 auto;

    width:
        14px;

    height:
        14px;

    margin:
        0;

    padding:
        0;

    font-size:
        0;

    line-height:
        0;

    color:
        currentColor;

}


/* Schaft */

body.mokka-demo .vt-css-arrow::before {

    content:
        "";

    position:
        absolute;

    width:
        10px;

    height:
        1.6px;

    left:
        1px;

    top:
        7px;

    background:
        currentColor;

    border-radius:
        1px;

    transform:
        rotate(-45deg);

}


/* Spitze */

body.mokka-demo .vt-css-arrow::after {

    content:
        "";

    position:
        absolute;

    width:
        6px;

    height:
        6px;

    right:
        1px;

    top:
        1px;

    border-top:
        1.6px solid currentColor;

    border-right:
        1.6px solid currentColor;

}


/* =========================================================
   MENU FILTER — BRUSHED BRASS
   ========================================================= */

body.mokka-demo .vt-main-filter {

    position:
        relative;

    overflow:
        hidden;

    background:
        linear-gradient(
            145deg,
            #f4ecdc,
            #dbccb0
        );

    border:
        1px solid
        rgba(113,82,39,.22);

    color:
        #153025;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.72),
        0 5px 13px rgba(30,42,35,.05);

}


body.mokka-demo .vt-main-filter.is-active {

    color:
        #102118;

    border-color:
        rgba(120,82,31,.60);

    background:

        linear-gradient(
            110deg,
            #765124 0%,
            #ad8243 13%,
            #d6b36f 26%,
            #f0d89c 37%,
            #b58a4b 51%,
            #dfbf7c 68%,
            #9b7339 84%,
            #765124 100%
        );

    box-shadow:
        inset 0 1px 0 rgba(255,248,219,.62),
        inset 0 -1px 0 rgba(68,42,12,.29),
        0 11px 24px rgba(44,34,20,.13);

}


body.mokka-demo .vt-main-filter.is-active::after {

    content:
        "";

    position:
        absolute;

    inset:
        0;

    pointer-events:
        none;

    opacity:
        .25;

    background:
        repeating-linear-gradient(
            90deg,
            transparent 0px,
            transparent 2px,
            rgba(255,255,255,.16) 3px,
            transparent 4px
        );

}


/* =========================================================
   DRINK SUBFILTER
   ========================================================= */

body.mokka-demo .vt-drink-filter {

    position:
        relative;

    background:
        linear-gradient(
            145deg,
            #eee4d2,
            #d8c7a8
        );

    color:
        #163026;

    border:
        1px solid
        rgba(111,82,42,.22);

}


body.mokka-demo .vt-drink-filter.is-active {

    color:
        #102118;

    background:
        linear-gradient(
            110deg,
            #87602d,
            #c39856 23%,
            #e8ca87 44%,
            #a97e40 68%,
            #caa461
        );

    border-color:
        rgba(125,87,35,.55);

}


/* =========================================================
   PHOTO / MAP LABEL
   ========================================================= */

body.mokka-demo .mk-menu-photo-label,
body.mokka-demo .mk-map-label {

    background:
        linear-gradient(
            105deg,
            #071b12,
            #1a392a 48%,
            #091e15
        );

    color:
        var(--vt-gold-400);

    border:
        1px solid
        rgba(218,178,103,.36);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.05),
        0 9px 25px rgba(0,0,0,.22);

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 1000px) {

    body.mokka-demo {

        --vt-nav-size:
            .76rem;

    }

}


@media (max-width: 700px) {

    /*
     * Die Materialstruktur bleibt auch mobil bestehen.
     * Sie wird NICHT durch flache mobile Farben ersetzt.
     */

    body.mokka-demo .mk-header,
    body.mokka-demo .vt-review-strip-v2,
    body.mokka-demo .mk-hero-copy,
    body.mokka-demo .mk-atmosphere-copy,
    body.mokka-demo .mk-hours,
    body.mokka-demo .mk-gallery,
    body.mokka-demo .mk-final {

        background-image:

            radial-gradient(
                ellipse at 10% -10%,
                rgba(238,205,139,.10),
                transparent 35%
            ),

            linear-gradient(
                112deg,
                #06140e 0%,
                #173b2c 21%,
                #091e15 39%,
                #214a38 61%,
                #0b2218 78%,
                #06160f 100%
            ),

            repeating-linear-gradient(
                90deg,
                rgba(255,255,255,.020) 0px,
                rgba(255,255,255,.020) 1px,
                rgba(0,0,0,.018) 1px,
                rgba(0,0,0,.018) 3px
            );

    }


    body.mokka-demo .vt-css-arrow {

        width:
            13px;

        height:
            13px;

    }

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    body.mokka-demo .mk-reserve-top,
    body.mokka-demo .vt-review-strip-v2__action a,
    body.mokka-demo .mk-btn,
    body.mokka-demo .vt-menu-footer > a {

        transition:
            none;

    }

}