/*Autor: "Elisabeth Edert"  */
body {
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    color: #4D4D4D;
    margin: 0%;
}

/* Zeigt den englischen Text bei Aufruf der Seite nicht und zunächst nur den deutschen Text
   Die Englischen Menüpunkte sollen initial ebenfalls nicht angezeigt werden*/

#ankertags .en,
.en {
    display: none;
}

.de {
    display: block;
}

/* Header */
header {
    width: 100%;
    z-index: 1;
}

#top-bar {
    padding-block: 20px;
}

/* Mittelteil bestehend aus einer alles umfassenden Div "content", welche aside main und aside beinhaltet */
#content {
    display: flex;
    flex-direction: row;
}

aside {
    background: #F5F5F5;
    z-index: 2;
}

#left {
    width: 15%;
    padding-right: 0%;
}

#middle {
    width: 75%;
}

#right {
    width: 10%;
}

/* Footer */
footer {
    padding: 0% 0% 0% 0%; 
}

footer p {
    padding-top: 10px;
    text-align: right;
}

/* Definition Schriftgrößen*/
h1 {
    font-size: 3em;
    line-height: .9em;
    text-align: center;
    margin: 10px;
}

h2 {
    font-size: 2.0em;
    line-height: 1.1em;
    margin: unset;
    /* margin unset reduziert ungewollte Lücken*/
}

h3, blockquote {
    font-size: 1.7em;
    line-height: 1em;
    font-style: italic;
    margin: unset;
}

p {
    margin: unset;
}

/* Button allgemein */
button {
    display: inline-block;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    border: none;
    border-radius: 4px;
    margin-top: 10px;
    padding: 10px;
    background: #D3D8CB;
}

button:hover {
    cursor: grab;
    font-weight: 700;
}

/* Section-Styles*/
section {
    height: fit-content;
    margin-top: 0%;
}

.c1,
.c2,
.c3,
.c4 {
    padding: 30px 10% 30px 10%;
}

.c1,
.c5 {
    background-color: #F5F5F5; /* sehr helles grau */
}

.c2 {
    background-color: #F5F5F5; /* helles grüngrau */
}

.c3 {
    background-color: #F5F5F5; /* grau */
}

.c4 {
    background-color: #F5F5F5; /* dunkleres grüngrau */
}

/* Zusätzliche Styles für das Impressum */
.c5 {
    padding-top: 50px;
}

.c5 p {
    padding-bottom: 50px;
}

.c5 h2,
.c5 h3 {
    margin-top: 0px;
    margin-bottom: 10px;
}

/* hr dient als Anker für die Sprungmarken, besitzt aber kein Design*/
hr {
    /* border: none; */
    margin-block-start: 0em;
    margin-block-end: 0em;
    /* visibility: hidden; */
    /* height: 1px !important; */
    /* position: absolute; */
    /* margin: 1px; */
    border: 1px solid #e8ece0;
}

/* Navigations-Styles*/
/* links Menü */
.mainnav {
    position: sticky;
    top: 10px;
}

.mainnav a:hover {
    font-weight: 700;
}

#nav {
    display: flex;
    flex-direction: row;
    padding-left: 40px;
}

#ankertags {
    position: sticky;
    display: block;
    background: #F5F5F5;
}

#ankertags a {
    color: #4D4D4D;
    background: #F5F5F5;
    width: auto;
    padding: 10px 20px 3px 40px;
    text-decoration: none;
    display: block;
}

.sichtbar {
    /* Der sichtbare Teil des Menüs ist das Logo, über welches man von überall zurück zur Startseite gelangt. */
    margin-top: 10px;
}

.sichtbar img {
    width: 28px;
}

.menubars {
    /* Wird erst sichtbar, wenn das Fenster schmaler wird */
    display: none;
}

.hamburg {
    display: block;
    position: sticky;
    width: 75px;
    height: 50px;
    margin-right: auto;
    border-radius: 4px;
    cursor: grab;
}

.line {
    position: absolute;
    left: 10px;
    height: 4px;
    width: 25px;
    background: #4D4D4D;
    border-radius: 2px;
    display: block;
    transition: 0.5s;
    transform-origin: center;
}

.line:nth-child(1) {
    top: 12px;
}

.line:nth-child(2) {
    top: 24px;
}

.line:nth-child(3) {
    top: 36px;
}

input#menu {
    display: none
}

/* rechts Sprachauswahl */
#sprache {
    position: sticky;
    top: 20px;
    background: #F5F5F5;
    margin-left: 25px;
    padding-right: 10px;
}

#button-en {
    font-weight: 500;
    background-color: #D3D8CB;
    margin-left: 0px;
}

#button-de {
    font-weight: 900;
    background-color: #D3D8CB;
    margin-left: 0px;
}

/* Styles für Sections, die ein Div mit einer h2 und Fließtext enthalten*/
.h2-p-box {
    background: #F5F5F5;
    /* padding: 15px; */
}

.h2-p-box h2, .h2-p-box p {
    padding-bottom: 2%;
}

.h2-p-box a {
    color: #4D4D4D;
    width: auto;
    text-decoration: none;
    font-size: 17px;
    display: block;
}

/* Styles für Sections, die ein Div mit drei nebeneinander stehenden Divs beinhalten welche Bild und einen darunter stehendem Text besitzen*/
.drei-boxen {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 1em;
}

.boxen {
    justify-content: center;
    width: 35%;
}

.boxen img {
    width: 100%;
}

.boxen p {
    background: #F5F5F5;
    padding-block: 5%;
    height: 100px;
}

/* Styles für Sections, die Bild & Text beinhalten */
.flex-img-text {
    display: flex;
    gap: 1em;
    align-items: center;
    justify-content: center;
}

.bild {
    width: 50%;
}

.bild img {
    width: 100%;
}

.text {
    width: 50%;
    padding: 15px;
    background: #F5F5F5;
}

.text h2 {
    padding-bottom: 2%;
}

.text p {
    padding-bottom: 2%;
}

/* Styles für Sections, die ein Div mit Bild und darunter Text beinhalten*/
.untereinander-bild-text {
    padding-top: 2%;
}

.untereinander-bild-text img {
    width: 100%;
}

.untereinander-bild-text h2 {
    padding-bottom: 2%;
}

.untereinander-bild-text p {
    padding-bottom: 2%;
}

.untereinander-bild-text p,
.untereinander-bild-text h2 {
    background: #F5F5F5;
}

/* Styles für Sections, die Zitate enthalten*/
.zitat blockquote {
    padding-block: 2%;
}

.zitat p {
    padding-block: 2%;
}

.zitat blockquote,
.zitat p {
    background: #F5F5F5;
}

/* Rechner */
/* Inspiration:  https://www.w3schools.com/css/css_form.asp */
.eingabe {
    margin-top: 20px;
}

.eingabe button {
    background: #D3D8CB;
    font-weight: 500;
    font-size: 1.0em;
}

.eingabe input {
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0px 20px 0px;
    display: inline-block;
    border: 1px solid #D3D8CB; /* helles grüngrau */
    border-radius: 4px;    
    text-decoration: none;
    border-radius: 4px;
    box-sizing: border-box;
    background: #F5F5F5;
}

input:invalid {
    background: rgb(255, 104, 104);
}

fieldset {
    display: flex;
    border: none;
    padding: 0;
    width: 50%;
}

.ergebnis {
    margin-top: 25px;
    border-bottom: 1px solid #D3D8CB;
    width: 50%;
    padding: 10px;
}

#berechnet-en,
#berechnet-de {
    width: auto;

}

/* Video Styles */
video {
    max-width: 100%;
    padding-bottom: 20px;
}

/* Einfaden der Elemente 
Inspiration: https://youtu.be/T33NN_pPeNI*/
.impr-text,
.bild,
.text,
.boxen,
.untereinander-bild-text,
.h2-p-box,
.eingabe,
.zitat {
    opacity: 0;
    filter: blur(5px);
    transition: all 0.8s;
}

.show {
    opacity: 1;
    filter: blur(0);
}

/* xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
   Responsive Design
   xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
*/

/* Erster Unbruch bei 1200px
   Überschriften und Bilder werden mit dieser Breite nicht abgeschnitten */
@media only screen and (max-width: 1200px) {

    /* Allgemeine Anpassungen */
    #right {
        float: right;
        width: 15%;
    }

    main {
        float: left;
        width: 70%;
    }

    #left {
        width: 15%;
        padding-right: 0%;
    }

    /* Bild und Text anpassen */
    .flex-img-text {
        flex-direction: column-reverse;
    }

    .text {
        width: 100%;
        padding: 0px;
    }

    .text h2 {
        padding-bottom: 0%;
    }

    .text h2,
    .text p {
        margin-left: 0%;
    }

    .bild {
        width: 100%;
    }

    /* Navigation */
    .mainnav #ankertags {
        display: none;
    }

    .mainnav a:hover {
        font-weight: 500;
    }

    #nav {
        display: flex;
        flex-direction: column;
        padding-left: 30px;
    }

    .sichtbar {
        margin-left: 10px;
    }

    #ankertags a {
        width: 100%;
        padding: 10px 250px 3px 40px;
    }

    .menubars {
        display: block;
    }
}

/* Zweiter Unbruch bei 600px*/
@media only screen and (max-width: 830px) {
    .boxen p {
        height: 220px;
    }
}

/* Dritter Unbruch bei 600px*/
@media only screen and (max-width: 650px) {

    /* Allgemeine Anpassungen */
    h1 {
        font-size: 2em;
    }

    /* Navigation & Sprachbuttons */
    #nav {
        padding-left: 10px;
    }

    .menubars {
        padding-left: 0px;
    }

    #sprache {
        margin-left: 0px;
    }

    #button-de,
    #button-en {
        margin-left: 15px;
    }

    /* Nebeneinander gestellte Boxen reihen sich untereinander ein
       Fieldseteingabefelder bekommen die volle Breite etc.

     */
    .drei-boxen {
        flex-direction: column;
    }

    .boxen {
        width: 100%;
    }

    .boxen p {
        height: auto;
    }

    fieldset {
        width: 100%;
    }

    .untereinander-bild-text p,
    .untereinander-bild-text h2 {
        padding: 5%;
    }

    /* Einfaden der Objekte */
    .impr-text,
    .bild,
    .text,
    .boxen,
    .untereinander-bild-text,
    .h2-p-box,
    .eingabe,
    .zitat {
        transition: none;
        opacity: 1;
        filter: blur(0);
        transform: translateX(0);
    }
}