:root {
    --Copper: #983526;
    --Anthrazit: #1D2935;
    --Ocean: #1BA0A7;
    --Bleached-Aqua: #008D77;
    --Ocean-Depth: #014B49;

    --bg-primary: #000;
    --bg-secondary: #fff;
    --accent-color: var(--Bleached-Aqua);

    --text-primary: #fff;
}

@font-face {
    font-family: raleway_regular;
    src: url(fonts/raleway/Raleway-Regular.ttf);
}
@font-face {
    font-family: raleway_medium;
    src: url(fonts/raleway/Raleway-Medium.ttf);
}
@font-face {
    font-family: raleway_bold;
    src: url(fonts/raleway/Raleway-Bold.ttf);
}
@font-face {
    font-family: montserra_regular;
    src: url(fonts/montserrat/Montserrat-Regular.ttf);
}
@font-face {
    font-family: montserra_bold;
    src: url(fonts/montserrat/Montserrat-Bold.ttf);
}

body {
    margin: 0;
    font-family: raleway_medium;
    font-size: 18px;
    background-color: var(--bg-primary);
    color: var(--text-primary);
}

.d-none {
    display: none !important;
}
.mobile-none {
    display: none;
}

h1, h2, h3 {
    margin: 0;
}
h1, h2 {
    font-size: 32px;
    font-family: montserra_bold;
}
h3, #mitnehmen, #woche {
    font-size: 24px;
    font-family: montserra_regular;
    margin-top: 15px;
    color: var(--accent-color);
}

header {
    background-color: var(--bg-primary);
    min-height: 100px;
    align-content: center;
}
.header-content {
    max-width: 1302px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 15px 20px;
    flex-wrap: wrap;
    gap: 15px;
}
.header-content img {
    width: auto;
    height: 62px;
}
.header-content > a {
    height: 62px;
}

navigation {
    display: flex;
}
navigation a {
    width: 100px;
    text-align: center;
    padding: 5px 0;
    text-decoration: none;
    margin: 15px 0;
}
navigation a:hover {
    border-bottom: 2px solid var(--accent-color);
}

a {
    color: var(--text-primary);
}
p {
    line-height: 30px;
}
ul {
    list-style-type: none;
    padding-inline-start: 0;
}
li {
    margin: 18px 0;
    line-height: 30px;
}

button {
    color: var(--text-primary);
    background-color: var(--accent-color);
    border: 2px solid var(--accent-color);
    padding: 8px 16px;
    font-family: raleway_bold;
    text-decoration: none;
    position: relative;
    font-size: 18px;    
    top: 30px;
}
button:hover, button:active {
    background-color: var(--Ocean-Depth);
    border: 2px solid var(--Ocean-Depth);
}
.btn-light {
    color: var(--accent-color);
    background-color: var(--bg-secondary);
    border: 2px solid var(--accent-color);
    padding: 8px 16px;
    font-family: raleway_bold;
    text-decoration: none;
    position: relative;
    top: 30px;
}
.btn-light:hover {
    color: var(--text-primary);
    background-color: var(--accent-color);
    border: 2px solid var(--accent-color);
}

input.invalid {
    background-color: var(--Copper);
}

.hero {
    width: 100%;
    height: 660px;

    background-image: url(pictures/Hero-HG.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;

    display: flex;
    align-items: center;
    justify-content: center;
}
.hero img {
    width: calc(100% - 40px);
    max-width: 790px;
    padding: 20px;
}

.bg-black {
    background-color: var(--bg-primary);
    color: var(--text-primary);
}
.bg-black h1, .bg-black h2 {
    background-color: var(--accent-color);
    width: fit-content;
    padding: 5px 15px;
}
.bg-white {
    background-color: var(--bg-secondary);
    color: #000;
}
.bg-white h1, .bg-white h2 {
    color: var(--accent-color);
}

.text-left {
    text-align: left;
}
.text-center {
    text-align: center;
}
.text-right {
    text-align: right;
}

.box-columns {
    width: 100%;
    display: flex;
    flex-direction: row;
}
.box {
    max-width: 550px;
    width: 100%;
    padding: 50px;
}

.flex {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}
.grid {
    display: grid;
    grid-template-columns: auto;
    gap: 10px;
}
.box-left {
    justify-content: start;
}
.box-right {
    justify-content: end;
}
.box-middle {
    justify-content: center;
}

#services {
    background-image: url(pictures/ness-fu-q3UJfLysBzA-unsplash.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}
.card-box {
    flex-direction: column;
    align-items: center;
    gap: 50px;
    padding: 70px 50px;
    max-width: 1302px;
}

.card-title {
    text-align: center;
}
.card-title p {
    margin-top: 25px;
    margin-bottom: 0;
}
#AbisZ {
    max-width: 560px;
    word-break: break-word;
}
.card {
    display: flex;
    padding: 15px;
}
.card img {
    width: 60px;
    height: 61px;
}
.card h3 {
    margin: 0;
}
.card p {
    margin-top: 8px;
    margin-bottom: 0;
}
.card a {
    color: #000;
    text-decoration: underline 2px var(--accent-color);
    cursor: pointer;
}
.card-text {
    padding: 0 15px;
}

.img-columns {
    flex-direction: row;
    justify-content: space-between;
    background-color: var(--accent-color);
    padding: 2px 0;
    gap: 2px;;
}
.img-columns img {
    width: calc(50% - 2px);
}


#catering, #bistro-link {
    max-width: 1302px;
    padding: 50px;
}

#bg-img {
    background-image: url(pictures/jordon-conner-tIr-PWgSYB4-unsplash.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    transform: scaleX(-1);
}
#checkliste {
    flex-direction: column;
}
#checkliste .box {
    margin: 0 auto;
    width: unset;
}

#bistro-link {
    text-align: center;
    min-height: 100px;
    padding-bottom: 80px;
}

#contact {
    background-image: url(pictures/jf-martin-i5I7VeIZRmE-unsplash.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;

    color: var(--text-primary);
}
#contact > div {
    width: 100%;
    padding: 100px 50px;
    height: 585px;
}
#contact h2 {
    margin-bottom: 20px;
}
#contact label, #contact p {
    margin: 8px 0;
    text-shadow: 2px 2px 3px #000;
}
input {
    width: 100%;
    height: 26px;
    margin: 8px 0 16px 0;
    border-color: white;
    border-inline-width: 0;
}
textarea {
    width: 100%;
    height: 137px;
    border-color: white;
    border-inline-width: 0;
    margin-top: 8px;
}

.line {
    display: flex;
    justify-content: space-between;
    margin-top: 5px;
    border-bottom: 2px solid var(--accent-color);
}
#menu-items .line > p:first-child {
    margin-right: 5px;
}

.bistro {
    width: 100%;
    height: 660px;

    background-image: url(pictures/20260514_193145.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;

    display: flex;
    align-items: center;
    justify-content: center;
}
#menu .box-left {
    background-image: url(pictures/huzaifa-bukhari-gOy_1oXCAZ0-unsplash.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;

    background-color: rgba(255, 255, 255, 0.8);
    background-blend-mode: lighten;
}
#menu-items {
    margin-top: 30px;
}
#menu-items p {
    line-height: 35px;
}

#wochenplan {
    margin-top: 68px;
}
#wochenplan > h3, #wochenplan > #mitnehmen {
    margin-top: 30px;
}
#wochenplan .line {
    border-bottom: none;
}
#woche {
    color: var(--text-primary);
}

#event-grid .card {
    flex-wrap: wrap;
    gap: 15px;
}
#event-grid .card-img {
    height: 245px;
    width: auto;
    max-width: 245px;
}
#event-grid .card-text {
    align-items: start;
    text-align: start;
    width: 350px;
}

#map { 
    height: 602px;
    width: 100%;
}
#map iframe {
    width: -webkit-fill-available;
    width: -moz-fill-available;
    width: -ms-fill-available;
    width: -o-fill-available;
    height: 600px;
}

footer {
    background-color: var(--accent-color);
    color: var(--text-primary);
}
.col {
    width: 100%;
    margin-top: 2px;
    text-align: center;
    padding: 50px 0;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.adress-box {
    background-color: var(--bg-primary);
}
footer p, #menu p {
    margin: 0;
}
footer a {
    text-decoration: none;
}

#cockie-banner {
    justify-content: space-between;
    padding: 0 20px;
    width: unset;
    position: fixed;
    z-index: 1;
    bottom: 0;
}
#cockie-banner button {
    top: 0;
}

.main {
    margin: 50px 20px;
}
.main h1, #impressum h2 {
    margin: 0 auto;
}
.main h2 {
    padding-left: 0;
    padding-right: 0;
}
.container {
    padding: 10px 0;
}
.main h2 {
    font-size: 24px;
    font-family: montserra_regular;
    margin-top: 15px;
    color: var(--accent-color);
    background-color: unset;
}

/*--------------------------------------------------------------------------*/

/* Mobil */
@media only screen and (min-width: 576px) {
    .header-content {
        padding: 15px 50px;
    }
    navigation {
        gap: 30px;
    }
    .main {
        margin: 50px;
    }
}

/* TABLET */
@media only screen and (min-width: 768px) {
    .header-content {
        padding: 15px 100px;
    }

    .card-box {
        padding: 70px 100px;
    }
    #event-cards {
        padding: 70px 50px;
    }

    .box, #catering, #bistro-link {
        padding: 70px 100px;
    }

    #contact > div {
        padding: 100px;
    }

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

    .main {
        margin: 50px 100px;
    }

    #cockie-banner p {
        max-width: calc(100% - 295px);
    }
    #cockie-banner button {
        top: 30px;
    }
}

@media only screen and (min-width: 970px) {
    #event-cards {
        padding: 70px 100px;
    }
}

/* DESKTOP */
@media only screen and (min-width: 1200px) {
    .mobile-none {
        display: block;
    }

    .hero, .bistro {
        height: 850px;
    }
    .box-columns {
        width: 50%;
    }
    .box-left {
        justify-content: end;
    }
    .box-right {
        justify-content: start;
    }

    .grid {
        grid-template-columns: auto auto auto;
    }
    
    .img-columns img {
        width: calc(25% - 2px);
    }

    #checkliste .box {
        margin: unset;
    }

    footer .col {
        width: calc(25% - 2px);
        margin-right: 2px;
    }
}

/*--------------------------------------------------------------------------*/

/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
  
/* Modal Content/Box */
.modal-content {
    position: relative;
    background-color: #fefefe;
    margin: 50px auto;
    padding: 0;
    border: 1px solid #888;
    width: 80%;
    max-width: 732px;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
    animation-name: animatetop;
    animation-duration: 0.4s
}
  
/* The Close Button */
.close {
    float: right;
    position: relative;
    z-index: 1;
    margin: 15px 15px 0 0;
}
.close:hover, .close:focus {cursor: pointer;}

/* Modal Body */
.modal-body {
    padding: 10px 10px 5px;
    position: absolute;
    background: white;
}
.modal-body img {width: 100%;}
  
/* Add Animation */
@keyframes animatetop {
    from {top: -300px; opacity: 0}
    to {top: 0; opacity: 1}
}