/* -------------------- Farben-Variablen BEGINN -------------------- */
:root {
	/*Allgemein*/
	--color-akzent: #575756;
	--bg-call2action: #fff;
	--bg-body: #fff;
	--color-white: #fff;
	--color-grey: #ccc;
	--bg-verlauf: linear-gradient(to right, #a6a7a8 0%, #f0eff0 50%, #b5b5b6 100%);
	--oberlay: rgba(255, 255, 255, 0.65);
	--bg-portfolio: linear-gradient(to bottom, #ffffff 0%, rgba(255,255,255,0.9) 12%, rgba(255,255,255,0) 40%, rgba(255,255,255,0) 60%, rgba(255,255,255,0.9) 88%, #ffffff 100%), linear-gradient(120deg, #9fa0a1 0%, #ececec 40%, #ffffff 50%, #ececec 60%, #9fa0a1 100%);
	--bg-heading:linear-gradient(120deg, #ebedee 0%, #fdfbfb 100%);
	--bg-heading-end:linear-gradient(120deg, #fdfbfb 0%, #ebedee 100%);

	/*Barrierefreiheit Panel*/
	--bcc-shadow: 0px 0px 4px 1px rgb(0 0 0 / 80%);
	--bg-access-panel: #fff;
	--access-panel-bs: 0px 0px 4px 2px rgba(95,95,95,0.6);
	--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;

	--background-content: linear-gradient(175deg, #a6a7a8 0%, #575756 50%, #575756 100%);
	/*--background-content: url('../images/background/');*/
	/*--background-kontaktformular: url('../images/background/');*/
	--img-filter: none;
	--mapsiframe-filter: drop-shadow(2px 4px 6px rgba(0,0,0,0.8));

	--bg-fallback-farbe:#575756;
	--bg-fallback-instagram:#D62977;

	/*Navigation*/
	--background-navi: #fff;
	--color-navigation: #000;
	--color-navigation-hover: #575756;
	--bg-navi-hover: linear-gradient(to right, #a6a7a8 0%, #f0eff0 50%, #b5b5b6 100%);
	--color-dropdown-navigation: #000;
	--color-dropdown-navigation-hover: #000;
	--bg-dropdown-hover: #b5b5b6;
	--dropdown-menu: rgba(255, 255, 255, 0.95);	

	/*Top-Info*/
	--color-top-info-text: #000;
	--links-top-info: #f0eff0;
	--links-top-info-hover: #333;
	--background-top-info: #575756;

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

	/*Text*/
	--color-ueberschriften: #575756;
	--color-subline: #000;
	--color-text: #333;
	--color-links: #6a6a6a;
	--color-links-hover: #565756;

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

	/*Footer*/
	--color-footer-text: #fff;
	--color-footer-links: #fff;
	--color-footer-links-hover: #333;
	--background-footer: linear-gradient(175deg, #a6a7a8 0%, #575756 50%, #575756 100%);
	--quicklinks-titel: #fff;

	/*Social Media*/
	--color-facebook: #3c5997;

	--bg-portfolio-active:#FFF;

	/*Cards*/
	--bg-card:#FFF;
	--color-card:#333;

	/*Modal*/
	--bg-modal:#FFF;
	--color-modal:#333;

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

	--font-ueberschriften: "bebas-neue-pro-expanded", sans-serif;
	--font-fliesstext: "futura-pt", sans-serif;
	--font-navigation: "futura-pt", sans-serif;

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

[data-theme="dark"] {
	/*Allgemein*/
	--color-akzent: #575756;
	--bg-call2action: #555555;
	--bg-body: #212529;
	--color-white: #fff;
	--color-grey: #ccc;
	--bg-slider: linear-gradient(to right, rgba(33, 37, 41, 0) 0%, rgba(33, 37, 41, 0.8) 50%, rgba(33, 37, 41, 0) 100%);
	--oberlay: rgba(33, 37, 41, 0.65);
	--bg-portfolio: linear-gradient(to bottom, #212529 0%, rgba(33, 37, 41,0.9) 12%, rgba(33, 37, 41,0) 40%, rgba(33, 37, 41,0) 60%, rgba(33, 37, 41,0.9) 88%, #212529 100%), linear-gradient(120deg, #383838 0%, #4c4c4c 40%, #212529 50%, #4c4c4c 60%, #383838 100%);
	--bg-heading:linear-gradient(120deg, #212529 0%, #212529 100%);
	--bg-heading-end:linear-gradient(120deg, #212529 0%, #212529 100%);

	/*Barrierefreiheit Panel*/
	--bcc-shadow: none;
	--bg-access-panel: #3b3b3b;
	--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: #3b3b3b;
	--modal-content-text-color: #fff;
	--modal-header-bg: #3b3b3b;
	--modal-header-text-color: #fff;
	--modal-footer-bg: #3b3b3b;
	--placeholder-background: #555555;
	--bg-consent-icons: #989898;
	--color-btn-custom-accept-normal: #2A2A2A;
	--color-btn-custom-accept-hover: #191919;

	--background-content: linear-gradient(175deg, #575756 0%, #575756 50%, #575756 100%);
	--background-kontaktformular: #212529;
	--img-filter: brightness(0.8);
	--mapsiframe-filter: grayscale(100%) invert(90%) contrast(95%);

	/*Navigation*/
	--background-navi: #212529;
	--color-navigation: #fff;
	--color-navigation-hover: #575756;
	--bg-navi-hover: linear-gradient(to right, #a6a7a8 0%, #f0eff0 50%, #b5b5b6 100%);
	--color-dropdown-navigation: #fff;
	--color-dropdown-navigation-hover: #000;
	--bg-dropdown-hover: #b5b5b6;
	--dropdown-menu: rgba(33, 37, 41, 0.95);

	/*Top-Info*/
	--color-top-info-text: #000;
	--links-top-info: #f0eff0;
	--links-top-info-hover: #333;
	--background-top-info: #575756;

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

	/*Text*/
	--color-ueberschriften: #fff;
	--color-subline: #fff;
	--color-text: #fff;
	--color-links: #b5b5b6;
	--color-links-hover: #565756;

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

	/*Footer*/
	--color-footer-text: #fff;
	--color-footer-links: #fff;
	--color-footer-links-hover: #333;
	--background-footer: linear-gradient(175deg, #575756 0%, #575756 50%, #575756 100%);
	--quicklinks-titel: #fff;

	--bg-portfolio-active:#333;

	/*Cards*/
	--bg-card:#333;
	--color-card:#FFF;

	/*Modal*/
	--bg-modal:#333;
	--color-modal:#FFF;

}

/* -------------------- Farben-Variablen ENDE -------------------- */