/* =====================================================
   FIXPUNKT FEY
   style.css
   Teil 1
   Grundlayout
===================================================== */

/* ===========================
   Grundeinstellungen
=========================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    font-family:Arial, Helvetica, sans-serif;
    color:#333;
    background:#ffffff;
    line-height:1.7;
}


/* ===========================
   Farben
=========================== */

:root{

    --gruen:#2E6B4A;
    --gruen-hell:#EAF4EC;
    --gruen-mittel:#6FA77A;

    --grau:#555;
    --hell:#ffffff;

}


/* ===========================
   Container
=========================== */

.container{

    width:90%;
    max-width:1150px;
    margin:auto;

}


/* ===========================
   Überschriften
=========================== */

h1{

    font-size:3rem;
    color:var(--gruen);
    margin-bottom:15px;

}

h2{

    font-size:2rem;
    color:var(--gruen);
    margin-bottom:30px;

}

h3{

    color:var(--gruen);
    margin-bottom:18px;

}


/* ===========================
   Text
=========================== */

p{

    margin-bottom:18px;

}

ul{

    margin-left:22px;

}

li{

    margin-bottom:10px;

}


/* ===========================
   Links
=========================== */

a{

    color:var(--gruen);
    text-decoration:none;

}

a:hover{

    text-decoration:underline;

}


/* ===========================
   Bilder
=========================== */

img{

    max-width:100%;
    height:auto;
    display:block;

}


/* ===========================
   Navigation
=========================== */

header{

    position:sticky;
    top:0;

    background:white;

    box-shadow:0 2px 10px rgba(0,0,0,.08);

    z-index:1000;

}

nav{

    display:flex;

    justify-content:center;

    gap:40px;

    padding:22px;

}

nav a{

    color:var(--gruen);

    font-weight:bold;

    transition:.3s;

}

nav a:hover{

    color:var(--gruen-mittel);

}


/* ===========================
   Bereiche
=========================== */

section{

    padding:90px 0;

}


/* ===========================
   Startbereich
=========================== */

.hero{

    background:linear-gradient(
        to bottom,
        white,
        var(--gruen-hell)
    );

    text-align:center;

}

.hero-logo{

    margin-bottom:40px;

}

.hero-logo img{

    width:220px;

    margin:auto;

}

.hero-text{

    max-width:850px;

    margin:auto;

}

.hero-text h2{

    color:#555;

    font-weight:normal;

}

.hero-text p{

    font-size:1.2rem;

}
/* =====================================================
   ÜBER MICH
===================================================== */

#ueber{

    background:#ffffff;

}

.ueber-grid{

    display:grid;

    grid-template-columns:280px 1fr;

    gap:60px;

    align-items:center;

}

.profilbild{

    text-align:center;

}

.profilbild img{

    width:260px;
    height:260px;

    object-fit:cover;

    border-radius:50%;

    border:6px solid var(--gruen-hell);

    box-shadow:0 10px 25px rgba(0,0,0,.15);

    margin:auto;

}

.ueber-text{

    font-size:1.08rem;

}


/* =====================================================
   ANGEBOTE
===================================================== */

#angebote{

    background:var(--gruen-hell);

}


/* =====================================================
   KARTEN
===================================================== */

.karten{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(300px,1fr));

    gap:30px;

    margin-top:40px;

}

.karte{

    background:white;

    padding:35px;

    border-radius:18px;

    box-shadow:0 8px 22px rgba(0,0,0,.08);

    transition:.3s;

}

.karte:hover{

    transform:translateY(-6px);

    box-shadow:0 15px 35px rgba(0,0,0,.15);

}


/* =====================================================
   KARTENÜBERSCHRIFTEN
===================================================== */

.karte h3{

    margin-top:35px;

    margin-bottom:18px;

    font-size:1.25rem;

}

.karte h3:first-child{

    margin-top:0;

}


/* =====================================================
   LISTEN
===================================================== */

.karte ul{

    margin:0 0 35px 22px;

}

.karte li{

    margin-bottom:12px;

    line-height:1.6;

}

.karte p{

    margin-bottom:18px;

}
/* =====================================================
   QUALITÄT
===================================================== */

#qualitaet{

    background:#ffffff;

}

#qualitaet p{

    max-width:850px;

}


/* =====================================================
   KONTAKT
===================================================== */

#kontakt{

    background:var(--gruen-hell);

}

#kontakt p{

    margin-bottom:18px;

}

#kontakt strong{

    color:var(--gruen);

}

#kontakt a{

    font-weight:bold;

}


/* =====================================================
   DGSv-LOGO
===================================================== */

.dgsv-logo{

    text-align:center;

    margin-top:50px;

}

.dgsv-logo p{

    margin-bottom:20px;

    font-weight:bold;

    color:var(--gruen);

}

.dgsv-logo img{

    width:170px;

    margin:auto;

}


/* =====================================================
   FOOTER
===================================================== */

footer{

    background:#2f2f2f;

    color:white;

    text-align:center;

    padding:35px 20px;

}

footer p{

    margin-bottom:10px;

}

footer a{

    color:white;

}

footer a:hover{

    color:#dddddd;

}


/* =====================================================
   SMARTPHONE
===================================================== */

@media (max-width:900px){

    nav{

        flex-wrap:wrap;

        gap:20px;

    }

    .ueber-grid{

        grid-template-columns:1fr;

        text-align:center;

        gap:35px;

    }

    .profilbild img{

        width:220px;
        height:220px;

    }

    .karten{

        grid-template-columns:1fr;

    }

    h1{

        font-size:2.4rem;

    }

    h2{

        font-size:1.8rem;

    }

    .hero{

        padding:70px 0;

    }

}

@media (max-width:600px){

    body{

        font-size:16px;

    }

    nav{

        flex-direction:column;

        align-items:center;

    }

    .container{

        width:94%;

    }

    section{

        padding:60px 0;

    }

    .hero-logo img{

        width:180px;

    }

}