* {
 box-sizing: border-box;
 margin: 0;
 padding: 0;
}
body {
 font-family: Arial, sans-serif;
 background-color: #f2f2f2;
 color: #111;
}

/* HEADER */
header {
 text-align: center;
 padding: 50px 20px;
 background-image: url("images/img_teal.jpg");
   background-repeat: no-repeat;
   background-size: cover;
   background-position: center;
   background-attachment: fixed;
 
}
.überschrift{
  margin-top: 100px;
}


h1 {
 font-size: 42px;
 margin-bottom: 30px;
}
nav {
 display: flex;
 justify-content: center;
 gap: 30px;
}
nav a {
 text-decoration: none;
 color: #111;
 background-color: #e0e0e0;
 border: 2px solid #111;
 padding: 10px 24px;
 border-radius: 8px;
 font-weight: bold;
 transition: 0.3s;
}
nav a:hover {
 color: white;
 transform: scale(1.05);
}
.kmd-btn:hover {
 background-color: turquoise;
 border-color: turquoise;
}
.mbk-btn:hover {
 background-color: orange;
 border-color: orange;
}
.om-btn:hover {
 background-color: purple;
 border-color: purple;
}


/* LAYOUT */
main {
 width: 90%;
 max-width: 1100px;
 margin: 0 auto;
}
.projekt {
 padding: 100px 0;
 border-bottom: 2px solid #b5b5b5;
}
.projekt h2 {
 text-align: center;
 font-size: 36px;
 margin-bottom: 50px;
}
/* KACHELN */
.kachel {
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: 40px;
 align-items: center;
 margin-bottom: 60px;
}
.kachel.reverse .bild {
 order: 2;
}
/* BILD */
.bild {
 display: block;
 height: 280px;
 border-radius: 12px;
 overflow: hidden;
 background-color: rgb(255, 255, 255);
}
.bild img {
 width: 100%;
 height: 100%;
 object-fit: cover;
}
/* TEXT */
.text {
 background-color: white;
 border-radius: 12px;
 padding: 30px;
}
.text h3 {
 margin-bottom: 15px;
}
.text p {
 line-height: 1.6;
}
/* LIGHTBOX */
.lightbox {
 display: none;
 position: fixed;
 inset: 0;
 background: rgba(0,0,0,0.9);
 justify-content: center;
 align-items: center;
 z-index: 9999;
}
.lightbox:target {
 display: flex;
}
.lightbox img {
 max-width: 90%;
 max-height: 90%;
 border: 4px solid white;
}
.close {
 position: absolute;
 top: 20px;
 right: 40px;
 color: white;
 font-size: 40px;
 text-decoration: none;
}
/* RESPONSIVE */
@media (max-width: 768px) {
    .section {
        flex-direction: column;
        text-align: center;
    }

    .navbar {
        justify-content: center;
    }
}

.projekt:last-child{
 border-bottom: none;
}