/* -------------------- Farben-Variablen BEGINN -------------------- */
:root {
	/*Allgemein*/
	--color-akzent: #EF6301;
	--bg-slideshow: #fff;
	--bg-fallback-farbe: #000;
	--border-social-media: none;

	--bg-main-approach:#FBF7F3;
	--color-approach-h3:#000;
	--border-approach-items:#b3b3b3;

	--bg-fyc:url(../images/background/bg-call2action.jpg);
	--color-fyc-h2:#000;
	--bg-fyc-icon-calendar-clock:#fff;

	--bg-start-content:linear-gradient(135deg,#ffffff 0%,#fafafa 55%,#f2f2f2 100%);

	--color-slider-content-title:#000;
	--color-slider-content-text:#000;
	--bg-hero-image-overlay:linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.8) 0%,
    /*rgba(255, 255, 255, 0.7) 22%,
    rgba(255, 255, 255, 0.6) 38%,
    rgba(255, 255, 255, 0.5) 52%,
    rgba(255, 255, 255, 0.4) 67%,
    rgba(255, 255, 255, 0.05) 78%,*/
    rgba(255, 255, 255, 0) 88%
);
--slider-content-shadow:rgba(255, 255, 255, 0.5);

	/*Item Animation*/
	--bg-item-animation:url("../images/background/bg-wave--116640603.png"),#fff;
	--bg-service-card:#FFF;

	--color-heading-swim-lessons:#031b29;

	--bg-service-card-front:#FFF;
	--color-service-card-title:#031b29;
	--color-service-card-subtitle:#031b29;

	/*Sayyours*/
	--bg-sy-elitefins:linear-gradient(135deg,#ffffff 0%,#fafafa 48%,#f1f1f1 100%);
	--color-sy-title:#000;
	--color-sy-text:#333;

	--bg-sy-locations:linear-gradient( 135deg,#fbfaf8 0%,#ffffff 48%,#f7f6f3 100%);

	/*Appointment Box*/
	--bg-app-box:rgba(255, 255, 255, 0.94);
	--color-app-title:#000;
	--color-app-text:#5f6d78;

	/*Barrierefreiheit Panel*/
	--access-panel-headline-color: #3b3b3b;
	--bcc-shadow: 0px 0px 4px 1px rgba(0,0,0,0.80);
	--bg-access-panel: #fff;
	--access-panel-bs: 0px 0px 4px 2px rgba(95,95,95,0.60);
	--bg-panel-button: #E7E7E7;
	--color-readline: #000;
	--cursor-color: url('../images/icons/cursor-light.png');
	--cursor-pointer: url('../images/icons/cursor-pointer-light.png');
	--cursor-text: url('../images/icons/cursor-text-light.png');
	--access-icon-tooltip-color: #333;
	--access-icon-tooltip-text: #fff;

	/*Cookie Modal*/
	--bg-modal-content: #fff;
	--modal-content-text-color: #333;
	--modal-header-bg: #3b3b3b;
	--modal-header-text-color: #fff;
	--modal-footer-bg: #E7E7E7;
	--placeholder-background: #eeeeee;
	--bg-consent-icons: #F6F6F6;
	--color-btn-custom-accept-normal: #3b3b3b;
	--color-btn-custom-accept-hover: #2A2A2A;
	--color-btn-custom-reject-normal: #cdcdcd;
	--color-btn-custom-reject-hover: #ADADAD;

	--background-content: #fff;
	/*--background-content: url('../images/background/');*/
	--background-kontaktformular: #071923;
	--img-filter: none;
	--mapsiframe-filter: drop-shadow(2px 4px 6px rgba(0,0,0,0.80));

	/*Navigation*/
	--background-navi: rgba(255, 255, 255, 0.5);
	--background-navi-shrink: #fff;
	--color-nav-link:#000;
	--color-navigation-hover: #fff;
	--color-dropdown-navigation: #000;
	--dropdown-menu: rgba(255,255,255,1);
	--bg-dropdown-menu-a-hover:linear-gradient(135deg,#ff8b35 0%,#ee6401 45%,#d95300 100%);

	--bg-navbar-toggler:#000;

	/*Top-Info*/
	--color-top-info-text: #fff;
	--links-top-info: #fff;
	--links-top-info-hover: #870C1C;
	--background-top-info: linear-gradient(90deg, #000 0%, #000 42%, #000 58%, #000 100%);

	/*Top-Info 2*/
	--color-topinfo-2-svg:#FFF;
	--color-topinfo-2-a:#FFF;
	--color-topinfo-2-text:#FFF;

	/*Kontaktbox*/
	--color-kontaktbox-h4: #004176;
	--bg-kontaktbox: linear-gradient(160deg, #b4b4b4 0%, #565656 100%);
	--bg-main-kontaktbox: #fff;

	/*Text*/
	--color-ueberschriften: var(--color-akzent);
	--color-subline: #555756;

	--color-text: #333;
	--color-links: var(--color-akzent);
	--color-links-hover: #ee6401;

	/* Call to action Box */
	--call2action-background: #fff;
	--call2action-color-link-main: var(--color-akzent);
	--call2action-color-link-hover: #565756;

	/*Float Kontakt*/
	--color-float-contact-icon: #fff;
	--color-float-contact-background: #333;
	--bg-float-contact: rgba(255,255,255,0.50);

	/*Review-Slider*/
	--title-review: #000;
	--background-review-slider: linear-gradient(90deg, #EE6300 0%, #EE6300 42%, #EE6300 58%, #EE6300 100%);

	/*Footer*/
	--color-footer-text: #FFF;
	--color-footer-links-main: #fff;
	--color-footer-links-hover: #EF6301;
	--footer-icon-color: #fff;
	--background-footer: linear-gradient(
			90deg,
			rgba(0, 0, 0, 0.75) 0%,
			rgba(0, 0, 0, 0.75) 55%,
			rgba(0, 0, 0, 0.75) 100%
		),
		url("../images/background/bg-footer_162931744-gray.jpg"), #000;
	--background-footer-desktop: linear-gradient(
			90deg,
			rgba(0, 0, 0, 0.75) 0%,
			rgba(0, 0, 0, 0.75) 55%,
			rgba(0, 0, 0, 0.75) 100%
		),
		url("../images/background/bg-footer_162931744-gray-desktop.jpg"), #000;

	/*Social Media*/
	--color-facebook: #3c5997;
	
	/* Glas Effekt */
	--glas-background: rgba(255,255,255,0.40);
	--glas-border: rgba(255,255,255,0.30);

	/* -------------------- Schrift-Variablen ANFANG -------------------- */

		--font-ueberschriften: "sofia-pro", sans-serif;
		--font-fliesstext: "sofia-pro", sans-serif;
		--font-navigation: "sofia-pro", sans-serif;

/* -------------------- Schrift-Variablen ENDE -------------------- */
}

[data-theme="dark"] {
	/*Allgemein*/
	--color-akzent: #EF6301;
	--bg-slideshow: #3b3b3b;
	--bg-fallback-farbe: #3b3b3b;
	--border-social-media: 2px solid #fff;

	--bg-main-approach:#212529;
	--color-approach-h3:#FFF;
	--border-approach-items:#fff;

	--bg-fyc:url(../images/background/bg-call2action-dark.jpg);
	--color-fyc-h2:#fff;
	--bg-fyc-icon-calendar-clock:#212529;

	--bg-start-content:linear-gradient(135deg,#212529 0%,#212529 55%,#212529 100%);

	/*Item Animation*/
	--bg-item-animation:#212529;
	--bg-service-card:#212529;

	--bg-service-card-front:#212529;
	--color-service-card-title:#FFF;
	--color-service-card-subtitle:#FFF;

	--color-heading-swim-lessons:#FFF;

	/*Sayyours*/
	--bg-sy-elitefins:linear-gradient(135deg,#212529 0%,#212529 48%,#212529 100%);
	--color-sy-title:#FFF;
	--color-sy-text:#FFF;

	--bg-sy-locations:linear-gradient( 135deg,#1d1d1d 0%,#161616 48%,#1d1d1d 100%);

	--color-slider-content-title:#fff;
	--color-slider-content-text:#fff;
	--bg-hero-image-overlay:linear-gradient(
			90deg,
			rgba(7, 15, 27, 0.94) 0%,
			rgba(7, 15, 27, 0.88) 22%,
			rgba(7, 15, 27, 0.72) 38%,
			rgba(7, 15, 27, 0.48) 52%,
			rgba(7, 15, 27, 0.20) 67%,
			rgba(7, 15, 27, 0.05) 78%,
			rgba(7, 15, 27, 0) 88%
		);
		--slider-content-shadow: rgba(0, 0, 0, 0.5);
	
	/*Appointment Box*/
	--bg-app-box:rgba(43, 43, 43, 0.94);
	--color-app-title:#fff;
	--color-app-text:#fff;

	/*Barrierefreiheit Panel*/
	--access-panel-headline-color: #212529;
	--bcc-shadow: none;
	--bg-access-panel: #212529;
	--access-panel-bs: none;
	--bg-panel-button: #989898;
	--color-readline: #fff;
	--cursor-color: url('../images/icons/cursor-dark.png');
	--cursor-pointer: url('../images/icons/cursor-pointer-dark.png');
	--cursor-text: url('../images/icons/cursor-text-dark.png');
	--access-icon-tooltip-color: #fff;
	--access-icon-tooltip-text: #333;

	/*Cookie Modal*/
	--bg-modal-content: #212529;
	--modal-content-text-color: #fff;
	--modal-header-bg: #212529;
	--modal-header-text-color: #fff;
	--modal-footer-bg: #212529;
	--placeholder-background: #555555;
	--bg-consent-icons: #989898;
	--color-btn-custom-accept-normal: #212529;
	--color-btn-custom-accept-hover: #212529;
	--color-btn-custom-reject-normal: #cdcdcd;
	--color-btn-custom-reject-hover: #ADADAD;

	--background-content: #3b3b3b;
	--background-kontaktformular: #3b3b3b;
	--img-filter: brightness(0.8);
	--mapsiframe-filter: grayscale(100%) invert(90%) contrast(95%);

	/*Navigation*/
	--background-navi: rgba(59, 59, 59, 0.5);
	--background-navi-shrink: #3b3b3b;
	--color-nav-link: #fff;
	--color-navigation-hover: #fff;
	--color-dropdown-navigation: #fff;
	--dropdown-menu: rgba(0,0,0,0.80);

	--bg-navbar-toggler:#FFF;

	/*Top-Info*/
	--color-top-info-text: #fff;
	--links-top-info: #fff;
	--links-top-info-hover: #fff;
	--background-top-info: linear-gradient(90deg, rgb(0, 0, 0) 0%, rgb(0, 0, 0) 42%, rgb(0, 0, 0) 58%, rgb(0, 0, 0) 100%);

	/*Kontaktbox*/
	--color-kontaktbox-open: #fff;
	--color-kontaktbox-h4: #004176;
	--bg-kontaktbox: linear-gradient(160deg, #212529 0%, #212529 100%);
	--bg-main-kontaktbox: #212529;

	/*Text*/
	--color-ueberschriften: var(--color-akzent);
	--color-subline: #fff;
	--color-text: #fff;
	--color-links: var(--color-akzent);
	--color-links-hover: #314EB4;

	/* Call to action Box */
	--call2action-background: #555555;
	--call2action-color-link-main: var(--color-akzent);
	--call2action-color-link-hover: #314EB4;

	/*Float Kontakt*/
	--color-float-contact-icon: #fff;
	--color-float-contact-background: #531E20;
	--bg-float-contact: rgba(33,37,41,0.50);

	/*Review-Slider*/
	--title-review: #fff;
	--background-review-slider: linear-gradient(90deg, rgba(86,86,86,1.00) 0%, rgba(53,53,53,1.00) 42%, rgba(53,53,53,1.00) 58%, rgba(86,86,86,1.00) 100%);

	/*Footer*/
	--color-footer-text: #fff;
	--color-footer-links-main: #fff;
	--color-footer-links-hover: #EF6301;
	--footer-icon-color: #c4c5c5;
	--background-footer: #212529;
	
	/* Glas Effekt */
	--glas-background: rgba(33,37,41,0.40);
	--glas-border: rgba(33,37,41,0.30);
}
/* -------------------- Farben-Variablen ENDE -------------------- */