/* Formatierungen für die Webservices:
   Ergebnislisten und Detailansichten für alle DBs
   03/2020 B.Luessem */
   
  
/* Screenreader-Styles - hier nur die Positionsangabe, 
	der content (Satz- und Leerzeichen) steht jeweils weiter unten */
.ws-list :is(.count,.badge)::after,
.ws-detail:is(.pra,.rec,.tec) .badge.big::after,
.akkordeon.tab .card-body table caption {
	/* von sr-only kopiert */
	border: 0;
	clip: rect(0,0,0,0);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
}

/* Elemente, die wir in allen Portalen außer bei Autoanpassung ausblenden wollen
	Beispiel: ADR Detailansicht Schlagworte */
.autoanpassung-only {
	display: none;
}

/* Leichte Sprache: Elemente, die wir nicht ausgeben wollen */
.biggerFont .sl-none,
.biggerFont .ws-list .ws-mixed .image.icon.sl-none,
.biggerFont .ws-list .info.sl-none,
.biggerFont .ws-list .badge,
.biggerFont .ws-detail.lit .head .image.icon.sl-none,
.biggerFont .ws-detail.mas h1 .sl-none,
.biggerFont .ws-detail .akkordeon.tab nav,
.biggerFont .ws-detail .akkordeon.tab .card-header,
.biggerFont .ws-detail .indent p.inline.sl-none,
.biggerFont .ws-detail .description.head .badge,
.biggerFont .ws-detail .indent :is(h2,h3,h4).sl-none,
.biggerFont .ws-detail .akkordeon.tab,
.biggerFont .description.foot {
	display: none;
}

/* Leichte Sprache: Elemente, die wir nur bei Leichter Sprache inline anzeigen wollen: */
.ws-list .image.icon.sl-only,
.ws-list .ws-mixed .image.icon.sl-only,
.ws-list .ws-mixed .title .sl-only,
.ws-list .info.sl-only,
.ws-list .info .sl-only,
.ws-detail.lit .head .image.icon.sl-only,
.ws-detail.mas h1 .sl-only,
.ws-detail .info.sl-only,
.ws-detail .info .sl-only,
.ws-detail :is(h2,h3,h4).sl-only,
.ws-detail .description.main div.sl-only {
	display: none;
}

.biggerFont .ws-list .ws-mixed .title .sl-only,
.biggerFont .ws-list .info.sl-only,
.biggerFont .ws-list .info .sl-only {
	display: inline;
}

.biggerFont .ws-detail .info.sl-only, 
.biggerFont .ws-detail .info .sl-only,
.biggerFont .ws-detail.mas h1 .sl-only,
.biggerFont .ws-detail :is(h2,h3,h4).sl-only,
.biggerFont .ws-detail .description.main div.sl-only {
	display: block;
}

.biggerFont .ws-detail .description.head h2 {
	padding: 0;
	border-bottom: none;
	margin: 15px 0;
}   

/* Suche, linke Spalte zum Filtern, auf Kleingeräte zuerst eingeklappt */
.ap-searchsortcol {
	margin-top: 12px;
}

#accordion-search-facets a {
	color: var(--eins);
	background-color: var(--hintergrund);
	text-decoration: none;
	display: block;
}

#accordion-search-facets a:is(:hover,:focus,:active) {
	text-decoration: underline;
}

#accordion-search-facets .heading {
	display: none;
}

#accordion-search #accordion-search-facets div.ap-searchfacetcol {
	display: none;
}

#accordion-search #accordion-search-facets:target div.ap-searchfacetcol {
	display: block;
	margin: 15px 0 30px;
}

/*Facettendarstellung im Suchfilter */
.facet-list .facet-box,
.facet-box .facet-list { 
	margin-bottom: 15px;
	padding-left: 0;
}

:is(.facet-box,.facet-list) h3 {
	font-size: 1.25rem;
	font-weight: 400;
}

.facet-list :is(p,li) {
	margin-bottom: 0;
	padding-bottom: 0;
}

ul.facet-list li::before {
	display: none;
}

.facet-list .container-cb {
	font-weight: 400;
}

.facet-list.bold .container-cb {
	font-weight: 600;
}

/* Blättern zwischen den Ergebnisseiten 1 (1-50), 2 (51-100) usw. */
.ws-list-pagination ul.pagination-numbers {
	padding-top: 0;
}

/* Filterfunktion auf Bereichsseiten, Hilfe in der erweiterten Suche */
.akkordeon.result-filter,
.akkordeon.search-help {
	margin: 30px 0;
}

.akkordeon.result-filter h3,
.akkordeon.search-help h2 {
	width: 290px;
	font-size: 1.55rem;
}

.akkordeon:is(.result-filter h3,.search-help h2) button,
.akkordeon:is(.result-filter h3,.search-help h2) button.btn-link.collapsed {
	color: var(--eins);
	background-color: var(--hintergrund);
	text-decoration: none;
	display: block;
}

.akkordeon .btn-link .text.filter .fa-filter {
	font-size: 1.875rem; 
	color: var(--eins);
	background-color: var(--hintergrund);
	padding: 0 12px 0 0;
}

.akkordeon .btn-link .text.filter :is(.fa-regular.fa-filter,.far.fa-filter) {
	font-weight: 300;
}

.akkordeon .btn-link .text.help :is(.fa-circle-question,.fa-question-circle) {
	font-size: 1.75rem;
	color: var(--eins);
	background-color: var(--hintergrund);
	padding: 0 15px 0 0;
}

/* Wechselnde Button-Beschritung beim Auf- / Zuklappen des Suchfilters auf Bereichsseiten */
.akkordeon:is(.result-filter,.search-help) .text:is(.filter,.help) .ein {
	display: none;
}

.akkordeon:is(.result-filter,.search-help) .collapsed .text:is(.filter,.help) .ein {
	display: inline;
}

/* dieser Selektor steht einige Zeilen höher schon einmal. Das ist notwenig! */
.akkordeon:is(.result-filter,.search-help) .text:is(.filter,.help) .ein {
	display: none;
}

.akkordeon:is(.result-filter,.search-help) .text:is(.filter,.help) .aus {
	display: inline;
}

.akkordeon:is(.result-filter,.search-help) .collapsed .text:is(.filter,.help) .aus {
	display: none;
}

/* Filtern und Sortieren über Ergebnislisten */
.wssortbox.maincol {
	width: 100%;
	margin: 0;
}

/* Filtern und Sortieren + Detailsuche */
.wssortbox.maincol .form-content,
.form-content.detail-search {
	padding: 0;
}

/* .form-content.detail-search p, */
.wssortbox.maincol .form-content p {
	margin-bottom: 12px;
}

.form-content.detail-search fieldset {
	margin-bottom: 0;
}

.form-content.detail-search fieldset legend {
	float: left;
	width: auto;
	font-size: 1.125rem;
	font-weight: 600;
	margin-bottom: 0;
}

/* Erweiterte Suche LIT + REC: Erscheinungsjahr */
.form-content.detail-search fieldset :is(.left,.right) {
	white-space: nowrap;
	width: 100%;
	display: block;
}

.form-content.detail-search fieldset :is(.left,.right) label {
	font-weight: 400;
	width: 20%;
}

/* weniger padding als bei Webforms -> kleinere Eingabefelder  */
.wssortbox.maincol .form-content input:is([type=text],[type=email],[type=file]) {
	/* padding: 5px; */
	padding: 12px;
}

.form-content.detail-search input:is([type=text],[type=email],[type=file]) {
	/* padding: 5px; */
	/* border-width: 1px; */ /* überschreibt border-width: 2px der "normalen" Formular-Felder */
	padding: 12px;
}

.form-content.detail-search .selection input::placeholder {
	opacity: 1;
	color: var(--mittelgrau);
}

.form-content.detail-search .selection input[type="text"]:is(:hover, :focus, :active) {
	border: 0;
	outline: 3.5px solid var(--schrifteins);
}

/* Erweiterte Suche + Abstracts: Buttons und Popover-Fenster */
/* der i-Button zum Popover */
.form-content.detail-search .extended-search-popover {
	color: var(--eins);
	background-color: var(--hintergrund);
	border: none;
	padding: 0;
	margin-left: 12px;
	line-height: 1;
	font-size: 1.375rem;
}

.form-content.detail-search .extended-search-popover:is(:hover,:focus,:active) {
	color: var(--eins);
	background-color: var(--hintergrund);
	border: none;
	outline: 3px solid transparent;
}

.form-content.detail-search .extended-search-popover i {
	padding-left: 0;
}

/* Abstract-Button */
h1 .text {
	display: inline-block;
	width: calc(100% - 2.5rem);
}

h1 .icon {
	float: right;
}

.abstract-popover {
	color: var(--eins);
	background-color: var(--hintergrund);
	border: none;
	/* padding: 0; */
	margin-top: 3px;
	margin-left: 8px;
	padding-left: 0;
	position: absolute;
}

.abstract-popover:is(:hover,:focus,:active) {
	color: var(--eins);
	background-color: var(--hintergrund);
	border: none;
	/* outline: 3px solid transparent; */
	outline: none !important;
}

.abstract-popover i {
	padding-left: 0;
	position: absolute;
	color: var(--eins);
}

.abstract-popover .fa-pen {
	font-size: 1rem;
	top: 0.65rem;
	left: 0.8rem;
}

/* das Popover-Fenster für erweiterte Suche + Abstracts */
.bs-popover-top,
.bs-popover-bottom,
.bs-popover-left,
.bs-popover-right {
	box-shadow: 0 2px 15px rgba(0, 0, 0, 0.6);
	width: calc(100% - 70px) !important;
	max-width: 470px !important;
	top: 1rem !important;
}

.bs-popover-left .arrow::after,
.bs-popover-auto[x-placement^="left"] .arrow::after,
.bs-popover-right .arrow::after,
.bs-popover-auto[x-placement^="right"] .arrow::after {
	border-top-color: transparent;
	border-bottom-color: transparent;
	border-left-color: #fff;
	border-right-color: #fff;
}

.bs-popover-top .arrow::after,
.bs-popover-auto[x-placement^="top"] .arrow::after,
.bs-popover-bottom .arrow::after,
.bs-popover-auto[x-placement^="bottom"] .arrow::after {
	border-top-color: #fff;
	border-bottom-color: #fff;
	border-left-color: transparent;
	border-right-color: transparent;
}

.popover-header {
	color: #02407f;
	background: #e9f2f7;
	font-family: 'Source Sans Pro',arial,sans-serif;
	font-size: 1rem;
	font-weight: 600;
	hyphens: auto;
	word-break: break-word;
}

.popover-body {
	color: #02407f;
	background: #fff;
	font-family: 'Source Sans Pro',arial,sans-serif;
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.2;
	hyphens: auto;
	word-break: break-word;
}

.popover-body p {
	color: #02407f;
	background: #fff;
	font-family: 'Source Sans Pro',arial,sans-serif;
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.2;
	hyphens: auto;
	word-break: break-word;
	margin-bottom: 1rem;
}

/* Schalter für UND-/ODER-Verknüpfung bei Multiselects rechtsbündig ausrichten */
.form-content.detail-search .and-or {
	float: right;
	min-width: 100px;
}

.form-content.detail-search .selection {
	background: url('/system/modules/de.rehadat.projekt2021.frontend/resources/images/angle-down.svg') calc(100% - 10px)/25px 25px no-repeat;
	display: block;
	background-color: var(--hintergrund);
}

.form-content.detail-search .selection:hover {
	background: url('/system/modules/de.rehadat.projekt2021.frontend/resources/images/angle-top.svg') calc(100% - 10px)/25px 25px no-repeat;
	display: block;
	background-color: var(--hintergrund);
	/* outline: 2px solid var(--schrifteins); */
}

.wssortbox.maincol .form-content .selectbox, 
.wssortbox.maincol .form-content .ui-combobox .ui-combobox-input {
	/* padding: 5px; */
	padding: 12px;
}

.form-content.detail-search .webform-button {
	margin: 15px 0 30px;
}

p.filter-buttons,
.wssortbox.maincol .form-content .filter-buttons,
.form-content.detail-search .filter-buttons {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 15px;
	margin: 15px 0 30px;
}

.wssortbox.maincol .filter-buttons .btn-border:is(:hover,:focus,:active) i,
.form-content.detail-search .filter-buttons .btn-border:is(:hover,:focus,:active) i {
	font-weight: 900;
}

.loading .fa-spinner {
	color: var(--zwei);
	background-color: var(--hintergrund);
	font-size: 2.2rem;
	padding: 0;
	margin: 0;
	/* display: block; */
}




/* ERGEBNISLISTEN für alle DBs */
.ws-results {
	clear: both;
}

/* verlinkte Ergebnisse */
.ws-list,
.biggerFont .ws-list {
	padding-left: 0;
	counter-reset: entry 0;
}

ul.ws-list li {
	padding-bottom: 0;
}

ul.ws-list li::before {
	display: none;
}

.ws-list h3 {
	margin-bottom: 0;
}

.biggerFont .ws-list h3 {
	padding: 0;
	margin: 0;
}

.ws-list a {
	border-top: 1px solid rgba(0,0,0,.1);
	margin: 0;
	padding: 15px 0;
	text-decoration: none;
}

.biggerFont .ws-list a {
	padding: 15px;
}

.biggerFont .ws-list li:first-child a {
	border-top: none;
}

.ws-list a:hover {
	box-shadow: 0 0 10px rgba(138, 138, 138, 0.5);
	background-color: transparent;
}

.ws-list a:focus {
	box-shadow: none;
	background-color: transparent;
	outline: 2px solid var(--zwei);
	outline-offset: 0;
}

.ws-list a:active {
	outline: none;
	box-shadow: 0 0 10px rgba(138, 138, 138, 0.5);
	background-color: transparent;
}

.biggerFont .ws-list a:is(:hover,:focus,:active) {
	box-shadow: none;
	outline: 3px solid var(--zwei);
}

.ws-list .ws-text,
.ws-list .ws-mixed {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.ws-list .ws-text .image {
	display: none;
}

.ws-list .count {
	flex: 0 0 45px;
	width: 45px;
	height: 45px;
	color: #fff;
	background-color: #32a852;
	/* background-image: linear-gradient(225deg, #6db38c 0%, #45a16b 100%); */ /* grün wie die Buttonss */
	background-image: var(--gruengradient);
	font-size: 20px;
	margin-top: 3px;
	font-weight: 600;
	line-height: 2.15;
	border-radius: 100%;
	text-align: center;

}

.biggerFont .ws-list .count {
	flex: 0 0 52px;
	width: 52px;
	height: 52px;
	font-size: 25px;
	margin-top: 8px;
}

.ws-list a:is(:hover,:focus,:active) .count {
	background-color: #27754a;
	/* background-image: linear-gradient(45deg, #27754a 0%, #0d9144 100%); */
	background-image: var(--gruengradientaktiv);
}

.ws-list .count::after {
	content: ". ";
}

/* Container für Bild und Text */
.ws-list .ws-mixed .d-flex.flex-column.flex-md-row {
	gap: 8px;
	align-items: flex-start;
}

.ws-list .ws-mixed.online-pub {
	border-top: none;
	padding: 0;
	margin-bottom: 15px;
}

.biggerFont .ws-list .ws-mixed.online-pub {
	padding: 15px;
	margin-bottom: 30px;
}

.ws-list .ws-mixed .image:is(.foto, .icon, .icon-font) {
	border: 1px solid var(--bordergrau);
}

.ws-list .ws-mixed .image.foto {
	width: 200px;
	height: auto;
	max-height: 300px;
	overflow: hidden;
	align-self: center;
	opacity: 1;
}

.ws-list .ws-mixed .image img {
	width: 200px;
}

.ws-list .ws-mixed .image.icon {
	opacity: 0.6;
}

/* BEGINN Icon Sonderfälle in Ergebnislisten und Detailansichten */
/* das Infotext-Icon spiegeln, damit der Freiraum für das Leichte-Sprache-Icon rechts statt links unten ist. */
.ws-list .ws-mixed .image.icon img.mirror {
	transform: rotateY(180deg);
}

/* grünes Haupt-Icon für Leichte Sprache (Infotext-Icon und allgemeines LIT-Icon) */
.ws-list .ws-mixed .image.icon img.green, 
.ws-detail.lit .description.head .image.icon img.green {
	filter: invert(28%) sepia(9%) saturate(7272%) hue-rotate(101deg) brightness(100%) contrast(89%);
	background: none;
}

/* Zusatz-Icon für Leichte Sprache rechts unten. 
	Muss deckend sein, damit das Haupt-Icon im Webservice LIT nicht durchscheint. */
.ws-list .ws-mixed .image.icon.leichte-sprache .fa-book-open-reader {
	position: absolute;
	/* top: 62%; */
	top: 65%;
	right: auto;
	bottom: auto;
	/* left: 52%; */
	left: 55%;
	z-index: 5;
	font-size: 37.5px;
	padding: 2.5px 4px 5.5px;
	line-height: 1;
	color: #0e6e2d;
	background-color: var(--hintergrund);
	border-radius: 100%;
}

/* portal-spezifisches Zusatz-Icon links unten bei Info-Texten */
.ws-list .ws-mixed .image.icon img.portal {
	position: absolute;
	top: 55%;
	right: auto;
	left: 21%;
	bottom: auto;
	width: 36%;
	height: 36%;
	border: none;
	z-index: 5;
	background-color: transparent;
	filter: none; /* für irgendeinen Sonderfall notwendig? */
}

/* Bundesland-spezifisches Zusatz-Icon links unten bei Förderprogrammen */
.ws-list .ws-mixed .image.icon img.bundesland {
	position: absolute;
	top: 50%;
	right: auto;
	bottom: auto;
	left: 10%;
	width: auto;
	height: 42%;
	z-index: 5;
	background: none;
	filter: none;
	border: none;
}

.ws-detail.lit .description.head .icon .fa-book-open-reader {
	position: absolute;
	top: 62%;
	right: auto;
	bottom: auto;
	left: 52%;
	z-index: 5;
	opacity: 1;
	z-index: 5;
	font-size: 29px;
	padding: 2px 3.5px 5px;
	line-height: 1;
	color: #27754a;
	background-color: var(--hintergrund);
	border-radius: 100%;
}
/* ENDE Icon Sonderfälle */


.ws-list .text {
	overflow: hidden;
	display: block;
	font-weight: 400;
	font-size: 1.125rem;
	min-height: 45px; /* Gesetze-Texte sind sonst niedriger als die Nummerierung */
}

.ws-list .ws-mixed.online-pub .text {
	min-height: 30px;
	margin-left: 0;
}

.ws-list .title {
	font-size: 1.25rem;
	text-decoration: underline;
	display: block;
	padding-bottom: 5px;
}

.biggerFont .ws-list .title,
.biggerFont .ws-list .title span {
	font-size: 1.55rem;
	font-weight: 600;
}

.ws-list .ws-mixed.online-pub .text .title {
	padding: 7px 0;
}

.ws-list .ws-mixed.online-pub .text .title i {
	font-size: 1.125rem;
	padding-left: 0;
	padding-right: 5px;
	font-weight: 400; /* FontAwesome Pro Lizenz notwendig für dieses font-weight */
}

.biggerFont .ws-list .ws-mixed.online-pub .text .title i {
	font-size: 1.625rem;
	padding-right: 10px;
}

.ws-list a:is(:hover,:focus,:active) .title {
	text-decoration: none;
}

/* falls nach dem Titel nichts mehr kommt - Beispiel: Gesetze */
.ws-list .title:last-child::after {
	content: "";
}

.ws-list .info {
	display: block;
	line-height: 1.5;
	text-decoration: none;
	color: var(--schrift);
	background-color: var(--hintergrund);
}

.biggerFont .ws-list h3 .info {
	font-size: 1.375rem;
}

.biggerFont .ws-list h3 .info strong {
	font-size: 1.375rem !important;
	font-weight: 600;
}

.ws-list a:is(:hover,:focus,:active) .info {
	/* display: block; */ /* Das stört den sl-none / sl-only-Mechanismus. Lue 18.01.2024 */
	text-decoration: none;
}

.ws-list .info:last-child::after {
	content: "";
}

/* kleine graue Schilder für Seminar-Themen, Bundesland, Dokumentart etc. */
.ws-list .badge,
.ws-detail .badge {
	color: var(--schrift);
	background: var(--hintergrunddrei);
	padding: 3px 6px;
	border: 1px solid var(--bordergrau);
	font-size: 1rem;
	font-weight: 400;
	margin: 0 8px 8px 0;
}

.ws-list .badge:last-child,
.ws-detail .badge:last-child {
	margin-right: 0;
}

.ws-list .badge::after {
	content: ", ";
}

.ws-list .badge:last-child::after {
	content: "";
}

/* etwas größere graue Schilder - werden auf Handys statt der Icons verwendet */
.ws-list .badge.big,
.ws-detail .badge.big {
	font-size: 1.25rem;
}

/* hör- aber nicht sichtbarer Doppelpunkt + Zeilenumbruch (für DB-Name) */
.ws-list .badge.big::after,
.ws-detail .badge.big::after {
	content: ":";
}



/* Beginn DETAILANSICHTEN */
/* Beginn Detail-Navigation: Zurück zur Liste, zum vorherigen und zum nächsten Ergebnis */
.ws-detail-nav {
	margin-bottom: 15px;
	overflow: hidden;
}

.ws-detail-nav p {
	float: left;
	font-size: 20px;
	margin-bottom: 5px;
	padding: 0;
	font-weight: 600;
}

.ws-detail-nav p a {
	text-decoration: none;
}

.ws-detail-nav p a:is(:hover,:focus,:active) {
	text-decoration: underline;
	outline: none;
}

.ws-detail-nav p a i {
	margin-right: 5px;
	padding: 12.5px 0;
}

.ws-detail-nav ul.pagination-numbers {
	padding: 2px; /* Ist erforderlich, weil sonst das outline um die Listenpunkte nicht sichtbar ist */
	margin: 0;
	float: right;
}

.ws-detail-nav ul.pagination-numbers li {
	display: block;
	text-align: center;
	padding: 0;
	font-weight: 600;
	border: none;
	font-size: 20px;
	margin: 0 0 0 5px;
	width: 45px;
	height: 45px;
	outline: none;
}

.biggerFont .ws-detail-nav ul.pagination-numbers li {
	font-size: 25px;
	margin: 0 0 0 10px;
	width: 52px;
	height: 52px;
	/* line-height: 52px; */
}

.ws-detail-nav ul.pagination-numbers li:is(:hover,:focus-within) {
	background-image: linear-gradient(45deg, #27754a 0%, #0d9144 100%);
	width: 45px;
	height: 45px;
	border: none;
	box-shadow: none;
}

.biggerFont .ws-detail-nav ul.pagination-numbers li:is(:hover,:focus-within) {
	width: 52px;
	height: 52px;
	border: none;
	box-shadow: none;
}

/* Aktuelle Seite: nicht verlinkt aber mit class="active" */
.ws-detail-nav ul.pagination-numbers li.active,
.ws-detail-nav ul.pagination-numbers li.active:hover {
	color: var(--schrift);
	background: var(--hintergrund);
	line-height: 45px;
	outline: none;
}

.biggerFont .ws-detail-nav ul.pagination-numbers li.active,
.biggerFont .ws-detail-nav ul.pagination-numbers li.active:hover {
	color: var(--schrift);
	background: var(--hintergrund);
	line-height: 52px;
	outline: none;
}

.ws-detail-nav ul.pagination-numbers li i {
	padding-left: 0;
	padding-top: 0;
	line-height: 45px;
	font-size: 30px;
}

.biggerFont .ws-detail-nav ul.pagination-numbers li i {
	font-size: 36px;
	line-height: 52px;
}

.ws-detail-nav ul.pagination-numbers li.disabled,
.ws-detail-nav ul.pagination-numbers li:empty {
	display: none;
}

.ws-detail-nav ul.pagination-numbers li a,
.biggerFont .ws-detail-nav ul.pagination-numbers li a {
	color: #fff;
	/* background-image: linear-gradient(225deg, #6db38c 0%, #45a16b 100%); */
	background-image: var(--gruengradient);
	border-radius: 100%;
	border: none;
	outline: none;
}

/* .ws-detail-nav ul.pagination-numbers li.active a, */
.ws-detail-nav ul.pagination-numbers li a:hover {
	/* background-image: linear-gradient(45deg, #27754a 0%, #0d9144 100%); */
	background-image: var(--gruengradientaktiv);
	width: 45px;
	height: 45px;
	border-radius: 100%;
	color: #fff;
	border: none;
	outline: none;
}

.ws-detail-nav ul.pagination-numbers li a:is(:focus,:active) {
	box-shadow: none;
	/* background-image: linear-gradient(45deg, #27754a 0%, #0d9144 100%); */
	background-image: var(--gruengradientaktiv);
	border: none;
	border-radius: 100%;
	outline: 2px solid #27754a;
	outline-offset: 0;
	width: 45px;
	height: 45px;
	margin-top: 0;
}

.biggerFont .ws-detail-nav ul.pagination-numbers li a:hover {
	/* background-image: linear-gradient(45deg, #27754a 0%, #0d9144 100%); */
	background-image: var(--gruengradientaktiv);
	width: 52px;
	height: 52px;
	border-radius: 100%;
	color: #fff;
	border: none;
}

.biggerFont .ws-detail-nav ul.pagination-numbers li a:is(:focus,:active) {
	border: none;
	border-radius: 100%;
	outline: 2px solid var(--schrift);
	outline-offset: 0;
	width: 52px;
	height: 52px;
	margin-top: 0;
}
/* Ende Detail-Navigation */


/*****************************************/
/* BEGINN der eigentlichen Detailansicht */
/*****************************************/
.ws-detail a:focus {
	text-decoration: none;
	outline: 1px solid #387652;
	outline-offset: 1.5px;
}

/* for, foe, mas, lit */
.ws-detail .head {
	/* display: block; */
	display: flex;
	flex-direction: column;
}

/* Zuerst das Bild, dann die Überschrift, deswegen nur den margin von der Überschrift nicht vom .head */
.ws-detail:is(.pra,.tec) .head {
	display: flex;
	flex-direction: column-reverse;
	margin-bottom: 0;
}

/* Entweder Karte oder Datenblock im .head */
.ws-detail:is(.adr,.iv,.rec,.sem,.wfb) .head {
	margin-bottom: 30px;
}

.ws-detail .head h1 {
	/* Schrift verkleinert, um einige Buchstaben mehr unterbringen zu können: */
	font-size: 1.875rem;
}

.biggerFont .head h1 {
	font-size: 2.4rem;
}

.ws-detail .head h1 .block-title {
	display: block;
}

.ws-detail :is(h1,h2,h3,h4,h5,h6):empty,
.ws-detail p:empty {
	display: none;
}

.ws-detail .head h1 .info {
	display: flex;
	line-height: 1;
	padding-bottom: 20px;
	flex-wrap: wrap;
}

/* .ws-detail:is(.pra,.tec) .head h1 .info {
	display: block;
} */

.biggerFont .ws-detail .head h1 .info {
	display: none;
}

/* wir versuchen die div wenigstens so aussehen zu lassen als wären es p */
.ws-detail div.TextTeil {
	margin-bottom: 1rem;
}

.ws-detail.rec .description.head h1 i {
	color: saddlebrown; /* für den Osterhasen */
	background-color: greenyellow; /* für den Osterhasen */
	padding: 6px 4px;
	border-radius: 50%;
	transition: all 2s ease;
}

/* Osterhase wechselt beim Hover vom Sitzen zum Laufen */
.ws-detail.rec .description.head h1 i::before {
	content: "\f708";
	padding: 2px 4px;
}

.ws-detail.rec .description.head h1 i:hover::before {
	content: "\f709";
	padding: 2px 0;
}

/* falls .kontaktdaten am Ende von .head steht, braucht es weniger Abstand nach unten als üblich */
.ws-detail:is(.adr,.sem,.wfb) .head .kontaktdaten {
	margin-bottom: 15px;
}

/* Personen-Teaser für die Team-Seite - nutzt auch die Icons für Telefon und E-Mail */
.person {
	margin-top: 15px;
	margin-bottom: 15px;
	display: flex;
	flex-direction: column-reverse;
	justify-content: flex-end; /* führt bei flex-direction: column-reverse zu Ausrichtung oben im Container */
}

.person .person-img-wrapper {
	width: 100%;
	max-width: 150px;
	overflow: hidden;
	border-radius: 100%;
	border: 2px solid var(--eins);
	-webkit-transform: translateZ(0);
	margin-bottom: 15px;
}

.person img {
	width: 100%;
	max-width: 150px;
	border: 10px solid var(--hintergrund);
	border-radius: 100%;
	/* outline: 2px solid var(--eins); */
}

.ws-detail .head .fotos {
	display: block;
	width: 100%;
	height: 280px;
	margin-bottom: 30px;
}

/* falls es nur ein Bild gibt, Höhe anpassen an originale Seitenverhältnisse */
.ws-detail .head .fotos.single,
.ws-detail:is(.pra,.tec) .head .fotos.single {
	height: auto;
}


/* BEGINN Google Maps */
.ws-detail:is(.adr,.wfb) .head .fotos:hover {
	box-shadow: 0 0 10px rgba(138, 138, 138, 0.3);
}

.ws-detail .head .fotos .map-wrapper {
	width: 100%;
	height: 280px;
	background-color: var(--hintergrundzwei);
	border: 1px solid #999;
	overflow: auto;
}

.ws-detail .head .fotos #google_maps_placeholder {
	padding: 15px 15px 0;
}

.ws-detail .head .fotos #google_maps_placeholder p {
	margin-bottom: 15px;
	line-height: 1.3;
}

.ws-detail .head .fotos .map-wrapper p.control {
	margin-bottom: 0;
	padding: 10px 10px 2px 10px;
	height: 45px;
}

.ws-detail .head .fotos #google_maps_map {
	height: calc(100% - 45px); /* 45px für den Schalter zum Deaktivieren von Google Maps */
}

.ws-detail .head .fotos .map-wrapper iframe {
	width: 100%;
	height: 100%;
	border: none;
}
/* ENDE Google Maps */



/* Icons - zur Zeit nur für Literatur und Praxisbeispiele, die kein Foto haben */
.ws-detail:is(.lit,.pra) .head .icon {
	display: none;
}



/* SLIDER */
.carousel-wrapper {
	margin-bottom: 0;
	height: 280px;
}

.carousel-wrapper.short {
	margin: 0 auto;
	width: 250px;
	height: 280px;
}

.fotos.single .carousel-wrapper.short {
	height: auto;
}

/* vergrößerte Darstellung der Bilder */
/* .modal-backdrop.show {
	opacity: .65;
} */

#ws-detail-modal .modal-dialog {
	max-width: 530px;
	width: 530px;
	min-height: 600px;
	margin: 15px auto;
}

.ws-detail .carousel {
	width: 250px;
	height: 280px;
	padding-top: 0 !important;
}

#ws-detail-modal .modal-content {
	height: 100%;
	border: none;
}

#ws-detail-modal .modal-header {
	min-height: 50px;
	padding: 9px 15px;
	border-bottom: none;
}

#ws-detail-modal .modal-header .close {
	color: #046aa2;
	opacity: 1;
	padding: 2px 9px 4.5px;
	margin: 0 -9px 0 auto;
	border-radius: 100%;
}

#ws-detail-modal .close:not(:disabled):not(.disabled):is(:focus,:hover) {
	opacity: 1;
	color: #fff;
	background-color: #046aa2;
	outline: none;
}

#ws-detail-modal .modal-body {
	padding: 0 15px 5px;
}

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

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

.ws-detail .carousel .carousel-inner {
	width: 250px;
	padding: 0;
	margin: 0 auto;
	color: var(--schrift);
	background-color: var(--hintergrund);
}

.carousel-wrapper.short .carousel-inner {
	height: 280px;
	color: var(--schrift);
	background-color: var(--hintergrund);
}

.fotos.single .carousel-wrapper.short .carousel-inner {
	height: auto;
	color: var(--schrift);
	background-color: var(--hintergrund);
}

#ws-detail-modal .carousel .carousel-inner {
	height: 545px;
	margin: 0 auto;
	width: 500px;
}

.ws-detail .carousel .carousel-item {
	width: 250px;
	height: 280px;
	overflow: hidden;
}

.carousel-wrapper.short .carousel-item {
	height: 280px;
}

.fotos.single .carousel-wrapper.short .carousel-item {
	height: auto;
}

.modal-content .carousel .carousel-item {
	width: 500px;
	height: 545px;
	transition-duration: 0.8s; /* .6 - 1s passen für Slide, > 1s passen für Fade */
}

.modal-content .carousel .carousel-item .img-wrapper {
	width: 500px;
	height: 500px;
	/* overflow: hidden; */ /* evtl. benötigt bei nicht-quadratischen Bildern? */
}

.modal-content .carousel-caption {
	color: var(--schrift);
	bottom: -5px;
	width: 100%;
	left: 0;
	padding: 15px 0;
	background: #fff;
	line-height: 1.2;
}

#ws-slides .carousel-item {
	transition-duration: 0.8s; /* .6 - 1s passen für Slide, > 1s passen für Fade */
}

.ws-detail .carousel-item .img-wrapper {
	position: relative;
	width: 250px;
	height: 250px;
	overflow: hidden;
}

.ws-detail .carousel-item button.img-wrapper {
	background-color: var(--hintergrund);
	padding: 0;
	border: none;
}

.ws-detail .carousel-item button.img-wrapper:is(:hover,:focus,:active) {
	border: none;
	cursor: zoom-in;
}

.ws-detail .carousel-item button.img-wrapper .fa-magnifying-glass-plus {
	position: absolute;
	top: calc(50% - (1.5rem + 3px));
	left: calc(50% - 1.5rem);
	font-size: 2.5rem;
	padding: 12px;
	opacity: 0;
	color: #046aa2;
	background: transparent;
	-webkit-text-stroke: 2px #046aa2;
	-webkit-text-fill-color: #fff;
	font-weight: 700;
}

.ws-detail .carousel-item button.img-wrapper:is(:hover,:focus,:active) .fa-magnifying-glass-plus {
	opacity: 1;
}

.ws-detail .fotos.single .carousel-wrapper.short .carousel-item .img-wrapper,
.ws-detail .fotos.single .carousel-wrapper.short .carousel-item .img-wrapper img {
	height: auto;
}

/* https://www.sitepoint.com/community/t/problem-with-images-resizing-in-carousel/280578/5 */
/* https://www.mediaevent.de/css/img.html */
/* https://www.mediaevent.de/css/object-fit.html */
/* object-fit: contain wird von allen gängigen Browsern verstanden -> vereinfacht! Lue 02.08.2023 */
:is(.ws-detail,.modal-content) .carousel-item .img-wrapper img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.ws-detail .carousel-caption {
	left: 0;
	right: 0;
	padding-top: 5px;
	padding-bottom: 3px;
	color: var(--schrift);
	background-color: var(--hintergrund);
	bottom: 0;
	font-size: 1rem;
	line-height: 1;
}

.ws-detail .fotos.single .carousel-caption {
	position: relative;
}

.ws-detail .carousel-indicators {
	display: none;
}

.ws-detail :is(.carousel-control-prev,.carousel-control-next) {
	opacity: 1;
	width: 45px;
	bottom: 30px;
}

.modal-content :is(.carousel-control-prev,.carousel-control-next) {
	width: 20%;
	margin: 0 -15px;
}

:is(.ws-detail,.modal-content) :is(.carousel-control-prev,.carousel-control-next):is(:hover,:focus) {
	background: none;
	opacity: 1;
	outline: none;
}

/* .modal-content :is(.carousel-control-prev,.carousel-control-next):focus {
	outline: none;
} */

/* alle Karusselle mit < und > (auch außerhalb der Webservices!) */
:is(.carousel-control-prev-icon,.carousel-control-next-icon) {
	background-color: #fff;
	background-size: 50% 50%;
	border-radius: 100%;
	opacity: 0.5;
}

/* kleines Karussell */
.ws-detail :is(.carousel-control-prev-icon,.carousel-control-next-icon) {
	width: 32px;
	height: 32px;
}

/* großes Karussell im modalem Dialog */
#ws-detail-modal :is(.carousel-control-next-icon, .carousel-control-prev-icon) {
	width: 48px;
	height: 48px;
}

.carousel-control-next-icon {
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23046aa2' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath d='M2.75 0l-1.5 1.5L3.75 4l-2.5 2.5L2.75 8l4-4-4-4z'/%3e%3c/svg%3e");
}

.carousel-control-prev-icon {
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23046aa2' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath d='M5.25 0l-4 4 4 4 1.5-1.5L4.25 4l2.5-2.5L5.25 0z'/%3e%3c/svg%3e");
}

.carousel-control-prev:is(:hover,:focus,:active) .carousel-control-prev-icon,
.carousel-control-next:is(:hover,:focus,:active) .carousel-control-next-icon {
	border-radius: 100%;
	border: 3px solid #046aa2;
	opacity: 1;
}
/* Ende SLIDER */


.ws-detail .head .text {
	display: block;
}

.ws-detail .info {
	font-size: 1.125rem;
}

.biggerFont .ws-detail .info.sl-only {
	font-size: 1.375rem;
}

/* In REC Urteil kommen sehr lange Zitate vor - Versuch, die Textwüste zu beleben */
.ws-detail blockquote {
	margin: 0 15px 30px;
	padding: 0 25px;
	page-break-inside: auto;
	border: none;
}

/* .ws-detail .description.main h2:not(:first-of-type) { */
/* Lue: Vor der h2 kann noch Fließtext kommen, z. B. bei IV/0019, daher Abstand vor allen Überschriften */
/* .ws-detail .description.main h2 {
	margin-top: 1.5rem;
} */

.ws-detail .description.main :not(:first-child):is(h2) {
	margin-top: 1.5rem;
}

.ws-detail h3 {
	font-weight: 400;
}

/* Inline-Überschrift muss die gleiche Größe wie der Text dahinter haben */
.ws-detail :is(h2,h3,h4).inline {
	font-size: 1.125rem;
	font-weight: 600;
	display: inline;
}

.ws-detail .indent :is(h2,h3,h4),
.ws-detail .description.main .indent :is(h2,h3,h4):not(:first-of-type),
.ws-detail .description.main .indent :not(:first-child):is(h2) {
	font-weight: 600;
	font-size: 1.125rem;
	display: inline-block;
	width: 8rem;
	vertical-align: top; /* notwendig, wenn der folgende p.inline mehr als eine Zeile hat */
	margin: 0 0 10px;
	line-height: 1.3;
}

.ws-detail p.inline {
	font-size: 1.125rem;
	font-weight: 400;
	display: inline;
	line-height: 1.3;
}

.biggerFont .ws-detail :is(h2,h3,h4).inline {
	font-size: 1.375rem;
}

.biggerFont .ws-detail .indent :is(h2,h3,h4) {
	font-weight: 600;
	font-size: 1.375rem;
	width: 8rem;
	margin: 0 0 10px;
}

.biggerFont .ws-detail p.inline {
	font-size: 1.375rem;
}

.ws-detail .indent p.inline,
.ws-detail.rec .description.head p.inline {
	display: inline-block;
	width: calc(100% - 8.5rem);
	vertical-align: top; /* notwendig zur korrekten vertikalen Ausrichtung mehrzeiliger p relativ zur links davorstehenden Überschrift */
	margin: 0 0 10px;
	line-height: 1.3;
	hyphens: auto;
	word-break: break-word;
}

.ws-detail table {
	border-collapse: collapse;
	margin: 15px auto 30px;
	width: 100%;
}

/* jede zweite Tabellenzeile hellblau einfärben */
.ws-detail table tr:nth-of-type(even) {
	background-color: var(--hintergrundzwei);
}

/* .akkordeon.tab .card-body table tr, */
.ws-detail table :is(th,td) {
	border: 1px solid var(--bordergrau);
}

.ws-detail table :is(th,td) {
	padding: 5px;
	vertical-align: top;
}

.ws-detail table :is(th,td):first-child {
	padding: 5px 5px 5px 10px;
}

/* leere Tabellenzellen brauchen keine Breite, kostet nur wertvollen Platz */
.ws-detail table :is(th,td):empty {
	padding: 0;
	border-left: none;
	border-right: none;
}

/* falls die erste Zelle leer ist, linken Border anzeigen */
.ws-detail table :is(th,td):first-child:empty {
    border-left: 1px solid var(--bordergrau);
}

.ws-detail table :is(th,td):last-child {
	border-right: 1px solid var(--bordergrau);
}

.ws-detail .schlagworte {
	padding: 0;
	margin-top: 5px;
	margin-bottom: 30px;
}

.ws-detail ul li {
	/* etwas geringerer Abstand als auf Fließtextseiten */
	padding-bottom: 5px;
}

.ws-detail.rec .description.head .schlagworte {
	display: inline-block;
	width: calc(100% - 8.5rem);
	margin: 0 0 5px;
	padding: 0;
	line-height: 1.3;
}

.ws-detail .description.main .indent {
	margin-bottom: 30px;
}

/* für Projektart: Ohne Zeilenumbruch vor Liste, stattdessen mit Einrückung */
.ws-detail.for .description.main .indent .schlagworte {
	width: calc(100% - 8.5rem);
	display: inline-block;
	padding: 0;
	margin: 0;
	line-height: 1.3;
}

/* wir übernehmen die Zeilenumbrüche aus dem Original der Inklusionsvereinbarung (Feld textstruk_iv) */
.ws-detail.iv .description.main .TextTeil {
	 white-space: pre-line;
}

.ws-detail .schlagworte li {
	display: inline;
}

/* .ws-list li .really-bold {
	font-size: 1rem;
	font-weight: 700;
	vertical-align: top;
	color: #4b4a48;
} */

.ws-list li .really-bold,
.ws-detail.rec .description.head p.inline .really-bold,
.ws-detail.tec h1 .really-bold,
.ws-detail .schlagworte li .really-bold {
	/* font-size: 1rem; */
	font-size: 0.85em;
	font-weight: 700;
	vertical-align: top;
	color: #4b4a48;
	padding: 0 0.25rem;
}

.ws-list li .really-bold.blue,
.ws-detail .schlagworte li .really-bold.blue,
.ws-detail.rec .description.head p.inline .really-bold.blue,
.ws-detail.tec h1 .really-bold.blue {
	color: #046aa2; 
}

.ws-detail.rec .description.head .schlagworte li {
	display: inline;
	margin: 0;
	padding: 0 0 0 2px;
}

.ws-detail .schlagworte li::before {
	display: none;
}

/* externer Link z. B. TEC Produktinformationen des Herstellers / Vertriebs */
.ws-detail .extern {
	display: block;
	overflow: hidden;
}

.ws-detail .extern .icon {
	float: left;
}

.ws-detail .extern i,
.ws-detail .extern .icon i {
	padding-left: 0px;
	padding-right: 8px;
	font-weight: 400;
}

.ws-detail .extern .text {
	display: block;
	overflow: hidden;
}

.ws-detail .maps .fa-map {
	padding-left: 0;
	padding-right: 14px;
	color: #046aa2;
}

.ws-detail .noselling .fa-circle-exclamation {
	color: #B31B34;
	padding-left: 0;
	padding-right: 5px;
}

.ws-detail .kontaktdaten :is(.telefon,.mobil,.fax,.mail,.homepage,.linkedin) {
	padding-left: 35px;
	display: block;
	margin-left: 0;
	text-indent: -17px;
}

.biggerFont .ws-detail .kontaktdaten :is(.telefon,.mobil,.fax,.mail,.homepage,.linkedin) {
	padding-left: 45px;
	text-indent: -22px;
}

.ws-detail .kontaktdaten .mail a,
.ws-detail .kontaktdaten .homepage a {
    word-break: break-all;
}

.ws-detail .kontaktdaten :is(.telefon,.mobil,.fax,.mail,.homepage,.linkedin)::before {
	font-family: "Font Awesome 6 Pro";
	font-weight: 900;
	color: var(--eins);
	background: var(--hintergrund);
	font-size: 1.125rem;
	position: relative;
	top: 1.5px;
	display: inline-block;
}

.biggerFont .ws-detail .kontaktdaten :is(.telefon,.mobil,.fax,.mail,.homepage,.linkedin)::before {
	font-size: 1.75rem;
}

/* falls auch die kostenpflichtigen Icons zur Verfügung stehen */
.ws-detail .kontaktdaten .telefon::before {
	content: "\f879";
	margin-right: 12px;
	font-weight: 400;
	font-family: "Font Awesome 6 Pro";
}

.ws-detail .kontaktdaten .mobil::before {
	content: "\f3cd";
	margin-right: 13px;
	font-size: 20px;
	font-weight: 400;
	font-family: "Font Awesome 6 Pro";
}

.ws-detail .kontaktdaten .fax::before {
	content: "\f1ac";
	margin-right: 12px;
	font-family: "Font Awesome 6 Pro";
	font-weight: 400;
}

.ws-detail .kontaktdaten .homepage::before {
	content: "\f35d";
	margin-right: 11px;
	font-family: "Font Awesome 6 Pro";
	font-weight: 400;
}

.ws-detail .kontaktdaten .linkedin::before {
	content: "\f08c";
	margin-right: 11px;
	font-family: "Font Awesome 6 Brands";
	font-weight: 400;
}

.ws-detail .kontaktdaten .mail::before {
	content: "\f0e0";
	margin-right: 11px;
	margin-left: 0;
	font-family: "Font Awesome 6 Pro";
	font-weight: 400;
}


/* BEGINN Akkordeon-Tab: "normales" Akkordeon auf Kleingeräten, Tab-Panel auf Großgeräten */
.akkordeon.tab {
	margin: 30px 0;
}

.akkordeon.tab:is(.search-detail,.bs-5) {
	border-bottom: 2px solid #046aa2;
	margin: 45px 0 15px;
}

.biggerFont .ws-detail.tec .akkordeon.tab {
	display: block;
}

/* für Detailsuche REC */
.akkordeon.tab:is(.search-detail,.bs-5) .card-header h2 {
	margin-top: 0;
}

/* Zeile mit Tabs auf Kleingeräten nicht anzeigen */
.akkordeon.tab .tab-row {
	display: none;
	border-bottom: 2px solid #046aa2;
}

.akkordeon.tab ul.tab-row {
	display: none;
	width: 100%;
	border-bottom: 2px solid #046aa2;
	padding: 0;
	margin: 0;
}

.akkordeon.tab:is(.search-detail,.bs-5) .tab-row {
	/* display: inline-block; */
	display: flex;
	gap: 5px;
	border-bottom: 2px solid #046aa2;
}

.tab-row li::before {
	display: none;
}

.tab-row > li {
	display: inline;
}

.akkordeon.tab .tab-row :is(h2,h3,h4) {
	display: inline;
}

.akkordeon.tab:is(.search-detail,.bs-5):is(.search-detail,.bs-5) ul.tab-row .nav-link {
	display: inline; /* oder inline-block ? */
}

.akkordeon.tab .tab-row :is(h2,h3,h4) .btn {
	background: #fff;
	color: #046aa2;
	padding: 5px 10px 7px;
	font-size: 22px;
	font-weight: 400;
	border-radius: .25rem .25rem 0 0;
	border-color: #046aa2 #046aa2 #fff;
	margin-bottom: -3px; /* -1.5px? -2px? 1.75px?*/
	border-width: 2px;
}

.akkordeon.tab .tab-row :is(h2,h3,h4) .btn.collapsed {
	background: #fff;
	color: #4b4a48;
	border-color: #dee2e6 #dee2e6 transparent;
	margin-bottom: 0;
	padding-bottom: 5px;
}

.akkordeon.tab:is(.search-detail,.bs-5) .nav-tabs.tab-row .nav-link {
	background: #fff;
	color: #4b4a48;
	padding: 5px 12px 7px;
	font-size: 22px;
	font-weight: 600;
	border-radius: .25rem .25rem 0 0;
	border-width: 2px;
	border-color: #dee2e6 #dee2e6 transparent;
	margin-bottom: 0;
}

.akkordeon.tab:is(.search-detail,.bs-5) .nav-tabs.tab-row .nav-link.active {
	background: #fff;
	color: #046aa2;
	padding: 5px 12px 9px;
	border-color: #046aa2 #046aa2 #fff;
	margin-bottom: -2px;
}


.akkordeon.tab .tab-row :is(h2,h3,h4) :is(.btn,.btn.collapsed):is(:hover,:focus,:active),
.akkordeon.tab:is(.search-detail,.bs-5) .nav-tabs.tab-row :is(.nav-link,.nav-link.active):is(:hover,:focus,:active) {
	text-decoration: underline;
	box-shadow: none !important;
	color: #046aa2;
}

.akkordeon.tab:is(.search-detail,.bs-5) .tab-content {
	border-radius: 0;
	border-top: none;
	border-left: 2px solid #046aa2;
	border-right: 2px solid #046aa2;
	padding: 15px;
}

/* gewünscht für LIT, z. B. R/ZA0379/0001 */
.ws-detail .akkordeon.tab .card h4 {
	font-weight: 400;
}

/* notwendig für Abstand vor 2. und weiteren Überschriften, wenn <div class="TextTeil"> entfällt */
/* .ws-detail .card-body :is(h3, h4):not(:first-child) { */ 
.ws-detail .card-body .akkordeon-text :not(:first-child):is(h3,h4) {
	margin-top: 1rem;
}

.biggerFont .ws-detail .akkordeon.tab .collapse:not(.show) {
    display: block;
}

.biggerFont .ws-detail .akkordeon.tab .card {
	border-top: none;
}

.ws-detail .foot {
	margin-top: 30px;
}
/* Ende DETAILANSICHTEN */
/* Ende ALLE GERÄTEGRÖSSEN */








/* Erweiterte Suche LIT + REC: Erscheinungsjahr */
@media (min-width: 414px) {
	.form-content.detail-search fieldset :is(.left,.right) {
		width: 90%;
	}
}



@media (min-width: 576px) {
	/* Erweiterte Suche LIT + REC: Erscheinungsjahr */
	.form-content.detail-search fieldset :is(.left,.right) {
		width: 80%;
	}
	
	/* BEGINN WS-Ergebnislisten */
	.ws-list .ws-text,
	.ws-list .ws-mixed {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		gap: 15px;
	}
	
	.ws-list .ws-mixed .count {
		flex: 0 0 45px;
		max-width: 45px;
	}
	
	.biggerFont .ws-list .ws-mixed .count {
		flex: 0 0 52px;
		max-width: 52px;
	}
	
	/* Link zu Online-Publikationen einrücken */
	.ws-list .ws-mixed.online-pub {
		margin-left: 60px;
		border-top: none;
		padding: 0;
		margin-bottom: 15px;
	}
	
	.biggerFont .ws-list .ws-mixed.online-pub {
		margin-left: 65px;
	}
	/* ENDE WS-Ergebnislisten */


	/* BEGINN WS-Detailansicht */
	.ws-detail .head .fotos {
		width: 100%;
		height: 330px;
		overflow: hidden; /* noch eine IE Extrawurst */
	}
	
	/* Google Maps */
	.ws-detail .head .fotos .map-wrapper {
		width: 100%;
		height: 100%;
	}
	
	/* Beginn SLIDER */
	.carousel-wrapper {
		height: 330px;
	}
	
	.carousel-wrapper.short {
		margin: 0 auto;
		width: 300px;
		height: 330px;
	}
	
	.fotos.single .carousel-wrapper.short {
		height: auto;
	}
	
	.ws-detail .carousel {
		width: 300px;
		height: 330px;
		padding-top: 0 !important;
	}
	
	.ws-detail .fotos.single .carousel {
		height: auto;
	}
	
	.ws-detail .carousel .carousel-inner {
		width: 300px;
	}
	
	.carousel-wrapper.short .carousel-inner {
		height: 330px;
	}
	
	.fotos.single .carousel-wrapper.short .carousel-inner {
		height: auto;
	}
	
	.ws-detail .carousel .carousel-item {
		width: 300px;
		height: 330px;
	}
	
	.carousel-wrapper.short .carousel-item {
		width: 300px;
		height: 330px;
		overflow: hidden;
	}
	
	.fotos.single .carousel-wrapper.short .carousel-item {
		height: auto;
	}
	
	.ws-detail .carousel-item .img-wrapper {
		width: 300px;
		height: 300px;
	}
	
	
	
	.ws-detail .fotos.single .carousel-wrapper.short .carousel-item .img-wrapper,
	.ws-detail .fotos.single .carousel-wrapper.short .carousel-item .img-wrapper img {
		height: auto;
	}
	
	.ws-detail .carousel-item .img-wrapper a:is(:focus,:active) img {
		border: 1px solid #046aa2;
	}
	/* Ende SLIDER */
	
	
	.akkordeon.tab .card-body table :is(th,td),
	.akkordeon.tab .card-body table :is(th,td):first-child,
	.akkordeon.tab .card-body table :is(th,td):last-child {
		padding: 10px;
	}
	
	.akkordeon.tab .card-body table :is(th,td):empty {
		padding: 0;
	}
}








@media (min-width: 768px) {
	/* Sonderfall ISO-Suche Hilfsmittel */
	h3 .iso-code {
		float: left;
		margin-right: 10px;
	}

	/* Suche Sortier- und Filter-Box über der Liste */
	.wssortbox.maincol {
		width: 65%;
		margin: 0;
	}

	/* Button zum Auslösen der Hinweise in der Erweiterten Suche */
	.form-content.detail-search .extended-search-popover {
		opacity: 0.65;
	}

	.form-content.detail-search .extended-search-popover:is(:hover,:focus,:active) {
		opacity: 1;
	}

	.popover-header {
		padding: 10px 15px;
		font-size: 1.125rem;
		hyphens: none;
	}

	/* Popover mit den Hinweisen zu den Feldern in der Erweiterten Suche */
	.popover-body {
		padding: 10px 15px;
		font-weight: 400;
		font-size: 1.125rem;
		line-height: 1.2;
		hyphens: none;
	}
	
	.popover-body p {
		padding: 0;
		font-weight: 400;
		font-size: 1.125rem;
		line-height: 1.2;
		hyphens: none;
		margin-bottom: 1rem;
	}
	
	/* Erweiterte Suche LIT + REC: Erscheinungsjahr */
	/* ab dieser Breite zweispaltiges Layout */	
	.form-content.detail-search fieldset :is(.left, .right) {
		margin-right: 0;
		display: inline-block;
		width: 100%;
	}
	
	.form-content.detail-search fieldset :is(.left,.right) label {
		width: 15%;
	}
	
	
	
	/* BEGINN WS-Ergebnislisten */
	.ws-list .ws-mixed .d-flex.flex-column.flex-md-row {
		gap: 15px;
	}
	
	.ws-list .ws-text,
	.ws-list .ws-mixed,
	.ws-list .ws-mixed .d-flex.flex-column.flex-md-row {
		gap: 15px;
	}
	
	.ws-list .ws-mixed .image:is(.foto,.icon,.icon-font) {
		flex: 0 0 150px;
		margin: 0;
	}
	
	/* vermutlich notwendig für die quadratischen Standard-Icons innerhalb von flex-Containern */
	.ws-list .ws-mixed .image.icon {
		height: 150px;
		position: relative; /* erforderlich um gestackte Icons absolute positionieren zu können */
	}
	
	:is(.ws-list .ws-mixed,.ws-detail.lit .head) .d-none.d-md-block.image.icon.sl-only,
	:is(.ws-list .ws-mixed,.ws-detail.lit .head) .ws-mixed .d-none.d-md-flex.image.icon.sl-only {
		display: none !important;
	}
	
	.biggerFont :is(.ws-list .ws-mixed,.ws-detail.lit .head) .d-none.d-md-block.image.icon.sl-only {
		display: block !important;
	}
	
	.biggerFont :is(.ws-list .ws-mixed,.ws-detail.lit .head) .d-none.d-md-flex.image.icon.sl-only {
		display: flex !important;
	}
	
	.biggerFont :is(.ws-list .ws-mixed,.ws-detail.lit .head) .d-none.d-md-block.image.icon.sl-none,
	.biggerFont :is(.ws-list .ws-mixed,.ws-detail.lit .head) .d-none.d-md-flex.image.icon.sl-none {
		display: none !important;
	}
	
	.biggerFont .ws-list .ws-mixed .image.icon-font {
		height: 54px;
	}
	
	/* ist für Literatur unerwünschte Extrawurst - für Seminare? */
	/* .biggerFont .ws-list .ws-mixed .image.icon img {
		display: none;
	} */
	
	/* .biggerFont .ws-list .ws-mixed .image.icon {
		top: 0;
		left: 0;
		margin-top: 0;
		font-size: 85px;
	} */
	
	.ws-list .ws-mixed .image.foto {
		max-height: 225px;
		align-self: flex-start; /* enthaltene Bilder werden im <span> oben angeordnet */
	}
	
	/* BEGINN LIT Online-Publikationen */
	/* Icon für LIT Online-Publikationen */
	.ws-list .ws-mixed .image.icon-font {
		color: var(--schrift);
		text-align: center;
		padding: 5px 0;
		font-size: 24px;
		border: 1px solid var(--bordergrau);
		opacity: 0.55;
	}
	
	.ws-list .ws-mixed:is(:hover,:focus,:active) .image.icon-font {
		opacity: 0.75;
	}
	
	.ws-list .ws-mixed.online-pub .text .icon-font i, /* ist dieser Selektor notwendig? */
	.ws-list .ws-mixed.online-pub .image.icon-font i {
		font-weight: 400;
		font-size: 32px;
		color: #45a16b;
	}
	
	.biggerFont .ws-list .ws-mixed.online-pub .image.icon-font i {
		font-weight: 900;
		font-size: 40px;
		padding-right: 5px;
	}

	.ws-list .ws-mixed:is(:hover,:focus,:active) .image.icon-font i {
		opacity: 1;
		color: #27754a;
	}

	.ws-list .ws-mixed.online-pub .image.icon-font {
		/* schon im ungehoverten Zustand deckend */
		opacity: 1;
	}
	
	.ws-list .ws-mixed.online-pub .text .title {
		padding-top: 8px;
	}
	/* ENDE LIT Online-Publikationen */
	
	.ws-list .ws-mixed .image img {
		width: 150px;
		/* die Höhe lassen wir wegen der unterschiedlich hohen Fotos von Hilfsmitteln und Praxisbeispielen offen */
	}
	
	/* Icon für Online-Publikationen */
	.ws-list .ws-mixed .image.icon img {
		height: 150px;
	}
	
	.ws-list .ws-mixed:is(:hover,:focus,:active) .image.icon {
		opacity: 0.8;
	}
	
	.ws-list .ws-mixed .image.foto img {
		opacity: 0.85;
	}
	
	.ws-list .ws-mixed:is(:hover,:focus,:active) .image.foto img {
		opacity: 1;
	}
	/* ENDE WS-Ergebnislisten */
	
	
	
	
	/* Beginn DETAILANSICHTEN */
	/* Alle Detailansichten mit Foto, Icon oder Karte */
	.ws-detail:is(.adr,.lit,.pra,.tec,.wfb) .head {
		display: flex;
		flex-direction: row;
		gap: 15px;
		/*  margin-bottom: 0 für for, foe, mas */
		/*  margin-bottom: 30px für .iv, .rec, .sem */
		margin-bottom: 15px;
	}
	
	/* notwendig für &shy; in Wörtern wie Eingliederungsmanagement oder Beschäftigungssicherungszuschuss, 
	insbesondere wenn diese in der rechten Spalte neben einem Image oder eine Google Map stehen */
	.ws-detail h1 {
		hyphens: manual;
		word-break: break-word;
	}
	
	/* Bei ADR und WFB wird die Spalte wegen Google Maps schmaler, daher automatische Trennung */
	.ws-detail:is(.adr,.wfb) h1 {
		hyphens: auto;
		word-break: break-word;
	}
	
	/* Spalte für Bilder (Hilfmittel + Praxisbeispiele) */
	.ws-detail .head .fotos {
		flex: 0 0 250px;
		height: 100%;
		margin-top: 5px; /* notwendig, weil Schrift der <h1> tiefer angezeigt wird als das Bild */
	}
	
	.ws-detail:is(.pra,.tec) .head .fotos {
		height: 330px;
	}
	
	/* Spalte für Karte */
	.ws-detail:is(.adr,.wfb) .head .fotos {
		height: 360px;
	}
	
	/* Google Maps */
	.ws-detail .head .fotos .map-wrapper {
		width: 100%;
		height: 360px;
	}
	
	/* Spalte mit Text rechts */
	.ws-detail:is(.pra,.adr,.tec,.wfb) .head .text {
		flex: auto;
	}
	
	/* Icons, zur Zeit nur für Dokumentarten in Literatur */
	.ws-detail:is(.lit,.pra) .head .icon {
		display: block;
		flex: 0 0 120px;
		position: relative;
		height: 100%;
		border: 1px solid var(--bordergrau);
	}
	
	.ws-detail:is(.lit,.pra) .head .icon img {
		opacity: 0.75;
		width: 100%;
		height: auto;
	}	
	
	/* Bild-Slider */
	.carousel-wrapper {
		height: 360px;
	}
	
	/* niedriger, wenn es nur ein Bild ist und die Thumbnails nicht vorhanden sind */
	.carousel-wrapper.short {
		height: 280px;
		width: 250px;
	}
	
	.fotos.single .carousel-wrapper.short {
		height: auto;
		width: 250px;
	}
	
	.ws-detail .carousel {
		width: 250px;
		height: 280px;
	}
	
	.ws-detail .carousel .carousel-inner {
		width: 250px;
	}
	
	.carousel-wrapper.short .carousel-inner {
		height: 280px;
	}
	
	.ws-detail .carousel .carousel-item {
		width: 250px;
		height: 280px;
	}
	
	.carousel-wrapper.short .carousel-item {
		width: 250px;
		height: 280px;
	}
	
	.ws-detail .carousel-item .img-wrapper {
		width: 250px;
		height: 250px;
	}
	
	/* Thumbnails für Slidersteuerung */
	.ws-detail .carousel-indicators {
		display: flex;
		margin: 0;
		padding: 0;
		top: calc(100% + 15px);
	}
	
	.ws-detail .carousel-indicators li {
		text-indent: 0;
		background-color: transparent;
		border: none;
		margin: 5px 5px 0 0;
		display: block;
		height: 15px;
		width: 15px;
		padding: 5px;
		opacity: 1; /* überschreibt Bootstrap CSS */
	}
	
	.ws-detail .carousel-indicators li:last-of-type {
		margin: 5px 0 0 0;
	}
	
	.ws-detail .carousel-indicators li a:focus {
		outline: none;
	}
	
	.ws-detail .carousel-indicators li .indicator-round {
		width: 13px;
		height: 13px;
		border-radius: 50%;
		border: 7.2px solid var(--eins);
		display: block;
		opacity: 0.5;
	}
	
	.ws-detail .carousel-indicators .active .indicator-round {
		opacity: 1;
	}
	
	.carousel-indicators li:hover .indicator-round,
	.carousel-indicators li a:focus .indicator-round {
		border-color: var(--hintergrund);
		outline: 2px solid var(--eins);
	}
	
	.ws-detail .carousel-indicators li a:focus .indicator-round {
		outline: 3px solid var(--eins);
		opacity: 1;
		border: 2px solid var(--eins);
		outline-offset: 3px;
	}
	
	.ws-detail .carousel-indicators li.active a:focus .indicator-round {
		border: 7.2px solid var(--eins);
	}
	/* Ende Slider */
	
	
	/* Automatische Trennung bei eingerückten Absätzen aufheben */
	.ws-detail .indent p.inline,
	.ws-detail.rec .description.head p.inline {
		hyphens: manual;
		word-break: break-word;
	}
	
	
	
	
	
	/* Akkordeon auf Kleingeräten, Tabs ab 768px */
	.akkordeon.tab {
		border-bottom: 2px solid #046aa2;
		margin: 45px 0 15px;
	}
	
	.biggerFont .ws-detail .akkordeon.tab {
		border-bottom: 0;
	}
	   
	.akkordeon.tab .tab-row {
		display: block;
	}
	
	.akkordeon.tab ul.tab-row {
		display: inline-block;
	}
	
	.akkordeon.tab .tab-row :is(h2,h3) {
		display: inline;
	}
	
	.akkordeon.tab .tab-row p {
		margin: 0;
	}
	
	.akkordeon.tab .card,
	.akkordeon.tab .card.last {
		border-radius: 0;
		border-top: none;
		border-left: 2px solid #046aa2;
		border-right: 2px solid #046aa2;
		padding: 0 15px;
	}
	
	.biggerFont .ws-detail .akkordeon.tab .card,
	.biggerFont .ws-detail .akkordeon.tab .card.last {
		border: none;
		padding: 0;
	}
	
	.akkordeon.tab .card-header {
		/* nicht sichtbar + nicht hörbar: */
		/* display: none; */
		/* hörbar, aber nicht sichtbar */
		border: 0;
		clip: rect(0,0,0,0);
		height: 1px;
		margin: -1px;
		overflow: hidden;
		padding: 0;
		position: absolute;
		width: 1px;
	}
	
	.akkordeon.tab .card-body {
		padding: 15px 0;
		min-height: 120px;
	}
	
	.biggerFont .ws-detail .akkordeon.tab .card-body {
		padding: 0;
	}
	/* Ende DETAILANSICHTEN */
}




@media (min-width: 992px) {
	.ap-searchsortcol {
		padding-right: 5px;
		max-width: 325px;
	}

	.ap-searchresultcol {
		padding-left: 5px;
		padding-right: 5px;
	}
	
	
	
	/* Suche, linke Spalte zum Filtern */
	#accordion-search-facets a {
		display: none;
	}
	
	#accordion-search-facets .heading {
		display: block;
	}	
	
	#accordion-search #accordion-search-facets div.ap-searchfacetcol {
		display: block;
		margin: 15px 0 30px;
	}
	
	
	
	
	/* BEGINN WS Ergebnislisten */
	/* Online-Publikationen */
	.ws-list .ws-mixed.online-pub {
		margin-left: 53px;
	}
	
	.ws-list .ws-mixed.online-pub .image.icon-font {
		font-size: 32px;
	}
	
	.ws-list .ws-mixed.online-pub .text .title {
		padding-top: 12px;
	}	
	/* ENDE WS-Ergebnislisten */


	/* WS DETAILANSICHT - ab hier zweispaltig */
	/* Karte von Google Maps */
	.ws-detail.adr .head .fotos, 
	.ws-detail.wfb .head .fotos {
		width: 240px;
		min-width: 240px;
		/* margin: 5px 0 30px 15px; */
	}
	
	.ws-detail:is(.adr,.pra,.tec,.wfb) .head .text {
		flex: auto; /* notwendig? */
	}
	
	/* .modal-backdrop.show {
		opacity: .65;
	} */
	
	.akkordeon.tab .tab-row :is(h2,h3,h4) .btn {
		font-size: 20px;
	}
}



@media (min-width: 1200px) {
	.ap-searchsortcol {
		padding-right: 15px;
		max-width: 375px;
	}

	.ap-searchresultcol {
		padding-left: 15px;
		padding-right: 15px;
	}
	
	.ws-list .ws-mixed.online-pub {
		margin-left: 60px;
	}
	
	/* Icons und Fotos größer */
	.ws-list .ws-mixed .image:is(.foto,.icon,.icon-font) {
		flex: 0 0 180px;
		width: 180px;
		max-width: 180px;
	}
	
	/* notwendig in Abhängigkeit davon, ob umgebender Container flex oder block ist und ob multiple Icons enthalten sind */
	.ws-list .ws-mixed .image.icon {
		height: 180px;
		overflow: hidden;
	}
	
	.ws-list .ws-mixed .image.foto {
		max-height: 270px;
	}
	
	.ws-list .ws-mixed .image img {
		width: 180px;
	}
	
	.ws-list .ws-mixed .image.icon img {
		height: 180px;
	}
	
	/* Zusatz-Icon für Leichte Sprache bei Info-Texten und bei Literatur-Webservices */
	.ws-list .ws-mixed .image.icon.leichte-sprache .fa-book-open-reader {
		font-size: 45px;
		padding: 3px 5px 7px;
	}
	
	.ws-detail .head h1 {
		font-size: 2rem;
	}
	
	.biggerFont .head h1 {
		font-size: 2.4rem;
	}
	
	.ws-detail .head .fotos {
		width: 300px;
		min-width: 300px;
	}
	
	.ws-detail:is(.pra,.tec) .head .fotos {
		height: 380px;
	}
	
	/* Google Maps */
	.ws-detail:is(.adr,.wfb) .head .fotos {
		width: 300px;
		min-width: 300px;
		height: 410px;
	}
	
	.ws-detail .head .fotos .map-wrapper {
		/* height: 410px; */ /* bei dieser Höhe entsteht ein kleiner schwarzer Strich zwischen Karte und Schalter */
		height: 409px;
	}

	.carousel-wrapper {
		height: 410px;
	}
	
	/* niedriger, wenn es nur ein Bild ist und die Thumbnails nicht vorhanden sind */
	.carousel-wrapper.short {
		height: 330px;
		width: 300px;
	}
	
	.fotos.single .carousel-wrapper.short {
		width: 300px;
	}
	
	.ws-detail .carousel {
		width: 300px;
		height: 330px;
	}
	
	.ws-detail .carousel .carousel-inner {
		width: 300px;
	}
	
	.carousel-wrapper.short .carousel-inner {
		height: 330px;
	}
	
	.ws-detail .carousel .carousel-item {
		width: 300px;
		height: 330px;
	}
	
	.carousel-wrapper.short .carousel-item {
		width: 300px;
		height: 330px;
	}
	
	.ws-detail .carousel-item .img-wrapper {
		width: 300px;
		height: 300px;
	}
	
	.ws-detail .carousel-indicators li {
		margin: 5px 10px 0 0;
	}
	
	.akkordeon.tab .tab-row :is(h2,h3,h4) .btn {
		font-size: 22px;
	}
	
	
	
	/* Erweiterte Suche LIT + REC: Erscheinungsjahr */
	.form-content.detail-search fieldset :is(.left,.right) label {
		width: 15%;
	}
}



@media (prefers-color-scheme: dark), (inverted-colors: inverted) {
	/* dunkles Farbschema für die Nacht oder bei manchen Sehbehinderungen */
	.ws-list a:hover {
		box-shadow: none;
		/* outline: 2px solid var(--eins); */
		outline: 2px solid #32a852;
	}
	
	/* Ergebnisliste */
	.ws-list .info {
		color: #fff;
	}
	
	.ws-list .ws-mixed .image.icon img,
	.ws-list .ws-mixed .image.icon img.portal,
	.ws-detail:is(.lit,.pra) .head .icon img {
		filter: invert(1) saturate(8) hue-rotate(180deg) /* kehrt schwarz nach weiß um und die Farben des REHADAT-Qudrats wieder zurück */
	}
	
	.ws-list .ws-mixed .image.icon.leichte-sprache .fa-book-open-reader {
		color: #0fb353;
	}
	
	/* .ws-list .ws-mixed:is(:hover, :focus, :active) .image.icon img,
	.ws-list .ws-mixed:is(:hover, :focus, :active) .image.icon img.portal {
		opacity: 0.85;
	} */
	
	.ws-list .ws-mixed .image.icon img.green,
	.ws-detail.lit .description.head .image.icon img.green {
		filter: invert(66%) sepia(11%) saturate(4092%) hue-rotate(72deg) brightness(99%) contrast(68%);
		background: none;
		opacity: 0.9;
	}
	
	.ws-list .ws-mixed:is(:hover,:focus,:active) .image.icon img.green {
		filter: invert(78%) sepia(6%) saturate(3615%) hue-rotate(69deg) brightness(99%) contrast(100%);
		background: none;
		opacity: 0.9;
	}
	
	/* Detailansicht */
	/* modales Karussell */
	#ws-detail-modal .modal-content,
	#ws-detail-modal .carousel-caption {
		background-color: var(--hintergrunddrei);
	}
	
	.akkordeon .card,
	.akkordeon.tab .card {
		background-color: #000;
		color: #fff;
	}
	
	.akkordeon.tab .tab-row .btn {
		color: #38b3fa;
		background: #000;
		border-bottom-color: #000;
	}
	
	.akkordeon.tab .tab-row .btn.collapsed {
		color: #fff;
		background: #000;
	}
	
	.akkordeon.tab .tab-row :is(.btn,.btn.collapsed):is(:hover,:focus,:active) {
		color: #38b3fa;
	}
	
	/* Tabellen in Detailansichten */
	.ws-detail table :is(th,td) {
		border: 1px solid #999;
	}
	
	/* Erweiterte Suche */
	.form-content.detail-search .extended-search-popover {
		opacity: 1;
	}
	
	.form-content.detail-search .extended-search-popover:is(:hover,:focus,:active) i {
		outline: 2.5px solid #fff;
		border-radius: 100%;
	}
	
	.select2-results__option {
		background: #171717;
	}
}