/* =========================================================================
   Hello Chic Dark - dunkle Design-Variante
   Oberrauter - IT e.U. | https://www.oberrauter-it.at

   Alle Regeln sind an  html[data-nati-mode="dark"]  gebunden.
   Im hellen Modus greift nichts davon - das Originaldesign bleibt unveraendert.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. Farbwerte (werden von den Customizer-Einstellungen ueberschrieben)
   ------------------------------------------------------------------------- */
html[data-nati-mode="dark"] {
	--hcd-bg: #000000;
	--hcd-surface: #0e0e0e;
	--hcd-surface-2: #191919;
	--hcd-heading: #f6f3ee;
	--hcd-text: #e3ded4;
	--hcd-muted: #a9a294;
	--hcd-accent: #c9a86a;
	--hcd-accent-2: #e2c68d;
}

html[data-nati-mode="dark"] {
	--hcd-border: rgba(255, 255, 255, 0.14);
	--hcd-border-soft: rgba(255, 255, 255, 0.08);
	--hcd-on-accent: #0b0b0b;

	color-scheme: dark;
}

/* -------------------------------------------------------------------------
   2. Kadence-Palette invertieren
   ------------------------------------------------------------------------- */
html[data-nati-mode="dark"] {
	/* Akzentfarben */
	--global-palette1: var(--hcd-accent);
	--global-palette2: var(--hcd-accent-2);

	/* Textfarben (im Original dunkel -> jetzt hell) */
	--global-palette3: var(--hcd-heading);
	--global-palette4: var(--hcd-text);
	--global-palette5: var(--hcd-muted);
	--global-palette6: #b9b1a1;

	/* Flaechen (im Original hell -> jetzt dunkel) */
	--global-palette7: var(--hcd-surface);
	--global-palette8: var(--hcd-surface);
	--global-palette9: var(--hcd-bg);
	--global-palette9rgb: 0, 0, 0;
	--global-palette10: var(--hcd-accent);

	/* Statusfarben etwas aufhellen */
	--global-palette11: #4ec27a;
	--global-palette12: #6ba8f5;
	--global-palette13: #ef6a52;
	--global-palette14: #ff9147;
	--global-palette15: #f5c451;

	/* Abgeleitete Werte */
	--global-palette-highlight: var(--hcd-accent);
	--global-palette-highlight-alt: var(--hcd-accent-2);
	--global-palette-highlight-alt2: var(--hcd-surface-2);

	/* Buttons */
	--global-palette-btn-bg: var(--hcd-accent);
	--global-palette-btn-bg-hover: var(--hcd-accent-2);
	--global-palette-btn: var(--hcd-on-accent);
	--global-palette-btn-hover: var(--hcd-on-accent);
	--global-palette-btn-sec-bg: transparent;
	--global-palette-btn-sec-bg-hover: var(--hcd-accent);
	--global-palette-btn-sec: var(--hcd-heading);
	--global-palette-btn-sec-hover: var(--hcd-on-accent);

	/* WordPress-Standardfarben */
	--wp--preset--color--black: var(--hcd-heading);
	--wp--preset--color--white: var(--hcd-bg);
	--wp--preset--color--cyan-bluish-gray: var(--hcd-surface-2);
	--wp--preset--color--very-light-gray: var(--hcd-surface-2);
	--wp--preset--color--very-dark-gray: var(--hcd-text);
}

/* -------------------------------------------------------------------------
   3. Basis
   ------------------------------------------------------------------------- */
html[data-nati-mode="dark"],
html[data-nati-mode="dark"] body {
	background-color: var(--hcd-bg);
	color: var(--hcd-text);
}

html[data-nati-mode="dark"] .site,
html[data-nati-mode="dark"] .content-bg,
html[data-nati-mode="dark"] .content-container,
html[data-nati-mode="dark"] .entry-content-wrap,
html[data-nati-mode="dark"] .site-content,
html[data-nati-mode="dark"] .wp-site-blocks {
	background-color: var(--hcd-bg);
}

html[data-nati-mode="dark"] h1,
html[data-nati-mode="dark"] h2,
html[data-nati-mode="dark"] h3,
html[data-nati-mode="dark"] h4,
html[data-nati-mode="dark"] h5,
html[data-nati-mode="dark"] h6,
html[data-nati-mode="dark"] .entry-title,
html[data-nati-mode="dark"] .entry-title a {
	color: var(--hcd-heading);
}

html[data-nati-mode="dark"] p,
html[data-nati-mode="dark"] li,
html[data-nati-mode="dark"] dd,
html[data-nati-mode="dark"] figcaption,
html[data-nati-mode="dark"] .entry-content,
html[data-nati-mode="dark"] .entry-summary {
	color: var(--hcd-text);
}

html[data-nati-mode="dark"] a:not(.button):not(.wp-block-button__link):not(.wp-element-button):not(.social-button) {
	color: var(--hcd-heading);
}

html[data-nati-mode="dark"] a:not(.button):not(.wp-block-button__link):not(.wp-element-button):not(.social-button):hover,
html[data-nati-mode="dark"] a:not(.button):not(.wp-block-button__link):not(.wp-element-button):not(.social-button):focus {
	color: var(--hcd-accent);
}

html[data-nati-mode="dark"] hr,
html[data-nati-mode="dark"] .wp-block-separator {
	border-color: var(--hcd-border);
	color: var(--hcd-border);
	background-color: transparent;
}

html[data-nati-mode="dark"] blockquote {
	border-color: var(--hcd-accent);
	color: var(--hcd-text);
}

html[data-nati-mode="dark"] mark,
html[data-nati-mode="dark"] .wp-block-kadence-advancedheading mark.kt-highlight {
	color: var(--hcd-accent) !important;
	background-color: transparent;
}

html[data-nati-mode="dark"] code,
html[data-nati-mode="dark"] pre,
html[data-nati-mode="dark"] kbd {
	background-color: var(--hcd-surface-2);
	color: var(--hcd-text);
	border-color: var(--hcd-border);
}

html[data-nati-mode="dark"] ::selection {
	background-color: var(--hcd-accent);
	color: var(--hcd-on-accent);
}

html[data-nati-mode="dark"] ::-webkit-scrollbar {
	width: 12px;
	height: 12px;
}

html[data-nati-mode="dark"] ::-webkit-scrollbar-track {
	background: var(--hcd-bg);
}

html[data-nati-mode="dark"] ::-webkit-scrollbar-thumb {
	background: #2c2c2c;
	border-radius: 8px;
}

html[data-nati-mode="dark"] ::-webkit-scrollbar-thumb:hover {
	background: var(--hcd-accent);
}

/* Weicher Uebergang beim Umschalten */
html.hcd-ready body,
html.hcd-ready #masthead,
html.hcd-ready #colophon,
html.hcd-ready .site,
html.hcd-ready .content-bg {
	transition: background-color 0.25s ease, color 0.25s ease;
}

/* -------------------------------------------------------------------------
   4. Header
   ------------------------------------------------------------------------- */
html[data-nati-mode="dark"] #masthead,
html[data-nati-mode="dark"] #masthead .site-header-row-container-inner,
html[data-nati-mode="dark"] #masthead .kadence-sticky-header.item-is-fixed:not(.item-at-start):not(.site-header-row-container):not(.site-main-header-wrap),
html[data-nati-mode="dark"] #masthead .kadence-sticky-header.item-is-fixed:not(.item-at-start):not(.site-main-header-wrap),
html[data-nati-mode="dark"] .kadence-sticky-header.item-is-fixed:not(.item-at-start):not(.site-header-row-container):not(.site-main-header-wrap),
html[data-nati-mode="dark"] #mobile-header,
html[data-nati-mode="dark"] #mobile-header .site-header-row-container-inner {
	background: var(--hcd-surface) !important;
}

/* Transparenter Header (Startseite) bleibt transparent */
html[data-nati-mode="dark"] .transparent-header #masthead,
html[data-nati-mode="dark"] .transparent-header .site-top-header-wrap .site-header-row-container-inner,
html[data-nati-mode="dark"] .transparent-header .site-main-header-wrap .site-header-row-container-inner,
html[data-nati-mode="dark"] .transparent-header .site-bottom-header-wrap .site-header-row-container-inner,
html[data-nati-mode="dark"] .mobile-transparent-header #masthead,
html[data-nati-mode="dark"] .mobile-transparent-header .site-top-header-wrap .site-header-row-container-inner,
html[data-nati-mode="dark"] .mobile-transparent-header .site-main-header-wrap .site-header-row-container-inner,
html[data-nati-mode="dark"] .mobile-transparent-header .site-bottom-header-wrap .site-header-row-container-inner,
html[data-nati-mode="dark"] .mobile-transparent-header #mobile-header,
html[data-nati-mode="dark"] .mobile-transparent-header #mobile-header .site-header-row-container-inner {
	background: transparent !important;
}

/* ... auch beim Scrollen (sticky) wieder deckend */
html[data-nati-mode="dark"] .transparent-header .kadence-sticky-header.item-is-fixed:not(.item-at-start) .site-header-row-container-inner,
html[data-nati-mode="dark"] .mobile-transparent-header .kadence-sticky-header.item-is-fixed:not(.item-at-start) .site-header-row-container-inner {
	background: var(--hcd-surface) !important;
}

html[data-nati-mode="dark"] #masthead .kadence-sticky-header.item-is-fixed:not(.item-at-start):not(.item-hidden-above) {
	border-bottom-color: var(--hcd-border-soft) !important;
}

html[data-nati-mode="dark"] .site-branding .site-title,
html[data-nati-mode="dark"] .site-branding .site-description {
	color: var(--hcd-heading);
}

/* -------------------------------------------------------------------------
   5. Navigation, Dropdowns, Drawer
   ------------------------------------------------------------------------- */
html[data-nati-mode="dark"] .header-navigation .header-menu-container > ul > li > a,
html[data-nati-mode="dark"] .main-navigation .primary-menu-container > ul > li > a,
html[data-nati-mode="dark"] .secondary-navigation .secondary-menu-container > ul > li > a {
	color: var(--hcd-heading);
}

html[data-nati-mode="dark"] .header-navigation .header-menu-container > ul > li > a:hover,
html[data-nati-mode="dark"] .header-navigation .header-menu-container > ul > li.current-menu-item > a {
	color: var(--hcd-accent);
}

html[data-nati-mode="dark"] .header-navigation .header-menu-container ul ul.sub-menu,
html[data-nati-mode="dark"] .header-navigation .header-menu-container ul ul.submenu {
	background: var(--hcd-surface) !important;
	border: 1px solid var(--hcd-border-soft);
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.6) !important;
}

html[data-nati-mode="dark"] .header-navigation .header-menu-container ul ul li.menu-item > a {
	color: var(--hcd-text) !important;
}

html[data-nati-mode="dark"] .header-navigation .header-menu-container ul ul li.menu-item > a:hover,
html[data-nati-mode="dark"] .header-navigation .header-menu-container ul ul li.menu-item.current-menu-item > a {
	color: var(--hcd-accent) !important;
	background: var(--hcd-surface-2) !important;
}

html[data-nati-mode="dark"] .mobile-toggle-open-container .menu-toggle-open,
html[data-nati-mode="dark"] .mobile-toggle-open-container .menu-toggle-open:focus,
html[data-nati-mode="dark"] .search-toggle-open,
html[data-nati-mode="dark"] .header-account-button,
html[data-nati-mode="dark"] .header-cart-wrap .header-cart-button {
	color: var(--hcd-heading) !important;
}

html[data-nati-mode="dark"] #mobile-drawer .drawer-inner,
html[data-nati-mode="dark"] #mobile-drawer.popup-drawer-layout-fullwidth .pop-portion-bg,
html[data-nati-mode="dark"] #search-drawer .drawer-inner,
html[data-nati-mode="dark"] .popup-drawer .drawer-inner {
	background: var(--hcd-surface) !important;
	color: var(--hcd-text);
}

html[data-nati-mode="dark"] .mobile-navigation ul li > a,
html[data-nati-mode="dark"] .mobile-navigation ul li.menu-item-has-children > .drawer-nav-drop-wrap,
html[data-nati-mode="dark"] #mobile-drawer .drawer-header .drawer-toggle,
html[data-nati-mode="dark"] #mobile-drawer .drawer-header .drawer-toggle:focus,
html[data-nati-mode="dark"] .drawer-toggle {
	color: var(--hcd-heading) !important;
}

html[data-nati-mode="dark"] .mobile-navigation ul li > a:hover,
html[data-nati-mode="dark"] .mobile-navigation ul li.current-menu-item > a {
	color: var(--hcd-accent) !important;
}

html[data-nati-mode="dark"] .mobile-navigation ul li.menu-item-has-children .drawer-nav-drop-wrap,
html[data-nati-mode="dark"] .mobile-navigation ul li:not(.menu-item-has-children) a {
	border-bottom: 1px solid var(--hcd-border-soft) !important;
}

html[data-nati-mode="dark"] #search-drawer .drawer-inner .drawer-content form input.search-field,
html[data-nati-mode="dark"] #search-drawer .drawer-inner .drawer-content form .kadence-search-icon-wrap {
	color: var(--hcd-heading) !important;
	border-color: var(--hcd-border) !important;
}

html[data-nati-mode="dark"] .header-social-wrap .social-button {
	color: var(--hcd-heading);
	border-color: var(--hcd-border);
}

html[data-nati-mode="dark"] .header-social-wrap .social-button:hover {
	color: var(--hcd-accent);
	border-color: var(--hcd-accent);
}

/* -------------------------------------------------------------------------
   6. Footer
   ------------------------------------------------------------------------- */
html[data-nati-mode="dark"] #colophon,
html[data-nati-mode="dark"] .site-footer,
html[data-nati-mode="dark"] .site-top-footer-wrap .site-footer-row-container-inner,
html[data-nati-mode="dark"] .site-middle-footer-wrap .site-footer-row-container-inner {
	background: var(--hcd-bg) !important;
	color: var(--hcd-text);
}

html[data-nati-mode="dark"] .site-bottom-footer-wrap .site-footer-row-container-inner {
	background: var(--hcd-surface) !important;
	color: var(--hcd-muted) !important;
	border-top: 1px solid var(--hcd-border-soft);
}

html[data-nati-mode="dark"] .site-footer .site-top-footer-wrap a:not(.button):not(.wp-block-button__link):not(.wp-element-button),
html[data-nati-mode="dark"] .site-footer .site-bottom-footer-wrap a:where(:not(.button):not(.wp-block-button__link):not(.wp-element-button)) {
	color: var(--hcd-text) !important;
}

html[data-nati-mode="dark"] .site-footer .site-top-footer-wrap a:not(.button):not(.wp-block-button__link):not(.wp-element-button):hover,
html[data-nati-mode="dark"] .site-footer .site-bottom-footer-wrap a:where(:not(.button):not(.wp-block-button__link):not(.wp-element-button)):hover {
	color: var(--hcd-accent) !important;
}

html[data-nati-mode="dark"] .site-footer-section:not(:last-child):after {
	background: var(--hcd-border-soft) !important;
}

/* -------------------------------------------------------------------------
   7. Inhalte, Gutenberg- und Kadence-Bloecke
   ------------------------------------------------------------------------- */
html[data-nati-mode="dark"] .kt-inside-inner-col,
html[data-nati-mode="dark"] .kb-row-layout-wrap,
html[data-nati-mode="dark"] .wp-block-kadence-column {
	border-color: var(--hcd-border-soft) !important;
}

html[data-nati-mode="dark"] .kt-testimonial-content,
html[data-nati-mode="dark"] .kt-testimonial-title,
html[data-nati-mode="dark"] .kt-blocks-testimonials-wrap .kt-testimonial-content {
	color: var(--hcd-text) !important;
}

html[data-nati-mode="dark"] .kt-testimonial-occupation,
html[data-nati-mode="dark"] .kt-testimonial-name {
	color: var(--hcd-muted) !important;
}

html[data-nati-mode="dark"] .kt-blocks-accordion-header,
html[data-nati-mode="dark"] .kt-accordion-panel-inner,
html[data-nati-mode="dark"] .kt-tabs-content-wrap,
html[data-nati-mode="dark"] .kt-tabs-title-list li .kt-tab-title {
	background-color: var(--hcd-surface) !important;
	color: var(--hcd-text) !important;
	border-color: var(--hcd-border-soft) !important;
}

html[data-nati-mode="dark"] .kt-blocks-info-box-link-wrap,
html[data-nati-mode="dark"] .kadence-info-box-wrap {
	background-color: var(--hcd-surface) !important;
}

html[data-nati-mode="dark"] .wp-block-table table,
html[data-nati-mode="dark"] table {
	color: var(--hcd-text);
	border-color: var(--hcd-border);
}

html[data-nati-mode="dark"] table th,
html[data-nati-mode="dark"] table td {
	border-color: var(--hcd-border-soft);
}

html[data-nati-mode="dark"] table thead th {
	background-color: var(--hcd-surface);
	color: var(--hcd-heading);
}

/* Fest eingetragene helle Inline-Farben abfangen */
html[data-nati-mode="dark"] [style*="background-color:#fff"],
html[data-nati-mode="dark"] [style*="background-color: #fff"],
html[data-nati-mode="dark"] [style*="background-color:#FFF"],
html[data-nati-mode="dark"] [style*="background-color: #FFF"],
html[data-nati-mode="dark"] [style*="background:#fff"],
html[data-nati-mode="dark"] [style*="background: #fff"],
html[data-nati-mode="dark"] [style*="background-color:rgb(255, 255, 255)"],
html[data-nati-mode="dark"] [style*="background-color:rgb(255,255,255)"] {
	background-color: var(--hcd-surface) !important;
}

html[data-nati-mode="dark"] .has-white-background-color {
	background-color: var(--hcd-surface) !important;
}

html[data-nati-mode="dark"] .has-black-background-color {
	background-color: var(--hcd-surface-2) !important;
}

html[data-nati-mode="dark"] .has-white-color {
	color: var(--hcd-heading) !important;
}

html[data-nati-mode="dark"] .has-black-color,
html[data-nati-mode="dark"] .has-very-dark-gray-color {
	color: var(--hcd-text) !important;
}

/* Farbueberlagerungen von Kadence-Reihen auf Schwarz umstellen
   (die im Block eingestellte Deckkraft bleibt erhalten) */
html[data-nati-mode="dark"] .kt-row-layout-overlay {
	background-color: var(--hcd-bg) !important;
}

/* Form-Trenner (Wellen, Schraegen) zwischen den Reihen */
html[data-nati-mode="dark"] .kt-row-layout-top-sep svg,
html[data-nati-mode="dark"] .kt-row-layout-bottom-sep svg {
	fill: var(--hcd-bg) !important;
}

/* Testimonial-Karten */
html[data-nati-mode="dark"] .kt-blocks-testimonial-carousel-item,
html[data-nati-mode="dark"] .kt-testimonial-item-wrap {
	background-color: rgba(255, 255, 255, 0.05) !important;
}

/* Helle Boxen, die direkt im Block hinterlegt sind, werden per JS erkannt
   und hier abgedunkelt (z. B. der Textkasten ueber dem Startbild). */
html[data-nati-mode="dark"] .hcd-lightbox {
	background-color: rgba(14, 14, 14, 0.86) !important;
	color: var(--hcd-text) !important;
	border-color: var(--hcd-border-soft) !important;
}

html[data-nati-mode="dark"] .hcd-lightbox h1,
html[data-nati-mode="dark"] .hcd-lightbox h2,
html[data-nati-mode="dark"] .hcd-lightbox h3,
html[data-nati-mode="dark"] .hcd-lightbox h4,
html[data-nati-mode="dark"] .hcd-lightbox h5,
html[data-nati-mode="dark"] .hcd-lightbox h6 {
	color: var(--hcd-heading) !important;
}

html[data-nati-mode="dark"] .hcd-lightbox p,
html[data-nati-mode="dark"] .hcd-lightbox li,
html[data-nati-mode="dark"] .hcd-lightbox span:not(.kt-blocks-carousel-arrow) {
	color: var(--hcd-text) !important;
}

/* -------------------------------------------------------------------------
   8. Formulare und Buttons
   ------------------------------------------------------------------------- */
html[data-nati-mode="dark"] input[type="text"],
html[data-nati-mode="dark"] input[type="email"],
html[data-nati-mode="dark"] input[type="url"],
html[data-nati-mode="dark"] input[type="password"],
html[data-nati-mode="dark"] input[type="search"],
html[data-nati-mode="dark"] input[type="number"],
html[data-nati-mode="dark"] input[type="tel"],
html[data-nati-mode="dark"] input[type="date"],
html[data-nati-mode="dark"] textarea,
html[data-nati-mode="dark"] select,
html[data-nati-mode="dark"] .select2-container .select2-selection--single,
html[data-nati-mode="dark"] .select2-dropdown,
html[data-nati-mode="dark"] .select2-search__field {
	background-color: var(--hcd-surface-2) !important;
	color: var(--hcd-text) !important;
	border-color: var(--hcd-border) !important;
}

html[data-nati-mode="dark"] input::placeholder,
html[data-nati-mode="dark"] textarea::placeholder {
	color: var(--hcd-muted);
	opacity: 1;
}

html[data-nati-mode="dark"] input:focus,
html[data-nati-mode="dark"] textarea:focus,
html[data-nati-mode="dark"] select:focus {
	border-color: var(--hcd-accent) !important;
	outline-color: var(--hcd-accent);
}

html[data-nati-mode="dark"] .select2-container--default .select2-results__option--highlighted[aria-selected],
html[data-nati-mode="dark"] .select2-container--default .select2-results__option[data-selected="true"] {
	background-color: var(--hcd-accent) !important;
	color: var(--hcd-on-accent) !important;
}

html[data-nati-mode="dark"] .select2-container--default .select2-selection--single .select2-selection__rendered {
	color: var(--hcd-text) !important;
}

html[data-nati-mode="dark"] .button.button-secondary,
html[data-nati-mode="dark"] .wp-block-button.is-style-outline .wp-block-button__link {
	border-color: var(--hcd-border) !important;
	color: var(--hcd-heading) !important;
}

html[data-nati-mode="dark"] .button.button-secondary:hover,
html[data-nati-mode="dark"] .wp-block-button.is-style-outline .wp-block-button__link:hover {
	border-color: var(--hcd-accent) !important;
	background-color: var(--hcd-accent) !important;
	color: var(--hcd-on-accent) !important;
}

/* -------------------------------------------------------------------------
   9. WooCommerce
   ------------------------------------------------------------------------- */
html[data-nati-mode="dark"] .woocommerce,
html[data-nati-mode="dark"] .woocommerce-page,
html[data-nati-mode="dark"] .woocommerce div.product,
html[data-nati-mode="dark"] .woocommerce .product_meta {
	color: var(--hcd-text);
}

html[data-nati-mode="dark"] .woocommerce ul.products li.product .woocommerce-loop-product__title,
html[data-nati-mode="dark"] .woocommerce div.product .product_title {
	color: var(--hcd-heading);
}

html[data-nati-mode="dark"] .woocommerce ul.products li.product .price,
html[data-nati-mode="dark"] .woocommerce div.product p.price,
html[data-nati-mode="dark"] .woocommerce div.product span.price,
html[data-nati-mode="dark"] .woocommerce-Price-amount {
	color: var(--hcd-accent) !important;
}

html[data-nati-mode="dark"] .woocommerce del,
html[data-nati-mode="dark"] .woocommerce del .woocommerce-Price-amount {
	color: var(--hcd-muted) !important;
	opacity: 0.75;
}

html[data-nati-mode="dark"] .woocommerce span.onsale,
html[data-nati-mode="dark"] .woocommerce ul.products li.product .onsale {
	background-color: var(--hcd-accent) !important;
	color: var(--hcd-on-accent) !important;
}

html[data-nati-mode="dark"] .woocommerce .product-details,
html[data-nati-mode="dark"] .woocommerce ul.products li.product,
html[data-nati-mode="dark"] .woocommerce .entry-content-wrap {
	background-color: transparent;
}

html[data-nati-mode="dark"] .woocommerce table.shop_table,
html[data-nati-mode="dark"] .woocommerce table.shop_table td,
html[data-nati-mode="dark"] .woocommerce table.shop_table th,
html[data-nati-mode="dark"] .woocommerce table.shop_attributes td,
html[data-nati-mode="dark"] .woocommerce table.shop_attributes th {
	background-color: transparent !important;
	color: var(--hcd-text) !important;
	border-color: var(--hcd-border-soft) !important;
}

html[data-nati-mode="dark"] .woocommerce table.shop_table thead th {
	background-color: var(--hcd-surface) !important;
	color: var(--hcd-heading) !important;
}

html[data-nati-mode="dark"] .woocommerce .cart-collaterals .cart_totals,
html[data-nati-mode="dark"] .woocommerce-checkout #order_review,
html[data-nati-mode="dark"] .woocommerce-checkout .woocommerce-checkout-review-order,
html[data-nati-mode="dark"] .woocommerce .woocommerce-order-details,
html[data-nati-mode="dark"] .woocommerce .woocommerce-customer-details {
	background-color: var(--hcd-surface) !important;
	border-color: var(--hcd-border-soft) !important;
}

html[data-nati-mode="dark"] .woocommerce-checkout #payment,
html[data-nati-mode="dark"] .woocommerce #payment,
html[data-nati-mode="dark"] .woocommerce-checkout #payment ul.payment_methods,
html[data-nati-mode="dark"] .woocommerce-checkout #payment div.form-row {
	background-color: var(--hcd-surface) !important;
	color: var(--hcd-text) !important;
	border-color: var(--hcd-border-soft) !important;
}

html[data-nati-mode="dark"] .woocommerce-checkout #payment div.payment_box,
html[data-nati-mode="dark"] .woocommerce #payment div.payment_box {
	background-color: var(--hcd-surface-2) !important;
	color: var(--hcd-text) !important;
}

html[data-nati-mode="dark"] .woocommerce-checkout #payment div.payment_box::before,
html[data-nati-mode="dark"] .woocommerce #payment div.payment_box::before {
	border-bottom-color: var(--hcd-surface-2) !important;
}

html[data-nati-mode="dark"] .woocommerce-info,
html[data-nati-mode="dark"] .woocommerce-message,
html[data-nati-mode="dark"] .woocommerce-error,
html[data-nati-mode="dark"] .woocommerce-noreviews,
html[data-nati-mode="dark"] .wc-block-components-notice-banner {
	background-color: var(--hcd-surface) !important;
	color: var(--hcd-text) !important;
	border-color: var(--hcd-border) !important;
}

html[data-nati-mode="dark"] .woocommerce-info a,
html[data-nati-mode="dark"] .woocommerce-message a,
html[data-nati-mode="dark"] .woocommerce-error a {
	color: var(--hcd-accent) !important;
}

html[data-nati-mode="dark"] .woocommerce div.product .woocommerce-tabs ul.tabs::before,
html[data-nati-mode="dark"] .woocommerce div.product .woocommerce-tabs ul.tabs li {
	background-color: transparent !important;
	border-color: var(--hcd-border-soft) !important;
	color: var(--hcd-text) !important;
}

html[data-nati-mode="dark"] .woocommerce div.product .woocommerce-tabs ul.tabs li.active {
	background-color: var(--hcd-surface) !important;
	color: var(--hcd-heading) !important;
}

html[data-nati-mode="dark"] .woocommerce div.product .woocommerce-tabs ul.tabs li a {
	color: inherit !important;
}

html[data-nati-mode="dark"] .woocommerce .star-rating,
html[data-nati-mode="dark"] .woocommerce p.stars a {
	color: var(--hcd-accent) !important;
}

html[data-nati-mode="dark"] .woocommerce .quantity .qty,
html[data-nati-mode="dark"] .woocommerce div.product form.cart .variations select {
	background-color: var(--hcd-surface-2) !important;
	color: var(--hcd-text) !important;
	border-color: var(--hcd-border) !important;
}

html[data-nati-mode="dark"] .woocommerce-MyAccount-navigation ul li,
html[data-nati-mode="dark"] .woocommerce-MyAccount-navigation ul li a {
	border-color: var(--hcd-border-soft) !important;
	color: var(--hcd-text) !important;
}

html[data-nati-mode="dark"] .woocommerce-MyAccount-navigation ul li.is-active a {
	color: var(--hcd-accent) !important;
}

html[data-nati-mode="dark"] .header-cart-wrap .header-cart-total,
html[data-nati-mode="dark"] .header-cart-label {
	color: var(--hcd-heading) !important;
}

html[data-nati-mode="dark"] .kadence-shop-sidebar,
html[data-nati-mode="dark"] .widget-area .widget {
	background-color: transparent;
	color: var(--hcd-text);
}

html[data-nati-mode="dark"] .woocommerce .widget_price_filter .ui-slider .ui-slider-range,
html[data-nati-mode="dark"] .woocommerce .widget_price_filter .ui-slider .ui-slider-handle {
	background-color: var(--hcd-accent) !important;
}

html[data-nati-mode="dark"] .woocommerce .widget_price_filter .price_slider_wrapper .ui-widget-content {
	background-color: var(--hcd-surface-2) !important;
}

/* WooCommerce-Bloecke (Checkout/Cart-Blocks) */
html[data-nati-mode="dark"] .wc-block-components-form .wc-block-components-text-input input,
html[data-nati-mode="dark"] .wc-block-components-text-input input.input-text,
html[data-nati-mode="dark"] .wc-block-components-combobox input {
	background-color: var(--hcd-surface-2) !important;
	color: var(--hcd-text) !important;
	border-color: var(--hcd-border) !important;
}

html[data-nati-mode="dark"] .wc-block-components-sidebar-layout .wc-block-components-sidebar,
html[data-nati-mode="dark"] .wc-block-components-totals-wrapper,
html[data-nati-mode="dark"] .wp-block-woocommerce-checkout-order-summary-block {
	background-color: var(--hcd-surface) !important;
	color: var(--hcd-text) !important;
	border-color: var(--hcd-border-soft) !important;
}

/* Produktbilder auf weissem Grund harmonischer einbetten */
html[data-nati-mode="dark"] .woocommerce-product-gallery__image img,
html[data-nati-mode="dark"] .woocommerce ul.products li.product img {
	border-radius: 2px;
}

/* -------------------------------------------------------------------------
   10. Plugins
   ------------------------------------------------------------------------- */
/* Complianz Cookie-Banner */
html[data-nati-mode="dark"] .cmplz-cookiebanner,
html[data-nati-mode="dark"] .cmplz-manage-consent,
html[data-nati-mode="dark"] .cmplz-document {
	background-color: var(--hcd-surface) !important;
	color: var(--hcd-text) !important;
	border-color: var(--hcd-border-soft) !important;
}

html[data-nati-mode="dark"] .cmplz-cookiebanner .cmplz-title,
html[data-nati-mode="dark"] .cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-category-header .cmplz-category-title {
	color: var(--hcd-heading) !important;
}

html[data-nati-mode="dark"] .cmplz-cookiebanner .cmplz-categories .cmplz-category {
	background-color: var(--hcd-surface-2) !important;
}

/* Instagram Feed */
html[data-nati-mode="dark"] #sb_instagram .sbi_header_text,
html[data-nati-mode="dark"] #sb_instagram .sbi_header_text h3,
html[data-nati-mode="dark"] #sb_instagram .sbi_bio {
	color: var(--hcd-text) !important;
}

html[data-nati-mode="dark"] #sb_instagram .sbi_follow_btn a {
	background-color: var(--hcd-accent) !important;
	color: var(--hcd-on-accent) !important;
}

/* Lightbox */
html[data-nati-mode="dark"] .wp-lightbox-overlay .scrim {
	background-color: var(--hcd-bg) !important;
}

/* -------------------------------------------------------------------------
   11. Logo-Wechsel
   ------------------------------------------------------------------------- */
.hcd-logo--dark {
	display: none;
}

html[data-nati-mode="dark"] .hcd-logo--light {
	display: none !important;
}

html[data-nati-mode="dark"] .hcd-logo--dark {
	display: inline-block !important;
}

/* -------------------------------------------------------------------------
   12. Umschalter Hell / Dunkel
   ------------------------------------------------------------------------- */
.hcd-toggle-item {
	display: flex;
	align-items: center;
}

.hcd-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	margin: 0 0 0 0.6em;
	border: 1px solid currentColor;
	border-radius: 50%;
	background: transparent;
	color: var(--global-palette3, #212121);
	cursor: pointer;
	line-height: 0;
	transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}

.hcd-toggle:hover,
.hcd-toggle:focus-visible {
	color: var(--global-palette2, #806430);
	background: rgba(127, 127, 127, 0.12);
}

.hcd-toggle__icon {
	display: none;
	line-height: 0;
}

/* Hell aktiv -> Mond anbieten */
html[data-nati-mode="light"] .hcd-toggle__icon--moon {
	display: inline-flex;
}

/* Dunkel aktiv -> Sonne anbieten */
html[data-nati-mode="dark"] .hcd-toggle__icon--sun {
	display: inline-flex;
}

html[data-nati-mode="dark"] .hcd-toggle {
	color: var(--hcd-heading);
	border-color: var(--hcd-border);
}

html[data-nati-mode="dark"] .hcd-toggle:hover,
html[data-nati-mode="dark"] .hcd-toggle:focus-visible {
	color: var(--hcd-accent);
	border-color: var(--hcd-accent);
	background: rgba(255, 255, 255, 0.06);
}

/* Schwebende Variante */
.hcd-toggle--float {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 9999;
	width: 46px;
	height: 46px;
	background: var(--global-palette9, #edece6);
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}

html[data-nati-mode="dark"] .hcd-toggle--float {
	background: var(--hcd-surface);
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.7);
}

/* Solange JS nicht geladen ist, den Button nicht im Footer aufblitzen lassen */
.hcd-toggle {
	visibility: hidden;
}

html.hcd-ready .hcd-toggle {
	visibility: visible;
}

/* -------------------------------------------------------------------------
   13. Druck: immer hell
   ------------------------------------------------------------------------- */
@media print {
	html[data-nati-mode="dark"],
	html[data-nati-mode="dark"] body,
	html[data-nati-mode="dark"] .site,
	html[data-nati-mode="dark"] #masthead,
	html[data-nati-mode="dark"] #colophon {
		background: #ffffff !important;
		color: #212121 !important;
	}

	html[data-nati-mode="dark"] h1,
	html[data-nati-mode="dark"] h2,
	html[data-nati-mode="dark"] h3,
	html[data-nati-mode="dark"] h4,
	html[data-nati-mode="dark"] p,
	html[data-nati-mode="dark"] li {
		color: #212121 !important;
	}

	.hcd-toggle {
		display: none !important;
	}
}