body {width : 100%;max-width : 1920px;color : #544444;margin : 0 auto;padding : 0;font-size : 100%;font-style: normal;font-weight: normal;
font-family: 'RobotoSlab-Regular', Georgia, 'Times New Roman', Times, serif; background: #eae8db; background-image: url(images/bg3.gif);}

@font-face {font-family: 'RobotoSlab-Regular';font-display:swap;src: local('RobotoSlab-Regular'), local('RobotoSlab-Regular'), url('RobotoSlab-Regular.woff2') format('woff2'), url('RobotoSlab-Regular.woff') format('woff');}
@font-face {font-family: 'RobotoSlab-Bold';font-display: swap;src: local('RobotoSlab-Bold'), local('RobotoSlab-Bold'), url('RobotoSlab-Bold.woff2') format('woff2'), url('RobotoSlab-Bold.woff') format('woff');}


html {scroll-behavior : smooth;}
header {display : block;text-align : center;}
* {box-sizing : border-box;}

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

img {width:96%; height:auto; max-width: 100%; border: none; text-decoration: none;border-radius:8px;margin: 0 auto;text-align:center;}

a {text-decoration : none;border : none;transition : 0.2s;cursor : pointer;color : #054327;}
a:hover {color : #ff8f08;}

br {padding : 0;margin : 0;}
ul{margin: 0; padding: 0;list-style: none;}

h1, h3 {color: #054327; font-family: 'RobotoSlab-Bold'; font-size: calc(24px + 0.8vw); line-height: 1.3em; margin: 1em auto 0 auto;}
h2, h4 {color: black; font-size: 1.2em; line-height: 1.2em; margin: 0.3em auto 1em auto;}
h5 {color: #054327; font-size: 1.3em; line-height: 1.2em; margin: 0.3em auto;}

p {font-size : 1.1em;line-height : 1.4em;margin : 0 0 1em 0;text-align: justify;hyphens: auto;transition : 0.3s ease;}
strong {color: black;}

.widerruf {border : #ff8f08 solid 3px;border-radius : 8px;padding : 1em;margin : 1em auto; text-align: center;}




#main {display: flex; flex-wrap: wrap; width:100%; max-width: 880px;margin: 2em auto;background: #f1f0eb;box-shadow:1px 0 15px #888, -1px 0 15px #888;border-radius: 8px;}
#main article {display:inline-block; width:70%;vertical-align:top; text-align:center; margin: 0 auto;padding: 2em 0.8em;}
#main article img {max-width: 570px;box-shadow: 0 10px 15px -8px #000; margin: 10px auto 20px auto;}

#main aside {display:inline-block; width:30%; padding: 2em 0.8em 2em 0em; vertical-align:top;}
#main aside section {font-size: 90%;margin-bottom: 1.5em; padding: 5px; border-radius: 8px; box-shadow: 0 0 5px #888;transition: all 0.3s ease;}
#main aside section p {text-align: left;margin-bottom:0.5em; }

#main aside section.gold {border-left: solid 4px #054327;background: #eafdf4;}
#main aside section.gold h5 {color: #054327;}
#main aside section.green {border-left: solid 4px #689f00;background: #f5ffdd;}
#main aside section.green h5 {color: #689f00;}
#main aside section.blue {border-left: solid 4px #0080c0;background: #eaf9ff;}
#main aside section.blue h5 {color: #0080c0;}
#main aside section.orange {border-left: solid 4px #f07000;background: #ffefe1;}
#main aside section.orange h5 {color: #f07000;}
#main aside section.purpur {border-left: solid 4px #a8005c;background: #ffe6f3;}
#main aside section.purpur h5 {color: #a8005c;}
#main aside section.turkis {border-left: solid 4px #00505e;background: #f0fdff;}
#main aside section.turkis h5 {color: #00505e;}
#main aside section.sonne {border-left: solid 4px #f3a501;background: #fff9df;}
#main aside section.sonne h5 {color: #f3a501;}
#main aside section.viola {border-left: solid 4px #590059;background: #fff0ff;}
#main aside section.viola h5 {color: #590059;}
#main aside section.red {border-left: solid 4px #c4000f;background: #ffe8ea;}
#main aside section.red h5 {color: #c4000f;}
#main aside section.mblue {border-left: solid 4px #0000ff;background: #e8e8ff;}
#main aside section.mblue h5 {color: #0000ff;}
#main aside section.braun {border-left: solid 4px #584634;background: #e9e1da;}
#main aside section.braun h5 {color: #584634;}

#main aside section.rgba {padding-left: 10px;}
.border-gradient:before {content: ""; position: absolute; inset: 0; padding: 0 0 0 5px; background: linear-gradient(#c4000f, #ff5108, #ffc411, #359800, #0099cb, #151ab7, #65018b); border-radius: inherit; mask: conic-gradient(#000 0 0) content-box exclude,conic-gradient(#000 0 0);}
.border-gradient {position: relative;}

@media screen and (max-width:550px){
#main {width:92%;}
#main aside, #main article {width:100%; display:block; margin: 0.5em auto; padding: 1em 0.8em;}
#main aside section {font-size: 100%;}
}



.header {display: block;width : 100%;max-width: 880px;height: 100vh;max-height : 130px;margin: 0 auto;}
.header img {object-fit : cover;width : 100%;height : 100%;border-radius: 8px 8px 0 0;border-bottom: 3px solid #ff8f08;}


.posts {margin: 0 auto; width: 100%;background: white;border-radius: 8px;}

nav {display:flex; flex-wrap: nowrap; justify-content:center; text-align:center; width: 100%; height: 50px; background: url(images/bgnav.png) repeat-x top; margin: 0 auto; border-radius: 8px 8px 0 0;border-bottom: 3px solid #ff8f08;}
nav .inner {font-size: 1.1em; color: #7aa58b; border-radius: 8px;padding: 8px 10px 40px 10px; margin: 0.3rem 0.2rem;transition : 0.2s linear;}
nav .inner:hover {color : white;}
nav .inner.active {background: white; color: #054327; font-weight: 700; border-radius: 8px 8px 0 0;}
nav .inner.active:hover {color: #054327;}
@media screen and (max-width:800px){
nav .inner{font-size: 98%;}
}


.minislide{position:relative; height:0; padding-bottom: calc(250/570 * 100%); overflow:hidden;}
.minislide img{position:absolute; left:0; right:0; animation:minislide 9s infinite; opacity:0; width: 96%; height: auto;}
@keyframes minislide {
0%      { opacity: 0; }  /** fadeIn beginnt            **/
10%  { opacity: 1; }  /** Bild steht                **/
38%  { opacity: 1; }  /** Bild bleibt zwei Sekunden **/
48%  { opacity: 0; }  /** fadeOut beendet           **/
100%    { opacity: 0; }
}
.minislide img:nth-child(1){animation-delay:0s;}
.minislide img:nth-child(2){animation-delay:3s;}
.minislide img:nth-child(3){animation-delay:6s;}


.textblock {display: block;width : 96%;margin: 0 auto;padding: 1em 0;}


.aktuell-kugel {margin: 1em auto 3em auto;}
.kugel {display: inline-block;background : url(images/kugel.png) no-repeat;width : 30px;height : 30px;position: relative; top: 38px;margin: 0 auto;}





.weiter {display: inline-block;margin: 1em auto;padding: 8px 30px 13px 20px;font-family: 'RobotoSlab-Bold';text-align: center;text-decoration: none;border-left: #ff8f08 solid 4px;border-radius: 0 2em 2em 0;cursor: pointer; background: #f1f0eb; box-shadow: inset 0 0 0 0 #032717;transition: linear 0.3s;}
.weiter:hover {color: white;box-shadow: inset 400px 0 0 0 #032717;}




footer {display: flex; justify-content: center;  align-items: center; width: 100%;height: 80px;background: url(images/bgfooter.png) repeat-x top; margin: 0 auto; border-top: 3px solid #ff8f08;border-radius: 0 0 8px 8px;color: #5a856b;}
.wrapper a {color: #5a856b;font-size: 0.8em;padding: 0 10px;transition : all 0.4s ease;}
.wrapper a:hover {color: #ff8f08;}


.top-btn { width : 50px; height : 50px; right : 30px; bottom : 20px; background : url(images/top.webp) 15px 11px no-repeat scroll #383838; border-radius : 8px; cursor : pointer; position : fixed; z-index : 2000; transition : all 0.4s ease-in-out; box-sizing : border-box; display : flex; justify-content : center; align-items : center; transform : scale(1); }
.top-btn:hover { background-position : 15px -49px; background-color : #ff8f08; }
.top-btn.top-btn__hide { opacity : 0; transform : scale(0); transition : all 0.4s ease-in-out; }
.top-btn__img { width : 0%; max-width : 0%; }