/* =========================================================
   🌸 BODY = GRUNDEINSTELLUNGEN DER GANZEN SEITE
========================================================= */
body{
    font-family: 'Poppins', sans-serif; /* Schriftart der Website */
    margin:0; /* kein Außenabstand */
    background:#ffffff; /* weißer Hintergrund */
}


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


/* LOGO IM HEADER */
.logo img{
    width:60px; /* Breite Logo */
    height:60px; /* Höhe Logo */
}


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


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


/* HOVER EFFEKT BEI LINKS */
nav a:hover{
    color:white; /* wird weiß beim drüberfahren */
}


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


/* =========================================================
   🧱 GRID LAYOUT (STARTSEITE BOXEN)
========================================================= */
.container{
    display:grid; /* Raster Layout */
    grid-template-columns:2fr 1fr; /* 2 große + 1 kleine Spalte */
    gap:20px; /* Abstand */
    padding:40px; /* Innenabstand */
}


/* BOXEN DESIGN */
.box{
    background:#EAEAEA; /* hellgrau */
    padding:20px; /* Innenabstand */
    border-radius:15px; /* runde Ecken */
    text-align:center; /* Text mittig */
}


/* =========================================================
   🖼️ BILD IN BOX
========================================================= */
.image img{
    width:100%; /* volle Breite */
    height:250px; /* feste Höhe */
    object-fit:cover; /* Bild wird zugeschnitten */
    border-radius:15px; /* runde Ecken */
}


/* =========================================================
   ⭐ BESONDERE BOXEN
========================================================= */
.box1{
    position:relative; /* für spätere Positionierung */
}

/* diese Box geht über 2 Spalten */
.box4{
    grid-column:1 / 3;
}


/* =========================================================
   🔘 BUTTON
========================================================= */
.btn-schule{
    display:inline-block; /* wie Button */
    margin-top:10px; /* Abstand oben */
    padding:6px 14px; /* Innenabstand */
    background:#ff4d94; /* pink */
    color:white; /* weiße Schrift */
    text-decoration:none; /* keine Linie */
    border-radius:50px; /* rund */
    font-size:14px; /* Schriftgröße */
}


/* HOVER BUTTON */
.btn-schule:hover{
    background:#e60073; /* dunkler pink */
}


/* =========================================================
   🌄 PARALLAX EFFEKT
========================================================= */
.parallax{
    height:400px; /* Höhe des Bereichs */
    background-image:url("image/dein-bild.jpg"); /* Hintergrundbild */
    background-attachment:fixed; /* Parallax Effekt */
    background-position:center; /* zentriert */
    background-repeat:no-repeat; /* kein Wiederholen */
    background-size:cover; /* füllt Fläche */
}


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

.footer a{
    color:black; /* schwarze Links */
    margin:0 10px; /* Abstand zwischen Links */
}


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

    .container{
        grid-template-columns:1fr; /* alles untereinander */
    }

    .box4{
        grid-column:1; /* keine 2 Spalten mehr */
    }

    .parallax{
        background-attachment:scroll; /* kein Parallax auf Handy */
    }
}