/*SCHRIFTEN*/
/*Überheaderschrift*/
h6 {font-family:'Poppins', sans-serif;
    font-size: 0.8rem;
    color: white; /*Schriftfarbe*/
    /*text-shadow: 1px 1px 2px black, 0 0 0.2em black;*/
    background-color: #DFD720;
    /*border-style:none; border-color: #FF00FF;*/
    text-decoration: none;
    padding: 1.5px;
    margin: 0.1em; /*Abstand gegen benachbarte Elemente fest*/

    flex: 1 100%; /*Komplette Breite annehmen*/
    }

h6 a {text-decoration: none; color: white}
h6 a:hover {color:#FF3300} /*Schriftfarbewechsel*/

/*Artikelüberschriften*/
h2 {font-family: 'Poppins', sans-serif;
    color: #a15296;
    font-size: 1.5rem}

/*Normale Schrift*/
p{font-family: 'Poppins', sans-serif; font-size: 1 rem; font-weight: 600; text-decoration: none}
a{text-decoration: none}

article{text-decoration: none;}

h5 /*Footerschrift*/
{font-family: 'Poppins', sans-serif;
     font-size: 0.8rem; color: white;
    padding: 0.3rem 1rem;
    float: right;}


/*POSITIONIERUNG / FORMFORMATIERUNG*/
/*Mittig*/
.flex {display: flex; 
    justify-content: center; 
    align-items: center}

/*rund*/ .rund{border-radius: 50%;}

hr.rot {background-color: #FF3300; border: #FF3300; padding: 2px; height: 1 rem}
hr.weiss {background-color: white; border: white; padding: 2px; height: 1 rem}
hr.gruen {background-color: #8BC694; border: #8BC694; height: 1 rem; padding: 2px; height: 1 rem}
hr.gelb {background-color: #FFFF33; border:#FFFF33; height: 1 rem; padding: 2px;; height: 1 rem}
hr.durchsichtig {border: 0;height: 2px; background-image: transparent;}
hr.none {border: 0;height: 0.6rem; background-image: transparent;}

/* FLEX: Elemente sinnvoll neben- und untereinander */
body {display: flex; /* -> Anweisung direkte Kindelemente als flexible Objekte zu behandeln*/
    flex-flow: row wrap; /*Untereinander dennoch beibehalten*/
    margin: 0 auto;
    max-width: 60em; /*BREITE VON DER WEBSEITE*/
    background-image: url("aquahintergrund.jpg"); /*HINTERGRUNDBILD*/
    background-attachment: fixed
  }

article {
    padding-top: 0.2rem; 
    padding-left: 1.8rem; 
    padding-right: 1.8rem;

    }

aside { display: flex; 
        justify-content: center; 
        align-items: center;}

/* Mobile first - alle Dokument-Blöcke bekommen 100% Breite */
header, nav, nav a, article, aside, footer {flex: 1 100%;}
article{background-color: snow;}

.halb {flex: 1 50%; background-color: transparent}


hr, footer {padding: 0px;
    margin: 0px; /*Abstand gegen benachbarte Elemente fest*/
    flex: 1 100%; /*Komplette Breite annehmen*/}

/* nebeneinander bei ausreichender Breite / HINTERGRUNDFARBE */
@media all and (min-width: 32em) {
    article {flex: 3 1 0%; background-color: snow;}
    aside {flex: 1 1 0%; display: flex; background-color:transparent;}
    .halb {flex: 1 1 0%; background-color:transparent;}
    .snow{background-color: snow}
  }

/**************************************************/
/*Navigationsbar*/
/*Hintergrund des Ganzes*/
nav ul {list-style-type: none;
    margin: 0;
    padding-left: 0.5rem;
    overflow: hidden; /*Was geschieht wenn Inhalt zu gross ist zum anzeigen. Alternativ: scroll / auto*/
    background-color: #a15296;}

nav li {display: inline-block; /* Navigationpunkte (li) nebeneinander anordnen */
        margin: 0.3em auto; /* Erster Wert ist Abstand oben/unten // Zweiter Wert ist Abstand zum nächsten Punkt (links/rechts)*/
        flex: 1 1 100%;}
nav li a {
        display: inline-block;
        text-align: center;
        margin: 0;
        padding: 0.5em; /* Umrandungsabstand */
        border-radius: 0.1em; /* Randabschleifung */
        line-height: 120%; /*Höhe vom Kästli*/
        /*Schrift*/
        text-decoration: none; /* Entfernung Unterstrich */
        font-family: 'Poppins', sans-serif;
        font-weight:600;
        font-size: 100%;
        color: white;}
/* Hover: Farbe ändert sich beim drüberfahren */
nav li a:hover {
    background-color: white;
    /*box-shadow: 0 5px 10px #FF3300 inset; /* Schattierung von oben nach unten*/
    color:  #a15296}

/********************************************************/
/* Footer */
/*Schrift -->h5*/
footer /* Hintergrundfarbe */{
	background: #a15296;
    border-style: thin solid}

.fa {   width: 1rem; height: 1rem;
        text-align: center; /*Mittigs Logo*/
        text-decoration: none; /*Entfernung Unterstrich*/
        border-radius: 25%;
        margin: 0.2rem 0.2rem; /*Abstrand vom Logo nach aussen*/
        padding: 0.5rem 0.5rem /*Abstand vom Innenlogo zum Logorand}*/  
        }

.fa-instagram /*InstaLOGO*/
        {background: #a15296;
        color: white; } 
.fa-instagram:hover {opacity: 0.7;
            background-color: white;
            color:  #a15296} 
.fa-envelope/*MailLOGO*/
{background: #8BC694;
    color: white; } 
.fa-envelope:hover {opacity: 0.7;
    background-color: white;;
    /*box-shadow: 0 5px 10px rgb(231, 101, 50) inset; /* Schattierung von oben nach unten*/
    color:  #8BC694}

/*FARBEN: 
ALtes violett: a5559a
rot: FF3300*/    
/*Footer-Ende*/

/*TESSSSSSSSSSSSSSSSSSSST*/

/*BUTTON*/
button {
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
    background-color: white; 
    color: black; 
    border: 2px solid #8BC694;
    font-family:'Poppins', sans-serif;
    font-size: 1.2rem;
  }

  .button:hover {
    background-color: #8BC694;
    color: white;
  }