@charset "utf-8";
/* CSS Document */

:root {

    --main-font: "open-sans", sans-serif;
    --main-template-maxwidth: 1500px;

    --main-font-color: #474747;
    --font-color-opposite: white;

    --font-size-1: 20px;
    --font-size-2: 18px;
    --font-size-3: 38px;
    --font-size-3-2: 28px;
    --font-size-4: 14px;

    /* --font-size-2: 18px;
    --font-size-3: 15px; */

    --font-weight-light: 300;
    --font-weight-regular: 400;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    --color1: #DD3B34;
    --color1-overley: rgba(221,59,52,0.9);
    --color2: #474747;
    --color3: white;

    --mobil-padding-lr: 3%;
    --mobil-padding-lr-2: 7%;
    --mobil-padding-lr-suche: 3%;
    --mobil-padding-lr-suche-inside: 4%;

}


html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
	box-sizing:border-box;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}

img { height: auto; max-width: 100%}


/* @font-face {
    font-display: swap;
} */

body {

	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;

	font-family: var(--main-font);
	font-size: var(--font-size-1);
	font-weight:normal;
	color: var(--main-font-color);
}

body a {
    color: var(--color2);
    text-decoration: none;
}
body a:hover {
    color: var(--color1);
}

body a.fix {
    color: var(--color1);
}

@media only screen and (max-width: 1370px) {
    body a.fix {
        color: var(--color2);
    }
}

h1 {
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-3);
    color: var(--color1);
    margin: 0;
    padding: 0;
    margin-bottom: 35px;
    width: 100%;
}


@media screen and (max-width: 1240px) {
    h1 {
        font-size: var(--font-size-3-2);
    }
}

@media screen and (max-width: 1240px) {
    .suchmaske h1 {
        margin-bottom: 15px;
    }
}



h2 {
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-1);
    color: var(--color1);
    margin: 0;
    padding: 0;
    width: 100%;
    padding-bottom: 15px;
}

h3 {
    font-weight: var(--font-weight-regular);
    font-size: var(--font-size-1);
    color: var(--color2);
    margin: 0;
    padding: 0;
}

.info {
    font-size: var(--font-size-4) !important;
    font-weight: var(--font-weight-light) !important;
    color: var(--color2);
}

#map {
    min-height: 300px;
}

/* ------------------------------------------------ */
/* neues css */


/* basis flex */


.flex {
    width: 100%;
    /* float: left; */
    display: flex;
    flex-direction: row;
    /* inhalt gleichmàssig verteilen */
    /* justify-content: space-between; */
    /* NOTE: damit umbruch stattfindet */
    flex-wrap: wrap;
}

.flex-container {

    /* flex-basis: 100% */
    /* NOTE: wenn ich spalten umbrechen muss */
    /* width: 33.3%; */

    flex-grow: 1;
    
}




.buttonaction, button, input[type="submit"] {
    background-color: var(--color1);
    border-radius: 2px;
    padding: 11px 26px;
    color: var(--font-color-opposite);
    border: 0px;
}

.buttonaction.nonebg {
    background-color: var(--font-color-opposite);
    color: var(--color1);
}

button {
    border: 0px;
    box-sizing:border-box;
    margin-top: 15px;
}


@media only screen and (max-width: 1370px) {
    .navmobil .header-funktionen {
        margin-top: -50px;
        margin-bottom: 50px;
    }    
    .navmobil .buttonaction {
        background-color: transparent !important;
        text-align: center;
        color: var(--color3);
        padding: 0;
    }
    .overlay.navmobil a.buttonaction {
        margin-bottom: 20px !important;
    }
}



/* ------------------------------------------------ */
/* neues css */


/* HEADER */
.middle {
    width: 100%;
    max-width: var(--main-template-maxwidth);
    
    position: relative;
    transform: translateX(-50%);
    left: 50%;
}

header {
    width: 100%;
    height: 110px;
    padding-top: 30px;
    background-color: #fff;
}


header .logo {
    max-width: 300px;
    margin-right: 130px
}

@media screen and (max-width: 1530px) {
    header .logo {
        padding-left: var(--mobil-padding-lr);
    }
}

@media screen and (max-width: 1240px) {
    header .logo {
        padding-left: var(--mobil-padding-lr-2);
    }
}


header nav, header .header-funktionen, button, input[type="submit"] {
    font-size: var(--font-size-2);
}




header nav {
    padding-right: 5%;
    max-width: 700px;
    width: 100%;
    font-weight: var(--font-weight-bold);
    padding-top: 28px;
}

/* wenn nich aktiv, damit menü desktop in entsprechender breite ausgegeben wird */
.overlay {
    max-width: 600px;
    width: 100%;
}

/* damit mobil nav mittig wird und 100% breite */
@media screen and (max-width: 1370px) {
    .overlay {
        max-width: none;
    }
    header nav {
        max-width: none;
    }
}

/* nav header, nav suchmaske filter */
header nav li, .suchmaske nav li { 
    list-style: none; 
    display: inline; 
    margin-right: 5%;
    float: left;
}

.suchmaske nav li:last-of-type {
    margin-right: 0;
}

.suchmaske nav {
    margin-bottom: 40px;
    float: left;
    width: 100%;
}







header .header-funktionen, button, input[type="submit"] {
    font-weight: var(--font-weight-bold);
    padding-top: 12px;
    text-align: right;
}

/*css middle - in div 100 div mitten*/


/* SPRACHEN */

#sprache_kl img {
    height: 20px;
    float: left;
    margin-right: 10px;
}

#sprache_kl.desktop {
    position: absolute;
}

#sprache_kl.mobil {
    padding-bottom: 30px;
    width: 100%;
    max-width: 120px;
    position: relative;
    transform: translateX(-50%);
    left: 50%;
}





/* WERBUNG */
/* google ads  */

/* .adsbygoogle ist das übergeordnete div */
/* das div kleppt weitere unten im footer, trotz display none... */
/* .adsbygoogle, #aswift_1_host, #aswift_2_host {
    position: absolute !important;
    display: none !important;
} */


/* WERBUNG */
/* fix positionieren */


/* werbung dekstop gross */
@media screen and (min-width: 2200px) {
.werbung-desktop-lr {
    position: fixed;
    z-index: 99999;
    width: 100%;
}

.werbung-desktop-links, .werbung-desktop-rechts {
    width: 300px;
    /* background-color: greenyellow; */
}

.werbung-desktop-links {
    float: left;
}

.werbung-desktop-rechts {
    float: right;
}
}

/* werbung desktop klein */
@media screen and (max-width: 2199px) and (min-width: 1241px) {
.werbung-desktop-insite01, .werbung-desktop-insite02 {
    width: 300px;
    /* background-color: greenyellow; */
    margin-left: auto;
    margin-top: 25px;
}

.werbung-desktop-insite02 {
    position: absolute;
    right: 0;
    margin-top: 50px;
}

.werbung-desktop-lr .werbung-desktop-links, .werbung-desktop-rechts {display: none;}
}

.werbung-mobil-bottom { display: none;}
.werbung-mobil-footer { display: none;}
.werbung-mobil-content { display: none;}


/* werbung mobil bottom */
@media screen and (max-width: 1240px) {
    .werbung-mobil-bottom {
        position: fixed;
        z-index: 99999;
        bottom: 0;
        left: 0;
        width: 100%;
        /* background-color: greenyellow; */

        display: block;

        /* height: 200px; */
    }

    .werbung-desktop-lr .werbung-desktop-links, .werbung-desktop-rechts {display: none;}
    .werbung-desktop-insite01, .werbung-desktop-insite02 {display: none;}

    .werbung-mobil-footer, .werbung-mobil-content {
        width: 100%;
        /* background-color: #12A01E; */
        display: block;
    }
    .werbung-mobil-content {
        margin-top: 60px;
    }
    /* für erster werbeblock mobil nach suchmaskenfeld (weiss) */
    .mobil-padding {
        padding-left: var(--mobil-padding-lr-2);
        padding-right: var(--mobil-padding-lr-2);
    }
}



/* werbung mobil block (content, footer) */





/* SUCHMASKE */

.suchehgfarbe {
    position: absolute;
    z-index: 1;
    background-color: rgba(250, 218, 85, 1);
    width: 100%;

    /* höhe anpassen, falls mit ergebnissen noch mehr höhe benötitgt wird */
    height: 2500px;
}

.hgbild {
    position: absolute;
    z-index: 2;
    mix-blend-mode: soft-light;

    /* kann hier bild ausschnitt steuern */
    margin-left: -20vw;
}

.hgbild img {
    
     /* höhe anpassen, falls mit ergebnissen noch mehr höhe benötitgt wird */
    height: 2500px;
}

.suche {
    width: 100%;
    padding-top: 65px;
    /* padding-bottom: 140px; */
    position: relative;
    z-index: 3;

    /* kann hier prozent, aktuell 30% erhöhen für mehr bild links */
    background-image: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(250, 218, 85, 1) 30vw);
}

.compensateforheight {
    width: 100%;
    height: 65px;
}

.no-height {
    display: none !important;
}


.suchmaske {
    width: 100%;
    max-width: 550px;
    border-radius: 10px;
    background-color: white;
    min-height: 200px;
    float: left;
    padding: 40px;
}

@media screen and (max-width: 1530px) {
    .suchmaske {
        margin-left: var(--mobil-padding-lr-suche);
        margin-right: var(--mobil-padding-lr-suche);
        padding-left: var(--mobil-padding-lr-suche-inside);
        padding-right: var(--mobil-padding-lr-suche-inside);
        display: block
    }
}

@media screen and (max-width: 1240px) {
    .suchmaske {
        width: 94%;
        max-width: none;
    }
}


/* news neben suchmaske desktop aktiv, mobil deaktiviert und sichtbar in weissbereich nach suchergebnissen */
.newsmobil {display: none;}
@media screen and (max-width: 1240px) {
    .newsdesktop {
        display: none;
    }
    .newsmobil {
        display: block;
    }
    .guenstigste {
        padding-top: 50px;
    }
    .charts {
        padding-top: 0 !important;
    }
}





.suchmaske nav a {
    font-weight: var(--font-weight-semibold);
}

@media screen and (max-width: 550px) {
    .suchmaske nav a {
        font-size: var(--font-size-4);
    }
}

.suchmaske button, input[type="submit"] {
    width: 100%;
    text-align: center;
}

.suche .flex-container:nth-child(2), .suche .flex-container:nth-child(3) {
    width: 20%;
    padding-right: 5%;
}

.suche .ausgabetreffertitel .flex-container:nth-child(1), .suche .ausgabetreffertitel .flex-container:nth-child(3) {
    width: 20%;
    padding-right: 0;
}


.ausgabetreffertitel {
    width: 100%;
    margin-top: 80px;
    margin-bottom: 40px;
    /* margin-top: 50px; */
}

.ausgabetreffertitel hr {
    border: 1px solid white;
}

.titelergebnisse {
    max-width: 300px;
    text-align: center;
    font-size: var(--font-size-1);
    color: var(--color1);
    font-weight: var(--font-weight-semibold);
    padding: 0 !important;
}

.ausgabetreffer {
    width: 100%;
    /* margin-top: 50px; */
    font-size: var(--font-size-1);
    color: var(--color2);
    margin-bottom: 40px
}

.ausgabetreffer .spalten {
    font-weight: var(--font-weight-bold);
}

.ausgabetreffer .flex-container:nth-child(1) {
    width: 25%;
}
.ausgabetreffer .flex-container:nth-child(2) {
    width: 35%;
}
.ausgabetreffer .flex-container:nth-child(3) {
    width: 15%;
}
.ausgabetreffer .flex-container:nth-child(4) {
    width: 5%;
}


@media only screen and (max-width: 1530px) {
    .ausgabetreffer .flex-container:nth-child(1) {
        padding-left: 2%;
    }
    .ausgabetreffer .flex-container:nth-child(4) {
        padding-right: 2%;
    }
}



/* vorlagen für breite der spalten bei weniger breite */

@media only screen and (max-width: 1130px) {
    .ausgabetreffer .flex-container:nth-child(1) {
        width: 10%;
    }
    .ausgabetreffer .flex-container:nth-child(2) {
        width: 35%;
    }
    .ausgabetreffer .flex-container:nth-child(3) {
        width: 10%;
    }
}


/* hier noch anpassen für mobil und ab breite */

@media only screen and (max-width: 720px) {

    /* kann gerade nicht eruieren warum diese deaktiviert werden müssen... temp deaktivieren - 17.05.24 */
    /* .ausgabetreffer:nth-child(2),.ausgabetreffer:nth-child(3),.ausgabetreffer:nth-child(4) {
        display: none;
    } */

    /* nur erste zeile deaktivieren - damit die spalten bezeichnungen deaktiviert werden - neu - 17.05.24 */
    .ausgabetreffer:nth-child(3) {
        display: none;
    }

    .suche .ausgabetreffer .flex-container:nth-child(1) {
        width: 50%;
        order: 2;
        padding-right: var(--mobil-padding-lr-2);
        padding-bottom: 3%;
        padding-left: 0;
    }
    .suche .ausgabetreffer .flex-container:nth-child(2) {
        width: 50%;
        order: 4;
        padding-right: var(--mobil-padding-lr-2);
        padding-left: 0;
    }
    .suche .ausgabetreffer .flex-container:nth-child(3) {
        width: 50%;
        order: 1;
        padding-left:  var(--mobil-padding-lr-2);
        padding-right: 0;
    }
    .suche .ausgabetreffer .flex-container:nth-child(4) {
        width: 50%;
        order: 3;
        padding-left: var(--mobil-padding-lr-2);
        padding-right: 0;
    }

    .ausgabetreffer #info {
        padding: 0 var(--mobil-padding-lr-2) 0 var(--mobil-padding-lr-2);
    }
}



.ausgabetreffer #menu, .ausgabetreffer #info {
    width: 100%;
}

.ausgabetreffer #menu {
    margin-bottom: 20px;
    text-align: center;
}

.ausgabetreffer #menu img {
    margin: 0 5px 0 5px;
}










/* DETAILSEITE */

#Detail h1 {
    margin-bottom: 5px
}

#Detail #content1 {
    width: 100%;
    float: left;
    padding: 20px 0 20px 0;
}

#Detail .uppercase {
    padding-bottom: 20px;
}

.pics {
    float: left;
    margin-right: 7px;
}

.pics img {
    height: 70px;
}

.block-zeile {
    width: 100%;

}


/* noch temp, weil es eigentlich für anderes spalten verwendet wird in ausgabe von ergebnissen */
/* .flex {
    overflow: scroll !important;
    width: 100% !important;
    min-width: 890px;
} */

/* sind 6 spalten */
.unterseiten .flex-container {
    width: 16.5% !important;
}


@media only screen and (max-width: 1190px) {
    .unterseiten .flex-container {
        width: 50% !important;
    }

    #Detail .uppercase {
        display: none;
    }

    .unterseiten .flex-container:nth-child(1) {
        padding-left: 0;
    }

    /* genaugigkeit */
    .unterseiten .flex-container:nth-child(6) {
        order: 5;
    } 

    .unterseiten .flex-container:nth-child(1), .unterseiten .flex-container:nth-child(2) {
        margin-bottom: 20px;
    }



}


/* @media only screen and (max-width: 770px) {
    .unterseiten .flex-container {
        width: 50% !important;
    }
} */



/* sind 6 spalten */
.aendern .flex-container:nth-child(1) {
    width: 12% ;
    margin-bottom: 20px;
}
.aendern .flex-container:nth-child(2) {
    width: 12% ;
}
.aendern .flex-container:nth-child(3) {
    width: 12% ;
    text-align: center;
}
.aendern .flex-container:nth-child(4) {
    width: 12% ;
}
.aendern .flex-container:nth-child(5) {
    width: 12% ;
    text-align: center;
    align-items: center;
    display:flex; 
    flex-direction:column; 
    }
.aendern .flex-container:nth-child(6) {
    width: 12% ;
}


@media only screen and (max-width: 1190px) {

    
    .aendern .flex-container {
        width: 50% ;
    }

    .aendern .flex-container:nth-child(1) {
        padding-left: 0;
    }

    /* genaugigkeit */
    .aendern .flex-container:nth-child(6) {
        order: 5;
    } 

    .aendern .flex-container:nth-child(1), .aendern .flex-container:nth-child(2) {
        margin-bottom: 20px;
    }


}

/* @media only screen and (max-width: 720px) { */

    /* kann gerade nicht eruieren warum diese deaktiviert werden müssen... temp deaktivieren - 17.05.24 */
    /* .ausgabetreffer:nth-child(2),.ausgabetreffer:nth-child(3),.ausgabetreffer:nth-child(4) {
        display: none;
    } */

    /* nur erste zeile deaktivieren - damit die spalten bezeichnungen deaktiviert werden - neu - 17.05.24 */
/*     .aendern .flex-container:nth-child(3) {
        display: none;
    }

    .aendern .flex-container:nth-child(1) {
        width: 50%;
        order: 2;
        padding-right: var(--mobil-padding-lr-2);
        padding-bottom: 3%;
        padding-left: 0;
    }
    .aendern .flex-container:nth-child(2) {
        width: 50%;
        order: 4;
        padding-right: var(--mobil-padding-lr-2);
        padding-left: 0;
    }
    .aendern .flex-container:nth-child(3) {
        width: 50%;
        order: 1;
        padding-left:  var(--mobil-padding-lr-2);
        padding-right: 0;
    }
    .aendern .flex-container:nth-child(4) {
        width: 50%;
        order: 3;
        padding-left: var(--mobil-padding-lr-2);
        padding-right: 0;
    }
    .aendern .flex-container:nth-child(5) {
        width: 50%;
        order: 3;
        padding-left: var(--mobil-padding-lr-2);
        padding-right: 0;
    }

    .aendern #info {
        padding: 0 var(--mobil-padding-lr-2) 0 var(--mobil-padding-lr-2);
    }
} */

/* sind 5 spalten */
.aendern1 .flex-container:nth-child(1) {
    width: 20% ;
    margin-bottom: 20px;
}
.aendern1 .flex-container:nth-child(2) {
    width: 20% ;
}
.aendern1 .flex-container:nth-child(3) {
    width: 20% ;
}
.aendern1 .flex-container:nth-child(4) {
    width: 20% ;
}
.aendern1 .flex-container:nth-child(5) {
    width: 20% ;
    }



/* WEITERES */

.farbverlauf {
    height: 140px; 
    width: 100%;
    background-image: linear-gradient(to top, rgba(255,255,255,1) 0%, rgba(250, 218, 85, 0) 80%);
}


/* NEWS, THEMEN */

.themen {
    width: 100%;
    min-height: 1100px;
    background-color: white;

    position: relative;
    z-index: 3;
}

.inhalte {
    /* padding-bottom: 90px; */
    padding-bottom: 160px; /*neu nachdem ich die margin-top bei footer von 70px auskommentiert habe, weil unterseiten content und footer div abstossen*/
}

@media screen and (max-width: 1530px) {
    .inhalte {
        padding-left: var(--mobil-padding-lr);
        padding-right: var(--mobil-padding-lr);
    }
}

@media screen and (max-width: 1240px) {
    .inhalte {
        padding-left: var(--mobil-padding-lr-2);
        padding-right: var(--mobil-padding-lr-2);
        /* padding-bottom: 0; */
    }

    .inhalte.detailmobil {
        padding-bottom: 0;
    }
}






.charts {
    padding-top: 50px;
}

.news article {
    width: 70%;
    margin-bottom: 60px;
}

@media screen and (max-width: 1220px) {
    .news article {
        width: 100%;
    }
}

.news article h2 {
    font-weight: var(--font-weight-bold);
    /* margin-bottom: 3px; */
    padding-bottom: 0;
}

.news .info {
    padding-bottom: 15px;
    padding-top: 3px;
    float: left;
    width: 100%;
}

.news article h2 a {
    color: var(--color1);
}

.news article a {
    text-decoration: none !important;
    border: none;
}

.news #nanzahl {
    margin-bottom: 15px;
}

#article1 {display:block; visibility:visible;min-height: 128px;}
#article2 {display:none; visibility:hidden;min-height: 128px;}
#article3 {display:none; visibility:hidden;min-height: 128px;}
#article4 {display:none; visibility:hidden;min-height: 128px;}
#article5 {display:none; visibility:hidden;min-height: 128px;}
#article6 {display:none; visibility:hidden;min-height: 128px;}
#article7 {display:none; visibility:hidden;min-height: 128px;}
#article8 {display:none; visibility:hidden;min-height: 128px;}
#article9 {display:none; visibility:hidden;min-height: 128px;}
#article10 {display:none; visibility:hidden;min-height: 128px;}
#article11 {display:none; visibility:hidden;min-height: 128px;}
#article12 {display:none; visibility:hidden;min-height: 128px;}
#article13 {display:none; visibility:hidden;min-height: 128px;}
#article14 {display:none; visibility:hidden;min-height: 128px;}
#article15 {display:none; visibility:hidden;min-height: 128px;}
#article16 {display:none; visibility:hidden;min-height: 128px;}
#article17 {display:none; visibility:hidden;min-height: 128px;}
#article18 {display:none; visibility:hidden;min-height: 128px;}
#article19 {display:none; visibility:hidden;min-height: 128px;}
#article20 {display:none; visibility:hidden;min-height: 128px;}
#article21 {display:none; visibility:hidden;min-height: 128px;}
#article22 {display:none; visibility:hidden;min-height: 128px;}
#article23 {display:none; visibility:hidden;min-height: 128px;}
#article24 {display:none; visibility:hidden;min-height: 128px;}
#warticle1 {display:block; visibility:visible;min-height: 128px;}
#warticle2 {display:none; visibility:hidden;min-height: 128px;}
#warticle3 {display:none; visibility:hidden;min-height: 128px;}
#warticle4 {display:none; visibility:hidden;min-height: 128px;}
#warticle5 {display:none; visibility:hidden;min-height: 128px;}
#warticle6 {display:none; visibility:hidden;min-height: 128px;}
#warticle7 {display:none; visibility:hidden;min-height: 128px;}
#warticle8 {display:none; visibility:hidden;min-height: 128px;}
#warticle9 {display:none; visibility:hidden;min-height: 128px;}
#warticle10 {display:none; visibility:hidden;min-height: 128px;}
#narticle1 {display:block; visibility:visible;min-height: 128px;}
#narticle2 {display:none; visibility:hidden;min-height: 128px;}
#narticle3 {display:none; visibility:hidden;min-height: 128px;}
#narticle4 {display:none; visibility:hidden;min-height: 128px;}
#narticle5 {display:none; visibility:hidden;min-height: 128px;}
#narticle6 {display:none; visibility:hidden;min-height: 128px;}
#narticle7 {display:none; visibility:hidden;min-height: 128px;}
#narticle8 {display:none; visibility:hidden;min-height: 128px;}
#narticle9 {display:none; visibility:hidden;min-height: 128px;}
#narticle10 {display:none; visibility:hidden;min-height: 128px;}

/* .inhalte.news {
    padding-bottom: 0;
} */




/* UNTERSEITEN */

/* mitmachen */

.themen ul {
    padding-left: 20px;
}

.themen li {
    margin-bottom: 10px;
}

/* links farbe und underline oder dotted */
.themen a {
    text-decoration: none;
    border-bottom: dotted 1.5px var(--color1);
}




/* DATENSCHUTZ */

#datenschutz h2 {
    margin-top: 30px;
    font-weight: var(--font-weight-bold);
}

#datenschutz h3 {
    margin-top: 20px;
    margin-bottom: 10px;
    font-weight: var(--font-weight-semibold);
}

#datenschutz strong {
    font-weight: var(--font-weight-semibold);
}











/* FOOTER */

footer {
    background-color: #DD3B34;
    color: var(--font-color-opposite);

    /* margin-top: 70px; */
    padding: 60px 0;

    font-weight: var(--font-weight-light);

    position: relative;
    z-index: 2;

}

@media screen and (max-width: 1530px) {
    footer {
        padding-left: var(--mobil-padding-lr);
        padding-right: var(--mobil-padding-lr);
    }

    footer .flex-container {
        padding-right: 20px;
    }
}


footer .logo img:first-of-type {
    margin-bottom: 40px;
}

footer .logo img {
    margin-bottom: 20px;
}

footer .titel {
    font-weight: var(--font-weight-bold);
    margin-bottom: 20px;
    width: 100%;
    float: left;
}

footer ul {
    padding-left: 0 !important;
}

footer li {
    list-style: none;
    margin-bottom: 12px;
}

footer li a {
    color: var(--color3);
}

footer li a.fix {
    color: var(--color2);
}

footer li a:hover {
    color: var(--color3);
}


footer .social {
    width: 100%;
    text-align: right;
}

footer .social img {
    margin-left: 20px;
    margin-bottom: 10px;
}


/* INPUT, BUTTON ETC */

input, select, textarea {
    border: var(--color1) 1px solid;
    border-radius: 2px;
    font-family: var(--main-font);
    font-size: var(--font-size-1);
    color: var(--color2);
    padding: 10px 10px;
    box-sizing:border-box;
    width: 100%;
    margin-bottom: 15px;
    background-color: var(--font-color-opposite);
}

/* FUNKTIONIERT NOCH NICHT... ODER GREIFT NICHT... */
input:focus, input:active {
    border: var(--color2) 1px solid;
    outline: none;
}

::-webkit-input-placeholder { color: var(--color1); opacity: 0.4; }
::-moz-placeholder { color: var(--color1); opacity: 0.4; }
:-ms-input-placeholder { color: var(--color1); opacity: 0.4; }
input:-moz-placeholder { color: var(--color1); opacity: 0.4; }

input[type="radio"], input[type="checkbox"] {
    width: auto;
}


/* NAV HAM */

@media only screen and (min-width: 1371px) {
    .navmobil {
        display: none;
    }
}

@media only screen and (max-width: 1370px) {

    header {
        height: 90px;
    }

    .navmobil li {
        padding-left: 5%;    
    }

    .navdesktop {
        display: none;
    }

    .navheight {display: none;}

    .button_container-height.open {display: none;}

    nav {
        padding-top: 30px;
    }

    @media screen and (max-width: 550px) {
        nav {
            padding-top: 0;
        }
    }

    .navmobil nav li {
        width: 100%;
        text-align: center;
        position: relative;
    }

    .open nav li {
        animation: fadeInRight .5s ease forwards;
        animation-delay: .35s;

        /* left: 40%; */
        opacity: 0;
    }

    .open nav li:nth-of-type(2) {
        animation-delay: .4s;
    }

    .open nav li:nth-of-type(3) {
        animation-delay: .45s;
    }

    .open nav li:nth-of-type(4) {
        animation-delay: .5s;
    }

    .open nav li:nth-of-type(5) {
        animation-delay: .55s;
    }

    @keyframes fadeInRight {
        0% {
            opacity: 0;
            left: 40%;
        }
        100% {
            opacity: 1;
            left: 0;
        }
    }

    .overlay {
        width: 100%;
        /* float: none; */
    }

    .button_container, .closebtn {
        display: block;
    }

    .open {
        height: 100vh !important;
    }

    .overlay {
        height: 0;
        width: 100%;
        position: fixed;
        /* position: relative; */
        z-index: 999;
        left: 0;
        top: 0;
        background-color: var(--color1-overley);
        overflow-x: hidden;
        transition: 0.5s;
        transform: 0 !important;
    }

    .overlay-content {
        position: relative;
        /* z-index neu für benzin */
        /* z-index: 99999;  */
        top: 100px;
        width: 100%;
        text-align: center;
    }

    .overlay a {
        text-decoration: none;
        /* color: #000; */
        color: var(--color3);
        display: block;
        transition: 0.3s;
        margin-bottom: 30px;
        /* font-size: 23px; */
    }

    .overlay a:hover {
        color: var(--color2);
    }

    .overlay .closebtn {
        position: absolute;
        top: 20px;
        /* right: 45px; */
    }

    /* ham nav */
    .button_container {
        position: absolute;
        height: auto;
        width: 60px;
        cursor: pointer;
        z-index: 999;
        transition: opacity .25s ease;
        cursor: pointer;
        right: 8%;
        margin-top: 4px;
        height: 25px;

        /* background-color: pink; */
    }

    .button_container-height.shrink {
        height: 15px;
    }

    .button_container.active {
        top: 30px;
        right: 8%;
        width: 35px;
        position: fixed;
        z-index: 9999;
    }

    .button_container span:nth-of-type(2) {
        top: 10px;
    }

    .button_container span:nth-of-type(3) {
        top: 21px;
    }

    .button_container:hover {
        opacity: .7;
    }


    .button_container span {
        /* background: #000; */
        background: var(--color1);
        border: none;
        height: 5px;
        width: 100%;
        position: absolute;
        z-index: 999;
        /* top: 0;
        left: 0; */
        transition:  all .35s ease;
        cursor: pointer;
    }


    .button_container.active .top {
        transform: translateY(9px) translateX(0) rotate(45deg);
    }
    .button_container.active .middleline {
        opacity: 0;
    }

    .button_container.active .bottom {
        transform: translateY(-12px) translateX(0) rotate(-45deg);
    }

    .button_container.active span {
        background: #000;
        background: var(--color3);
    }
}

.meldung {
    width: 100%;
    padding: 2%;
    margin: 10px 0 10px 0;
    float: left;
    color: #fff;
    text-transform: uppercase;
    text-align: center;
}

.meldung a { color: #fff;}

.meldung-ok { background-color: #12A01E;}
.meldung-ok:before{content:url(../image/meldung-ok.png); margin: 0 8px 0 0;}

.meldung-false { background-color: #FB0004;}
.meldung-false:before{content:url(../image/meldung-false.png); margin: 0 5px 0 0;}

.meldung-warn { background-color: #CCCC00;}
.meldung-warn:before{content:url(../image/meldung-false.png); margin: 0 5px 0 0;}