@charset "UTF-8";
/* =========================================================================
   variablen.css
   ---------------------------------------------------------------
   Aufbau:
   1. Basis-Palette        -> Rohfarben, themeunabhaengig
   2. :root                -> Light Mode (semantische Variablen)
   3. [data-theme="dark"]  -> Dark Mode  (semantische Variablen)

   Schreibweise: rgb(R G B) bzw. rgb(R G B / .5)
   Regel: In den Bausteinen (navigation.css, footer.css, zz--custom.css ...)
          NIEMALS die Basis-Palette direkt verwenden, sondern immer die
          semantischen Variablen. Nur so bleibt der Darkmode steuerbar.
   ========================================================================= */


/* -------------------- 1. Basis-Palette BEGINN -------------------- */

:root {
	/* Kundenfarben */
	--kunde-turkis-rgb: 0 138 154;              /* #008a9a */
	--kunde-turkis: rgb(var(--kunde-turkis-rgb));

	--kunde-turkis-dunkel-rgb: 0 109 121;       /* #006d79 */
	--kunde-turkis-dunkel: rgb(var(--kunde-turkis-dunkel-rgb));

	--kunde-turkis-hell-rgb: 42 181 198;        /* aufgehellt fuer den Darkmode */
	--kunde-turkis-hell: rgb(var(--kunde-turkis-hell-rgb));

	--kunde-grau-hell-rgb: 177 171 158;         /* #b1ab9e */
	--kunde-grau-hell: rgb(var(--kunde-grau-hell-rgb));

	--kunde-grau-dunkel-rgb: 82 81 76;          /* #52514c */
	--kunde-grau-dunkel: rgb(var(--kunde-grau-dunkel-rgb));

	--kunde-grau-aufgehellt-rgb: 154 152 143;   /* #52514c aufgehellt fuer den Darkmode */
	--kunde-grau-aufgehellt: rgb(var(--kunde-grau-aufgehellt-rgb));

	--kunde-anthrazit-rgb: 51 51 51;            /* #333 */
	--kunde-anthrazit: rgb(var(--kunde-anthrazit-rgb));

	--kunde-beige-rgb: 176 158 128;             /* #b09e80 */
	--kunde-beige: rgb(var(--kunde-beige-rgb));

	--kunde-signal-rgb: 210 33 18;              /* #d22112 */
	--kunde-signal: rgb(var(--kunde-signal-rgb));
	--kunde-signal-dunkel-rgb: 131 20 11;       /* #83140b */
	--kunde-signal-dunkel: rgb(var(--kunde-signal-dunkel-rgb));

	/* Neutral */
	--weiss-rgb: 255 255 255;
	--weiss: rgb(var(--weiss-rgb));
	--schwarz-rgb: 0 0 0;
	--schwarz: rgb(var(--schwarz-rgb));

	/* Darkmode-Flaechen */
	--darkmode-rgb: 33 37 41;                   /* #212529 */
	--darkmode: rgb(var(--darkmode-rgb));
	--darkmode-flaeche-rgb: 52 58 64;           /* #343a40 - Karten, Boxen */
	--darkmode-flaeche: rgb(var(--darkmode-flaeche-rgb));
	--darkmode-text-rgb: 233 236 239;           /* #e9ecef */
	--darkmode-text: rgb(var(--darkmode-text-rgb));
	--darkmode-text-gedimmt-rgb: 206 212 218;   /* #ced4da */
	--darkmode-text-gedimmt: rgb(var(--darkmode-text-gedimmt-rgb));
}

/* -------------------- 1. Basis-Palette ENDE -------------------- */



/* -------------------- 2. Light Mode BEGINN -------------------- */

:root {
	color-scheme: light;

	/* Allgemein / Akzent */
	--color-akzent: var(--kunde-turkis);          /* Text, Icons, Linien */
	--bg-akzent: var(--kunde-turkis);             /* gefuellte Flaechen */
	--bg-akzent-hover: var(--kunde-turkis-dunkel);
	--color-auf-akzent: var(--weiss);             /* Text auf --bg-akzent */

	--bg-slideshow: var(--weiss);
	--bg-fallback-farbe: rgb(170 170 170);
	--border-social-media: none;

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

	/* Dekorative Hintergrundbilder (bg-content-front usw.) */
	--bg-deko-blend-mode: normal;

	/* Fokus (Tastaturbedienung) */
	--fokus-outline: 3px solid var(--color-akzent);
	--fokus-outline-offset: 2px;

	/* Slider / Flexslider */
	--bg-slider-overlay: linear-gradient(90deg, rgb(197 222 234 / .1) 0%, rgb(197 222 234) 50%, rgb(197 222 234 / .1) 100%);
	--bg-slider-overlay-border: 1px solid var(--weiss);
	--slider-bild-filter: none;
	--slider-uebergang-filter: none;              /* Filter fuer bg-slider.svg */
	--bg-slider-nav: var(--weiss);
	--color-slider-nav: var(--kunde-anthrazit);

	/* Barrierefreiheit Panel */
	--access-panel-headline-color: rgb(59 59 59);
	--bcc-shadow: 0px 0px 4px 1px rgb(0 0 0 / .8);
	--bg-access-panel: var(--weiss);
	--access-panel-bs: 0px 0px 4px 2px rgb(95 95 95 / .6);
	--bg-panel-button: rgb(231 231 231);
	--bg-panel-button-hover: rgb(199 199 199);
	--color-readline: var(--schwarz);
	--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: var(--kunde-anthrazit);
	--access-icon-tooltip-text: var(--weiss);
	--a11y-icon-bg: var(--weiss);
	--a11y-icon-border: var(--weiss);
	--a11y-icon-outline: var(--schwarz);
	--a11y-icon-color: var(--color-akzent);
	--a11y-close-bg: var(--weiss);
	--a11y-close-bg-hover: rgb(228 228 228);
	--a11y-close-color: rgb(12 21 32);

	/* Cookie Modal */
	--bg-modal-content: var(--weiss);
	--modal-content-text-color: var(--kunde-anthrazit);
	--modal-header-bg: rgb(59 59 59);
	--modal-header-text-color: var(--weiss);
	--modal-footer-bg: rgb(231 231 231);
	--modal-backdrop-bg: rgb(0 0 0 / .35);
	--placeholder-background: rgb(238 238 238);
	--placeholder-border: 1px solid rgb(207 207 207);
	--bg-consent-icons: rgb(246 246 246);
	--consent-icons-shadow: 0px 0px 6px 0px rgb(0 0 0 / .24);
	--icontrenner-links: 1px solid rgb(255 255 255);
	--icontrenner-rechts: 1px solid rgb(204 204 204);
	--cookie-brand-icon-bg: var(--weiss);
	--color-btn-custom-accept-normal: rgb(59 59 59);
	--color-btn-custom-accept-hover: rgb(42 42 42);
	--color-btn-custom-accept-text: var(--weiss);
	--color-btn-custom-reject-normal: rgb(205 205 205);
	--color-btn-custom-reject-hover: rgb(173 173 173);
	--color-btn-custom-reject-text: rgb(59 59 59);

	/* Navigation */
	--bg-navi-neu: linear-gradient(120deg, rgb(82 81 76) 0%, rgb(123 123 123) 40%, rgb(123 123 123) 50%, rgb(82 81 76) 100%);
	--bg-navi-shrink: var(--kunde-grau-dunkel);
	--navi-shadow: 0px 15px 10px -15px rgb(17 17 17);
	--color-navigation: var(--weiss);
	--color-navigation-hover: var(--color-akzent);
	--bg-navigation-hover: rgb(255 255 255 / .5);
	--color-navbar-toggler: var(--weiss);

	/* Dropdown */
	--dropdown-menu: rgb(0 0 0 / .8);
	--dropdown-shadow: inset 1px 1px rgb(255 255 255 / .2), inset -1px -1px rgb(255 255 255 / .1), 1px 3px 24px -1px rgb(0 0 0 / .15);
	--color-dropdown-navigation: var(--weiss);
	--bg-dropdown-hover: var(--bg-akzent);
	--color-dropdown-navigation-hover: var(--color-auf-akzent);
	--dropdown-trenner: 1px dotted rgb(255 255 255 / .5);

	/* Top-Info */
	--color-top-info-text: var(--weiss);
	--links-top-info: var(--weiss);
	--links-top-info-hover: var(--kunde-grau-hell);
	--background-top-info: linear-gradient(90deg, rgb(86 86 86) 0%, rgb(180 180 180) 42%, rgb(180 180 180) 58%, rgb(86 86 86) 100%);
	--bg-badge: var(--kunde-beige);
	--color-badge: var(--weiss);

	/* Kontaktbox */
	--color-kontaktbox-h4: rgb(0 65 118);
	--bg-kontaktbox: linear-gradient(160deg, var(--kunde-turkis) 0%, var(--kunde-turkis-dunkel) 100%);
	--bg-main-kontaktbox: var(--weiss);
	--color-kontaktbox-text: var(--weiss);
	--kontaktbox-shadow: 0px 0px 15px 5px rgb(0 0 0 / .4);
	--bg-kontaktbox-btn: var(--kunde-signal);
	--bg-kontaktbox-btn-hover: var(--kunde-signal-dunkel);
	--color-kontaktbox-btn: var(--weiss);

	/* Text */
	--color-ueberschriften: var(--color-akzent);
	--color-subline: rgb(85 87 86);
	--color-claim: var(--kunde-grau-hell);
	--color-subtitel: var(--color-akzent);

	--color-text: var(--kunde-anthrazit);
	--color-links: rgb(105 105 105);
	--color-links-hover: var(--color-akzent);

	/* Farb-Utilities (.color-01 ... / .bg-color-01 ...) */
	--color-01: var(--kunde-turkis);
	--color-02: var(--kunde-grau-hell);
	--color-03: var(--kunde-grau-dunkel);
	--color-04: var(--kunde-anthrazit);
	--color-05: var(--weiss);
	--color-06: linear-gradient(45deg, var(--kunde-turkis) 0%, var(--kunde-grau-hell) 100%);
	--bg-color-01: var(--kunde-turkis);
	--bg-color-02: var(--kunde-grau-hell);
	--bg-color-03: var(--kunde-grau-dunkel);
	--bg-color-04: var(--kunde-anthrazit);
	--bg-color-05: var(--weiss);
	--bg-color-06: linear-gradient(45deg, var(--kunde-grau-dunkel) 30%, var(--kunde-turkis) 100%);

	/* Trenner / hr */
	--hr-style-filter: none;

	/* Tabellen */
	--table-border-color: var(--color-akzent);
	--bg-table-success: var(--bg-akzent);
	--color-table-success: var(--color-auf-akzent);

	/* Buttons */
	--btn-focus-shadow: 0 0 0 .25rem rgb(var(--kunde-beige-rgb) / .5);

	/* Call to action Box */
	--call2action-background: var(--weiss);
	--call2action-color-link-main: var(--color-akzent);
	--call2action-color-link-hover: rgb(86 87 86);

	/* Scroll Top */
	--bg-scroll-top: rgb(43 43 43 / .6);
	--color-scroll-top: var(--weiss);
	--color-scroll-top-hover: rgb(29 29 27);
	--scroll-top-shadow: 1px 0px 2px rgb(51 51 51);

	/* Float Kontakt */
	--bg-float-button: var(--bg-akzent);
	--color-float-contact-icon: var(--weiss);
	--color-float-contact-hover: var(--kunde-grau-hell);
	--bg-float-element: var(--weiss);
	--color-float-element: var(--color-akzent);
	--border-float-element: 3px solid var(--kunde-grau-dunkel);
	--bg-float-contact: rgb(255 255 255 / .5);

	/* Review-Slider */
	--title-review: var(--schwarz);
	--background-review-slider: linear-gradient(90deg, rgb(86 86 86) 0%, rgb(180 180 180) 42%, rgb(180 180 180) 58%, rgb(86 86 86) 100%);

	/* Footer */
	--color-footer-text: var(--color-text);
	--color-footer-title: var(--kunde-grau-dunkel);
	--color-footer-links-main: var(--kunde-anthrazit);
	--color-footer-links-hover: var(--color-akzent);
	--footer-icon-color: rgb(86 87 86);
	--background-footer: linear-gradient(180deg, rgb(255 255 255) 30%, rgb(161 161 161) 100%);
	--color-footer-end-links: var(--weiss);
	--color-footer-end-links-hover: var(--kunde-grau-hell);

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

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

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

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

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

/* -------------------- 2. Light Mode ENDE -------------------- */



/* -------------------- 3. Dark Mode BEGINN -------------------- */

[data-theme="dark"] {
	color-scheme: dark;

	/* Allgemein / Akzent
	   Hinweis: als Textfarbe wird das aufgehellte Tuerkis genutzt (Kontrast
	   auf #212529 ca. 6.2:1), als Flaechenfarbe bleibt das Original-Tuerkis,
	   damit weisser Text darauf lesbar bleibt. */
	--color-akzent: var(--kunde-turkis-hell);
	--bg-akzent: var(--kunde-turkis);
	--bg-akzent-hover: var(--kunde-turkis-dunkel);
	--color-auf-akzent: var(--weiss);

	--bg-slideshow: var(--darkmode);
	--bg-fallback-farbe: rgb(152 152 152);
	--border-social-media: 2px solid var(--weiss);

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

	--bg-deko-blend-mode: multiply;

	--fokus-outline: 3px solid var(--color-akzent);
	--fokus-outline-offset: 2px;

	/* Slider / Flexslider */
	--bg-slider-overlay: linear-gradient(90deg, rgb(var(--darkmode-rgb) / .1) 0%, rgb(var(--darkmode-rgb)) 50%, rgb(var(--darkmode-rgb) / .1) 100%);
	--bg-slider-overlay-border: 1px solid rgb(var(--darkmode-rgb) / 0);
	--slider-bild-filter: brightness(0.5);
	--slider-uebergang-filter: brightness(0.15);  /* faerbt die helle bg-slider.svg dunkel */
	--bg-slider-nav: var(--darkmode);
	--color-slider-nav: var(--darkmode-text);

	/* Barrierefreiheit Panel */
	--access-panel-headline-color: rgb(59 59 59);
	--bcc-shadow: none;
	--bg-access-panel: rgb(59 59 59);
	--access-panel-bs: none;
	--bg-panel-button: rgb(152 152 152);
	--bg-panel-button-hover: rgb(120 120 120);
	--color-readline: var(--weiss);
	--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: var(--weiss);
	--access-icon-tooltip-text: var(--kunde-anthrazit);
	--a11y-icon-bg: #fff;
	--a11y-icon-border: var(--darkmode);
	--a11y-icon-outline: var(--weiss);
	--a11y-icon-color: var(--color-akzent);
	--a11y-close-bg: rgb(89 89 89);
	--a11y-close-bg-hover: rgb(110 110 110);
	--a11y-close-color: var(--weiss);

	/* Cookie Modal */
	--bg-modal-content: rgb(59 59 59);
	--modal-content-text-color: var(--weiss);
	--modal-header-bg: rgb(59 59 59);
	--modal-header-text-color: var(--weiss);
	--modal-footer-bg: rgb(59 59 59);
	--modal-backdrop-bg: rgb(0 0 0 / .6);
	--placeholder-background: rgb(85 85 85);
	--placeholder-border: 1px solid rgb(120 120 120);
	--bg-consent-icons: rgb(152 152 152);
	--consent-icons-shadow: none;
	--icontrenner-links: 1px solid rgb(255 255 255 / .15);
	--icontrenner-rechts: 1px solid rgb(0 0 0 / .3);
	--cookie-brand-icon-bg: var(--weiss);
	--color-btn-custom-accept-normal: rgb(42 42 42);
	--color-btn-custom-accept-hover: rgb(25 25 25);
	--color-btn-custom-accept-text: var(--weiss);
	--color-btn-custom-reject-normal: rgb(205 205 205);
	--color-btn-custom-reject-hover: rgb(173 173 173);
	--color-btn-custom-reject-text: rgb(59 59 59);

	/* Navigation */
	--bg-navi-neu: linear-gradient(120deg, rgb(var(--darkmode-rgb)) 0%, rgb(var(--darkmode-rgb)) 100%);
	--bg-navi-shrink: var(--darkmode);
	--navi-shadow: 0px 15px 10px -15px rgb(0 0 0);
	--color-navigation: var(--darkmode-text);
	--color-navigation-hover: var(--color-akzent);
	--bg-navigation-hover: rgb(255 255 255 / .12);
	--color-navbar-toggler: var(--darkmode-text);

	/* Dropdown */
	--dropdown-menu: rgb(var(--darkmode-rgb) / .95);
	--dropdown-shadow: inset 1px 1px rgb(255 255 255 / .1), inset -1px -1px rgb(255 255 255 / .05), 1px 3px 24px -1px rgb(0 0 0 / .6);
	--color-dropdown-navigation: var(--darkmode-text);
	--bg-dropdown-hover: var(--bg-akzent);
	--color-dropdown-navigation-hover: var(--color-auf-akzent);
	--dropdown-trenner: 1px dotted rgb(255 255 255 / .35);

	/* Top-Info */
	--color-top-info-text: var(--weiss);
	--links-top-info: var(--weiss);
	--links-top-info-hover: var(--kunde-grau-hell);
	--background-top-info: linear-gradient(90deg, rgb(86 86 86) 0%, rgb(53 53 53) 42%, rgb(53 53 53) 58%, rgb(86 86 86) 100%);
	--bg-badge: var(--kunde-beige);
	--color-badge: var(--kunde-anthrazit);

	/* Kontaktbox */
	--color-kontaktbox-open: var(--weiss);
	--color-kontaktbox-h4: var(--weiss);
	--bg-kontaktbox: linear-gradient(160deg, var(--kunde-turkis-dunkel) 0%, rgb(0 74 82) 100%);
	--bg-main-kontaktbox: var(--darkmode);
	--color-kontaktbox-text: var(--weiss);
	--kontaktbox-shadow: 0px 0px 15px 5px rgb(0 0 0 / .6);
	--bg-kontaktbox-btn: var(--kunde-signal);
	--bg-kontaktbox-btn-hover: var(--kunde-signal-dunkel);
	--color-kontaktbox-btn: var(--weiss);

	/* Text */
	--color-ueberschriften: var(--color-akzent);
	--color-subline: var(--darkmode-text);
	--color-claim: var(--kunde-grau-hell);
	--color-subtitel: var(--color-akzent);

	--color-text: var(--darkmode-text);
	--color-links: var(--darkmode-text-gedimmt);
	--color-links-hover: var(--color-akzent);

	/* Farb-Utilities
	   Bewusst nur dort umgestellt, wo die Farbe auf dunklem Grund unlesbar
	   waere: --color-04 (Fliesstext-Schwarz) und --bg-color-05 (weisse Flaeche). */
	--color-01: var(--kunde-turkis-hell);
	--color-02: var(--kunde-grau-hell);
	--color-03: var(--kunde-grau-aufgehellt);
	--color-04: var(--darkmode-text);
	--color-05: var(--weiss);
	--color-06: linear-gradient(45deg, var(--kunde-turkis-hell) 0%, var(--kunde-grau-hell) 100%);
	--bg-color-01: var(--kunde-turkis);
	--bg-color-02: var(--kunde-grau-hell);
	--bg-color-03: var(--kunde-grau-dunkel);
	--bg-color-04: var(--kunde-anthrazit);
	--bg-color-05: var(--darkmode);
	--bg-color-06: linear-gradient(45deg, var(--kunde-grau-dunkel) 30%, var(--kunde-turkis) 100%);

	/* Trenner / hr */
	--hr-style-filter: brightness(0.8);

	/* Tabellen */
	--table-border-color: var(--color-akzent);
	--bg-table-success: var(--bg-akzent);
	--color-table-success: var(--color-auf-akzent);

	/* Buttons */
	--btn-focus-shadow: 0 0 0 .25rem rgb(var(--kunde-turkis-hell-rgb) / .5);

	/* Call to action Box */
	--call2action-background: rgb(85 85 85);
	--call2action-color-link-main: var(--color-akzent);
	--call2action-color-link-hover: var(--weiss);

	/* Scroll Top */
	--bg-scroll-top: rgb(0 0 0 / .6);
	--color-scroll-top: var(--darkmode-text);
	--color-scroll-top-hover: var(--color-akzent);
	--scroll-top-shadow: 1px 0px 2px rgb(0 0 0);

	/* Float Kontakt */
	--bg-float-button: var(--bg-akzent);
	--color-float-contact-icon: var(--weiss);
	--color-float-contact-hover: var(--kunde-grau-hell);
	--bg-float-element: var(--darkmode-flaeche);
	--color-float-element: var(--color-akzent);
	--border-float-element: 3px solid var(--kunde-grau-aufgehellt);
	--bg-float-contact: rgb(var(--darkmode-rgb) / .5);

	/* Review-Slider */
	--title-review: var(--weiss);
	--background-review-slider: linear-gradient(90deg, rgb(86 86 86) 0%, rgb(53 53 53) 42%, rgb(53 53 53) 58%, rgb(86 86 86) 100%);

	/* Footer */
	--color-footer-text: var(--darkmode-text);
	--color-footer-title: var(--darkmode-text);
	--color-footer-links-main: var(--darkmode-text);
	--color-footer-links-hover: var(--color-akzent);
	--footer-icon-color: rgb(196 197 197);
	--background-footer: var(--darkmode);
	--color-footer-end-links: var(--darkmode-text);
	--color-footer-end-links-hover: var(--color-akzent);

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

	/* Glas Effekt */
	--glas-background: rgb(var(--darkmode-rgb) / .4);
	--glas-border: rgb(var(--darkmode-rgb) / .3);
}

/* -------------------- 3. Dark Mode ENDE -------------------- */