/* komplett mit Flexbox erstellt */

body {
    display: flex;
    flex-direction: column;
    
    min-height: 100vh;
    font-family: 'Baskerville', 'Palatino Linotype','Liberation Serif','Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', 'Arial', 'sans-serif';
    
    /* verhindert den Scrollbalken, wenn der Bildschirm nicht länger als 100 vh ist */
    margin: 0%; 
}

/* header-image einfügen */
header {
    background-image: url("bilder/header-image-desktop.jpg");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    
    /* styling */
    min-height: 70vh;
}

/* logo im header mit link positionieren */
header img {
    position: relative;
    top: 1rem;
    width: 30vw;
    left: 35vw;
    border: 1px solid wheat;
    border-radius: 2.5vw;
    padding: 1% 2% 1% 2%;
    background-color: wheat;
    opacity: 0.9;
}

/* ----------- Navigation nav-linecross in Header -------------------------------- */

#nav-linecross {
    position: absolute;
    top: 0em;
    font-size: 1.25em;
    z-index: 50;
}

#nav-linecross ul {
    position: absolute;
}
#nav-linecross ul li {
    list-style-type: none;
    /* border: 5px dotted red */
}

#nav-linecross ul li ul {
    left: 0px;
}

/* --- erstes und letztes Element mit Radius versehen ------- */
#nav-linecross .erstes {
    border-top: 1px solid rgb(235, 235, 235);
    border-top-right-radius: 1em;
}

#nav-linecross .letztes {
    border-bottom: 1px solid rgb(235, 235, 235);
    border-radius: 0em 0em 1em 1em;
}

/* --- durch pos:abs wird content nicht verschoben */
/* --- ul zentriert über left ------------*/


/* --- li zentriert über right ---------- */
/* --- z-index - über content anzeigen -- */
#nav-linecross ul li ul li {
    width: 9em;
    padding: 0.25em;
    background-color: wheat;
    border-left: 1px solid rgb(235, 235, 235);
    border-right: 1px solid rgb(235, 235, 235);
    border-bottom: 1px solid white;
    text-align: center;
    /* border: 5px solid blue; */
    /* z-index: 10; */
}

/* --- a(nachor) für Hyperlink stylen */
#nav-linecross a {
    color: black;
    text-decoration: none;
}

#nav-linecross input {
    cursor: none;
}

/* --- hamburger erzeugen --------------- */
label.hamburger { 
    position: relative;
    display: block;
    background: wheat;
    width: 75px; 
    height: 75px;
}

/* ---------- die checkbox wird nicht angezeigt -- */
input#hamburger {display:none}

/* ---------- hier werden die Linien erzeugt und al nth-child zum Kreuz*/
.line { 
    position: absolute; 
    left: 12.5px;
    height: 3px; 
    width: 50px; 
    background: black; /* Farbe der Linien */
    display: block; 
    transition: 1s; 
    transform-origin: center; 
}

/* ---------- die Linien werden positioniert ----- */
.line:nth-child(1) { top: 15.5px; }
.line:nth-child(2) { top: 37.5px; }
.line:nth-child(3) { top: 58.5px; }


/* --------- die folgenden 3 Einträge machen aus den Linien ein Kreuz - */
/* --------- die erste Linie wird verschoben und um 45 Grad gedreht   - */
#hamburger:checked + .hamburger .line:nth-child(1){
    transform: translateY(21px) rotate(-45deg);
    height: 4px;
    background: red;
}

/* ---------- die zweite Linie wird durchsichtig gemacht  */
#hamburger:checked + .hamburger .line:nth-child(2){
    opacity:0;
}    

/* --------- die dritte Linie wird verschoben und um 45 Grad gedreht */
#hamburger:checked + .hamburger .line:nth-child(3){
    transform: translateY(-21px) rotate(45deg);
    height: 4px;
    background: red;
}

/* --- Untermenue verstecken --------------- */
#nav-linecross ul li ul {
    display: none;
}

/* --- Untermenue anzeigen ----------------- */
#nav-linecross .hackbox:checked ~ul {
    display: block;
}

/* ------ die Einträge von line-cross werden gehovert --- */
#nav-linecross ul li ul li:hover {
    background-color: white;
}

/* ----------- ende nav-linecross ---------------------- */



/* ------------ Content ------------------ */
main {    
    /* füllt die ganze freie Höhe aus */
    flex: 1;

    /* styling */
    position: relative;
    margin-left: auto;
    margin-right: auto;
    background-color: white;
}

/* ----- zentrierte Infos ------*/
.info {
    margin: 2em 0em;
    padding: 1em;
    font-size: 2em;
    text-align: center;
    color: green;
    background-color: whitesmoke;
    border-top: 1px solid orange;
    border-bottom: 1px solid orange;
}

article {
    /* flex-container */
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    
    /* styling */
    width: 80vw;
    margin: 0;
    margin-left: auto;
    margin-right: auto;
    background-color: rgb(250, 240, 228);
}

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

section {
    /* flex-item */
    flex: 1;
    
    /* styling */
    width: 50%;
    margin: 0;
    padding: 1em;
    font-size: 1.5rem;
}

/* ------ Text Hintergrund ----- */
.farbig { 
    background-color: wheat;
}

/* ----- Bereichs-Überschriften ------*/
.zentriert {
    color: green;
    font-size: 1.5rem;
    text-align: center;
    border: none;
}

/* ---- lighthouse meckert bei ul ul - also von hand neues Zeichen und verschoben  */
.kreis {
    position: relative;
    list-style-type: circle;
    left: 25px;
}

/* hervorheben <em>*/
em {
    font-weight: bold;
}

/* ----- zentrierte Infos in index.html ------*/
.kontakt {
    font-size: 2em;
    background-color: whitesmoke;
    margin: 2em 0em;
    padding: 1em;
    text-align: center;
    border-top: 2px solid orange;
    border-bottom: 2px solid orange;
}

.kontakt a {
    text-decoration: none;
}

h2 {
    flex-basis: 45%;
}

/* ----------- footer ----------------------------- */
footer {
    /* flex-container */
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;

    /* styling */
    min-height: 10vh;
    font-size: 1.25rem;
}

footer p {
    width: 33%;
    height: 1.5em;
    text-align: center;
    margin-bottom: 2em;
}

footer span {
    /* flex-container */
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-content: center;

    /* flex-item */
    flex: 1;

    /* styling */
    width: 100%;
    background-color: wheat;
    height: 3.25em;
}

footer a{
    text-decoration: none;
    margin: 0.5em;
}

footer span a {
    color: black;
}

footer a:hover {
    color: red;
    font-size: 1.25em;
}

/* ----- top-link ----- */

#top-link img {
    opacity: 0;
}
#top-link {
    position: fixed;
    opacity: 0.6;
    top: 85%;
    right: 15%;
    width: 50px;
    height: 50px;
    z-index: 1000;
    background: url('data:image/svg+xml;utf8,<svg width="50" height="50" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><circle cx="50" cy="50" r="45" fill="lightgrey" stroke="darkgrey" stroke-width="5"/><polygon points="20,65 50,25 80,65" stroke="black" stroke-width="1" fill="darkgrey"/></svg>') left no-repeat;
}

/* --------------------- Anpassung der Unterseiten --------------------------- */

#dsgvo,
#impressum{
    flex-direction: column;
    width: 60vw;
    margin-left: auto;
    margin-right: auto;
}

#dsgvo h1,
#impressum h1 {
    color: green;
    text-align: center;
    padding: 1rem;
}

#dsgvo h2,
#impressum h2 {
    color: green;
    padding: 1rem 0em;
}



/* ---------------- kontaktformularformular --------------- */

#kontakt  {
    flex-direction: column;
    justify-content: space-evenly;
}

#kontakt h1{
    text-align: center;
    color: green;
}

#kontakt h2{
    color: green;
}

#kontakt h3 {
    color: red;
}

#kontakt article {
    width: 50%;
    padding: 1em;
    border: 0em solid wheat;
    border-radius: 1em;
}


/* Kontaktformular */

/* Hinweis zum email Programm */
.breit {
    flex-basis: 100%;
    font-size: 1.25em;
    text-align: center;
    padding: 1em;
    background-color: antiquewhite;
    border: 2px solid orange;
    border-radius: 1em;
}

/* Überschrift über die Eingabefelder */
.darueber {
    flex-basis: 100%;
}

.kontaktform {
    margin-top:  1em;
}

.kontaktform ul {
    padding: 0;
}

.kontaktform li {
    list-style-type: none;
    margin-top: 1em;
}

.kontaktform label {
    float: left;
    width: 10em;
    margin-right: 1em;
    padding: 0.25em;
}

.kontaktform input {
    width: 20em;
    background-color: lightgray;
    padding: 0.25em;
}

.kontaktform button {
    position: relative;
    left: 35%;
    margin: 2em;
}

.kontaktform span {
    color: red;
}

#cookies {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    
    /* style */
    width: 100%;
    font-size: initial;
    text-align: center;
    margin-top: 3em;
    margin-bottom: 3em;
    background-color: whitesmoke;
    border-top: 2px solid orange;
    border-bottom: 2px solid orange;
}


@media all and (max-width: 1000px) {

    body {
        margin: 0;
        padding: 0;
    }
    
    header {
        min-height: 60vh;
        margin: 0;
        padding: 0;
        background-size: cover;
    }

    header img {
        width: 50vw;
        left: 30vw;
    }

    /* ----- content ----- */
 
    article {
        /* flex-container */
        display: flex;
        flex-direction: column;

        /* styling */
        width: 90%;
        margin-left: auto;
        margin-right: auto;
        background-color:white;
        font-size: initial;
    }
    
    section {
        /* flex-container */
        display: flex;
        flex-direction: column; 
        justify-content: center;
    }
    
    /* dreht bei mobil nicht die Reihenfolge um */
    .reverse {
        flex-direction: column;
    }
    
    /* ----- damit es nicht rechts übersteht width: auto ----- 
       ----- die Infokästen über dem Inhalt              ----- */
    .info {
        width: auto;
        font-size: 1.25em;
    }
    
    /* ----- damit es nicht rechts übersteht width: auto ----- 
       ----- Kontaktkasten über dem footer               ----- */
    .kontakt {
        /* width: auto; */
        font-size: 1.25em;
    }
    
    
    /* ----- width:auto nimmt die ganze Breite ein    -----
    ----- 100% lässt den Inhalt rechts rauswandern ----- */
    .farbig {
        width: auto;
        margin: 0em;
        margin-bottom: 2em;
        font-size: 1em;
        width: 90%;
    }
    
    .zentriert {
        margin: 0em;
        padding: 0em;
        font-size: 1em;
    }

    /* ----- footer ----- */
    footer {
        /* flex-container */
        flex-direction: column;
    }

    footer p {
        width: 100%;
        margin: 0em;
        margin-top: 0.5em;
        margin-bottom: 0.5em;
    }
    
    footer span {
        /* flex-container */
        flex-direction: column;

        /* styling */
        width: 100%;
        height: auto;
        margin-top: 1em;
    }
/*     
    /* ----- Unterseiten mobil anpassen ----- */

    #kontakt article {
        width: 80%;
        margin-left: auto;
        margin-right: auto;
        border: 1px solid orange;
        justify-content: center;
        align-content: center;
    }

    .breit {
        flex-basis: 80%;
    }

    .breit2 {
        justify-content: center;
        align-content: center;
        padding: 0.5rem;
        border: 1px solid orange;
    }

    form {
        padding: 0.5rem;
    }

    textarea {
        width: 90%;
    }
    
    #Cookies {
        min-height: 40vw;
    }


    #dsgvo,
    #impressum {
        width: 90%;
    }

    /* --- nav-linecross  mobil anpassen ----- */
    label.hamburger {
        width: 50px; 
        height: 50px; 
    }

    .line { 
        position: absolute; 
        left: 7.5px;
        height: 2px; 
        width: 35px; 
    }    
    
    .line:nth-child(1) { top: 12px; }
    .line:nth-child(2) { top: 24px; }
    .line:nth-child(3) { top: 36px; }
    
    #hamburger:checked + .hamburger .line:nth-child(1){
        transform: translateY(12px) rotate(-45deg);
        height: 4px;
        background: red;
        /* border: 2px solid orangered; */
    }

    
    /* ---------- die zweite Linie wird durchsichtig gemacht  */
    #hamburger:checked + .hamburger .line:nth-child(2){
        opacity:0;
    }    
    
    /* --------- die dritte Linie wird verschoben und um 45 Grad gedreht */
    #hamburger:checked + .hamburger .line:nth-child(3){
        transform: translateY(-12px) rotate(45deg);
        height: 4px;
        background: red;
    }

    /* ----- nav-linecross  Ende ----- */

} 

@media all and (min-width: 2100px) {
    main {
        width: 60%;
        margin-left: auto;
        margin-right: auto;
    }

    article {
        width: 100%;
    }

    #impressum,
    #dsgvo {
        width: 40%;
    }

    #cookies {
        width: 60%;
    }
    
    footer {
        width: 60%;
        margin-left: auto;
        margin-right: auto;
    }
}