/* montserrat-regular - latin */
  @font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/montserrat-v29-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
  /* montserrat-italic - latin */
  @font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Montserrat';
    font-style: italic;
    font-weight: 400;
    src: url('../fonts/montserrat-v29-latin-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
  /* montserrat-700 - latin */
  @font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 700;
    src: url('../fonts/montserrat-v29-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
  /* montserrat-700italic - latin */
  @font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Montserrat';
    font-style: italic;
    font-weight: 700;
    src: url('../fonts/montserrat-v29-latin-700italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }

  /* playfair-display-regular - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Playfair Display';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/playfair-display-v37-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
  /* playfair-display-italic - latin */
  @font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Playfair Display';
    font-style: italic;
    font-weight: 400;
    src: url('../fonts/playfair-display-v37-latin-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
  /* playfair-display-500 - latin */
  @font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Playfair Display';
    font-style: normal;
    font-weight: 500;
    src: url('../fonts/playfair-display-v37-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
  /* playfair-display-500italic - latin */
  @font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Playfair Display';
    font-style: italic;
    font-weight: 500;
    src: url('../fonts/playfair-display-v37-latin-500italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
  /* playfair-display-700 - latin */
  @font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Playfair Display';
    font-style: normal;
    font-weight: 700;
    src: url('../fonts/playfair-display-v37-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
  /* playfair-display-700italic - latin */
  @font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Playfair Display';
    font-style: italic;
    font-weight: 700;
    src: url('../fonts/playfair-display-v37-latin-700italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: 'Montserrat', sans-serif;
}

.navbar {
    background: #fff;
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.2rem;
    position: sticky;
    top: 0;
    z-index: 999;
    box-shadow: 0px 0px 3px rgb(173, 173, 173);
}

.navbar__container {
    display: flex;
    justify-content: space-between;
    height: 80px;
    z-index: 1;
    width: 100%;
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 50px;
}

#navbar__logo {
    display: flex;
    align-items: center;
    cursor: pointer;
    margin-right: 0.5rem;
}

#logo-bild {
    height: 100%;
    aspect-ratio: 4000 / 2276;
}

#netzwerk__img {
    height: 70%;
    margin-top: 15px;
    aspect-ratio: 871 / 366;
}

.navbar__menu {
    display: flex;
    align-items: center;
    list-style: none;
    text-align: center;
}

/*---------------------------------------*/

.navbar__dropdown-item {
    height: 80px;
    white-space: nowrap;
    position: relative;
}

.navbar__dropdown-parent-links {
    color:#404040;
    display: flex;
    align-items: center;
    justify-content: start;
    text-decoration: none;
    padding: 0 1rem;
    height: 100%;
}

.navbar__dropdown-parent-links:hover {
    color: #19744c;
}

.navbar__dropdown-container {
    display: none;
    background: #ffffff;
    position: absolute;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    padding: 1rem;
}

.navbar__dropdown-links {
    color:#404040;
    display: flex;
    align-items: center;
    justify-content: start;
    text-decoration: none;
    height: 100%;
}

.navbar__dropdown-links-mobile {
    color:#404040;
    display: none;
    text-decoration: none;
    height: 100%;
}

.navbar__dropdown-links:hover {
    color: #19744c;
}

@media (pointer: fine) {
    
    .navbar__dropdown-item:hover .navbar__dropdown-container {
    display: block;
}

}

input[type=checkbox] {
    display: none;
}

label {
    color:#404040;
    display: none;
    position: absolute;
    text-decoration: none;
    padding: 0 1rem;
    height: 100%;
}

.navbar__btn {
    display: center;
    justify-content: center;
    align-items: center;
    padding: 0 1rem;
    width: 100%;
}

.button {
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    padding: 10px 20px;
    height: 100%;
    width: 100%;
    border: none;
    outline: none;
    border-radius: 4px;
    background: #19744c;
    color: white;
}

.button:hover {
    background: #303030;
    transition: all 0.3s ease;
    color: white;
}

@media screen and (max-width: 1040px) {
    .navbar__container {
        display: flex;
        justify-content: space-between;
        height: 80px;
        z-index: 1;
        width: 100%;
        max-width: 1300px;
        padding: 0;
    }

    .navbar__menu {
        display: flex;
        flex-wrap: wrap;
        margin: 0;
        width: 100%;
        position: absolute;
        top: -1000px;
        opacity: 0;
        transition: all 0.5s ease;
        height: 50vh;
        z-index: -1;
        background: #fff;
        box-shadow: 0px 0px 5px rgb(173, 173, 173);
    }

    .navbar__menu.active {
        background: #fff;
        top: 100%;
        opacity: 1;
        transition: all 05.s ease;
        z-index: 99;
        height: auto;
        font-size: 1.2rem;
    }

    #navbar__logo {
        padding-left: 0px;
    }

    #netzwerk__img {
        margin-right: 6rem;
        height: 65%;
    }

    .navbar__toggle .bar {
        width: 25px;
        height: 3px; 
        margin: 5px auto;
        transition: all 0.3s ease-in-out;
        background: #000000;
    }

    .navbar__item {
        width: 100%;
    }

    /*-----------------------------------*/

    .navbar__dropdown-item {
        display: flex;
        flex-wrap: wrap; 
        align-items: center;
        text-align:left;
        justify-content: center;
        height: auto;
        width: 100%;
        padding: 2rem 0 0 0;
    }
    
    .navbar__dropdown-parent-links {
        justify-content: center;
        align-items: center;
        width: 100%;
        text-align: left;
    }
    
    .navbar__dropdown-container {
        position: static;
        background:#aed09e;
        width: 100%;
        margin-top: 2rem;
        display: none;
    }

    .navbar__dropdown-links, .navbar__dropdown-links-mobile {
        color:#404040;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        width:10%;
        padding: 0 5px;
        margin: auto;
        text-align: center;
    }

    .navbar__dropdown-links-mobile {
        margin-bottom: 1.2rem;
    }

    #methode, #kursangebot {
        display: none;
    }

    label {
        display: initial;
        position: static;
        width: 100%;
        text-align: center;
    }

    input[type=checkbox]:checked ~ .navbar__dropdown-container {
        display: block;
    }

    #mobile-menu {
        position: absolute;
        top: 20%;
        right: 5%;
        transform: translate(5%, 20%);
    }

    .navbar__btn {
        display: flex;
        justify-content: center;
        padding-bottom: 2rem;
        padding-top: 1rem;
    }

    .button {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 80%;
        height: 80px;
        margin: 1rem 0 0 0;
    }

    .navbar__toggle .bar {
        display: block;
        cursor: pointer;
    }

    #mobile-menu.is-active .bar:nth-child(2) {
        opacity: 0;
    }

    #mobile-menu.is-active .bar:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
    }

    #mobile-menu.is-active .bar:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg);
    }
}

/* --------------------------------------------------------Hero Section CSS------------------------------------------------------ */
h1, h2, h3, h4 {
    font-family: 'Playfair Display', serif;
}

h1 {
    font-weight: 700;
    color: black;
    font-size: 4rem;
    word-break: break-word;
    text-align: center;
    margin-top: 30px;
    margin-bottom: 50px;
}

h2 {
    font-weight: 500;
    font-size: 3rem;
    color: #303030;
}

h3 {
    font-weight: 700;
    font-size: 2.5rem;
    color: #303030;
}

h4 {
    font-weight: 500;
    font-size: 3rem;
}

a {
    text-decoration: none;
    color:#19744c;
}

a:hover {
    color:#303030;
}

p {
    color: #404040;
    margin-top: 1rem;
    font-size: 1.2rem;
    font-weight: 400;
    line-height: 135%;
}

.main {
    background: #fff;
}

.intro__container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-self: center;
    margin: 0 auto;
    background-color: #fff;
    z-index: 1;
    width: 100%;
    padding: 0;
}

.intro__content {
    align-items: center;
    justify-self: center;
    margin: 0 auto;
    text-align: center;
    width: 100%;
    max-width: 1300px;
}

.post_intro {
    text-align: center;
    width: 100%;
    max-width: 1000px;
}

.intro__content p {
    color: #404040;
    margin-top: 1rem;
    font-size: 1.7rem;
    font-weight: 400;
}

.header__img--container {
    text-align: center;
    margin-top: 0;
    display: flex;
    flex-flow: row nowrap;
    align-items: flex-start;
    justify-content: center;
    position: relative;
    word-break: break-word;
    color: #d9d9d9;
    align-items: center;
    margin-bottom: 3rem;
    width: 100vw;
    /*bei 100vw tritt, wenn man einen vertikalen Scrollbar hat, immer ein horizontaler Scrollbar auf durch max-width kann man das verhindern*/
    max-width: 100%;
}

.header__img {
    height: auto;
    width: 100%;
    aspect-ratio: 1915 / 623;
}

.header-titel {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    color: #000000;
    font-size: 4rem;
    position: absolute;
    max-width: 1300px;
    word-break: break-word;
}

.header-titel-white {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    color: #ffffff;
    font-size: 4rem;
    position: absolute;
    max-width: 1300px;
    word-break: break-word;
}

/*--------------------------------------------------------Button, der die Farbe wechselt------------------------------------------*/

.color-slide__btn {
    font-size: 1rem;
    background-image: linear-gradient(to bottom, #aed09e 0%, #547545 100%);
    padding: 14px 20px;
    border: none;
    border-radius: 5px;
    color: #fff;
    font-weight: bold;
    margin-top: 2.5rem;
    position: relative;
    transition: all 0.35s;
    outline: none;
    width: 200px;
    text-align: center;
}

.color-slide__btn a {
    color: white ;
    cursor: pointer;
    text-decoration: none;
    z-index: 2;
    position: relative;
}

.color-slide__btn:after {
    position: absolute;
    content: '';
    top: 0;
    left: 0;
    width: 0px;
    height: 100%;
    background-color: #19744c;
    transition: all 0.35s;
    border-radius: 5px;
}

.color-slide__btn:hover {
    color: #fff;
}

.color-slide__btn:hover:after {
    width: 100%;
}

/*-----------------------------------------------------Zweier Modul: Links Text, rechts Bild----------------------------------------*/

.text-bild-modul {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "links rechts";
    align-items: center;
    justify-self: center;
    margin: 50px auto;
    z-index: 1;
    width: 100%;
    max-width: 1100px;
    padding: 0;
}

.text-bild-modul__text {
    grid-area: links;
    padding: 30px;
}

.text-bild-modul__bild {
    grid-area: rechts;
    display: flex;
    align-items: center;
    justify-content: center;
}

.text-bild-modul__img {
    height: auto;
    width: 100%;
    padding: 30px;
}

/*-----------------------------------------------Zweier Modul: Links Bild, rechts Text---------------------------------------------*/

.bild-text-modul__hintergrund {
    width: 100%;
    height: auto;
    background-color: #aed09e;
}

.bild-text-modul {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "links rechts";
    align-items: center;
    justify-self: center;
    margin: 0px auto;
    z-index: 1;
    width: 100%;
    max-width: 1100px;
    padding: 3rem 0;
}

.bild-text-modul__text {
    grid-area: rechts;
    padding: 30px;
}

.bild-text-modul__bild {
    grid-area: links;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bild-text-modul__img {
    height: auto;
    width: 100%;
    padding: 30px;
}

/*-----------------------------------------------Zweier Modul: Links Bild, rechts 4 Mal Text---------------------------------------------*/

.bild-vierer-text-modul {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "links rechts";
    align-items: center;
    justify-self: center;
    margin: 0px auto;
    z-index: 1;
    width: 100%;
    max-width: 1100px;
    padding: 3rem 0;
}

.bild-vierer-text-modul__bild {
    grid-area: links;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bild-vierer-text-modul__img {
    height: auto;
    width: 100%;
    padding: 30px;
}

.bild-vierer-text-modul__text {
    grid-area: rechts;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "oben oben" "links1 rechts1" "links2 rechts2" "unten unten";
    align-items: center;
    justify-self: center;
    margin: 0px auto;
    z-index: 1;
    width: 100%;
    max-width: 1100px;
    padding: 0 30px;
}

.bild-vierer-text-modul__text-om {
    grid-area: oben;
    margin-bottom: 1rem;
}

.bild-vierer-text-modul__text-ml {
    grid-area: links1;
}

.bild-vierer-text-modul__text-mr {
    grid-area: rechts1;
}

.bild-vierer-text-modul__text-ul {
    grid-area: links2;
}

.bild-vierer-text-modul__text-ur {
    grid-area: rechts2;
}

.bild-vierer-text-modul__text-um {
    grid-area: unten;
    margin-top: 1rem;
}

/*-----------------------------------------------Zweier Modul: Bild links und rechts---------------------------------------------*/

.bild-bild-modul__hintergrund {
    width: 100%;
    height: auto;
    background-color: #aed09e;
    margin: 3rem 0;
    padding-top: 3rem;
}

.bild-bild-modul__titel {
    text-align: center;
}

.bild-bild-modul {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "links rechts";
    align-items: start;
    justify-self: center;
    margin: 0px auto;
    z-index: 1;
    width: 100%;
    max-width: 1100px;
    padding: 4rem 0;
}

.bild-bild-modul__links {
    grid-area: links;
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: center;
    padding: 30px;
}

.bild-bild-modul__rechts {
    grid-area: rechts;
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: center;
    padding: 30px;
}

.bild-bild-modul__img {
    height: auto;
    width: 100%;
}

.bild-bild-modul__untertitel {
    margin-top: 1rem;
}

/*-----------------------------------------------Zweier Modul: Bild links und rechts - zentriert------------------------------*/

.bild-bild-z-modul__titel {
    text-align: center;
    padding: 15px 15px 0 15px;
}

.bild-bild-z-modul {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "mitte mitte" "links rechts";
    align-items: start;
    justify-self: center;
    margin: 0px auto;
    z-index: 1;
    width: 100%;
    max-width: 1100px;
    padding: 1rem 0 0 0;
}

.bild-bild-z-modul__text {
    grid-area: mitte;
    padding: 0 70px;
    text-align: center;
}

.bild-bild-z-modul__links {
    grid-area: links;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 30px;
    text-align: center;
}

.bild-bild-z-modul__rechts {
    grid-area: rechts;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 30px;
    text-align: center;
}

.bild-bild-z-modul__img {
    height: auto;
    width: 100%;
}

.bild-bild-z-modul__untertitel {
    color: white;
    position: absolute;
    text-align: center;
    font-size: 4rem;
    margin-bottom: 5rem;
}

/*--------------------------------------------------------Zweier Modul: Text--------------------------------------------------------*/

.text-text-modul {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "links rechts";
    align-items: start;
    justify-self: center;
    margin: 0px auto;
    width: 100%;
    max-width: 1300px;
    padding: 2rem 0 4rem 0;
}

.text-text-modul h4 {
    font-size: 2rem;
}

.text-text-modul__links {
    grid-area: links;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: auto;
    padding: 30px;
}

.text-text-modul__rechts {
    grid-area: rechts;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: auto;
    padding: 30px;
}

/*--------------------------------------------------------Dreier Modul: Text--------------------------------------------------------*/

.dreier-text-modul {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-areas: "links mitte rechts";
    align-items: start;
    margin: 0px auto;
    width: 100%;
    max-width: 1300px;
    padding: 2rem 0 2rem 0;
}

.dreier-text-modul__links {
    grid-area: links;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 auto;
    padding: 30px;
}

.dreier-text-modul__mitte {
    grid-area: mitte;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 auto;
    padding: 30px;
}

.dreier-text-modul__rechts {
    grid-area: rechts;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 auto;
    padding: 30px;
}

/*--------------------------------------------------------Vierer-Bild-Modul--------------------------------------------------------*/

.vierer-bild-modul__titel {
    text-align: center;
    margin-top: 3rem;
    padding-top: 3rem;
}

.vierer-bild-modul {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-areas: "eins zwei drei vier";
    align-items: start;
    justify-self: center;
    margin: 0px auto;
    z-index: 1;
    width: 100%;
    max-width: 1100px;
    padding: 4rem 0;
}

.vierer-bild-modul__eins {
    grid-area: eins;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.vierer-bild-modul__zwei {
    grid-area: zwei;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.vierer-bild-modul__drei {
    grid-area: drei;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.vierer-bild-modul__vier {
    grid-area: vier;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.vierer-bild-modul__img {
    height: auto;
    width: 100%;
}

/*------------------------------------------------------------Blog-Modul-----------------------------------------------------------*/

.blog-modul__titel {
    text-align: center;
}

.blog-modul__teaser {
    font-size: 1rem;
}

.blog-modul__flex {
    margin: 2rem auto 4rem auto;
    max-width: 1100px;
}

.blog-modul__inline-block {
    display: inline-block;
    margin: 0px auto;
    z-index: 1;
    width: 100%;
    max-width: 1100px;
    padding: 2rem 0 3rem 0;
}

.blog-modul__inhalt {
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: center;
    padding: 30px;
    min-width: 200px;
    max-width: 550px;
    float: left;
}

.blog-modul__img {
    height: auto;
    width: 100%;
}

.blog-modul__untertitel {
    margin-top: 1rem;
    font-size: 1.7rem;
}

/*------------------------------------------------------------Blog-Artikel-----------------------------------------------------------*/

.blog-header__container {
    width: 100vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    max-width: 100%;
}

.blog-header__img {
    width: 100%;
    height: auto;
    padding: 0 30px;
    max-width: 1100px;
}

.blog-text__container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-self: center;
    margin: 0 auto 2rem auto;
    background-color: #fff;
    width: 100%;
    padding: 0;
}

.blog-text__container a{
    color: #19744c;
    text-decoration: none;
    line-height: 1.8rem;
}

.blog-text__container a:hover{
    color: #404040;
}

.blog-text__intro {
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    text-align: center;
    width: 100%;
    max-width: 1000px;
    padding: 30px;
    font-size: 3rem;
}

.blog-text__intro h1{
    text-align: center;
    font-size: 3rem;
}

.blog-text__text {
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    text-align: left;
    width: 100%;
    max-width: 1000px;
    padding: 0 30px;
}

.blog-text__text h2{
    margin-top: 3rem;
}

.blog-text__text h3{
    margin-top: 3rem;
}

.blog-text__text a {
    text-decoration: none;
    color:#19744c;
}

.blog-text__text a:hover {
    color:#303030;
}

.blog-navigation {
    margin-top:1rem;
    margin-bottom: 3rem;
    list-style-position:outside;
    margin-left: 2rem;
}

.blog-navigation a {
    font-size: 1.2rem;
    color: #19744c;
    text-decoration: none;
    line-height: 1.8rem;
}

.blog-navigation a:hover {
    color: #404040;
}

.blog-button {
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    cursor: pointer;
    height: 3rem;
    width: 3rem;
    border: none;
    outline: none;
    border-radius: 5px;
    background: #19744c;
    color: white;
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 999;
}

.blog-button a {
    color: #fff;
    text-decoration: none;
    font-size: 2rem;
}

/*--------------------------------------------------------------Teaser-------------------------------------------------------------*/

.teaser__img--container {
    text-align: center;
    width: 100vw;
    max-width: 100%;
    margin-top: 0;
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: center;
    position: relative;
    background-color: black;
}

#teaser__img {
    height: auto;
    width: 100vw;
    max-width: 100%;
    opacity: 0.5;
    margin-bottom: -5px;
}

.teaser-text {
    position: absolute;
    max-width: 800px;
    word-break: break-word;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.teaser-text h3 {
    font-family: 'Montserrat', sans-serif;
    color: #fff;
    margin: 10px 15px;
    font-size: 2.2rem;
    word-break: break-word;
}

.teaser-text p {
    font-family: 'Montserrat', sans-serif;
    color: #fff;
    margin: 10px 15px;
    font-size: 2rem;
    word-break: break-word;
}

.teaser-button {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1rem;
    font-weight: bold;
    padding: 14px 32px;
    margin-top: 1.5rem;
    cursor: pointer;
    height: 100%;
    border: none;
    outline: none;
    border-radius: 5px;
    background: #19744c;
    color: white;
    text-decoration: none;
}

.teaser-button a {
    color: #fff;
}

.teaser-button:hover {
    background: #303030;
    transition: all 0.3s ease;
    color: white;
}

/*-------------------------------------------------------Kontakt-Aufnahme-------------------------------------------------------*/

.kontakt-infos {
    margin-top: 20px;
    margin-bottom: 50px;
}

td {
    width: 30%;
    text-align: left;
    vertical-align: bottom;
}

.mail-adresse {
    font-size: 1.2rem;
    color:#303030;
    text-decoration:none;
}

.mail-adresse:hover {
    color:#19744c;
}

/*-------------------------------------------------------Text-Module------------------------------------------------------*/

.text__container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-self: center;
    margin: 2rem auto;
    background-color: #fff;
    width: 100%;
    padding: 0;
}

.text__text {
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    text-align: left;
    width: 100%;
    max-width: 800px;
    padding: 30px;
}

/*-------------------------------------------------------------Über mich----------------------------------------------------------*/

.ueber-mich-intro--container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    grid-template-areas: "links links rechts rechts rechts" "unten unten rechts rechts rechts";
    align-items: start;
    justify-self: center;
    margin: 0 auto;
    width: 100%;
    max-width: 1500px;
    padding: 0;
    color: #fff;
}

.ueber-mich__rechts {
    grid-area: rechts;
    padding: 30px;
}

.ueber-mich__links-zentriert {
    grid-area: links;
    padding: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: auto; /*---sonst checkt der die vertikale Zentrierung nicht---*/
}

.ueber-mich__links {
    grid-area: unten;
    padding: 30px;
    text-align: center;
}

#bild-mama {
    width: 80%;
}

/*--------------------------------------------------------------Divider-----------------------------------------------------------*/

.gruener-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: auto;
    background-color:#aed09e;
    height: 300px;
    margin: 30px 0px 80px 0px;
}

.divider-schrift {
    max-width: 1000px;
    margin: 30px;
    text-align: center;
}

.divider-schrift h2 {
    font-style: italic;
    font-weight: 400;
}

.divider-schrift h4 {
    font-family: 'Playfair Display', serif;
    font-weight: 500;
    font-size: 2rem;
}

/*----------------------------------------------------------Einfacher Text---------------------------------------------------------*/

.einfacher-text__container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-self: center;
    margin: 0 auto;
    background-color: #fff;
    width: 100%;
    padding: 0;
}

.einfacher-text__text {
    margin: 0px 30px 20px 30px;
    max-width: 800px;
}

/*----------------------------------------------------------------Anfahrt----------------------------------------------------------*/

.liste-anfahrt {
    margin-top:1rem;
    list-style-position:outside;
    margin-left: 2rem;
}

/*-----------------------------------------------------------Abstandshalter--------------------------------------------------------*/

.abstandshalter-60 {
    width: 100%;
    height: 60px;
}

/*---------------------------------------------------------Über-mich-Teaser--------------------------------------------------------*/

#text-bild-ueber-mich__img {
    height: auto;
    width: 60%;
    padding: 30px;
}

/*-------------------------------------------------------------Untertitel-----------------------------------------------------------*/

.untertitel-zentriert {
    text-align: center;
    margin-bottom: 3rem;
}

/*----------------------------------------------------Link-Liste-HTML-Sitemap--------------------------------------------------------*/

.sitemap__list {
    list-style-position: outside;
    margin-top: 1.5rem;
    margin-left: 20px;
    margin-bottom: 2.5rem;
}

.sitemap__list_child {
    list-style-position: inherit; 
    list-style-type: circle;
    margin-left: 20px;
}

.sitemap__link {
    font-size: 1.2rem;
    color: #19744c;
    text-decoration: none;
}

.sitemap__link:hover {
    color: #303030;
}

#feldenkrais-intext p{
    line-height: 70%;
}

/*----------------------------------------------------------Text-Dropdown---------------------------------------------------------*/

input.text[type=checkbox] {
    display: none;
}

label.text {
    color:#404040;
    display: initial;
    text-decoration: none;
    font-size: 1.2rem;
    padding: 0.5rem 0 0 0.5rem;
    margin: -2rem 0 2rem 0;
    width: 100%;
    max-width: 800px;
    height: 3rem;
    background-color:#aed09e;
}

.text__dropdown-container {
    display: none;
    background-color:#aed09e;
    padding: 0.5rem;
    width: 100%;
    max-width: 800px;
    background-color:#aed09e;
}

input.text[type=checkbox]:checked ~ .text__dropdown-container {
    display: block;
}

/*----------------------------------------------------------Cookie-Consent---------------------------------------------------------*/

.cookie-container {
    width: 100%;
    margin: auto;
}

.cookie-subcontainer {
    width: 85%;
    margin: auto;
}

#cookies {
    width: 400px;
    position: fixed;
    bottom: 0;
    z-index: 5;
    display: none;
    background-color: #303030;
    margin: 20px;
}

.cookies-content {
    font-size: 1rem;
}

#cookies p {
    color: #fff;
    font-size: 1rem;
    margin-bottom: 15px;
}

#cookie-datenschutz-link {
    color:#ffffff;
    text-decoration: none;
    font-weight: 700;
}

.cookie-buttons {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: auto;
    gap: 20px;
    margin-bottom: 20px;
}

#cookie-akzeptieren-button {
    font-size: 1rem;
}

/*---------------------------------------------------------------Footer------------------------------------------------------------*/

footer {
    width: 100%;
    height: auto;
    background-color: #000000;
    padding: 1rem;
}

.footer {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-areas: "links mitte rechts";
    justify-self: center;
    margin: 50px auto;
    z-index: 1;
    width: 100%;
    max-width: 1100px;
    padding: 0;
    color: #fff;
}

.footer p {
    color: #fff;
}

.footer__links {
    grid-area: links;
    padding-right: 20px;
    width: 100%;
}

.footer__link:hover {
    color: #fff;
}

.footer__mitte {
    grid-area: mitte;
    padding: 0 20px;
    width: 100%;
}

.footer__rechts {
    grid-area: rechts;
    padding-left: 20px;
    width: 100%;
}

.footer__link {
    font-size: 1.2rem;
    color:#aed09e;
    text-decoration: none;
}

#footer__img {
    width: 100%;
    margin-top: 20px;
}


/*-------------------------------------------------------Mobile Optimization-------------------------------------------------------*/
.pop-up-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 300px;
    margin: auto;
    background-color: white;
    height: 4rem;
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 999;
    box-shadow: 0px 0px 3px rgb(173, 173, 173);
}

.pop-up-text {
    padding: 0 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 15px;
}

.pop-up-text p{
    font-size: 1rem;
}

/*-------------------------------------------------------Mobile Optimization-------------------------------------------------------*/
@media screen and (max-width: 780px) {
    .header__img {
        aspect-ratio: 3 / 2;
    }
    
    .header-titel {
        font-size: 2.5rem;
    }

    .header-titel-white {
        font-size: 2.5rem;
    }

    h1 {
        font-size: 2.5rem;
    }

    h2 {
        font-size: 2rem;
        text-align: center;
    }

    h3 {
        font-size: 2rem;
        text-align: center;
    }

    .divider-schrift h4 {
        font-size: 1.3rem;
        text-align: center;
    }

    p {
        font-size: 1rem;
        text-align: center;
    }

    .intro__content {
      margin-bottom: 3rem;
      padding: 0 1.5rem;
    }

    .post_intro {
        margin-bottom: 1rem;
        padding: 0 1.5rem;
      }

    .intro__content p {
        margin-top: 1rem;
        font-size: 1.5rem;
    }

    .text-bild-modul {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-areas: "rechts" "links";
        align-items: center; 
        justify-self: center;
        width: 100%;
        margin: 50px auto;
        height: auto;
    }

    .text-bild-modul__bild {
        grid-area: rechts;
    }

    #text-bild-modul__img {
        height: auto;
        width: 100%;
        padding: 0 1.5rem;
        margin-bottom: 30px;
    }

    .text-bild-modul__text {
        grid-area: links;
        padding: 0 1.5rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .bild-text-modul {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-areas: "rechts" "links";
        align-items: center; 
        justify-self: center;
        width: 100%;
        margin: 0px auto;
        height: auto;
        padding: 0;
    }

    .bild-text-modul__bild {
        grid-area: rechts;
    }

    #bild-text-modul__img {
        height: auto;
        width: 100%;
        padding: 1.5rem;
    }

   .bild-text-modul__text {
        grid-area: links;
        padding: 0 1.5rem;
        margin-bottom: 30px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    
    .bild-vierer-text-modul {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-areas: "links" "rechts";
        align-items: center; 
        justify-self: center;
        width: 100%;
        margin: 0px auto;
        height: auto;
        padding: 0;
    }

    #bild-vierer-text-modul__img {
        height: auto;
        width: 100%;
        padding: 1.5rem;
    }

   .bild-vierer-text-modul__text {
        grid-area: rechts;
        padding: 0 30px;
        margin-bottom: 30px;
        display: grid;
        grid-template-columns: 1fr;
        grid-template-areas: "oben" "links1" "rechts1" "links2" "rechts2" "unten";
        align-items: center; 
        justify-self: center;
        width: 100%;
        margin: 0px auto;
        height: auto;
    }

    .bild-vierer-text-modul__text-mr {
        grid-area: rechts1;
        margin-top: -1rem;
    }

    .bild-vierer-text-modul__text-ur {
        grid-area: rechts2;
        margin-top: -1rem;
    }

    .bild-bild-modul {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-areas: "links" "rechts";
        align-items: center;
        justify-content: center;
        margin: 0px auto;
        padding: 2rem 0;
    }

    .bild-bild-modul__links {
        align-items: center;
    }
    
    .bild-bild-modul__rechts {
        align-items: center;
    }

    .bild-bild-modul__untertitel {
        text-align: center;
    }

    .bild-bild-z-modul {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-areas: "mitte" "links" "rechts";
        align-items: center;
        justify-content: center;
        margin: 0px auto;
        padding: 2rem 0;
    }

    .bild-bild-z-modul__links {
        align-items: center;
    }
    
    .bild-bild-z-modul__rechts {
        align-items: center;
    }

    .bild-bild-z-modul__untertitel {
        text-align: center;
    }

    .text-text-modul {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-areas: "links" "rechts";
        text-align: center;
    }

    .text-text-modul h4 {
        font-size: 1.3rem;
        text-align: center;
    }

    .dreier-text-modul {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-areas: "links" "mitte" "rechts";
        text-align: center;
    }

    .vierer-bild-modul {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-areas: "eins" "zwei" "drei" "vier";
        align-items: center;
        justify-content: center;
        margin: 0px auto;
        padding: 2rem 0;
    }

    .vierer-bild-modul__eins {
        padding: 30px;
    }

    .vierer-bild-modul__zwei {
        padding: 30px;
    }

    .vierer-bild-modul__drei {
        padding: 30px;
    }

    .vierer-bild-modul__vier {
        padding: 30px;
    }


    .blog-modul__untertitel {
        text-align: center;
    }

    .blog-modul__inhalt {
        align-items: center;
    }

    .blog-navigation a{
        font-size: 1rem;
    }
    
    .blog-text__intro h1{
        font-size: 2rem;
    }

    .blog-text__text p{
        text-align: left;
    }

    .blog-text__text h2{
        text-align: left;
    }

    .blog-text__text h3{
        text-align: left;
    }

    p.kontakt-infos__text {
        text-align: left;
        font-size: 1rem;
    }

    .kontakt-infos {
        width: 80%;
    }

    .mail-adresse {
        font-size: 1rem;
    }

    td.erste-spalte {
        width: 15%;
    }

    .teaser-text h3 {
        font-size: 1.7rem;
    }

    .teaser-text p {
        font-size: 1.5rem;
    }

    .ueber-mich-intro--container {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-areas: "erster" "zweiter" "unten";
    }
    
    
    .ueber-mich__links-zentriert {
        grid-area: erster;
    }
    
    .ueber-mich__links {
        grid-area: zweiter;
    }

    .ueber-mich__rechts {
        grid-area: unten;
    }

    .sitemap__link {
        font-size: 1rem;
    }

    #feldenkrais-intext p{
        line-height: 100%;
    }

    #cookies {
        width: 100%;
        margin: 0;
    }

    .cookies-content {
        text-align: center;
    }
    
    .footer {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-areas: "links" "mitte" "rechts";
        align-items: center; 
        justify-self: center;
    }

    .footer__links {
        grid-area: links;
        padding: 0 20px;
    }
    
    .footer__mitte {
        grid-area: mitte;
        padding: 20px;
    }
    
    .footer__rechts {
        grid-area: rechts;
        padding: 20px;
    }

    .footer__link {
        font-size: 1rem;
        line-height: 200%;
    }

    .footer p {
        text-align: left;
    }

    .pop-up-container {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100vw;
        margin: auto;
        max-height: 3rem;
        position: fixed;
        bottom: 0px;
        right: 0px;
        z-index: 999;
        box-shadow: 0px 0px 3px rgb(173, 173, 173);
    }

    .pop-up-text p {
        font-size: 0.8rem;
    }
}

@media screen and (max-width: 480px) {
    .header__img {
        aspect-ratio: 4 / 5;
    }
    
    h2 {
        font-size: 1.5rem;
    }

    h3 {
        font-size: 1.5rem;
    }

    .intro__content p {
        margin-top: 1rem;
        font-size: 1rem;
    }

    .post_intro p {
        font-size: 0.9rem;
    }

    .text-bild-modul__text p {
        font-size: 1rem;
        text-align: center;
    }

    .teaser-text h3 {
        font-size: 1.5rem;
    }

    .teaser-text p {
        font-size: 1.1rem;
    }

    p.kontakt-infos__text {
        font-size: 0.7rem;
    }

    .kontakt-infos {
        width: 80%;
    }

    .mail-adresse {
        font-size: 0.7rem;
    }

    td.erste-spalte {
        width: 30%;
    }

    #netzwerk__img {
        margin-right: 3rem;
        height: 65%;
    }
}