/*copyright - dualcode.de 31.03.2021*/

*, *:before, *:after {
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
}

html, body {
font-family:'robotolight', georgia, tahoma, arial, verdana, segoe, helvetica, sans-serif;
font-size:62.5%;
line-height:1.8;
font-weight:lighter;
height:100%;
}

@font-face {
font-family:'robotolight';
src: url('../fonts/roboto-light/roboto-light.ttf') format('truetype');
font-style:normal;
}

body {
font-size:1.5rem;
margin:0 auto;
}

h1 {
color:#807e56;
text-align:left;
font-weight:bold;
text-transform:none;
margin-top:0rem;
font-size:2.4rem;
line-height:3rem;
margin-bottom:2rem;
}

h2 {
color:#807e56;
text-align:left;
font-weight:bold;
text-transform:none;
margin-top:0rem;
font-size:1.9rem;
line-height:2.5rem;
margin-bottom:1.5rem;
}

h3 {
color:#807e56;
text-align:left;
font-weight:bold;
text-transform:none;
margin-top:0rem;
font-size:1.8rem;
line-height:2.5rem;
margin-bottom:1.5rem;
}

a {
background-color:transparent;
color:#000;
text-decoration:underline;
}

a:hover {
color:#000;
text-decoration:none;
}

p {
text-align: justify;
}

.gelbelinie{
border-top: 2px solid #eebb33;
display: block;
content: "";
margin: 8px auto 0;
}

.gesamt {
margin:0 auto;
padding:0;
width:100%;
}

img , a img {
max-width:100%;
height:auto;
margin:0 auto;
border-radius:.4rem;
}

.oben {
width:100%;
background:#fff;
margin:0;
padding:0;
font-size:1.4rem;
overflow:hidden;
}

.obenbox {
position:absolute;
top:0rem;
z-index:2;
background:rgba(255,255,255,.6);
display:table-cell;
width:100%;
padding:1rem 1rem;
vertical-align:middle;
text-align:center;
}

.titel-01 {
display:block;
font-weight:bold;
color:#003c96;
font-size:1.6rem;
line-height:1.6rem;
text-align:center;
padding:.6rem;
text-transform:uppercase;
letter-spacing:2px;
}

.titel-02 {
display:block;
color:black;
font-size:1.6rem;
line-height:1.6rem;
text-align:center;
padding:.2rem;
text-transform:uppercase;
letter-spacing:2px;
}

.buchstabe{
color:#003c96;
}

.inhalt {
width:100%;
background:#fff;
display:table;
border-spacing:0rem 1rem;
height:100%;
margin:0 auto;
padding:1rem 2rem;
text-align:left;
color:#000;
}

.inhalt .ausrichtung {display:table-row;}

.gruppe {
display:block;
text-align:left;
padding:1rem;
}

.gruppe02 {
display:block;
text-align:center;
padding:1rem;
}

.box {
display:inline-block;
width:100%;
vertical-align:top;
padding:.2rem;
margin:0 -.4rem 0 -0rem;
}

.mittelbox {width:100%;}

.seitlich {
width:100%;
background:#EFEFEF;
display:table-cell;
font-size:1.5rem;
}

.seitlich h3 {
background:#f1b300;
color:#fff;
font-size:1.6rem;
line-height:2rem;
margin-top:2rem;
padding:.2rem .2rem .2rem .6rem;
border-radius:.3rem;
}

.seitlich ul {
text-align:left;
display:block;
padding:0rem;
margin:0;
}

.seitlich li {
color:#f1b300;
list-style:square;
padding:0;
margin-left:1.5rem;
}

.seitlich li a {
text-decoration:none;
height:2rem;
line-height:2rem;
padding:.3rem 0rem .3rem 0rem;
margin:0;
color:#000;
}

.seitlich li a:hover {
text-decoration:underline;
color:#000;
font-weight:bold;
}

.unten {
width:100%;
background:#f1b300;
text-align:center;
margin: 0rem auto;
padding:3rem 0;
}

.unten ul {
text-align:center;
padding:0rem;
margin:0;
}

.unten li {
display:inline;
list-style:none;
padding:0rem 0rem;
margin:0;
}

.unten li a {
text-decoration:none;
font-size:1.4rem;
height:2.4rem;
line-height:2.4rem;
letter-spacing:1.5px;
padding:.3rem .5rem .3rem .5rem;
margin:0;
color:#080d25;
background:transparent;
}

.unten li a:hover {
background:rgb(241, 215, 123);
text-decoration:none;
}

.unten-copy {
display:inline-block;
color:#080d25;
margin:0 auto;
font-size:1.2rem;
letter-spacing:2px;
text-transform:uppercase;
}

#menu {
display:table;
z-index:1;
width:100%;
position:absolute;
top:0%;
left:0%;
height:100vh;
margin-top:0rem;
margin-left:-120vw;
background:#fff;
padding: 0;
text-align:center;
box-shadow: 0 0 3px black;
transition:all 1s ease-out;
}

#menu ul {
display:table-cell;
vertical-align:middle;
text-align:center;
margin:0;
padding:0rem;
}

#menu li {
list-style-type:none;
display:block;
margin:0 0 0 2rem;
text-align:left;
padding:0;
}

#menu li a {
display:inline-block;
text-align:left;
text-decoration:none;
font-size:1.6rem;
letter-spacing:1px;
padding:.4rem 1rem;
margin:0;
color:#000;
text-shadow:none;
text-transform:uppercase;
}

#menu a:hover {
background:transparent;
}

#menu #aktuell a {
background:transparent;
color:#003c96;
text-shadow:none;
}

#menu #logo a {
background:transparent;
text-shadow:none;
list-style-type:none;
}

.kalendernummer{
text-align: center;
display:inline-block;
background:#992000;
color:whitesmoke;
border-radius:.6rem;
padding:15px 30px 15px 30px ;
}

#advent {
background-image:url(../images/adventshintergrund.jpg);
}

.seitenbox-flex {display:none;}

/*------Gesichter--------*/

ul.faces {
display: -moz-flex;
display: -webkit-flex;
display: -ms-flex;
display: flex;
-moz-align-items: center;
-webkit-align-items: center;
-ms-align-items: center;
align-items: center;
-moz-justify-content: center;
-webkit-justify-content: center;
-ms-justify-content: center;
justify-content: center;
list-style: none;
padding-left: 0;
}

ul.faces li {
display: -moz-flex;
display: -webkit-flex;
display: -ms-flex;
display: flex;
-moz-flex-direction: column;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-moz-align-items: center;
-webkit-align-items: center;
-ms-align-items: center;
align-items: center;
padding-left: 0;
text-align: center;
margin: 0 0 0 4rem;
}

ul.faces li:first-child {margin-left: 0;}
ul.faces li:last-child {margin-bottom: 0;}
ul.faces li .image {border-radius: 100%;margin: 0 0 1.5rem 0;}
ul.faces li .image img {border-radius: 100%;width: 20rem;}


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

ul.faces {display: block;}
ul.faces li {margin: 0 0 2rem 0;}

ul.faces li:last-child {margin-bottom: 0;}
}


/*------MEDIA--------*/

@media (min-width:480px) {
.inhalt {border-spacing:2rem 2rem;}
}

@media (min-width:600px) {
.mittelbox {width:75%;}
#menu {width :50%;}
.seitenbox-fix {display:inline;}
.seitenbox-flex {display:inline;}
}

@media (min-width:640px) {
.seitenbox-fix {width:50%;}
.seitenbox-flex {width:50%;}

}

@media (min-width:768px) {
html {font-size:70%;}
.mittelbox {width:75%;}
.seitenbox-fix {width:100%;}
.seitenbox-flex {width:100%;}
.inhalt {border-spacing:2rem 4rem;width:70%;display:table-cell;}
.seitlich {width:30%;display:table-cell;font-size:1.3rem;}
.inhalt .ausrichtung {display:none;}
label.hamburger {display:none;}

#menu {
position:static;
background:transparent;
height:0%;
width:100%;
margin-top:0rem;
margin-left:0;
padding:.3rem;
box-shadow:none;
}

#menu ul {
margin:0rem;
padding:1rem;
text-align:center;
}

#menu li  {
display:inline-block;
margin:0;
padding:0;
}

#menu li a {
width:100%;
padding:.5rem .7rem .5rem .5rem;
margin:.2rem 0;
letter-spacing:1px;
color:#fff;
background:#003c96;
border-radius:.4rem;
}

#menu li a:hover {
background:#4F4F4F;
}

#menu  #aktuell a {
background:#f1b300;
border-radius:.4rem;
color:white;
text-shadow:none;
}

}

@media (min-width:800px) {

.inhalt {border-spacing:3rem 3rem;}

}

@media (min-width:1024px) {

.titel-01 {font-size:3.0rem;line-height:3.0rem;}
.seitenbox-fix {width:100%;}
.seitenbox-flex {width:100%;}
.inhalt {border-spacing:2rem 4rem;}
.inhalt {width:70%;display:table-cell;}
.seitlich {width:30%;display:table-cell;font-size:1.3rem;}
.inhalt .ausrichtung {display:none;}

}

@media (min-width:1200px) {
.inhalt .gruppe {padding:0rem 5rem;}
#sidebar .box {padding:1rem;}
.gesamt {width:90%;}
.obenbox{width:90%;}
}

@media (min-width:1300px) {
.inhalt {border-spacing:4rem 3rem;}
.inhalt {width:75%;}
.seitlich {width:25%;}

}

/* copyright - dualcode.de */