/* === INDEX === */
#portal_index { left:0; margin:0; margin-bottom:5px; padding:0; /*background-color:rgba(0,0,0,0.025);*/ }
#portal_index > div { display:block; text-align:right; font-size:15px; }


#portal_index > div > div { padding:2px 0; margin-left:5px; text-align:right; display:inline-block; width:40%; }
#portal_index > div > div > a { font-family:Arial; color:#888; font-weight:bold; text-decoration:none;  }
#portal_index > div > div:hover  > a  { color:#333; }

#portal_index > div > div > a:after { content: "\2935"; font-size:90%;  color:#EEE; background-color:#888; padding:1px 5px; }
#portal_index > div > div:hover > a:after { background-color:#000; }


/* === CONTAINER === */


div.portal_container { margin-top:3px; display:block; font-size:12px; }

div.portal_container { max-width:634px; /* keine tolle lösung, muss aber sein*/ }


div.portal_container > div { display:block; }

div.portal_container > div.portal_container_boxes { margin-left:-4px; display:block; }

div.portal_container > div.portal_container_boxes > div { display:inline-block; vertical-align:top;  /*ENTFERNT 26.6.2017 overflow:hidden; */ padding-top:4px; padding-left:4px; box-sizing: border-box; }
div.portal_container > div.portal_container_boxes > div { width:100%; }
div.portal_container > div.portal_container_boxes > div[data-nativecols='2'] { width:50%; }

div.portal_container > div.portal_container_boxes[data-align='hor'] { overflow-x:scroll; white-space: nowrap; margin-left:0; margin-top:3px; }
div.portal_container > div.portal_container_boxes[data-align='hor'] > div { margin-left:6px; padding:0; }
div.portal_container > div.portal_container_boxes[data-align='hor'] > div:first-child { margin-left:0; }

/* Reset, wenn weniger als 500 pixel Platz (nur Mobil) */
@media only screen and (max-width:600px){
         body[data-mobil='1'] div.portal_container > div.portal_container_boxes > div[data-nativecols='2'] { width:100%; }
}


div.portal_container > div.portal_container_boxes > div { }


/* CONTAINER LABEL */
                                                                                                  /*247,101,3 background-color:rgba(0,0,0,0.1);*/
div.portal_container > div.portal_intro { margin-top:10px; height:18px; text-align:center; font-size:15px; }
div.portal_container > div.portal_intro > div { display:block; position:relative; top:8px; background-color:#F76503; height:2px; }
div.portal_container > div.portal_intro > h2 { display:inline; position:relative; top:-2px; background-color:#FFF; padding:0 20px; font-family:Arial; color:#555; font-weight:bold; text-transform:uppercase; }
div.portal_container > div.portal_intro > h2  > a { color:#555; }
/* ersten Container ohne Margin */
div.portal_container:first-child > div:portal_intro { margin-top:0;  }


div.portal_container > div.portal_outro { text-align:center; padding:0; font-size:13px; }
div.portal_container > div.portal_outro > a { display:inline-block; width:70%; margin-top:0; margin-bottom:10px; background-color:#F5F5F5; color:#333; padding:3px 20px 2px; border-bottom-left-radius:3px; border-bottom-right-radius:3px; border:#DDD 1px solid; border-top:none; transition:background-color 200ms; text-decoration:none; }
div.portal_container > div.portal_outro > a:hover { background-color:#EEE; color:#555; border:#BBB 1px solid; border-top:none; }


div.portalBoxArtikelHor { padding:0; }
div.portalBoxArtikelHor > a { background-color:#EEE; text-decoration:none; display:block; position:relative; }
div.portalBoxArtikelHor > a > img  { display:block; margin:0; }
div.portalBoxArtikelHor > a span[data-isUpdate] { position:absolute; top:1px; left:1px; }

div.portalBoxArtikelHor > a > h3  { margin:0; padding:3px; color:#333; font-weight:bold; white-space:normal; text-transform:uppercase; font-size:11px;
                                    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; height:39px; overflow:hidden;
                                    font-family:"Segoe UI"; /*29.10.18*/ }

div.portalBoxArtikelHor > a:hover > h3  { text-decoration:underline; }



/* ARTIKEL - BOXEN  */

div.portalBoxArtikel { border-bottom:#DDD 1px solid; padding:3px 0; text-align:left; }


div.portalBoxArtikel > a  { text-decoration:none; display:block; }
div.portalBoxArtikel > a > h4  { margin:0; margin-bottom:2px; color:#555; font-size:10px; line-height:11px; height:11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-transform:uppercase; }
div.portalBoxArtikel > a > h3  { margin:0; margin-bottom:2px;  color:#000; font-size:15px; font-family:Arial;  font-weight:bold;  }

div.portalBoxArtikel > a > img { float:right; margin-top:-4px;  margin-left:5px;  }
div.portalBoxArtikel > a > p { color:#000; margin-top:3px; }
div.portalBoxArtikel > a > p > span { margin-left:5px; color:#F76503;  }

div.portalBoxArtikel > a:hover > h3 { text-decoration:underline; }
div.portalBoxArtikel > a:hover > p > span { color:#F76503; text-decoration:underline; }


div.portal_container_boxes span[data-isUpdate] { margin-left:3px; font-size:80%; padding:2px 6px; border-radius:1px; background-color:#F76503; color:#FFF; white-space: nowrap; }
div.portal_container_boxes a:hover > h3 > span[data-isUpdate] { text-decoration:none; }

div.portalBoxArtikel:hover  {  background-image: linear-gradient(90deg, #EEE, #FFF); box-shadow: -4px 0 2px -2px #F5F5F5 }


div.portalBoxBild {  }
div.portalBoxBild img { display:block; width:100%; }

/* ===== USERFUNKTIONEN */

/* ===== Bingo ==== */

#DCB_TEASER { background-color:#EEE; box-shadow:inset 0 0 0 1px rgba(0,0,0,0.1); background-repeat: no-repeat;  font-size:11px;  }
#DCB_TEASER { background-size:950px; /* (2 Pixel mehr, 50% nativ */}
#DCB_TEASER { background-position:right -300px top; }
#DCB_TEASER * { box-sizing: border-box; }
#DCB_TEASER[add-style="black"] { color:#FFF;  }

#DCB_TEASER p { margin-bottom:0; margin-top:2px; }
#DCB_TEASER p:first-child { margin-top:0; }


#DCB_TEASER > div { vertical-align:top; padding:5px; }
#DCB_TEASER > div > div { padding:0;  }
#DCB_T1_PLATZ { position:relative; float:right; display:inline-block; width:345px; /* Teaser-Weite ohne Li-Rand (12/2016) */ }
#DCB_T1_PLATZ > span { display:none; position:absolute; right:10px; top:10px; background-color:rgba(247,101,3,0.8); font-family:Segoe UI; font-size:10px; font-weight:bold; text-transform:uppercase; padding:6px 10px; color:#fff; border-radius:1px; letter-spacing:1px; text-shadow:2px 2px 2px rgba(0,0,0,0.07); }
#DCB_T1_PLATZ > span:hover { background-color:rgba(247,101,3,1); }
#DCB_T1_PLATZ:hover > span { display:block; }

#DCB_T2_MAIN { display:inline-block; width: calc(100% - 345px); /* Teaser-Weite ohne Li-Rand (12/2016) */ }
#DCB_T3_INFO { font-size:11px; padding-top:5px !important; clear:both; overflow:hidden;}

#DCB_T2_MAIN > div > p:first-of-type { margin-top:20px; }
#DCB_T2_MAIN > div > p { font-size:13px; }

#DCB_TEASER_BUTTON { text-align:center; height:43px; padding:4px !important; width:100%;  margin:0;  font-size:11px !important; BORDER:#F76503 1px solid !important; color:#FFF !important; BACKGROUND-COLOR:#F76503 !important; border-top-right-radius: 0; border-bottom-right-radius: 0;}

#DCB_TEASER_BUTTON:hover { background-color:#FBB281 !important; color:#555 !important; }

#DCB_TEASER_BUTTON > * { margin-bottom:0; margin-top:10px; }
#DCB_TEASER_BUTTON > *:first-child { margin-top:0; }

#DCB_TEASER_BUTTON > h4 { font-family:Arial; font-size:16px; font-weight:bold; }

#DCB_TEASER_STAT { display:block; margin:0; margin-left:-4px; padding-left:4px; margin-top:5px; background-color:rgba(247,101,3,0.1);  }
#DCB_TEASER_STAT { border:rgba(247,101,3,0.3) 1px solid; border-left: none; border-right: none; position:relative; }
/*#DCB_TEASER_STAT > aside { position:absolute; width:100%; height:100%; margin-left:-4px;}*/
#DCB_TEASER_STAT > div { display:flex; font-size:11px; line-height:16px; color:rgba(0,0,0,0.70);  }


#DCB_TEASER_STAT > div > div {  padding:0; padding-right:2px; }
#DCB_TEASER_STAT > div > div:first-child { flex:1; }
#DCB_TEASER_STAT > div > div:last-child { width:70px; text-align:right; color:rgba(0,0,0,0.90); }



#DCB_TEASER_WARTET { background-color:#FDD8C0; color:#333; padding:15px 5px; }
#DCB_TEASER_WARTET > p { margin:0;  }
#DCB_TEASER_WARTET > p:first-child { margin-bottom:5px; font-size:16px; font-family:Arial; font-weight:normal; }
#DCB_TEASER_WARTET > p > a { color:#555; text-decoration:underline; }


/* Anpassungen für Mobil */
/* Nur bei Mobil, größenunabhängig, weil das Gerüst ja eine fixe Größe hat */

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

         body[data-mobil='1'] #DCB_TEASER { background-position:center top; /*margin-left:-5px; margin-right:-5px; box-shadow:none; */ }
         body[data-mobil='1'] #DCB_TEASER > * { display:block; float:none; width:100%; max-width:340px; /*Innere Weite vom Teaserbild*/  margin:0 auto; }
         body[data-mobil='1'] #DCB_TEASER > div { padding-right:0; padding-left:0; }
         body[data-mobil='1'] #DCB_T1_PLATZ { max-width:100%; }

         body[data-mobil='1'] #DCB_TEASER_STAT { margin-left:0; padding-left:2px; border:rgba(247,101,3,0.3) 1px solid; }
         /*body[data-mobil='1'] #DCB_TEASER_STAT { margin-right:-4px; padding-right:4px; }*/

}



/* ==== Altes Bingo ... ==== */

/*
.DCB_ZAHLEN { margin:5px 0; }

.bingo_button { line-height:1; height:43px; padding:4px !important; width:100%;  margin:0;  font-size:11px !important; BORDER:#F76503 1px solid !important; color:#FFF !important; BACKGROUND-COLOR:#F76503 !important; }

.bingo_button:hover { background-color:#FBB281 !important; color:#555 !important; }

.bingo_button p.isGross { font-family:Arial; font-size:15px; font-weight:bold;   }

.bingo_button + p { margin:0; margin-top:10px; text-align:center; font-size:13px; }
.bingo_button + p + p { margin-top:5px; text-align:center; font-size:13px;}

.bingo_button p:first-child { margin-top:0;  }
.bingo_button p:last-child { margin-bottom:0;  }

.bingo_stat { display:block margin:0; margin-top:5px; border:rgba(0,0,0,0.2) 1px solid; border-radius: 2px; background-color:rgba(255,255,255,0.3); line-height:16px; }
.bingo_stat > div > div { display:inline-block;  padding:0 2px; }
.bingo_stat > div > div:first-child { }
.bingo_stat > div > div:last-child { width:70px; float:right; text-align:right; }

.bingo_wartet { background-color:#EEE; color:#555; padding:10px 5px; }
.bingo_wartet > p { margin:0;  }
.bingo_wartet > p:first-child { margin-bottom:5px; font-size:20px; font-family:Arial; font-weight:normal; }
.bingo_wartet > p > a { color:#555; text-decoration:underline; }
*/