/*CSS INDEX */
@font-face {
    font-family: 'Quicksand';
    font-style: normal;
    font-weight: 300;
    src: url('..fonts/quicksand-v30-latin-300.eot'); /* IE9 Compat Modes */
    src: local(''), url('fonts/quicksand-v30-latin-300.eot?#iefix') format('embedded-opentype'),
        /* IE6-IE8 */ url('fonts/quicksand-v30-latin-300.woff2') format('woff2'),
        /* Super Modern Browsers */ url('fonts/quicksand-v30-latin-300.woff') format('woff'),
        /* Modern Browsers */ url('fonts/quicksand-v30-latin-300.ttf') format('truetype'),
        /* Safari, Android, iOS */ url('fonts/quicksand-v30-latin-300.svg#Quicksand') format('svg'); /* Legacy iOS */
}
:root {
    --hellLila: DarkMagenta;
    --dunkelLila: RebeccaPurple;
}

@media (min-width: 200px) and (max-width: 699px) {
    * {
        margin: 0;
        padding: 0;
        font-family: Quicksand;
        box-sizing: border-box;
    }
    html, body{
        height:100%;
    }
    #header_navi {
        position: relative;
        width:100%;
        /* height: 100%; */
    }
    #ganze_seite {
        position: relative;
        width:100%;
        height:100%;
    }
    #banner_oben {
        position: relative;
        top: 0;
        display: block;
        width: 100%;
        background-color: rgba(255, 255, 255, 1);
        /*z-index:1;*/
    }
    #header {
        position: relative;
        top: 0;
        width: 100%;
        display: flex;
        flex-flow: row wrap;
    }

    .flex-item_1 {
        width: 100%;
        display: flex;
        justify-content: center;
    }
    .flex-item_1 img {
        padding-top: 10px;
    }
    .flex-item_2 {
        padding-top: 10px;
        padding-left: 10%;
        font-size: 80%;
    }
    .icon {
        height: 25px;
        padding-right: 10px;
        color: var(--hellLila);
        font-style: normal;
        font-size: 120%;
    }
    .icon_img {
        margin-right: 10px;
        width: 25px;
        height: 25px;
    }
    .flex-item_3 {
        padding-top: 10px;
        padding-left: 10%;
        font-size: 80%;
    }
    .flex-item_4 {
        padding-top: 10px;
        padding-left: 10%;
        padding-bottom: 10px;
        font-size: 80%;
    }
    .nohyperlink {
        text-decoration: none;
        color: var(--hellLila);
    }
    /*************** NAVIGATION ************/
    #nav_box {
        position: relative;
        top: 0px;
        display: block;
        width: 100%;
        background-color: rgba(255, 255, 255, 1);
        z-index: 2;
    }
    .sticky {
        top: 0;
        width: 100%;
    }
    #menu-trigger {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: space-between;
        background-color: #fff;
        width: 100%;
        height: 50px;
    }
    #hamburger_icon {
        width: 20%;
        padding-left: 10%;
        display: flex;
        flex-direction: column;
    }
    .stripes {
        width: 100%;
        background-color: var(--hellLila);
        height: 5px;
        margin-top: 5px;
    }
    #termin {
        width: 80%;
        padding-right: 10%;
        padding-top: 5px;
    }

    .first {
        margin-top: 12px;
    }

    .termin_button {
        padding: 10px 20px;
        color: #fff;
        background-color: var(--dunkelLila);
        border: none;
        border-radius: 4px 4px;
        font-size: 0.8em;
        float: right;
    }
    .termin_button:hover {
        background-color: rgba(200, 100, 255, 0.5);
        color: #ffffff;
        transition: background-color 0.5s, color 0.5s;
        cursor: pointer;
    }
    .termin_button a {
        color: #fff;
    }
    .termin_button_mobile {
        color: #fff;
        font-size: 0.8em;
    }

    @keyframes naviToRight {
        0% {
            left: -480px;
        }
        100% {
            left: 0px;
        }
    }
    @keyframes naviToLeft {
        0% {
            left: 0px;
        }
        100% {
            left: -480px;
        }
    }
    #navigation {
        display: none;
    }
    @keyframes naviToleft {
        0% {
            left: 0px;
        }
        100% {
            left: -400px;
        }
    }

    /* MOBILE NAVIGATION ANFANG *****/
    #mobile_navi {
        display: none;
        flex-direction: column;
        top: 0px;
        background-color: rgba(255, 255, 255, 1);
    }
    #navi_container {
        position: absolute;
        display: block;
        top: 0px;
        left: 0px;
        width: 100%;
        height: 100%;
        opacity: 1;
        background-color: #fff;
    }
    .zuruck_button {
        padding: 15px 0;
        text-align: center;
        color: #fff;
        background-color: var(--hellLila);
    }
    #navlist {
        margin-top: 50px;
        padding-left: 10%;
        height: 80%;
        display: flex;
        flex-flow: column wrap;
    }
    .navi2geteilt {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        margin-bottom: 30px;
    }

    .top_bottom {
        margin-top: 20px;
        padding: 20px 0;
        text-align: center;
        background-color: DarkMagenta;
        color: #fff;
        width: 100%;
        font-size: 1.2em;
    }
    .top_bottom a {
        color: #fff;
    }
    .first_mobile {
        color: #00bfff;
        font-size: 1.2em;
        height: 30px;
        width: 80%;
        margin-top: 0px;
    }
    .last {
        font-size: 1.2em;
        height: 20px;
        width: 80%;
        margin-top: 0px;
        color: RebeccaPurple;
    }
    .pfeil {
        font-size: 1.2em;
        margin-top: 0px;
        font-weight: 600;
    }
    /* ENDE MOBILE NAVI ******/

    /* ARZT BANNER MOBILE ****/
    #arztbanner_mobile {
        display: none;
        opacity: 0;
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0px;
        left: 100%;
        background-color: #fff;
    }
    #arztbanner1 {
        z-index: 3;
        width: 100%;
        height: 100%;
        box-sizing: border-box;
    }
    #arztbox {
        position: relative;
        display: flex;
        flex-flow: column wrap;
        left: 0;
        top: 0;
        width: 100%;
        height: auto;
        background-color: #fff;
    }
    .arztbilder {
        width: 100%;
    }
    .arztbilder:hover {
        box-shadow: 0px 0 10px rgba(0, 0, 0, 0.6);
    }
    #aerzte {
        position: relative;
        top: 0;
        display: block;
        width: 100%;
        height: 100%;
        padding-bottom: 50px;
        background-color: #fff;
        box-sizing: border-box;
        overflow: scroll;
    }

    .bildbox {
        position: relative;
        width: 100%;
        top: 10px;
        left: 0;
    }
    .bild {
        display: block;
        width: 100%;
        height: 170px;
        object-fit: contain;
    }
    .bildbox > .darkimg {
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        height: 170px;
        width: 100%;
        display: flex;
        justify-content: center;
        opacity: 0;
        transition: 0.5s ease;
        background-color: rgba(0, 0, 0, 0.7);
    }
    .bildbox:hover .darkimg {
        opacity: 0.7;
    }
    .darkimg img {
        width: 30%;
    }
    .figcap {
        margin-top: 15px;
    }
    .figcap h1 {
        color: #000;
        font-weight: 600;
        font-size: 1.1em;
        padding: 0px 20px 10px 50px;
        transition: color 0.6s ease-in-out;
    }
    .figcap h1:hover {
        color: DarkMagenta;
    }
    .figcap p {
        padding: 10px 50px;
        line-height: 150%;
        color: #777;
        font-size: 85%;
    }
    .figicon {
        color: #999;
        width: 15px;
        height: 15px;
        margin-right: 10px;
    }
    /* ENDE ARZT BANNER MOBILE *****/

    /* KONTAKT MOBILE ******/
    #nav_kontakt_container {
        display: none;
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        overflow: hidden;
    }
    #mobile_kontakt_daten {
        margin-top: 40px;
        margin-left: 10%;
        width: 80%;
        color: #333;
        padding-bottom: 25px;
    }
    #mobile_kontakt_daten h1 {
        color: RebeccaPurple;
        font-size: 150%;
        font-weight: 500;
        text-align: center;
    }
    #adresse_mobile {
        font-style: normal;
        text-align: center;
        font-size: 100%;
        color: RebeccaPurple;
    }
    #maps {
        width: 90%;
        height: 450px;
        margin-left: 5%;
    }
    #iframe_maps {
        box-shadow: 0px 0px 2px #999;
    }
    /*ENDE Mobile KOntaktdaten ******/

    /* LEISTUNGEN MOBILE *********/
    #leistungen_mobile {
        display: none;
        position: relative;
        top: 0px;
        left: 100%;
        width: 100%;
        opacity: 0;
        overflow: scroll;
    }
    .canvas1_mobile {
        position: relative;
        display: flex;
        flex-direction: column;
        width: 100%;
        background: radial-gradient(#ccc 5%, #353535 95%);
        /*background-image:url(../Bilder/canvas.svg);*/
        background-position: center;
        background-repeat: no repeat;
        background-size: cover;
        padding-bottom: 20px;
    }
    .icons_top_mobile {
        width: 100%;
        display: flex;
        flex-direction: column;
        margin-top: 0;
        /*justify-content:center;*/
    }
    .icons_bottom_mobile {
        margin-top: 0px;
        width: 100%;
        display: flex;
        flex-direction: column;
    }
    .icons_mobile {
        width: 100%;
        height: 100%;
        padding-top: 10px;
        text-align: center;
    }
    .icons_mobile:hover {
        background-color: rgba(102, 51, 153, 0.5);
        cursor: pointer;
        color: #000000;
        transition: color 1.2s;
    }
    .icons_mobile img {
        width: 40%;
    }
    .icon_text_mobile {
        padding-top: 10px;
        padding-bottom: 15px;
        color: #fff;
        font-family: 'Quicksand', sans-serif;
        font-size: 100%;
    }
    /* ENDE LEISTUNGEN MOBILE **********/

    /* DATENSCHUTZ MOBILE ANFANG *******/
    #datenschutz_container {
        display: none;
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 100%;
        opacity: 0;
        overflow: scroll;
    }
    #datenschutz_text {
        margin-top: 60px;
        width: 90%;
        margin-left: 5%;
        padding-bottom: 25px;
    }
    /* ENDE DATENSCHUTZ MOBILE *******/

    /* IMPRESSUM MOBILE *************/
    #impressum_container {
        display: none;
        width: 100%;
        height: 100%;
        top: 0;
        left: 100%;
        opacity: 0;
        overflow: scroll;
        padding-bottom: 100px;
    }
    #imp_text {
        margin-top: 60px;
        width: 90%;
        margin-left: 5%;
    }
    #imp_text h1 {
        text-align: left;
        font-size: 1.5em;
        line-height: 200%;
        color: RebeccaPurple;
    }
    #imp_text h2 {
        text-align: left;
        font-size: 1.1em;
        font-weight: 600;
        line-height: 200%;
    }
    /* ENDE IMPRESSUM ************/
    #leistungen {
        display: none;
        z-index: 3;
        position: absolute;
        top: 170px;
        width: 100%;
    }
    .canvas1 {
        position: relative;
        top: 0;
        margin-left: 20px;
        display: flex;
        flex-direction: column;
        margin: 0 auto;
        width: 100%;
        max-width: 1400px;
        height: 500px;
        background: radial-gradient(#ccc 5%, #353535 95%);
        /*background-image:url(../Bilder/canvas.svg);*/
        background-position: center;
        background-repeat: no repeat;
        background-size: cover;
    }
    #rahmen_wide {
        position: relative;
        display: block;
        width: 100%;
        top: 0px;
        background: linear-gradient(90deg, #a9a9a9, #f5f5f5);
    }
    #rahmen {
        position: relative;
        width: 100%;
        overflow: hidden;
    }
    @keyframes FadeIn {
        0% {
            opacity: 0;
        }
        100% {
            opacity: 1;
            display: block;
        }
    }
    /**********************************************************/
    .bildSpruch {
        /* position: absolute; */
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        opacity: 0;
        transition: opacity 2s ease-in-out;
        display: none;
    }

    .bildSpruch.active {
        opacity: 1;
        display: block;
    }
    .bildSpruch h1,
    h2 {
        text-align: center;
        font-family: 'Quicksand', sans-serif;
    }
    .bildSpruch h1 {
        font-size: 2em;
        font-weight: bold;
        color: #00bfff;
    }
    .bildSpruch h2 {
        font-size: 1.5em;
        font-weight: 300;
        color: #fff;
    }
    #spruch1 {
        color: #fff;
        width: 100%;
        /* height: 100%; */
        animation-name: FadeIn;
        animation-duration: 2s;
        /* overflow-y: scroll; */
        background-image: url('../Bilder/slide/1.jpg');
    }
    #spruch1 h2 {
        font-size: 1.2em;
    }
    #spruch1_text{
        width: 100%;
        /* height:100%; */
        color:white; 
        text-align: center;
        font-size:115%; 
        background-color:rgba(0,0,0,0.4);
        padding:10% 5% 15% 5%;
    }
    #spruch2 {
        color: #fff;
        animation-name: FadeIn;
        animation-duration: 2s;
        background-image: url('../Bilder/slide/2.jpg');
    }
    #spruch2_text{
        width:100%;
        height:100%;
        padding:150px 10%;
        background-color: rgba(0,0,0,0.2);
    }
    #spruch2 h3 {
        font-size: 150%;
    }
    #spruch3 {
        color: #fff;
        animation-name: FadeIn;
        animation-duration: 2s;
        background-image: url('../Bilder/slide/3.jpg');
    }
    #spruch3_text{
        width:100%;
        height:100%;
        padding:150px 10%;
        background-color: rgba(0,0,0,0.2);
    }
    #spruch4 {
        color: #fff;
        animation-name: FadeIn;
        animation-duration: 2s;
        background-image: url('../Bilder/slide/4.jpg');
    }
    #spruch4_text{
        width:100%;
        height:100%;
        padding:150px 10%;
        background-color: rgba(0,0,0,0.2);
    }
    #spruch5 {
        color: #fff;
        animation-name: FadeIn;
        animation-duration: 2s;
        background-image: url('../Bilder/slide/5.jpg');
    }
    #spruch5_text{
        width:100%;
        height:100%;
        padding:150px 10%;
        background-color: rgba(0,0,0,0.2);
    }
    #spruch6 {
        color: #fff;
        animation-name: FadeIn;
        animation-duration: 2s;
        background-color: rgba(0, 0, 0, 0.2);
    }
    /**********************************************************/

    #kontakt_button_unten {
        position: absolute;
        bottom: 15px;
        width: 50%;
        margin-left: 25%;
        text-align: center;
    }
    .button_ohne_rahmen {
        padding: 15px 60px;
        margin-left: 50px;
        color: #555;
        border: 1px solid #555;
        border-radius: 4px 4px;
        font-size: 1.1em;
    }
    .button_mit_rahmen {
        color: #fff;
        padding: 5px 40px;
        border-radius: 4px 4px;
        font-size: 1.1em;
        background-color: DarkMagenta;
    }
    a {
        text-decoration: none;
        font-family: 'Quicksand', sans-serif;
    }

    .buttons {
        padding-top: 50px;
    }

    #blauer_bereich {
        position: relative;
        display: block;
        top: 0px;
        width: 100%;
        background-color: RebeccaPurple;
    }

    #weisser_bereich {
        position: relative;
        top: 0px;
        margin: 0 auto;
        width: 100%;
        background-color: #ffffff;
        display: flex;
        flex-direction: column;
    }
    .flexboxen {
        width: 100%;
    }
    .flexboxen:nth-child(even) {
        background-color: #f5f5f5;
    }
    .flexbild {
        display: block;
        margin-left: auto;
        margin-right: auto;
        margin-top: 10px;
    }
    .flexboxen h2 {
        padding-top: 30px;
        font-family: 'Quicksand', sans-serif;
        font-size: 1.1em;
        color: #666;
        text-align: center;
        letter-spacing: 1px;
    }
    .flexboxen p {
        padding: 30px 5% 5% 5%;
        font-family: 'Quicksand', sans-serif;
        font-size: 1em;
        color: #666;
        text-align: center;
    }
    #eizelle {
        position: absolute;
        top: 345px;
        left: 55%;
        margin-left: -850px;
        width: 300px;
    }
    #eizelle img {
        width: 80%;
        opacity: 0.5;
    }
    /******************* zwei geteilter Bereich ******************/
    #zweiGeteilterBereich {
        position: relative;
        top: 0px;
        width: 100%;
        box-sizing: border-box;
        background-color: #fff;
    }
    .middle {
        width: 100%;
        max-width: 1440px;
        margin: 0 auto;
        display: flex;
        flex-wrap: wrap;
    }
    #arztboxinfo {
        margin: 0;
        padding: 0;
        display: block;
        width: 100%;
        background-color: #fff;
    }
    #arztphoto_mobile {
        display: block;
        width: 100%;
        height: 100%;
        box-sizing: border-box;
    }
    #arztphoto_mobile img {
        object-fit: cover;
        height: 100%;
        width: 100%;
        display: block;
    }
    #arztphoto img {
        display: none;
    }
    #infoarzttext {
        width: 100%;
        background: #fff;
        box-sizing: border-box;
        height: 470px;
    }

    .h2 {
        margin-top: 35px;
        margin-left: 5%;
        width: 90%;
        font-size: 1.3em;
        color: #555;
        font-weight: 400;
    }
    blockquote {
        color: DarkMagenta;
        margin-left: 5%;
        margin-top: 1.15em;
        width: 90%;
        font-size: 1em;
        line-height: 150%;
        padding-bottom: 0px;
    }
    .text1 {
        margin-left: 5%;
        width: 90%;
        color: #666;
        font-size: 1em;
        line-height: 150%;
    }
    .purpleButton {
        margin-top: 35px;
        font-size: 100%;
        border: 1px solid rebeccapurple;
        padding: 15px 50px;
        border-radius: 5px;
        color: rebeccapurple;
        background-color: transparent;
        background-repeat: no-repeat;
        cursor: pointer;
    }

    #icon_bereich {
        position: relative;
        display: block;
        top: 0px;
        width: 100%;
        background: radial-gradient(#ccc 5%, #353535 95%);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
    }
    .canvas {
        display: flex;
        flex-direction: column;
        margin: 0 auto;
        width: 100%;
        background-image: url(../Bilder/canvas.svg);
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
    }
    .icons_top {
        width: 100%;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        margin-top: 25px;
        justify-content: center;
    }
    .icons_bottom {
        margin-top: 0px;
        width: 100%;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
    }
    .icons {
        width: 50%;
        height: 100%;
        padding-top: 20px;
        text-align: center;
    }
    .icons:hover {
        background-color: rgba(102, 51, 153, 0.5);
        cursor: pointer;
        color: #000000;
        transition: color 1.2s;
    }
    .icon_text {
        padding-top: 10px;
        padding-bottom: 15px;
        color: #fff;
        font-family: 'Quicksand', sans-serif;
        font-size: 100%;
    }

    .icons img {
        width: 30%;
    }

    #formular {
        position: relative;
        display: block;
        top: 0px;
        width: 100%;
        position: relative;
        background-color: WhiteSmoke;
    }
    #form_bereich {
        width: 100%;
        height: 100%;
        position: relative;
        margin: 0 auto;
        background-image: url('../Bilder/FrauImKleid.png');
        background-repeat: no-repeat;
    }

    #form {
        width: 90%;
        margin-left: 5%;
    }
    #formphoto img {
        height: 100%;
        object-fit: cover;
    }
    input[type='text'],
    input[type='email'] {
        width: 100%;
        height: 40px;
        margin-top: 30px;
        border: none;
        border-radius: 10px;
        padding: 5px 0 5px 20px;
        color: #999;
        font-size: 1.1em;
        font-family: 'Quicksand', sans-serif;
    }
    input[type='checkbox'] {
        width: 20px;
        height: 20px;
        margin-right: 5px;
    }
    input:focus::placeholder,
    textarea:focus::placeholder {
        color: transparent;
    }
    input:hover::placeholder,
    textarea:hover::placeholder {
        color: transparent;
    }
    input:hover,
    textarea:hover {
        background-color: #fff0f0;
    }
    label[for='abfrage'] {
        font-size: 1em;
        line-height: 120%;
        color: #000;
        width: 100%;
    }
    textarea {
        width: 100%;
        margin-top: 30px;
        margin-bottom: 35px;
        height: 180px;
        border: none;
        border-radius: 10px;
        color: #999;
        font-size: 1.1em;
        padding: 5px 0 5px 20px;
        font-family: 'Quicksand', sans-serif;
    }
    #formcheckbox {
        background-color: rgba(255, 255, 255, 0.7);
        width: 100%;
        padding-left: 5%;
        padding-right: 5%;
    }
    #buttonabsenden {
        text-align: center;
    }
    #senden {
        margin-top: 20px;
        margin-bottom: 20px;
        padding: 10px 0;
        width: 80%;
        border: none;
    }
    #senden:hover {
        background-color: #ffa0a0;
        transition: background-color 1s ease-out;
    }
    #kontaktdaten {
        position: relative;
        display: block;
        top: 0px;
        width: 100%;
        background: RebeccaPurple;
        box-sizing: border-box;
    }
    #kontaktdaten_innen {
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        position: relative;
        width: 100%;
        max-width: 1440px;
        margin: 0 auto;
    }

    .kontaktdaten_flex {
        width: 100%;
        padding-top: 1em;
        padding-bottom: 1em;
    }
    .icons_kontaktdaten_phone {
        width: 20%;
        width: 20%;
        float: left;
        margin-right: 1em;
        margin-left: 10%;
    }
    .icons_kontaktdaten {
        width: 20%;
        width: 20%;
        float: left;
        margin-right: 1em;
        margin-left: 10%;
    }
    .icons_kontaktdaten1 {
        width: 20%;
        width: 18%;
        float: left;
        margin-right: 1em;
        margin-left: 10%;
    }
    #telefonnummer {
        width: 90%;
        margin-left: 20px;
    }
    .kontaktdaten_span {
        color: #fff;
        font-size: 1em;
        font-weight: 400;
        width: 100%;
    }
    .span_unter {
        color: #fff;
        font-size: 1.2em;
        font-weight: 400;
        line-height: 150%;
        width: 100%;
    }
    .span_unter_2 {
        color: #fff;
        font-size: 1.2em;
        font-weight: 400;
        line-height: 150%;
    }
    #email {
        width: 100%;
        height: 100%;
    }
    #footer {
        position: relative;
        display: flex;
        flex-direction: column;
        top: 0px;
        width: 100%;
        background-color: #575a60;
    }
    #linie_footer {
        position: relative;
        top: 20px;
        border-top: 0.1px solid #fff;
        width: 100%;
        padding: 10px 0;
    }
    #linie_footer1 {
        display: none;
        border-top: 0.1px solid #fff;
        width: 100%;
    }
    #footer_bereich {
        position: relative;
        top: 0;
        width: 100%;
        display: flex;
        flex-direction: column;
    }
    .spalte {
        margin-top: 20px;
    }
    .schrift_footer {
        line-height: 150%;
        font-size: 1em;
        font-family: 'Quicksand', sans-serif;
        color: #fff;
        text-align: center;
    }
    .schrift_footer a{
        color:#fff;
    }
    #spalte1 {
        padding-left: 5%;
        padding-right: 5%;
        font-size: 100%;
        display: flex;
        flex-flow: column wrap;
        justify-content: center;
    }
    #spalte1 img {
        margin-top: 15px;
        max-width: 100%;
    }

    #spalte2 {
        width: 100%;
    }
    #spalte3 {
        width: 100%;
    }

    #spalte2 h1,
    #spalte3 h1,
    #spalte4 h1 {
        color: #fff;
        margin-top: 20px;
        text-align: center;
        font-size: 1.5em;
    }

    .footer_hr {
        width: 90%;
        margin-left: 5%;
        border: none;
        border-top: 3px solid #ccc;
        margin-top: 10px;
        margin-bottom: 10px;
    }
    #spalte4 {
        width: 100%;
        padding-bottom: 50px;
    }
    #spalte4 a {
        color: #fff;
    }
    #cookie_hinweis {
        position: fixed;
        display: none;
        flex-direction: column;
        bottom: 0;
        left: 0px;
        z-index: 4;
        width: 100%;
        height: 300px;
        background-color: rgba(240, 250, 240, 0.9);
    }
    #cookieText {
        width: 90%;
        margin-left: 5%;
    }
    #co_button {
        width: 90%;
        margin-left: 5%;
        padding-top: 10px;
    }
    #cookieText h1 {
        font-size: 140%;
        margin-top: 20px;
        text-align: center;
    }
    #cookieText p {
        margin-top: 10px;
        text-align: center;
        font-size: 100%;
    }
    .cookie_button {
        color: #fff;
        text-align: center;
        margin: 10px 10%;
        width: 80%;
        height: 40px;
        background-color: RebeccaPurple;
        border: none;
        font-size: 1.1em;
        cursor: pointer;
        padding: 10px 0;
    }
    .cookie_button:hover {
        background-color: rgba(150, 10, 230, 0.5);
        transition: background-color 1s ease-in-out;
    }
}