@charset "utf-8";
@import url(../fonts/fonts.css?3);

div,
li,
ul { border: 0px #000 solid;}


/* ###################################################### Resets */
* { box-sizing: border-box; }
a { text-decoration: none; color: inherit; }
.hidden { display: none; }
body {    font-family: 'BaWueSansWeb', Arial, sans-serif;}
h1, h2, h3, h4, h5, h6 { font-family: 'BaWueSerifWeb', Georgia, serif;}



*,
*:before,
*:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}

#container {  width: 2560px; max-width: 100% !important; margin: 0 auto !important; overflow-x: hidden; padding-bottom: 100px; }


/* vertikale Navigation ausblenden */
.navoff #naviVisu {
display: none;
}


.kachelnav {}



/* ############################################################ GALERY */
/*  ############################################################################################ */

/* galerie */
.ce_gallery {
text-align: center !important;
display: block !important;
margin-bottom: 40px;
}
.ce_gallery .inside {
max-width: 1100px;
margin: 0px auto 0 auto !important;
text-align: left !important;
}
.ce_gallery figure {
display: inline-block;
}
.fotos .ce_image {
max-width: 1100px;
margin: 0px auto 0 auto !important;
text-align: left !important;
}


/* ############################################################ NAVI */
/*  ############################################################################################ */

#naviMain > ul > li {
    margin: 0 20px;
}
@media (max-width: 1290px) {
#naviMain > ul > li {
    margin: 0 7px;
}
.mod_navigation  {position: absolute !important; right: 0;}
}


/* ############################################################ Einsendeschluss */
/*  ############################################################################################ */

.einsendeschluss {
display: inline-block;
padding: 10px 40px 30px 40px;
border: 0px #000 solid;
border-radius: 0 0 0 8px;
position: absolute;
font-weight: bold;
top: 0px;
right: 0px;
color: #000;
font-size: 20px;
line-height: 20px;
background: #f9daec;
z-index: 9999999999;
text-align: left;
-webkit-transition: all 0.3s; transition: all 0.3s;
background: url(../../media/img/illu/einsende.png) 100% 100% no-repeat;
}
 @media (min-width: 930px) {
.einsendeschluss br { display: none; }
 }
@media (max-width: 930px) {
.einsendeschluss {
padding: 10px 6px 15px 6px;
border-radius: 0;
position: absolute;
right: auto;
left:0px;
font-size: 15px;
line-height: 16px;
}
}
@media (max-width: 400px) { 
.einsendeschluss {
padding: 5px 5px 12px 5px;
top:5px;
right: auto;
left: 5px;
font-size: 13px;
line-height: 14px;
}
}



/* ############################################################ VIDEO PREISVERLEIUNG */
/*  ############################################################################################ */

.ce_player.preisverleihung  { margin: 0 auto;  max-width: 1150px !important; width: 100%; text-align: center; }
.preisverleihung video { width: 100%; max-width: 100%; }


/* ############################################################ SWITCH */
/*  ############################################################################################ */


@keyframes switch {
  from {opacity: 0;}
    to {opacity: 1;}
}
@keyframes switchtextoff {
    from {opacity: 1; transform: scale(1);}
        to {opacity: 0; transform: scale(0);}
}
@keyframes switchoff {
    from {width: 100%; height: 100%; opacity: 1;}
        to {width: 0; height: 0; opacity: 0;}
}
@keyframes switchtext {
    from {transform: scale(0.25);}
        to {transform: scale(1);}
}


#header { z-index: 9999 !important; }


/*  ################################################################ TOGGLER FAQ */
/*  ############################################################################################ */

.toggler {border: 0px #000 solid; padding: 0px; cursor: pointer;  font-size: 22px; font-weight: bold; margin: 0px 0px 0px 0px !important; border-radius: 0px; }
.toggler:before {content: "\279C ";}
.toggler.ui-state-active:before {content: "\279C "; }
.ce_accordionSingle {margin: 0 0 0px 0px; }
.ce_accordionSingle ul,#main .ce_text ul { margin-left: 18px; }
.ce_accordionSingle ul li,#main .ce_text ul li {margin: 0 0 8px 0px;  list-style-type: square;}
.ce_accordionSingle:last-child {margin: 0 0 130px 0px; }
.accordion { padding: 30px 22px; background: transparent;  margin-top: -1px;  display: block; }
.accordion p,.accordion li {  }
.accordion p { margin: 0 0 8px 0 !important;  }
.ce_accordion {padding: 25px; margin: 5px 0 5px 0; border: 3px solid #000;  border-radius: 0px;  background: rgba(0,0,0,0.5);}
.ce_accordion:nth-child(3n) {background: rgba(0,0,0,0.3);}
.ce_accordion:nth-child(3n+1) {background: rgba(0,0,0,0.1);}


/*  ################################################################ Font Size Line Height  */
/*  ############################################################################################ */

.teilnahmeformulare { margin: -10px auto 100px auto; max-width: 530px; }



/*  ################################################################ effect  */
/*  ############################################################################################ */
#naviMain > ul > li > ul, #naviMain > ul li > a, #naviVisu ul > li > a:after, #logoMob, #logoNorm, #homeNavi > ul > li > a:after, #homeNavi > ul > li > a:before, #homeNavi > ul > li > a, .tabOut .inner-1100 > .tabnavi > .tabbutton, .checkmark:after, .checkmark:before, #footer li > a, #imgNav a, .mobicon span, .btn.btn-red, .btn.btn-red:before, .btn.btn-red:after, .tab-headline.link .wrap,
.effect { -webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; transition: all .3s ease-in-out; }


/*  ################################################################ Margins  */
/*  ############################################################################################ */

h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: bold;} 
    
h1 { font-size: 55px; line-height: 1.2em; margin: 50px 0 40px 0;}
.home h1 { font-size: 45px; } 
h2 { font-size: 40px; line-height: 1.2em; margin: 60px 0 15px 0;}
h3 { font-size: 28px; line-height: 1.2em; margin: 50px 0 15px 0;}
h4 { font-size: 24px; line-height: 1.2em; margin: 30px 0 20px 0;}   
h5 { font-size: 20px; line-height: 1.2em; margin: 20px 0 20px 0;}  



#main p { margin-bottom: 10px; }

/*  ################################################################ font-size and weights  */
/*  ############################################################################################ */
#main p,
#main ul { font-size: 18px; line-height: 24px; }
h3.acc-title{ font-size: 30px; }
.bold, #main a { font-weight: bold; }


/* ############################################## Links */
#main a { text-decoration: underline; font-weight: bold; }
#main .inside {width: 90%; margin: 0 auto; max-width: 1000px;}
.home #main .inside {width: 90%; margin: 0 auto; max-width: 1400px;}   
.home #main .inside .mod_article {max-width: 1000px; margin: 0 auto;}     
#main a.btn, 
#main #homeNavi a { text-decoration: none; font-weight: bold; }
#main .tab-headline a { text-decoration: none; font-weight: bold; color: #FFF; }
#main a { color: #000; }
#main a.btn.btn-red { color: #000; }


/* ################################################################################################## 3spaltig */
/* ##################################################################################################  */

ul.dreispaltig { display: block;width: 800px; max-width: 100% !important; list-style-type: none !important;padding: 0 !important; margin: 80px auto 0px auto !important;}
ul.dreispaltig li { list-style-type: none !important; margin: 10px 0 !important; }

@media (min-width: 780px ) {
ul.dreispaltig { display: flex; justify-content: space-between; }
ul.dreispaltig li { width: 30.33%; margin: 0px 0 !important; }
}

/* ################################################################################################## 2spaltige */
/* ##################################################################################################  */
/*
.ce_text.frame {
position: relative;  z-index: 11;
}
.ce_text.overflow {
overflow: visible; position: relative;  margin-top: 0px; z-index: 99;
}
ul.zweispaltig {  display: flex; justify-content: space-between; width: 100%; list-style-type: none !important; padding: 0 !important; margin: 0px auto !important;   border: 0px #ccc solid;  overflow: visible; max-width: 800px;}
ul.zweispaltig li { list-style-type: none !important; display: block; width: 99% !important; margin: 60px 0 10px 0 !important; z-index: 11; position: relative; }
ul.zweispaltig li { position: relative; overflow: visible; }

ul.zweispaltig { font-size: 17px !important; line-height: 24px !important;}
ul.zweispaltig strong { font-size: 20px !important;}

ul.zweispaltig img {max-width: 300px; }
ul.zweispaltig strong img {height: 50px; width: auto; margin-bottom: 10px; }

@media (max-width: 700px ) {
ul.zweispaltig {  display: block; width: 100%;}
ul.zweispaltig img {max-width: 80%; }
ul.zweispaltig li { width: 100% !important; }
ul.zweispaltig { font-size: 16px !important; line-height: 21px !important;}
ul.zweispaltig strong { font-size: 16px !important;}
}

ul.vierspaltig { display: flex; justify-content: space-between; width: 100%; list-style-type: none !important; padding: 0 !important; margin: 0px auto !important;   border: 0px #ccc solid;  overflow: visible;  align-items: flex-start; flex-wrap:wrap; max-width: 925px;}
ul.vierspaltig li { list-style-type: none !important; display: block; margin: 80px 0 10px 0 !important; z-index: 11; position: relative; overflow: visible;}
ul.vierspaltig li:nth-child(2n-1) {width: 20%;}
ul.vierspaltig li:nth-child(2n) {width: 27%;}

@media (max-width: 800px ) {
ul.vierspaltig li:nth-child(2n-1) {width: 48%;}
ul.vierspaltig li:nth-child(2n) {width: 48%;}
ul.vierspaltig li:nth-child(1) {order: 1;}
ul.vierspaltig li:nth-child(2) {order: 3; margin-top: 5px !important;}
ul.vierspaltig li:nth-child(3) {order: 2;}
ul.vierspaltig li:nth-child(4) {order: 4; margin-top: 5px !important;}
ul.vierspaltig li:nth-child(2n-1):before { right: -20% !important;  }
}
*/
/* ################################################################################################## RAhmen und Sprechblase 
/* ##################################################################################################  
ul.vierspaltig li:nth-child(2n-1):before { content: ""; display: block; width: 80px; height: 80px; top: -90px; left: 0px; right: -50%; margin: 0 auto; background: #ccc; position: absolute; z-index: 999999;    background: url(../../media/img/basics/sprech.png?1) no-repeat top left; transform: scaleX(-1); background-size: 100% 100%;  border: 0px #000 solid; -webkit-transition: all 0.5s; transition: all 0.5s;}
*/ 

/* ################################################################################################## HEADER */
/* ##################################################################################################   */
#header { position: relative; min-height: auto;}
#logoMob { opacity: 0; overflow: hidden; visibility: hidden; height: 0; }
#logoMob.fixed { max-width: 75px; opacity: 1; overflow: visible; visibility: visible; height: auto; position: fixed; top: 0px; left: 50%; z-index: 11; transform: translate(-860px, 0); }
#logoNorm.fixed { opacity: 0; overflow: hidden; visibility: hidden; height: 0;  }
#header .linkMainpage { display: none; margin-top: 22px; margin-bottom: 10px; text-align: center; }
#header .linkMainpage figure { display: inline-block; }

#logoNorm { z-index: 9999999999999 !important; position: absolute; left: 2%; top: -85px;  opacity: 1; overflow: visible; visibility: visible; height: auto;  width: 15%; max-width: 150px;}
#header .inside { position: relative; }

/* ################################################################################################## NAVIMAIN */
/* ##################################################################################################  */

.block#naviMain { overflow: visible;font-weight: bold; padding-left: 15%; padding-right: 15%; }
#naviMain > ul { max-width: 800px; text-align: center; margin: 100px auto 25px auto; display: flex; justify-content: space-between; flex-wrap: wrap;}
#naviMain > .level_2 {background: #fff;}
#naviMain > ul > li { position: relative; display: block; margin: 0 5px; padding-top: 10px; padding-bottom: 10px; }
#naviMain > ul > li:first-child { display: none; }
#naviMain > ul > li:hover > ul { opacity: 1; height: auto; overflow: visible;}
#naviMain > ul > li > ul > li { position: relative; }
#naviMain > ul > li > ul > li:last-child { padding-bottom: 0px; }
#naviMain > ul > li > ul > li > a { display: inline-block; padding: 3px 10px 5px 10px; !important; text-align: left; white-space: nowrap; }
#naviMain > ul > li > ul > li > strong { display: inline-block; text-align: left; white-space: nowrap; }
#naviMain > ul > li > ul > li:hover > ul { opacity: 1; height: auto; overflow: visible; }
#naviMain > ul > li > ul > li > ul { opacity: 0; height: 0; overflow: hidden; position: absolute; left: 100%; top: 0; z-index: 99; }
#naviMain > ul > li > ul > li > ul > li:last-child { padding-bottom: 20px; }
#naviMain > ul > li > ul > li > ul > li > a { display: block; padding: 10px 20px; text-align: left; white-space: nowrap; }
#naviMain .datenschutz { display: none; }

/* ##################################################################  naviMain fixed */
#naviMain.fixed { position: fixed; top: 0; left: 0; right:0;  width: 100%; z-index: 9999999; box-shadow: 0px 0px 20px rgba(0,0,0,0.45); border-bottom: 0px #000 solid; }
#naviMain.fixed > ul { text-align: center; margin-top: 10px; margin-bottom: 0px;  }
#naviMain.fixed > ul > li {padding: 26px 0 16px 0; }

/* ##################################################################  naviMain 2nd level */
.mod_article { position: relative; }
.mod_article.grusswort {padding: 25px; background: #eee; }
.multitab { position: relative; }
.mod_navigation ul li.navoff {display: none !important; }


/* ################################################################################################## NAVIMAIN DESKTOP */
/* ##################################################################################################  */

@media (min-width: 930px ) {
#naviMain > ul > li > ul { opacity: 0; height: 0; overflow: hidden; position: absolute; left: -30px; top: 100%; z-index: 99; border-radius: 0px 0px 20px 20px;  }
#naviMain {font-size: 24px; background: #fff; z-index: 9999999999; position: relative; line-height: 30px;}

.mod_navigation ul li.navoff {display: inline-block !important; }
.mod_customnav  {font-size: 20px;}
.mod_navigation ul.level_1 {max-width: 1200px; margin: 0 auto;}
.mod_navigation ul.level_1 > li {position: relative;}
.mod_navigation ul.level_1 > li:hover:before,
.mod_navigation ul.level_1 > li.active:before {content:""; display: block; position: absolute; bottom: 8px; width: 100%; height: 2px; background: #000;}
.mod_navigation ul.level_2 li  { font-size: 17px; display: block; border: 0px solid #000 !important;padding: 0px;color: #000;background: #fff; height: auto !important; text-align: left !important; }
.mod_navigation ul.level_2 li { border: #ccc 3px solid;   }
.mod_navigation ul.level_2 li.last {  }

.mod_navigation ul.level_2 li a { border-radius: 0px; width: 100%;  display: block; padding: 10px 10px 10px 10px; -webkit-transition: all 0.3s; transition: all 0.3s; }
.mod_navigation ul.level_2 li.active strong { border-radius: 0px;  display: block;width: 100%; }
.mod_navigation ul.level_2 li a:before{ content: "\279C"; margin-right: 6px; display: inline-block;  }

 
/* ################### OVER-Farben  */
.mod_navigation ul.level_2 li a:hover,
.mod_navigation ul.level_2 li.active strong { background: #ccc;  }
.mod_navigation .subaufgaben ul.level_2 li.nav_suchen-und-finden a:hover,
.mod_navigation .subaufgaben ul.level_2 li.nav_suchen-und-finden.active strong  { background: rgba(0,0,0,0.6); }
.mod_navigation .subaufgaben ul.level_2 li.nav_schreiben-und-gestalten a:hover,
.mod_navigation .subaufgaben ul.level_2 li.nav_schreiben-und-gestalten.active strong  { background: rgba(0,0,0,0.5); }    
.mod_navigation .subaufgaben ul.level_2 li.nav_kuenstlerisches-arbeiten a:hover,
.mod_navigation .subaufgaben ul.level_2 li.nav_kuenstlerisches-arbeiten.active strong  { background: rgba(0,0,0,0.4); }    

/* ################### Abstand Ebene 2  */
.mod_navigation ul.level_2 li.first  { margin-top: 25px; padding-top:0px !important;}
.mod_navigation ul.level_2 li.last  { padding-bottom:0px !important;}
.mod_navigation.fixed ul.level_2 li.first  { margin-top: 0px; }
}

/* ################################################################################################## ICONS */
/* ##################################################################################################  

.floating-icon { position: absolute; }
.icon-left-first { width:350px; top: 400px; left: 50%; transform: translate(-650px,0); z-index: -1; }
.icon-left-second { width: 550px; top: 3050px; left: 55%; transform: translate(-850px,0); z-index: -1; }
.icon-right-first { width: 450px; top: 1550px; left: 40%; transform: translate(410px,0);z-index: -1;  }
.icon-right-second { width: 750px; top: 4750px; left: 45%; transform: translate(380px,0);z-index: -1;  }
.icon-left-sg { width:400px; top: 280px; left: 47%; transform: translate(-650px,0); z-index: -1; }
.icon-right-sg { width: 350px; top: 1750px; left: 43%; transform: translate(410px,0);z-index: -1;  }
.icon-third-sg {  width: 750px; top: 800px; left: 45%; transform: translate(-850px,0); z-index: -1; }
.icon-left-sg-2022 { width: 250px; top: 350px; left: 45%; transform: translate(-500px,0); z-index: -1; }
.icon-right-sg-2022 { width: 450px; top: 1600px; left:48%; transform: translate(380px,0);z-index: -1;  }
.icon-left-second-sg-2022 { width:350px; top: 2500px; left: 48%; transform: translate(-650px,0); z-index: -1; }

@media ( min-width: 1700px ) {
.icon-right-sg { width: 350px; top: 1750px; left: 53%; transform: translate(410px,0);z-index: -1;  }
}
*/ 


/* ################################################################################################## AUFGABENBEREICH */
/* ##################################################################################################  */

.aufgabe,
.hinweis,
.technik { margin-top: 0; display: block; background: #f7c9e0; padding: 10px; border-radius: 0px; }
.hinweis { background: #fceaf3; font-size: 15px !important; line-height: 21px !important; }

.nav_kuenstlerisches-arbeiten .aufgabe {background: #61b87c; }
.nav_kuenstlerisches-arbeiten .hinweis {background: #dfefe4; }
.nav_suchen-und-finden #container {  background: #fff; background: rgba(0,0,0,0.10);}
.nav_schreiben-und-gestalten #container { background: #fff; background:  rgba(0,0,0,0.10);}   
.nav_kuenstlerisches-arbeiten #container { background: #fff; background:  rgba(0,0,0,0.10);}  
.nav_schreiben-und-gestalten .aufgabe {background: rgba(0,0,0,0.30) ; }
.nav_schreiben-und-gestalten .hinweis {background: rgba(0,0,0,0.30); }
.nav_schreiben-und-gestalten .onlinelink a {background-color: rgba(0,0,0,0.40); }
.nav_kuenstlerisches-arbeiten .aufgabe {background: rgba(0,0,0,0.3) ; }
.nav_kuenstlerisches-arbeiten .hinweis {background: rgba(0,0,0,0.3); }
.nav_kuenstlerisches-arbeiten .onlinelink a {background-color: rgba(0,0,0,0.25); }


.technik { background:rgba(0,0,0,0.5) !important; border: 0px solid #000; }


/* ################################################################################################## GRUSSWORT */
/* ##################################################################################################  */

.ce_text.grusswort img { display: inline-block;  width: 100%; text-align: center;margin-top: 25px; }
@media ( min-width: 900px ) {
.ce_text.grusswort img { max-width: 50%;}
}

/* ################################################################################################## AUSRICHTUNG */
/* ##################################################################################################  */

.zentriert { margin: 0 auto; text-align: center !important; border: 0px #333 solid;}  


 /* ################################################################################################## TEASER */
/* ##################################################################################################  */

.Xhome #main .inside .mod_article.teaser {max-width: 1400px; margin: 60px auto 40px auto;} 
.home #main .inside .mod_article.teaser {margin: 60px auto 60px auto;}     
.teaser { display: flex; flex-wrap: wrap;  justify-content: space-between;} 
.teaser .ce_text {position: relative; width: 32%; border: 1px #ccc solid; padding: 20px 20px 80px 20px;} 
.teaser .ce_text:nth-child(1) {background: rgba(0,0,0,0.1);} 
.teaser .ce_text:nth-child(2) {background: rgba(0,0,0,0.2);}
.teaser .ce_text:nth-child(3) {background: rgba(0,0,0,0.3);}     
.teaser .ce_text h2 {margin: 0 0 25px 0; font-size: 30px; line-height: 36px; } 
.teaser .ce_text a {position: absolute; bottom: 25px; text-decoration: none !important; display: inline-block; padding: 10px 20px;  border: 1px #333 solid; background: #eee; font-size: 20px; text-align: center; -webkit-transition: all 0.3s; transition: all 0.3s;} 
.teaser .ce_text a:hover {  background: #ddd;}


@media ( max-width: 730px ) {  
.teaser .ce_text {width: 100%; padding: 15px;} 
.teaser .ce_text a {position: relative !important; bottom: 0; }            
}   



/* ################################################################################################## HYPERLINK */
/* ##################################################################################################  */

.ce_hyperlink a,
.download .spaltig {margin-top: 40px;}
.ce_hyperlink a,
.download .spaltig .ce_text p a { text-decoration: none !important; display: inline-block; padding: 10px 20px;  border: 1px #333 solid; background: #eee; font-size: 20px; text-align: center; -webkit-transition: all 0.3s; transition: all 0.3s;}  
.ce_hyperlink a:hover,
.download .spaltig .ce_text p a:hover {  background: #ddd;}  


.home .zweispaltig {margin-top: 60px; display: flex; justify-content: flex-start; flex-wrap: wrap;}
.home .zweispaltig .ce_text  {width: 46%; max-width: 380px; margin-right: 15px;} 



ul.klassennav {margin-top: 40px; padding: 0 !important; list-style-type: none; display: flex; justify-content: space-between;}
ul.klassennav li {width: 32%; cursor: pointer; display: inline-block; padding: 20px 15px;  border: 1px #333 solid; background: #ddd; font-size: 20px; text-align: center; -webkit-transition: all 0.3s; transition: all 0.3s;} 
ul.klassennav li:hover {background: #eee; } 
ul.klassennav li.active { background: #ccc;} 


/* ################################################################################################## DOWNOADS  */
/* ##################################################################################################  */

.download #main .ce_image {margin-bottom: 20px;}
.download #main .ce_hyperlink {margin-top: 20px;margin-bottom: 70px;}    

.download .spaltig {display: flex; flex-wrap: wrap; justify-content: space-between;}
.download .spaltig .ce_text {width: 30.0%; margin-bottom: 50px;}
.download .spaltig .ce_text figure {margin-bottom: 15px;}  


@media ( max-width: 730px ) {
.download .spaltig .ce_text {width: 48.0%; margin-bottom: 25px;}
.download .spaltig .ce_text figure {margin-bottom: 10px;}  
}  

  


/* ################################################################################################## WORKSHOP */
/* ##################################################################################################  */

.ce_text ul.workshop  {  margin: 0 !important; padding: 0 !important; list-style-type: none !important; }
.ce_text ul.workshop li { padding: 0 !important; list-style-type: none !important; margin-bottom: 30px !important; }
.ce_text ul.workshop li strong { border: 2px #000 solid; display: block; padding: 10px; background: #a6c5e9; margin-bottom: -10px; border-radius: 0px;}
.ce_text ul.workshop li:nth-child(1) strong {background: rgba(0,0,0,0.2);}
.ce_text ul.workshop li:nth-child(2) strong {background: rgba(0,0,0,0.3);} 
.ce_text ul.workshop li:nth-child(3) strong {background: rgba(0,0,0,0.4);} 
.ce_text ul.workshop li:nth-child(4) strong {background: rgba(0,0,0,0.5);} 
.ce_text ul.workshop li:nth-child(5) strong {background: rgba(0,0,0,0.6);} 
.ce_text ul.workshop li:nth-child(6) strong {background: rgba(0,0,0,0.7);} 
.ce_text.workshop { border: 0px #000 solid; max-width: 750px; margin: 0 auto; }

.nav_begleitworkshop .ce_text h2 a,
.ce_text.linkelement h2 a,
.ce_text.linkelement_ohne h2 { text-decoration: none !important; border: 1px #000 solid; background: #fff; font-size: 20px; display: inline-block; padding: 15px;border-radius: 0px; background: #e9e3d1; margin: 10px auto 20px auto !important; -webkit-transition: all 0.3s; transition: all 0.3s; max-width: 90%; }
.linkelement h2 a:hover,
.linkelement_ohne h2:hover { background: #61b87c; box-shadow: 0px 0px 5px rgba(0,0,0,0.25);  }
.linkelement_ohne h2 { margin: 20px 0 40px 0; }

.ce_text h2 a { text-decoration: underline !important; }



/* ################################################################################################## LOGOS IM FOOTER */
/* ##################################################################################################  */

.logos { background:#FFFC00; text-align: center; padding: 80px 0; border: 0px #000 solid; border-bottom-width: 2px; border-top-width: 2px; margin-top: 100px; }
.logos img { margin: 15px 0px; width: 450px; max-width: 90%; }
.logos .inside {  display: block; margin: 0 auto; text-align: center; max-width: 1200px; }

@media (min-width: 730px) {
.logos .inside  { justify-content: space-between;  display: block; }
.logos .ce_image { margin: 0 35px; }
}

/* galerie */
.ce_gallery { display: none !important; }

/* ################################################################################################## Banner */
/* ##################################################################################################  */
#banner { font-size: 0; line-height: 0; padding: 0 0 0 0; margin-bottom: 0px; border: 0px #000 solid; border-bottom-width: 3px; border-top-width: 3px;}
#banner {max-width: 1800px; margin-left: auto; margin-right: auto;}
.home #banner { padding-top: 0px;}
#banner img { width: 100%; }
#bannermobil { font-size: 0; line-height: 0; display: none; }
#bannermobil img { width: 100%; }


/* ################################################################################################## SCHMUCK HOME */
/* ################################################################################################## 

.home .ce_image.zentriert {width: 100%; max-width: 800px; margin: 0 auto;}

.home #main {position: relative; overflow: hidden; margin-bottom: 80px;}
.home #main:before,
.home #main:after {overflow: hidden; content: ""; top: 750px; display: inline-block; width: 30%; height: 100%; background: url(../../media/img/illu/backillu-home-2024-links.png?4) left center; z-index: -1 !important; bottom: 0; position: absolute; left: -200px; z-index: 99999; background-size: 100% auto; background-repeat: no-repeat;  }
.home #main:after {overflow: hidden; content: ""; top: 180px; left: auto; display: inline-block; width: 300px; height: 100%; background: url(../../media/img/illu/backillu-home-2024-rechts.png?4) right center; z-index: -1 !important; bottom: 0; position: absolute; right: -50px; z-index: 99999; background-size: 100% auto; background-repeat: no-repeat;  }
@media (max-width: 900px) {
.home #main:before,
.home #main:after { }
.home #main:before { }
.home #main:after {width: 100px; }
}
.mod_article.hintergrund,
.mod_article.hintergrund .ce_image  { z-index: 99; position: relative;}
  */ 


/* ################################################################################################## NAVI UNTER BANNER VISUAL  */
/* ##################################################################################################  */
#naviVisu { max-width: 980px; margin: 0 auto 20px auto; border: 0px #000 solid; display: block; font-size: 24px;  -webkit-transition: all 0.3s; transition: all 0.3s; }
#naviVisu ul { padding: 0 20px !important;  margin: 25px 0 0 0 !important; display: flex; justify-content: space-between; none !important; }
#naviVisu ul li {  display: block; width: 24%; align-items: stretch; }
#naviVisu ul li a { display: block; padding: 10px 2px 10px 55px !important; text-decoration: none; line-height: 22px !important; border: 1px solid blue; border-radius:0px; outline: 0px solid #000; -webkit-transition: all 0.1s; transition: all 0.1s; }

#naviVisu ul li:nth-child(1) a {background: rgba(0,0,0,0.5) url(../img/icons/icon-dummy.png?1); background-repeat: no-repeat; background-position: 5px center ;background-size: 40px 40px; border-color:#000;   }
#naviVisu ul li:nth-child(2) a {background: rgba(0,0,0,0.4) url(../img/icons/icon-dummy.png?1); background-repeat: no-repeat; background-position: 5px center; background-size: 40px 40px;border-color:#000;  }
#naviVisu ul li:nth-child(3) a {background: rgba(0,0,0,0.3) url(../img/icons/icon-dummy.png?1); background-repeat: no-repeat; background-position: 5px center; background-size: 40px 40px; border-color:#000;  }
#naviVisu ul li:nth-child(4) a {background: rgba(0,0,0,0.2) url(../img/icons/icon-dummy.png?1); background-repeat: no-repeat; background-position: 5px center; background-size: 40px 40px; border-color:#000;  }

#naviVisu ul li:nth-child(1) a:hover, .nav_suchen-und-finden #naviVisu ul li:nth-child(1) a {background-color: rgba(0,0,0,0.8); }
#naviVisu ul li:nth-child(2) a:hover, .nav_schreiben-und-gestalten #naviVisu ul li:nth-child(2) a {background-color:rgba(0,0,0,0.7);}
#naviVisu ul li:nth-child(3) a:hover, .nav_kuenstlerisches-arbeiten #naviVisu ul li:nth-child(3) a {background-color:rgba(0,0,0,0.6);}
#naviVisu ul li:nth-child(4) a:hover, .teilnahme #naviVisu ul li:nth-child(4) a {background-color:rgba(0,0,0,0.5); }

@media ( max-width: 1400px ) {
#naviVisu { font-size: 22px; line-height: 24px; }
#naviVisu ul li a { padding: 12px 2px 12px 65px !important; }
#naviVisu ul li a {background-position: 10px center !important; background-size: 50px 50px !important; }
}
@media ( max-width: 1050px ) {
#naviVisu { font-size: 22px; line-height: 24px; }
#naviVisu ul li a { padding: 12px 2px 12px 60px !important; }
#naviVisu ul li a {background-position: 10px center !important; background-size: 40px 40px !important; }
}


/* layouts */
.img-center .image_container { text-align: center;  }




/* ################################################################################################## UPLOAD */
/* ##################################################################################################  */


.ce_form label {display: block; border: 0px #000 solid; margin: 15px 0 5px 0 !important;}
.ce_form label .mandatory {display: none;}
.ce_form .small {max-width: 100px;}
.ce_form fieldset { border: 0px #000 solid; border-left-width: 5px; padding-left: 20px;}
.ce_form fieldset legend { display: block !important; font-size: 18px; font-weight: bold; padding: 25px 0 5px 0 !important; text-transform: uppercase;}
.ce_form fieldset label { padding: 0 0 0 0% !important;}
.ce_form fieldset p { display: block; font-weight: bold; padding: 25px 0 0px 0 !important; }
.ce_form fieldset input {  margin-left: 0%;}
.ce_form .grossklein { text-transform: none !important;}
.ce_form textarea.hide {width: 0 !important; height: 0 !important; display: none !important;}

.upload input {width: 100%; border: none; padding: 8px 20px; font-size: 18px; line-height: 24px; min-height: 30px; border: 1px #000 solid !important; margin: 0 0 10px 0;}
.upload {width: 100%; max-width: 600px; margin: 20px auto 30px auto; background: #eee; padding: 20px; border: 1px #000 solid; box-shadow: 0px 0px 8px rgba(0,0,0,0.25); border-radius: 0px; text-align: center;  }
.upload label {font-size: 18px; margin-top: 10px; margin-bottom: 3px;}

.upload .qq-upload-button:before {}
.ce_form .submit,
.upload .submit {text-align: center; width: 100%; padding: 8px 20px; font-size: 22px; line-height: 28px; min-height: 30px; border: 3px #000 solid !important; border-radius: 0px; margin: 0 0 10px 0; cursor: pointer;}
.ce_form .submit {margin: 50px 0 70px 0; padding: 15px 20px;}

.upload .submit {font-size: 0; border-radius: 25px; }
.upload .submit:before {font-size: 20px; content: "2. Datei verbindlich senden"; cursor: pointer !important;}


.qq-upload-button {text-align: left; width: 100%; padding: 10px 10px !important; font-size: 16px; line-height: 16px; m border: 1px #000 solid !important; border-radius: 0px; margin: 0 0 20px 0; cursor: pointer !important; }

.qq-upload-button input {cursor: pointer !important; border: 5px #000 solid;}

.formupload_1,
.formupload_2 {  border: 1px #000 solid; margin: 10px 0; padding: 10px; background: #fff;}

.fineuploader-container a.delete { display: none !important; margin: 10px 0; text-transform: uppercase; font-size: 13px;}

.ce_form button.btn { right: 0; left: 0; margin: 60px auto 80px auto !important; text-align center;cursor: pointer;}
.ce_form .widget.widget-submit { text-align: center;}

.teilnehmerdaten { font-size: 22px; line-height: 24px; }

 .onlinelink { display: block; text-align: right;}
 .onlinelink a { display: inline-block; right: 0; text-align: right; font-size: 16px; font-weight: bold; box-shadow: 0px 0px 0px rgba(0,0,0,0.25); border-radius: 0px; text-decoration: none !important; -webkit-transition: all 0.3s; transition: all 0.3s; font-size: 0; border: 0px #000 solid; padding: 15px 10px 5px 40px; margin: -10px 0 40px 0 !important; }
 .onlinelink a:before { content: "Online teilnehmen"; font-size: 17px; line-height: 17px;  }
 .onlinelink a:hover { box-shadow: 1px 1px 0px rgba(0,0,0,0.75); }

.onlinelink a {background-repeat: no-repeat; background-position: 0px center; background-size: 35px 35px;}
.nav_schreiben-und-gestalten .onlinelink a {background-image: url(../img/icons/icon-dummy.png); }
.nav_kuenstlerisches-arbeiten .onlinelink a {background-image: url(../img/icons/icon-dummy.png); }


/* ################################################################# SUCHEN UND FINDEN */
/* #################################################################  */
/* #################################################################  */


.acc-item { background: #ffffff;  margin-bottom: 60px; border: 0px solid #000; border-radius: 0px; box-shadow: 0px 0px 0px rgba(0,0,0,0);  }
.acc-item.invalid-item { border: 3px solid red; }
.acc-item,
.gradient.form { padding: 50px 50px 50px 50px; }
h3.acc-title { font-size: 20px; font-weight: bold; margin: 40px 0px 5px 0px;}

.nav_schreiben-und-gestalten h3,
.nav_kuenstlerisches-arbeiten h3,
.nav_suchen-und-finden h3 { position: relative; font-weight: bold; }
.nav_suchen-und-finden h3 {   }

.nav_suchen-und-finden .acc-body,
.nav_suchen-und-finden #main .acc-body p { font-size: 22px !important; margin-bottom: 20px; margin-top: 20px;}
.nav_suchen-und-finden .acc-body h4.frage { font-size: 22px !important; margin: 0 0 12px 0; }
.nav_suchen-und-finden h3.acc-title { top: -10px; font-size: 30px !important;  font-weight: bold; padding-left: 40px; }
.nav_suchen-und-finden h3.acc-title em { top: 66px; font-size: 30px !important;  font-weight: bold; padding-left: 10px; }


/* ################################################################# Schreiben und Gestalten */
/* #################################################################  */
/* #################################################################  */

.nav_schreiben-und-gestalten h3,
.nav_kuenstlerisches-arbeiten h3 {font-size: 22px !important;}

.nav_schreiben-und-gestalten h3 em,
.nav_kuenstlerisches-arbeiten h3 em,
.nav_suchen-und-finden em { font-style: normal; line-height: 16px; display: block; text-align: left; position: relative; left: auto; top: auto; font-size: 30px !important; }

.nav_schreiben-und-gestalten h3 em,
.nav_kuenstlerisches-arbeiten h3 em{ margin: 10px 0 20px 0 !important;}

h4.frage { display: inline-block; margin-bottom: 30px; padding: 7px 0px; border-radius: 0px; font-weight: bold; }

.nav_schreiben-und-gestalten h4 { background: #f0597c; display: inline-block; color: #fff !important; font-size: 18px; padding: 0px 5px; }
.antwort ul   { margin-top: 10px; }
.boxes h3 { font-size: 30px; line-height: 36px; margin-bottom: 15px; margin-top: 10px; }

/* The container */
.container { display: block;position: relative;padding-left: 35px;margin-bottom: 12px;cursor: pointer; -webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;}

/* Hide the browser's default radio button */
.container input {position: absolute; opacity: 0;cursor: pointer;}

/* Create a custom radio button */
.checkmark {position: absolute;top: 0;left: 0;height: 25px;width: 25px; background-color: #fff; border: 2px solid #000; border-radius: 0px;}


/* ################################################################# LOESUNG */
/* #################################################################  */
/* #################################################################  */

.container.checked  { border: 1px solid #ffb900; background-color: #ffb900; }
.container.checked .checkmark { background-color: #ffb900 !important;  padding: 4px; color: #fff; background-image: url('../../media20019/img/checked2019.png');background-image: none !important; background-size: 21px 21px; background-repeat: no-repeat;  background-position: 3px 2px; }
.container.checked  span { color: #fff !important; }

/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark,
.container input:checked ~ .checkmark {background-color: #ffb900 !important; border: 5px #fff solid;  outline: 2px solid #000;}

.loesung .checkmark { position: absolute; top: 0; left: 0; height: 25px; width: 25px; background-color: #fff164; border: 2px solid #000; }

.checkmark.on { position: absolute; top: 0; left: 0; height: 25px; width: 25px; background-color: #009FE3 !important; border: 2px solid #000; display: block; }
.loesung .checkmark:hover { background:  #fff164 !important; }

.loesung .container:hover input ~ .checkmark,
.loesung .container input:checked ~ .checkmark {background-color: #fff164 !important;}
.loesung .container input ~ .checkmark.on,
.loesung .container input:checked ~ .checkmark.on {background-color: #009FE3 !important;}

.loesung .container.on {
background: #000; color: #fff; }
.loesung .container:hover .checkmark { background: #009FE3 !important; color: #fff;  }


/* When the radio button is checked, add a blue background */
.container input:checked ~ .checkmark {background-color: #000;}

/* Create the indicator (the dot/circle - hidden when not checked) */
.checkmark:after,
.checkmark:before {content: "";position: absolute;  display: block; opacity: 0; overflow: hidden; visibility: hidden; }

/* Show the indicator (dot/circle) when checked */
.container input:checked ~ .checkmark:after,
.container input:checked ~ .checkmark:before { opacity: 1; overflow: visible; visibility: none; }

/* Style the indicator (dot/circle) */
.container .checkmark:after  { top: 2px; left: 12px; width: 2px; height: 20px; background: #ffffff; transform: rotate(45deg); }
.container .checkmark:before { top: 2px; left: 12px; width: 2px; height: 20px; background: #ffffff; transform: rotate(-45deg); }

/* form daten */
#daten { margin: 0 20px;  }
#daten label, #daten span { font-size: 18px; margin-top: 10px; margin-bottom: 3px; }
#daten .form-section-title { font-size: 28px; font-weight: bold; text-transform: uppercase; margin-bottom: 20px; margin-top: 20px; }
#daten #searchForm { position: relative; }
#daten .btn-search { font-size: 17px; font-weight: bold; padding: 4px 15px 4px 15px; text-transform: uppercase; line-height: 1; position: absolute; right: 0px; bottom: -35px; cursor: pointer; }
#daten .btn-addschool { width: auto; display: inline-block; color: #fff; background-color: #000; font-weight: bold; padding: 6px 20px 0; text-transform: uppercase; line-height: 1; cursor: pointer; margin: 0 0 0 auto; font-size: 24px; }
#daten a.btn-addschool { color: #fff !important; text-decoration: none; font-size: 19px; }

#daten select { position: relative; z-index: 2; background: #fff; }
#daten input, #daten select { width: 100%; border: none; padding: 8px 20px; font-size: 18px; line-height: 24px; min-height: 30px; border: 1px #000 solid !important; background: #fff;}
#daten .form-section-title, #daten .form-row span, #daten .form-row label { display: block; margin-left: 0px; margin-right: 0px; }
#daten .form-row  { margin-bottom: 40px; }
#daten #btn_manuell, #daten #btn_manuell_search, #daten #addtolist, #daten #btn_clearForm { background: #fff; text-transform: uppercase; font-weight: bold; padding-left: 30px; position: relative; font-size: 17px; }
#daten #btn_manuell:before, #daten #btn_manuell_search:before, #daten #addtolist:before, #daten #btn_clearForm:before { position: absolute; left: 0; top: 5px; width: 6px; height: 13px; content: ''; display: block; background-color: #000; }
#daten #btn_manuell:after, #daten #btn_manuell_search:after, #daten #addtolist:after, #daten #btn_clearForm:after { position: absolute; left: 6px; top: 0; width: 0; height: 0; border-top: 11px solid transparent; border-left: 12px solid #000; border-bottom: 11px solid transparent; content: ''; display: block; }
#daten #btn_clearForm { float: right; }
#daten #addDialog:after { content: ''; display: block; clear: both; }

a#btn_manuell_search   { padding: 2px 5px !important; text-decoration: none; }
a#btn_manuell   { padding: 2px 5px 2px 25px !important; text-decoration: none; }

#daten input.invalid, #daten select.invalid { border: 3px red solid !important; background: rgba(0,0,0,0.1); }

#daten #schule_form .form-row:first-child { margin-bottom: 0; }
#daten .select-wrap { position: relative; cursor: pointer; background: #FFF; }
#daten .select-wrap:before { position: absolute; right: 23px; top: 5px; width: 6px; height: 13px; content: ''; display: block; background-color: #000; transform: rotate(90deg); }
#daten .select-wrap:after { position: absolute; right: 20px; top: 9px; width: 0; height: 0; border-top: 11px solid transparent; border-left: 12px solid #000; border-bottom: 11px solid transparent; content: ''; display: block; transform: rotate(90deg); }
#daten select { text-transform: uppercase; -moz-appearance: none; -webkit-appearance: none; appearance: none; border: none; }
#daten #results { margin-bottom: 20px; max-height: 495px; overflow-y: scroll; width: calc(100% + 40px); margin-left: 0px; margin-right: 0px; padding: 0 5px; font-size: 14px; display: none; }
#daten .select-wrap select { cursor: pointer; }
#daten #results a { text-decoration: underline; }
#daten #results table { border-collapse: separate; border-spacing: 0 5px; }
#daten input#kopie_mail { margin-top: 10px; }

.gruppe.inside { display: block; padding-left: 20px; margin-bottom: 30px; border: 0px #000 solid; border-left-width: 3px;  }

#daten a.selectschool { background: #fff; text-decoration: none !important; display: inline-block !important; padding: 2px 6px !important;border: 1px #000 solid; }

#submitForm { background: transparent; border: 0; cursor: pointer; }
#submitForm span { display: block; font-weight: bold; text-transform: uppercase; position: relative; padding-right: 40px; margin-left: 25%; width: 50%; }
#submitForm span:before { position: absolute; right: 12px; top: 50%; transform: translate(0, -50%); width: 6px; height: 13px; content: ''; display: block; background-color: #ff6766; }
#submitForm span:after { position: absolute; right: 0; top: 50%; transform: translate(0, -50%); width: 0; height: 0; border-top: 11px solid transparent; border-left: 12px solid #ff6766; border-bottom: 11px solid transparent; content: ''; display: block; }
#submitForm .errorMessage { display: inline-block; text-align: center; font-weight: bold; padding: 10px 20px; position: absolute; top: -240%; left: 50%; transform: translate(-50%, 0); margin-bottom: 20px;  }
#submitForm .errorMessage:after { content: ''; position: absolute; bottom: -12px; border-top: 12px solid #a1dde2; border-left: 11px solid transparent; border-right: 11px solid transparent; left: 50%; transform: translate(-50%, 0); }

.fehlermeldung { position: relative; padding: 10px; font-size: 22px; line-height: 30px; text-align: center; display: block; clear: both; max-width: 450px;  margin: 0 auto 35px auto; background: red; color: #fff; }

.fehlermeldung:nth-child(n+2) { display: none; }

.btn.btn-red  { background: #fff; margin-top: 30px; font-size: 26px; line-height: 32px; padding: 10px 25px; color: #000; border-radius: 25px; border: 3px #000 solid; }
button.btn.btn-red,
.btn.btn-red { background: #fff !important; padding: 10px; border-radius: 0px; border: 2px #000 solid !important; text-align: center !important; }


.ce_text.switch {
display: inline-block;
margin: 0 auto;
max-width: 500px;
background: #dff1fd;
text-align: center;
}


#main .ce_text ul.social { padding: 0 !important; margin: 0;  }
#main .ce_text ul.social li  { list-style-type: none !important; margin: 0 0 8px 0; padding: 0 !important;}
#main .ce_text ul.social li a { padding: 0 0 0 28px !important;  position: relative; }
#main .ce_text ul.social img { margin: 0 8px 0 0; position: absolute; left: -0px; bottom: 1px; }



/* tables */
table td { padding-right: 100px; vertical-align: bottom; padding-bottom: 40px; }
#results table td { padding-right: 20px; vertical-align: bottom; padding-bottom: 10px; }
table td:last-child { padding-right: 0; }
table td p, table td h2 { margin-bottom: 0; }

/* slider */
.mod_rocksolid_slider { margin: 0 auto; margin-bottom: 60px; position: relative; max-width: 100% !important; }
.rsts-skin-default .rsts-prev { left: 10px; bottom: auto; top: 50%; transform: translate(0,-50%); padding-left: 18px; background-image: none; border: none; box-shadow: none;  }
.rsts-skin-default .rsts-prev:hover { background-color: transparent; }
.rsts-skin-default .rsts-prev:after { position: absolute; left: 0; top: 50%; transform: translate(0, -50%); width: 0; height: 0; border-top: 11px solid transparent; border-right: 12px solid #009FE3; border-bottom: 11px solid transparent; content: ''; display: block; }

.rsts-skin-default .rsts-next { right: 10px; bottom: auto; top: 50%; transform: translate(0,-50%); padding-right: 18px; background-image: none; border: none; box-shadow: none; }
.rsts-skin-default .rsts-next:hover { background-color: transparent; }
.rsts-skin-default .rsts-next:after { position: absolute; right: 0; top: 50%; transform: translate(0, -50%); width: 0; height: 0; border-top: 11px solid transparent; border-left: 12px solid #009FE3; border-bottom: 11px solid transparent; content: ''; display: block; }

.rsts-skin-default .rsts-nav-bullets { right: 50px; bottom: 10px; }
.rsts-skin-default .rsts-nav-bullets a { box-shadow: none; background-color: transparent; border: 1px solid #ff6766; height: 15px; width: 15px; margin: 0 6px; }
.rsts-skin-default .rsts-nav-bullets a:hover, .rsts-skin-default .rsts-nav-bullets a.active { background-color: #009FE3; box-shadow: none; }

/* footer */
#footer { margin-top: -105px;}

#footerNav {text-transform: uppercase;}
#footerNav > ul { text-align: center; }
#footerNav > ul > li { display: inline-block; margin: 0 25px; }
#footerNav > ul > li:last-child, #footerNav > ul > li.last { position: absolute; right: 0; }
#footerNav > ul > li:last-child > a, #footerNav > ul > li.last > a { height: 20px; width: 25px; background-repeat: no-repeat; background-position: center; font-size: 0; line-height: 0; color: transparent;  }
#footerNav > ul > li > a  { padding: 30px 0; display: inline-block; }
#footerNav > ul > li:nth-child(4) > a {border: 0px #000 solid; background-image: url("../../media/img/basics/insta.png"); background-repeat: no-repeat; background-position: left center; padding-left: 25px; background-size: 18px 18px; }


#footerTop { padding: 40px 0 70px 0; border: 0px #000 solid !important; border-top-width: 2px  !important; border-bottom-width: 2px  !important;}
#footerTop > .inner-1100 { max-width: 730px; }
#footerTop h2 { color: #000; font-weight: bold; text-transform: uppercase; margin-bottom: 20px; margin-top: 20px; text-align: center; }
#footerTop h3 { color: #000; text-transform: uppercase; font-size: 16px; text-align: center; font-weight: bold; margin: 20px auto 40px auto;  width: 100%;}
#footerTop .ce_image.block figure { text-align: center; }
#footerBottom { border-top: 0px solid #fff; border-bottom: 2px #000 solid; padding: 50px 0; text-align: center; }
#footerBottom img { max-width: 350px; }
#footerBottom #wappen-img .image_container { padding-top: 0px; text-align: center; }
#footerBottom #wappen-img .image_container img { max-height: 100px; width: auto; }
#footerBottom #gfs-img .image_container { padding-top: 10px; }
#footerBottom #hdh-img .image_container { padding-top: 20px; padding-left: 30px;  }
#footerBottom #gfs-img .image_container,
#footerBottom #hdh-img .image_container { text-align: center;  }
#footerBottom #bw-img.sc3 { width: 36%; }
#footerBottom #gfs-img.sc3, #footerBottom #hdh-img.sc3 { width: 30%; }

/*------------------------------------------------------------------------------------------------------------*/
/* mobicon */
.mobicon { position: absolute; display: none; cursor: pointer; z-index: 99; top: 15px; right: 28px; width: 40px; height: 30px;}
.mobicon span { position: absolute; width: 50px; height: 4px; background-color: #000;  }
.mobicon span.first { top: 0; }
.mobicon span.sec { top: 12px; }
.mobicon span.third { top: 24px; }
.mobicon.open span.sec { opacity:0; }
.mobicon.open span.first { -webkit-transform: rotate(45deg); transform:rotate(45deg); margin-top: 12px; }
.mobicon.open span.third { -webkit-transform: rotate(-45deg); transform: rotate(-45deg); margin-top: -12px; }


@media ( max-width: 1330px ) {
	#naviMain.fixed > ul > li:nth-child(2) { }
	#logoMob.fixed { transform: translate(-460px,0); }
	#naviMain.fixed > ul > li { margin: 0 8px; font-size: 20px; }
}

@media ( max-width: 1290px ) {
	#naviMain > ul > li { margin: 0 15px; }
}

@media ( max-width: 1280px ) {
	.tabOut .inner-1100 > .tabnavi > .tabbutton { margin-left: 0 }
}

@media ( max-width: 1240px ) {
	.inner-1190 { margin-left: 15px; margin-right: 15px; }
}

@media ( max-width: 1200px ) {
	#imgNav { transform: translate(400px,0); }
}


@media ( max-width: 1150px ) {
	.floating-icon { display: none; }
}


@media ( max-width: 930px ) {
    .mod_navigation { background: #fff !important; }
 	#header { min-height: auto; }
	#naviMain { position: relative; background-color: #fff; min-height: 85px; font-size: 24px; font-weight: bold; }
	#naviMain > ul, #logoNorm { display: none; }
  	.mobicon { display: block; margin-bottom: 23px; }
	#naviMain > ul { margin-top: 0; padding: 90px 0 0 15%; }
	#naviMain > ul > li { display: block; float: none; text-align: left; margin: 0; padding: 0px 0 0px 0%; border-bottom: 0px solid #FFF; }
	#naviMain > ul > li.submenu { padding: 0; border: none; }
	#naviMain > ul > li:nth-child(2) { padding-top: 0px; border-top: 0px solid #FFF; }
	#naviMain > ul > li:last-child { border-bottom: none; }
	#naviMain > ul > li.submenu {margin: -10px 0 !important; padding: 0 !important;}
	#naviMain > ul > li.submenu > a, #naviMain > ul > li.submenu > strong { display: none; }
	#naviMain > ul > li > a, #naviMain > ul > li > strong { text-transform: none; }
	#naviMain > ul > li > ul { position: static; margin-bottom: 0; background-color: transparent; opacity: 1; height: auto; }
	#naviMain > ul > li > ul > li { display: block; background: none; text-indent: 0; height: auto!important; width: auto!important; padding: 0px 0 0px 0%; border-bottom: 0px solid #FFF; }
	#naviMain > ul > li > ul > li > a { height: auto !important; width: auto !important; }
	.mod_navigation li > a,
    .mod_navigation li > strong { width: auto; height: auto; }
	#naviMain > ul > li > ul > li:last-child { padding-bottom: 10px; }
	#naviMain > ul > li > ul > li > a,
    #naviMain > ul > li > ul > li.active > strong { padding: 0; display: inline-block; }
	#naviMain > ul > li > ul > li > ul { position: static; background-color: transparent; margin-bottom: 0; }
	#naviMain > ul > li > ul > li > ul > li:last-child { padding-bottom: 0; }
	#naviMain > ul > li > ul > li > ul > li > a, #naviMain > ul > li > ul > li > ul > li.active > strong { padding: 0px 0px; display: inline-block; }

    .mod_navigation ul li a:before{ content: "-> ";  }
    .mod_navigation ul li a { display: inline-block; padding: 6px 8px !important; border-radius: 10px; }
    .mod_navigation ul li a:hover,
    .mod_navigation ul li.active a { background: #fff9d5 !important;  border-radius: 10px;}



.mod_navigation ul li.nav_suchen-und-finden a:hover,
.mod_navigation ul li.nav_suchen-und-finden.active a   { background: #d5c9b6 !important;  border-radius: 10px;}
.mod_navigation ul li.nav_schreiben-und-gestalten a:hover,
.mod_navigation ul li.nav_schreiben-und-gestalten.active a   { background: #8ec89a !important; border-radius: 10px;}
.mod_navigation ul li.nav_kuenstlerisches-arbeiten a:hover,
.mod_navigation ul li.nav_kuenstlerisches-arbeiten.active  a  { background: #83d0f5 !important;  border-radius: 10px;}


	#header .linkMainpage { display: block; }
	#naviMain:after { content: ''; float: none; clear: both; display: block; }

	#naviMain.fixed > ul > li.submenu { padding: 0; border: none; }
	#naviMain.fixed { position: static; }
	#logoMob.fixed { display: none; }
	#naviMain.fixed > ul > li { padding: 10px 0 10px 0%; font-size: 18px; }
	#naviMain > ul li > a, #naviMain > ul li > strong { font-weight: bold; color: #000; }
	#naviMain .datenschutz { display: block; }
    #naviMain.open {padding-bottom: 90px;}

.hdhlogo {margin-top: -100px; }
.inner-700, .inner-800, .inner-1100, .inner-1190, .inner-small { padding-left: 20px; padding-right: 20px; }
h1 { font-size: 35px; line-height: 1.0; }
h2 { font-size: 25px; line-height: 1.2; }
#banner {  display: none !important; }
#bannermobil {  display: block !important; }
#main p, #main ul { font-size: 17px;line-height: 22px; }
h3.acc-title { font-size: 20px; margin: 40px 0px 5px 0px;}
.nav_suchen-und-finden .acc-body,
.nav_suchen-und-finden #main .acc-body p,
.boxes p { font-size: 19px !important; line-height: 24px;}
.nav_suchen-und-finden .acc-body h4.frage { font-size: 20px !important; margin: 0 0 12px 0; }
.nav_suchen-und-finden h3.acc-title em { top: 35px; left: -20px; font-size: 45px !important; }
.acc-item {padding: 25px;}
.ce_accordion {padding: 15px;}

#footerNav > ul { margin-top: 20px; text-align: center; font-size: 16px; }
#footerNav > ul > li { display: block; margin: 0 0px; }
#footerNav > ul > li a { padding: 10px 0px; }

ul.vierspaltig li:nth-child(2n-1):before { content: ""; display: block; width: 50px; height: 50px; top: -88px; left: 0px; right: -50%; margin: 0 auto; background: #ccc; position: absolute; z-index: 999999;    background: url(../../media/img/basics/sprech.png?1) no-repeat top left; transform: scaleX(-1); background-size: 100% 100%;  border: 0px #000 solid; -webkit-transition: all 0.5s; transition: all 0.5s;}
}

@media ( max-width: 910px ) {
	#naviVisu, #imgNav { display: none; }
}

@media ( max-width: 730px ) {
	#footerTop .sc3 { position: relative; padding-bottom: 60px; }
	#footerTop .sc3:before { position: absolute; left: 50%; bottom: 12px; height: 13px; width: 6px; transform: translate(-50%,0) rotate(90deg); content: ''; display: block; background-color: #FFF; }
	#footerTop .sc3:after { position: absolute; right: calc(50% - 12px); bottom: 0; width: 0; height: 0; border-left: 12px solid #FFF; border-top: 11px solid transparent; border-bottom: 11px solid transparent; content: ''; display: block; transform: translate(-50%,0) rotate(90deg); }
	#footerTop .sc3-last:before, #footerTop .sc3-last:after { display: none; }
	#footerTop .sc3-last { padding-bottom: 0; }
	.sc3,.sc4 { width: 100%; margin-bottom: 40px; text-align:center; }
	.sc3-last, .sc4-last { margin-bottom: 0; }

	#footerBottom { border: none; }
	#footerBottom #gfs-img.sc3, #footerBottom #bw-img.sc3, #footerBottom #hdh-img.sc3,
	#footerBottom #gfs-img.sc4, #footerBottom #bw-img.sc4, #footerBottom #hdh-img.sc4 { width: 100%; text-align: center; }
	#footerBottom .sc3 figure,
	#footerBottom .sc4 figure { display: inline-block;  }
	#footerBottom .sc3 figure img,
	#footerBottom .sc4 figure img { width: 70%; }
	#footerBottom .sc3,
    #footerBottom .sc4 { margin-bottom: 25px; }
	#footerBottom .sc3-last,
    #footerBottom .sc4-last { margin-bottom: 0; }
	#footerBottom #hdh-img .image_container { padding-top: 0;  padding-left: 0px; }
    #footerBottom .ce_image#bw-img { display: inline-block; margin: 20px 0px 50px 0px !important;     }

.tabOut .inner-1100 > .tabnavi > .tabbutton {  display: block; }
}