*{    margin: 0; padding: 0; }

body {
    font-family: 'Raleway', sans-serif; 
    color: #121212;
}

ul {    list-style: none; }

h3 {
    padding-bottom: 0.4rem;
}

h2 {
    padding-bottom: 1rem;
}

p {padding-bottom: 1rem;}

a {
    color: inherit;
    text-decoration: none;
}

.top-section {
    padding-bottom: 4rem;
}

.parent-toplevel {
    display: flex;
    justify-content: center;
    flex-direction: row;
    flex-wrap: wrap;
    background-color: #343434;
}

.parent {
    display: flex;
    justify-content: center;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
}

.galerie-abstand {
    gap:0.3rem;
}

.parent-kontakt {
    display: flex;
    justify-content: center;
    flex-direction: row;
    flex-wrap: wrap;
}

.abstand_titel {
    padding-left:0.6rem;
    padding-right:1.2rem;
}

.section-padding{
    padding-bottom: 2rem;
}

.padding-footer-links{
    padding: 1.0rem;
}

.section-padding-footer{
    padding-top: 2rem;
}

.grau{
    background-color: #343434;
    color: #fff;
}

.zentriert {
    text-align: center;
}
.mitte{
    flex-basis: 1280px;
    min-width: 550px;
}

.textbox {
   margin: 1rem 1rem 
}

.textbox-kontakt {
    margin: 1rem 3rem 0rem 1rem; ;
 }

.spalte{
    flex-basis: 50%;
    min-width: 250px;
    max-width: 640px;
}

.spalte-100{
    flex-basis: 1280px;
    min-width: 250px;
    max-width: 1280;
}


.bild {
    object-fit:cover;
    height:auto;
    width:100%;
}

.titelbild {
    box-shadow: 0.6rem 0.6rem 5px #343434;
}

.navigation {
    justify-content:  space-between;
    display: flex;
}

.logo{
    font-size: 1.2rem;
    font-weight: 700;
}

.ul-flex {
    margin: 0.2rem 1rem;
    display: flex;
    justify-content:  space-evenly;
}

.ul-flex-footer {
    display: flex;
    justify-content: space-evenly;   
}

.li-margin {
    margin: 0 1.5rem;
}

.hero-links{
    padding: 2rem 0rem;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content:center;
}

.btn-main {
    background-color: #343434;
    color: #fff;
    padding: 0.8rem 1.8rem;
    transition: 0.4s ease-in-out;
    border:none;
}

.btn-main:hover{
    background-color: #fff;
    color: #121212;
}

.btn-secondary {
    background-color: #fff;
    color: #343434;
    padding: calc(0.8rem - 2px) calc(1.8rem - 2px);  
    transition: 0.4s ease-in-out;
    border: 2px solid;
}


.btn-secondary:hover{
    /* background-color: #c7ffb6;*/
    background-color: #ccc;
    
}




.child-kontakt {
    width:100%;
    padding: 1rem 0rem 0rem 0rem;
}



input[type="text"],
input[type="password"],
input[type="email"],
input[type="tel"],
input[type="search"],
input[type="url"],
input[type="date"],
input[type="time"],
input[type="number"],
select,
textarea 
{
        -moz-appearance: none;
        -webkit-appearance: none;
        -ms-appearance: none;
        appearance: none;
        background: #ffffff;
        border-radius: 0.375em;
        border: none;
        border: solid 1px rgba(210, 215, 217, 0.75);
        color: inherit;
        font-family: inherit;
        display: block;
        outline: 0;
        padding: 1em;
        text-decoration: none;
        width: 100%;
       
}



        input[type="text"]:invalid,
        input[type="password"]:invalid,
        input[type="email"]:invalid,
        input[type="tel"]:invalid,
        input[type="search"]:invalid,
        input[type="url"]:invalid,
        input[type="date"]:invalid,
        input[type="time"]:invalid,
        input[type="number"]:invalid,
        select:invalid,
        textarea:invalid {
                box-shadow: none;
        }

        input[type="text"]:focus,
        input[type="password"]:focus,
        input[type="email"]:focus,
        input[type="tel"]:focus,
        input[type="search"]:focus,
        input[type="url"]:focus,
        input[type="date"]:focus,
        input[type="time"]:focus,
        input[type="number"]:focus,
        select:focus,
        textarea:focus {
                border-color: #343434;
                box-shadow: 0 0 0 1px #343434;
        }



        input[type="submit"],
        input[type="reset"],
        input[type="button"],
        button,
        .button {
            font-family: inherit;
            cursor: pointer;
        }

             



@media ( max-width: 650px ) {
    .mitte{
        flex-basis: 100%;
        min-width: 0;
    }

    .parent {
        flex-direction: column;
        
    }

    .reverse {
        flex-direction: column-reverse;
    }

    .spalte{
        flex-basis: 100%;
        max-width: 1280;
        width: 100%;
    }

    .navigation, 
    .ul-flex,
    .ul-flex-footer  {
        flex-direction: column;
    }

    
    .li-margin {
        margin: 1.5rem 0rem 0rem;
    }

    .abstand_oben {
        padding-top: 2rem;
    }

    .abstand_unten {
        padding-bottom: 2.5rem;
    }





}