/* Bem.: Guido 17.11.2020 (Stand):
	Portalspezifische Formatierungen:
	Strukturaufbau analog zu REHADAT-standard.css soweit es geht
   Bem.: Britta 03.04.2022:
    Die Formatierungen für die Homepage stehen nun in der elan-homepage.css
	... */
:root {
	/* geerbt von standard.css: */
	/* --schrift: #4b4a48;
	--hintergrund: #fff;
	--hintergrundzwei: #e9f2f7;
	--hintergrunddrei: #ddd;
	--eins: #046aa2;
	--schrifteins: #02407f;
	--zwei: #387652;
	--grueneins: #27754a;
	--gruenzwei: #0d9144; */
	/* elan-spezifisch: */
	--logoblau: #0069b4;
	--sand: #f4f4ec;
	--ikone: #63a9de;
}

@media (prefers-color-scheme: dark), (inverted-colors: inverted) {
	:root {
		/* geerbt von standard.css: */
		/* --schrift: #ffffcc;
		--hintergrund: #000;
		--hintergrundzwei: #171717;
		--hintergrunddrei: #333;
		--eins: #38b3fa;
		--schrifteins: #38b3fa;
		--zwei: #0fb353; */
		--logoblau: #63a9de; /* etwas heller als das Logo-Blau von Elan für ausreichend Kontrast zum schwarzen Hintergrund */
		--sand: #333;
		--ikone: #0075eb;
	}
}

/* Links */
a {
	color: #1c5379; /* gs20200715 Elan dunkelblau */
	text-decoration: underline;
}

a:is(:hover,:focus,:active) {
	color: var(--logoblau); /* gs20200715 Elan-Logo-blau */
	text-decoration: none;
}

main ul li::before,
main ol li::marker,
.blue, strong .blue, .blue strong, .really-bold.blue,
main .datenschutz :is(h2,h3)::before {
    color: var(--logoblau);
}

/* Links innerhalb der Standard-Inhalts-Spalte (nicht auf der Homepage) */
.single-col a:focus {
	outline: 1px solid var(--logoblau); /* gs20200715 Elan-Logo-blau */
	outline-offset: 1.5px;
}

/* bei den Teasern ohne offet */
.single-col .image-box-outer a:focus, 
.single-col .image-box-outer.landscape a:focus {
  outline-offset: 0;
}

/* gs20200818 - Cookiebalken */
#cookieDialog {
	background-color: #1588d3; /* gs20200818 hellerer Blauton Suchbutton */
}

/* Buttons und Links im Button-Look */
:is(button,a).btn-solid {
	/* background-image: linear-gradient(225deg, #6db38c 0%, #45a16b 100%); */
	/* background-image: linear-gradient(225deg, #8c8c5a 50%, #3c3c0f 100%); gs20200630 Verlauf von dunkel gelbbraun zu mittlerem gelbbraun */
	background-image: linear-gradient(225deg, #1c5379 50%, #1588d3 100%); /* gs20200810 Verlauf wie Suchbutton lt. Elan-Besprechung */
	color: #fff;
	border-color: #1c5379;
	/* opacity: 0.85; */
}

:is(button,a).btn-solid:is(:hover,:focus,:active) {
	/* background-image: linear-gradient(45deg, #27754a 0%, #0d9144 100%); */
	/* background-image: linear-gradient(45deg, #3c3c0f 0%, #8c8c5a 100%); gs20200630 Verlauf von dunkel gelbbraun zu mittlerem gelbbraun */
	background-image: linear-gradient(225deg, #1588d3 0%, #1c5379 100%); /* gs20200810 Umgekehrt wie Suchbutton lt. Elan-Besprechung */
}

:is(button,a).btn-border {
	/* color: #5c8aac; */ /* gs20200810*/
	/* border-color: #5c8aac; */ /* gs20200810 mittleres Kachel Verlaufsblau lt. Elan-Besprechung */
	color: #4f7a9C; /* Lue 08.10.2024: jetzt hinreichend Kontrast zu Weiß */
	border-color: #4f7a9C; /* Lue 08.10.2024: jetzt hinreichend Kontrast zu Weiß */
}

:is(button,a).btn-border:is(:hover,:focus,:active) {
	color: #fff;
	/* background-image: linear-gradient(225deg, #1c5379 0%, #98c1de 100%); */ /* gs20200810 BlauKachelVerlauf lt. Elan-Besprechung */
	background-image: linear-gradient(45deg, #1c5379, #447a9c); /* Lue 08.10.2024 stärkerer Kontrast zu weiß wegen Barrierefreiheit */
}

:is(button,a).btn-border-white {
	/* color: #5c8aac; */ /* gs20200810*/
	/* border: 3px solid #5c8aac; */ /* gs20200810 mittleres Kachel Verlaufsblau lt. Elan-Besprechung */
	background-image: linear-gradient(225deg, #1c5379 50%, #1588d3 100%); /* gs20200810 Verlauf wie Suchbutton lt. Elan-Besprechung */
}

:is(button,a).btn-border-white:is(:hover,:focus,:active) {
	/* color: #02407f; */
	color: var(--logoblau); /* gs20200701 dunkelblau zu iwE_logoblau */
	
}

/* rundum Platz schaffen, damit Tastaturfokus an allen Seiten sichtbar wird */
:is(button,a):is(.btn-solid,.btn-border,.btn-border-white) {
	margin: 3px;
}

/* extra-deutlicher Tastatur-Fokus */
:is(button,a):is(.btn-solid,.btn-border,.btn-border-white):focus {
	outline: 3px solid var(--logoblau);
}

/* Mouse-Over-Texte z. B. bei Themen-Teasern auf Startseite oben */
a.tip[tooltip]:hover:after,
a.tip[tooltip]:focus:after {
	/* color: #387652; dunkel gruen */
	color: #3c3c0f; /* gs20200701 dunkel braungelb*/
}

.form-content input[type=text],
.form-content input[type=email],
.form-content input[type=file] {
	margin: 8px 0; /* gs20200721 hier 8px anstelle 5px */
}


/* SUCHE + NAVIGATION */
header #searchbarContent {
	margin-bottom: 0.5rem;
}

header a.nav-link:is(:hover,:focus,:active) {
	color: var(--logoblau); /* gs20200713 Elan-Logo-blau */
}

#gridcontainer-navi .navbar-toggler,
#gridcontainer-navi .navbar-toggler button {
	color: var(--logoblau); /* gs20200714 Elan-logo-blau */
}

/* Vorlese-Funktion */
#gridcontainer-navi .navbar-toggler:is(:focus,:active) {
	/* outline: 5px solid transparent; */
	outline: 3px solid var(--logoblau);
}

/* Suche und Menü */
#gridcontainer-navi .navbar-toggler button:is(:focus,:active) {
	/* outline: 5px solid transparent; */
	outline: 3px solid var(--logoblau);
}

/* Mini-Player positionieren */

/* Das Suchfeld */

.suchfeld-submit {
	background-image: linear-gradient(225deg, #1c5379 50%, #1588d3 100%); /* gs20200716 Elan dunkelblau verlauf */
}

.suchfeld-submit:is(:hover,:focus,:active) {
	background-image: linear-gradient(225deg, #1588d3 0%, #1c5379 100%); /* gs20200716 Elan dunkelblau verlauf umkehrung */

}
/* ENDE NAVIGATION */






/* Sitemap */
.sitemap-navi li a, 
.sitemap-navi li .sitemap-navigation-level {
	color: var(--eins);
}

.sitemap-navi li a:is(:hover,:focus,:active) {
	outline: 1px solid var(--eins);
	outline-offset: 3px;
}





.carousel-indicators-numbers li.active, 
.carousel-indicators-numbers li.active:hover {
	color: #000;
	background-color: #f4f4ec; /* gs20200714 Elan Sandton von #dcdcd2 zu  */
	/* outline: 2px solid var(--logoblau); */ /* gs20200713 Elan-Logo-blau */
	outline: 2px solid var(--schrift);
}

.carousel-indicators-numbers li:hover, 
.carousel-indicators.numbers li:focus-within {
	color: var(--eins);
	background-color: #f4f4ec; /* alternativ background-color: var(--hintergrund); */
	border-radius: 100%;
	outline: 2px solid var(--eins);
}

.pagination-numbers li:hover, 
.pagination-numbers li:focus-within {
	color: var(--logoblau);
	background-color: var(--hintergrund);
	outline: 2px solid var(--logoblau);
}

.pagination-numbers li.active a, 
.pagination-numbers li a:hover, 
.pagination-numbers li a:focus {
	/* wir setzen hier besser keine Hintergrundfarbe, weil Größe und Rundung angepasst werden müssten */
	color: var(--eins);
}

.pagination-numbers li a:focus {
	outline: 3px solid var(--eins);
}
/****************** 
Ende HOMEPAGE 
***************/





p.brotkrume a:is(:hover,:focus) {
	/* color: #387652; gs20200713 REHADAT-linkgruen */
	color: var(--logoblau); /* gs20200713 Elan-Logo-blau */
}

p.brotkrume a i,
p.brotkrume .navigation-level i {
	/* color: #046aa2; gs20200713 REHADAT-Naviblau */
	color: var(--logoblau); /* gs20200713 Elan-Logo-blau */
}



/* Start der Partner-Logos unten */
.bg-logos {
	/* background: var(--sand); */
	background-color: #f4f4ec;
}

/* zusatz im Logo für IW-Elan "beauftragt von" */
.logo-twoaddBA {
	/* color: #93a7bb; */
	color: #547087; /* Lue 25.09.2024: Kontrast 4.69:1 zum Hintergrund #f4f4ec */
	font-weight: 600;
}
/* Ende der Partner-Logos unten */


/* Start des Footers (Z 2476 standard.css) */
/* Start der 3 Spalten */
.gridcontainer-footer ul li a:is(:hover,:focus) {
	color: var(--logoblau); /* gs20200714 Elan-logo-blau */
}

.gridcontainer-footer a .fa-chevron-down {
	color: var(--logoblau); /* gs20200714 Elan-logo-blau */
}

.gridcontainer-footer .footer-feedback {
	margin-top: 30px;
	/* text-align: center; */
	display: flex;
	width: 100%;
	justify-content: center;
	-webkit-hyphens: none;
	hyphens: none;
}

.gridcontainer-footer .footer-feedback a img {
	width: 100%;
	max-width: 400px;
}

.footer-feedback a {
	display: flex;
	text-decoration: none;
	justify-content: center;
	outline: 1px solid var(--logoblau);
	border-radius: 9px;
	color: var(--logoblau);
	max-width: 20rem;
}

.footer-feedback a:is(:hover,:focus,:active) {
	/* box-shadow: 0 2px 18px rgba(0, 0, 0, 0.5); */ /* Starker Schlagschatten rundum */
	box-shadow: 0 .5rem 1rem rgba(0,0,0,.2); /* Schwacher Schlagschatten links, rechts und unten */
}

.footer-feedback .thumb-icon {
	font-size: 1.5rem;
	color: #0069b4;
	align-self: center;
}

.footer-feedback .thumb-icon i {
	padding-left: 0.25rem;
	padding-right: 0.25rem;
	font-weight: 300;
}

.footer-feedback a:is(:hover,:focus,:active) .thumb-icon i {
  font-weight: 700;
}

.footer-feedback .feedback-text {
	line-height: 1.3;
	margin: 2px;
	text-align: center;
	flex-grow: 1;
}

.footer-feedback .feedback-text > span {
	display: block;
}

.footer-feedback .smallFont {
	font-size: 0.85rem;
}

.footer-feedback .feedback-text > span.feedback {
	font-size: 1.5rem;
	letter-spacing: 0.02rem;
	font-weight: 600;
}

.bg-last-row {
	/* background-image: linear-gradient(45deg, rgba(153,193,222,0.8), rgba(28,83,121,0.8)); */ /* gs20200811 Sättigung für den hellen Wert von 0.5 auf 0.8 gestellt, kontrastreicher */
	background-image: linear-gradient(45deg, #447a9c, #1c5379); /* Lue 26.09.2024: Kontrast nochmals verstärkt wegen Barrierefreiheit */
}

.lastRow-three a {
	color: var(--logoblau);
}

.lastRow-three a:is(:hover,:focus,:active) {
	background: rgba(153,193,222,1.0); /* gs20200810 von lightblue zu hellem graublau wie Footer */
}


/****************** 
Beginn ÜBRIGE INHALTE (Z 2737 standard.css)
***************/
/* Allgemein/Portal-Teaser oben/links mit Bild, unten/rechts Überschrift, Text, Link */

.col-md-6.hover-shadow .link .icon,
.image-box-bottom .link .icon {
	/* color: #387652; gs20200708 */
	color: var(--logoblau); /* gs20200708 Logo-blau */
}

a .col-md-6.hover-shadow .link .text,
a .image-box-bottom .link .text {
	/* color: #387652; gs20200708 */
	color: var(--logoblau); /* gs20200708 Logo-blau */
}


/* Bereichs-Teaser (Z 3000 standard.css) */
.row.bereich-teaser img {
    /* box-shadow: 0 0 10px rgba(138, 138, 138, 0.3); gs20200710 */
	box-shadow: 3px 7px 7px rgba(138, 138, 138, 0.5); /* gs20200710 */
}

@media (prefers-color-scheme: dark), (inverted-colors: inverted) {
	.row.bereich-teaser img {
		filter: none;
		box-shadow: none;
	}
}

.row.bereich-teaser a .link {
	/* color: #387652; gs20200708 */
	color: var(--logoblau); /* gs20200708 */
}


/* Lexikon, Buchstaben-Navigation */
.filterbox.categories ul li a {
	/* color: #387652; gs20200715 REHADAT dunkelgruen */
	color: #1c5379; /* gs20200715 Elan dunkelblau */
}

.filterbox.categories ul li.active a {
	/* background-image: linear-gradient(225deg, #6db38c 0%, #48a971 100%); */
	/* background-image: linear-gradient(225deg, #6db38c 0%, #45a16b 100%); gs20200716 */
	/* background-image: linear-gradient(44deg, rgba(105,3,54,0.9), rgba(221,0,0,0.9)); gs20200716 Elan Navi-Verlauf rot; gs20201117 herausgenomen */
	background-image: linear-gradient(44deg, rgba(2,64,127,0.9), rgba(4,106,162,0.9)); /* gs20201117 REHADAT-Blau eingesetzt */
}

.filterbox.categories ul li a:is(:hover,:focus,:active),
.filterbox.categories ul li.active a:is(:hover,:focus,:active) {
	/* background-image: linear-gradient(45deg, #27754a 0%, #0d9144 100%); gs20200715 REHADAT verlauf gruen */
	background-image: linear-gradient(45deg, #1c5379 0%, #1588d3 100%); /* gs20200715 Elan verlauf blau */
}

/* Lexikon-Vorspann: Großer Buchstabe */
#lexikon-buchstabe {
	/* color: #aa0000; gs20200716 Elan dunkelrot; gs20201117 herausgenommen */
	color: #1c5379; /* gs20201117 REHADAT-Blau eingesetzt */
}

/* Liste mit den Artikeltiteln */
ul.list-entries li.list-entry a {
	color: #1c5379;
	background: var(--hintergrund);
}

ul.list-entries li.list-entry a:is(:hover,:focus,:active) {
	color: var(--eins);
	background: var(--hintergrund);
	outline: 1px solid var(--eins);
	outline-offset: 3px;
}


/* Akkordeon-Seiten (Klapptexte) */
.akkordeon .btn-link {
	/* color: #02407f !important; gs20200714 */
	color: var(--logoblau) !important; /* gs20200714 */
}

.akkordeon button.btn-link:is(:hover,:focus,:active) .text,
.akkordeon button.btn-link.collapsed:is(:hover,:focus,:active) .text {
	/* color: #02407f !important; gs20200714 */
	color: var(--logoblau) !important; /* gs20200714 */
}

.akkordeon .btn-link .icon {
	/* color: #046aa2; gs20200714 REHADAT dunkelblau */
	color: var(--logoblau); /* gs20200714 Elan Logo-blau */
}


/* DOKUMENTEN-LISTE MIT ICONS (Z 3931 standard.css) */
.document-list li a .icon,
.document-list li .ws-null .icon {
	color: var(--ikone);  /*gs20200722 von #046aa2 auf #63a9de (mittleres Elan blau */
	/* font-size: 2.2rem; */
	font-size: 2em;
}

.document-list li a .linkText strong,
.document-list li a:is(:hover,:focus,:active) .linkText strong,
.document-list li a:is(:hover,:focus,:active) .linkText .linkInfo {
	color: var(--logoblau);
}

.document-list a:is(:hover,:focus,:active) .icon {
	color: var(--logoblau);
	background-color: var(--hintergrund);
}




/* Suche */
/* Nummerierung der Ergebnissne mit blauem Hintergrund wie bei der Lupe hinter dem Suchfeld oben */
.ws-list .count {
	background-image: linear-gradient(225deg, #1c5379 50%, #1588d3 100%); /* blau */
}

.ws-list a:hover .count, .ws-list a:focus .count, .ws-list a:active .count {
	background-image: linear-gradient(225deg, #1588d3 0%, #1c5379 100%);/* blau */
}

/* Sonderfall: Suche nur über die OpenCms-Inhalte in Elan mit Nummerierung per CSS */
.ws-list .count.css::before {
	counter-increment: entry;
	content: counter(entry);
}







/* BEGINN für Plyr Audio + Video Player */
.plyr {
	--plyr-color-main: #02407f;
	--plyr-audio-control-color: #fff;
	--plyr-audio-controls-background: var(--logoblau);
	--plyr-audio-control-background-hover: #02407f;
	--plyr-video-control-color: #fff;
	--plyr-video-control-color-hover: #fff;
	--plyr-video-controls-background: var(--logoblau);
	--plyr-video-control-background-hover: #02407f;
	--plyr-captions-text-color: #02407f;
	outline: 1px solid #ccc;
}

.plyr:hover,
video:is(:hover,:focus,:active),
audio:is(:hover,:focus,:active) {
	box-shadow: 0 0 12px rgba(100, 100, 100, 0.6) !important;
}

.plyr:focus-within,
video:focus,
audio:focus {
	outline: 2px solid var(--logoblau);
}

.plyr--video .plyr__controls,
.plyr--audio .plyr__controls {
	padding: 6px !important;
	font-size: 1.125rem;
}


/* Variante mit braunem Hintergrund für die Bedien-Elemente */
.plyr-braun .plyr {
	--plyr-color-main: #3f3f27;
	--plyr-audio-controls-background: #7e7e4e;
	--plyr-audio-control-background-hover: #3f3f27;
	--plyr-video-controls-background: #7e7e4e;
	--plyr-video-control-background-hover: #3f3f27;
	--plyr-captions-text-color: #3f3f27;
	/* --plyr-control-radius: 50%; */ /* sieht komisch aus in den Menüs mit Text */
	outline: 1px solid #ccc;
}

.plyr-braun .plyr:focus-within,
.plyr-braun video:focus,
.plyr-braun audio:focus {
	outline: 2px solid #7e7e4e;
}

.plyr-braun .plyr--full-ui input[type="range"]::-moz-range-progress {
	background: #3f3f27 !important;
}
/* ENDE für Plyr Audio + Video Player */












@media (min-width: 768px) {
	.logo .navbar-brand img {
		height: 80px;
	}
	
	/* Notwendig, damit bei wenig Text der Hover-Effekt des Teaser über die gesamte Breite der Hauptinhaltsspalte geht */
	.row.bereich-teaser a:focus {
		/* outline: 2px solid #387652; mittleres dunkelgruen */
		outline: 2px solid #046aa2; /* gs20200703 REHDADAT dunkelblau */
		outline-offset: 0;
	}
	
	.row.bereich-teaser .col-md-4.col-lg-3 {
		/* padding: 8px 30px 30px 0; */
		/* padding: 15px 15px 15px 0; */
		padding: 15px 15px 15px 15px; /* gs20200709 padding-bottom von 0 auf 15px gestellt, da beim over das Bild sonst links am Rand klebt */
	}



	/* gs20200819 fuer kleinere Bilddarstellung im Absatz lt. Hinweis von Britta eingefuegt */
	.bild-links {
		width: calc(25% + 15px);
	}
	
	/* gs20200819 fuer kleinere Bilddarstellung im Absatz lt. Hinweis von Britta eingefuegt */
	.bild-links img {
		padding-right: 10px; /* evtl. verkleinern */
	}
	
	.gridcontainer-footer .footer-feedback {
		margin-top: 15px;
		text-align: left; /* start wäre eigentlich besser, aber das versteht der Internet Explorer 11 nicht */
	}
	
	.gridcontainer-footer .footer-feedback a img {
		max-width: 220px;
	}
	
}









@media (min-width: 992px) {
	/* erste Zeile und Navi */
	header .container {
		display: grid;
		grid-template-rows: auto auto;
		grid-template-columns: 1fr auto 1fr;
	}
	
	li.alternative-formats-service a .icon i {
		color: var(--logoblau);
		/* background: #fff; */ /* Anweisung stört beim dark mode */
	}
	
	li.alternative-formats-service a:is(:hover,:focus,a:active) .hovertip {
		margin-left: -24px;
		margin-top: 3px;
		color: var(--logoblau);
	}
	
	/* .navbar-nav > li > a, */
	/* erste Ebene */
	/* Service-Links werden ab dieser Bildschirmgröße unmittelbar nach der Suchfunktion angezeigt */
	/* Sonderfall 1. Menüebene mit geringerem font-weight */
	/* aktiven Punkt in unteren Ebenen fett, mit weißer Schrift und mit blauem Hintergrund */

	/* aktiver (=aktueller), gehoverter / focussierter Menüpunkt der ersten Ebene */
	.navbar-nav > li > a.active,
	.navbar-nav > li > a:is(:hover,:focus,:active),
	.navbar-nav > li:hover > a {
		color: var(--logoblau);
		border-color: var(--logoblau);
	}
	
	/* 1. Ebene: fokussiert / aktiv kommt outline hinzu */
	.navbar-nav > li > a:is(:focus, :active) {
		outline-color: var(--logoblau);
	}
	
	.logo .navbar-brand {
		padding: 0;
	}
	
	/* gs20200715 aus standard-elan Anfang */
	.logo .navbar-brand img {
		height: 60px;
		width: auto;
		min-width: auto;
		padding-top: 0;
	}
	
	.suchfeld {
		width: 340px;
	}
	
	.gridcontainer-footer {
		margin-bottom: 45px;
	}
	
	.gridcontainer-footer .footer-feedback {
		justify-content: flex-start;
	}

	.footer-feedback .thumb-icon {
		font-size: 2rem;
	}
	
	.footer-feedback .thumb-icon i {
		font-weight: 200;
	}
	
	.footer-feedback .smallFont {
		font-size: 0.9rem;
	}
}


@media (min-width: 1200px) {
	/* Elan-Logo oben */
	.logo .navbar-brand img {
		width: auto;
		height: 64px;
	}
}


@media (prefers-color-scheme: dark), (inverted-colors: inverted) {
	/* BEGINN Buttons */
	/* :is(button, a).btn-solid {
		background-color: #21633f;
		border: 3px solid #21633f;
	}
	
	:is(button,a).btn-border {
		color: var(--zwei);
		border: 3px solid var(--zwei);
	} */
	
	:is(button, a).btn-solid:is(:hover, :focus, :active),
	:is(button, a).btn-border:is(:hover, :focus, :active) {
		background-color: var(--grueneins);
		border: 3px solid var(--grueneins);
		background-color: #1c5379;
		border-color: #1c5379;
	}
	/* ENDE Buttons */


	ul.list-entries li.list-entry a {
		color: var(--eins);
		background: var(--hintergrund);
	}
	
	a,
	.row.bereich-teaser a .link, 
	.pagination-numbers li a {
		color: var(--logoblau);
	}
	
	.plyr {
		--plyr-color-main: #0f2a3e;
		--plyr-audio-control-color: #fff;
		--plyr-audio-controls-background: #1c5379;
		--plyr-audio-control-background-hover: #0f2a3e;
		--plyr-video-control-color: #fff;
		--plyr-video-control-color-hover: #fff;
		--plyr-video-controls-background: #1c5379;
		--plyr-video-control-background-hover: #0f2a3e;
		--plyr-captions-text-color: #fff;
		outline: 1px solid #ccc;
	}
	
	/* Variante mit braunem Hintergrund für die Bedien-Elemente */
	.plyr-braun .plyr {
		--plyr-color-main: #3f3f27;
		--plyr-audio-controls-background: #3f3f27;
		--plyr-audio-control-background-hover: #7e7e4e;
		--plyr-video-controls-background: #3f3f27;
		--plyr-video-control-background-hover: #7e7e4e;
		--plyr-captions-text-color: #fff;
		/* --plyr-control-radius: 50%; */ /* sieht komisch aus in den Menüs mit Text */
		outline: 1px solid #ccc;
	}

	.plyr-braun .plyr:focus-within,
	.plyr-braun video:focus,
	.plyr-braun audio:focus {
		outline: 2px solid #7e7e4e;
	}

	.plyr-braun .plyr--full-ui input[type="range"]::-moz-range-progress {
		background: #7e7e4e !important;
	}
}