/* ------------------------------- Fonts laden ------------------------------ */

@font-face {
	font-family: 'Montserrat-Bold-700';
	src: url('fonts/Montserrat-Bold.ttf') format('truetype');
}

@font-face {
	font-family: 'Montserrat-Light-300';
	src: url('fonts/Montserrat-Light.ttf') format('truetype');
}

@font-face {
	font-family: 'Montserrat-Regular-400';
	src: url('fonts/Montserrat-Regular.ttf') format('truetype');
}

@font-face {
	font-family: 'Dancing Script';
	src: url('fonts/DancingScript-Regular.ttf') format('truetype');
}

/* -------------------------------- Variablen ------------------------------- */

:root {

	/* ----------------------- Variablen für Schriftarten ----------------------- */

	/*--font-thin: 'Montserrat-Thin', sans-serif;*/
	/*--font-extralight: 'Montserrat-ExtraLight', sans-serif;*/
	--font-light: 'Montserrat-Light-300', sans-serif;
	--font-regular: 'Montserrat-Regular-400', sans-serif;
	--font-bold: 'Montserrat-Bold-700', sans-serif;
	/*--font-extrabold: 'Montserrat-ExtraBold', sans-serif;*/
	/*--font-black: 'Montserrat-Black', sans-serif;*/
	--font-special: 'Dancing Script', cursive;


	/* -------------------------- Variablen für Größen -------------------------- */

	--content-max-width: 1600px;
	--header-height: 4.5rem;
	--footer-height: 2rem;
	--left-and-right-margin: 2rem;


	/* ------------------------ Variablen für Farben ------------------------ */

	--section-bg-1: #ebede4;
	--section-bg-2: #f8faf3;
	--section-bg-highlight: #dc938c;

	--standard-box-shadow: rgba(0, 0, 0, 0.1);

	--footer-and-header-bg-color: #4a5d4f;
	--background-dark-hover: #344138;
	--standard-text-color: #4a5d4f;

	--bg-color-dropdown-menu: #fff;

	--text-color-dark-link: #4b825a; /*TODO: Farbe anpassen*/
	--standard-text-color-placeholder: #7f9184;

	/* Standard Schriftfarben */
	--standard-text-color-header: #4a5d4f;
	--standard-text-color-short-info: #4a5d4f;

	--highlight-color: #c49790;
	--highlight-color-bg-light: #ffebe9;
	--highlight-color-bg-dark: #dc938c;

	--text-color-light: #fff;
	--text-color-light-hover: #eecac5;
	--text-color-light-hover-green: #c6d8cb;

	/* table-colors */
	--table-odd-rows-bg-color: #ffffff82;
	--table-body-hover-bg-color: #ffdcd582;
	--table-body-hover-bg-color-odd: #ffeaea82;
	--table-body-text-color: #4a5d4f;
	--standard-text-color-table-body-header: #4a5d4f;

	/* border-colors */
	--image-border-color: #4a5d4f;

	--testimonial-author: #4a5d4f;
	--standard-text-color-on-highlight: #fff;

	--testimonials-buttons: var(--highlight-color);
	--testimonials-buttons-1: var(--standard-text-color);
	--slider-bg-color: var(--highlight-color) ; /*#f9f9f9*/

	/* --------------- Helles Farbschema erzwingen (vorübergehend) -------------- */

	/*color-scheme: only light;*/
}

/* --------------------- Farben für Dark Mode festlegen --------------------- */

@media (prefers-color-scheme: dark) {
	:root {
		--section-bg-1: #2b382e;
		--section-bg-2: #344138;
		--section-bg-highlight: #dc938c;
		
		--footer-and-header-bg-color: #4a5d4f;
		--standard-text-color: #e6efe8; /* #7f9184;*/; /*TODO: Trenne Standard Überschriftfarbe von Standard Textfarbe*/

		--bg-color-dropdown-menu: #3e5043;

		--text-color-dark-link: #7f918; /*TODO: Farbe anpassen*/
		--standard-text-color-placeholder: #7f9184;

		/* Standard Schriftfarben */
		--standard-text-color-header: #dff2e4;
		--standard-text-color-short-info: #4a5d4f;

		--highlight-color: #c49790;
		--highlight-color-bg-light: #ffebe9;
		--highlight-color-bg-dark: #dc938c;

		--text-color-light: #c6d8cb;
		--text-color-light-hover: #eecac5; 
		--text-color-light-hover-green: #c6d8cb;

		/* table-colors */
		--table-odd-rows-bg-color: #3e5043;
		--table-body-hover-bg-color: #8b5550; /*TODO: Farbe anpassen --table-body-hover-bg-color: #ffdcd582;*/
		--table-body-hover-bg-color-odd: #b57974; /*TODO: Farbe anpassen */
		--table-body-text-color: #e6efe8;
		--standard-text-color-table-body-header: #e6efe8;


		/* border-colors */
		--image-border-color: #4a5d4f;

		--testimonial-author: #4a5d4f;
		--standard-text-color-on-highlight: #fff;

		--testimonials-buttons: var(--highlight-color);
		--testimonials-buttons-1: #fff;
		--slider-bg-color: var(--highlight-color) ; /*#f9f9f9*/
	}
}



/* ----------------------------------- Neu ---------------------------------- */


.info-site-container ul {
	list-style-type: disc;
	text-align: left;
	padding-left: 1rem;
}

/* ---------------------------- Allgemeine Stile ---------------------------- */

body {
	font-family: var(--font-regular), sans-serif;
	width: 100vw;
	margin: 0;
	padding: 0;
	text-align: center;
	font-size: 16px;
	background-color: var(--section-bg-1); /* Hintergrundfarbe hinzugefügt */
	color: var(--standard-text-color);
}

/* -------------------------------- Headings -------------------------------- */

h1, h2, h3, h4, h5, h6 {
	color: var(--standard-text-color-header);
	font-family: var(--font-regular), sans-serif;
	font-weight: unset;
}

h1 {
	font-size: 2rem;
	margin-bottom: 2rem;
	padding-top: 2rem;
}

h2 {
	font-size: 1.2rem;
	margin-bottom: 0.4rem;
	padding-top: 0.4rem;
}




/*Responsive h1*/
@media (max-width:1024px) {	h1 {font-size: 1.8rem}}
@media (max-width:768px) {	h1 {font-size: 1.6rem}}
@media (max-width:480px) {	h1 {font-size: 1.4rem}}


#hero h1 {
	font-family: 'Dancing Script', sans-serif;
	color: var(--highlight-color);
	font-weight: normal;
	font-size: 3vw;
	padding: 20vh 5vw
}

@media (max-width:1024px) {
	#hero h1 {
		font-size: 3.5vw;
		padding: 18vh 5vw
	}
}

@media (max-width:768px) {
	#hero h1 {
		font-size: 4vw;
		padding: 15vh 5vw
	}
}

@media (max-width:480px) {
	#hero h1 {
		font-size: 5vw;
		padding: 12vh 5vw
	}
}

/*Links*/
a {
	text-decoration: none;
}

.no-break {
	white-space: nowrap; /*Kein Zeilenumbruch, z. B. zwischen Mail und dem Satzzeichen danach*/
}



section p a {
	color: var(--text-color-dark-link);
}

section p a:hover {
	text-decoration: underline;
	color: var(--highlight-color-bg-dark) !important;
}

footer a:hover {
	text-decoration: underline;
	color: var(--highlight-color-bg-dark) !important;
}

#impressum-link a {
	color: var(--text-color-light);
}

#privacy-policy-link a {
	color: var(--text-color-light);
}

/*.footer-info-site-nav a {
	color: var(--highlight-color);
}*/

.footer-info-site-nav ul {
	list-style: none;
	text-align: left;
	display: flex;
	justify-content: space-between;
	gap: 1.5rem;
	margin-right: auto;
}

.footer-info-site-nav ul li {
	display: inline;
}





.bold-font {
	font-weight: bold;
}

section {
	min-height: 100vh;
	padding: var(--header-height) var(--left-and-right-margin) var(--footer-height);
	font-size: 1rem;
	box-sizing: border-box;
	width: 100vw;
}

/*Für Impressum und Datenschutzerklärung*/

#impressum p.legal-notice-highlighted {
	/*color: var(--highlight-color);*/
	/*font-weight: bold;*/
	font-size: 0.9rem;
	margin-bottom: 0.3rem;
}

.section-text-align-left h1,
.section-text-align-left h2,
.section-text-align-left p {
	text-align: left;
	max-width: 645px;
}

.info-site-container {
	max-width: 650px !important;
	margin-left: auto !important;
	margin-right: auto !important;
}

.bold-font {
	font-weight: unset;
	font-family: var(--font-bold);
}

p.highlight-color {
	color: var(--highlight-color);
}

.headings-in-standard-text-size {
	font-size: 1rem;
	margin-bottom: 0.4rem;
	margin-top: 1rem;
	padding: 0;
}

#impressum p {
	margin-top: 0;
	margin-bottom: 0;
}


/* -------------------------- Custom Section Styles ------------------------- */

section.very-light-bg {
	background-color: var(--section-bg-2);
}

section.highlight-bg {
	background-color: var(--section-bg-highlight);
}

section.highlight-bg h1 {
	color: var(--standard-text-color-on-highlight);
}

/* ------------------ Maximale Breite der Inhalte festlegen ----------------- */

.content-max-width {
	/*max-width: var(--content-max-width);*/
	margin: 0 var(--left-and-right-margin);
}

/*@media (min-width: var(--content-max-width)) {
	.content-max-width {
		margin: 0 auto;
	}
}*/

@media (max-width: 450px) {
	main .content-max-width {
		margin: 0 0.2rem;
	}
}

/* ---------------------------- Footer Styles ------------------------------- */

footer {
	position: fixed;
	box-sizing: border-box;
	bottom: 0;
	margin-bottom: 0;
	padding: 0;
	width: 100%;
	background-color: var(--footer-and-header-bg-color);
	color: var(--text-color-light);
	text-align: center;
	z-index: 1000;
	height: var(--footer-height);
}

.footer-container {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: 0.5rem var(--left-and-right-margin) 0.7rem;
}

.footer-column p, .footer-column ul {
	padding: 0;
	font-size: 0.8rem;
	margin: 0;
}

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

	:root {
		--footer-height: 3rem;
	}

	.footer-container {
		flex-direction: column;
		align-items: flex-start;
		padding: 0;
		margin: 0.5rem var(--left-and-right-margin) 0.7rem;
		transition: all 0.3s ease;
		width: calc(100% - 4rem);
		gap: 0.2rem;
	}

	.footer-container p {
		margin: 0;
		text-align: center;
		transition: all 0.3s ease;
		width: 100%;
	}
}


/* Header-Layout */

header {
	background-color: var(--footer-and-header-bg-color);

	position: fixed; /* Statt absolute → hält es im Viewport */
	top: 0;
	left: 0;

	width: 100vw;
	max-width: 100%;
	height: 4.5rem;

	z-index: 1000; /* Damit der Header über anderen Elementen liegt */
	box-shadow: 0 2px 5px var(--standard-box-shadow); /* TODO: Variable für Box-Shadow */ 

}

header a {
	font-family: var(--font-regular);
}

.header-container {
	position: relative;
	display: flex;
	height: 100%; /* Sicherstellen, dass die Höhe der Höhe des Header entspricht */
	/*align-items: center;*/
	/*justify-content: space-between;*/
}

.logo-container {
	position: relative;
	flex: 0; /*1; Breite oder Höhe anpassen, um den verfügbaren Platz im Container zu füllen*/
	height: 56%; /* Sicherstellen, dass die Höhe ..% Höhe des .header-container entspricht */
	margin: auto auto auto 0;
	width: auto;
}


.logo-container a {
	width: 100%;
	height: 100%;
}

.logo-container img {
	max-height: 100%;
}

/* Mobiles Menü */
.menu-container {
	flex: 1; /*Breite oder Höhe anpassen, um den verfügbaren Platz im Container zu füllen*/
	display: flex;
	height: 100%; /* Sicherstellen, dass die Höhe der Höhe des .header-container entspricht */
	left: 200px;
}


nav {
	flex: 1;
	display: flex;
	justify-content: center;
}

nav ul {
	list-style: none;
	display: flex;
	justify-content: space-between;
	gap: calc(1.5rem);
	/*gap: calc(1.25rem + 2vw);*/
	/*padding: 0 var(--left-and-right-margin);*/
}

nav ul,
div.back-to-home {
	margin: auto 0 1.4rem;
}

.impressum-menu-container .back-to-home {
	margin-left: auto;
}



nav ul li {
	display: inline;
}

nav ul li a,
header a.back-to-home-link {
	color: var(--text-color-light);
	font-size: 1rem;
	width: 100%;

	/*font-size: calc(1rem + 0.2vw); /* Dynamische Schriftgröße */
}

nav ul li a:hover {
	color: var(--text-color-light-hover);
}

.lang-switch {
	flex: 0;
	/*position: absolute;*/
	/*right: var(--left-and-right-margin); Am rechten Viewport-Rand ausrichten */
	margin: auto 0 auto 2rem;
	display: flex;
	flex-direction: column;
	/* Sprachen untereinander*/
	align-items: center;
	/*notwendig?*/

	/*top: 50%; Obere Kante auf die Mitte des Containers setzen */
	/*transform: translateY(-50%);  Um die eigene Hälfte nach oben verschieben 
	/*transition: right 0.3s ease;*/

	/*background-color: aqua;*/

}

.lang-switch a {
	color: var(--text-color-light);
	font-size: 1rem;
}


/* ------------------------------- Toggle-Menu ------------------------------ */

.menu-toggle {
	display: none;
	flex-direction: column;
	cursor: pointer;
	justify-content: center;

	box-sizing: border-box;
	width: 2rem;

	/*Änderungen?*/
	z-index: 100;
	margin: auto 0 auto auto;
}

.menu-toggle div {
	width: 100%;
	height: 0.2rem
		/*3px*/
	;
	background-color: var(--section-bg-1);
	margin: 0.3rem 0
		/*5px 0*/
	;

	/*Änderungen?*/
	/*Animation Toggle-Menu*/
	transition: transform 0.3s ease, opacity 0.15s ease;
}

/* Animation für X-Symbol */
/*Änderung? X breiter?*/
.menu-toggle.open div:nth-child(1) {
	transform: translateY(0.8rem) rotate(45deg) scale(0.5);
	transform-origin: center;
}

.menu-toggle.open div:nth-child(2) {
	opacity: 0;
}

.menu-toggle.open div:nth-child(3) {
	transform: translateY(-0.8rem) rotate(-45deg) scale(0.5);
	transform-origin: center;
}



@media (max-width: 920px

	/*48rem*/
) {

	.menu-toggle {
		display: flex;
		z-index: 1000;
		/* Sicherstellen, dass es über anderen Elementen liegt */
	}

	nav {
		display: flex;
		justify-content: center;

		position: absolute;
		top: 4.5rem;
		right: 0;
		width: 100%;

		background-color: var(--footer-and-header-bg-color);
	}


	nav ul {
		display: none;
		flex-direction: column;
		/* untereinander */
		width: 100%;

		background-color: var(--section-bg-1);
		box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
		padding: 2rem
			/*10px 0*/
		;

		text-align: right;
	}


	nav ul.active {
		display: flex;
		background-color: var(--bg-color-dropdown-menu); /* TODO: var(--text-color-light) */
		transition: all 0.3s ease-in-out;
		margin-bottom: 0;
	}

	nav ul.active li a {
		color: var(--standard-text-color);
	}

	nav ul li a:hover {
		color: var(--text-color-light-hover)
			/*#a2c1aa;*/
			/*Baustelle Farbe*/
	}

}


@media (max-width:480px) {

	.menu-container {
		left: 20px;
	}

}


/*Hero-Bereich*/
#hero {
	/*background:url('img/hero.jpg')center/cover no-repeat;*/
	color: var(--text-color-light);
	padding: 20vh 5vw;
	font-size: 3vw;
	background-color: var(--section-bg-2);
}

/*Section About -- Baustelle*/
.about-text a {
	color: var(--standard-text-color-on-highlight);
}

.about-text a:hover {
	color: var(--text-color-light-hover-green); /* TODO: Hover Color on Highlight*/
}

.about-content {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 2rem;
	flex-wrap: nowrap;
	background-color: var(--highlight-color);
	border-radius: 1rem;
	color: var(--standard-text-color-on-highlight);
	padding: 2rem;
	min-height: 288px;
	margin: 0 auto;
	max-width: 800px; /* TODO: Breite des About-Containers anpassen */
}

.about-text {
	box-sizing: border-box;
	text-align: left;
	align-items: flex-start;
	max-width: 60vw;
	margin: auto 0 0 2rem;
	padding: 0;
}

#about .short-info {
	margin: 2rem auto 0;
}

#about .short-info p {
	color: var(--standard-text-color-short-info);
}

#about .short-info p.short-info-name {
	font-family: var(--font-bold);
}

.photo-and-social-media {
	flex: 0;
	box-sizing: border-box;
	margin: 0;
}

.about-photo {
	min-width: 180px;
	min-height: 180px;
	max-width: 180px;
	max-height: 180px;
}

.about-photo p {
	margin-top: 2rem auto auto auto;
}

/*.about-text{flex:1;text-align:left;font-size:1rem;line-height:1.6;max-width:60vw;margin-bottom:2rem}
.about-photo{flex:0 0 20rem;max-width:100%;text-align:left}*/

.about-photo img {
	width: 100%;
	height: 100%;
	border-radius: 50%;
	border: 4px solid var(--image-border-color);
	max-height: 180px;
	max-width: 180px;
	min-width: 180px;
	min-height: 180px;
	margin: 0 auto auto auto;
}

.about-social-media-container {
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	align-items: center;
	min-height: 2em;
	margin: 2rem auto 0;
}

.about-social-media-icon-container {
	height: 100%;
}


.about-social-media-icon {
	width: 2.5em;
	height: 2.5em;
}

/*Responsive About*/
@media (max-width:1024px) {
	/*#about{padding:5vh 4vw}*/
	/*.about-content{flex-direction:column;}*/
	/*.about-photo{flex:0 0 18rem}*/
	/*.about-text{font-size:1.1rem}*/
	/*#about h1{font-size:1.8rem}*/
}

@media (max-width:768px) {

	/*#about{padding:6vh 4vw}*/
	.about-content {
		flex-direction: column;
		gap: 0;
	}

	.photo-and-social-media {
		margin: 2rem auto;
	}

	/*.about-photo{margin-bottom:2rem;flex:0 0 15rem}*/
	.about-text {
		margin: 0 auto;
		margin-top: 0;
		text-align: left;
		max-width: 90%;
		/*font-size:1rem;max-width:90vw*/
	}

	/*#about h1{font-size:1.6rem}*/
}

@media (max-width:480px) {
	/*#about{padding:7vh 4vw}*/
	/*.about-content{gap:3vw}*/
	/*.about-photo{flex:0 0 12rem}*/
	/*.about-text{font-size:0.9rem;max-width:100%}*/
	/*#about h1{font-size:1.4rem}*/
}


/*Kurse-Tabelle*/
.large-table {
	max-width: calc(100vw-2em);
}

@media (max-width: 810px) {
	.large-table {
		max-width: calc(100vw-0.4rem);
	}
}

.courses-table {
	width: 100%;
	border-collapse: collapse;
	text-align: left;
	margin: 2rem auto;
}

.courses-table th,
.courses-table td {
	padding: 1rem;
	border: 0.1rem solid #ccc; /* TODO: Variable für die Tabellenrahmen */
}

/*Baustelle Farbe*/
.courses-table th {
	font-family: var(--font-regular);
	font-weight: unset;
	font-size: 1.2rem
}

.courses-table thead th {
	background-color: var(--footer-and-header-bg-color);
	color: var(--text-color-light); /* TODO: Variable für Hintergrundfarbe der Kopfzeilen */
}

.courses-table tbody {
	color: var(--table-body-text-color);
}
.courses-table tbody th {
	color: var(--standard-text-color-table-body-header); /*TODO: Variable für Schriftfarbe der Kurstitel var(--footer-and-header-bg-color)*/
	font-size: 1rem
}

/* ------------------ Hintergrundfarben der Tabellenzeilen ------------------ */

.courses-table tr:nth-child(odd) {
	background-color: var(--table-odd-rows-bg-color);  /* TODO: Variable für Hintergrundfarbe der ungeraden Zeilen */
}

/*Baustelle Farbe*/
.courses-table tr:hover {
	background-color: var(--table-body-hover-bg-color);
		/*#edd1cc -- merken*/
		/*#647b6a3a*/
		/*#4a5d4f3a*/
}

 .courses-table tr:nth-child(odd):hover {
	background-color: var(--table-body-hover-bg-color-odd); /* TODO: Variable für Hoverfarbe der ungeraden Zeilen	*/
}

/* ------------------------------ Statt-Preise ------------------------------ */
.courses-table tr s {
	text-decoration: line-through;
}

/* ---------------- Möglicherweise mehrzeilige Tabellenzellen --------------- */

.courses-table td.possible-multiline {
	text-wrap: balance;
}


/* ------------------- Kurse-Tabelle Responsive Responsive ------------------ */ /*TODO: Sort */
@media (max-width: 810px) {
	.courses-table thead th {
		font-size: 1rem;
	}

	.courses-table tbody th {
		font-size: 0.9rem;
	}

	.courses-table td {
		font-size: 0.8rem;
	}
}

@media (max-width: 650px) {
	.courses-table thead th {
		font-size: 0.9rem;
	}

	.courses-table tbody th {
		font-size: 0.8rem;
	}

	.courses-table td {
		font-size: 0.7rem;
	}
}

@media (max-width: 480px) {
	.courses-table thead th {
		font-size: 0.8rem;
	}

	.courses-table tbody th {
		font-size: 0.7rem;
	}

	.courses-table td {
		font-size: 0.6rem;
	}
}

#courses .after-table {
	text-align: left;
	font-size: 1rem;
	padding-left: 2rem;
	margin: 0 auto 0.5rem;
}


/* ----------------------------- Self Assessment ---------------------------- */

div.download-links {
	display: flex;
	flex-direction: column;
	justify-content: center;
	width: 18.75rem;
	margin: 0 auto;
}

.download-links a {
	display: block;
	box-sizing: border-box;
	padding: 0.5rem 0.8rem 0.7rem;
	height: 2rem;
	font-size: 0.8rem;
	background-color: var(--footer-and-header-bg-color);
	color: var(--text-color-light);
	border: none;
	border-radius: 5px;
	cursor: pointer;
	width: 100%;
}

.download-links a, audio {
	margin: 0.2rem auto 0.4rem;
}

.download-links a:hover {
	background-color: var(--background-dark-hover);
}


/* ------------------------ zu lange Zeilen vermeiden ----------------------- */
#self-assessment p {
	max-width: 550px;
	margin-left: auto;
	margin-right: auto;
}




/* ----------------------------- Kontaktformular ---------------------------- */

#contact-form {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.5rem;
	margin: 5vh auto;
	width: 50vw;
	max-width: 600px;
	max-width: 100%;
}

input,
textarea {
	width: 100%;
	padding: 1rem;
	border: 0.1rem solid #ccc; /* TODO: Variable für Border-Color? */
	border-radius: 0.5rem;
	display: block;
	box-sizing: border-box;
	font-size: 1.2rem;
	color: var(--standard-text-color);
	font-family: var(--font-regular);
}

input::placeholder,
textarea::placeholder {
	color: var(--standard-text-color-placeholder);
	opacity: 1;
	font-size: inherit;
	font-family: inherit;
	/*Baustelle Schriftart kursiv?*/
}

form textarea {
	resize: vertical;
	height: 15vh
}

/*Absenden-Button*/
form button {
	background: var(--footer-and-header-bg-color);
	color: var(--text-color-light);
	border: 0.1rem solid transparent;
	padding: 1rem 2rem;
	font-size: 1.2rem;
	font-family: var(--font-regular);
	border-radius: 0.5rem;
	cursor: pointer;
	width: 100%;
}

form button:hover {
	background: var(--background-dark-hover)
}

@media (max-width:768px) {
	#contact-form {
		width: 80vw
	}
}

@media (max-width:480px) {
	#contact-form {
		width: 90vw
	}
}

/* -------------------------- Testimonial Carousel -------------------------- */

.testimonial-carousel {
	width: 80%;
	max-width: 700px;

	margin: 2rem auto;

	height: 22rem;

	padding: 2rem;
	/*border: 0px solid #ddd;*/ /*aktuell kein Border*/ /* TODO: Variable für Border-Color? */
	border-radius: 8px;
	background-color: var(--slider-bg-color); 
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* TODO: Variable für Box-Shadow*/
}

.testimonial-slide-element {
	padding: 0.8rem;
	text-align: center;
}

/* -------------------- Testimonial Corousel Text Styles -------------------- */

.testimonial-slide-element p {
	font-size: 1rem;
	text-align: justify;
	line-height: 1.6;
	color: var(--standard-text-color-on-highlight);
	margin: 0 0 1.5rem 0;
	padding: 0;
}

.testimonial-slide-element p.long-text {
	font-size: 0.8rem;
	line-height: 1.1;
}

p.testimonial-author {
	margin-bottom: 0;
	text-align: right;
	color: var(--testimonial-author); /* Make the writer's name a bit distinct */
}

/* --------------------------- Slider Dots Styles --------------------------- */

.slick-dots li button {
	border-radius: 50%; /*Make the Big Slider Dots round*/
}

.slick-dots li button:before {
	color: var(--testimonials-buttons-1) !important; /* Farbe der kleinen Punkte */
}	

.slick-dots li.slick-active button {
	background: var(--testimonials-buttons); /* Big Slider Dot Color */ /*var(--footer-and-header-bg-color);*/ /* TODO: Variable for Big Slider Dot Color? */
}


/* ------------------------ Design der Slider-Pfeile ------------------------ */

.slick-prev:before,
.slick-next:before {
	color: var(--testimonials-buttons) !important; /* Farbe der Pfeile */
}