/* css */
:root{
    --heading: #5a9c51;
    --heading-text: #ffffff;
    --nav: #005d53;
    --main: #d9d99f;
    --text: #222;
    --muted: #666;
    --max-w: 1100px;
    --gap: 1rem;
    --radius: 8px;
    --fs-base: 28px;
    --family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* Reset / base */
*{box-sizing:border-box}
html{font-size:var(--fs-base);-webkit-font-smoothing:antialiased}

/* Make the page a full-height column so main can grow and push footer to the bottom */
html, body { height: 100%; }
body {
    margin:0;
    font-family: var(--family), serif;
    color:var(--text);
    background:#fff;
    line-height:1.45;

    display: flex;
    flex-direction: column;
    min-height: 100vh; /* ensure body covers full viewport */
}

/* let the main area grow to fill remaining space so its background reaches the bottom */
main {
    background:var(--main);
    padding:1rem 0;
    flex: 1 0 auto;
}

/* layout container */
.container{
    width:100%;
    max-width:var(--max-w);
    margin:0 auto;
    padding:0 0rem;
}

/* Header */
header{
    display: flex;
    align-items: center;
    gap: var(--gap);
    padding: 0.75rem 1rem;
    border-bottom: 1px solid rgba(0,0,0,0.06);
    background: var(--heading); /* keep existing background if desired */
    flex-wrap: wrap; /* allow wrapping on very small viewports */
}
header .container{
    display:flex;
    gap:var(--gap);
    align-items:center;
    padding:0.75rem 0;
}

/* logo */
#logo img{
    height: 64px;
    width: auto;
    display: block;
    border-radius: 6px;
}

#ueberschrift{
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: 0;
}

/* heading block */
#ueberschrift h1{
    margin:0;
    font-size:1.125rem;
    color:var(--heading-text);
    line-height:1.05;
}
#ueberschrift p{
    margin:0;color:var(--heading-text);font-size:0.95rem
}

/* Navigation */
#main-nav{
    margin-left: auto;
}
#main-nav ul{list-style:none;margin:0;padding:0;display:flex;gap:0.5rem;align-items:center}
#main-nav a{
    display:inline-block;padding:0.5rem 0.65rem;color:#fff;text-decoration:none;border-radius:6px;background:var(--nav);
    font-weight:600;font-size:0.95rem
}
#main-nav a:hover{filter:brightness(0.92)}

/* Main area */
main{
    background:var(--main);
    padding:1rem 0;
}
main .container{padding:0 1rem}

/* Sections */
section{margin-bottom:1rem;padding:3rem;border-radius:8px;background:rgba(255,255,255,0.2)}
h2,h3{margin:0 0 0.5rem 0;color:var(--heading)}
p, li, address{color:var(--text);margin:0 0 0.5rem 0}

/* Gallery grid (used in galerie.html) */
#galerie{
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.6rem;
    align-items: start;
}
#galerie img{
    width: 100%;
    height: 200px;               /* keep visual size on screen */
    object-fit: contain;         /* show the whole picture, scale to fit */
    object-position: center;
    background: var(--main);     /* letterbox color when aspect differs */
    border-radius: 6px;
    display: block;
}

/* Hero slider (index.html) */
#hero-slider{
    max-width: var(--max-w); /* keep container from getting too wide */
    margin: 0 auto;          /* center the slider */
    position: relative;
    overflow: hidden;
    background: var(--main); /* letterbox color when image aspect differs */
    aspect-ratio: 16/7;      /* keeps a consistent height relative to width */
    height: auto;            /* let aspect-ratio determine height */
}
#hero-slider img{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;     /* show whole image, scale down/up as needed */
    object-position: center;
    border-radius: 6px;
    opacity: 0;
    transition: opacity 0.6s ease;
    z-index: 1;
    pointer-events: none;
}
#hero-slider img.active{
    opacity: 1;
    z-index: 2;
    pointer-events: auto;
}

/* controls */
.slider-controls{
    position:absolute;
    top:50%;
    left:0;
    right:0;
    display:flex;
    justify-content:space-between;
    transform:translateY(-50%);
    padding:0 0.5rem;
    pointer-events:none;
}
.slider-controls button{
    pointer-events:auto;
    background:rgba(0,0,0,0.35);
    color:#fff;
    border:none;
    padding:0.35rem 0.6rem;
    border-radius:6px;
    font-size:1.2rem;
    line-height:1;
    cursor:pointer;
}
.slider-controls button:hover{filter:brightness(0.95);}

/* dots */
.slider-dots{
    position:absolute;
    left:50%;
    transform:translateX(-50%);
    bottom:0.6rem;
    display:flex;
    gap:0.45rem;
}
.slider-dots button{
    width:10px;
    height:10px;
    border-radius:50%;
    border:none;
    background:rgba(255,255,255,0.6);
    padding:0;
    cursor:pointer;
}
.slider-dots button.active{
    background:var(--nav);
    box-shadow:0 0 0 3px rgba(0,0,0,0.08);
}

#willkommen p{
    margin-top:2rem;
}

/* Contact / form */
form{display:block;max-width:700px}
label{display:block;font-weight:600;margin-bottom:0.25rem}
input[type="text"], input[type="email"], textarea{
    width:100%;padding:0.6rem;border:1px solid #ddd;border-radius:6px;background:#fff;
    font:inherit;color:var(--text)
}
button{
    background:var(--nav);color:#fff;border:none;padding:0.6rem 1rem;border-radius:6px;
    cursor:pointer;font-weight:700
}
button:hover{filter:brightness(0.95)}

#intro{
    max-width: var(--max-w);
    margin: 0 auto;
    padding: 1rem 1rem;
    aspect-ratio: 16/7;    /* controls container height relative to width */
    overflow: hidden;
    display: block;
    border-radius: 8px;
    background: var(--main); /* letterbox color if aspect differs */
}

#intro img{
    width: 100%;
    height: 100%;
    object-fit: contain;    /* show entire image, scale to fit */
    object-position: center;
    display: block;
    border-radius: 6px;
}

/* Footer */
footer{
    background:var(--heading);
    color:#fff;
    padding: 1rem 1rem 1rem 5%;
    border-top:4px solid rgba(0,0,0,0.06);
}
footer p{margin:0;font-size:0.95rem}

/* Utilities */
.mt-1{margin-top:0.5rem}
.mt-2{margin-top:1rem}
.text-center{text-align:center}
.visually-hidden{
    position:absolute!important;height:1px;width:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap
}

@media (min-width: 480px) {
    #galerie { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 720px) {
    #galerie { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 1024px) {
    #galerie { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 600px) {
    header{
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
    #main-nav{
        margin-left: 0;
        width: 100%;
    }
    #main-nav ul{
        flex-wrap: wrap;
    }

    /* Reduced padding for mobile to avoid excessive whitespace */
    main{
        padding: 0.5rem 0; /* was 1rem 0 */
    }
    section{
        padding: 1rem; /* was 3rem */
        border-radius: 6px;
    }

    /* slightly smaller gallery thumbnails on small screens */
    #galerie img{
        height: 140px; /* was 200px */
        object-fit: cover;
    }
}

/* Responsive breakpoints */
@media(min-width:720px){
    #hero-slider{ aspect-ratio: 16/6; }
    #hero-slider img{height:380px}
    #intro{ aspect-ratio: 16/6; }
    #galerie{grid-template-columns:repeat(3,1fr)}
    header .container{align-items:center}
    #ueberschrift h1{font-size:1.4rem}
}
@media(min-width:1024px){
    #galerie{grid-template-columns:repeat(4,1fr)}
    .container{padding:0 2rem}
    header .container{padding:1rem 0}
}

/* small accessibility focus */
.slider-dots button:focus{outline:3px solid rgba(90,156,81,0.25);outline-offset:3px}

/* Accessibility: focus states */
a:focus, button:focus, input:focus, textarea:focus{outline:3px solid rgba(90,156,81,0.25);outline-offset:2px}

.lightbox{
    position:fixed;
    inset:0;
    display:none;
    align-items:center;
    justify-content:center;
    background:rgba(0,0,0,0.65);
    z-index:9999;
    padding:1rem;
}
.lightbox.open{ display:flex; }
.lightbox-inner{
    position:relative;
    max-width:calc(var(--max-w) - 4rem);
    width:100%;
    max-height:calc(100vh - 4rem);
    display:flex;
    align-items:center;
    justify-content:center;
    gap:1rem;
    outline: none;
}
.lb-image-wrap{
    flex:1 1 auto;
    display:flex;
    align-items:center;
    justify-content:center;
    background:var(--main);
    border-radius:8px;
    padding:0.5rem;
    height:100%;
}
.lb-image-wrap img{
    max-width:100%;
    max-height:80vh;
    object-fit:contain;
    display:block;
    border-radius:6px;
}
.lb-close, .lb-prev, .lb-next{
    position:relative;
    background:rgba(255,255,255,0.9);
    border:none;
    color:#111;
    padding:0.4rem 0.6rem;
    border-radius:6px;
    cursor:pointer;
    font-size:1.25rem;
    line-height:1;
}
.lb-close{
    position:absolute;
    top:-10px;
    right:-10px;
    background:rgba(255,255,255,0.95);
}
.lb-prev, .lb-next{
    flex: 0 0 auto;
    height:48px;
    width:48px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:1.6rem;
    background:rgba(255,255,255,0.9);
}
.lb-prev{ margin-right:0.25rem; }
.lb-next{ margin-left:0.25rem; }
@media (max-width:720px){
    .lb-prev, .lb-next{
        display:flex;
        position:absolute;
        top:50%;
        transform:translateY(-50%);
        height:56px;
        width:56px;
        align-items:center;
        justify-content:center;
        font-size:1.4rem;
        background:rgba(255,255,255,0.95);
        z-index:10001;
        box-shadow:0 2px 8px rgba(0,0,0,0.15);
    }
    .lb-prev{ left:8px; margin-right:0; }
    .lb-next{ right:8px; margin-left:0; }

    /* give image wrapper horizontal padding so buttons don't overlap content */
    .lb-image-wrap{ padding:0.5rem 72px; }

    .lb-close{ z-index:10002; }
}

#galerie img{ cursor: pointer; }