@viewport { width: device-width; }

body {font-family:Arial,Sans-Serif; padding:0px; margin:3px; background-color:#FAFAFA; line-height: 150%; font-display: swap; }
a {text-decoration:none;}
img {border:none;}
p, ol, ul, li {font-size: 20px; font-weight:normal; color: #000000; line-height: 26px;}
b, strong {color:#222222;}
li {padding-bottom: 5px;}
.rbtntext, .fblock, .dd_raetselfilter, .cssbuttongross, .cssbutton, .cssformbutton, .tf, .image_border, 
.schnellnavi, .image_border_np, .roundedbox, .roundedboxinfo, .checkbutton, .imagehead, .rootmessage, 
.infoboxshow, .hingucker, .chatmessagebox, .tf_kontakt, .tf_pers_kwr, .tf_aufgabe, .tfchat, .ta_kontakt, 
.ta_pers_kwr, .hptraetselinfochild, .infoMessageHPT, .btnHBK, .checkbuttonlong, .cssbuttonchat,
.cssbuttonladen, .checkbuttonlongactive, .cssbuttonraetsel, .cssbuttonraetselactive, .tf_kontakt, .sblock,
.a728c, .a336c, .a300c, .a300_600c, .btnHAM, .btnHA, .btnHAN, .btnHLO, .startblock, .startblocklink,
.ladeanzeige, .navibild, .raetselkachel, .raetselkachel_sub, .rlabel, .startkachel, .dd_raetselauswahl, 
.rootnavlinksselected, #rootnavi, .subnavibox, .subnaviboxselected, .auebersicht, .rprop, .kachelraetselvarianten, .btnraetselauswahl,
.tf_anrede, .infosidefix, .bigRaetselBtn, .filtercontainer, .cssbuttongrey, .subnaviboxSide, .subnaviboxSideHead, .subnaviboxSideDone,
.box, .startkachelSelected, .cssbuttonSelected, .kachelbox, .linkbox, .cssbuttonhead         
{-webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;}

@media all and (orientation: portrait)
{
    @media only screen and (max-width: 749px) 
    {
        .adhoricon { width: 100%; margin: 0; text-align: center; padding: 10px 0 10px 0; min-height: 250px; min-width: 300px; text-align: center; }
        .adhori { min-width: 300px; margin: 10px auto 10px auto; padding: 10px; min-height: 250px; }

        .hideOnMobileVertical { display: none; }
    }

    @media only screen and (min-width: 750px) 
    {
        .adhoricon { width: 100%; margin: 0; text-align: center; padding: 10px 0 10px 0; min-height: 90px; min-width: 728px; text-align: center; }
        .adhori { min-width: 300px; margin: 10px auto 10px auto; padding: 10px; min-height: 250px; }

        .hideOnMobileVertical { }
    }
}

@media all and (orientation: landscape)
{
    @media only screen and (max-width: 749px) 
    {
        .adhoricon { width: 100%; margin: 0; text-align: center; padding: 10px 0 10px 0; min-height: 250px; min-width: 300px; text-align: center; }
        .adhori { min-width: 300px; margin: 10px auto 10px auto; padding: 10px; min-height: 250px; }

        .hideOnMobileVertical { display: none; }
    }

    @media only screen and (min-width: 750px) 
    {
        .adhoricon { width: 100%; margin: 0; text-align: center; padding: 10px 0 10px 0; min-height: 90px; min-width: 728px; text-align: center; }
        .adhori { min-width: 300px; margin: 10px auto 10px auto; padding: 10px; min-height: 250px; }

        .hideOnMobileVertical { }
    }
}

.vboxlabel { background-color: #FAFAFA; float: left; padding: 5px; width: 40%; margin: 5px 5px 5px 0; }
.vboxtext { float: left; font-weight: bold; padding: 5px; margin: 5px 5px 5px 0; }

.mailboxtitle { width: calc(100% - 20px); background-color: #FFBF28; margin: 10px 5px 20px 5px; padding: 5px; cursor: pointer; color: #FFFFFF; position: relative; border-radius: 5px; letter-spacing: 0.5px; font-size: 18px; line-height: 34px; }
.mailboxtitletext { margin: 5px; font-weight: bold; }
.mailboxtitleimg { float: right; margin: 5px 5px 0 5px; }
.mailboxtitleimgin { height: 30px; width: 30px; border-radius: 5px; }
.besthinweis { background-color: #FFFFFF; padding: 0 5px 0 5px; }

#toogleraetsel { border-top: 1px solid #DDDDDD; border-bottom: 1px solid #DDDDDD; cursor: pointer; background-color: #EFEFEF; margin: 10px 0 10px 0; padding: 5px; font-size: 14px; color: #222222; user-select: none; text-align: center; width: calc(100% - 10px); font-weight: bold; }
.bestbilddt { float: right; height: 50%; border: solid 1px #EFEFEF; border-radius: 50%; margin: 0 0 10px 20px; }

.adcolor { background-color: #EFEFEF;}


.tooglebest { width: calc(100% - 2px); margin: 10px 0 20px 0; background-color: #FAFAFA; cursor: pointer; }
.tooglebesttxt { float: right; line-height: 50px; margin: 0 0 -3px 0; }
#bestleistungsboxen { display: none; }

.tooglebox { width: calc(100% - 2px); margin: 20px 0 20px 0; background-color: #FAFAFA; cursor: pointer; }
#bestleistungtext { float: right; line-height: 52px; }
#raetselBestZeitenKreisel { position: absolute; width: 100%; }
#raetselBestZeiten { background-color: #FFFFFF; overflow-x: hidden; overflow-y: scroll; height: 200px; padding: 10px 10px 0 10px; }

.rhline { float: left; }
.rhbewertung { float: right; }
.wettkampfimgcon { float: right; margin: 10px 0 30px 30px; width: 200px; }
.wettkampfimg { width: 200px; }
.bspcon { margin: 0 auto 0 auto; width: 100%; text-align: center; }
.bspimg { margin: 0 auto 0 auto; padding: 10px; }
#scrollRaetselListeScroll { min-height: 100px; }

.bewertng { width: 100%; text-align: center; margin: 5px auto 5px auto; }
.floeterl { float: left; }
.floeterr { float: right; }
.acenter1 { text-align: center; }
.acenter2 { display: inline-block; }
.kboxstart { background-color: #FAFAFA; border-radius: 5px; margin: 30px 0 30px 0; max-width: 100%; overflow-x: scroll; overflow-y: hidden; }
.hilfeimg { text-align: center; width: 100%; margin: 20px auto 20px auto; position: relative; }
.clickBox { position: relative; bottom: 40px; left: 7px; }
.landingClickBox { position: relative; top: 80px; left: 0; }

.best1 { padding: 10px; }
.best2 { margin-bottom: 20px; }
.best3 { max-width: 100px; max-height: 100px; }
.best4 { padding: 10px 30px 10px 30px; width: calc(100% - 60px); }
.best5 {  text-align: center; padding: 20px; margin: 10px -10px 40px -10px; background-color: #FFFFFF; }
.best6 { cursor: pointer; width: 200px; margin: auto; }
.best7 { max-width: 200px; max-height: 200px; }
.best8 { text-align: center; padding: 20px; margin: 10px -10px 0 -10px; background-color: #FFFFFF; }
.best9 { text-align: center; padding: 20px; margin: 0 -30px 0 -30px; }
.best10 { width: 100%; margin: 0 0 20px 0; }
.best11 { float: right; max-height: 100px; margin: 0 0 0 10px; }
.best12 { max-width: 100px; max-height: 100px; border-left: solid 1px #CCCCCC; border-bottom: solid 1px #CCCCCC; border-radius: 0 10px 0 10px; }
.best13 { margin: 12px; padding: 10px; width: 100px; }
.best14 { margin: 20px 0 20px 10px; }
.best15 { margin: 5px 5px 15px 5px; }
.best16 { margin: 5px; }
.bestspace { width: 20px; float: left; }

.raktu1 { width: calc(100% - 4px); }
.raktu2 { padding: 5px; margin: 5px; }

.raetselkachel, .standardbox { border: solid 2px #BBBBBB; box-shadow: 1px 1px 5px 0px #DDDDDD; border-radius: 5px; cursor: pointer; margin: 0 auto 20px auto; }
.raetselkachel:hover, .startkachel:hover, .startkachel_small:hover, .kachelraetselvarianten:hover, .startkachelSelected, .standardbox:hover { border:solid 2px #888888; box-shadow: 0px 0px 5px 0px #AAAAAA; }
.rkachelconleft { margin: 20px; }
.rkachelconright { margin: 20px; width: 100px; float: right; text-align: center;  }
.rkachelimg { margin: 0; width: 100px; border: solid 1px #CCCCCC; border-radius: 5px; }
.rkachelneu{ width: calc(100% - 4px); font-size: 16px; position: relative; padding: 2px; margin: 0 0 5px 0; }
.rkacheltitel { color: #4D6ECD; font-size: 24px; font-weight: bold; padding: 0 0 5px 0; line-height: 28px; }
.rkachelsubtitel { margin: 10px 0 20px 0; }
.rkachelsub { width: calc(100% - 140px); }
.rkachelbest { border-left: solid 10px #2DA500; padding: 5px 5px 5px 10px; margin: 0 0 0 0; font-size: 15px; font-weight: bold; background-color: #FFFFFF;}
.rkachelbestsub { border-left: solid 10px #2DA500; padding: 5px 5px 5px 10px; margin: 0 0 10px 0; }
.rkachelmehr { margin: 10px auto 0 auto; }
.rkachelrefresh { margin: 10px auto 0 auto; }

.bo1 { margin: 10px; display: block; color: #222222; }
.bo2 { text-align: center; padding: 10px; background-color: #FAFAFA; }
.bo3 { margin: 0 0 -7px 0; }
.bo4 { text-align: center; margin: 0 auto 0 auto; }
.boliste { margin: 10px auto 10px auto; width: 100%; }


.rfilter { padding: 10px 20px 20px 20px; margin: 20px 0 20px 0; }
#raetselListe { margin: 40px 0 0 0; }
.adcolor { background-color: #FFFFFF; }
.sideow { width: 1300px; }
.sidemw { width: 1530px; }
.ffont { margin: 20px auto 20px auto; background-color: #FAFAFA; text-align: center; line-height: 24px;}
.rssimg { height: 16px; position: relative; top: 1px; }
.chkimg { height: 60px; width: 60px; padding: 20px; border-radius: 50%; }
.chktext { font-size: 22px; line-height: 35px; text-align: center; font-weight: bold; }
.chkbox { width: 100%; position: absolute; left: calc(50% - 40px); margin: 10px 0 0 0; }

.lmjbox { width: 100px; float: left; display: block; margin: 5px; }
.lmjimg { width: 100px; margin: 0 0 -7px 0; border-radius: 3px; }
.lmjcon { display: flex; flex-direction: row; justify-content: flex-start; align-items: stretch; overflow-x: scroll; margin: 10px auto 10px auto; }

.divres { clear: both; height: 0; width: 0; }

.allgameover { z-index: 10000000; font-size: 40px; position: absolute; color: #000000; background-color: #FFFFFF; border-radius: 10px; padding: 20px; width: 300px; text-align: center; opacity: 0.7; text-align: center; top: 40%; left: calc(50% - 170px); line-height: 44px; font-weight: bold; display: none; }
.bestuserbox { background-color: #FAFAFA; margin: 20px auto 20px auto; padding: 20px; border: solid 1px #AAAAAA; border-radius: 10px; width: calc(100% - 50px); max-width: 500px; box-shadow: 3px 3px 3px silver; min-height: 200px; }

.bsternra { max-width: 20px; max-height: 20px; margin: 5px auto 0 auto; }
.bsterntextra { font-size: 13px; position: relative; color: #222222; text-decoration: none; font-weight: normal; margin: -5px 2px 0 0; }
.bsternhead { max-width: 23px; max-height: 23px; margin: 10px 0 0 0; }
.bsterntexthead { line-height: 26px; font-size: 18px; position: relative; color: #444444; text-decoration: none; font-weight: normal; margin: 8px 0 0 0; }
.scrollVertiOuter { overflow-y: hidden; overflow-x: scroll; background-color: #FFFFFF; width: 100%; }
.videoraetsel { width: 100%; min-height: 200px; }
.boxheader {background-color: #7A96FF; font-size: 18px; font-weight: bolder; color:#FFFFFF; padding: 10px; border-radius: 5px; text-align: center; padding: 10px; margin-bottom: 10px; display: block; cursor: pointer; }

.circlebox { float: right; margin: 0 20px 50px 20px; max-width: 200px; border-radius: 10px; border: solid 1px #EFEFEF; box-shadow: 2px 2px 2px 1px #CCCCCC; }
.selectBezeichner { line-height: 40px; border: solid 1px #AAAAAA; padding: 10px 0 10px 0; margin: 20px 0 20px 0; background-color: #FAFAFA; border-radius: 5px; width: 100%; text-align: center; }
.selectSelector { width: 100%; margin: 20px 0 20px 0; padding: 0; }

.bestplatz { width: 100%; border-top: 1px dotted #CCCCCC; border-bottom: 1px dotted #CCCCCC; margin: 40px auto 40px auto; padding: 20px; text-align: center; width: calc(100% - 40px); }

.pinbox { width: calc(100% - 30px); border-radius: 5px; border: solid 1px #EFEFEF; overflow: hidden; box-shadow: 1px 1px 2px 2px #DDDDDD; display: block; color: #222222; }
.pinimg { max-width: 400px; width: 100%; margin: 0 auto 0 auto; text-align: center; }
.pinhead { font-size: 24px; line-height: 32px; padding: 10px; font-weight: bold; color: #FFFFFF; text-align: center; }
.pintext { font-size: 18px; margin: 10px; }

.imgshd { width: 50%; }
.subnavicon { margin: -5px 0 5px 0; }

.wettStartBox { border:solid 2px #BBBBBB; box-shadow: 2px 2px 5px 0px #DDDDDD; border-radius: 10px; width: calc(100% - 20px); margin: 10px auto 50px auto; cursor: pointer; display: flex; font-weight: bold; font-size: 28px; line-height: 40px; background-color: #2DA500; }

.raetselStartBox { border:solid 2px #BBBBBB; box-shadow: 1px 1px 5px 0px #DDDDDD; border-radius: 10px; max-width: 400px; width: calc(100% - 4px); overflow: hidden; margin: 20px auto 40px auto; cursor: pointer; display: block; }

.raetselStartBoxCon { margin: 20px auto 20px auto; clear: both; max-width: 400px; border:solid 2px #BBBBBB; box-shadow: 2px 2px 5px 0px #DDDDDD; border-radius: 10px; }

.raetselStartBoxCona { margin: 20px auto 20px auto; clear: both; max-width: 300px; border:solid 2px #BBBBBB; box-shadow: 2px 2px 5px 0px #DDDDDD; border-radius: 10px; }
.raetselStartBoxImg { text-align: center; max-width: 300px; margin: 0 0 -7px 0; border-radius: 10px; }
.raetselStartBoxImga { text-align: center; max-width: 200px; margin: 0 0 -7px 0; border-radius: 7px; }

.raetselStartText { text-align: center; padding: 20px; background-color: #2DA500; line-height: 24px; font-size: 20px; font-weight: bold; color: #FFFFFF; }                        

.raetselStartBoxFiller { }

.wettkampfcon { overflow-x: scroll; overflow-y: hidden; margin: 0; border:solid 2px #BBBBBB; box-shadow: 1px 1px 5px 0px #DDDDDD; border-radius: 10px; }
.box, .linkbox { border: solid 1px #DDDDDD; }
.sbox { border: solid 3px #DDDDDD; cursor: pointer; border-radius: 10px; box-shadow: 5px 5px 10px 0 #AAAAAA; }
.boxstart { float: right; margin: 20px 10px 30px 30px; border-radius: 10px; width: 200px; height: 200px; background-repeat: no-repeat; background-size: cover; border: solid 3px #DDDDDD; cursor: pointer; box-shadow: 5px 5px 10px 0 #AAAAAA; }
.pmbox { border: solid 1px #DDDDDD; width: 34vw; max-width: 200px; }

.kachelbox { border: solid 1px #DDDDDD; margin: 10px 10px 20px 10px; width: 287px; float: left; height: 240px; }
.kachelboxtitel { text-align: center; font-weight: bold; line-height: 46px; font-size: 18px; color: #222222; background-color: #FFFFFF; border-radius: 10px 10px 0 0; background-color: #FFFFFF; border-bottom: solid 1px #CCCCCC; }
.kachelimg { max-width: 288px; max-height: 192px; margin: 0 0 -6px 0; border-radius: 0 0 5px 5px; }
.linkbox { float: left; margin: 10px 10px 5px 0; padding: 5px 10px 5px 10px; background-color: #EFEFEF; display: block; }
.startbox { float: right; margin: 20px 10px 10px 20px; border-radius: 10px; width: 200px; border: solid 1px #DDDDDD; cursor: pointer; }

.raetselMenueButtonsImg { float: right; margin: 10px 10px 10px 0; border: solid 1px #CCCCCC; max-height: 120px; border-radius: 5px; }
.raetselMenueButtonsText { float: left; width: 230px; padding: 5px 0 5px 15px; }
.raetselMenueButtonsTop { width: 230px; padding: 15px 0 10px 15px; color: #000000; font-size: 20px; font-weight: bolder; }

.raetselMenuecon { height: 168px; overflow: hidden; margin: 0 0 20px 0; background-color: #FAFAFA; padding: 0 0 0 5px; font-size: 15px; }
.raetselMenuemover { height: 152px; color: #FFFFFF; background-color: #2DA500; line-height: 152px; cursor: pointer; user-select: none; float: left; width: 27px; padding: 0; text-align: center; font-size: 24px; font-weight: bold; border-bottom: solid 1px #CCCCCC; border-top: solid 1px #CCCCCC; }
.raetselMenueInner { position: relative; margin: 0; }
.raetselMenueOuter { overflow-y: hidden; overflow-x: scroll; border-bottom: solid 1px #CCCCCC; border-top: solid 1px #CCCCCC; }

.platzbox { padding: 15px; display: block; color: #222222; background-color: #FAFAFA; border-radius: 5px; box-shadow: 1px 1px 1px 1px #EFEFEF; line-height: 30px; margin: 20px 0 20px 0; border: solid 1px #DDDDDD; }

.listeneintrag { background-color: #FFFFFF; float: left; }
.rnavielement { padding: 5px; position: relative; margin: 0 10px 10px 0; border-right: 1px solid #CCCCCC; display: block; cursor: pointer; border: solid 3px #EFEFEF; border-radius: 10px; }

.werbefreibox { padding: 10px; margin: 10px 0 10px 0; cursor: pointer; width: calc(100% - 25px); border:solid 2px #BBBBBB; box-shadow: 2px 2px 5px 0px #DDDDDD; border-radius: 10px; cursor: pointer; display: block; }

.headnavi { border: solid 2px #CCCCCC; background-color: #FAFAFA; border-radius: 5px; padding: 5px; margin: 0 10px 0 0; text-align: center; display: block; color: #4D6ECD; }

.infosidefix { background-color: #FFFFFF; margin: 3%; border: solid 1px #CCCCCC; display: block; cursor: pointer; }
         
.adkenner { margin: 10px auto 10px auto; padding: 10px 0 10px 0; background-color: #FAFAFA; }    
.admoney { width: 100%; margin: 0 auto 30px auto; background-color: #FAFAFA; }   
.navibottom, .bestplatz { width: 100%; margin: 20px auto 20px auto; }
.werbunglabel { font-size: 8px; text-transform: uppercase; margin: 0 0 -20px 0; padding: 0; width: 100%; text-align: right; }
.menuetopper { display: block; text-align: center; margin: 10px 0 10px 0; padding: 5px 10px 5px 10px; background-color: #2DA500; color: #FFFFFF; border: solid 2px #669933; border-radius: 5px; font-weight: bold; cursor: pointer; }

.showweitereinfos, .hideweitereinfos { display: none; }

.start_text, .mtext {font-weight: normal; color: #444444;}

@media only screen and (max-width: 599px) 
{
    .start_tile, .best_tile { margin: 10px; padding: 0; display: block; background-color: #FFFFFF; width: calc(100% - 30px); position: relative; }

}
@media only screen and (min-width: 600px) 
{
    .start_tile, .best_tile { margin: 10px; padding: 0; display: block; background-color: #FFFFFF; width: calc(50% - 30px); float: left; position: relative; height: 500px; overflow: hidden; }
}


.best_img { max-width: 250px; }
.start_text { margin: 10px; padding: 15px; font-size: 24px; font-weight: bold; line-height: 30px; }
.start_img { width: 100%; max-width: 500px; }

.asng, .asngh, .auebersicht {font-weight: normal; color: #4D6ECD; display: block; }
.asngh { margin: 0 0 10px 0; }
.asng { margin: 0 0 3px 0; }

.footerbox { padding: 20px; margin: 20px 0 20px 0; }


.navibild
{
    background-color: #CCCCCC; 
    width: 50px; 
    height: 50px; 
    float: left;
    border: solid 1px #FFA600;
    margin-right: 10px;
    margin-top: 5px;
}

.hideOnMobile {display: none;}

.absatz {margin: auto auto 30px auto;}

.root {border: solid 1px #FFA600;}
.startbox1 {clear: both; width: 100%; padding: 0;}

.fbbox { border: solid 3px #7A96FF; cursor: pointer; width: calc(100% - 50px); padding: 10px 20px 10px 20px; border-radius: 10px; margin: 20px 0 20px 0; background-color: #FAFAFA; font-size: 18px; line-height: 25px; }
.logbox { width: 100%; }

.footer {padding: 0; background-color: #FAFAFA; border-top: solid 1px #CCCCCC; border-bottom: solid 1px #CCCCCC; }
.afh {font-size: 14px; font-weight: bolder !important;}
.afc {font-size: 12px;}
.asngh {font-size: 24px; font-weight: bolder !important; }
.asng {font-size: 17px;}
.fooL {float: left; width: calc(100% - 20px); padding: 10px; margin-bottom: 10px;}
.fooC {clear: left; width: 0;}

.btnraetselauswahl {border: solid 2px #FFA600; background-color: #FFBE3C; font-size: 20px; font-weight: bold; color: #FFFFFF; text-align: center; line-height: 35px; box-shadow: 0px 0px 5px 0px #DDDDDD; width: calc(100% - 60px); margin: 20px 0 20px 0; padding: 20px; display: block; }

.bigRaetselBtn {border: solid 2px #888888; background-color: #2DA500; font-size: 20px; font-weight: bold; color: #FFFFFF; text-align: center; line-height: 35px; box-shadow: 2px 2px 3px 2px #CCCCCC, -2px -2px 3px 2px #3CD700 inset; margin: 30px auto 30px auto; padding: 20px; display: block; }
.inhaltbox { padding: 10px; border: solid 1px #CCCCCC; background-color: #FAFAFA; border-radius: 5px; margin: 10px 0 20px 0;}

#img30 {max-width: 30%; height: auto;}
#img70 {max-width: 70%; height: auto;}
#img100 {max-width: 100%; height: auto;}
#img60px {width: 40px; height: 40px;}
#mobileHide {display: none;}                                          
.img100 {max-width: 100%; height: auto; }
.img70 {max-width: 70%; height: auto;}
.img50 {max-width: 50%; height: auto;}

.newimg {max-width: 30%; height: auto;}

.imgbox{ border: solid 1px #DDDDDD; margin: 5px; padding: 8px; border-radius: 5px; flex: 1 1 auto; }
.imgboxroot { background-color: #FFFFFF; margin: 30px 0 30px 0; padding: 0; display: flex; flex-direction: row; flex-wrap: wrap; width: 100%; } 
.imgboxtext { font-size: 16px; color: #4D6ECD; text-align: center; }
.imgmhalbcon { display: block; text-align: center; }

#img50 {max-width:50%; height:auto; position: relative; display:block; margin:0 auto;}
#img50 img {width:100% !important; height:auto !important; display:block;}
#img80 {max-width:80%; height:auto; position: relative; display:block; margin:0 auto;}
#img80 img {width:100% !important; height:auto !important; display:block;}
#img90 {max-width:90%; height:auto; position: relative; display:block; margin:0 auto;}
#img90 img {width:100% !important; height:auto !important; display:block;} 

.adtopfix { background-color: #FFFFFF; border-bottom: solid 1px #EFEFEF; }

.basic { width: 100%; background-color: #FFFFFF; }
.userhead {padding: 10px 5px 0 5px; width: calc(100% - 10px); margin: 0; min-height: 100px;}

.mobimg { max-width: calc(100% - 20px); margin: auto; padding: 10px; }
.mobimg20 { max-width: 180px; margin: auto; padding: 10px; }
 .teaserlanding { max-width: 150px; margin: 20px 0 10px 10px; border-radius: 10px; }
 
.contentheadline { padding: 5px; width: calc(100% - 24px); margin: 5px; background-color: #FAFAFA; border: solid 2px #EFEFEF; border-radius: 5px; }

.contentheadlinepur { padding: 5px; width: calc(100% - 10px); margin: 10px auto 10px auto; }
.content {background-color: #FFFFFF; padding: 0 5px 5px 5px; width: calc(100% - 10px); margin: 10px 0 0 0; }



.rootnavlinksselected {border: solid 1px #FFFFFF; background-color: #7A96FF; color: #FFFFFF; }
.raetselAuswahlHeader { border: solid 1px #EFEFEF; margin: 0 0 20px 0; box-shadow: 2px 2px 1px 0 #CCCCCC; padding: 20px; text-decoration-color: #FFFFFF; }
.raetselAuswahlHeaderBild { margin: 10px; background-color: #FFFFFF; padding: 10px; border-radius: 20px; box-shadow: 2px 2px 1px 0 #CCCCCC, -2px -2px 1px 0 #CCCCCC; }

#raetselDataBox { margin: 20px auto 30px auto; position: relative; }
.nosel { user-select: none; -moz-user-select: none; -webkit-user-select: none; }

#rootnavi {position: absolute; width: calc(100% - 52px); background-color: #7A96FF;  display: none; padding: 1px; margin: 42px 0 0 34px; }
.navibox, .naviboxselected {border-bottom: solid 1px #FFFFFF; text-align: center; line-height: 30px; vertical-align: middle; padding: 10px 0 10px 0;}
.contentbereich {width: 100%; background-color: #FAFAFA; border-top: solid 1px #AAAAAA; border-bottom: solid 1px #AAAAAA; }

.naviboxlink {font-size: 18px; font-weight: bold; color: #FFFFFF; }

.hr_navi {border: solid 1px #444444; width: 96%;}
.hr_dotted { border-top: 1px dotted #CCCCCC; border-bottom: 1px dotted #CCCCCC; margin: 20px auto 40px auto; }

h1, h2, h3 {font-weight: bolder; color: #000000; margin: 0; }
h1 {font-size: 24px; line-height: 30px; }
h2 {font-size: 20px; line-height: 28px; }
h3 {font-size: 18px; padding-bottom: 1%;}
h4 {font-size: 18px; padding: 3%; margin-left: -3%;}

.tblock {padding: 0; width: 100%; }
.rbtn {width: 96%; margin: 2%; margin-left: auto; margin-right: auto;}
.rbtntext {border: solid 1px #CCCCCC; font-size:13px; font-weight: normal; color: #000000; text-align: center; background-color: #EFEFEF; padding: 5px; width: 96%;}

.startkachel, .kachelraetselvarianten {margin-bottom: 20px; border:solid 2px #BBBBBB; box-shadow: 0px 0px 5px 0px #DDDDDD; display: block; min-height: 130px; } 
.kachelraetselvarianten { padding: 5%;} 
.startkachel_sub {margin: 5px; padding: 10px; background-color: #FFFFFF;}
.startkachel_h2 {margin-top: 0; }

.rprop { border: solid 1px #DDDDDD; padding: 5px; background-color: #FFFFFF; width: 80px; text-align: center; }

.fblock {width: calc(100% - 6px); border: solid 1px #DDDDDD;}
.formh {background-color: #EFEFEF; font-size:18px; font-weight: bolder; color:#000000; padding: 10px;}
.formr, .formrc {background-color: #FFFFFF; font-size:15px; font-weight:normal; color:#000000; padding: 10px;}
.formrc {text-align: center;}
.formf {background-color: #EFEFEF; font-size:15px; font-weight:normal; color:#000000; padding: 10px; border-top: solid 2px #FFFFFF;}

.text, .fontklein, .fontklein, .fontmedium, .fontbig, .fontlogin, .mtext, .fontbigger {font-weight: normal; color: #000000;}
.mtext {font-size: 13px;}
.text {font-size: 20px;}
.fontklein {font-size: 12px;}
.fontmedium, .fontgross {font-size: 18px;}
.fontbig {font-size: 20px; font-weight: bolder; line-height: 24px; }
.fontxbig {font-size: 22px; font-weight: bolder;}
.fontbigger {font-size: 22px; font-weight: bolder;}
.fontdouble { color: #FFFFFF; background-color: #2DA500; border-radius: 5px; padding: 1px 5px 1px 5px; position: relative; top: 4px; cursor: help; }
.fontnavi {font-size: 40px; font-weight: bolder;}
.fontlogin {font-size: 16px; line-height: 20px; }
.fonthinweisanmeldung {font-size: 16px; color:#4D6ECD !important;}
.fontgross {font-weight: bold !important;}
.fontbigger {font-size: 20px; font-weight: bolder; line-height: 24px;}
.fontneu { color: #7A96FF; font-weight: bold; }
.tmid { font-size: 18px; }

.punktpunktpunkt {font-size: 20px; line-height: 20px; font-weight: bold; margin: -10px 0 15px 0; width: 70px; text-align: center; }

.navi1 {font-size: 18px; font-weight:bold; line-height: 1.3; color: #FFFFFF; line-height: 30px;}
.navi2 {font-size: 12px; font-weight:bold; line-height: 1.3; color: #222222;}
.navi3 {font-size: 11px; font-weight:bold; line-height: 1.4; color: #FFFFFF;}
.breadcrumb {margin: 0 0 0 2px; }

.atext, .aklein, .alogin, .achatinfo, .agross, .afc, .afh, .abreadcrumb, .auebersicht, .amtext, .ah2, .amid {font-weight: normal; color: #4D6ECD; }
.abreadcrumb { font-size: 14px; }
.atext {font-size: 20px;}
.amtext {font-size: 14px;}
.aklein {font-size: 12px;}
.alogin {font-size: 16px; font-weight: bold !important;}
.agross {font-size: 20px;}
.ah2 {font-size: 24px; font-weight: bold;}
.amid {font-size: 18px;}

.auebersicht {font-size: 18px; background-color: #FAFAFA; border: solid 2px #AAAAAA; text-align: center; margin: -8px 0 0 10px; height: 30px; width: 30px; line-height: 30px; float: right; }

.imagehead {float:right; width: 150px; height: 150px; border: solid 1px #EFEFEF; margin: 20px 0 20px 20px;}
.image_border, .image_noborder {margin: 20px 0 20px 20px !important; float:right;}
.image_border {border:solid 2px #DDDDDD;}
.image_border_np {border:solid 2px #DDDDDD; margin: 0px 0px 0px 0px;}

.a300 {width:99%; margin: 20px 0 20px 0;}
.a300c {border:solid 1px #DDDDDD; width:99%;}
.anH {font-size:8px; float: right; line-height:102%;}

.cssbutton { border:solid 2px #FFA600; background-color: #FFBE3C; font-size:20px; font-weight: bold; color: #FFFFFF; text-align: center; line-height: 34px; width: calc(100% - 4px);}

.cssbuttongrey {border: solid 2px #EFEFEF; background-color: #FAFAFA; font-size: 20px; font-weight: bold; color: #444444; text-align: center; line-height: 35px; width: 100%; cursor: pointer; }

.cssformbutton {border:solid 2px #FFA600; background-color: #FFBE3C; vertical-align: middle; height:35px; font-size:16px; font-weight: bold; color: #FFFFFF; text-align: center; line-height: 24px; width: 80%;}

.cssbuttonmain {padding: 2%; margin-bottom: 2%; margin-top: 2%; border:solid 2px #FFA600; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; background-color: #FFBE3C; text-align: center;}
.cssbuttonmain:active {background-color: #EFEFEF; color: #000000;}

.cssbuttonuser  {padding-top: 2px;border:solid 2px #5A7ADB; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; background-color: #7A96FF; vertical-align: middle; height:35px; font-size:16px; font-weight: bold; color: #FFFFFF; text-align: center;}

.scrollbutton {border: solid 2px #FFA600; background-color: #FFBF28; font-size: 20px; font-weight: bold; color: #FFFFFF; text-align: center; line-height: 42px; width: 40px; height: 40px; cursor: pointer; border-radius: 50px; margin: 5px; display: block; }

.subnavibox, .subnaviboxselected {float: left; border: solid 3px #DDDDDD; height: 56px; margin: 6px; background-color: #FFFFFF; display: block; width: calc(100% - 44px); height: 56px; border-radius: 7px; }
.subnaviboxselected {background-color: #FAFAFA; border: solid 3px #2DA500;}
.subnaviboxlink {font-size: 18px; line-height: 25px; color: #4D6ECD; font-weight: normal;}
.subsubnaviboxlink {font-size: 18px; line-height: 25px; color: #4D6ECD; font-weight: normal; padding: 3px; }
.subnaviboxlinkactive {font-size: 18px; line-height: 25px; color: #17AF00; font-weight: normal;}
.subnaviboxlinkbig {font-size: 20px; line-height: 28px; color: #4D6ECD; font-weight: bold;}     
.subsubnavibox {float: left; background-color: #FFFFFF; height: 56px; border-right: solid 2px #EFEFEF; margin: 0 5px 0 0; border-radius: 5px 0 0 5px; }
.subnaviboxwidth {width: 100%;}
.subnaviboximg { height: 56px; max-width: 56px; padding: 0; border-radius: 5px 0 0 5px; }

.rootnavisub { margin: 5px; background-color: #FFFFFF;}

.rootnavimarker { color: #2DA500; width: 25px; font-size: 28px; line-height: 72px; height: 72px; }


.rlabel {border:solid 1px #DDDDDD; background-color: #FAFAFA; text-align: center; font-size: 12px; width: 62px;}

.dd_raetselfilter {font-size: 14px; width: 100%; padding: 5px; box-shadow: 0px 0px 1px 0px #DDDDDD; margin-top: 10px; margin-bottom: 10px; cursor: pointer; }
.dd_raetselauswahl { padding: 5px 5px 5px 10px; font-size: 18px; width: 100%; box-shadow: 0px 0px 1px 0px #DDDDDD; height: 52px; -webkit-appearance: none; cursor: pointer; }

.tf_pers_kwr, .tfchat, .ta_kontakt, .ta_pers_kwr, .tf_aufgabe, .tf, .tf_anrede {font-family: Arial,Sans-Serif; font-size: 20px; padding: 10px; box-shadow: 5px 5px 5px 0px #DDDDDD; background-color: #FFFFFF; }
.tf_pers_kwr {width: 98%;}
.tf_anrede {width: calc(100%); max-width: 525px; }
.ta_kontakt {width: 94%; height: 130px;}
.ta_pers_kwr {width: 98%; height: 80px;}
.tf_aufgabe {font-size:20px !important; width:60px; height: 18px;}
.tf {width: calc(100% - 25px); max-width: 500px; }
.tf_kontakt {width: 98%;}

.timerzeit {font-size: 16px;font-weight: bold;color: #BA0000;}

.startheader {background-color: #7A96FF; font-size: 20px; font-weight: bolder; color:#FFFFFF; padding: 15px; border-radius: 3px 3px 0 0; }
.hingucker, .filtercontainer {border:solid 1px #CCCCCC; background-color: #FAFAFA;}
.roundedbox, .level1, .level2, .level3, .level4 {border:solid 1px #DDDDDD;}
.roundedboxinfo {border: solid 3px #2DA500; background-color: #FFFFFF; }
.filtercontainer {padding: 20px 30px 30px 30px; box-shadow: 1px 1px 3px 0 #CCCCCC; }

.level1, .level2, .level3, .level4 {padding: 0; text-align: center; margin: 0; line-height: 36px; font-size: 18px; color: #FAFAFA; font-weight: bold; border-radius: 0 0 5px 5px; }
.level1 {background-color: #4CCD6E;} 
.level2 {background-color: #FFD350;} 
.level3 {background-color: #FF8000;} 
.level4 {background-color: #E10000;} 

.wcrichtig {font-weight: bold; font-size:22px; color:#2DA500;}
.wcfalsch {font-weight: bold; font-size:22px; color:#BA0000;}

.hinweisCookie {width:100%; background-color:#999999;}

.t07 {width: 100%; border-collapse: seperate; border-spacing: 0; border: none;}
.t07 td {padding: 7px;}

.t03 {width: 100%; border-collapse: seperate; border-spacing: 0; border: none;}
.t03 td {padding: 3px;}

.ladeanzeige {position: relative; padding: 20px; border: solid 16px #2DA500; top: 20%; margin: 20px auto 20px auto; width: 250px; background-color: #FFFFFF; z-index: 10000; border-radius: 10px; }
.checkanzeige {position: fixed; padding: 40px; border: solid 16px #2DA500; top: 20%; left: calc(50% - 154px); width: 200px; height: 200px; background-color: #FFFFFF; display: none; z-index: 100000; box-shadow: 0 0 6px 3px #444444; border-radius: 200px; }

.switch { position: relative; display: inline-block; width: 60px; height: 34px; }
.switch input {display:none;}
.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; -webkit-transition: .4s; transition: .4s; }
.slider:before { position: absolute; content: ""; height: 26px; width: 26px; left: 4px; bottom: 4px; background-color: white; -webkit-transition: .4s; transition: .4s;}
input:checked + .slider { background-color: #2196F3; }
input:focus + .slider { box-shadow: 0 0 1px #2196F3; }
input:checked + .slider:before { -webkit-transform: translateX(26px); -ms-transform: translateX(26px); transform: translateX(26px); }
.slider.round { border-radius: 34px; }
.slider.round:before { border-radius: 50%; }

#overlayframe { width: 100%; height: 50vh; border: none; overflow: scroll; }
.overlay_frame { background-color: #FFFFFF; width: calc(100% - 40px); margin: 0 2% 0 1%; top: 12vh; position: fixed; border: solid 2px #FFFFFF; box-shadow: 0px 0px 10px 0 #444444; z-index: 1000000; }
.overlay { position: fixed; width: 100%; height: 100%; background-color: #FFFFFF; z-index: 10000; top: 0; left: 0; display: none; background: rgba(200, 200, 200, 0.8); }

.msg_frame { background-color: #FFFFFF; width: calc(100% - 40px); margin: auto; top: 80px; left: 20px; position: fixed; border: solid 2px #FFFFFF; box-shadow: 0px 0px 10px 0 #222222; display: none; border-radius: 10px; z-index: 1000000;}
.msg_content { overflow-x: none; overflow-y: scroll; max-height: 80vh; padding: 20p 0 0 0; margin: 0; }
.msgx {float: right; padding: 0; width: 50px; margin: -65px 0; font-size: 30px; line-height: 50px; font-weight: bold; height: 50px; border-radius: 10px; box-shadow: 0px 0px 10px 0 #222222; border: solid 2px #EFEFEF; background-color: #FFFFFF; color: #222222; text-align: center; cursor: pointer;  z-index: 100000000; }
.msgx:hover {background-color: #EFEFEF; color: #222222; border: #CCCCCC solid 2px; }

.sharebox { width: 100%; margin: 10px auto 20px auto; }
.sharebuttons { width: 100%; margin: auto; }
.somebuttons { font-size: 14px; font-weight: bold; width: calc(100% - 10px); height: 30px; line-height: 30px; margin: 10px auto 10px auto; display: block; color: #FFFFFF; padding: 5px; text-align: center; }
.somehinweis { width: calc(100% - 10px); text-align: center; background-color: #2DA500; height: 30px; line-height: 30px; margin: 10px auto 10px auto; font-weight: bold; color: #FFFFFF; font-size: 14px; padding: 5px; }
.somebuttonsfb { background-color: #3B5998; }
.somebuttonspi { background-color: #D34836; }
.somebuttonstw { background-color: #55ACEE; }
.somebuttonsmail { background-color: #6cc9ee; }
.somebuttonwa { background-color: #25D366; }

.wettkampftickercon { width: 100%; overflow-x: scroll; }
#raetselListe { margin: 0 auto 40px auto; min-height: 200px; } 

.tickerHead { font-size: 20px; line-height: 46px; width: calc(100% - 14px); margin: 5px auto 0 auto; background-color: #7A96FF; color: #FFFFFF; font-weight: bold; border: solid 2px #CCCCCC; border-bottom: none; border-radius: 5px 5px 0 0; text-align: center; position: relative;}
.tickerCon { height: 54px; width: calc(100% - 14px); overflow-x: scroll; border: solid 2px #CCCCCC; border-top: none; border-radius: 0 0 5px 5px; background-color: #FFFFFF; margin: 0 auto 0 auto; }
.tickerimage { float: left; border: solid 1px #EFEFEF; border-radius: 5px; margin: 2px 5px 2px 2px; height: 40px; }

*:focus { outline: none; }

.yellowright { color: #FFBF28; font-size: 20px; }

.subnaviboxSide {border: solid 3px #AAAAAA; padding: 0; background-color: #FFFFFF; width: calc(50% - 16px); position: relative; height: 60px; overflow: hidden; float: left; margin: 5px; }
.subnaviboxSideHead {padding: 0; background-color: #FFFFFF; width: 110px; border: solid 3px #000000; padding: 3px; height: 54px;}
.subnaviboxSideText, .subnaviboxSideTextDone {font-size: 17px; font-weight: normal; line-height: 24px; background-color: #FFFFFF; text-align: left; width: 100%; padding-top: 7px; height: 60px; }
.subnaviboxSideTextDone { background-color: #FAFAFA; color: #000000; box-shadow: 0 0 5px #2DA500 inset; box-shadow: 0 -5px 5px #2DA500 inset; }
.subnaviboxSideDone {border: solid 3px #2DA500; padding: 0; background-color: #FFFFFF; width: calc(50% - 16px); position: relative; height: 60px; overflow: hidden; float: left; margin: 5px; }
.subnaviboxSideImg {border: solid 3px #AAAAAA; padding: 0; background-color: #FFFFFF; width: 60px; position: relative; height: 60px; overflow: hidden; display: block; }
.timerzeitside {font-size: 22px; font-weight: bold; color: #BA0000; display: none; }

.subnaviboxSideHelp {border: solid 3px #CCCCCC; padding: 0 3px 0 0; background-color: #FFFFFF; width: 60px; position: relative; height: 60px; overflow: hidden; border-radius: 5px; }
.subnaviboxSideHelpImg {width: 50px; height: 50px; padding: 5px; }

.faqfrage { padding: 10px; background-color: #7A96FF; border-radius: 5px; cursor: pointer; margin: 0 0 10px 0; font-weight: bold; color: #FFFFFF; }
.faqantwort { padding: 10px; background-color: #FAFAFA; margin: 0 0 20px 0; border-radius: 5px;  border: solid 1px #CCCCCC; }  
.filterbox { padding: 25px 20px 25px 20px; margin: 25px auto 20px auto; background-color: #FAFAFA; }

.fileuploadbutton::-webkit-file-upload-button { visibility: hidden; }
.fileuploadbutton::before { content: 'Datei auswählen'; display: inline-block; background: #FAFAFA; border: 1px solid #999; border-radius: 5px; padding: 8px; outline: none; white-space: nowrap; -webkit-user-select: none; cursor: pointer; text-shadow: 1px 1px #fff; font-size: 13pt; text-align: center; margin: 10px 0 0 0; font-weight: 700; width: calc(100% - 18px); }
.fileuploadbutton:active::before { background: -webkit-linear-gradient(top, #e3e3e3, #f9f9f9); }

.imgheadcon { display: block; margin: 5px 1px; float: left; height: 35px; width: 35px; }
.imghead { height: 31px; padding: 2px; }   
.alogo { border: solid 1px #CCCCCC; height: 35px; margin: 5px; border-radius: 5px; }

.boxuebersicht { padding: 20px 0 20px 10px; background-color: #FAFAFA; margin: 10px 0 10px 0; border-bottom: solid 3px #DDDDDD; border-top: solid 3px #DDDDDD; }
.boxscrollerl { width: 100%; border: solid 1px #CCCCCC; border-radius: 5px; margin: 0 0 30px 0; position: relative; }
.boxscrollerr { width: 100%; border: solid 1px #CCCCCC; border-radius: 5px; margin: 0 0 30px 0; position: relative; }
.boxscroller { background-color: #FFFFFF; overflow-x: hidden; height: 250px; overflow-y: scroll; padding: 0 10px 10px 10px; border-radius: 10px; position: relative; }
.boxkreisel { position: absolute; width: 100%; }
.boxLeft { width: 58px; height: 100%; color: #222222; background-color: #FAFAFA; font-weight: bold; text-align: center; line-height: 66px; border-radius: 5px 0 0 5px; font-size: 24px; border-right: solid 1px #CCCCCC; }
.boxImage { height: 60px; width: 60px; border-radius: 50%; border: solid 1px #CCCCCC; margin: 10px; }
.boxheader {background-color: #7A96FF; font-size: 20px; line-height: 24px; color:#FFFFFF; padding: 10px; border-radius: 3px 3px 0 0; }
.boxBlur { color: #7A96FF; float: right; font-size: 40px; line-height: 48px; cursor: pointer; margin: 0 5px 0 0; }
.boxText { padding: 12px; font-size: 20px; }

.fett { font-weight: bold; }

.backer { text-align: center; width: calc(100% - 20px); padding: 10px; background-color: #7A96FF; display: block; font-weight: bold; color: #FFFFFF; margin: 0 0 10px -2px; }
.imghover { border: 3px solid #7A96FF;  border-radius: 5px; }

.aktionsheader { width: calc(100% - 22px); margin: 5px auto 5px auto; padding: 0 10px 0 10px; border: solid 2px #DDDDDD; background-color: #CCCCCC; box-shadow: 1px 1px 2px 0 #AAAAAA; border-radius: 10px; font-size: 18px; line-height: 24px; }
.aktionsheaderdo { margin: auto; padding: 10px 0 10px 0; font-size: 18px; line-height: 24px; background-color: #2DA500; color: #FFFFFF; }
.aktionsheaderpre { margin: auto; padding: 10px 0 10px 0; font-size: 18px; line-height: 24px; background-color: #EFEFEF; color: #222222; }

.infoboxpers {border: solid 5px #2DA500; background-color: #FFFFFF; width: 100%; margin: 20px 10px 20px 0; padding: 10px; }

.pstar { float: left; font-size: 20px; color: #FFBF28; padding: 0; margin: 0 -2px 0 -2px; }
.pstar1 { float: left; margin: 0 0 0 10px; }
.pstar2 { float: left; margin: 0 0 0 10px; }
.pstar3 { float: left; font-size: 24px; color: #FFBF28; padding: 0; margin: 0; }

.ttadd { width: calc(100% - 26px); padding: 10px; margin: 0 auto 0 auto; color: #222222; border: 3px solid #FFFFFF; border-radius: 10px; }
.ttadd:hover { border: 3px solid #2DA500; }

.cssbuttonhead { border: solid 2px #FFA600; background-color: #FFBF28; font-size: 18px; font-weight: bold; color: #FFFFFF; text-align: center; line-height: 40px; padding: 0 10px 0 10px; margin: 2px 0 0 0; }
.userinfobox { width: calc(100% - 108px); padding: 10px; border: solid 3px #CCCCCC; margin: 0 0 0 -3px; border-radius: 0 0 5px 5px; position: absolute; display: none; background-color: #FFFFFF; }

.raetselSelector { font-size: 20px; line-height: 46px; width: calc(100% - 2px); margin: 10px 0 0 0; background-color: #2DA500; color: #FFFFFF; font-weight: bold; border: solid 2px #669933; border-bottom: none; border-radius: 5px 5px 0 0; text-align: center; }
.userSelector { font-size: 20px; line-height: 46px; width: calc(100% - 2px); margin: 10px 0 0 0; background-color: #7A96FF; color: #FFFFFF; font-weight: bold; border: solid 2px #97aae4; border-bottom: none; border-radius: 5px 5px 0 0; text-align: center; position: relative;}

.rnaviscroller, .rnaviscrollerb
{
    text-align: center;
    height: 40px;
    line-height: 40px;
    background-color: #CCCCCC;
    color: #FFFFFF;
    cursor: pointer;
    font-size: 24px;
    width: calc(100% - 2px);
    border: solid 2px #FFA600;
    background-color: #FFBE3C;
    margin: 0;
    user-select: none;
}	

#rnaviraetselbox { background-color: #FFFFFF; }
.buttonjetztstarten { position: absolute; top: 10px; right: 10px;}

.subnaviboxcon { width: calc(100% - 30px); margin: 10px 15px 15px 15px; } 


@media only screen and (max-width: 749px) 
{
    .rootnavlinksbox {margin: 0 0 0 5px; position: absolute; display: none; background-color: #EFEFEF; width: calc(100% - 20px); max-width: 700px; border: solid 2px #CCCCCC;  border-radius: 10px; }
    .rootnavicon { width: calc(100% - 6vw); margin: 2vw;  border-radius: 2vw; background-color: #FFFFFF; line-height: 12vw; border: solid 1vw #CCCCCC; }
    .rootnaviconsel {  width: calc(100% - 6vw); margin: 2vw;  border-radius: 2vw; background-color: #FFFFFF; line-height: 12vw; border: solid 1vw #7A96FF; }
    .naviimgr { float: right; height: 12vw; width: 12vw; margin: 0 0 0 10px; border-radius: 1vw; background-color: #FFFFFF; }
    .navisubcon { width: calc(100% - 4vw);  border-radius: 2vw; background-color: #FFFFFF; position: relative; }
    .navisubbox { margin: 10px; background-color: #FFFFFF; width: calc(100% - 26px); border-radius: 2vw; border: solid 3px silver; }
    .navisubboxsel { margin: 10px; background-color: #FFFFFF; width: calc(100% - 26px); border-radius: 2vw; border: solid 3px #2DA500; }
    .navisubtext { color: #000000; font-size: 4vw; font-weight: bold; padding: 0 0 0 2vw; width: calc(100% - 14vw - 12px); height: 12vw; line-height: 5vw;}
    .rootnavlinks { color: #000000; padding: 0 5px 0 10px; font-size: 4.5vw; font-weight: bold; width: 100%; border-radius: 2vw; }
    .rootnavlinkssel { color: #FFFFFF; padding: 0 5px 0 10px; font-size: 4.5vw; font-weight: bold; border-bottom: 3px solid #7A96FF; border-radius: 0; background-color: #7A96FF; }
}

@media only screen and (min-width: 750px) 
{
    .rootnavlinksbox {margin: 0 0 0 5px; position: absolute; display: none; background-color: #EFEFEF; width: 500px; border: solid 3px #CCCCCC; border-radius: 10px; }
    .rootnavicon { width: calc(100% - 30px); margin: 10px; border-radius: 10px; background-color: #FFFFFF; line-height: 64px; border: solid 4px #CCCCCC; }
    .rootnaviconsel {  width: calc(100% - 30px); margin: 10px; border-radius: 10px; background-color: #FFFFFF; line-height: 64px; border: solid 4px #7A96FF; }
    .naviimgr { float: right; height: 64px; width: 64px; margin: 0 0 0 10px; border-radius: 0 5px 5px 0; background-color: #FFFFFF; }
    .navisubcon { width: calc(100% - 20px); border-radius: 10px; background-color: #FFFFFF; }
    .navisubbox { margin: 20px; background-color: #FFFFFF; width: calc(100% - 46px); border-radius: 10px; border: solid 4px silver; border-radius: 10px; }
    .navisubboxsel { margin: 20px; background-color: #FFFFFF; width: calc(100% - 46px); border-radius: 10px; border: solid 4px #2DA500; }
    .navisubtext { color: #000000; font-size: 22px; font-weight: bold; padding: 0 0 0 10px; width: calc(100% - 86px); height: 64px; line-height: 26px; }
    .rootnavlinks { color: #000000; padding: 0 5px 0 10px; font-size: 28px; font-weight: bold; width: 100%; border-radius: 10px; }
    .rootnavlinkssel { color: #FFFFFF; padding: 0 5px 0 10px; font-size: 28px; font-weight: bold; border-bottom: 4px solid #7A96FF; background-color: #7A96FF; border-radius: 0; }    
}

.anav, .anavsel { color: #000000; }

.burgeroff { border: solid 3px #CCCCCC; border-radius: 5px; width: 50px; margin: 5px; float: left; }
.burgeron { border: solid 3px #7A96FF; border-radius: 5px; width: 50px; margin: 5px; float: left; }

.userHeadMob { height: 50px; margin: 5px 0 0 5px; border: solid 3px #CCCCCC; float: left; width: calc(100% - 82px); border-radius: 5px; }

.rnaviscrollerb { border-radius: 0 0 5px 5px; margin: 0 0 20px 0; }
.raetselnavicon { position: relative; width: 100%; padding: 10px 0 10px 0; border-left: 1px solid #CCCCCC;  border-right: 1px solid #CCCCCC; }

.auswahlnavicon { position: relative; width: 100%; padding: 10px 0 10px 0; border-left: 1px solid #CCCCCC;  border-right: 1px solid #CCCCCC; height: 300px; }

.navicon { margin: 20px auto 40px auto; background-color: #FAFAFA; border-top: 1px #CCCCCC solid; border-bottom: 1px #CCCCCC solid; }

.newsboximg { border-radius: 10px;  max-width: 50%; float: right; }

.btnMehrInfos { width: 140px; float: left; border-radius: 5px; }
.btnMehrInfos:hover { opacity: 0.8; }

.btnKlickHierCon { position: absolute; top: 50%; left: calc(35vw - 10px); }
.btnKlickHier { width: 30vw; float: left; border-radius: 5px; border: solid 3px #5A7ADB; }
.btnKlickHier:hover { border: solid 3px #EFEFEF; }

.mjsteinmotiv { height: 36px; margin: -1px 0 -10px 0; padding: 0 5px 0 5px; }