/* DAGEGEN.com – modernes, dunkles Layout */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth}
body{
    background:#0a0a0a;
    color:#e8e8e8;
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
    min-height:100vh;
    display:flex;
    flex-direction:column;
}

/* Header */
.site-header{
    text-align:center;
    padding:48px 24px 24px;
    border-bottom:1px solid #1a1a1a;
    background:linear-gradient(180deg,#111 0%,#0a0a0a 100%);
}
.site-header .logo{
    max-width:min(720px,90vw);
    height:auto;
    display:inline-block;
}
.site-header h1{
    margin:24px 0 0;
    font-size:clamp(1.4rem,3vw,2.2rem);
    font-weight:300;
    letter-spacing:.05em;
    color:#fff;
}
.site-header .tagline{
    margin:8px 0 0;
    color:#888;
    font-size:.95rem;
    letter-spacing:.1em;
    text-transform:uppercase;
}

/* Main */
.site-main{
    flex:1;
    width:100%;
    max-width:1200px;
    margin:0 auto;
    padding:48px 24px;
}

.intro{
    max-width:760px;
    margin:0 auto 64px;
    font-size:1.05rem;
}
.intro p{margin:0 0 1.1em}
.intro .hinweis{
    border-left:3px solid #c00;
    padding:12px 18px;
    background:#141414;
    color:#ccc;
    font-size:.95rem;
}

h2.section-title{
    font-size:1.6rem;
    font-weight:300;
    letter-spacing:.05em;
    text-align:center;
    margin:0 0 32px;
    color:#fff;
}
h2.section-title::after{
    content:"";
    display:block;
    width:48px;
    height:2px;
    background:#c00;
    margin:12px auto 0;
}

/* Galerie */
.gallery{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
    gap:14px;
}
.gallery a{
    display:block;
    overflow:hidden;
    border-radius:6px;
    background:#111;
    aspect-ratio:1/1;
    position:relative;
    transition:transform .25s ease,box-shadow .25s ease;
}
.gallery a:hover{
    transform:translateY(-3px);
    box-shadow:0 10px 30px rgba(0,0,0,.6);
}
.gallery img{
    width:100%;height:100%;
    object-fit:cover;
    display:block;
    transition:transform .4s ease,opacity .25s ease;
    opacity:0;
}
.gallery img.loaded{opacity:1}
.gallery a:hover img{transform:scale(1.05)}

/* Kontakt */
.contact{
    text-align:center;
    margin:72px auto 0;
    max-width:600px;
    padding:32px;
    background:#111;
    border-radius:8px;
}
.contact a{color:#fff;font-weight:500}
.contact a:hover{color:#ff5252}

/* Inhaltsseiten */
.content{
    max-width:760px;
    margin:0 auto;
}
.content h1{
    font-size:clamp(1.6rem,3vw,2.4rem);
    font-weight:300;
    margin:0 0 24px;
    border-bottom:1px solid #222;
    padding-bottom:16px;
}
.content h2{font-size:1.2rem;color:#fff;margin-top:32px}
.content p{margin:0 0 1em;color:#cfcfcf}
.content a{color:#ff7070}

/* Footer */
.site-footer{
    text-align:center;
    padding:32px 24px;
    border-top:1px solid #1a1a1a;
    color:#666;
    font-size:.9rem;
    background:#080808;
}
.site-footer nav a{
    color:#bbb;
    text-decoration:none;
    margin:0 8px;
}
.site-footer nav a:hover{color:#fff}
.site-footer .copy{margin:12px 0 0;font-size:.8rem;color:#555}

/* Lightbox */
.lightbox{
    position:fixed;inset:0;
    background:rgba(0,0,0,.95);
    display:none;
    align-items:center;
    justify-content:center;
    z-index:9999;
    padding:24px;
    cursor:zoom-out;
}
.lightbox.open{display:flex}
.lightbox img{
    max-width:100%;
    max-height:100%;
    object-fit:contain;
    box-shadow:0 0 40px rgba(0,0,0,.8);
    border-radius:4px;
}
.lightbox .close{
    position:absolute;
    top:16px;right:24px;
    font-size:2rem;
    color:#fff;
    background:none;border:none;
    cursor:pointer;
    line-height:1;
}
.lightbox .nav{
    position:absolute;
    top:50%;transform:translateY(-50%);
    background:rgba(255,255,255,.08);
    color:#fff;border:none;
    width:48px;height:48px;
    border-radius:50%;
    font-size:1.5rem;
    cursor:pointer;
    transition:background .2s;
}
.lightbox .nav:hover{background:rgba(255,255,255,.18)}
.lightbox .prev{left:24px}
.lightbox .next{right:24px}

@media (max-width:600px){
    .site-main{padding:32px 16px}
    .gallery{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px}
    .lightbox .nav{width:40px;height:40px}
}