/* =========================================================
   MALICH CATERING GMBH
   MASTER STYLE.CSS
   UTF-8
   Responsive Mobile First
   ========================================================= */


/* =========================================================
   GOOGLE FONT
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');



/* =========================================================
   ROOT VARIABLEN
   ========================================================= */

:root {

    --green:#24452b;
    --green-dark:#18351f;

    --gold:#b08a45;
    --gold-light:#d8c48a;

    --cream:#f5f1e8;

    --white:#ffffff;

    --grey:#666;

    --light:#f7f5f1;

    --text:#333;

    --shadow:
    0 15px 40px rgba(0,0,0,.10);

    --radius:18px;

    --max-width:1200px;

}



/* =========================================================
   RESET
   ========================================================= */


*,
*::before,
*::after{

    box-sizing:border-box;

}



html{

    scroll-behavior:smooth;

}



body{

    margin:0;

    padding-top:90px;

    font-family:
    "Poppins",
    Arial,
    Helvetica,
    sans-serif;

    color:var(--text);

    background:#fff;

    line-height:1.7;

}



img{

    max-width:100%;

    height:auto;

    display:block;

}



a{

    color:inherit;

    text-decoration:none;

}



h1,
h2,
h3,
h4{

    margin-top:0;

    line-height:1.3;

}



p{

    margin:0 0 20px;

}



/* =========================================================
   STANDARD CONTAINER
   ========================================================= */


.container{

    width:92%;

    max-width:var(--max-width);

    margin:auto;

}



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


.header{

    position:fixed;

    top:0;

    left:0;

    width:100%;

    height:90px;

    background:

    rgba(255,255,255,.96);

    backdrop-filter:blur(8px);

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:

    10px clamp(20px,5vw,70px);

    z-index:1000;

    box-shadow:

    0 5px 20px rgba(0,0,0,.08);

}



/* Logo */


.logo img{

    width:80px;

    height:80px;

    object-fit:contain;

}



/* =========================================================
   NAVIGATION
   ========================================================= */


nav{

    display:flex;

    align-items:center;

    gap:30px;

}



nav a{

    color:var(--green);

    font-weight:600;

    position:relative;

    padding:8px 0;

}



nav a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:0;

    height:2px;

    width:0;

    background:var(--gold);

    transition:.3s;

}



nav a:hover,
nav a.active{

    color:var(--gold);

}



nav a:hover::after,
nav a.active::after{

    width:100%;

}



/* =========================================================
   BUTTONS
   ========================================================= */


.button{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    background:var(--gold);

    color:white;

    padding:

    15px 38px;

    border-radius:50px;

    font-weight:600;

    transition:.3s;

}



.button:hover{

    background:var(--green);

    transform:translateY(-3px);

}



/* =========================================================
   BILDER / HERO SYSTEM
   ========================================================= */


.hero,
.page-header,
.grill-header{

    position:relative;

    overflow:hidden;

    display:flex;

    align-items:center;

    justify-content:center;

    text-align:center;

    color:white;

}



.hero::before,
.page-header::before,
.grill-header::before{

    content:"";

    position:absolute;

    inset:0;

    background:

    rgba(0,0,0,.45);

    z-index:1;

}



/* Startseite Bild */


.hero{

    min-height:650px;

    background-image:

    url("../images/startseite-header.webp");

    background-size:cover;

    background-position:center;

}



/* normale Unterseiten */


.page-header{

    min-height:420px;

    background-size:cover;

    background-position:center;

}



.unternehmen-header{

    background-image:

    url("../images/ueber_uns.webp");

}



.kontakt-header{

    background-image:

    url("../images/kontakt-header.webp");

}



.leistungen-header{

    background-image:

    url("../images/leistungen-header.webp");

}



.grill-header{

    min-height:550px;

    background-image:

    url("../images/grillcatering-hamburg.webp");

    background-size:cover;

    background-position:center;

}



/* Inhalt über Bild */


.hero > *,
.page-header > *,
.grill-header > *{

    position:relative;

    z-index:2;

}



/* =========================================================
   HERO TEXTE
   ========================================================= */


.hero h1,
.page-header h1,
.grill-header h1{

    font-size:

    clamp(34px,6vw,60px);

}



.hero p,
.page-header p,
.grill-header p{

    font-size:

    clamp(18px,3vw,26px);

}

/* =========================================================
   INHALTSBEREICHE
   ========================================================= */


.content{

    width:92%;

    max-width:1000px;

    margin:0 auto;

    padding:80px 0;

}



.content h2{

    color:var(--green);

    font-size:

    clamp(28px,4vw,42px);

    text-align:center;

    margin-bottom:40px;

}



.content p{

    font-size:18px;

    line-height:1.8;

}



/* =========================================================
   INTRO BEREICHE
   ========================================================= */


.intro,
.grill-intro{

    width:92%;

    max-width:1000px;

    margin:auto;

    padding:80px 0;

    text-align:center;

}



.intro h2,
.grill-intro h2{

    color:var(--green);

    font-size:

    clamp(28px,4vw,42px);

}



.intro p,
.grill-intro p{

    font-size:18px;

    line-height:1.8;

}



/* =========================================================
   GRÜNER INFOBLOCK
   ========================================================= */


.green{

    background:var(--green);

    color:white;

    padding:80px 20px;

    text-align:center;

}



.green h2{

    color:white;

}



.green p{

    max-width:900px;

    margin:auto;

}





/* =========================================================
   LEISTUNGEN
   ========================================================= */


.services{

    width:92%;

    max-width:1200px;

    margin:auto;

    padding:80px 0;

    display:grid;

    grid-template-columns:

    repeat(auto-fit,minmax(260px,1fr));

    gap:35px;

}



.service-card{

    background:white;

    padding:40px 30px;

    border-radius:var(--radius);

    box-shadow:var(--shadow);

    text-align:center;

    transition:.3s;

}



.service-card:hover{

    transform:translateY(-8px);

}



.service-card h3{

    color:var(--green);

    font-size:25px;

}



.service-card .icon{

    font-size:45px;

    margin-bottom:20px;

}



.service-card a{

    color:var(--gold);

    font-weight:600;

}



/* =====================================================
   LEISTUNGEN HEADER MIT VIDEO OVERLAY
   ===================================================== */

.leistungen-header {
    position: relative;
    min-height: 430px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: white;
    overflow: hidden;
}


/* Hintergrund Video */

.header-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}


/* Transparente Abdunklung über dem Video */

.leistungen-header::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.50);
    z-index: 1;
}


/* Schrift über allem */

.leistungen-header .header-content {

    position: relative;
    z-index: 2;

    max-width: 900px;

    padding: 40px 20px;

}


.leistungen-header h1 {

    color:white;

    font-size:
    clamp(32px,6vw,55px);

    margin-bottom:20px;

}


.leistungen-header p {

    color:white;

    font-size:
    clamp(18px,3vw,26px);

}




/* =========================================================
   PROZESS / ABLAUF
   ========================================================= */


.process{

    background:var(--green);

    color:white;

    padding:90px 5%;

    text-align:center;

}



.process h2{

    color:white;

}



.process-grid{

    max-width:1100px;

    margin:50px auto 0;

    display:grid;

    grid-template-columns:

    repeat(auto-fit,minmax(220px,1fr));

    gap:40px;

}



.process-grid span{

    width:65px;

    height:65px;

    margin:auto;

    display:flex;

    justify-content:center;

    align-items:center;

    background:var(--gold);

    border-radius:50%;

    font-size:22px;

    font-weight:bold;

}




/* =====================================================
   SEITEN HEADER BILDER
   ===================================================== */


.start-header {

    background:
    linear-gradient(
        rgba(0,0,0,.45),
        rgba(0,0,0,.45)
    ),
    url("../images/logo.webp");

    background-size:cover;
    background-position:center;

}



.grill-header {

    background:
    linear-gradient(
        rgba(0,0,0,.55),
        rgba(0,0,0,.55)
    ),
    url("../images/grillcatering-hamburg.webp");

    background-size:cover;
    background-position:center;

}



.unternehmen-header {

    background:
    linear-gradient(
        rgba(0,0,0,.45),
        rgba(0,0,0,.45)
    ),
    url("../images/ueber_uns.webp");

    background-size:cover;
    background-position:center;

}


.galerie-header {

    background:
    linear-gradient(
        rgba(0,0,0,.45),
        rgba(0,0,0,.45)
    ),
    url("../images/gallery1.webp");

    background-size:cover;
    background-position:center;

}






/* =========================================================
   GALERIE / BILDER
   ========================================================= */


.gallery{

    width:92%;

    max-width:1200px;

    margin:auto;

    padding:80px 0;

    display:grid;

    grid-template-columns:

    repeat(auto-fit,minmax(280px,1fr));

    gap:30px;

}



.gallery-item{

    height:320px;

    overflow:hidden;

    border-radius:var(--radius);

    position:relative;

}



.gallery-item img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:.5s;

}



.gallery-item:hover img{

    transform:scale(1.08);

}



.gallery-item div{

    position:absolute;

    bottom:0;

    left:0;

    width:100%;

    padding:25px;

    color:white;

    background:

    linear-gradient(
    transparent,
    rgba(0,0,0,.8)
    );

}



.gallery-item h3{

    margin:0;

}





/* =========================================================
   REFERENZEN
   ========================================================= */


.references{

    background:var(--cream);

    padding:90px 5%;

    text-align:center;

}



.reference-grid{

    max-width:1100px;

    margin:50px auto 0;

    display:grid;

    grid-template-columns:

    repeat(auto-fit,minmax(250px,1fr));

    gap:30px;

}



.reference-grid div{

    background:white;

    padding:35px;

    border-radius:var(--radius);

    box-shadow:var(--shadow);

}



.reference-grid h3{

    color:var(--gold);

}





/* =========================================================
   PREISKARTEN ALLGEMEIN
   ========================================================= */


.pricing{

    background:#f7f5f1;

    padding:90px 5%;

}



.pricing-grid{

    max-width:1200px;

    margin:auto;

    display:grid;

    grid-template-columns:

    repeat(auto-fit,minmax(290px,1fr));

    gap:35px;

}



.pricing-card{

    background:white;

    padding:40px 30px;

    border-radius:var(--radius);

    box-shadow:var(--shadow);

    position:relative;

}



.pricing-card h3{

    color:var(--green);

}



.pricing-card ul{

    padding-left:20px;

}



.pricing-card li{

    margin-bottom:8px;

}



.price{

    color:var(--gold);

    font-size:40px;

    font-weight:700;

}





/* =========================================================
   GRILL NAVIGATION
   ========================================================= */


.grill-nav{

    position:sticky;

    top:90px;

    z-index:900;

    background:white;

    padding:20px;

    display:flex;

    justify-content:center;

    flex-wrap:wrap;

    gap:15px;

    box-shadow:

    0 5px 20px rgba(0,0,0,.12);

}



.grill-nav a{

    background:var(--cream);

    color:var(--green);

    padding:10px 20px;

    border-radius:50px;

    font-weight:600;

}



.grill-nav a:hover{

    background:var(--gold);

    color:white;

}





/* =========================================================
   GRILL KATEGORIEN
   ========================================================= */


.grill-category{

    padding:80px 5% 30px;

}



.grill-category h2{

    color:var(--green);

    text-align:center;

    font-size:

    clamp(28px,4vw,42px);

}



.grill-category-text{

    max-width:900px;

    margin:20px auto 50px;

    text-align:center;

}

/* =========================================================
   GRILL PREISKARTEN
   ========================================================= */


.grill-pricing{

    background:#f7f5f1;

    padding:80px 5%;

}



.grill-grid{

    width:100%;

    max-width:1200px;

    margin:auto;

    display:grid;

    grid-template-columns:

    repeat(auto-fit,minmax(300px,1fr));

    gap:35px;

}





.grill-card{

    position:relative;

    background:white;

    padding:40px 30px;

    border-radius:var(--radius);

    box-shadow:var(--shadow);

    transition:.3s;

}



.grill-card:hover{

    transform:translateY(-8px);

    box-shadow:

    0 20px 45px rgba(0,0,0,.15);

}



.grill-card h3{

    color:var(--green);

    font-size:26px;

    margin-bottom:20px;

}



.grill-card ul{

    padding-left:20px;

}



.grill-card li{

    margin-bottom:8px;

    line-height:1.6;

}





/* =========================================================
   HERVORGEHOBENE GRILLKARTEN
   ========================================================= */


.grill-card.featured{

    border:

    3px solid var(--gold);

}



.grill-card.featured::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:5px;

    background:var(--gold);

}





/* =========================================================
   BADGES
   ========================================================= */


.badge{

    position:absolute;

    top:20px;

    right:20px;

    padding:

    8px 18px;

    border-radius:50px;

    color:white;

    font-size:14px;

    font-weight:700;

    z-index:2;

}



.badge-empfehlung{

    background:var(--gold);

}



.badge-beliebt{

    background:#b52b2b;

}



.badge-premium{

    background:var(--green);

}





/* =========================================================
   PREIS AUSGABE GRILL
   ========================================================= */


.price-badge{

    display:inline-block;

    margin-top:25px;

    padding:

    15px 28px;

    background:

    linear-gradient(
    135deg,
    var(--gold),
    var(--gold-light)
    );

    color:white;

    border-radius:50px;

    font-size:30px;

    font-weight:700;

    box-shadow:

    0 8px 20px rgba(176,138,69,.35);

}



.price-badge span{

    display:block;

    font-size:13px;

    font-weight:400;

}





/* =========================================================
   GRILL KONTAKT CTA
   ========================================================= */


.grill-contact{

    background:var(--green);

    color:white;

    padding:90px 20px;

    text-align:center;

}



.grill-contact h2{

    color:white;

    font-size:

    clamp(28px,4vw,42px);

}



.grill-contact p{

    max-width:900px;

    margin:20px auto 35px;

}





/* =========================================================
   UNTERNEHMEN / GESCHICHTE
   ========================================================= */


.history{

    width:100%;

    background:#f7f5f1;

    padding:80px 5%;

}



.history h2{

    text-align:center;

    color:var(--green);

    font-size:

    clamp(28px,4vw,42px);

    margin-bottom:50px;

}





.timeline-box{

    width:100%;

    max-width:900px;

    margin:

    30px auto;

    background:white;

    padding:35px;

    border-radius:15px;

    box-shadow:

    0 10px 30px rgba(0,0,0,.08);

    border-left:

    5px solid var(--gold);

}



.timeline-box h3{

    color:var(--green);

    margin-bottom:15px;

}



.timeline-box p{

    font-size:17px;

    line-height:1.8;

}





/* =========================================================
   VERANTWORTUNG / PERSONEN
   ========================================================= */


.management{

    width:92%;

    max-width:1000px;

    margin:auto;

    padding:80px 0;

    text-align:center;

}



.management h2{

    color:var(--green);

}



.person{

    background:white;

    margin:30px auto;

    padding:35px;

    border-radius:var(--radius);

    box-shadow:var(--shadow);

}



.person h3{

    color:var(--gold);

}





/* =========================================================
   ZITAT
   ========================================================= */


.quote{

    background:var(--green);

    color:white;

    padding:70px 20px;

    text-align:center;

}



.quote h2{

    color:white;

    font-size:

    clamp(24px,4vw,40px);

}





/* =========================================================
   KONTAKT
   ========================================================= */


.contact-area{

    width:92%;

    max-width:1200px;

    margin:auto;

    padding:80px 0;

    display:grid;

    grid-template-columns:

    1fr 1.5fr;

    gap:60px;

}



.contact-info h2,
.contact-form h2{

    color:var(--green);

}



.contact-info p{

    font-size:18px;

}





.contact-form{

    background:white;

    padding:40px;

    border-radius:var(--radius);

    box-shadow:var(--shadow);

}



.contact-form label{

    display:block;

    margin-top:20px;

    font-weight:600;

}



.contact-form input,
.contact-form textarea,
.contact-form select{

    width:100%;

    padding:15px;

    border:1px solid #ddd;

    border-radius:8px;

    font-family:inherit;

    font-size:16px;

}



.contact-form textarea{

    min-height:160px;

}



/* =========================================================
   KONTAKT CTA STARTSEITE
   ========================================================= */

.contact-preview{

    width:100%;

    padding:90px 20px;

    text-align:center;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

}


.contact-preview h2{

    width:100%;

    max-width:900px;

    margin:0 auto 25px;

    color:var(--green);

    font-size:
    clamp(28px,4vw,42px);

}


.contact-preview p{

    width:100%;

    max-width:800px;

    margin:0 auto 35px;

    font-size:18px;

}


.contact-preview .button{

    display:inline-flex;

    width:auto;

}



/* Buttons in Service-Karten immer sichtbar */

.service-card .button {
    display:inline-flex;
    opacity:1;
    visibility:visible;
    margin-top:25px;
}

.service-card .button:hover {
    opacity:1;
    visibility:visible;
}





/* =========================================================
   FOOTER
   ========================================================= */


.footer{

    background:var(--green);

    color:white;

    padding:

    60px 5% 20px;

}



.footer-container{

    max-width:1200px;

    margin:auto;

    display:grid;

    grid-template-columns:

    repeat(auto-fit,minmax(240px,1fr));

    gap:40px;

}



.footer h3,
.footer h4{

    color:var(--gold-light);

}



.footer a{

    color:white;

}



.footer a:hover{

    color:var(--gold-light);

}



.footer ul{

    list-style:none;

    padding:0;

}



.footer li{

    margin-bottom:10px;

}



.footer-bottom{

    max-width:1200px;

    margin:

    40px auto 0;

    padding-top:20px;

    text-align:center;

    border-top:

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

    font-size:14px;

}


/* =========================================================
   COOKIE BANNER
   ========================================================= */


.cookie-banner{

    position:fixed;

    bottom:0;

    left:0;

    width:100%;

    background:#1f3d2b;

    color:white;

    padding:20px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:25px;

    z-index:9999;

    box-shadow:

    0 -5px 20px rgba(0,0,0,.25);

}



.cookie-banner p{

    margin:0;

    font-size:15px;

}



.cookie-banner a{

    color:var(--gold-light);

}



.cookie-banner button{

    background:var(--gold-light);

    color:var(--green);

    border:0;

    padding:

    12px 30px;

    border-radius:8px;

    cursor:pointer;

    font-weight:700;

}



.cookie-banner button:hover{

    background:white;

}





/* =========================================================
   RECHTLICHE SEITEN
   IMPRESSUM / DATENSCHUTZ / AGB
   ========================================================= */


.legal{

    width:92%;

    max-width:1000px;

    margin:auto;

    padding:80px 0;

}



.legal h1{

    color:var(--green);

    font-size:

    clamp(32px,5vw,48px);

}



.legal h2{

    color:var(--green);

    margin-top:45px;

}



.legal h3{

    color:#555;

}



.legal p,
.legal li{

    line-height:1.8;

}





/* =========================================================
   TABLETS
   ========================================================= */


@media(max-width:900px){



body{

    padding-top:0;

}



/* Header wird mobil */


.header{

    position:relative;

    height:auto;

    flex-direction:column;

    padding:15px 20px;

}



.logo img{

    width:75px;

    height:75px;

}



nav{

    width:100%;

    flex-direction:column;

    gap:0;

    margin-top:15px;

}



nav a{

    width:100%;

    text-align:center;

    padding:12px;

    border-bottom:

    1px solid #eee;

}



/* Kontakt */

.contact-area{

    grid-template-columns:1fr;

    gap:40px;

}



/* Footer */

.footer-container{

    text-align:center;

}



}





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


@media(max-width:768px){



.hero{

    min-height:520px;

}



.page-header{

    min-height:330px;

}



.grill-header{

    min-height:420px;

}



.hero h1,
.page-header h1,
.grill-header h1{

    font-size:32px;

}



.hero p,
.page-header p,
.grill-header p{

    font-size:17px;

}



/* Grill Navigation */


.grill-nav{

    justify-content:flex-start;

    overflow-x:auto;

    flex-wrap:nowrap;

}



.grill-nav a{

    white-space:nowrap;

}



/* Karten */


.grill-card,
.pricing-card,
.service-card{

    padding:30px 20px;

}



.grill-grid,
.pricing-grid{

    grid-template-columns:1fr;

}



.price-badge{

    font-size:24px;

}



.timeline-box{

    padding:25px;

}



/* Formulare */


.contact-form{

    padding:25px;

}



.button{

    width:100%;

}



/* Cookie */


.cookie-banner{

    flex-direction:column;

    text-align:center;

}



.cookie-banner button{

    width:100%;

}



}





/* =========================================================
   KLEINE SMARTPHONES
   ========================================================= */


@media(max-width:480px){



.logo img{

    width:65px;

    height:65px;

}



nav a{

    font-size:15px;

}



.hero h1{

    font-size:28px;

}



.content,
.intro,
.grill-intro{

    padding:55px 0;

}



.timeline-box h3{

    font-size:20px;

}



}





/* =========================================================
   BILDER OPTIMIERUNG
   ========================================================= */


img{

    image-rendering:auto;

}



.hero,
.page-header,
.grill-header{

    background-repeat:no-repeat;

}





/* =========================================================
   ZUGÄNGLICHKEIT / PERFORMANCE
   ========================================================= */


button,
a{

    -webkit-tap-highlight-color:transparent;

}



input,
textarea,
select{

    font-size:16px;

}



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


*{

    animation:none!important;

    transition:none!important;

    scroll-behavior:auto!important;

}


}





/* =====================================================
   SERVICE BUTTONS - KORREKTUR
   Immer sichtbar
   ===================================================== */

.services .service-card a.button,
.service-card a.button {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    color: #ffffff !important;
    background: var(--gold) !important;
    position: relative !important;
    transform: none;
    margin-top: 25px;
}

.services .service-card a.button:hover,
.service-card a.button:hover {
    background: var(--green) !important;
    color: #ffffff !important;
    transform: translateY(-3px);
}





/* =========================================================
   ALLE SEITEN HEADER - EINHEITLICH
   ========================================================= */


.page-header,
.hero,
.grill-header,
.leistungen-header {

    position:relative;
    min-height:430px;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    color:white;
    overflow:hidden;

    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;

}


/* dunkler transparenter Schleier */

.page-header::before,
.hero::before,
.grill-header::before {

    content:"";
    position:absolute;
    inset:0;

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

    z-index:1;

}


/* Text immer über Bild */

.header-content {

    position:relative;

    z-index:5;

    width:90%;
    max-width:900px;

}


.header-content h1,
.header-content p {

    color:white;

}



/* =========================================================
   EINZELNE HEADER BILDER
   ========================================================= */


.start-header {

    background-image:url("../images/logo.webp");

}



.unternehmen-header {

    background-image:url("../images/ueber_uns.webp");

}



.galerie-header {

    background-image:url("../images/gallery1.webp");

}



.kontakt-header {

    background-image:url("../images/kontakt-header.webp");

}



.grill-header {

    background-image:url("../images/grillcatering-hamburg.webp");

    min-height:550px;

}



/* =========================================================
   LEISTUNGEN VIDEO HEADER
   ========================================================= */


.leistungen-header {

    min-height:430px;

}


.header-video {

    position:absolute;

    inset:0;

    width:100%;
    height:100%;

    object-fit:cover;

    z-index:0;

}


.leistungen-header::before {

    z-index:1;

}


.leistungen-header .header-content {

    z-index:5;

}


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

.vorspeisen-header {

    background-image:
    linear-gradient(
        rgba(0,0,0,.45),
        rgba(0,0,0,.45)
    ),
    url("../images/vorspeisen.webp");

    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;

}

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

.hauptspeisen-header {

    background:
    linear-gradient(
        rgba(0,0,0,.45),
        rgba(0,0,0,.45)
    ),
    url("../images/hauptspeisen.webp");

    background-size:cover;

    background-position:center;

    background-repeat:no-repeat;

}

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

.buffets-header {

    background:
    linear-gradient(
        rgba(0,0,0,.45),
        rgba(0,0,0,.45)
    ),
    url("../images/buffets.webp");

    background-size:cover;

    background-position:center;

    background-repeat:no-repeat;

}

/* =========================================================
   DESSERT & KUCHEN HEADER
   ========================================================= */

.dessert-header {

    background:
    linear-gradient(
        rgba(0,0,0,.45),
        rgba(0,0,0,.45)
    ),
    url("../images/dessert.webp");

    background-size:cover;

    background-position:center;

    background-repeat:no-repeat;

}


/* Abstand zwischen Einleitung und Service-Karten reduzieren */

.services-intro {
    padding-bottom:30px;
}


.services {
    padding-top:20px;
}


/* Preise Full-Service Catering */

.price {
    color: var(--green);
    font-size:26px;
    font-weight:600;
}


.price span {
    display:block;
    color:#666;
    font-size:14px;
    font-weight:400;
    margin-top:5px;
}


.price.small {
    font-size:22px;
}

.fullservice-header {
    background-image: url("../images/full-service2.webp");
}


.fullservice-header {
    background-image: url("../images/full-service2.webp");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}


.fullservice-header {
    background-image: url("../images/full-service2.webp");
}

.section-title {
    text-align: center;
    width: 100%;
    margin-bottom: 40px;
}


.agb-header {
    background-image: url("../images/agbs.webp");
}


/* Überschriften der Grill-Seiten mittig */
.pricing h2,
.pricing .section-title {
    text-align: center;
    width: 100%;
    display: block;
    margin: 0 auto 2.5rem;
    color: #2f5d3a;
}

/* Alle Abschnittsüberschriften mittig */
section h2,
.content h2,
.pricing h2,
.grill-category h2,
.contact-preview h2 {
    text-align: center;
    width: 100%;
    display: block;
    margin: 0 auto 2.5rem;
    color: #2f5d3a;
}

h2 {
    text-align: center;
    margin: 0 auto 2.5rem;
    color: #2f5d3a;
}

/* ==============================
   Fingerfood Catering
   ============================== */

.fingerfood-header {
    background-image: url("../images/canapes.webp");
    background-size: cover;
    background-position: center;
}


.fingerfood-header .header-content {
    text-align: center;
}


/* Allgemeine Überschriften */

.content h2,
.pricing h2,
.contact-preview h2,
.fingerfood-seo h2 {
    text-align: center;
}


/* Preisbereiche */

.pricing {
    padding: 60px 20px;
}


.pricing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
}


/* Karten */

.food-card,
.pricing-card {
    background: #ffffff;
    border-radius: 12px;
    padding: 30px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.08);
    transition: transform 0.3s ease;
}


.food-card:hover,
.pricing-card:hover {
    transform: translateY(-5px);
}


.food-card h3,
.pricing-card h3 {
    text-align: center;
    color: #8b0000;
    margin-bottom: 20px;
}



/* Listen */

.food-card ul,
.pricing-card ul {
    padding-left: 20px;
    line-height: 1.7;
}


.food-card li,
.pricing-card li {
    margin-bottom: 8px;
}



/* Preisbox */

.price-badge {
    margin-top: 25px;
    background: #8b0000;
    color: white;
    padding: 15px;
    border-radius: 8px;
    text-align: center;
    font-size: 1.4rem;
    font-weight: bold;
}


.price-badge span {
    display: block;
    font-size: 0.85rem;
    font-weight: normal;
    margin-top: 5px;
}



/* SEO Bereich */

.fingerfood-seo {
    max-width: 1100px;
    margin: 60px auto;
    padding: 30px;
}


.fingerfood-seo p {
    line-height: 1.8;
}


.fingerfood-seo ul {
    line-height: 1.8;
}



/* Kontaktbereich */

.contact-preview {
    text-align: center;
    padding: 60px 20px;
}


.contact-preview p {
    max-width: 700px;
    margin: 20px auto;
}



/* Navigation */

.fingerfood-nav {
    display: flex;
    justify-content: center;
    gap: 25px;
    flex-wrap: wrap;
    padding: 20px;
}


.fingerfood-nav a {
    color: #8b0000;
    text-decoration: none;
    font-weight: bold;
}


.fingerfood-nav a:hover {
    text-decoration: underline;
}



/* Mobile */

@media(max-width:768px){

    .pricing {
        padding:40px 15px;
    }


    .pricing-grid {
        grid-template-columns:1fr;
    }


    .food-card,
    .pricing-card {
        padding:20px;
    }


    .pricing h2,
    .content h2 {
        font-size:1.6rem;
    }

}



```css
/* =========================================================
   MARTINSGANS – TEXT ZENTRIEREN
   ========================================================= */

/*
   Gesamter Inhalt der gans.php
*/
body:has(.page-navigation) {

    text-align: center;

}


/*
   Hero
*/
body:has(.page-navigation) .hero-content {

    text-align: center;

}


body:has(.page-navigation) .hero-content h1,
body:has(.page-navigation) .hero-content p {

    text-align: center;

}


/*
   Seiten-Navigation
*/
body:has(.page-navigation) .page-navigation {

    text-align: center;

}


/*
   Allgemeine Container
*/
body:has(.page-navigation) .container {

    text-align: center;

}


/*
   Überschriften
*/
body:has(.page-navigation) h1,
body:has(.page-navigation) h2,
body:has(.page-navigation) h3,
body:has(.page-navigation) h4 {

    text-align: center;

}


/*
   Fließtext
*/
body:has(.page-navigation) p {

    text-align: center;

}


/*
   Listen
   Die Liste bleibt als Liste formatiert,
   der gesamte Block wird mittig positioniert.
*/
body:has(.page-navigation) ul {

    width: fit-content;

    max-width: 100%;

    margin-left: auto;
    margin-right: auto;

    text-align: left;

}


/*
   Karten
*/
body:has(.page-navigation) .card {

    text-align: center;

}


/*
   Bestellbereich
*/
body:has(.page-navigation) .order-box {

    text-align: center;

}


body:has(.page-navigation) .order-box ul {

    text-align: left;

}


/*
   Hinweisboxen
*/
body:has(.page-navigation) .notice {

    text-align: center;

}


/*
   Abholbereich
*/
body:has(.page-navigation) .two-column {

    text-align: center;

}


body:has(.page-navigation) .two-column > div {

    text-align: center;

}


/*
   Links
*/
body:has(.page-navigation) a {

    text-align: center;

}


/*
   Footer NICHT verändern.
   Der bestehende Malich-Footer bleibt exakt
   so, wie er in style.css definiert ist.
*/
body:has(.page-navigation) .footer {

    text-align: initial;

}


/*
   Mobile
*/
@media (max-width: 768px) {

    body:has(.page-navigation) .container {

        text-align: center;

    }


    body:has(.page-navigation) .card {

        text-align: center;

    }


    body:has(.page-navigation) .two-column > div {

        text-align: center;

    }

}


```css
/* =========================================================
   MARTINSGANS – KOMPLETTE SEITE ZENTRIERT
   ========================================================= */

/* Gesamter Martinsgans-Inhalt */
body:has(.page-navigation) {
    text-align: center;
}


/* =========================================================
   HERO
   ========================================================= */

body:has(.page-navigation) .hero,
body:has(.page-navigation) .hero-content,
body:has(.page-navigation) .hero-content h1,
body:has(.page-navigation) .hero-content p {
    text-align: center;
}


/* =========================================================
   SEITENNAVIGATION
   ========================================================= */

body:has(.page-navigation) .page-navigation {
    text-align: center;
}


/* =========================================================
   CONTAINER UND SEKTIONEN
   ========================================================= */

body:has(.page-navigation) .container {
    text-align: center;
}


body:has(.page-navigation) section {
    text-align: center;
}


/* =========================================================
   ÜBERSCHRIFTEN
   ========================================================= */

body:has(.page-navigation) h1,
body:has(.page-navigation) h2,
body:has(.page-navigation) h3,
body:has(.page-navigation) h4,
body:has(.page-navigation) h5,
body:has(.page-navigation) h6 {
    text-align: center;
}


/* =========================================================
   ALLE TEXTE
   ========================================================= */

body:has(.page-navigation) p,
body:has(.page-navigation) strong,
body:has(.page-navigation) span,
body:has(.page-navigation) address {
    text-align: center;
}


/* =========================================================
   KARTEN
   ========================================================= */

body:has(.page-navigation) .card {
    text-align: center;
}


/* =========================================================
   LISTEN – AUCH KOMPLETT MITTIG
   ========================================================= */

body:has(.page-navigation) ul,
body:has(.page-navigation) ol {
    display: block;

    width: fit-content;

    max-width: 100%;

    margin-left: auto;
    margin-right: auto;

    padding-left: 0;

    text-align: center;

    list-style-position: inside;
}


body:has(.page-navigation) li {
    text-align: center;

    margin-left: 0;
    margin-right: 0;
}


/* =========================================================
   HINWEISBOX
   ========================================================= */

body:has(.page-navigation) .notice {
    text-align: center;
}


body:has(.page-navigation) .notice p,
body:has(.page-navigation) .notice strong {
    text-align: center;
}


/* =========================================================
   ABHOLBEREICH
   ========================================================= */

body:has(.page-navigation) .two-column {
    text-align: center;
}


body:has(.page-navigation) .two-column > div {
    text-align: center;
}


body:has(.page-navigation) .two-column h3,
body:has(.page-navigation) .two-column p {
    text-align: center;
}


/* =========================================================
   PREISE
   ========================================================= */

body:has(.page-navigation) .price,
body:has(.page-navigation) .hero-price {
    text-align: center;
}


/* =========================================================
   BESTELLBEREICH
   ========================================================= */

body:has(.page-navigation) .order-box {
    text-align: center;
}


body:has(.page-navigation) .order-box ul {
    text-align: center;

    width: fit-content;

    margin-left: auto;
    margin-right: auto;

    padding-left: 0;

    list-style-position: inside;
}


body:has(.page-navigation) .order-box li {
    text-align: center;
}


/* =========================================================
   BUTTONS
   ========================================================= */

body:has(.page-navigation) .button {
    text-align: center;
}


/* =========================================================
   LINKS
   ========================================================= */

body:has(.page-navigation) a {
    text-align: center;
}


/* =========================================================
   FOOTER
   ========================================================= */

/*
   Der Footer wird ebenfalls komplett mittig ausgerichtet.
*/

body:has(.page-navigation) .footer {
    text-align: center;
}


body:has(.page-navigation) .footer-container {
    text-align: center;
}


body:has(.page-navigation) .footer-company,
body:has(.page-navigation) .footer-navigation,
body:has(.page-navigation) .footer-contact {
    text-align: center;
}


body:has(.page-navigation) .footer h3,
body:has(.page-navigation) .footer h4,
body:has(.page-navigation) .footer p,
body:has(.page-navigation) .footer li,
body:has(.page-navigation) .footer a {
    text-align: center;
}


body:has(.page-navigation) .footer ul {
    width: auto;

    margin-left: 0;
    margin-right: 0;

    padding-left: 0;

    list-style-position: inside;

    text-align: center;
}


body:has(.page-navigation) .footer-bottom {
    text-align: center;
}


/* =========================================================
   COOKIE-BANNER
   ========================================================= */

body:has(.page-navigation) .cookie-banner {
    text-align: center;
}


body:has(.page-navigation) .cookie-banner p,
body:has(.page-navigation) .cookie-banner a,
body:has(.page-navigation) .cookie-banner button {
    text-align: center;
}


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

@media (max-width: 768px) {

    body:has(.page-navigation) {
        text-align: center;
    }


    body:has(.page-navigation) .container,
    body:has(.page-navigation) section,
    body:has(.page-navigation) .card,
    body:has(.page-navigation) .two-column,
    body:has(.page-navigation) .two-column > div {
        text-align: center;
    }


    body:has(.page-navigation) ul,
    body:has(.page-navigation) ol {
        text-align: center;

        list-style-position: inside;
    }


    body:has(.page-navigation) li {
        text-align: center;
    }


    body:has(.page-navigation) .footer-container {
        text-align: center;
    }

}



.payment-purpose {
    text-align: center !important;
    margin-left: auto;
    margin-right: auto;
}

.payment-purpose strong {
    display: block;
    margin-bottom: 6px;
}




```css
/* =========================================================
   MOBILE HAMBURGER-NAVIGATION
   Für .main-nav und .nav-toggle aus includes/header.php
   ========================================================= */


/* =========================================================
   DESKTOP
   ========================================================= */

.nav-toggle {
    display: none;
}


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

@media (max-width: 900px) {

    /*
       Header bleibt oben am Bildschirm stehen.
       Logo links, Hamburger rechts.
    */
    body {
        padding-top: 90px;
    }

    .header {
        position: fixed;

        top: 0;
        left: 0;

        width: 100%;
        height: 90px;

        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;

        padding: 10px 20px;

        background: rgba(255, 255, 255, 0.97);

        backdrop-filter: blur(8px);

        z-index: 1000;

        box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
    }


    /*
       Logo
    */
    .logo {
        flex-shrink: 0;
    }

    .logo img {
        width: 70px;
        height: 70px;
        object-fit: contain;
    }


    /*
       Hamburger-Button
    */
    .nav-toggle {
        display: flex;

        width: 50px;
        height: 50px;

        padding: 8px;

        margin: 0;

        flex-direction: column;
        align-items: center;
        justify-content: center;

        background: transparent;

        border: 0;

        border-radius: 8px;

        cursor: pointer;

        z-index: 1100;

        -webkit-tap-highlight-color: transparent;
    }


    /*
       Die drei Balken
    */
    .nav-toggle span {
        display: block;

        width: 30px;
        height: 3px;

        margin: 4px 0;

        background: var(--green);

        border-radius: 3px;

        transition:
            transform 0.3s ease,
            opacity 0.3s ease,
            background 0.3s ease;
    }


    /*
       Navigation zunächst verstecken
    */
    .main-nav {
        display: none;

        position: absolute;

        top: 90px;
        left: 0;

        width: 100%;

        margin: 0;
        padding: 10px 20px 20px;

        flex-direction: column;
        align-items: stretch;

        gap: 0;

        background: rgba(255, 255, 255, 0.98);

        backdrop-filter: blur(8px);

        box-shadow:
            0 10px 25px rgba(0, 0, 0, 0.12);

        border-top: 1px solid rgba(0, 0, 0, 0.05);

        z-index: 1050;
    }


    /*
       Navigation geöffnet
    */
    .main-nav.is-open {
        display: flex;
    }


    /*
       Navigation Links
    */
    .main-nav a {
        display: block;

        width: 100%;

        padding: 13px 10px;

        margin: 0;

        text-align: center;

        color: var(--green);

        font-weight: 600;

        border-bottom: 1px solid #eeeeee;
    }


    .main-nav a:last-child {
        border-bottom: none;
    }


    /*
       Hover-Effekt
    */
    .main-nav a:hover,
    .main-nav a.active {
        color: var(--gold);
    }


    /*
       Goldene Linie unter Links auf Mobilgeräten
    */
    .main-nav a::after {
        display: none;
    }


    /*
       Hamburger wird zum X
    */
    .nav-toggle[aria-expanded="true"] span:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
    }

    .nav-toggle[aria-expanded="true"] span:nth-child(2) {
        opacity: 0;
    }

    .nav-toggle[aria-expanded="true"] span:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
    }


    /*
       X bekommt Goldfarbe
    */
    .nav-toggle[aria-expanded="true"] span {
        background: var(--gold);
    }


    /*
       Hover / Fokus
    */
    .nav-toggle:hover span {
        background: var(--gold);
    }

    .nav-toggle:focus-visible {
        outline: 2px solid var(--gold);
        outline-offset: 3px;
    }

}


/* =========================================================
   SMARTPHONES
   ========================================================= */

@media (max-width: 768px) {

    body {
        padding-top: 80px;
    }


    .header {
        height: 80px;

        padding: 8px 15px;
    }


    .logo img {
        width: 64px;
        height: 64px;
    }


    .nav-toggle {
        width: 48px;
        height: 48px;
    }


    .nav-toggle span {
        width: 29px;
        height: 3px;

        margin: 4px 0;
    }


    .main-nav {
        top: 80px;

        padding:
            8px 15px 15px;
    }


    .main-nav a {
        padding: 13px 10px;

        font-size: 15px;
    }

}


/* =========================================================
   KLEINE SMARTPHONES
   ========================================================= */

@media (max-width: 480px) {

    body {
        padding-top: 75px;
    }


    .header {
        height: 75px;

        padding:
            7px 12px;
    }


    .logo img {
        width: 60px;
        height: 60px;
    }


    .nav-toggle {
        width: 45px;
        height: 45px;
    }


    .nav-toggle span {
        width: 27px;
        height: 3px;
    }


    .main-nav {
        top: 75px;

        padding:
            5px 12px 12px;
    }


    .main-nav a {
        padding: 12px 8px;

        font-size: 15px;
    }

}


/* =========================================================
   SICHERHEIT:
   ALTE GENERISCHE NAVIGATION AUF MOBILGERÄTEN
   ÜBERSCHREIBEN
   ========================================================= */

/*
   Deine ursprüngliche CSS enthält:

   @media(max-width:900px) {
       nav {
           width:100%;
           flex-direction:column;
           ...
       }
   }

   Diese Regeln werden hier für die neue Navigation
   bewusst überschrieben.
*/

@media (max-width: 900px) {

    .header > nav.main-nav {
        width: 100%;

        flex-direction: column;

        align-items: stretch;

        margin-top: 0;

        gap: 0;
    }


    /*
       Wichtig:
       Ohne .is-open bleibt die Navigation unsichtbar.
    */
    .header > nav.main-nav:not(.is-open) {
        display: none;
    }


    .header > nav.main-nav.is-open {
        display: flex;
    }

}


/* =========================================================
   DESKTOP AB 901 PX
   ========================================================= */

@media (min-width: 901px) {

    .nav-toggle {
        display: none;
    }


    .main-nav {
        display: flex;

        position: static;

        width: auto;

        padding: 0;

        margin: 0;

        background: transparent;

        box-shadow: none;

        border: 0;

        flex-direction: row;

        align-items: center;

        gap: 30px;
    }


    .main-nav a {
        width: auto;

        padding: 8px 0;

        border: 0;

        text-align: left;
    }

}