/* =================================
   GRUNDEINSTELLUNGEN
================================= */

@font-face {
    font-family: "Vollkorn";
    src: url("../fonts/Vollkorn-Regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Vollkorn";
    src: url("../fonts/Vollkorn-Bold.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}


*{
    box-sizing:border-box;
}


html{
    scroll-behavior:smooth;
}

body{

    /*font-family:Cambria, Georgia, serif;*/
    font-family: "Vollkorn", serif;
    color:#3F3F46;

    line-height:1.7;

    background:
        linear-gradient(
            rgba(0,0,0,.02),
            rgba(0,0,0,.02)
        ),
        url("../images/background.jpg") center top -150px/ cover no-repeat;

    background-attachment:fixed;

}

a{
    color:#555;  
}


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


header{

    position:fixed;

    top:0;

    left:0;

    width:100%;

    z-index:1000;

    background:rgba(255,255,255,.94);

    backdrop-filter:blur(10px);

    box-shadow:
    0 3px 15px rgba(0,0,0,.08);

}



.navbar{

    max-width:1200px;

    margin:auto;

    padding:20px 35px;

    display:flex;

    align-items:center;

    justify-content:space-between;

}



/* Logo */


.logo{

    display:flex;

    align-items:center;

    gap:20px;

}



.logo img{

    width:auto;
    height:60px;

}



.logo-text h1{

    color:#2C2C2C;

    font-size:2rem;

}



.logo-text p{

    color:#6B7280;

    font-size:.95rem;

}





/* Menü */


.menu{

    list-style:none;

    display:flex;

    gap:30px;

}



.menu a{

    text-decoration:none;

    color:#3F3F46;

    font-weight:700;

    transition:.3s;

}



.menu a:hover{

    color:#d7d7d7;

}



/* Checkbox für Menü */


#menu-toggle{

    display:none;

}



.hamburger{

    display:none;

    font-size:2rem;

    cursor:pointer;

    color:#3F3F46;

}

/* =================================
   MAIN
================================= */

main{

    padding-top:80px;

}


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

.container{

    max-width:1100px;

    margin:0 auto;

    padding:0 30px;

}

.startseite {
    height: 100vh;          /* Höhe des sichtbaren Bildschirms */
    position: relative;
    padding-top: 15vh;
}

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


.hero{

    min-height:10vh;

    display:flex;

    justify-content:center;

    align-items:center;

    text-align:center;

    padding:180px 20px 80px;



}



.hero-content{

    max-width:850px;

    padding:90px;

    border-radius:20px;

    box-shadow:

    0 15px 40px rgba(0,0,0,.15);

}



.hero h2{

    font-size:2.8rem;

    color:#2C2C2C;

    margin-bottom:25px;

}



.hero p{

    font-size:1.2rem;

    color:#4B5563;

    margin-bottom:35px;

}



/* =================================
   BUTTON
================================= */


.button{

    display:inline-block;

    background:#d7d7d7;

    color:#555;

    padding:15px 35px;

    border-radius:8px;

    text-decoration:none;

    transition:.3s;

}



.button:hover{

    background:#f7f7f7;

}



/* =================================
   SEKTIONEN
================================= */


section{

    max-width:1200px;

    margin:60px auto;

    padding:70px 50px;

    background:rgba(255,255,255,.93);

    border-radius:8px;

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

}

.content{

    max-width:1200px;

    margin:auto;

}

.hero{
    
    background:none;

    box-shadow:none;

    border-radius:0;

    margin:0;

    min-height:10vh;
    max-width:none;
}

section h2{

    text-align:center;

    color:#2C2C2C;

    font-size:2.3rem;

    margin-bottom:50px;

}



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


.cards{

    display:grid;

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

}



.card{

    background:white;

    padding:35px;

    border-radius:8px;

    box-shadow:

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

    transition:.3s;

}



.card:hover{

    transform:translateY(-8px);

}



.card h3{

    color:#2C2C2C;

    margin-bottom:15px;

}



.card p{

    color:#555;

}


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


.gallery{

    display:grid;

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

    gap:30px;

}



.gallery-item{

    background:white;

    border-radius:8px;

    overflow:hidden;

    box-shadow:

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

}



.gallery-item img{

    width:100%;

    height:230px;

    object-fit:cover;

}



.gallery-item h3{

    padding:20px;

    color:#2C2C2C;

}


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


.kontakt-box{

    min-width:650px;

    margin:auto;

    background:white;

    padding:10px;

    text-align:center;

    border-radius:8px;

    box-shadow:

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

}



.kontakt-box h3{

    color:#2C2C2C;

    margin-bottom:20px;

}





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


footer{

    background:#ECEFF3;

    text-align:center;

    padding:40px 20px;

    color:#555;

}



.footer-links{

    margin-bottom:20px;

}



.footer-links a{

    color:#555;

    text-decoration:none;

    margin:0 15px;

    font-weight:700;

}



.footer-links a:hover{

    color:#d7d7d7;

}



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


@media(max-width:900px){


.navbar{

    flex-direction:column;

    gap:20px;

}


.logo{

    flex-direction:column;

    text-align:center;

}


.logo img{

    height:40px;
    width:auto;

}



.hamburger{

    display:block;

}



.menu{

    display:none;

    flex-direction:column;

    text-align:center;

    width:100%;

}



#menu-toggle:checked ~ .menu{

    display:flex;

}



.hero{

    width:100vw;
    height:10vh;
    min-height:10vh;

    display:flex;
    justify-content:center;
    align-items:center;

    text-align:center;

    padding:120px 20px 40px;

    background-size:cover;

    background-position:center center;

    background-repeat:no-repeat;

    background-attachment:fixed;

}



.hero-content{

    padding:35px;

}



.hero h2{

    font-size:2.2rem;

}



}



@media(max-width:600px){


.logo img{

    width:auto;
    height:30px;

    flex-direction:column;

    text-align:center;
}


.hero h2{

    font-size:1.8rem;

}


.hero p{

    font-size:1rem;

}


.button{

    width:100%;
    background:#D1D5DB;
    color:#2C2C2C;

}

.button:hover{

    background:#D1D5DB;
    color:#2C2C2C;

}

}