/* =========================================================
   ✨ GOOGLE FONT IMPORT
========================================================= */
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;700&display=swap');


/* =========================================================
   🌸 GLOBALE SCHRIFT (ALLE ELEMENTE)
========================================================= */
*{
    font-family: 'Nunito', 'Poppins', sans-serif; /* Schriftart für ganze Seite */
}


/* =========================================================
   🌐 BODY (GRUNDEINSTELLUNG SEITE)
========================================================= */
body{
    font-family: Arial, sans-serif; /* Standard-Schrift */
    margin:0; /* kein Abstand außen */
    background:#ffffff; /* weißer Hintergrund */
}


/* =========================================================
   📌 HEADER (OBERE NAVIGATION)
========================================================= */
.header{
    display:flex; /* Logo + Menü nebeneinander */
    align-items:center; /* vertikal mittig */
    gap:30px; /* Abstand zwischen Elementen */
    padding:20px 40px; /* Innenabstand */
    background:#d8b1bd; /* rosa Hintergrund */
    position: sticky; /* bleibt beim Scrollen oben */
    top: 0; /* ganz oben */
    z-index: 100; /* über anderen Elementen */
}


/* =========================================================
   🖼️ LOGO
========================================================= */
.logo img{
    width:60px; /* Breite Logo */
    height:60px; /* Höhe Logo */
}


/* =========================================================
   🧭 NAVIGATION
========================================================= */
.nav-links{
    list-style:none; /* keine Punkte */
    display:flex; /* horizontal */
    gap:40px; /* Abstand */
    margin:0; /* kein Außenabstand */
    padding:0; /* kein Innenabstand */
}


/* LINKS IM MENÜ */
.nav-links a{
    text-decoration:none; /* keine Unterstreichung */
    color:#d86aa4; /* rosa Farbe */
    font-size:18px; /* Schriftgröße */
}


/* =========================================================
   ⭐ AKTIVE SEITE (HIGHLIGHT)
========================================================= */
.nav-links .active{
    padding:8px 15px; /* Innenabstand */
    border-radius:10px; /* runde Ecken */
}


/* =========================================================
   🖱️ HOVER EFFEKT NAVIGATION
========================================================= */
nav a:hover{
    color:white; /* wird weiß beim drüberfahren */
}


/* =========================================================
   🏷️ TITELBOX
========================================================= */
.start{
    text-align:center; /* mittig */
    color:white; /* weiße Schrift */
    background:#d86aa4; /* pink */
    padding:15px 25px; /* Innenabstand */
    border-radius:10px; /* runde Ecken */
    margin:30px auto; /* Abstand + zentriert */
    width:fit-content; /* passt sich Inhalt an */
}


/* =========================================================
   🧱 CONTAINER (BOX LAYOUT)
========================================================= */
.container{
    display:flex; /* flexible Boxen */
    flex-wrap:wrap; /* Umbruch */
    gap:20px; /* Abstand */
    max-width:1100px; /* maximale Breite */
    margin:40px auto; /* zentriert */
}


/* =========================================================
   📦 BOXEN
========================================================= */
.box{
    background:#EAEAEA; /* hellgrau */
    flex:1 1 calc(33% - 20px); /* 3 pro Reihe */
    border-radius:10px; /* runde Ecken */
    padding:20px; /* Innenabstand */
    text-align:center; /* Text mittig */
}


/* =========================================================
   🖼️ BILDER IN BOXEN
========================================================= */
.box img{
    width:100%; /* volle Breite */
    height:220px; /* feste Höhe */
    object-fit:cover; /* Bild wird zugeschnitten */
    object-position:center; /* Mittelpunkt bleibt sichtbar */
    border-radius:10px; /* runde Ecken */
    cursor:pointer; /* Hand Cursor */
    margin-bottom:10px; /* Abstand unten */
    transition:0.3s; /* weicher Effekt */
}


/* HOVER EFFEKT BILDER */
.box img:hover{
    transform:scale(1.03); /* leicht größer */
}


/* =========================================================
   🔳 LIGHTBOX (GROSSES BILD ANZEIGEN)
========================================================= */
#lightbox{
    display:none; /* versteckt */
    position:fixed; /* bleibt im Viewport */
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.8); /* dunkler Hintergrund */
    justify-content:center;
    align-items:center;
}


/* LIGHTBOX BILD */
#lightbox img{
    max-width:90%; /* maximale Breite */
    max-height:90%; /* maximale Höhe */
    border-radius:10px; /* runde Ecken */
}


/* =========================================================
   🔻 FOOTER
========================================================= */
.footer{
    text-align:center; /* mittig */
    padding:20px; /* Abstand */
}

.footer a{
    color:black; /* schwarze Links */
    margin:0 10px; /* Abstand */
    text-decoration:none; /* keine Linie */
}


/* =========================================================
   📱 HANDY VERSION
========================================================= */
@media (max-width:768px){

    .box{
        flex:1 1 100%; /* untereinander */
    }
}