/* Template: diw2_styles_diw_css */

/* Hier werden zusätzliche CSSe zu den Saint Elmo's CSSen für die DIW-Styles eingegeben */



/* CTA-Button in der Navigation ermöglichen, gehighlightet zu werden */
.navbar .nav-item .dropdown-menu.dropdown_publications .bottom-row .btn.active {
	color: #dfdc09;
	border-color: #dfdc09;
}


/* Bei einem Textblock, der neben einem Kasten steht, gab es Aufzählungen im DIW-grün, soll aber dunkelgrau sein */
.text_block .text_with_contact ul li {
    color: #172624;
}

.contacts p {
    margin-bottom: 1rem;
}

/* Bei einer Linkliste sind die span-Tags nicht ausgegraut */
.text_external_links .download_module_list span {
  color: #71777d;
}

/* Irgendwie greift der gelbe Hintergrund nicht beim DIW-Wizard in der Mobilansicht. Daher hier korrigiert und sogar mit important. */
.wizard.accordion .card.active {
	background-color: #dfdc09 !important;
}

/* Auch beim Social-Media-Hub soll der Play-Pfeil gut zu sehen sein und beim Hovern nioht mehr */
.social_media .video_btn .v_btn {
	opacity: 1;
}
.social_media .video_btn:hover .v_btn {
    opacity: 0;
}

/* Das Kurzportrait soll noch ein margin bottom bekommen */
.short_profile_text {
	margin-bottom: 1rem;
}

/* Für Linklistenmodul */
section.text_external_links {
	padding: 50px 0;
}
.text_external_links h2 {
	font-family: Oswald-Bold;
	line-height: 23px;
	letter-spacing: 1px;color: #464a4a;
	font-size: 26px;
	text-transform: uppercase;
	margin-bottom: 70px;position: relative;
}
.text_external_links h2::after {
	content: "";
	background: #dfdc09;
	width: 100px;
	height: 3px;
	position: absolute;
	bottom: -17px;
	left: 50%;
	margin-left: -50px;
}

/* Auch bei Freien Teasern, Social-Media-Modul und Veranstaltungsmodul soll das Copyright an der rechten Seite des Bildes angezeigt werden, also wie bei der Bühne. */
.copyright_teaser {
	position: absolute;
	background-color: rgba(0,0,0,.2);
	color: #fff;
	font-family: Lato-Regular;
	font-size: 11px;
	padding: 3px 15px;
	-webkit-transform: translate(50%,50%) rotate(-90deg) translate(50%,-50%);
	transform: translate(50%,50%) rotate(-90deg) translate(50%,-50%);
	z-index: 43;
}
@media (max-width:767px) {
	.copyright_teaser {
		right: 15px;
		bottom: 42px;
	}
}
@media (min-width:768px) and (max-width:991px) {
	.copyright_teaser {
		right: 63px;
		bottom: 42px;
	}
}
@media (min-width:992px) and (max-width:1200px) {
	.copyright_teaser {
		right: 15px;
		bottom: 0;
	}
}
@media (min-width:1201px) and (max-width:1399px) {
	.copyright_teaser {
		right: -70px;
		bottom: 0;
	}
}
@media (min-width:1400px) {
	.copyright_teaser {
		right: 0;
		bottom: 0;
	}
}

.copyright_social_media_modul {
	position: absolute;
	background-color: rgba(0,0,0,.2);
	color: #fff;
	font-family: Lato-Regular;
	font-size: 11px;
	padding: 3px 15px;
	-webkit-transform: translate(50%,50%) rotate(-90deg) translate(50%,-50%);
	transform: translate(50%,50%) rotate(-90deg) translate(50%,-50%);
	z-index: 43;
}
@media (max-width:767px) {
	.copyright_social_media_modul {
		right: 15px;
		bottom: 30px;
	}
}
@media (min-width:768px) and (max-width:991px) {
	.copyright_social_media_modul {
		right: 16px;
		bottom: 30px;
	}
}
@media (min-width:992px) and (max-width:1200px) {
	.copyright_social_media_modul {
		right: 15px;
		bottom: 0;
	}
}
@media (min-width:1201px) and (max-width:1399px) {
	.copyright_social_media_modul {
		right: 16px;
		bottom: 1px;
	}
}
@media (min-width:1400px) {
	.copyright_social_media_modul {
		right: 16px;
		bottom: 0;
	}
}

.copyright_veranstaltungsmodul {
	position: absolute;
	background-color: rgba(0,0,0,.2);
	color: #fff;
	font-family: Lato-Regular;
	font-size: 11px;
	padding: 3px 15px;
	-webkit-transform: translate(50%,50%) rotate(-90deg) translate(50%,-50%);
	transform: translate(50%,50%) rotate(-90deg) translate(50%,-50%);
	z-index: 43;
	right: 0;
	bottom: 0;
}

/* Die Chevrons der Bühne waren nicht klickbar, daher Erhöhung des z-Indexes von 1 auf 10 */
.slider .carousel-control-next, .slider .carousel-control-prev {
	z-index: 10;
}

/* Footer-CSSe */
@media (min-width:992px) and (max-width:1200px) {
	footer .top-row .social_icons li {
		width: 50px;
	}
}
@media (min-width:1201px) {
	footer .top-row .social_icons li {
		width: 68px;
	}
}
@media (min-width:1400px) {
	footer .copyright.order-first {
		max-width: 36%;
		text-align: left!important
	}
	footer .external_link {
		max-width: 34%;
	}
	footer .impressum {
		max-width: 30%;
	}
}


/* Nachjustierungen fürs Drucken bzw. die PDF-Erzeugung */
@media print {
	/* Merken-Button raus */
    .mark_list {
        display: none;
    }
	
	/* Teilen-Button raus */
	.sharing_btn {
        display: none;
    }
	
	/* Vom Menü nur das DIW-Logo einblenden */
    .navbar {
        display: block;
    }
	#navbarSupportedContent, #navbarSupportedContent2, .navbar-toggler .button-search {
		display: none;
	}
	.navbar-brand {
		position: absolute;
		top: 20px;
		left: 15px;
		text-decoration: none !important;
	}
	
	/* "Direkt zum Inhalt" raus */
	.skiplinks {
		display: none;
	}
}


/* Bei Themen die Textfarbe bei hohem Kontrast auf anthrazit stellen */
.high-contrast .topics_teaser .topics_teaser_block h3 {
	color: #464a4a;
}


/* Bei Interaktiven Grafiken - iFrames für kleine Displaygrößen nur die alternative Grafik ausspielen */
@media (max-width:1199px) {
	.graphic-container-handy, .disclaimer-graphic-handy {
		display: none;
	}
	.alt-graphic {
		display: block;
	}
}
@media (min-width:1200px) {
	.alt-graphic {
		display: none;
	}
}


/* Für das Kachel-Modul */
section.tiles a:hover {
	opacity: 0.7;
	transition: 0.2s;
}
section.tiles li {
  -ms-flex: 0 0 33.333333%;
  flex: 0 0 33.333333%;
  max-width: 33.333333%;
  list-style-type: none;
}
@media (min-width: 1025px) {
	section.tiles .card {
		margin-bottom: 3px;
	}
}


/* Bei Tabellen im HTML-Wochenbericht soll es die Möglichkeit geben, den Text hervorzuheben, um prognoszierte Zahlen zu markieren */
.text_block .table tbody td.highlight {
	color: #00a799;
}