@font-face {
    font-family: 'titeleins';
    src: local('titeleins'), url('fonts/LibreBaskerville-Regular.ttf') format('ttf');
}

@font-face {
    font-family: 'titelzwei';
    src: local('FetteUNZFraktur'), url('../fonts/FetteUNZFraktur.ttf') format('ttf');
}

html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video
{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent;}
body {line-height: 1; font-family: arial;}
h1{font-size:25px}
h2 {font-size: 21px;color: #6699ff;}
h3{font-size:18px}
h4{font-size:16px}

.text0 {font-size: 20px;}
.text1 {font-size: 12px; padding-left:2%;}
.text2 {font-size: 16px; color: #CC6600;}
.text3 {font-size: 16px; color: #CCCCCC;}
.text4 {font-size: 20px; color: #FFFFFF;}
.text5 {font-size: 16px; color: #FFFFCC;}
.text6 {font-size: 10px; color: #CCFFFF;}
.text7 {font-size: 18px; color: #FF6633;}
.text8 {font-size: 12px; color: #FF6633;}
.text9 {font-size: 27px; color: #FFCC33;}
.text10 {font-size: 20px; color: #6699ff; margin:40px 0px 70px 0px;}
.text11 {font-size: 20px; color: #6699ff; text-indent: 2%;}
.text12 {font-size: 20px; color: #FFFF99; margin-left: 20px; margin-right: 5%;}
.farbe {color: #FFCC33;}

.titel2 {
    font-family: titelzwei;
    font-size: 28px;
    color: #cc3333;
    text-align:center;
}

.tdoc {
    width: 70%;
    font-size: 20px;
    color: #FFFF99;
    margin-left: 10%;
    margin-right: 10%;
   /*white-space: pre;*/
   
}

article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}
nav ul{list-style:none}
blockquote,q{quotes:none}
blockquote:before,blockquote:after,q:before,q:after{content:none}
a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent}
ins{background-color:#ff9;color:#000;text-decoration:none}
mark{background-color:#ff9;color:#000;font-style:italic;font-weight:bold}
del{text-decoration:line-through}
abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help}
table{border-collapse:collapse;border-spacing:0}

/*hr {border: none;border-top: 3px; color: #999999;overflow: visible;text-align: center;height: 25px;}*/

hr {
    border: 2px solid red;
}
/*hr::after {background: #fff;content: "§";padding: 0 4px; position: relative; top: -13px;}*/
input, select {
    vertical-align: middle
}
body,html{background-image:url(../grafik/hgrund-2.png)}

header {
    background: #336699; 
    margin: auto;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    z-index: 999;
    height: 40px
}

                           /* password */

    label {
    display: block;
}

input[type="submit"],
label {
    margin-top: 1rem;
}

                            /*ende password*/

                            /*--- sprungmarke-anker -----*/

a[href^="#anker2"] /*Das Leben*/
a[href="#EinJubel"] /*textanfang*/

                         /*--- sprungmarke-anker       ende  -----*/
nav {
    display: inline-block
}
nav ul li a{background:#fff;padding:2px 6px;font-size:14px;text-decoration:none;font-weight:bold;color:#344;border-radius:5px}
nav ul li a:hover{color:#000}
nav ul li{display:inline-block;margin:10px}
nav ul{list-style:none}
article {border-bottom: solid 2px #ffff00;padding-bottom: 10px;margin-bottom: 10px;}
article h2{font-weight:normal;margin-bottom:12px}
article img {width: 100%;}

.bild {width: 100%; height: auto;}
.bild2 {text-align: center; width: 100%;height: auto;}
.bild3 {text-align: center; margin-left: 18%; width: 60%; height: auto;}
.bild4 {width: 20%;height: auto;}
.ecke1 {border-radius: 2px;}
img {border-radius: 10px;}

.mittig {text-align:center;}
.abst1 {margin-top: 7%;}
.abst2 {margin-bottom: -4%;}
.abst3 {margin-left: 20%;}
.abst4 {margin-top:1%;}
.abst5 {margin-right: 2%;}

.butt-cont {display: flex; justify-content: center; align-items: center;}
.einr {text-indent: 30px;}

footer {
    max-width: 1000px;
    margin-left: 20%;
    margin-right: 20%;
    margin-bottom: 0;
    margin-top: 2%;
    clear: both;
    text-align: center;
}
footer p {padding-left: -4%;padding-right:4%; color: #FFF;}
footer a {color: #FFF;}

address{padding:10px 20px 30px 10px}


aside > div {
    margin-bottom: 7px;
    margin-top: auto;
    background: #336699;
    min-height: 7px;
   /*height: 30px;*/
    height: 20px;
    padding: 40px 10px;
    text-align: center;
    color: #FFF;
    border-radius: 5px;
}

aside > section {
    margin-bottom: 7px;
    margin-top: auto;
    background: #336699;
    min-height: 80px;
    height: 30px;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 7px;
    padding-bottom: 7px;
    text-align: center;
    color: #FFF;
    border-radius: 5px;
}

.zentriert  {
    display: grid;
    justify-content: center;
    align-items: center;
    margin-top:20%;
}


a#logo{vertical-align:middle;font-size:40px;color:#344;font-weight:bold;display:block;text-decoration:none;text-align:center;line-height:40px;padding:60px 5px}
body > section{max-width:1000px;margin:auto;padding:30px 0px;border-bottom:1px solid #999;color:#333}

#sidebarBackTop{background:#286983;color:#FFF;opacity:0.8;cursor:pointer;display:block;padding:5px;}
#sidebar a.back2Top{text-decoration:none;text-align:center;background:#344;color:#FFF;font-weight:bold;padding:5px;display:block;}
#sidebar a.back2Top:hover{background:#456}
/*#sidebarContent {width: 200px; padding: 20px;}*/
#sidebarContent {width: 200px; height: auto; padding: 20px;}

#main {margin-left: 320px;}
#wrapall {padding-top: 60px;}
#header{max-width:1000px;overflow:hidden;height:40px}

#wrapall, #header {max-width: 1300px;margin: 0 auto;}
#headerLeft,#headerRight{display:inline-block;vertical-align:middle}

#headerLeft {text-align: center;width: 170px;}
#headerRight{height:40px}
#sidebar{float:left;position:absolute; width:200px;}
#page{padding:20px}

#menuToggle, #mobileMenuToggle {
    background: #FFF;
    cursor: pointer;
    display: inline-block;
    font-size: 40px;
    width: 42px;
    font-weight: bold;
    text-align: center;
    height: 40px;
    line-height: 40px;
    color: #344;
    border-radius: 10px
}
#mobileMenuToggle,#mobileLogo{vertical-align:middle;display:none;font-size:30px}
#menuToggle:hover{color:#FFF;background:#344}
.socialButtons{float:right;padding-top:8px}
.socialButtons a{display:inline-block;cursor:pointer;background:#0570e6;padding:2px;width:33px;text-align:center;height:20px;font-weight:bold;color:#FFF;text-decoration:none;line-height:20px;font-size:20px;border-radius:5px;vertical-align:middle}
.socialButtons a.linkedin{background:#24568e}
.socialButtons a svg {
        width: 16px;
        height: 16px;
    } 

.button1 {
    margin-top: 50px;
    padding: 20px 10px 20px 10px;
    width: 200px;
    height: 30px;
    background-color: skyblue;
    color: blue;
    font-family: sans-serif;
    font-size: 20px;
    text-align:center;
    border-radius: 10px;
}

.stick #sidebarContent {position: fixed; z-index: 900;bottom: 0px;}
#stick-here{background:red}
.sidebarToggle #sidebar{display:none}
.sidebarToggle #main{margin-left:0}


                    /* -- media Bereich ---------*/

@media screen and (max-width:1100px){header{padding:10px}
#headerLeft{width:auto}
#headerRight{width:60%}
}

@media screen and (max-width:820px){#sidebar{display:none}
#main{margin-left:0}
.sidebarToggle #sidebar{background:#FFFFFF;display:block}
.stick #sidebarContent{bottom:auto}
a#logo{font-size:20px;line-height:20px;padding:10px 5px}
aside > div{min-height:20px;padding:10px}
.sidebarToggle #menuToggle{background:#344;color:#FFF}
}

@media screen and (max-width:600px){#headerLeft{float:right}
#headerRight{height:auto;position:absolute;width:auto;top:46px;background:#6f9898;left:0;display:none}
.showMobileMenu #headerRight{display:block}
nav ul li a{display:block;background:transparent;color:#FFF;text-align:center;font-size:16px;padding:3px 29px;line-height:25px}
.showMobileMenu #mobileMenuToggle{background:#344;color:#FFF}
nav ul li{display:block;margin:0}
.socialButtons{display:none}
header{padding:3px 10px}
#page{padding: 20px 10px}
#wrapall{padding-top:46px}
/*#sidebarContent{right:0;background:#6f9898}*/
#sidebarContent {right: 0; background: #333333;}
#mobileLogo{display:inline-block;font-size:17px;padding:0 3px 0 10px;font-weight:bold;color:#FFF;text-decoration:none}
#mobileMenuToggle{display:inline-block}
article img {width: 49%;}
}

@media all and (min-width: 35em) {
    article img {width: 49%;}
    
}

@media all and (min-width: 50em) {
    article img {
        width: 32.5%;
    }
}