/* ===== Grundlayout ===== */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    background: #f5f7fa;
    color: #333;
}

header {
    background: #2c3e50;
    color: white;
    text-align: center;
    padding: 2rem 1rem;
}

header h1 { margin: 0; font-size: 2rem; }
header p { margin: 0.5rem 0 0 0; font-size: 1rem; }

/* ===== Navigation ===== */
nav {
    background: #222;
    text-align: center;
    padding: 1rem;
}
nav a {
    color: white;
    margin: 0 10px;
    text-decoration: none;
    font-weight: bold;
}
nav a:hover { text-decoration: underline; }

/* ===== Abschnitte ===== */
section {
    max-width: 1000px;
    margin: 1.5rem auto;
    padding: 1.5rem;
    background: white;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    border-radius: 5px;
}

section h2 { margin-top: 0; color: #2c3e50; }

/* ===== Galerie ===== */
.gallery {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}

.gallery img.gallery-img {
    width: 100%;
    max-height: 150px;
    object-fit: cover;
    cursor: pointer;
    border-radius: 3px;
    transition: transform 0.2s;
}

.gallery img.gallery-img:hover { transform: scale(1.05); }

/* ===== Responsive ===== */
@media(max-width:800px) { .gallery { grid-template-columns: repeat(2,1fr); } }
@media(max-width:500px) { .gallery { grid-template-columns:1fr; } }

/* ===== Lightbox ===== */
.lightbox {
    display:none;
    position:fixed;
    top:0; left:0;
    width:100%; height:100%;
    background: rgba(0,0,0,0.95);
    z-index: 9999;
}

.lightbox img {
    display:block;
    max-width:90%;
    max-height:90%;
    margin:5% auto;
    border-radius: 5px;
    box-shadow: 0 0 20px rgba(0,0,0,0.5);
}

/* ===== Schließen Button ===== */
.close {
    position:absolute;
    top:20px;
    right:30px;
    font-size:2rem;
    color:white;
    cursor:pointer;
    user-select: none;
}

/* ===== Pfeile ===== */
.nav {
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    font-size:3rem;
    color:white;
    cursor:pointer;
    user-select: none;
}
.nav.left { left:20px; }
.nav.right { right:20px; }

/* ===== Footer ===== */
footer {
    text-align:center;
    padding:1rem;
    background:#222;
    color:white;
    margin-top:2rem;
}