/*  Falls diese Datei über einen Style-Switcher oder ohne Medienangabe
	als  <link rel="stylesheet" media="screen,print" ...> eingebunden wird, wird der
	folgende Block auch für die Bildschirmanzeige der Druckansicht verwendet.
	Das kann man zum Debugging und als Leseansicht nutzen, aber deswegen sind
	einige reduntante Angaben erforderlich.
	
	Weiter unten im @media print-Block wird dann die Ansicht erzeugt,
	die man angezeigt bekommt, wenn im Browser-Menü "Druckansicht" 
	gewählt wird oder tatsächlich auf Papier gedruckt wird.
	In dieser Ansicht sind einige Schriftgrößen kleiner als am 
	Bildschirm eingestellt und einige Farben verändert.
	
	B. Luessem 26.11.2018
	B. Luessem 15.03.2024 */
	
:root {
	--schrift: #000;
	--hintergrund: #fff;
	--hintergrundzwei: #eee;
	--schrifteins: #000;
	--full: 100% !important;
	--outer: 760px !important;
	--inner: 730px !important;
}

/* ausgeblendete Elemente */
header,
footer,
#ariadneBase,
#hauptnavigation,
#main-navigation,
#service-navigation,
#ws-detail-modal,
#cookie-modal,
.modal-backdrop,
.modal.fade.noread.show,
.slider-controls,
.brotkrume,
.margin-nl,
.newsletter-zwei,
.row.gridcontainer-umfrage,
.textslider:is(.eins,.zwei,.drei),
.bg-logos,
.hoverteaser .showing .hovertip,
.anchor-link,
.webservice-box,
.ap-searchsortcol,
.wssortbox.maincol,
.list-append-position,
.akkordeon.result-filter,
.ws-detail-nav,
.ws-detail .akkordeon.tab .tab-row,
.invisible,
.offscreen,
.sr-only,
.ws-results #filter,
.ws-results .ws-list-pagination,
.ws-results .ws-list .online-pub {
	display: none !important;
}

/* Angaben für ALLE Elemente zurücksetzen */
* {
	background: none;
	background-color: var(--hintergrund);
	color: var(--schrift);
	font-family: Cambria, Georgia, serif;
	transform: none;
	opacity: 1 !important;
	box-shadow: none !important;
	/* filter: grayscale(1) !important; */
}

/* BEGINN Rows, Cols + Container */
main, /* #hauptbereich, */ /* problematisch für Bild-Slider bei @media print */
main:is(.homepage,.followingpage) {
	min-width: unset !important;
	width: var(--full);
	max-width: var(--outer);
	padding-left: 0 !important;
	padding-right: 0 !important;
	margin: 0 auto !important;
	display: block !important;
}

.container-fluid,
.container {
	min-width: unset !important;
	width: var(--full);
	max-width: var(--outer);
	/* Bootstrap: */
	/* padding-left: 15px;
	padding-right: 15px;
	margin-left: auto;
	margin-right: auto; */
}

.row {
	min-width: unset !important;
	/* width: var(--full); */
	max-width: var(--outer);
	/* Bootstrap: */
	/* display: flex;
	flex-wrap: wrap;
	margin-right: -15px;
	margin-left: -15px; */
}



.homepage .container-fluid:is(.bg-slider,.bg-imageteaser,.mosaik-outer,.bg-newsletter,.bg-zahlenteaser) {
	max-width: var(--outer);
	background-image: none;
}

.text-slider-raster {
	min-width: unset !important;
	width: var(--full);
	max-width: var(--outer);
	padding-left: 0 !important;
	padding-right: 0 !important;
	margin: 0 auto !important;
	display: block !important;
}

.col-lg-8.ap-searchresultcol {
	min-width: unset !important;
	width: var(--full);
	max-width: var(--outer);
	padding-left: 15px;
	padding-right: 15px;
	margin: 0 auto;
	flex: 0 0 100%;
}

.single-col,
.single-col-short {
	width: var(--full);
	padding-left: 15px;
	padding-right: 15px;
}

/* das funktioniert... */
/* .row.border-bottom :is(.imageteaser-wrapper, .zahlenteaser-wrapper) .col-12, */
.homepage :is(.imageteaser-wrapper, .zahlenteaser-wrapper) .col-12 {
	flex: 0 0 100%;
	max-width: 100%;
}

/* ...aber dieser Selektor .col-lg-4 greift auch auf kleinen Bildschirmen: 2 Teaser nebeneinander (statt 3) */
/* .row.border-bottom :is(.imageteaser-wrapper,.zahlenteaser-wrapper) .col-lg-4, */
.homepage :is(.imageteaser-wrapper,.zahlenteaser-wrapper) .col-lg-4 {
	flex: 0 0 50%;
	max-width: 50%;
}

/* Hover-Teaser mit Icons auf Elan-Homepage */
.homepage .colcontainer-6 :is(.col-sm-6,.col-md-4,.col-xl-2) {
	flex: 0 0 100%;
	max-width: 100%;
}
/* ENDE Rows, Cols + Container */

/* p, */ /* möglicherweise notwendig für p mit gefloateten Bildern, an den meisten Stellen schädlich! */
:is(.form-opener,.form-content,.form-footer) p {
	color: #000;
	overflow: auto; /* erforderlich, wenn p einen Inhalt (z. B. img) enthält, der höher ist als der p */
}

/* * a:is(*):is(:link,:visited) { */ /* Diese Unterstreichung ist etwas aufwändig abzuschalten */
* a {
	text-decoration: underline 1px;
	box-shadow: none;
}

* a:is(:hover,:focus,:active) {
	text-decoration: none;
	outline: 1px solid;
	outline-offset: 1px;
	border: none;
	box-shadow: none;
}

:is(a,button):is(.btn-solid,.btn-border,.btn-border-white):is(:link,:visited,:hover,:focus,:active) {
	padding: 0 !important;
	margin: 0 !important;
	line-height: 1 !important;
	border: none !important;
	outline: none !important;
	color: var(--zwei) !important;
	background: var(--hintergrund) !important;
	min-width: unset !important;
}

:is(a,button):is(.btn-solid,.btn-border,.btn-border-white):is(:link,:visited) {
	text-decoration: underline 1px !important;
}

:is(a,button):is(.btn-solid,.btn-border,.btn-border-white):is(:hover,:focus,:active) {
	text-decoration: none !important;
}

:is(a,button):is(.btn-solid,.btn-border,.btn-border-white) .fa-arrow-right {
	padding-left: 5px !important;
	color: var(--zwei) !important;
	text-decoration: none !important;
}

* :is(h1, h2, h3, h4, h5, h6) {
	margin: 0 0 .5rem !important;
	text-align: left !important;
	justify-content: flex-start !important;
	align-items: flex-start !important;
	align-self: flex-start !important;
}

* h1 {
	font-size: 2.5rem !important;
	font-weight: 300 !important;
}

* h2 {
	font-size: 2rem !important;
	font-weight: 300 !important;
}

* h3 {
	font-size: 1.75rem !important;
	font-weight: 400 !important;
}

* h4 {
	font-size: 1.5rem !important;
	font-weight: 400 !important;
}

#hauptbereich:after {
	content: "\A\00a9 2024 Institut der deutschen Wirtschaft Köln e.V.";
	color: #666 !important;
	font-size: 1rem;
}

:is(.facet-list, .form-content) :is(.container-cb, .container-rb) input, 
.switch input {
	opacity: 0 !important;
}

main table.standard tbody th,
main table.standard tbody .blau-verlauf th {
	border: 1px solid var(--schrift);
	background-color: var(--hintergrund);
}

/* eingeblendete Elemente */
.card .collapse,
.card .show,
.collapsed {
	display: block;
}

.lastRow-two {
	display: block !important;
	color: #000 !important;
}

abbr[data-original-title], 
abbr[title] {
	text-decoration: none !important;
}

abbr[title]::after {
    content: "";
}

a img {
	border: 0;
}

/* leicht geänderte Einrückung wegen abweichender Schriftart und -größe notwendig */
main :is(ol, ul) li {
	margin-left: 30px;
}

main ul li::before,
main ol li::marker {
	color: #000;
}

main ul.document-list :is(li,p,div),
main ul.document-list.striped :is(li,p,div) {
	margin-left: 0;
}

.document-list :is(li,p,div) a {
	text-decoration: none !important;
	color: var(--schrift);
}

.document-list :is(li,p,div) a:is(:hover, :focus, :active) {
	background-color: var(--hintergrund); /* notwendig, um standard-bildung.css zu überschreiben */
}

.document-list :is(li,p,div) :is(a,.ws-null) .icon {
	display: flex !important;
}

.document-list a .icon img {
	filter: none;
}

.document-list :is(li,p,div) a .linkInfo {
	font-weight: normal;
}



/* IMAGE-SLIDER auf den Homepages */
.container-fluid.bg-slider {
	margin-left: auto !important; /* passt gut auf rehadat.de */
	margin-right: auto !important; /* passt gut auf rehadat.de */
	/* margin-left: -15px !important; */ /* passt gut im Literaturportal */
	/* margin-right: -15px !important; */ /* passt gut im Literaturportal */
	background-color: var(--hintergrund) !important;
	background-image: none !important;
}

.homepage-slider.image {
	padding: 0 15px;
}

.homepage-slider.image .slider-padding {
	padding: 30px 0 0;
}

.homepage-slider:is(.image,.overlay,.text-only) .carousel-item, 
.homepage-slider:is(.image,.overlay,.text-only) .carousel-item.single {
	opacity: 1 !important;
	display: block !important;
	background-image: none !important;
	min-height: unset !important;
	float: none !important;
	margin-bottom: 2rem !important;
	padding: 0 !important;
}

.homepage-slider:is(.image,.overlay,.text-only) .carousel-item .item-content {
	min-height: unset !important;
	padding: 0 !important;
	gap: 0 !important;
	background: var(--hintergrund) !important;
}

.homepage-slider.image .carousel-item .item-content, 
.homepage-slider.image .carousel-item.single .item-content {
	flex-direction: column !important;
	gap: 5px !important;
	background: var(--hintergrund) !important;
}

.homepage-slider.image .carousel-item :is(.slider-image,.slider-text) {
	flex: 0 0 100% !important;
}

/* Bilder im Bild-Slider niedriger */
.homepage-slider.image .carousel-item .slider-image,
.homepage-slider.image .carousel-item .slider-image :is(a,img) {
	max-width: 100% !important;
	max-height: unset !important;
	width: 100% !important;
	height: auto !important;
	aspect-ratio: 3 / 1 !important;
}

.homepage-slider.image .carousel-item .slider-image .image-caption,
.homepage-slider.image .carousel-item .slider-image a:is(:hover,:focus,:active) .image-caption {
	padding: 0 5px !important;
	opacity: 0.7 !important;
}

.homepage-slider.image .carousel-item .slider-text {
	min-height: unset !important;
	flex-direction: column !important;
	flex: 0 0 100% !important;
	padding: 0 !important;
}

.homepage-slider.image .carousel-item .slider-text .slider-text-inner {
	width: 100% !important;
	min-height: auto !important;
}

.homepage-slider.overlay .carousel-item .item-content :is(h1,h2,.text),
.homepage-slider .carousel :is(h1,h2),
.homepage-slider .jumbo :is(h1,h2),
.homepage-slider.text-only .carousel-item .slider-text {
	flex-grow: 0 !important;
	margin: 0 !important;
	width: unset !important;
	max-width: unset !important;
}

.jumbo .jumbotron p {
	margin-bottom: 0 !important;
}

.slider-text p {
	margin-bottom: 0.25rem;
}

.homepage-slider .slider-text .button {
	padding-top: 0 !important;
}
/* Ende IMAGE-SLIDER */





/* BEGINN Hover-Teaser auf Homepages */
.container-fluid.bg-hoverteaser {
	background: none !important;
	padding: 0 0 30px;
}

.margin-kachel {
	margin: 0 !important;
	min-width: unset !important;
	flex: 0 0 100% !important;
	max-width: unset !important;
}

.hoverteaser {
	width: 100%; /* !important; */
	max-width: 100%; /* !important; */
	min-height: unset !important;
	box-shadow: none !important;
	border: none;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	margin-top: 30px;
}

.hoverteaser *,
.hoverteaser:is(:hover,:focus,:active) * {
	position: relative !important;
	min-height: unset !important;
	padding-bottom: 0 !important;
}

.hoverteaser .hiding {
	display: flex;
	justify-content: flex-start; /* evtl. nur für Hover-Teaser ohne Bild */
}

.hoverteaser.icon .hiding {
	display: flex;
	height: unset;
}

/* für Elan - muss noch verbessert werden */
.hoverteaser.icon .hiding img {
	width: 45px;
	margin: 0 8px 0 0;
}

.hoverteaser.icon .hiding h3 {
	padding-top: 0;
}

.hoverteaser .hiding h3 {
	margin-bottom: 0 !important;
	hyphens: manual !important;
}

.hoverteaser .showing a.overlay {
	margin: 0;
	text-decoration: none !important;
}

.hoverteaser .showing .overlay:is(:focus,:active) {
	outline: 1px;
	outline-offset: 1px;
}

.hoverteaser .showing :is(.text,.more) {
	padding: 0 0 5px !important;
}

.hoverteaser .showing a.overlay .text p {
	font-size: 1.125rem;
	text-decoration: none !important;
}

.hoverteaser .showing a.overlay .more {
	font-size: 1.125rem;
	display: inline-block;
	text-decoration: underline !important;
	color: var(--zwei) !important;
}

.hoverteaser .showing a.overlay .more .fa-arrow-right {
	padding-left: 5px !important;
	color: var(--zwei) !important;
	text-decoration: none !important;
}

.hoverteaser .showing a.overlay:is(:hover,:focus,:active) .more { 
	text-decoration: none !important;
	outline: none !important;
}
/* ENDE Hover-Teaser auf Homepages */



/* BEGINN Image-Teaser */
.imageteaser-wrapper .col-12.heading {
	margin-top: 0 !important;
}

/* :is(.homepage,.followingpage) .bg-imageteaser {
	background: none !important;
	margin-left: -15px !important;
	margin-right: -15px !important;
} */

.hoverteaser.image {
	/* width: unset !important;
	max-width: unset !important; */
	max-width: 360px;
	margin-bottom: 15px !important;
}

.hoverteaser.image .hiding .text h3 .headline {
	line-height: 1.2 !important;
}

.hoverteaser.image .showing {
	/*! flex: 0 2 auto; */
	flex-grow: 2;
}

.hoverteaser.image .showing .text {
	padding: 0 15px 10px !important;
}

.hoverteaser.image .showing a.overlay .more {
	padding: 0 15px 15px !important;
	align-self: flex-end;
}
/* ENDE Image-Teaser */




/* BEGINN Mosaik */
.container-fluid.mosaik-outer {
	display: block;
	background-color: var(--hintergrund);
	padding: 0;
}

.container.mosaik {
	display: block;
	padding: 0 15px !important;
}

.mosaik div {
	text-align: left !important;
	padding: 0 !important;
	box-shadow: none !important;
}

/* BEGINN blaue, grüne und weiße Kacheln */
/* entweder Hintergrundbilder für ALLE Elemente ausblenden oder dies: */
/* .blue-bg,
.blue-bg :is(.blue-1,.blue-2,.blue-3,.blue-4,.blue-5,.blue-6),
.green-1-bg, .green-2-bg, .green-3-bg, .green-4-bg, .green-5-bg, .green-6-bg,
:is(.green-1-bg, .green-2-bg, .green-3-bg, .green-4-bg, .green-5-bg, .green-6-bg) .green {
	background: none !important;
	background-image: none !important;
} */

.mosaik .white {
	position: relative;
	background-color: var(--hintergrund); /* hellgraue Farbe auf rehadat.de muss überschrieben werden */
}

.mosaik :is(.blue-bg, .green, .white) a {
	/* text-decoration: none; */
	border: none;
}

.mosaik :is(.blue-bg, .green) a {
	padding: 0.5rem 0 !important;
	margin-bottom: 1rem !important;
}

.mosaik .white a {
	padding: 0 !important;
	margin-bottom: 0.5rem;
}

.mosaik :is(.blue-bg,.green,.white) a:is(:focus, :active) {
	border: none;
	outline: 3px solid var(--zwei);
}

.mosaik :is(.blue-bg, .green) a:is(:focus, :active) {
	padding: 0.5rem 0 !important;
}

.mosaik .white a:is(:focus, :active) {
	padding: 0 !important;
}

.mosaik .white a h2 {
	color: var(--zwei);
	margin: 0 !important;
	text-align: left !important;
	position: relative !important;
	text-decoration: underline 1px;
}

.mosaik .white a p {
	color: #000;
}

.mosaik :is(.blue-bg,.green) h2 a .linktext {
	color: var(--zwei);
	position: relative;
	top: 0;
	right: auto;
	bottom: auto;
	left: 0;
	padding: 0;
	text-decoration: underline 1px;
	text-align: left;
}

.mosaik :is(.blue-bg,.green) h2 a:is(:hover,:focus,:active) .linktext,
.mosaik .white a:is(:hover,:focus,:active) h2 {
	font-weight: normal !important;
	text-decoration: none !important;
	box-shadow: none !important;
	border: none;
}

.mosaik :is(.blue-bg, .green) i {
	margin: 0;
	font-size: 1.2em;
	display: inline-block;
	padding-right: 10px;
	position: relative;
	top: 0;
	left: 0;
	width: unset;
}

.mosaik .white .white-linktext {
	display: none;
}
/* ENDE blaue, grüne und weiße Kacheln */

/* BEGINN News-Kachel */
.news-bg {
	background: var(--hintergrund) !important;
}

.news h2 {
	margin-bottom: 9px !important;
	color: var(--schrift) !important;
	margin-top: 0 !important;
	text-decoration: none;
}

.news ul {
	margin-bottom: 2rem;
}

.news ul li {
	margin-left: 0;
}

.news a.newslink {
	text-decoration: none !important;
	/* padding: 0 0 10px;
	border-bottom: 1px solid var(--bordergrau) !important; */
}

.news .newslink .image {
	flex: 0 0 calc(25% - 15px);
}

.news .newslink .text {
	flex: 0 0 75%;
}

.news .smallFont {
	color: #000 !important;
}

.news .bigFont {
	color: var(--zwei) !important;
	text-decoration: underline;
}

.news .bigFont i {
	color: var(--zwei) !important;
}

.news a.newslink:is(:hover,:focus,:active) .bigFont {
	text-decoration: none !important;
}

.news p {
	padding-bottom: 0;
}

 .news .news-button {
 	display: none !important;
}
/* ENDE News-Kachel */
/* ENDE Mosaik */




/* BEGINN Newsletter */
.newsletter-bar > .container {
  padding: 0;
}

.gridcontainer-nl {
	display: block;
}

.newsletter-eins {
	padding: 0;
}

.newsletter-eins .newsletter-text a {
	color: var(--schrift);
}
/* ENDE Newsletter */




/* BEGINN Text-Slider Nutzerstimmen */
.row.bg-textslider {
	margin-top: 45px !important;
}

.text-slider-raster .textslider.vier {
	padding: 0 !important;
	margin-left: 0 !important;
	height: unset !important;
}

.textslider.vier blockquote {
	border: none;
}

.textslider.vier blockquote p:first-of-type::before,
.textslider.vier blockquote p:last-of-type::after {
	display: inline-block !important;
}

.textslider.vier h2 {
	font-size: 25px !important;
}

.textslider.vier .carousel-item {
	display: block !important;
	margin-bottom: 30px !important;
	margin-right: 0 !important;
}

.textslider.vier .carousel-item p {
	font-size: 20px;
	line-height: 1.5;
	margin-bottom: 5px;
}

.textslider.vier .carousel-item p.smallFont {
	font-size: 16px;
}
/* ENDE Text-Slider Nutzerstimmen */




/* BEGINN Zahlen-Teaser */
:is(.homepage,.followingpage) .bg-zahlenteaser {
	background-image: none !important;
	color: var(--schrift) !important;
	/* margin-left: -15px !important;
	margin-right: -15px !important; */ /* auskommentiert, weil unpassend für rehadat.de */
	margin-top: 30px;
	margin-bottom: 30px;
	padding: 0 !important;
	border: none !important;
}

.container.zahlenteaser-wrapper {
	padding: 0; /* auf rehadat.de notwendig */
}

.zahlenteaser .teaser-content .icon {
	padding: 0 !important;
	display: flex !important;
	margin-right: 15px !important;
}

.zahlenteaser a.teaser-content:is(:hover, :focus, :active) .icon {
	transform: none !important;
}

.zahlenteaser .teaser-content .icon i {
	padding-left: 0 !important;
}
/* ENDE Zahlen-Teaser



/* AKKOREDEON soll wie normaler Fließtext aussehen */
.akkordeon .btn,
.akkordeon .btn-link,
.akkordeon .btn-link:is(:hover,:focus,:active),
.akkordeon .btn-link.collapsed,
.akkordeon .btn-link.collapsed:is(:hover,:focus,:active) {
	color: #000 !important;
	text-decoration: none !important;
	line-height: 1.2;
}

.akkordeon .btn-link .icon {
	display: none;
}

.akkordeon .card,
.akkordeon .card.last {
	border-top: none;
}

.akkordeon .card .collapse:not(.show) {
	display: block;
}

.akkordeon .card-header {
	padding: 0;
}

.akkordeon .card-header :is(h2,h3,h4,h5) {
	margin-bottom: 0.5rem;
}

.akkordeon .card-body {
	padding: 0;
}
/* Ende AKKORDEON */



/* BEGINN Portal-Teaser */
/* .image-boxen-outer > div {
	padding-left: 0;
	padding-right: 0;
} */

.image-box-outer {
	margin-bottom: 30px;
}

.image-box-outer a {
	text-decoration: none;
	border: 1px solid var(--bordergrau);
}

.image-box-outer a:is(:hover, :focus, :active), 
.image-box-outer.landscape a:is(:hover, :focus, :active) img {
	/* transform: scale(1.01); */
	transform: none !important;
	outline: none;
	border-color: var(--schrift);
}

/* .image-box-top,
.col-md-6.blue-icon {
	display: none;
} */

.image-box-bottom,
.col-md-6.hover-shadow {
	padding: 0;
	height: 100%;
	box-shadow: none;
	margin: 0;
	padding: 5px 10px !important;
	min-height: 0;
}

/* .col-md-6.hover-shadow {
	margin-bottom: 30px;
} */

.image-box-bottom .description,
.col-md-6.hover-shadow .description {
	margin-bottom: 5px;
}

.image-box-bottom .link,
.col-md-6.hover-shadow .link {
	position: relative;
	bottom: 0;
}

a .image-box-bottom .link .text,
a .col-md-6.hover-shadow .link .text {
	margin-left: 0;
	text-decoration: underline;
	color: #7d7d7d;
}
/* ENDE Portal-Teaser */


/* BEGINN Unterbereichs-Teaser */
.row.bereich-teaser {
	margin-bottom: 20px !important;
	display: flex !important;
}

.row.bereich-teaser a {
	display: flex;
	width: 100%;
}

.row.bereich-teaser .col-md-4.col-lg-3 {
	padding: 0px 15px 15px 0;
	flex: 0 0 180px;
}

.row.bereich-teaser .col-md-8.col-lg-9 {
	max-width: calc(100% - 180px);
	padding-left: 0;
	flex: 1 1 auto;
}

.row.bereich-teaser img {
	width: 180px;
	max-width: 180px;
	height: auto;
	margin-top: 0;
	padding-top: 0;
}

.row.bereich-teaser a :is(.headline, .description),
.row.bereich-teaser .headline  {
	color: #000;
}

.row.bereich-teaser a .link {
	text-decoration: underline;
	color: #060;
}

.row.bereich-teaser a:is(:hover,:focus,:active) {
	box-shadow: none !important;
	border: none;
	outline: 2px solid #046aa2;
    outline-offset: 3px;
}

.row.bereich-teaser a:is(:hover,:focus,:active) .link {
	text-decoration: none;
}
/* ENDE Unterbereichs-Teaser */



/* BEGINN Zitate */
/* blockquote {
	margin: 0 0 5px;
} */

blockquote p:first-of-type::before {
	font-family: "Font Awesome 6 Pro" !important;
	content: "\f101";
	font-weight: 700;
	font-style: normal;
	font-size: inherit;
	line-height: inherit;
	color: var(--schrift);
}

blockquote p:last-of-type::after {
	font-family: "Font Awesome 6 Pro" !important;
	content: "\f100";
	font-weight: 700;
	font-style: normal;
	font-size: inherit;
	line-height: inherit;
	color: var(--schrift);
}
/* ENDE Zitate */



/* BEGINN Videos & Podcasts */
.plyr {
	--plyr-audio-controls-background: #fff;
	--plyr-video-controls-background: #fff;
}

.plyr-gruen .plyr--video .plyr__controls, 
.plyr-gruen .plyr--video .plyr__control--overlaid, 
.podcast-teaser .title :is(h2, h3, h4), 
.podcast-teaser .plyr__control--overlaid, 
.podcast-teaser .plyr--video .plyr__control:is(:focus-visible, :hover), 
.podcast-teaser .plyr--video .plyr__control[aria-expanded="true"], 
.podcast-teaser :is(.plyr--audio, .plyr--video) .plyr__controls {
	/* background-color: none;
	background-image: var(--portalgradient) !important; */
	background-image: none !important; /* notwendig, um Hintergrund im Bildungsportal zu überschreiben */
}
/* ENDE Videos & Podcasts */



/* BEGINN Everviz interaktive Grafiken */
.rehadat-everviz {
	outline: 1.5px solid var(--eins);
}

.highcharts-background {
	fill: var(--hintergrund) !important;
	stroke: var(--hintergrund) !important;
}
/* ENDE Everviz interaktive Grafiken */



/* BEGINN Lexikon */
/* ABC-Navi */
.filterbox.categories ul {
	display: none;
}

.list-entries li.list-entry {
	margin-left: 0;
}
/* ENDE Lexikon */


/* rechte Spalte für Dokumentenliste, oft benutzt in talentplus.de */
.card-body .two-cols {
	margin-bottom: 30px;
}

.card-body .two-cols .right-col {
	border: 1px solid var(--eins);
	margin-bottom: 0;
}



/* BEGINN farbige Kästen */
.unfertig,.wichtig,.rot {
	border: 1px solid #b31b34;
	background-color: var(--hintergrund);
	padding: 15px;
}

:is(.unfertig,.wichtig,.rot) :is(h1,h2,h3,h4,h5,h6) {
	color: #b31b34;
}

.frage, .tipp, .blau, .rahmen-blau {
	border: 1px solid #02407f;
	background-color: var(--hintergrund);
	padding: 15px;
}

:is(.frage,.tipp,.blau) :is(h2,h3,h4,h5,h6) {
	color: #02407f;
}

.ok, .gruen {
	border: 1px solid var(--zwei);
	background-color: var(--hintergrund);
	padding: 15px;
}

:is(.ok,.gruen) :is(h2,h3,h4,h5,h6) {
	color: var(--zwei);
	background-color: transparent;
}

.rahmen-grau {
	border: 1px solid #b5b5b5;
	background-color: var(--hintergrund);
	padding: 15px;
}

.zettel {
	background: none !important;
	border: 4px dotted var(--bordergrau);
}

.zettel.ira-tipp::before,
.zettel.ira-tipp {
	border: 2px solid var(--bordergrau);
}
/* ENDE farbige Kästen */





/* BEGINN Webservices */
/* BEGINN Liste */
main ul.ws-list li {
	margin-left: 0;
}

.ws-list .count,
.ws-list a:is(:hover,:focus,:active) .count {
	padding-top: 0;
	font-weight: 400;
	background: none;
	color: var(--schrift);
	border: 2px solid var(--schrift);
}

/* ist nur wegen der großen Badges nötig, weil ich dort keinen negativen Abstand nach oben setzen kann */
.ws-list .ws-mixed .count {
	margin-top: 0;
}

.ws-list .count::after {
	position: relative;
}

.ws-list :is(.ws-text,.ws-mixed) {
	display: flex;
}

.ws-list .info {
	color: #000;
}

.ws-list .ws-mixed .image.foto {
	margin: 3px 0 8px;
	flex: 0 0 auto;
}

.ws-list .ws-mixed .image.icon {
	position: relative !important;
}

/* wird für die vertikale Ausrichtung von .badge und .badge.big auf gleicher Höhe wie die Nummerierung benötigt */
.ws-list .ws-mixed .info,
.ws-list .ws-mixed .text .info.badge-wrap {
	line-height: 1.2;
}

.ws-list .badge {
	display: inline-block;
	margin-top: 0;
	margin-bottom: 5px;
	color: #000;
}

.ws-list .badge.big {
	position: relative;
	display: inline-block;
	width: unset;
	height: auto;
	line-height: 1.2;
	margin-top: 0;
	margin-bottom: 0;
	color: #000;
	letter-spacing: .3px;
}

.ws-list .ws-mixed .text {
	flex: 1 1 auto;
	width: auto !important;
}

.ws-list .ws-mixed .text .info {
	line-height: 1.5;
}

.ws-list a:is(.ws-text,.ws-mixed) {
	text-decoration: none;
}

.ws-list a:is(.ws-text,.ws-mixed):is(:hover,:focus,:active) {
	outline: none !important;
}
/* ENDE Liste */

/* BEGINN Detailansicht */
/* Google Maps */
.ws-detail:is(.adr,.wfb) .head .fotos,
.ws-detail:is(.adr,.wfb) .head .fotos .map-wrapper {
	display: none;
}

/* Bild-Slider in Webservice-Detailansichten */
.ws-detail:is(.pra,.tec) .head {
	display: block;
}

.ws-detail:is(.pra,.tec) .head .fotos {
	height: 100%;
	width: 100%;
	margin: 0;
}

.ws-detail .head .fotos.single {
	margin-bottom: 30px;
}

.ws-detail .carousel-wrapper {
	height: 100%;
	width: 100%;
}

.fotos.single .carousel-wrapper.short {
	width: 100%;
}

.ws-detail .carousel {
	width: var(--outer);
	height: auto;
	display: flex;
	margin: 0 -15px 15px;
}

.ws-detail .carousel .carousel-inner {
	width: 100%;
	padding-bottom: 0;
}

.ws-detail .carousel .carousel-item {
	width: 33.3333%;
	height: unset;
	margin: 0;
	padding: 15px;
	display: block;
}

.ws-detail .carousel-fade .carousel-item {
	opacity: 1;
}

.ws-detail .carousel-item .img-wrapper.d-print-block,
.ws-detail .carousel-item .img-wrapper.d-md-none.d-print-block {
	width: 100%;
	height: auto;
	display: block !important;
}

.ws-detail .carousel-item .img-wrapper.d-none.d-md-block.d-print-none {
	display: none !important;
}

#ws-slides .carousel-caption, 
#ws-single-slide .carousel-caption {
	position: relative;
	text-align: left;
}

.ws-detail :is(.carousel-control-prev,.carousel-control-next),
.ws-detail :is(.carousel-control-prev-icon,.carousel-control-next-icon),
.ws-detail .carousel-indicators {
    display: none;
}
/* Ende Bild-Slider in Webservice-Detailansichten */

/* Spezialfall des Akkordeons: Akkordeon-Tab */
.akkordeon.tab {
	border-bottom: none;
}

.ws-detail .akkordeon.tab .card, 
.ws-detail .akkordeon.tab .card.last {
	border: none;
	padding: 0;
	/* display: block; */ /* ? */
}

/* REHADAT verkauft keine Produkte */
.ws-detail.tec .akkordeon.tab .card-body .rot {
	margin-top: 0;
	background: none;
	padding: 0;
}

.ws-detail .akkordeon.tab .card p+p {
	text-indent: 0;
}

/* alle Card-Header in den sichtbaren Bereich verschieben */
.ws-detail .akkordeon.tab .card-header {
	display: block;
	width: 100%;
	height: 100%;
	position: relative;
}

.ws-detail .akkordeon.tab .btn-link {
	font-weight: 600;
}

.ws-detail .akkordeon.tab .btn-link.collapsed {
	display: none;
}

/* bei Hilfsmittel-Detailansicht auch die Überschriften nicht-aktiver Cards drucken */
.ws-detail.tec .akkordeon.tab .btn-link.collapsed {
	display: block;
}

.ws-detail .akkordeon.tab button.btn-link:is(:hover,:focus,:active) .text, 
.ws-detail .akkordeon.tab button.btn-link.collapsed:is(:hover,:focus,:active) .text {
	color: #000 !important;
	text-decoration: none;
}

/* Normalfall: Nur aktive Card soll gedruckt werden */
.akkordeon.tab .card .collapse {
	display: none;
}

/* Sonderfall: Alle Cards sollen gedruckt werden */
.ws-detail.tec .akkordeon.tab .card .collapse {
	display: block;
}

.akkordeon.tab .card .collapse.show {
	display: block;
}

.ws-detail .akkordeon.tab .card-body table tr:nth-of-type(2n) {
	background-color: #eee !important;
}

.ws-detail .schlagworte li {
	margin-left: 0;
}

.ws-detail .description.foot p.inline {
	display: inline-block;
	text-indent: 0;
}

.ws-detail .description.foot p+p {
	text-indent: 0;
}
/* ENDE Detailansicht */
/* ENDE Webservices */







/* und diese Formatierungen kommen hinzu, wenn man im Browser-Menü 
	die Druckansicht auswählt oder tatsächlich druckt */
@media print {
	:root {
		--schrift: #000;
		--hintergrund: #fff;
		--hintergrundzwei: #fff;
		--hintergrunddrei: #fff;
		--schrifteins: #000;
		--bordergrau: #000;
		--zwei: #666;
		--outer: 100% !important;
		--inner: calc(100% - 30px) !important;
	}
	
	/* html,
	body {
		height:100%;
		width:100%;
		margin:0;
		padding:0;
	} */
	
	html {
		font-size: 13pt;
	}
	
	/* nicht sichtbare Elemente */
	#cookieDialogWrapper {
		display: none !important;
	}
	
	/* unklar, ob das so global schlau ist Lue 04.04.2024 */
	.row {
		/* width: unset; */
		width: var(--full);
		max-width: unset;
	}
	
	/* Elemente, in denen keinen Seitenumbruch erfolgen soll */
	.homepage-slider.image .carousel-item, 
	.homepage-slider.image .carousel-item.single,
	.hoverteaser,
	.mosaik .news-item,
	.mosaik :is(.blue-bg,.green,.white-bg),
	.gridcontainer-nl,
	.imageteaser-wrapper .row > div,
	.image-box-outer,
	.ws-list .ws-text,
	.ws-list .ws-mixed {
		break-inside: avoid !important;
	}
	
	
	/* Kein Zeilenumbruch unmittelbar nach der Überschrift! */
	h1, h2, h3, h4, h5, h6,
	.col-12.heading {
		break-after: avoid !important;
	}
	
	
	/* Hintergrund-Farben und -Bilder erzwingen - siehe:
	   https://stackoverflow.com/questions/3893986/css-media-print-issues-with-background-color/3894013
	   Funktioniert in Chrome, Edge und Firefox, aber nicht in Internet Explorer 11 */	
	/* gestreifte Tabelle mit Streifen ausdrucken */
	.zettel.ira-tipp,
	.ws-detail table,
	.form-content .checkmark, 
	.facet-list .checkmark,
	.switch .slider,
	.switch input:checked ~ .slider::before	{
		color-adjust: exact; 
		-webkit-print-color-adjust: exact; 
		print-color-adjust: exact;
	}
	
	/* 16px = 12pt -> d.h. am Bildschirm ist die Darstellung 
		mit 18px etwas größer als auf Papier */
	/* body,
	p {
		font-family: Cambria, Georgia, serif;
		font-size: 16px;
	} */
	
	/* a:link, a:visited {
		color: #666;
		font-weight: normal;
	} */
	
	/* * img {
		filter: grayscale(1) !important;
	} */
	
	
	
	
	/* h1 {
		font-size: 30px;
		margin-bottom: 15px;
	}
	
	h2,
	.hoverteaser .hiding h3,
	.textslider.vier h2 {
		font-size: 23px;
	}
	
	h3 {
		font-size: 20px;
	}
	
	h4 {
		font-size: 18px;
	}
	
	h5, h6 {
		font-size: 16px;
	}
	
	h1.smallFont {
		font-size: 18px;
	}
	
	.ws-detail :is(h2,h3,h4).inline {
		font-size: 16px;
	} */
	
	/* .slider-padding.jumbo {
		margin: 0 -15px;
	} */
	
	/* Bei 3 Teasern pro Zeile sehen 4, 7, 10 besser links ausgerichtet aus */
	:is(.homepage,.row.border-bottom) .justify-content-center {
		justify-content: start !important;
	}
	
	/* 3 Image-Teaser pro Zeile */
	/* :is(.homepage,.row.border-bottom) .imageteaser-wrapper .col-lg-4 {
		flex: 0 0 33.333333% !important;
		max-width: 33.333333% !important;
	} */
	
	.row.border-bottom :is(.imageteaser-wrapper,.zahlenteaser-wrapper) .col-lg-4,
	.row.image-boxen-outer .col-sm-12 {
		flex: 0 0 50%;
		max-width: 50%;
	}
	
	.hoverteaser.image {
		max-width: unset !important;
		width: 100% !important;
		height: auto !important;
	}
	
	.para {
		margin-bottom: 30px; /* notwendig in aufgeklapptem Akkordeon, z. B. im Bildungsportal */
	}
	
	.card-body .two-cols {
		align-items: flex-start;
		display: flex;
		column-gap: 30px;
	}
	
	.card-body .two-cols .left-col {
		width: calc(50% - 15px);
	}
	
	/* rechte Spalte für Dokumentenliste, oft benutzt in talentplus.de */
	.card-body .two-cols .right-col {
		width: calc(50% - 15px);
		padding: 15px 15px 0;
	}
	
	:is(.bild-links,.bild-rechts) img,
	:is(.akkordeon,.para) .card-body :is(.bild-links,.bild-rechts) img {
		max-width: unset;
	}
	
	.bigFont,
	.textslider.vier .carousel-item p {
		font-size: 18px !important;
	}
	
	.smallFont,
	.textslider.vier .carousel-item p.smallFont {
		font-size: 10pt !important;
	}
	
	.hoverteaser .hiding h3 {
		text-decoration: none;
	}
	
	/* .hoverteaser .showing .overlay p,
	.hoverteaser .showing .more {
		font-size: 16px !important;
	} */
	
	/* Portal-Teaser */
	.row.portal-teaser {
	 	max-width: unset;
	}
	
	/* .image-box-outer.landscape a {
		display: flex;
		flex-direction: row;
	} */
	
	/* BEGINN Audio/Video und Audio/Video-Platzhalter */
	.rehadat-video-wrapper {
		 width: unset;
	}
	
	.podcast-wrapper {
		width: unset;
		clear: both;
		width: 100%;
		display: block;
		border: 1px solid var(--eins);
		border-radius: 0;
	}
	
	.podcast-teaser {
		display: block;
		padding: 15px;
	}
	
	.podcast-teaser .title-and-player {
		outline: none;
	}
	
	.podcast-wrapper .podcast-teaser .title :is(h2, h3, h4) {
		position: static; /* Position mittig auf dem Border, wenn auskommentiert Position links unterhalb des Borders */
		float: none;
		color: var(--schrift);
		background: var(--hintergrund);
		font-size: 1.3rem !important;
		padding: 0;
	}
	
	.podcast-wrapper .podcast-teaser .text {
		clear: both;
		width: auto;
		padding: 0;
		margin: 0;
	}
	
	:is(.full-width-audio,.full-width-video,.vertical-video), 
	:is(.full-width-audio,.full-width-video,.vertical-video) :is(audio,video) {
  		display: none;
	}
	
	.video-print-placeholder {
		font-size: 23px;
		padding-bottom: 30px;
		display: block;
	}
	
	.audio-print-placeholder {
		font-size: 23px;
		padding: 0 15px 15px;
	}
	
	.video-print-placeholder::before,
	.audio-print-placeholder::before {
		display: inline-block;
		font-family: "Font Awesome 6 Pro";
		font-weight: 900;
		font-size: 23px;
		content: "\f144";
		padding-right: 15px;
	}
	/* ENDE Audio/Video und Audio/Video-Platzhalter */
	
	.ws-list a:is(.ws-text,.ws-mixed) .title {
		text-decoration: none;
	}
	
	.ws-list .ws-mixed .d-flex.flex-column.flex-md-row {
		display: flex !important;
		flex-direction: row !important;
		/* gap: 15px; */
	}
	
	.ws-detail .akkordeon.tab .card-body table tr:nth-of-type(2n) {
		background-color: #eee !important;
	}
	
	.ws-detail.tec .akkordeon.tab .card-body .rot {
		margin: 0 0 30px;
		padding: 0;
	}
}




@page {
	size: A4 portrait;
	margin: 1.5cm;
}

/* In der Druckvorschau: Firefox versteht :right und :left nicht, Edge schneidet den Inhalt wegen der breiten Ränder ab. */
/* @page :right {
	margin: 1.5cm 3cm 1.5cm 2cm;
}

@page :left {
	margin: 1.5cm 2cm 1.5cm 3cm;
} */