/*
Gelb: ffed00
*/

* {
    box-sizing: border-box;
}
img {
    outline: 0;
    max-width: 100%; 
    height: auto;
    display: block;
}

html {
    height: 100%;
}
body {
    width: 100%;
    margin: 0;
    padding: 0;
    font-family: 'Open Sans', sans-serif;

}


header {
    margin-bottom: 100px;
    padding: 1em;
    padding-top: 2em;
    display: flex;
    justify-content: center;
}

/* LOGO */
header img {
    /* Abstand nach außen */
    /* Höhe */
    height: 3.5em;
    width: auto;
}
main {
    display: flex;
    flex-direction: column;
    margin: 1.5vw;
    
    
    
/*    background-size: 100% auto;*/
    background-size: contain;
   
    background-repeat: no-repeat;
    background-position: center;
    
/*     Desktop 1024 */
    
/*    background-image: url('../img/border.png');*/
/*    background-image: url('../img/strich.png');*/
    
    background-image: url('../img/strichhinten-01.png');
    
}

@media (min-width: 1024px){
    main {
        /* Desktop 1920x1080 */
        background-image: url('../img/border_display.png');
  
    }
}


main section {
    background: white;
    
    border-color: #ffed00;
    border-width: 5px;
    border-style: solid;
    
    display: inline-block;
    
    position: relative;
    
    min-height: 200px;
    min-width: 200px;
    
    max-width: 48vw;
    
    
    /* Abstand nach oben */
    margin-top: -100px;
    
    font-size: 12px;
    
}


main section:nth-child(odd) {
    
}
main section:nth-child(even) {
    
    align-self: flex-end;
}

/* Größe der Section

->  wenn du einen Abstand nach außen definierst (margin),
    dann musst du das Element um die entsprechende Zahl kleiner machen.
*/
main section:nth-child(1) {
    margin-top: -5vw;
    min-width: 30vw;
    margin-left: 10vw;
    max-width: 38vw;
}
main section:nth-child(2) {
/* Abstand nach oben */
    margin-top: -80px;
    min-width: 35vw;
    margin-right: 5vw;
    max-width: 18vw; /*war davor 38vw*/
}
main section:nth-child(3) {
    /* Abstand nach oben */
    margin-top: -1em;
    min-width: 30vw;
    margin-left: 5vw;
}
main section:nth-child(4) {
    /* Abstand nach oben */
    margin-top: -10em;
    min-width: 30vw;
    margin-right: 5vw;
}
main section .headline {
    
    /* Höhe der Headline */
    height: 80px;
    /* Versatz nach oben */
    top:-40px;
    left: .8em;
    
    position: absolute;
}
main section .headline span {
    font-size: 1.5em;
    
    height: 50%;
    display: flex;
    align-items: center;
    font-weight: bold;
    color: #ffed00;
    text-transform: uppercase;
    font-size: 35px;
    font-family: monospace;
}
main section .headline span:nth-child(2)::after {
    
    /* Gelbe Balken hinter der Headline */
    /* Breite */
    width: 1.5em;
    /* Höhe */
    height: 4px;
    /* Abstand nach links */
    margin-left: .5em;
    
    content: "";
    background: #ffed00;
    top: 6px;
    position: relative;
}
main section .text {
    margin-top: 50px;
}
main section .text p {
    padding: 1em;
}
main section .text > p:last-of-type {
    padding-top: 0;
}

/* Bild von Anna */
main section .profilbild {
    width:70%;
    margin-top: -20px;
    margin-left: 4.5em;
}



/* Listen */
ul {
    margin: 0;
    padding: 0;
    margin-left: 3em;
}


/* Kontaktkasten */
.kontakt {
   
}
.kontakt .item  {
    /* Abstand nach unten */
    margin-bottom: .5em;
    
    display: flex;
    align-items: center;
}
.kontakt .item img  {
    /* Abstand nach rechts */
    margin-right: .5em;
    width: auto;
    height: 20px;
    margin-left: 2em;
}
.kontakt .item span  {
    display: flex;
    align-items: center;
}
.kontakt .item span a  {
    text-decoration: none;
    color: black;
}





/* Hier für Tablets etc. */

@media screen and (max-width: 768px) {
    body {
        
    }
    main {
        padding: 0;
        margin: 0;
        background-image: none;
    }
    main section {
        margin: 0 !important;
        padding: 0 !important; 
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        
        margin-bottom: 100px !important;
        
        border: 0;
        border-top: 5px solid;
        border-color: #ffed00;
    }
}