/* ==========================================
   IKAROS MODERN STYLE
   PART 1
==========================================*/

/* RESET */

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

html{
    scroll-behavior:smooth;
}

body{

    font-family:Inter,Arial,sans-serif;

    background:#f7f7f7;

    color:#222;

    line-height:1.5;

}


/* HERO */

.hero{

    height:340px;

    background:
    linear-gradient(rgba(0,0,0,.45),rgba(0,0,0,.45)),
    url("pic/beckk.png") center center/cover;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    color:white;

    text-align:center;

}

.hero h1{

    font-size:56px;

    font-weight:800;

}

.hero p{

    margin-top:12px;

    font-size:22px;

}


/* SPEISEKARTE */

.menu{

    max-width:1200px;

    margin:50px auto;

    padding:0 20px;

}

.menu h2{

    text-align:center;

    font-size:42px;

    margin-bottom:45px;

}


/* KATEGORIEN */

.menu-category{

    background:white;

    margin-bottom:35px;

    padding:30px;

    border-radius:22px;

    box-shadow:
    0 8px 25px rgba(0,0,0,.08);

}

.menu-category h3{

    font-size:28px;

    margin-bottom:22px;

    border-left:6px solid #06C167;

    padding-left:15px;

}

.menu-category ul{

    list-style:none;

}


/* SPEISEN */

.menu-item{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:20px;

    padding:22px 0;

    border-bottom:1px solid #ececec;

}

.menu-item:last-child{

    border-bottom:none;

}

.menu-name{

    font-size:22px;

    font-weight:700;

}

.menu-action{

    display:flex;

    align-items:center;

    gap:18px;

}

.menu-price{

    color:#06C167;

    font-size:24px;

    font-weight:800;

}


/* BUTTON */

.cart-btn{

    background:#06C167;

    color:white;

    border:none;

    border-radius:14px;

    padding:14px 22px;

    cursor:pointer;

    font-size:15px;

    font-weight:700;

    transition:.25s;

}

.cart-btn:hover{

    background:#04a95a;

    transform:translateY(-2px);

}


/* REMOVE */

.remove-btn{

    width:28px;

    height:28px;

    border:none;

    border-radius:50%;

    background:#ececec;

    cursor:pointer;

    font-weight:bold;

}

.remove-btn:hover{

    background:#e53935;

    color:white;

}
/* ==========================================
   PART 2 - WARENKORB
==========================================*/

/* FLOATING BUTTON */

#cartBtn{

    position:fixed;

    right:25px;

    bottom:25px;

    z-index:9999;

    background:#06C167;

    color:#fff;

    border:none;

    border-radius:50px;

    padding:16px 24px;

    font-size:18px;

    font-weight:700;

    cursor:pointer;

    box-shadow:0 12px 35px rgba(0,0,0,.20);

    transition:.25s;

}

#cartBtn:hover{

    transform:translateY(-3px);

    background:#04a95a;

}
#cart.show{
    display:block;
}
#cart-count{

    display:inline-flex;

    justify-content:center;

    align-items:center;

    width:24px;

    height:24px;

    margin-left:8px;

    border-radius:50%;

    background:#fff;

    color:#06C167;

    font-size:14px;

    font-weight:bold;

}


/* WARENKORB */

#cart{

    display:none;

    position:fixed;

    top:20px;

    right:20px;

    width:380px;

    max-height:85vh;

    overflow-y:auto;

    background:#fff;

    border-radius:20px;

    box-shadow:0 20px 60px rgba(0,0,0,.20);

    padding:25px;

    z-index:9998;

}

#cart h2{

    text-align:center;

    margin-bottom:25px;

    font-size:28px;

}

#cart ul{

    list-style:none;

}

#cart li{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:10px;

    padding:14px 0;

    border-bottom:1px solid #ececec;

}

#cart li:last-child{

    border-bottom:none;

}

#cart h3{

    margin-top:20px;

    text-align:right;

    color:#06C167;

    font-size:26px;

}


/* BUTTONS */

#clearBtn,
#cart button:not(.remove-btn){

    width:100%;

    margin-top:15px;

    padding:15px;

    border:none;

    border-radius:14px;

    font-size:16px;

    font-weight:bold;

    cursor:pointer;

}

#clearBtn{

    background:#f2f2f2;

    color:#444;

}

#clearBtn:hover{

    background:#e4e4e4;

}

#cart button:not(.remove-btn){

    background:#06C167;

    color:white;

}

#cart button:not(.remove-btn):hover{

    background:#04a95a;

}


/* SCROLLBAR */

#cart::-webkit-scrollbar{

    width:8px;

}

#cart::-webkit-scrollbar-thumb{

    background:#cfcfcf;

    border-radius:20px;

}

#cart::-webkit-scrollbar-thumb:hover{

    background:#06C167;

}
/* ==========================================
   PART 3 - RESPONSIVE + FOOTER
==========================================*/

/* FOOTER */

.footer{

    background:#222;

    color:#fff;

    margin-top:60px;

    padding:50px 20px 20px;

}

.footer-container{

    max-width:1200px;

    margin:auto;

    display:flex;

    justify-content:space-between;

    gap:40px;

}

.footer-column{

    flex:1;

}

.footer-column h4{

    margin-bottom:18px;

    font-size:22px;

}

.footer-column ul{

    list-style:none;

}

.footer-column li{

    margin-bottom:10px;

}

.footer a{

    color:white;

    text-decoration:none;

}

.footer a:hover{

    color:#06C167;

}

.footer-bottom{

    margin-top:40px;

    border-top:1px solid rgba(255,255,255,.15);

    padding-top:20px;

    text-align:center;

}


/* MOBILE */

@media(max-width:768px){

.hero{

    height:240px;

    padding:20px;

}

.hero h1{

    font-size:34px;

}

.hero p{

    font-size:17px;

}

.menu{

    margin:25px auto;

    padding:0 15px;

}

.menu h2{

    font-size:30px;

}

.menu-category{

    padding:20px;

}

.menu-category h3{

    font-size:22px;

}

.menu-item{

    flex-direction:column;

    align-items:flex-start;

    gap:15px;

}

.menu-name{

    font-size:19px;

}

.menu-action{

    width:100%;

    display:flex;

    justify-content:space-between;

    align-items:center;

}

.menu-price{

    font-size:22px;

}

.cart-btn{

    width:100%;

}


/* Floating Button */

#cartBtn{

    left:15px;

    right:15px;

    bottom:15px;

    width:auto;

    border-radius:16px;

    justify-content:center;

}

#cart.show{
    display:block;
}
/* Warenkorb */

#cart{

    top:0;

    left:0;

    right:0;

    bottom:0;

    width:100%;

    max-width:none;

    max-height:100vh;

    border-radius:0;

    padding:20px;

}


/* Footer */

.footer-container{

    flex-direction:column;

    text-align:center;

}

}


/* TABLET */

@media(min-width:769px) and (max-width:1100px){

.menu{

    max-width:900px;

}

.hero h1{

    font-size:44px;

}

#cart{

    width:340px;

}

}


/* GROSSE BILDSCHIRME */

@media(min-width:1400px){

.menu{

    max-width:1350px;

}

.hero{

    height:420px;

}

.hero h1{

    font-size:64px;

}

}
/* ==========================================
   PART 4 - FINISH
==========================================*/

/* SANFTE ANIMATIONEN */

*{
    transition:
        background .25s ease,
        color .25s ease,
        border-color .25s ease,
        box-shadow .25s ease,
        transform .25s ease;
}


/* MENU-KARTEN */

.menu-item{

    position:relative;

    overflow:hidden;

}

.menu-item::after{

    content:"";

    position:absolute;

    left:0;
    bottom:0;

    width:0;
    height:4px;

    background:#06C167;

    transition:width .3s ease;

}

.menu-item:hover::after{

    width:100%;

}

.menu-item:hover{

    border-color:#06C167;

    transform:translateY(-3px);

    box-shadow:0 12px 30px rgba(0,0,0,.12);

}


/* BUTTONS */

.cart-btn:active,
#cart button:active,
#cartBtn:active{

    transform:scale(.96);

}


/* WARENKORB */

#cart{

    animation:cartOpen .25s ease;

}

@keyframes cartOpen{

    from{
        opacity:0;
        transform:translateY(20px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }

}


/* REMOVE BUTTON */

.remove-btn{

    transition:.2s;

}

.remove-btn:hover{

    transform:scale(1.15);

}


/* HERO */

.hero{

    position:relative;

}

.hero::before{

    content:"";

    position:absolute;

    inset:0;

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

}

.hero h1,
.hero p{

    position:relative;

    z-index:2;

}


/* LINKS */

a{

    transition:.25s;

}

a:hover{

    color:#06C167;

}


/* SCROLLBAR */

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:#f1f1f1;

}

::-webkit-scrollbar-thumb{

    background:#bdbdbd;

    border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

    background:#06C167;

}


/* FOCUS */

button:focus,
input:focus{

    outline:none;

    box-shadow:0 0 0 4px rgba(6,193,103,.2);

}


/* TEXTAUSWAHL */

::selection{

    background:#06C167;

    color:white;

}


/* BILDER (falls später verwendet) */

.menu-item img{

    width:90px;

    height:90px;

    object-fit:cover;

    border-radius:14px;

}


/* DESKTOP */

@media(min-width:1200px){

    .menu{

        padding-left:30px;
        padding-right:30px;

    }

    .menu-item{

        padding-top:26px;
        padding-bottom:26px;

    }

}