/**
 * Weingut Heidegg – global.css
 *
 * Basis, Tokens, Layout, Header, Mobile-Navigation, Footer, Core-Block-Ergänzungen,
 * Block-Style-Varianten, Utilities, Icons und Scroll-Reveal.
 * Reines CSS, kein Build-Schritt, kein CSS-Nesting.
 *
 * Die Design-Tokens selbst stehen in theme.json (--wp--preset--*, --wp--custom--*).
 * Die Variablen unten sind Kurznamen für diese Tokens; sie werden in den übrigen
 * CSS-Dateien (WooCommerce, Content, Forminator) und in Seiteninhalten verwendet.
 *
 * Breakpoints: 768 / 1024 / 1280 / 1440 px (max-width jeweils -0.02px).
 */

/* =========================================================
   1. TOKENS (Aliase)
   ========================================================= */
:root {
	/* Farben */
	--color-black: var(--wp--preset--color--black);
	--color-white: var(--wp--preset--color--white);
	--color-grey: var(--wp--preset--color--grey);
	--color-grey-light: var(--wp--preset--color--grey-light);
	--color-grey-extra-light: var(--wp--preset--color--grey-extra-light);
	--color-grey-dark: #333;
	--color-red: var(--wp--preset--color--red);
	--color-green: var(--wp--preset--color--green);
	--color-brown: var(--wp--preset--color--brown);
	--color-pink: var(--wp--preset--color--pink);
	--color-yellow: var(--wp--preset--color--yellow);
	--color-blue: var(--wp--preset--color--blue);
	--color-primary: var(--wp--preset--color--primary);
	--color-primary-light: var(--wp--preset--color--primary-light);
	--color-transparent: transparent;
	--color-grey-50: #f9fafb;
	--color-grey-100: #f3f4f6;
	--color-grey-200: #e5e7eb;
	--color-grey-300: #d1d5db;
	--color-grey-400: #9ca3af;
	--color-grey-500: #6b7280;
	--color-grey-600: #4b5563;
	--color-grey-700: #374151;
	--color-grey-900: #111827;
	--color-linkedin: #0077b5;
	--color-twitter: #1da1f2;
	--color-facebook: #1877f2;
	--color-whatsapp: #25d366;
	--color-font: var(--color-black);
	--color-link: var(--color-font);
	--color-link-hover: var(--color-primary);

	/* Typografie */
	--font-heading: var(--wp--preset--font-family--heading);
	--font-heading-weight: 700;
	--font-subline: var(--wp--preset--font-family--body);
	--font-subline-weight: 400;
	--font-body: var(--wp--preset--font-family--body);
	--font-body-weight: 400;
	--font-info: var(--wp--preset--font-family--interstate);
	--font-info-weight: 400;
	--font-weight-light: 300;
	--font-weight-regular: 400;
	--font-weight-medium: 500;
	--font-weight-semibold: 600;
	--font-weight-bold: 700;
	--font-weight-black: 900;
	--line-height-none: 1;
	--line-height-tight: 1.2;
	--line-height-snug: 1.4;
	--line-height-normal: 1.5;
	--line-height-relaxed: 1.6;

	/* Breiten */
	--global-max-width-text: none;
	--global-max-width-sm: 800px;
	--global-max-width-md: 920px;
	--global-max-width-lg: 1024px;
	--global-max-width-xl: 1320px;
	--global-max-width-2-xl: 1440px;
	--global-max-width-3-xl: 1526px;
	--global-max-width-4-xl: 1920px;
	--global-max-width-narrow: var(--global-max-width-sm);
	--global-max-width-default: var(--global-max-width-md);
	--global-max-width-wide: var(--global-max-width-xl);

	/* Abstände */
	--global-spacing-10: 8px;
	--global-spacing-20: 24px;
	--global-spacing-30: 32px;
	--global-spacing-40: 40px;
	--global-spacing-50: 60px;
	--global-spacing-60: 80px;
	--global-spacing-70: 120px;
	--theme-spacing-responsive-10: var(--wp--preset--spacing--10);
	--theme-spacing-responsive-20: var(--wp--preset--spacing--20);
	--theme-spacing-responsive-30: var(--wp--preset--spacing--30);
	--theme-spacing-responsive-40: var(--wp--preset--spacing--40);
	--theme-spacing-responsive-50: var(--wp--preset--spacing--50);
	--theme-spacing-responsive-60: var(--wp--preset--spacing--60);
	--theme-spacing-responsive-70: var(--wp--preset--spacing--70);
	--theme-spacing-responsive-gutter: var(--wp--preset--spacing--40);
	--theme-spacing-vertical-typography: var(--wp--preset--spacing--30);
	--global-gap: var(--global-spacing-30);

	/* Radien */
	--global-border-radius: var(--wp--custom--radius--global, 0);
	--global-border-radius-x2: var(--global-spacing-40);
	--details-border-radius: 0;
	--gallery-border-radius: 0;
	--image-border-radius: 0;
	--cover-border-radius: var(--global-border-radius);
	--group-border-radius: var(--global-border-radius);
	--post-featured-image-border-radius: 0;
	--video-border-radius: 0;

	/* Transitions, Ebenen, Schatten, Deckkraft */
	--motion-duration-reveal: 520ms;
	--motion-ease-standard: cubic-bezier(0.22, 0.61, 0.36, 1);
	--motion-reveal-distance: 8px;
	--motion-reveal-scale: 0.985;
	--transition-fast: var(--wp--custom--transition--fast, 180ms var(--motion-ease-standard));
	--transition-base: var(--wp--custom--transition--base, 260ms var(--motion-ease-standard));
	--transition-slow: var(--wp--custom--transition--slow, 480ms var(--motion-ease-standard));
	--z-index-behind: -1;
	--z-index-deep: -2;
	--z-index-base: 0;
	--z-index-above: 1;
	--z-index-above-2: 2;
	--z-index-above-3: 3;
	--z-index-dropdown: 10;
	--z-index-fixed: 20;
	--z-index-modal-backdrop: 21;
	--z-index-modal: 30;
	--z-index-mobilenav: 40;
	--z-index-header: 50;
	--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
	--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
	--shadow-lg: 0 10px 24px rgba(17, 17, 17, 0.12);
	--shadow-focus: 0 0 0 3px rgba(76, 103, 77, 0.1);
	--opacity-disabled: 0.4;
	--opacity-muted: 0.5;
	--opacity-hover: 0.35;
	--opacity-subtle: 0.1;
	--opacity-invisible: 0;

	/* Header */
	--header-height: var(--wp--custom--header--height, 160px);
	--header-height-fixed: var(--wp--custom--header--height-fixed, 100px);
	--header-height-mobile: var(--header-height-fixed);

	/* Navigation */
	--navigation-color-link: var(--color-white);
	--navigation-color-link-hover: var(--color-font);
	--navigation-color-link-footer: var(--color-primary);
	--navigation-color-link-footer-hover: var(--color-primary);
	--navigation-background-link: var(--color-black);
	--navigation-background-link-hover: var(--color-white);
	--subnavigation-gap-top: var(--wp--preset--spacing--30);
	--subnavigation-gap-top-mobile: 0;
	--subnavigation-padding-top-first-element: var(--wp--preset--spacing--20);
	--subnavigation-padding-bottom-last-element: var(--wp--preset--spacing--20);
	--subnavigation-padding-right: var(--button-padding-horizontal);
	--subnavigation-padding-left: var(--button-padding-horizontal);
	--subnavigation-padding-right-mobile: calc(var(--wp--preset--spacing--40) / 2);
	--subnavigation-padding-left-mobile: calc(var(--wp--preset--spacing--40) / 2);
	--subnavigation-padding-vertical: calc(var(--button-padding-vertical) / 2);
	--subnavigation-padding-vertical-mobile: var(--wp--preset--spacing--10);
	--subnavigation-font-size: var(--wp--preset--font-size--md);
	--subnavigation-color-link: var(--color-font);
	--subnavigation-color-link-hover: var(--color-link);
	--subnavigation-background-color: var(--color-white);
	--subnavigation-border-color: var(--color-grey-light);
	--subnavigation-border-width: 0;
	--subnavigation-border-style: solid;
	--subnavigation-border-radius: var(--global-border-radius);

	/* Buttons */
	--button-background-color: var(--color-black);
	--button-background-color-hover: var(--color-primary);
	--button-color: var(--color-white);
	--button-color-hover: var(--color-white);
	--button-border-color: var(--color-black);
	--button-border-color-hover: var(--color-primary);
	--button-primary-background-color: var(--color-black);
	--button-primary-background-color-hover: var(--color-primary);
	--button-primary-color: var(--color-white);
	--button-primary-color-hover: var(--color-white);
	--button-primary-border-color: var(--color-black);
	--button-primary-border-color-hover: var(--color-primary);
	--button-primary-negative-background-color: var(--color-black);
	--button-primary-negative-background-color-hover: var(--color-white);
	--button-primary-negative-color: var(--color-white);
	--button-primary-negative-color-hover: var(--color-black);
	--button-primary-negative-border-color: var(--color-black);
	--button-primary-negative-border-color-hover: var(--color-white);
	--button-outline-background-color: transparent;
	--button-outline-background-color-hover: transparent;
	--button-outline-color: var(--color-black);
	--button-outline-color-hover: var(--color-primary);
	--button-outline-border-color: var(--color-black);
	--button-outline-border-color-hover: var(--color-primary);
	--button-padding-vertical: var(--wp--preset--spacing--10);
	--button-padding-horizontal: var(--wp--preset--spacing--40);
	--button-padding-vertical--small: var(--wp--preset--spacing--10);
	--button-padding-horizontal--small: var(--wp--preset--spacing--20);
	--button-font-family: var(--font-heading);
	--button-font-size: var(--wp--preset--font-size--lg);
	--button-font-size--small: var(--wp--preset--font-size--md);
	--button-font-size--xs: var(--wp--preset--font-size--xs);
	--button-font-size--base: var(--wp--preset--font-size--base);
	--button-font-weight: 700;
	--button-letter-spacing: var(--wp--custom--button--letter-spacing, 1.08px);
	--button-letter-spacing--small: var(--wp--custom--button--letter-spacing-small, 0.96px);
	--button-line-height: var(--wp--custom--button--line-height, 1.22);
	--button-text-transform: uppercase;
	--button-border-radius: var(--wp--custom--button--radius, 40px);
	--button-border-width: var(--wp--custom--button--border-width, 2px);
	--button-border-width-small: 0.5px;
	--button-border-style: solid;
	--button-box-shadow: 0 0 0 transparent;
	--button-box-shadow-hover: 0 0 0 transparent;
	--search-input-border-radius: var(--button-border-radius);
	--socialshare-background-color: var(--button-background-color);
	--socialshare-color: var(--button-color);

	/* Tabellen */
	--table-padding-vertical: var(--button-padding-vertical);
	--table-padding-horizontal: var(--table-padding-vertical);
	--table-font-family: var(--wp--preset--font-family--body);
	--table-line-height: 1.5;
	--table-border-width-small: 0.5px;
	--table-border-width: 2px;
	--table-border-style: solid;
	--table-border-color: var(--color-primary);
	--table-thead-background-color: var(--color-primary);
	--table-thead-color: var(--color-white);
	--table-tr-background-color-hover: transparent;
	--table-tr-color: var(--color-font);
	--table-tr-color-hover: inherit;

	/* Burger, Scroll-Top */
	--hamburger-color: var(--color-black);
	--hamburger-color-hover: var(--color-link);
	--hamburger-color-active: var(--color-black);
	--scrollTop-button-background-color: var(--color-primary);
	--scrollTop-button-background-color-hover: var(--color-black);
	--scrollTop-button-color: var(--color-white);
	--scrollTop-button-color-hover: var(--color-white);
	--scrollTop-button-border-color: var(--color-primary);
	--scrollTop-button-border-color-hover: var(--color-black);
	--scrollTop-button-radius: var(--global-border-radius);
	--scrollTop-position-bottom: var(--wp--preset--spacing--40);
	--scrollTop-position-right: var(--wp--preset--spacing--40);

	/* WooCommerce-Kategorie-Tokens (von woocommerce/*.css genutzt) */
	--category-hover-opacity: 0.15;
	--category-transition: color var(--transition-base), background-color var(--transition-base), border-color var(--transition-base), text-decoration-color var(--transition-base), opacity var(--transition-base);
	--category-border-width: 3px;
	--category-border-width-thin: 2px;
	--category-border-width-accent: 4px;
	--category-padding-sm: 0.5rem;
	--category-padding-md: 1rem;
	--category-spacing-xs: 3px;
	--category-spacing-sm: 0.5rem;
	--category-spacing-md: 1rem;
	--category-text-decoration-offset: 3px;
	--category-text-decoration-thickness: 2px;
	--category-accent-bar-width: 10px;
	--category-accent-bar-height: 1.2em;
	--category-disabled-opacity: 0.4;

	/* Icons (SVG als Maske: mask: var(--icon-x) center / contain no-repeat; background-color: currentColor) */
	--icon-arrow-right-long: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12h20M16 6l6 6-6 6'/%3E%3C/svg%3E");
	--icon-arrow-left-long: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 12H2M8 6l-6 6 6 6'/%3E%3C/svg%3E");
	--icon-arrow-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M12 5l7 7-7 7'/%3E%3C/svg%3E");
	--icon-arrow-left: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5M12 19l-7-7 7-7'/%3E%3C/svg%3E");
	--icon-arrow-up: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19V5M5 12l7-7 7 7'/%3E%3C/svg%3E");
	--icon-arrow-up-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M7 7h10v10'/%3E%3C/svg%3E");
	--icon-chevron-left: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15 18-6-6 6-6'/%3E%3C/svg%3E");
	--icon-chevron-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E");
	--icon-chevron-up: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m18 15-6-6-6 6'/%3E%3C/svg%3E");
	--icon-chevron-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	--icon-caret-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M9 5.5v13l7.5-6.5z'/%3E%3C/svg%3E");
	--icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
	--icon-check-square: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Cpath d='m8 12 3 3 5-6'/%3E%3C/svg%3E");
	--icon-circle-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m8 12 3 3 5-6'/%3E%3C/svg%3E");
	--icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E");
	--icon-phone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1 1 .4 1.9.7 2.8a2 2 0 0 1-.5 2.1L8 9.9a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.4c.9.3 1.8.6 2.8.7a2 2 0 0 1 1.7 2z'/%3E%3C/svg%3E");
	--icon-envelope: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='m22 7-10 6L2 7'/%3E%3C/svg%3E");
	--icon-linkedin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M20.45 20.45h-3.56v-5.57c0-1.33-.02-3.04-1.85-3.04-1.85 0-2.14 1.45-2.14 2.94v5.67H9.35V9h3.41v1.56h.05c.48-.9 1.64-1.85 3.37-1.85 3.6 0 4.27 2.37 4.27 5.46zM5.34 7.43a2.06 2.06 0 1 1 0-4.13 2.06 2.06 0 0 1 0 4.13M7.12 20.45H3.56V9h3.56z'/%3E%3C/svg%3E");
	--icon-x-twitter: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M18.9 1.2h3.7l-8 9.2L24 22.8h-7.4l-5.8-7.6-6.6 7.6H.5l8.6-9.8L0 1.2h7.6l5.2 6.9zm-1.3 19.4h2L6.5 3.3H4.3z'/%3E%3C/svg%3E");
	--icon-facebook: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M24 12.07C24 5.41 18.63 0 12 0S0 5.4 0 12.07C0 18.1 4.39 23.1 10.13 24v-8.44H7.08v-3.49h3.04V9.41c0-3.02 1.8-4.7 4.54-4.7 1.31 0 2.68.24 2.68.24v2.97h-1.5c-1.5 0-1.96.93-1.96 1.89v2.26h3.32l-.53 3.5h-2.8V24C19.62 23.1 24 18.1 24 12.07'/%3E%3C/svg%3E");
	--icon-whatsapp: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M17.47 14.38c-.3-.15-1.76-.87-2.03-.97s-.47-.15-.67.15-.77.97-.94 1.16-.35.22-.65.07a8.2 8.2 0 0 1-2.4-1.48 9 9 0 0 1-1.66-2.06c-.17-.3 0-.46.13-.6.13-.14.3-.35.45-.52.15-.18.2-.3.3-.5s.05-.37-.03-.52-.67-1.62-.92-2.22c-.24-.58-.49-.5-.67-.51h-.57a1.1 1.1 0 0 0-.8.37 3.3 3.3 0 0 0-1.04 2.48 5.8 5.8 0 0 0 1.21 3.07 13.3 13.3 0 0 0 5.08 4.49c.71.3 1.27.49 1.7.63a4.1 4.1 0 0 0 1.88.12 3.07 3.07 0 0 0 2.01-1.42 2.5 2.5 0 0 0 .17-1.42c-.07-.13-.27-.2-.57-.35M12.05 21.8h-.01a9.9 9.9 0 0 1-5.03-1.38l-.36-.21-3.74.98 1-3.65-.24-.37a9.86 9.86 0 0 1 15.36-12.2 9.8 9.8 0 0 1 2.88 6.98 9.87 9.87 0 0 1-9.86 9.85m8.41-18.27A11.8 11.8 0 0 0 12.05 0 11.9 11.9 0 0 0 1.74 17.79L.06 24l6.33-1.66a11.9 11.9 0 0 0 5.66 1.44h.01A11.9 11.9 0 0 0 24 11.9a11.8 11.8 0 0 0-3.54-8.38'/%3E%3C/svg%3E");
	--icon-instagram: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='2' width='20' height='20' rx='5'/%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M17.5 6.5h.01'/%3E%3C/svg%3E");
	--icon-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E");
	--icon-cart: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='21' r='1'/%3E%3Ccircle cx='19' cy='21' r='1'/%3E%3Cpath d='M2 2h2l2.7 12.4a2 2 0 0 0 2 1.6h9.7a2 2 0 0 0 2-1.6L22 7H5.1'/%3E%3C/svg%3E");
}

/* Icon-Basis: auf ein Pseudo-Element anwenden, Icon via --icon setzen. */
.heidegg-icon,
.heidegg-icon-before::before,
.heidegg-icon-after::after {
	content: "";
	display: inline-block;
	width: 1em;
	height: 1em;
	flex-shrink: 0;
	background-color: currentcolor;
	-webkit-mask: var(--icon) center / contain no-repeat;
	mask: var(--icon) center / contain no-repeat;
}

/* =========================================================
   2. BASIS
   ========================================================= */
@supports (font-feature-settings: "ss01") {
	:root {
		font-feature-settings: "ss01";
	}
}

html {
	scroll-behavior: smooth;
}

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	/* clip statt hidden: verhindert horizontales Scrollen, ohne position:sticky zu brechen. */
	overflow-x: clip;
}

body.menuOpen {
	overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
	html,
	*,
	*::before,
	*::after {
		scroll-behavior: auto;
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-delay: 0s !important;
		transition-duration: 0.01ms !important;
	}

	.js .anim__animated {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
}

@media (max-width: 767.98px) {
	:root {
		--motion-duration-reveal: 420ms;
		--motion-reveal-distance: 5px;
		--motion-reveal-scale: 0.99;
	}
}

/* Inhalte direkt unter dem fixen Header */
.header-offset {
	margin-top: var(--header-height-mobile);
}

.header-height {
	height: var(--header-height-mobile);
}

@media (min-width: 1280px) {
	.header-offset {
		margin-top: var(--header-height);
	}

	.header-height {
		height: var(--header-height);
	}
}

/* =========================================================
   3. HEADER
   ========================================================= */
#site-header {
	position: fixed;
	inset: 0 0 auto;
	z-index: var(--z-index-header);
	width: auto;
	transition: box-shadow var(--transition-base), transform var(--transition-base), background-color var(--transition-base);
}

/*
 * WooCommerce-Overlays (Filter auf Mobile, Vollbild-Galerie) liegen in <main>,
 * das wegen der Kategorie-Akzentbalken (z-index: -1) ein eigener Stapelkontext ist.
 * Solange ein Overlay offen ist, tritt der Header deshalb hinter <main> zurück.
 */
body.wc-block-product-gallery-dialog-open #site-header,
body:has(.wc-block-product-filters.is-overlay-opened) #site-header {
	z-index: var(--z-index-base);
}

@media (max-width: 1279.98px) {
	.header-height {
		justify-content: space-between;
		width: 100%;
	}

	.page-template-default #site-header {
		background-color: var(--color-white);
	}
}

#site-header.is-header-visible,
#site-header.is-header-hidden {
	box-shadow: var(--shadow-sm);
}

#site-header.is-header-visible,
.menuOpen #site-header {
	background-color: var(--color-white);
}

#site-header.is-header-visible {
	transform: translateY(0);
}

#site-header.is-header-hidden {
	transform: translateY(-100%);
}

/* Admin-Leiste (nur angemeldet) nicht überdecken */
@media (min-width: 601px) {
	.admin-bar #site-header {
		top: var(--wp-admin--admin-bar--height, 0);
	}
}

/* Site-Editor: Header im Fluss statt fix */
.editor-styles-wrapper #site-header {
	position: relative;
	transform: none;
}

#site-header.is-header-visible .header-height {
	height: var(--header-height-fixed);
}

@media (max-width: 1440px) {
	.header-responsive-spacing {
		gap: var(--wp--preset--spacing--40);
	}
}

/* Hauptnavigation (Desktop): Pillen */
#site-header .wp-block-navigation__container > .wp-block-navigation-item {
	padding: var(--button-padding-vertical) var(--button-padding-horizontal);
	color: var(--navigation-color-link);
	background-color: var(--navigation-background-link);
	border-radius: var(--button-border-radius);
	transition: color var(--transition-base), background-color var(--transition-base);
}

#site-header .wp-block-navigation__container > .wp-block-navigation-item:hover,
#site-header .wp-block-navigation__container > .wp-block-navigation-item:focus-within,
#site-header .wp-block-navigation__container > .wp-block-navigation-item.current-menu-item {
	color: var(--navigation-color-link-hover);
	background-color: var(--navigation-background-link-hover);
}

#site-header .wp-block-navigation__container > .wp-block-navigation-item:hover > .wp-block-navigation-item__content {
	color: var(--navigation-color-link-hover);
}

@media (max-width: 1440px) {
	#site-header .wp-block-navigation .wp-block-navigation-item {
		font-size: var(--wp--preset--font-size--md);
	}
}

#site-header .wp-block-navigation a:where(:not(.wp-element-button)) {
	transition: color var(--transition-fast), background-color var(--transition-fast);
}

#site-header .wp-block-navigation__submenu-container .wp-block-navigation-item {
	color: var(--subnavigation-color-link);
	font-size: var(--subnavigation-font-size);
}

#site-header .wp-block-navigation .has-child .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
	color: var(--subnavigation-color-link-hover);
	text-decoration: underline;
}

.wp-block-navigation .wp-block-navigation__submenu-icon svg {
	margin-top: 0;
}

.wp-block-navigation__submenu-container .current-menu-item > .wp-block-navigation-item__content {
	font-weight: 700;
	text-decoration: underline;
}

/* Produktsuche (Toggle per Checkbox, Feld vom Plugin «WooCommerce Product Search») */
.search-icon-wrapper {
	position: relative;
}

.editor-styles-wrapper .search-icon-wrapper {
	display: none;
}

.product-search-checkbox {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

.product-search-checkbox + label {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 50px;
	height: 50px;
	margin-bottom: 0;
	color: var(--color-white);
	background-color: var(--color-black);
	border-radius: 50%;
	cursor: pointer;
	transition: background-color var(--transition-base), color var(--transition-base);
}

.product-search-checkbox + label:hover,
.product-search-checkbox:checked + label {
	color: var(--color-black);
	background-color: var(--color-white);
}

.product-search-checkbox:focus-visible + label {
	outline: 2px solid var(--color-primary);
	outline-offset: 2px;
}

.product-search-checkbox + label svg {
	width: 36px;
	height: 36px;
	fill: currentcolor;
}

#product-search-0 {
	display: none;
	position: absolute;
	top: calc(100% + var(--wp--preset--spacing--30));
	right: 0;
	z-index: var(--z-index-dropdown);
	min-width: 300px;
}

.product-search-checkbox:checked ~ #product-search-0 {
	display: block;
}

.product-search-field {
	width: 100%;
	padding: 12px 20px;
	font-family: var(--font-body);
	font-size: 16px;
	font-weight: 400;
	color: var(--color-black);
	background-color: var(--color-white);
	border: 2px solid transparent;
	border-radius: var(--search-input-border-radius);
	outline: none;
	transition: border-color var(--transition-base), background-color var(--transition-base), box-shadow var(--transition-base);
}

.product-search-field::placeholder {
	color: var(--color-grey-500);
	opacity: 1;
}

.product-search-field:hover {
	background-color: var(--color-grey-200);
}

.product-search-field:focus {
	background-color: var(--color-white);
	border-color: var(--color-black);
	box-shadow: 0 0 0 3px rgba(29, 29, 27, 0.1);
}

/* Mini-Cart-Button im Header */
.wc-block-mini-cart__button {
	color: var(--navigation-color-link);
	background-color: var(--navigation-background-link);
	border-radius: var(--button-border-radius);
	transition: color var(--transition-base), background-color var(--transition-base);
}

.wc-block-mini-cart__button:hover,
.wc-block-mini-cart__button:focus-visible {
	color: var(--navigation-color-link-hover);
	background-color: var(--navigation-background-link-hover);
}

.wc-block-mini-cart__badge {
	transform: translateY(-75%);
}

/* Burger-Button (#mobileToggle) */
.heidegg-burger {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 8px;
	color: var(--hamburger-color);
	background: transparent;
	border: 0;
	cursor: pointer;
}

.heidegg-burger:focus-visible {
	outline: 2px solid var(--color-primary);
	outline-offset: 2px;
}

.heidegg-burger__box {
	position: relative;
	display: block;
	width: 30px;
	height: 24px;
}

.heidegg-burger__box span {
	position: absolute;
	display: block;
	width: 50%;
	height: 3px;
	background-color: var(--hamburger-color);
	opacity: 1;
	transform: rotate(0);
	transition: background-color var(--transition-base), opacity var(--transition-base), transform var(--transition-base);
}

.heidegg-burger__box span:nth-child(odd) {
	left: 0;
}

.heidegg-burger__box span:nth-child(even) {
	left: 50%;
}

.heidegg-burger__box span:nth-child(1),
.heidegg-burger__box span:nth-child(2) {
	top: 0;
}

.heidegg-burger__box span:nth-child(3),
.heidegg-burger__box span:nth-child(4) {
	top: 10px;
}

.heidegg-burger__box span:nth-child(5),
.heidegg-burger__box span:nth-child(6) {
	top: 21px;
}

.heidegg-burger:hover .heidegg-burger__box span {
	background-color: var(--hamburger-color-hover);
}

.menuOpen .heidegg-burger__box span {
	background-color: var(--hamburger-color-active);
}

.menuOpen .heidegg-burger__box span:nth-child(1),
.menuOpen .heidegg-burger__box span:nth-child(6) {
	transform: rotate(45deg);
}

.menuOpen .heidegg-burger__box span:nth-child(2),
.menuOpen .heidegg-burger__box span:nth-child(5) {
	transform: rotate(-45deg);
}

.menuOpen .heidegg-burger__box span:nth-child(1) {
	top: 7px;
	left: 5px;
}

.menuOpen .heidegg-burger__box span:nth-child(2) {
	top: 7px;
	left: calc(50% - 5px);
}

.menuOpen .heidegg-burger__box span:nth-child(3) {
	left: -50%;
	opacity: 0;
}

.menuOpen .heidegg-burger__box span:nth-child(4) {
	left: 100%;
	opacity: 0;
}

.menuOpen .heidegg-burger__box span:nth-child(5) {
	top: 12px;
	left: 5px;
}

.menuOpen .heidegg-burger__box span:nth-child(6) {
	top: 12px;
	left: calc(50% - 5px);
}

/* =========================================================
   4. MOBILE NAVIGATION (#site-mobilenav)
   ========================================================= */
#site-mobilenav {
	position: fixed;
	inset: 0;
	z-index: var(--z-index-mobilenav);
	width: 100%;
	height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-100%);
	transition: opacity var(--transition-base), transform var(--transition-base), visibility 0s linear var(--transition-base);
}

#site-mobilenav.is-visible {
	height: auto;
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	transition-delay: 0s;
}

@media (min-width: 1280px) {
	#site-mobilenav {
		display: none;
	}
}

/* Im Site-Editor sichtbar und im Fluss darstellen */
.editor-styles-wrapper #site-mobilenav {
	position: relative;
	height: auto;
	margin-top: 0;
	opacity: 1;
	visibility: visible;
	transform: none;
}

#site-mobilenav .wp-block-navigation__container {
	width: 100%;
}

#site-mobilenav .wp-block-navigation .wp-block-navigation-item {
	flex-direction: column;
	align-items: flex-start;
	width: 100%;
}

#site-mobilenav nav.wp-block-navigation > ul.wp-block-navigation__container > .wp-block-navigation-item {
	align-items: center;
	font-family: var(--wp--preset--font-family--body);
	letter-spacing: 5px;
	text-align: center;
}

#site-mobilenav .wp-block-navigation .has-child .wp-block-navigation__submenu-container,
#site-mobilenav .wp-block-navigation .wp-block-navigation-item.open-on-click .wp-block-navigation-submenu__toggle {
	width: 100%;
}

#site-mobilenav .wp-block-navigation .wp-block-navigation-submenu__toggle {
	padding-left: 0;
	padding-right: 0;
	text-align: center;
}

/* Core-Navigation-CSS setzt hier !important (min-width, Submenu-Paddings aus theme.json). */
#site-mobilenav .wp-block-navigation .has-child .wp-block-navigation__submenu-container {
	position: relative;
	top: 10px;
	min-width: auto !important;
	margin-top: 0;
	padding-top: var(--subnavigation-gap-top-mobile) !important;
}

#site-mobilenav .wp-block-navigation .has-child .wp-block-navigation__submenu-container .wp-block-navigation-item {
	align-items: center;
	width: calc(100% - var(--subnavigation-padding-left-mobile) - var(--subnavigation-padding-right-mobile));
	padding: var(--subnavigation-padding-vertical-mobile) var(--subnavigation-padding-right-mobile) var(--subnavigation-padding-vertical-mobile) var(--subnavigation-padding-left-mobile) !important;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--subnavigation-font-size);
	letter-spacing: normal;
	text-align: center;
	text-transform: none;
	background-color: var(--subnavigation-background-color);
}

#site-mobilenav .wp-block-navigation .has-child .wp-block-navigation__submenu-container .wp-block-navigation-item:first-child {
	padding-top: calc(2 * var(--subnavigation-padding-vertical-mobile)) !important;
}

#site-mobilenav .wp-block-navigation .has-child .wp-block-navigation__submenu-container .wp-block-navigation-item:last-child {
	padding-bottom: calc(2 * var(--subnavigation-padding-vertical-mobile)) !important;
}

#site-mobilenav .wp-block-navigation .has-child .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content {
	font-size: var(--wp--preset--font-size--lg);
}

/* Offenes Untermenü: oben bleibt 0 (siehe Regel oben), unten Gutter */
#site-mobilenav .wp-block-navigation .wp-block-navigation-submenu__toggle[aria-expanded="true"] ~ .wp-block-navigation__submenu-container,
#site-mobilenav .wp-block-navigation .is-open-by-script > .wp-block-navigation__submenu-container {
	padding-right: 0;
	padding-bottom: var(--wp--preset--spacing--40);
	padding-left: 0;
}

#site-mobilenav .wp-block-navigation .wp-block-navigation__submenu-icon {
	position: absolute;
	right: 20px;
	width: 14px;
	height: 14px;
	transform: translateY(50%);
}

#site-mobilenav .wp-block-navigation .wp-block-navigation__submenu-icon svg {
	display: none;
}

#site-mobilenav .wp-block-navigation .wp-block-navigation__submenu-icon::after {
	content: "";
	display: block;
	width: 14px;
	height: 14px;
	background-color: currentcolor;
	-webkit-mask: var(--icon-chevron-down) center / contain no-repeat;
	mask: var(--icon-chevron-down) center / contain no-repeat;
	transition: transform var(--transition-base);
}

#site-mobilenav .wp-block-navigation .wp-block-navigation-submenu__toggle[aria-expanded="true"] + .wp-block-navigation__submenu-icon::after,
#site-mobilenav .wp-block-navigation .is-open-by-script > .wp-block-navigation__submenu-icon::after {
	transform: rotate(180deg);
}

#site-mobilenav .wp-block-navigation .current-menu-item .wp-block-navigation-item__label,
#site-mobilenav .wp-block-navigation .current-menu-ancestor > .wp-block-navigation-submenu__toggle .wp-block-navigation-item__label,
#site-mobilenav .wp-block-navigation .current-menu-parent > .wp-block-navigation-submenu__toggle .wp-block-navigation-item__label,
#site-mobilenav .wp-block-navigation .current-menu-ancestor > .wp-block-navigation__submenu-icon,
#site-mobilenav .wp-block-navigation .current-menu-parent > .wp-block-navigation__submenu-icon {
	color: var(--color-primary);
}

/* =========================================================
   5. FOOTER
   ========================================================= */
footer a:hover:where(:not(.wp-element-button)) {
	/* Überschreibt den !important-Hover der Navigation (theme.json, schwarz) */
	color: var(--navigation-color-link-footer-hover) !important;
}

:root footer p a:where(:not(.wp-element-button)) {
	text-decoration: none;
}

footer .wp-block-social-links .wp-social-link svg {
	width: var(--wp--preset--spacing--30);
	height: var(--wp--preset--spacing--30);
}

@media (max-width: 768px) {
	.footer-navigation-social {
		align-items: flex-start;
	}

	.footer-navigation-social .wp-block-navigation {
		order: 1;
	}

	.footer-navigation-social .wp-block-navigation .wp-block-navigation__container {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--wp--preset--spacing--10);
	}

	.footer-navigation-social .wp-block-social-links {
		order: 2;
		align-self: flex-end;
	}
}

/* =========================================================
   6. SCROLL-TOP
   ========================================================= */
#to-top-button {
	position: fixed;
	right: var(--scrollTop-position-right);
	bottom: var(--scrollTop-position-bottom);
	z-index: var(--z-index-mobilenav);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	font-size: var(--wp--preset--font-size--xl);
	color: var(--scrollTop-button-color);
	background-color: var(--scrollTop-button-background-color);
	border: var(--button-border-width) solid var(--scrollTop-button-border-color);
	border-radius: var(--scrollTop-button-radius);
	text-decoration: none;
	cursor: pointer;
	transition: color var(--transition-base), background-color var(--transition-base), border-color var(--transition-base);
}

#to-top-button::before {
	content: "";
	width: 1em;
	height: 1em;
	background-color: currentcolor;
	-webkit-mask: var(--icon-arrow-up) center / contain no-repeat;
	mask: var(--icon-arrow-up) center / contain no-repeat;
}

#to-top-button:hover,
#to-top-button:focus-visible {
	color: var(--scrollTop-button-color-hover);
	background-color: var(--scrollTop-button-background-color-hover);
	border-color: var(--scrollTop-button-border-color-hover);
}

.menuOpen #to-top-button {
	display: none;
}

.editor-styles-wrapper #to-top-button {
	position: static;
}

/* =========================================================
   7. CORE-BLÖCKE
   ========================================================= */

/* Buttons */
.wp-block-button__link {
	box-shadow: var(--button-box-shadow);
	transition: color var(--transition-fast), background-color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
}

@media (hover: hover) and (pointer: fine) {
	.wp-block-button__link:hover {
		transform: translateY(-1px);
	}
}

.wp-block-button.is-style-fill .wp-block-button__link:hover,
.wp-block-button.is-style-fill-small .wp-block-button__link:hover {
	color: var(--button-primary-color-hover);
	background-color: var(--button-primary-background-color-hover);
	border-color: var(--button-primary-border-color-hover);
}

.wp-block-button.is-style-fill-negative .wp-block-button__link:hover,
.wp-block-button.is-style-fill-negative-small .wp-block-button__link:hover {
	color: var(--button-primary-negative-color-hover);
	background-color: var(--button-primary-negative-background-color-hover);
	border-color: var(--button-primary-negative-border-color-hover);
}

.wp-block-button.is-style-outline .wp-block-button__link:hover,
.wp-block-button.is-style-outline-small .wp-block-button__link:hover {
	color: var(--button-outline-color-hover);
	background-color: var(--button-outline-background-color-hover);
	border-color: var(--button-outline-border-color-hover);
}

/* stylelint-disable-next-line selector-not-notation -- :not(a, b) hätte eine tiefere Spezifität und würde die Kaskade ändern. */
.wp-block-button[class*="is-style-fill-"]:not(.is-style-fill-small):not(.is-style-fill-negative):not(.is-style-fill-negative-small) .wp-block-button__link:hover {
	color: var(--color-white);
	background-color: var(--color-green);
	border-color: var(--color-green);
}

.wp-block-buttons.is-content-justification-right {
	justify-content: flex-start;
}

@media (min-width: 1024px) {
	.wp-block-buttons.is-content-justification-right {
		justify-content: flex-end;
	}
}

/* Read more */
.wp-block-read-more.is-style-primary {
	white-space: nowrap;
	transition: color var(--transition-fast), background-color var(--transition-fast), border-color var(--transition-fast);
}

.wp-block-read-more.is-style-primary:hover {
	color: var(--button-primary-color-hover);
	background-color: var(--button-primary-background-color-hover);
	border-color: var(--button-primary-border-color-hover);
}

/* Absatz-Stil «Sublines» */
p.is-style-sublines {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--3-xl);
	font-style: normal;
	font-weight: 400;
	line-height: 1.6;
	letter-spacing: 10px;
	text-transform: uppercase;
}

@media (max-width: 768px) {
	p.is-style-sublines {
		font-size: var(--wp--preset--font-size--xl);
		letter-spacing: 6px;
	}

	h1.flex-fontsize-mobile {
		font-size: 40px;
	}
}

/* Überschriften */
.wp-block-heading + .wp-block-heading {
	margin-block-start: calc(var(--wp--preset--spacing--30) / 2);
}

.wp-block-heading mark {
	position: relative;
	/* Core setzt mark-Farbe inline/über has-*-color mit !important */
	color: inherit !important;
}

.wp-block-heading mark::before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	width: 100%;
	height: var(--wp--preset--spacing--10);
	background-color: var(--wp--preset--color--primary);
	transform: translateY(calc(-100% - var(--wp--preset--spacing--20)));
}

:root :where(p.wp-block-post-excerpt__excerpt) {
	margin-top: 0;
	margin-bottom: 0;
}

/* Group */
:root :where(.wp-block-group.is-style-rounded) {
	overflow: hidden;
}

@media (max-width: 1023.98px) {
	.wp-block-group.is-layout-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 767.98px) {
	.wp-block-group.is-layout-grid {
		grid-template-columns: repeat(1, minmax(0, 1fr));
	}

	.wp-block-group.is-layout-grid.grid-mobile-2 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Group-Stile «Mixed Blend» */
.wp-block-group[class*="is-style-mixed-blend-"] {
	mix-blend-mode: multiply;
	pointer-events: none;
}

.wp-block-group.is-style-mixed-blend-yellow { background-color: var(--color-yellow); }
.wp-block-group.is-style-mixed-blend-black { background-color: var(--color-black); }
.wp-block-group.is-style-mixed-blend-red { background-color: var(--color-red); }
.wp-block-group.is-style-mixed-blend-green { background-color: var(--color-green); }
.wp-block-group.is-style-mixed-blend-brown { background-color: var(--color-brown); }
.wp-block-group.is-style-mixed-blend-pink { background-color: var(--color-pink); }
.wp-block-group.is-style-mixed-blend-blue { background-color: var(--color-blue); }

/* Bisher wirkungslose Legacy-Klasse: Farbe nur via Preset-Klasse, die Inhalte zeigen
   heute keinen Hintergrund. Bleibt transparent, damit das Frontend 1:1 bleibt.
   !important nötig, weil die Preset-Klasse von WordPress !important setzt. */
.has-grey-extra-light-background-color {
	background-color: transparent !important;
}

/* Galerie: schwarzweiss, farbig beim Hover */
.wp-block-gallery figure.wp-block-image {
	filter: grayscale(100%) contrast(140%);
	transition: filter var(--transition-slow);
}

@media (hover: hover) and (pointer: fine) {
	.wp-block-gallery figure.wp-block-image:hover {
		filter: none;
	}
}

/* Suche */
.wp-block-search__button svg {
	transform: scale(0.8);
}

:root :where(.wp-block-search .wp-element-button, .wp-block-search .wp-block-button__link) {
	align-items: center;
	min-width: 50px;
	height: 50px;
	padding: 0;
	font-size: var(--wp--preset--font-size--3-xl);
	color: var(--navigation-color-link);
	background-color: var(--navigation-background-link);
	border: none;
	transition: color var(--transition-base), background-color var(--transition-base);
}

:root :where(.wp-block-search .wp-element-button, .wp-block-search .wp-block-button__link):hover {
	color: var(--navigation-color-link-hover);
	background-color: var(--navigation-background-link-hover);
}

/* Details / Summary */
.wp-block-details summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--40);
	list-style: none;
	cursor: pointer;
	transition: transform var(--transition-slow);
}

.wp-block-details summary::-webkit-details-marker {
	display: none;
}

.wp-block-details summary::marker {
	content: none;
}

.wp-block-details summary::after {
	content: "";
	flex-shrink: 0;
	width: var(--wp--preset--font-size--3-xl);
	height: var(--wp--preset--font-size--3-xl);
	margin-left: 0.5rem;
	background-color: currentcolor;
	-webkit-mask: var(--icon-chevron-down) center / 70% no-repeat;
	mask: var(--icon-chevron-down) center / 70% no-repeat;
	transition: transform var(--transition-slow);
}

.wp-block-details[open] summary::after {
	transform: rotate(180deg);
}

@media (hover: hover) and (pointer: fine) {
	.wp-block-details summary:hover {
		transform: translateX(4px);
	}
}

.wp-block-details summary ~ :last-child {
	padding-bottom: 0;
}

/* Listen mit Icons (Block-Stile liststyle-icon-*) */
ul[class*="liststyle-icon"] {
	padding-left: 0;
	list-style-type: none;
}

ul[class*="liststyle-icon"] > li {
	position: relative;
	transition: color var(--transition-fast);
}

ul[class*="liststyle-icon"] > li a {
	color: inherit;
}

ul[class*="liststyle-icon"] > li::before,
ul[class*="liststyle-icon"] > li::after {
	position: absolute;
	top: 50%;
	display: inline-block;
	transform: translateY(-50%);
	transition: transform var(--transition-fast);
}

ul[class*="liststyle-icon"][class*="-start"] > li {
	padding-right: 0;
	padding-bottom: 0;
	padding-left: var(--wp--preset--spacing--40);
	margin-bottom: var(--wp--preset--spacing--20);
}

ul[class*="liststyle-icon"][class*="-start"] > li::before {
	content: "";
	left: 0;
	width: 1em;
	height: 1em;
	background-color: currentcolor;
	-webkit-mask: var(--icon) center / contain no-repeat;
	mask: var(--icon) center / contain no-repeat;
}

ul[class*="liststyle-icon"][class*="-start"] > li::after {
	display: none;
}

ul[class*="liststyle-icon"][class*="--circle-check"] > li {
	--icon: var(--icon-check-square);
	padding-left: calc(var(--wp--preset--spacing--40) + var(--wp--preset--spacing--20));
	margin-bottom: var(--wp--preset--spacing--40);
}

ul[class*="liststyle-icon"][class*="--circle-check"] > li::before {
	font-size: var(--wp--preset--font-size--5-xl);
}

ul[class*="liststyle-icon"][class*="--chevron-left"] > li {
	--icon: var(--icon-chevron-left);
	padding-left: var(--wp--preset--spacing--30);
	margin-bottom: var(--wp--preset--spacing--30);
}

ul[class*="liststyle-icon"][class*="--chevron-left"] > li::before {
	top: 0.1em;
	font-size: var(--wp--preset--font-size--xl);
	color: var(--color-primary);
	transform: translateX(0);
	transition: transform var(--transition-base);
}

ul[class*="liststyle-icon"][class*="--chevron-left"] > li:hover::before {
	transform: translateX(-4px);
}

/* =========================================================
   8. UTILITIES
   ========================================================= */
.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border-width: 0;
}

.overflow-hidden {
	overflow: hidden;
}

.aspect-square {
	aspect-ratio: 1 / 1;
}

@media (max-width: 1023.98px) {
	.md-left--align {
		align-items: flex-start;
	}

	.sm-text-left {
		text-align: left;
	}
}

/* Sichtbarkeits-Helfer. Utilities müssen gegen Layout-Klassen von Core
   (body .is-layout-flex { display:flex }) gewinnen -> !important. */
@media (max-width: 767.98px) {
	:where(body:not(.editor-styles-wrapper)) .sm-hidden--flex { display: none !important; }
	.sm-centered--text { text-align: center; }
}

@media (max-width: 1023.98px) {
	:where(body:not(.editor-styles-wrapper)) .md-hidden--flex { display: none !important; }
	.md-centered--text { text-align: center; }
}

@media (max-width: 1279.98px) {
	:where(body:not(.editor-styles-wrapper)) .lg-hidden--flex { display: none !important; }
	.lg-centered--text { text-align: center; }
}

@media (max-width: 1439.98px) {
	:where(body:not(.editor-styles-wrapper)) .xl-hidden--flex { display: none !important; }
}

@media (max-width: 1679.98px) {
	:where(body:not(.editor-styles-wrapper)) .xxl-hidden--flex { display: none !important; }
}

@media (min-width: 640px) {
	:where(body:not(.editor-styles-wrapper)) .sm-hidden { display: none !important; }
}

@media (min-width: 768px) {
	:where(body:not(.editor-styles-wrapper)) .md-hidden { display: none !important; }
}

@media (min-width: 1024px) {
	:where(body:not(.editor-styles-wrapper)) .lg-hidden { display: none !important; }
}

@media (min-width: 1280px) {
	:where(body:not(.editor-styles-wrapper)) .xl-hidden { display: none !important; }
}

@media (min-width: 1440px) {
	:where(body:not(.editor-styles-wrapper)) .xxl-hidden { display: none !important; }
}

/* =========================================================
   9. SCROLL-REVEAL (.scroll-reveal .anim__animated .anim__*)
   Startzustand nur mit JS (html.js) und ohne reduzierte Bewegung.
   ========================================================= */
@media (prefers-reduced-motion: no-preference) {
	.js .anim__animated:not(.is-inview) {
		opacity: 0;
	}

	.js .anim__animated {
		transition: opacity var(--motion-duration-reveal) var(--motion-ease-standard), transform var(--motion-duration-reveal) var(--motion-ease-standard);
	}

	.js .anim__fadeInUp:not(.is-inview) { transform: translateY(var(--motion-reveal-distance)); }
	.js .anim__fadeInDown:not(.is-inview) { transform: translateY(calc(-1 * var(--motion-reveal-distance))); }
	.js .anim__fadeInLeft:not(.is-inview) { transform: translateX(var(--motion-reveal-distance)); }
	.js .anim__fadeInRight:not(.is-inview) { transform: translateX(calc(-1 * var(--motion-reveal-distance))); }
	.js .anim__zoomIn:not(.is-inview) { transform: scale(var(--motion-reveal-scale)); }
}