/* ==========================================================
   THE GOLDEN PUB
   Premium Style
========================================================== */

:root{

    --gold:#d6b26b;
    --gold-light:#efd9a0;
    --gold-dark:#8d6833;

    --bg:#140f0b;
    --card:#2a1d13;
    --card2:#342416;

    --text:#f5f2eb;

    --shadow:rgba(0,0,0,.55);

    --radius:24px;

}

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{

    scroll-behavior:smooth;

}

body{

    font-family:"Cormorant Garamond",serif;

    color:var(--text);

    background:#120d09;

    min-height:100vh;

    overflow-x:hidden;

    position:relative;

}

/* ==========================================================
   Hintergrund
========================================================== */

body::before{

    content:"";

    position:fixed;

    inset:0;

    background:
        linear-gradient(rgba(15,10,7,.84),rgba(20,12,8,.94)),
        url("assets/background.jpg");

    background-size:cover;

    background-position:center;

    z-index:-3;

}

body::after{

    content:"";

    position:fixed;

    inset:0;

    background:
        radial-gradient(circle at center,
        transparent 20%,
        rgba(0,0,0,.55) 100%);

    z-index:-2;

}

/* ==========================================================
   Overlay
========================================================== */

.background-overlay{

    position:fixed;

    inset:0;

    pointer-events:none;

    background:

    linear-gradient(to bottom,

    rgba(255,220,150,.03),

    transparent 20%,

    transparent 80%,

    rgba(0,0,0,.25));

}

/* ==========================================================
   Header
========================================================== */

header{

    text-align:center;

    padding:70px 20px 50px;

}

.logo{

    animation:fadeDown 1.2s ease;

}

.logo h1{

font-size:82px;

font-family:"Cinzel",serif;

background:

linear-gradient(

180deg,

#fff5d2,

#f1d391,

#b8873f,

#f7dfa8

);

-webkit-background-clip:text;

-webkit-text-fill-color:transparent;

text-shadow:

0 1px 0 #fff,

0 2px 5px rgba(0,0,0,.6);

}

.logo p{

font-size:30px;

letter-spacing:14px;

text-transform:uppercase;

color:#d8b97c;

}

/* ==========================================================
   GRID
========================================================== */



/*.menu-grid{

    width:min(1400px,92%);
    margin:auto;

    display:grid;

    grid-template-columns:
        repeat(auto-fit,minmax(320px,1fr));

    gap:35px;

    padding-bottom:90px;

}*/

.menu-card:nth-child(1) {
    grid-area: beer;
}

.menu-card:nth-child(2) {
    grid-area: whisky;
}

.menu-card:nth-child(3) {
    grid-area: cocktails;
}

.menu-card:nth-child(4) {
    grid-area: food;
}

.menu-card:nth-child(5) {
    grid-area: cider;
}

.menu-grid {

    width: min(1400px, 92%);
    margin: auto;

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    grid-template-areas:
        "beer whisky cocktails"
        "food . cider";

    gap: 35px;

    align-items: start;

    padding-bottom: 90px;

}

.top-row{

    display:grid;

    grid-template-columns:1fr auto 1fr;

    gap:40px;

    align-items:center;

    margin-bottom:60px;

}

.bottom-row{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:35px;

}

.pub-emblem{

	margin: auto;
    text-align:center;

    width:240px;

}

.crest{

    font-size:90px;

    color:var(--gold);

    margin-bottom:20px;

    filter:drop-shadow(0 0 20px rgba(255,215,120,.3));

}

.pub-emblem h3{

    font-family:"Cinzel";

    color:var(--gold-light);

    font-size:34px;

    margin-bottom:10px;

}

.pub-emblem p{

    letter-spacing:6px;

    color:#bfa06a;

}



/* ==========================================================
   Karten
========================================================== */

.menu-card{



    position:relative;

    overflow:hidden;

    background:

    linear-gradient(

    180deg,

    rgba(58,38,21,.95),

    rgba(35,23,14,.95));

    border-radius:28px;

    padding:35px;

    border:

3px solid #d5b06d;

outline:

1px solid rgba(255,220,170,.25);

outline-offset:-10px;

    box-shadow:

    0 18px 40px rgba(0,0,0,.45),

    inset 0 1px 0 rgba(255,255,255,.08),

    inset 0 -10px 30px rgba(0,0,0,.18);

    transition:.35s;
	
clip-path:polygon(

0 18px,
18px 0,

calc(100% - 18px) 0,

100% 18px,

100% calc(100% - 18px),

calc(100% - 18px) 100%,

18px 100%,

0 calc(100% - 18px)

);

    background:

    linear-gradient(
        rgba(58,38,21,.96),
        rgba(37,24,15,.96)
    ),

    url("assets/texture.webp");

    background-size:cover;

}

}
.menu-card::before{

content:"";

position:absolute;

inset:12px;

border:1px solid rgba(240,210,140,.28);

border-radius:18px;

pointer-events:none;

}

.menu-card::after{

    content:"";

    position:absolute;

    inset:-150%;

    background:
    linear-gradient(
        120deg,
        transparent 35%,
        rgba(255,235,180,.08) 45%,
        rgba(255,255,255,.22) 50%,
        rgba(255,235,180,.08) 55%,
        transparent 65%
    );

    transform:rotate(25deg);

    animation:goldShine 9s linear infinite;

    pointer-events:none;

}

@keyframes goldShine{

    from{

        transform:
        translateX(-140%)
        rotate(25deg);

    }

    to{

        transform:
        translateX(160%)
        rotate(25deg);

    }

}

.menu-card:hover{

transform:

translateY(-8px)

scale(1.02);

border-color:#f1d28a;

box-shadow:

0 25px 55px rgba(0,0,0,.55),

0 0 35px rgba(220,175,70,.18);

}

.menu-card h2{



font-family:"Cinzel",serif;

text-align:center;

font-size:40px;

color:var(--gold-light);

margin-bottom:25px;

letter-spacing:2px;

text-shadow:

0 0 8px rgba(255,220,130,.15);

}

.menu-card h2::before{

content:"❦";

display:block;

font-size:22px;

margin-bottom:12px;

color:#e6c884;

opacity:.8;

}

.menu-card h2:after{

content:"";

display:block;

width:140px;

height:2px;

margin:18px auto;

background:

linear-gradient(

90deg,

transparent,

#e4c47f,

transparent

);

}

.menu-card ul{

list-style:none;

}

.menu-card li{

display:flex;

justify-content:space-between;

align-items:center;

padding:14px 0;

font-size:31px;

border-bottom:

1px solid rgba(255,255,255,.08);

}

.menu-card li:last-child{

border-bottom:none;

}

.menu-card strong{

font-size:30px;

color:var(--gold-light);

}

.icon{

margin-top:30px;

text-align:center;

font-size:55px;

opacity:.85;

filter:drop-shadow(0 0 10px rgba(255,220,100,.25));

}

footer{

padding:60px;

text-align:center;

font-family:"Cinzel",serif;

font-size:28px;

letter-spacing:6px;

color:var(--gold);

opacity:.9;

}

@keyframes fadeDown{

0%{

opacity:0;

transform:

translateY(-40px);

}

100%{

opacity:1;

transform:none;

}

}

@media(max-width:900px){
	
.menu-grid {

    grid-template-columns: repeat(2, 1fr);

    grid-template-areas:
        "beer whisky"
        "cocktails cocktails"
        "food cider";
}

.logo h1{

font-size:52px;

}

.logo p{

font-size:20px;

letter-spacing:5px;

}

.menu-card h2{

font-size:32px;

}

.menu-card li{

font-size:24px;

}

.menu-card strong{

font-size:24px;

}

}

@media(max-width:600px){

.menu-grid {

    grid-template-columns: 1fr;

    grid-template-areas:
        "beer"
        "whisky"
        "cocktails"
        "food"
        "cider";
}

.logo h1{

font-size:38px;

}

.logo p{

font-size:18px;

letter-spacing:4px;

}

.menu-card{

padding:25px;

}

}

.corner{

    position:absolute;

    width:42px;
    height:42px;

    border:2px solid var(--gold);

    opacity:.55;

}

.tl{

    top:12px;
    left:12px;

    border-right:none;
    border-bottom:none;

}

.tr{

    top:12px;
    right:12px;

    border-left:none;
    border-bottom:none;

}

.bl{

    bottom:12px;
    left:12px;

    border-right:none;
    border-top:none;

}

.br{

    bottom:12px;
    right:12px;

    border-left:none;
    border-top:none;

}



.menu-card h2::after{

    content:"";

    display:block;

    width:120px;

    height:2px;

    margin:18px auto 0;

    background:

    linear-gradient(

        transparent,

        var(--gold),

        transparent

    );

}

.menu-card strong{

    color:#f4d28d;

    font-family:"Cinzel",serif;

    letter-spacing:1px;

    min-width:70px;

    text-align:right;

}

.menu-card li{

    transition:.25s;

}

.menu-card li:hover{

    padding-left:10px;

    color:#ffe5af;

}

.logo{

    position:relative;

}

.logo::before{

    content:"";

    position:absolute;

    width:420px;
    height:420px;

    left:50%;
    top:40%;

    transform:translate(-50%,-50%);

    border-radius:50%;

    background:

    radial-gradient(

        rgba(255,210,120,.18),

        transparent 70%

    );

    filter:blur(40px);

    z-index:-1;

}
.fog{

    position:fixed;

    left:0;
    right:0;
    bottom:0;

    height:220px;

    pointer-events:none;

    background:

    radial-gradient(

        ellipse at bottom,

        rgba(255,255,255,.05),

        transparent 70%

    );

    filter:blur(30px);

    animation:fog 16s ease-in-out infinite alternate;

}
@keyframes fog{

    from{

        transform:
        translateX(-40px);

    }

    to{

        transform:
        translateX(40px);

    }

}

footer{

    width:100%;

    padding:60px 20px;

    text-align:center;

    font-family:"Cinzel",serif;

    font-size:28px;

    letter-spacing:6px;

    color:var(--gold);

    border-top:1px solid rgba(214,178,107,.25);

    background:rgba(0,0,0,.25);

    backdrop-filter:blur(5px);

}

.ornament-bottom{

margin-top:30px;

font-size:28px;

text-align:center;

color:#e0bf79;

letter-spacing:10px;

}

.centerpiece{

text-align:center;

padding:60px 0;

}

.crest{

font-size:90px;

color:#d7b36f;

margin-bottom:20px;

filter:drop-shadow(0 0 20px rgba(255,215,120,.25));

}

.centerpiece h3{

font-family:"Cinzel";

font-size:42px;

color:#e3c98d;

margin-bottom:10px;

}

.centerpiece p{

font-size:22px;

letter-spacing:8px;

color:#b8965b;

}

.pub-logo{

    width:260px;

    max-width:100%;

    filter:
        drop-shadow(0 0 18px rgba(255,210,100,.25));

    animation:floatLogo 6s ease-in-out infinite;

}
@keyframes floatLogo{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-8px);

    }

}