/* -------------------- Farben-Variablen BEGINN -------------------- */
:root {
	/* Kundenfarben */
	--color-blau: rgb(39 33 91);
	--color-blau-mittel: rgb(35 50 138);
	--color-blau-hell: rgb(80 84 159);
	--color-blau-nebel: rgb(200 202 240);
	--color-schwarz: rgb(23 24 12);
	--color-grau-50: rgb(248 249 251);
	--color-grau-100: rgb(240 241 245);
	--color-grau-200: rgb(226 228 235);
	--color-grau-400: rgb(160 163 176);
	--color-grau-600: rgb(98 101 115);

	/* Allgemein */
	--color-akzent: var(--color-blau);
	--bg-slideshow: rgb(255 255 255);
	--bg-fallback-farbe: rgb(226 228 235);
	--border-social-media: none;

	/* Barrierefreiheit Panel */
	--access-panel-headline-color: rgb(39 33 91);
	--bcc-shadow: 0 0 4px 1px rgb(0 0 0 / .8);
	--bg-access-panel: rgb(255 255 255);
	--access-panel-bs: 0 0 4px 2px rgb(95 95 95 / .6);
	--bg-panel-button: rgb(231 231 231);
	--color-readline: rgb(0 0 0);
	--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: rgb(51 51 51);
	--access-icon-tooltip-text: rgb(255 255 255);

	/* Cookie Modal */
	--bg-modal-content: rgb(255 255 255);
	--modal-content-text-color: rgb(51 51 51);
	--modal-header-bg: rgb(39 33 91);
	--modal-header-text-color: rgb(255 255 255);
	--modal-footer-bg: rgb(240 241 245);
	--placeholder-background: rgb(240 241 245);
	--bg-consent-icons: rgb(246 246 246);
	--color-btn-custom-accept-normal: rgb(39 33 91);
	--color-btn-custom-accept-hover: rgb(80 84 159);
	--color-btn-custom-reject-normal: rgb(205 205 205);
	--color-btn-custom-reject-hover: rgb(173 173 173);

	--background-content: transparent;
	--background-kontaktformular: transparent;
	--img-filter: none;
	--mapsiframe-filter: drop-shadow(2px 4px 6px rgb(0 0 0 / .25));

	/* Navigation */
	--background-navi: rgb(255 255 255 / .9);
	--color-navigation: rgb(39 33 91);
	--color-navigation-hover: rgb(39 33 91);
	--color-dropdown-navigation: rgb(39 33 91);
	--dropdown-menu: rgb(255 255 255 / .98);

	/* Top-Info */
	--color-top-info-text: rgb(255 255 255);
	--links-top-info: rgb(255 255 255);
	--links-top-info-hover: rgb(200 202 240);
	--background-top-info: linear-gradient(90deg, rgb(39 33 91) 0%, rgb(35 50 138) 60%, rgb(80 84 159) 100%);

	/* Kontaktbox */
	--color-kontaktbox-h4: rgb(255 255 255);
	--bg-kontaktbox: linear-gradient(135deg, rgb(39 33 91) 0%, rgb(35 50 138) 55%, rgb(80 84 159) 100%);
	--bg-main-kontaktbox: transparent;

	/* Text */
	--color-ueberschriften: var(--color-blau);
	--color-subline: rgb(98 101 115);

	--color-text: rgb(45 46 52);
	--color-links: var(--color-blau-mittel);
	--color-links-hover: rgb(80 84 159);

	/* Call to action Box */
	--call2action-background: rgb(255 255 255);
	--call2action-color-link-main: var(--color-blau-mittel);
	--call2action-color-link-hover: rgb(80 84 159);

	/* Float Kontakt */
	--color-float-contact-icon: rgb(255 255 255);
	--color-float-contact-background: rgb(39 33 91);
	--bg-float-contact: rgb(255 255 255 / .5);

	/* Review-Slider */
	--title-review: rgb(39 33 91);
	--background-review-slider: linear-gradient(90deg, rgb(226 228 235) 0%, rgb(248 249 251) 50%, rgb(226 228 235) 100%);

	/* Footer */
	--color-footer-text: rgb(232 233 245);
	--color-footer-links-main: rgb(232 233 245);
	--color-footer-links-hover: rgb(255 255 255);
	--footer-icon-color: rgb(200 202 240);
	--background-footer: linear-gradient(160deg, rgb(27 23 64) 0%, rgb(39 33 91) 55%, rgb(35 50 138) 100%);

	/* Social Media */
	--color-facebook: rgb(60 89 151);

	/* Glas Effekt */
	--glas-background: rgb(255 255 255 / .55);
	--glas-border: rgb(255 255 255 / .6);

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

		--font-ueberschriften: "poppins", sans-serif;
		--font-fliesstext: "futura-pt", sans-serif;
		--font-navigation: "futura-pt", sans-serif;

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

	/* Car Service – Grundlagen */
	--body-bg: rgb(240 241 245);
	--body-bild: url('../images/background/bg_186443785.jpg');
	--body-overlay: linear-gradient(180deg, rgb(255 255 255 / .35) 0%, rgb(240 241 245 / .55) 100%);
	--favicon-maske: url('../favicon.svg');
	--focus-ring: rgb(80 84 159);

	/* Car Service – Navigation */
	--nav-link-hover-bg: rgb(39 33 91 / .07);
	--nav-schatten: 0 1px 0 rgb(39 33 91 / .08), 0 .5rem 1.5rem rgb(39 33 91 / .06);

	/* Car Service – Hero */
	--hero-overlay: linear-gradient(90deg, rgb(255 255 255 / .96) 0%, rgb(255 255 255 / .9) 38%, rgb(255 255 255 / .35) 62%, rgb(255 255 255 / 0) 80%);
	--hero-overlay-mobil: linear-gradient(180deg, rgb(255 255 255 / .97) 0%, rgb(248 249 251 / .97) 100%);
	--hero-glow: radial-gradient(circle at 0% 100%, rgb(80 84 159 / .22) 0%, rgb(80 84 159 / 0) 45%);
	--hero-titel: rgb(39 33 91);
	--hero-text: rgb(45 46 52);
	--hero-chip-bg: rgb(39 33 91 / .08);
	--hero-chip-text: rgb(39 33 91);
	--hero-btn-primaer-bg: linear-gradient(135deg, rgb(39 33 91) 0%, rgb(80 84 159) 100%);
	--hero-btn-primaer-text: rgb(255 255 255);
	--hero-btn-sekundaer-bg: rgb(255 255 255);
	--hero-btn-sekundaer-text: rgb(39 33 91);
	--hero-btn-sekundaer-rand: rgb(39 33 91 / .2);
	--hero-vorteil-icon: rgb(80 84 159);
	--slider-trenner: linear-gradient(90deg, rgb(39 33 91) 0%, rgb(35 50 138) 40%, rgb(80 84 159) 75%, rgb(200 202 240) 100%);

	/* Car Service – Panels */
	--panel-radius: 1.75rem;
	--panel-schatten: 0 1.5rem 3.5rem rgb(39 33 91 / .12);
	--panel-hell-bg: rgb(255 255 255 / .94);
	--panel-hell-rand: rgb(255 255 255);
	--panel-tint-bg: linear-gradient(160deg, rgb(234 235 248 / .96) 0%, rgb(246 247 252 / .96) 100%);
	--panel-tint-rand: rgb(255 255 255 / .8);
	--panel-blau-bg: linear-gradient(135deg, rgb(39 33 91) 0%, rgb(35 50 138) 60%, rgb(80 84 159) 100%);
	--panel-blau-text: rgb(232 233 245);
	--panel-blau-titel: rgb(255 255 255);
	--panel-blau-eyebrow: rgb(200 202 240);

	/* Car Service – Start */
	--start-eyebrow-bg: rgb(39 33 91 / .08);
	--start-eyebrow-text: rgb(39 33 91);
	--check-card-bg: linear-gradient(160deg, rgb(240 241 250) 0%, rgb(248 249 252) 100%);
	--check-card-border: rgb(39 33 91 / .1);
	--check-icon: rgb(80 84 159);
	--hinweis-bg: rgb(80 84 159 / .08);
	--leistungs-punkt-bg: rgb(255 255 255);
	--link-unterstrich: rgb(35 50 138 / .35);
	--bilderstapel-deko: linear-gradient(135deg, rgb(39 33 91) 0%, rgb(35 50 138) 55%, rgb(80 84 159) 100%);
	--bilderstapel-rahmen: rgb(255 255 255);

	/* Car Service – Leistungen */
	--service-card-bg: rgb(255 255 255);
	--service-card-border: rgb(226 228 235);
	--service-card-shadow: 0 .5rem 1.5rem rgb(39 33 91 / .07);
	--service-card-shadow-hover: 0 1.25rem 2.5rem rgb(39 33 91 / .2);
	--service-icon-bg: radial-gradient(circle at 30% 25%, rgb(128 132 200) 0%, rgb(80 84 159) 45%, rgb(39 33 91) 100%);
	--service-icon-color: rgb(255 255 255);
	--service-card-hover-bg: linear-gradient(160deg, rgb(39 33 91) 0%, rgb(35 50 138) 100%);
	--service-card-hover-text: rgb(255 255 255);
	--service-icon-hover-bg: rgb(255 255 255);
	--service-icon-hover-color: rgb(39 33 91);

	/* Car Service – Vorteile */
	--vorteil-card-bg: rgb(255 255 255 / .08);
	--vorteil-card-rand: rgb(255 255 255 / .16);
	--vorteil-icon-bg: rgb(255 255 255 / .14);
	--vorteil-icon-color: rgb(255 255 255);

	/* Car Service – Ablauf */
	--ablauf-nummer-bg: rgb(255 255 255);
	--ablauf-nummer-border: rgb(80 84 159);
	--ablauf-nummer-text: rgb(39 33 91);
	--ablauf-linie: linear-gradient(90deg, rgb(80 84 159 / 0) 0%, rgb(80 84 159 / .5) 15%, rgb(80 84 159 / .5) 85%, rgb(80 84 159 / 0) 100%);

	/* Car Service – Kontaktleiste */
	--kontaktleiste-bg: rgb(255 255 255);
	--kontaktleiste-text: rgb(45 46 52);
	--kontaktleiste-label: rgb(98 101 115);
	--kontaktleiste-icon-bg: rgb(39 33 91 / .08);
	--kontaktleiste-icon: rgb(39 33 91);

	/* Car Service – Kontaktbereich */
	--kontakt-info-bg: linear-gradient(160deg, rgb(39 33 91) 0%, rgb(35 50 138) 70%, rgb(80 84 159) 100%);
	--kontakt-info-text: rgb(232 233 245);
	--kontakt-formular-bg: rgb(255 255 255);
	--kontakt-trenner: rgb(255 255 255 / .16);

	/* Car Service – Footer */
	--footer-cta-bg: rgb(255 255 255 / .08);
	--footer-cta-rand: rgb(255 255 255 / .16);
	--footer-unten-bg: rgb(0 0 0 / .2);

	/* Car Service – Float-Contact */
	--float-dock-bg: rgb(255 255 255 / .95);
	--float-dock-rand: rgb(39 33 91 / .12);
	--float-dock-icon-bg: rgb(39 33 91);
	--float-dock-icon: rgb(255 255 255);
	--float-dock-ring: rgb(80 84 159 / .25);

	/* Car Service – Fallbacks für „Bilder ausblenden“ */
	--fallback-blau: rgb(39 33 91);
	--fallback-tint: rgb(236 237 248);
	--fallback-check: rgb(242 243 250);
	--fallback-hero: rgb(248 249 251);
	--fallback-button: rgb(39 33 91);
	--fallback-footer: rgb(27 23 64);

	/* Car Service – Offen-Indikator */
	--offen-farbe-offen: rgb(74 222 128);
	--offen-farbe-zu: rgb(251 191 36);
}

[data-theme="dark"] {
	/* Allgemein */
	--color-akzent: rgb(80 84 159);
	--bg-slideshow: rgb(22 23 32);
	--bg-fallback-farbe: rgb(44 46 60);
	--border-social-media: 2px solid rgb(255 255 255);

	/* Barrierefreiheit Panel */
	--access-panel-headline-color: rgb(39 33 91);
	--bcc-shadow: none;
	--bg-access-panel: rgb(44 46 60);
	--access-panel-bs: none;
	--bg-panel-button: rgb(80 82 98);
	--color-readline: rgb(255 255 255);
	--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: rgb(255 255 255);
	--access-icon-tooltip-text: rgb(51 51 51);

	/* Cookie Modal */
	--bg-modal-content: rgb(30 31 42);
	--modal-content-text-color: rgb(255 255 255);
	--modal-header-bg: rgb(39 33 91);
	--modal-header-text-color: rgb(255 255 255);
	--modal-footer-bg: rgb(30 31 42);
	--placeholder-background: rgb(44 46 60);
	--bg-consent-icons: rgb(80 82 98);
	--color-btn-custom-accept-normal: rgb(80 84 159);
	--color-btn-custom-accept-hover: rgb(39 33 91);
	--color-btn-custom-reject-normal: rgb(205 205 205);
	--color-btn-custom-reject-hover: rgb(173 173 173);

	--background-content: transparent;
	--background-kontaktformular: transparent;
	--img-filter: brightness(.8);
	--mapsiframe-filter: grayscale(100%) invert(90%) contrast(95%);

	/* Navigation */
	--background-navi: rgb(22 23 32 / .92);
	--color-navigation: rgb(255 255 255);
	--color-navigation-hover: rgb(255 255 255);
	--color-dropdown-navigation: rgb(255 255 255);
	--dropdown-menu: rgb(30 31 42 / .98);

	/* Top-Info */
	--color-top-info-text: rgb(255 255 255);
	--links-top-info: rgb(255 255 255);
	--links-top-info-hover: rgb(200 202 240);
	--background-top-info: linear-gradient(90deg, rgb(28 24 66) 0%, rgb(39 33 91) 60%, rgb(60 64 130) 100%);

	/* Kontaktbox */
	--color-kontaktbox-open: rgb(255 255 255);
	--color-kontaktbox-h4: rgb(255 255 255);
	--bg-kontaktbox: linear-gradient(135deg, rgb(28 24 66) 0%, rgb(39 33 91) 55%, rgb(60 64 130) 100%);
	--bg-main-kontaktbox: transparent;

	/* Text */
	--color-ueberschriften: rgb(173 177 235);
	--color-subline: rgb(200 202 214);
	--color-text: rgb(232 233 240);
	--color-links: rgb(173 177 235);
	--color-links-hover: rgb(255 255 255);

	/* Call to action Box */
	--call2action-background: rgb(44 46 60);
	--call2action-color-link-main: rgb(173 177 235);
	--call2action-color-link-hover: rgb(255 255 255);

	/* Float Kontakt */
	--color-float-contact-icon: rgb(255 255 255);
	--color-float-contact-background: rgb(80 84 159);
	--bg-float-contact: rgb(22 23 32 / .5);

	/* Review-Slider */
	--title-review: rgb(255 255 255);
	--background-review-slider: linear-gradient(90deg, rgb(30 31 42) 0%, rgb(44 46 60) 50%, rgb(30 31 42) 100%);

	/* Footer */
	--color-footer-text: rgb(220 221 235);
	--color-footer-links-main: rgb(220 221 235);
	--color-footer-links-hover: rgb(255 255 255);
	--footer-icon-color: rgb(173 177 235);
	--background-footer: linear-gradient(160deg, rgb(14 14 24) 0%, rgb(26 22 58) 60%, rgb(33 30 78) 100%);

	/* Glas Effekt */
	--glas-background: rgb(22 23 32 / .4);
	--glas-border: rgb(22 23 32 / .3);

	/* Car Service – Grundlagen */
	--body-bg: rgb(18 19 27);
	--body-overlay: linear-gradient(180deg, rgb(18 19 27 / .9) 0%, rgb(18 19 27 / .94) 100%);
	--focus-ring: rgb(173 177 235);

	/* Car Service – Navigation */
	--nav-link-hover-bg: rgb(173 177 235 / .12);
	--nav-schatten: 0 1px 0 rgb(255 255 255 / .06), 0 .5rem 1.5rem rgb(0 0 0 / .35);

	/* Car Service – Hero */
	--hero-overlay: linear-gradient(90deg, rgb(18 19 27 / .96) 0%, rgb(18 19 27 / .9) 38%, rgb(18 19 27 / .45) 62%, rgb(18 19 27 / .1) 80%);
	--hero-overlay-mobil: linear-gradient(180deg, rgb(22 23 32) 0%, rgb(26 27 38) 100%);
	--hero-glow: radial-gradient(circle at 0% 100%, rgb(80 84 159 / .3) 0%, rgb(80 84 159 / 0) 45%);
	--hero-titel: rgb(255 255 255);
	--hero-text: rgb(220 221 235);
	--hero-chip-bg: rgb(173 177 235 / .14);
	--hero-chip-text: rgb(200 202 240);
	--hero-btn-primaer-bg: linear-gradient(135deg, rgb(80 84 159) 0%, rgb(110 114 190) 100%);
	--hero-btn-primaer-text: rgb(255 255 255);
	--hero-btn-sekundaer-bg: rgb(255 255 255 / .06);
	--hero-btn-sekundaer-text: rgb(255 255 255);
	--hero-btn-sekundaer-rand: rgb(255 255 255 / .3);
	--hero-vorteil-icon: rgb(173 177 235);
	--slider-trenner: linear-gradient(90deg, rgb(28 24 66) 0%, rgb(39 33 91) 40%, rgb(80 84 159) 75%, rgb(173 177 235) 100%);

	/* Car Service – Panels */
	--panel-schatten: 0 1.5rem 3.5rem rgb(0 0 0 / .4);
	--panel-hell-bg: rgb(30 31 42 / .96);
	--panel-hell-rand: rgb(255 255 255 / .06);
	--panel-tint-bg: linear-gradient(160deg, rgb(34 34 56 / .96) 0%, rgb(28 29 42 / .96) 100%);
	--panel-tint-rand: rgb(255 255 255 / .06);
	--panel-blau-bg: linear-gradient(135deg, rgb(28 24 66) 0%, rgb(39 33 91) 60%, rgb(60 64 130) 100%);

	/* Car Service – Start */
	--start-eyebrow-bg: rgb(173 177 235 / .14);
	--start-eyebrow-text: rgb(200 202 240);
	--check-card-bg: linear-gradient(160deg, rgb(38 40 58) 0%, rgb(34 35 48) 100%);
	--check-card-border: rgb(173 177 235 / .16);
	--check-icon: rgb(173 177 235);
	--hinweis-bg: rgb(173 177 235 / .1);
	--leistungs-punkt-bg: rgb(38 40 54);
	--link-unterstrich: rgb(173 177 235 / .45);
	--bilderstapel-deko: linear-gradient(135deg, rgb(28 24 66) 0%, rgb(39 33 91) 55%, rgb(60 64 130) 100%);
	--bilderstapel-rahmen: rgb(38 40 54);

	/* Car Service – Leistungen */
	--service-card-bg: rgb(38 40 54);
	--service-card-border: rgb(58 60 78);
	--service-card-shadow: 0 .5rem 1.5rem rgb(0 0 0 / .3);
	--service-card-shadow-hover: 0 1.25rem 2.5rem rgb(0 0 0 / .5);
	--service-icon-bg: radial-gradient(circle at 30% 25%, rgb(128 132 200) 0%, rgb(80 84 159) 45%, rgb(39 33 91) 100%);
	--service-card-hover-bg: linear-gradient(160deg, rgb(60 64 130) 0%, rgb(39 33 91) 100%);
	--service-icon-hover-bg: rgb(255 255 255);
	--service-icon-hover-color: rgb(39 33 91);

	/* Car Service – Ablauf */
	--ablauf-nummer-bg: rgb(38 40 54);
	--ablauf-nummer-border: rgb(173 177 235);
	--ablauf-nummer-text: rgb(200 202 240);
	--ablauf-linie: linear-gradient(90deg, rgb(173 177 235 / 0) 0%, rgb(173 177 235 / .4) 15%, rgb(173 177 235 / .4) 85%, rgb(173 177 235 / 0) 100%);

	/* Car Service – Kontaktleiste */
	--kontaktleiste-bg: rgb(30 31 42);
	--kontaktleiste-text: rgb(232 233 240);
	--kontaktleiste-label: rgb(180 182 198);
	--kontaktleiste-icon-bg: rgb(173 177 235 / .12);
	--kontaktleiste-icon: rgb(200 202 240);

	/* Car Service – Kontaktbereich */
	--kontakt-info-bg: linear-gradient(160deg, rgb(28 24 66) 0%, rgb(39 33 91) 70%, rgb(60 64 130) 100%);
	--kontakt-formular-bg: rgb(30 31 42);

	/* Car Service – Footer */
	--footer-cta-bg: rgb(255 255 255 / .05);
	--footer-cta-rand: rgb(255 255 255 / .1);
	--footer-unten-bg: rgb(0 0 0 / .3);

	/* Car Service – Float-Contact */
	--float-dock-bg: rgb(30 31 42 / .95);
	--float-dock-rand: rgb(255 255 255 / .12);
	--float-dock-icon-bg: rgb(80 84 159);
	--float-dock-icon: rgb(255 255 255);
	--float-dock-ring: rgb(173 177 235 / .25);

	/* Car Service – Fallbacks für „Bilder ausblenden“ */
	--fallback-blau: rgb(39 33 91);
	--fallback-tint: rgb(32 33 50);
	--fallback-check: rgb(36 37 52);
	--fallback-hero: rgb(22 23 32);
	--fallback-button: rgb(80 84 159);
	--fallback-footer: rgb(18 17 36);
}
/* -------------------- Farben-Variablen ENDE -------------------- */