/* Valeria Gunz – ergänzende Stile zu theme.json */

:root {
	--vg-sans: var(--wp--preset--font-family--figtree);
	--vg-serif: var(--wp--preset--font-family--caslon);
	--vg-creme: var(--wp--preset--color--creme);
	--vg-flaeche: var(--wp--preset--color--flaeche);
	--vg-text: var(--wp--preset--color--text);
	--vg-sek: var(--wp--preset--color--sekundaer);
	--vg-meta: var(--wp--preset--color--meta);
	--vg-linie: var(--wp--preset--color--linie);
	--vg-akzent: var(--wp--preset--color--akzent);
	--vg-dunkel: var(--wp--preset--color--dunkel);
	--vg-rand: var(--wp--style--root--padding-left, clamp(16px, 4vw, 56px));
}

body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
:where(.wp-site-blocks) > * { margin-block-start: 0; }
.vg-main { margin-top: 0; }

/* ---------- Kleine Typo-Bausteine ---------- */
.vg-label { font-family: var(--vg-sans); font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--vg-sek); margin: 0; }
.vg-akzent, .vg-akzent a { color: var(--vg-akzent) !important; }
.vg-mehr { font-family: var(--vg-sans); font-size: 13px; letter-spacing: 0.04em; margin: 0; }
.vg-mehr a { border-bottom: 1px solid currentColor; padding-bottom: 2px; }
.vg-tafel { color: var(--vg-text); }
.vg-tafel h2 { margin: 0; }

/* ---------- Kopf ---------- */
.vg-kopf { position: relative; z-index: 60; padding: 24px var(--vg-rand) !important; gap: 24px 40px; max-width: none !important; }
.vg-logo { display: inline-flex; align-items: center; min-height: 44px; color: var(--vg-text); }
.vg-logo:hover { color: var(--vg-text); }
.vg-kopf .wp-block-navigation { font-family: var(--vg-sans); font-size: 13px; letter-spacing: 0.18em; text-transform: uppercase; }
.vg-kopf .wp-block-navigation .wp-block-navigation-item__content { padding-block: 12px; }
.vg-kopf .wp-block-navigation .current-menu-item > .wp-block-navigation-item__content,
.vg-kopf .wp-block-navigation .current-menu-ancestor > .wp-block-navigation-item__content { border-bottom: 1px solid currentColor; padding-bottom: 11px; }

/* Unterlisten */
.vg-kopf .wp-block-navigation .wp-block-navigation__submenu-container {
	background: var(--vg-creme) !important; color: var(--vg-text) !important;
	border: 1px solid var(--vg-linie) !important; padding: 16px 22px !important; min-width: 260px !important;
	left: -22px; text-transform: none; letter-spacing: 0.02em; font-size: 14px;
}
.vg-kopf .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content { padding: 5px 0 !important; white-space: nowrap; border: 0 !important; }

/* Mega-Menü Shop */
.vg-kopf .vg-mega > .wp-block-navigation__submenu-container {
	display: grid !important; grid-template-columns: repeat(5, minmax(140px, 1fr)); gap: 24px 32px;
	width: min(920px, 92vw) !important; left: auto !important; right: -22px; padding: 28px 32px !important;
}
.vg-kopf .vg-mega:not(:hover):not(:focus-within) > .wp-block-navigation__submenu-container { display: none !important; }
.vg-kopf .vg-mega .vg-mega-gruppe { flex-direction: column; align-items: flex-start; }
.vg-kopf .vg-mega .vg-mega-gruppe > .wp-block-navigation-item__content { font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--vg-dunkel); padding: 4px 0 6px !important; }
.vg-kopf .vg-mega .vg-mega-gruppe > .wp-block-navigation__submenu-container {
	position: static !important; visibility: visible !important; opacity: 1 !important; width: auto !important; height: auto !important;
	min-width: 0 !important; border: 0 !important; padding: 0 !important; background: none !important; display: flex !important; flex-direction: column;
}
.vg-kopf .vg-mega .vg-mega-gruppe > .wp-block-navigation__submenu-container .wp-block-navigation-item__content { color: var(--vg-sek); padding: 3px 0 !important; white-space: normal; }
.vg-kopf .vg-mega .vg-mega-gruppe > .wp-block-navigation__submenu-container a:hover { color: var(--vg-akzent); }

.vg-kopf-rechts { align-items: center; }
.vg-warenkorb .wc-block-mini-cart__button { padding: 10px 0; color: var(--vg-text); font-family: var(--vg-sans); }
.vg-warenkorb .wc-block-mini-cart__badge { background: var(--vg-text); color: var(--vg-creme); font-size: 10px; }

/* Mobile Menü */
.wp-block-navigation__responsive-container.is-menu-open { background: var(--vg-creme) !important; padding: 24px var(--vg-rand) !important; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container { border: 0 !important; padding: 4px 0 8px 12px !important; }
@media (max-width: 899px) {
	.vg-kopf .vg-mega > .wp-block-navigation__submenu-container { grid-template-columns: repeat(2, minmax(140px, 1fr)); right: -60px; }
}

/* ---------- Blöcke mit Randwort ---------- */
.vg-block-mit-randwort { display: flex; gap: 32px; }
.vg-randwort { flex: 0 0 auto; writing-mode: vertical-rl; text-orientation: upright; letter-spacing: 0.24em; font-family: var(--vg-sans); font-size: 12px; text-transform: uppercase; color: var(--vg-meta); margin: 0 !important; }
.vg-block-inhalt { flex: 1 1 auto; min-width: 0; margin: 0 !important; }
.vg-blockkopf { margin-bottom: 32px; }
.vg-blockkopf h2 { margin: 0; }
@media (max-width: 700px) { .vg-randwort { display: none; } }

/* ---------- Projektraster nach Norm ---------- */
.vg-projektraster .wp-block-post-template.is-layout-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 72px 28px; }
.vg-projektraster .wp-block-post-template > li:nth-child(6n+1),
.vg-projektraster .wp-block-post-template > li:nth-child(6n+6) { grid-column: span 2; }
.vg-projektraster.vg-weitere .wp-block-post-template.is-layout-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.vg-projektraster.vg-weitere .wp-block-post-template > li { grid-column: auto !important; }
.vg-projektraster .wp-block-post-featured-image { margin: 0 0 26px; }
.vg-projektraster .wp-block-post-featured-image img { width: 100%; height: 100%; object-fit: cover; }
.vg-karte-titel { font-size: 14px !important; line-height: 1.5; letter-spacing: 0.32em; text-transform: uppercase; margin: 0 !important; font-weight: 400; }
.vg-karte-titel a { color: inherit; }
.vg-karte-text { font-family: var(--vg-sans); font-size: 13px; line-height: 1.85; margin: 14px 0 0 !important; }
.vg-karte-text .wp-block-post-excerpt__more-text { display: none; }
.vg-karte-text p { margin: 0; }
.vg-infozeile { font-family: var(--vg-sans); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--vg-sek); margin: 16px 0 0 !important; white-space: pre-wrap; }
@media (max-width: 1023px) {
	.vg-projektraster .wp-block-post-template.is-layout-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.vg-projektraster .wp-block-post-template > li:nth-child(6n+6) { grid-column: auto; }
}
@media (max-width: 640px) {
	.vg-projektraster .wp-block-post-template.is-layout-grid,
	.vg-projektraster.vg-weitere .wp-block-post-template.is-layout-grid { grid-template-columns: minmax(0, 1fr); gap: 48px; }
	.vg-projektraster .wp-block-post-template > li { grid-column: auto !important; }
}

/* ---------- Filter ---------- */
.vg-seitenkopf { gap: 24px 64px; margin-bottom: 40px; }
.vg-seitenkopf h1 { margin: 0; }
.vg-filter { display: flex; flex-wrap: wrap; gap: 12px 8px; }
.vg-chip { position: relative; display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px; border: 1px solid var(--vg-linie); font-family: var(--vg-sans); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--vg-meta); }
.vg-chip:hover { color: var(--vg-text); border-color: var(--vg-meta); }
.vg-chip.ist-aktiv { border-color: var(--vg-text); color: var(--vg-text); }
.vg-chip::after, .vg-unterfilter a::after { content: ""; position: absolute; left: 50%; top: 50%; width: max(100%, 44px); height: max(100%, 44px); transform: translate(-50%, -50%); }
.vg-unterfilter { display: flex; flex-wrap: wrap; gap: 6px 24px; margin-top: 20px; }
.vg-unterfilter a { position: relative; font-family: var(--vg-sans); font-size: 13px; color: var(--vg-meta); padding: 4px 0; border-bottom: 1px solid transparent; }
.vg-unterfilter a.ist-aktiv { color: var(--vg-text); border-bottom-color: var(--vg-text); }
.vg-shopfilter, .vg-projektfilter { margin: 0; }
.vg-shop .vg-filter { padding-bottom: 20px; }
.vg-shop-leiste { margin: 32px 0 28px; padding-top: 16px; border-top: 1px solid var(--vg-linie); font-family: var(--vg-sans); font-size: 13px; color: var(--vg-sek); }
.vg-shop-leiste select { font-family: var(--vg-sans); font-size: 13px; min-height: 40px; padding: 0 10px; border: 1px solid var(--vg-linie); background: transparent; color: var(--vg-text); }

/* ---------- Projektdetail ---------- */
.vg-projekt-hero .wp-block-cover__background { background: linear-gradient(to top, rgba(30, 28, 26, 0.62), rgba(30, 28, 26, 0) 55%) !important; opacity: 1 !important; }
.vg-projekt-hero h1, .vg-projekt-hero .wp-block-post-title { margin-bottom: 12px; color: var(--vg-creme) !important; text-align: center; }
.vg-projekt-hero .wp-block-cover__inner-container { padding-bottom: clamp(16px, 3vw, 40px); }
.vg-intro { font-family: var(--vg-sans); font-size: 12px; line-height: 1.55; color: var(--vg-creme); max-width: 820px; margin: 0 auto !important; text-align: center; }
.vg-zurueck { font-family: var(--vg-sans); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; }
.vg-zurueck a { color: var(--vg-sek); }
.vg-projektdaten { display: grid; gap: 20px; margin: 0; }
.vg-projektdaten dt { font-family: var(--vg-sans); font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; }
.vg-projektdaten dd { margin: 4px 0 0; font-size: 13px; line-height: 1.35; }
.vg-blocksatz p, .vg-projekt-spalten .wp-block-post-content > p { text-align: justify; hyphens: auto; -webkit-hyphens: auto; line-height: 1.55; margin: 0; }
.vg-blocksatz p + p, .vg-projekt-spalten .wp-block-post-content > p + p { text-indent: 2.4em; margin-top: 1em; }
.vg-projekt-spalten figcaption, .vg-hochformat figcaption { font-family: var(--vg-sans); font-size: 12px; line-height: 1.55; margin-top: 14px; text-align: left; }
.vg-bildstrecke img { object-fit: cover; }

/* ---------- Seiten ---------- */
.vg-seite h1 { margin-bottom: 32px; }

/* ---------- Shop / WooCommerce ---------- */
.vg-produktraster .wc-block-product-template, .vg-produktraster .wp-block-post-template { gap: 48px 24px !important; }
.vg-produktraster .wc-block-product-template__responsive.columns-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.vg-produktraster .wc-block-product-template__responsive.columns-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .vg-produktraster .wc-block-product-template__responsive[class*="columns-"] { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 16px !important; } }
.vg-produktraster .wc-block-components-product-image { margin: 0 0 10px !important; }
.vg-produktraster .wc-block-components-product-image img { aspect-ratio: 4 / 5; object-fit: cover; }
.vg-marke { font-family: var(--vg-sans); font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--vg-sek); margin: 6px 0 0 !important; }
.vg-marke a { color: inherit; }
.vg-produkt-titel { font-size: 14px !important; font-weight: 400; line-height: 1.3; margin: 4px 0 0 !important; text-align: left !important; }
.vg-produkt-titel a { color: inherit; }
.vg-preiszeile { gap: 10px; align-items: baseline; margin-top: 4px !important; }
.vg-preis, .vg-produktraster .wc-block-components-product-price { font-size: 13px !important; color: #4A453F; text-align: left !important; margin: 0 !important; }
.vg-aktion .wc-block-components-product-sale-badge { border: 0; background: none; padding: 0; color: var(--wp--preset--color--hinweis); font-family: var(--vg-sans); font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; position: static; }
.vg-warenkorb-knopf { margin-top: 10px !important; text-align: left !important; }
.vg-warenkorb-knopf .wp-block-button__link, .vg-warenkorb-knopf .wc-block-components-product-button__button {
	background: transparent !important; color: var(--vg-text) !important; border: 1px solid var(--vg-linie) !important;
	font-size: 11px !important; letter-spacing: 0.12em; padding: 10px 14px !important; min-height: 0; width: auto !important;
}
.vg-warenkorb-knopf .wp-block-button__link:hover { border-color: var(--vg-text) !important; }

.wc-block-breadcrumbs, .woocommerce-breadcrumb, .vg-brotkrumen { font-family: var(--vg-sans); font-size: 12px; color: var(--vg-sek); }
.vg-trenner { margin: 0 8px; }
.vg-kaufspalte { max-width: 460px; }
.vg-kaufspalte h1 { margin: 0; }
.vg-preis-gross { font-size: 15px !important; margin-top: 6px !important; }
.vg-hinweis-mwst { font-family: var(--vg-sans); font-size: 11px; color: var(--vg-meta); margin-top: 0 !important; }
.vg-kurzbeschrieb { font-size: 13px; line-height: 1.6; color: #4A453F; }
.vg-beratung a { font-family: var(--vg-sans); font-size: 12px; color: var(--vg-sek); border-bottom: 1px solid var(--vg-linie); padding-bottom: 2px; }
.vg-kaufspalte table.variations { border: 0; margin: 0 0 12px; }
.vg-kaufspalte table.variations th, .vg-kaufspalte table.variations td { border: 0; padding: 4px 0; text-align: left; display: block; }
.vg-kaufspalte table.variations label { font-family: var(--vg-sans); font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--vg-sek); }
.vg-kaufspalte select, .vg-kaufspalte input.qty {
	font-family: var(--vg-sans); font-size: 13px; min-height: 40px; border: 1px solid var(--vg-linie); background: transparent; color: var(--vg-text); border-radius: 0; padding: 0 10px;
}
.vg-kaufspalte .quantity { margin-right: 8px; }
.vg-kaufspalte .single_add_to_cart_button { min-height: 40px; }
.vg-details { margin-top: clamp(48px, 6vw, 96px) !important; border-top: 1px solid var(--vg-linie); }
.vg-details .wc-tabs { padding: 0 !important; margin: 0 0 20px !important; border: 0 !important; display: flex; gap: 24px; }
.vg-details .wc-tabs li { border: 0 !important; background: none !important; margin: 0 !important; padding: 0 !important; }
.vg-details .wc-tabs li a { font-family: var(--vg-sans); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--vg-meta); padding: 16px 0 !important; display: inline-block; }
.vg-details .wc-tabs li.active a { color: var(--vg-text); border-bottom: 1px solid var(--vg-text); }
.vg-details .woocommerce-Tabs-panel { font-size: 14px; line-height: 1.6; }
.vg-details .woocommerce-Tabs-panel h2 { display: none; }
.wc-block-components-button:not(.is-link), .wp-element-button { border-radius: 0; }

/* ---------- Service ---------- */
.vg-service h3 { margin: 6px 0 0; }

/* ---------- Fusszeile ---------- */
.vg-fuss { padding: clamp(72px, 9vw, 140px) var(--vg-rand) 32px !important; font-family: var(--vg-sans); color: var(--vg-text); }
.vg-fuss-oben { gap: 48px 64px; }
.vg-fuss-logo { display: inline-flex; align-items: center; gap: 16px; color: var(--vg-dunkel); }
.vg-fuss-logo span { font-size: 19px; letter-spacing: 0.22em; text-transform: uppercase; }
.vg-fuss-spalten { gap: 40px clamp(28px, 4vw, 64px) !important; }
.vg-fuss-spalte { gap: 0 !important; min-width: 150px; }
.vg-fuss-titel { font-size: 13px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--vg-dunkel); margin: 0 0 12px !important; }
.vg-linkliste { list-style: none; padding: 0; margin: 0 !important; font-size: 14px; letter-spacing: 0.03em; }
.vg-linkliste li { margin: 0 0 6px; }
.vg-linkliste a, .vg-fuss-unten a { color: var(--vg-sek); }
.vg-linkliste a:hover, .vg-fuss-unten a:hover { color: var(--vg-akzent); }
.vg-fuss-unten { margin-top: clamp(80px, 10vw, 160px) !important; font-size: 13px; color: var(--vg-sek); gap: 8px 28px; }
.vg-fuss-unten p { margin: 0; }

/* ---------- Zugänglichkeit ---------- */
:focus-visible { outline: 2px solid var(--vg-akzent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* ---------- Produktdetail: Feinschliff ---------- */
.woocommerce div.product .vg-kauf div.images, .vg-kauf .woocommerce-product-gallery { width: 100% !important; float: none !important; margin: 0 !important; }
.woocommerce-product-gallery__trigger { background: var(--vg-creme) !important; border-radius: 0 !important; }
.woocommerce-product-gallery .flex-control-thumbs { display: grid !important; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-top: 8px !important; }
.woocommerce-product-gallery .flex-control-thumbs li { width: auto !important; float: none !important; }
.vg-details .wc-tabs::before, .vg-details .wc-tabs li::before, .vg-details .wc-tabs li::after { display: none !important; }
.vg-details .woocommerce-tabs { padding-bottom: clamp(48px, 6vw, 96px); }
.wc-block-components-product-sale-badge, .woocommerce span.onsale {
	position: static !important; display: inline-block; border: 0 !important; background: none !important; padding: 0 !important; min-height: 0 !important; min-width: 0 !important; line-height: 1.4 !important;
	color: var(--wp--preset--color--hinweis) !important; font-family: var(--vg-sans); font-size: 11px !important; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; border-radius: 0 !important; margin: 0 !important;
}
.wc-block-components-product-image .wc-block-components-product-sale-badge { position: absolute !important; top: 10px !important; right: auto !important; left: 10px; background: var(--vg-creme) !important; padding: 3px 8px !important; }

/* ---------- Smartphone ---------- */
@media (max-width: 781px) {
	/* Kopf: Logo links, Konto · Shop · Warenkorb, Menü ganz rechts */
	.vg-kopf { padding: 16px var(--vg-rand) !important; gap: 16px; }
	.vg-kopf .vg-hauptnav { order: 3; flex: 0 0 auto; }
	.vg-kopf .vg-kopf-rechts { order: 2; margin-left: auto; gap: 18px !important; }
	.vg-kopf .vg-shopnav { font-size: 12px; letter-spacing: 0.14em; }
	.vg-kopf .vg-shopnav .vg-mega > .wp-block-navigation__submenu-container { display: none !important; }
	.vg-kopf .wp-block-navigation__responsive-container-open { padding: 10px 0 10px 6px; }

	/* Offenes Menü: grosszügig, Unterpunkte als ruhige Liste */
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content { padding-top: 56px; align-items: flex-start !important; }
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { gap: 22px !important; align-items: flex-start !important; }
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item { align-items: flex-start !important; }
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container { font-size: 15px; letter-spacing: 0.02em; text-transform: none; gap: 6px !important; padding-top: 10px !important; min-width: 0 !important; }

	/* Filter als wischbare Zeile statt sechs Reihen Chips */
	.vg-filter, .vg-unterfilter { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-right: calc(-1 * var(--vg-rand)); padding-right: var(--vg-rand); -webkit-overflow-scrolling: touch; }
	.vg-filter::-webkit-scrollbar, .vg-unterfilter::-webkit-scrollbar { display: none; }
	.vg-chip, .vg-unterfilter a { flex: 0 0 auto; white-space: nowrap; }
	.vg-chip::after, .vg-unterfilter a::after { display: none; }
	.vg-chip { min-height: 40px; }
	.vg-unterfilter a { padding: 10px 0; }
	.vg-seitenkopf { margin-bottom: 24px; }

	/* Projektseite */
	.vg-projekt-hero { min-height: 62vh !important; }
	.vg-projekt-spalten { padding-top: 24px !important; }
	.vg-projektdaten { grid-template-columns: 1fr 1fr; gap: 16px 20px; margin-bottom: 8px; }
	.vg-bildstrecke.wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image) { width: 100% !important; }
	.vg-blocksatz p, .vg-projekt-spalten .wp-block-post-content > p { text-align: left; }

	/* Produkte immer zweispaltig, auch «Passt dazu» */
	.wc-block-product-template__responsive[class*="columns-"], .vg-produktraster .wp-block-post-template.is-layout-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 36px 16px !important; }
	.woocommerce ul.products { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 16px; }
	.woocommerce ul.products li.product { width: auto !important; margin: 0 !important; float: none !important; }
	.vg-warenkorb-knopf .wp-block-button__link, .vg-warenkorb-knopf .wc-block-components-product-button__button { padding: 12px 10px !important; width: 100% !important; justify-content: center; }
	.vg-kaufspalte { max-width: none; }
	.vg-kaufspalte form.cart { display: flex; gap: 8px; }
	.vg-kaufspalte .single_add_to_cart_button { flex: 1; min-height: 48px; }
	.vg-kaufspalte input.qty { min-height: 48px; }

	/* Fusszeile */
	.vg-fuss-unten { flex-direction: column; align-items: flex-start !important; }
	.vg-linkliste li { margin-bottom: 10px; }
}

/* ---------- Startseite: bildschirmfüllender Bildwechsel ---------- */
.vg-slider { position: relative; height: 100vh; height: 100svh; min-height: 520px; overflow: hidden; background: var(--vg-dunkel); color: var(--vg-creme); margin: 0 !important; max-width: none !important; }
.vg-folien { position: absolute; inset: 0; }
.vg-folie { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity 1.1s ease, visibility 0s linear 1.1s; }
.vg-folie.ist-aktiv { opacity: 1; visibility: visible; transition: opacity 1.1s ease, visibility 0s; z-index: 1; }
.vg-folie-bild { position: absolute; inset: 0; width: 100% !important; height: 100% !important; object-fit: cover; }
.vg-folie::before, .vg-folie::after { content: ""; position: absolute; left: 0; right: 0; z-index: 1; pointer-events: none; }
.vg-folie::before { top: 0; height: 180px; background: linear-gradient(to bottom, rgba(20, 18, 16, 0.42), rgba(20, 18, 16, 0)); }
.vg-folie::after { bottom: 0; height: 46%; background: linear-gradient(to top, rgba(20, 18, 16, 0.55), rgba(20, 18, 16, 0)); }
.vg-folie-text { position: absolute; z-index: 2; left: 50%; bottom: 96px; transform: translateX(-50%); width: min(780px, calc(100% - 2 * var(--vg-rand))); text-align: center; color: var(--vg-creme) !important; text-decoration: none; }
.vg-folie-titel { display: block; font-family: var(--vg-serif); font-size: 17px; letter-spacing: 0.42em; text-transform: uppercase; margin-bottom: 18px; padding-left: 0.42em; }
.vg-folie-intro { display: block; font-family: var(--vg-sans); font-size: 14px; line-height: 1.7; font-weight: 500; }
.vg-folie-text:hover .vg-folie-titel { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; }
.vg-pfeil { position: absolute; z-index: 3; top: 50%; transform: translateY(-50%); width: 64px; height: 96px; display: grid; place-items: center; background: none; border: 0; padding: 0; color: var(--vg-creme); cursor: pointer; opacity: 0.75; transition: opacity 0.2s; }
.vg-pfeil:hover, .vg-pfeil:focus-visible { opacity: 1; }
.vg-pfeil svg { width: 18px; height: 36px; }
.vg-pfeil-zurueck { left: calc(var(--vg-rand) - 20px); }
.vg-pfeil-weiter { right: calc(var(--vg-rand) - 20px); }
.vg-pfeil-weiter svg { transform: scaleX(-1); }
.vg-punkte { position: absolute; z-index: 3; left: 0; right: 0; bottom: 36px; display: flex; justify-content: center; gap: 2px; }
.vg-punkt { width: 22px; height: 22px; border: 0; padding: 0; background: none; cursor: pointer; position: relative; }
.vg-punkt::before { content: ""; position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: var(--vg-creme); opacity: 0.4; transition: opacity 0.2s; }
.vg-punkt.ist-aktiv::before, .vg-punkt:hover::before { opacity: 1; }

/* Kopf liegt auf der Startseite transparent über dem Bild */
.vg-startseite .wp-site-blocks > header:first-child, .vg-startseite .wp-site-blocks > div:first-child { position: absolute; top: 0; left: 0; right: 0; z-index: 50; }
.vg-startseite .vg-kopf { background: transparent !important; color: var(--vg-creme); }
.vg-startseite .vg-kopf .vg-logo,
.vg-startseite .vg-kopf .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content,
.vg-startseite .vg-kopf .wp-block-navigation__responsive-container-open,
.vg-startseite .vg-kopf .wc-block-mini-cart__button { color: var(--vg-creme) !important; }
.vg-startseite .vg-kopf .wc-block-mini-cart__badge { background: var(--vg-creme); color: var(--vg-text); }
.vg-startseite .vg-kopf .wp-block-navigation__submenu-container a,
.vg-startseite .wp-block-navigation__responsive-container.is-menu-open,
.vg-startseite .wp-block-navigation__responsive-container.is-menu-open a,
.vg-startseite .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close { color: var(--vg-text) !important; }

@media (max-width: 781px) {
	.vg-pfeil { display: none; }
	.vg-folie-text { bottom: 72px; }
	.vg-folie-titel { font-size: 14px; letter-spacing: 0.32em; margin-bottom: 12px; }
	.vg-folie-intro { font-size: 13px; }
	.vg-punkte { bottom: 22px; }
}
@media (prefers-reduced-motion: reduce) { .vg-folie, .vg-folie.ist-aktiv { transition: none; } }
.vg-main > .vg-slider.alignfull { width: auto; margin-left: calc(-1 * var(--wp--style--root--padding-left, 0px)) !important; margin-right: calc(-1 * var(--wp--style--root--padding-right, 0px)) !important; max-width: none !important; }
.vg-kopf .vg-mega > .wp-block-navigation__submenu-container { align-items: start; }
.vg-kopf .vg-mega .vg-mega-gruppe { display: flex !important; justify-content: flex-start !important; align-self: start; height: auto !important; }
.vg-kopf .vg-mega .vg-mega-gruppe > .wp-block-navigation__submenu-container { margin: 0 !important; top: auto !important; left: auto !important; justify-content: flex-start !important; }
.vg-pfeil { opacity: 0.9; }
.vg-pfeil svg { filter: drop-shadow(0 0 6px rgba(0, 0, 0, 0.35)); }

/* ---------- 1.1.1: Kopf Startseite auf gleicher Höhe (auch mit Admin-Leiste) ---------- */
.vg-startseite .wp-site-blocks > header:first-child, .vg-startseite .wp-site-blocks > div:first-child { top: var(--wp-admin--admin-bar--height, 0px); }
.vg-startseite .vg-slider { margin-top: 0 !important; }

/* ---------- 1.1.1: Fusszeile kleiner, Hauptgruppen links bündig mit dem Kopf ---------- */
.vg-fuss > *, .vg-fuss-oben, .vg-fuss-unten { max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; }
.vg-fuss-oben { flex-direction: column; align-items: flex-start !important; gap: 40px !important; }
.vg-fuss-logo span { font-size: 15px; letter-spacing: 0.22em; }
.vg-fuss-spalten { justify-content: flex-start !important; gap: 32px clamp(32px, 4.5vw, 72px) !important; }
.vg-fuss-spalte { min-width: 0; }
.vg-fuss-titel { font-size: 11px; letter-spacing: 0.16em; margin-bottom: 10px !important; }
.vg-linkliste { font-size: 12px; letter-spacing: 0.03em; }
.vg-linkliste li { margin-bottom: 4px; }
.vg-fuss-unten { font-size: 12px; }
@media (max-width: 781px) {
	.vg-fuss-spalten { display: grid !important; grid-template-columns: 1fr 1fr; }
	.vg-linkliste li { margin-bottom: 8px; }
}

/* ---------- 1.2.0: Suche ---------- */
.vg-suche-knopf { background: none; border: 0; padding: 0; width: 44px; height: 44px; display: grid; place-items: center; color: inherit; cursor: pointer; margin-right: -12px; }
.vg-startseite .vg-kopf .vg-suche-knopf { color: var(--vg-creme); }
.vg-suche { position: absolute; left: 0; right: 0; top: 100%; background: var(--vg-creme); border-top: 1px solid var(--vg-linie); border-bottom: 1px solid var(--vg-linie); padding: 28px var(--vg-rand); z-index: 70; color: var(--vg-text); }
.vg-suche[hidden] { display: none; }
.vg-suche-form { display: flex; align-items: center; gap: 16px; max-width: 920px; margin: 0 auto; }
.vg-suche-form input[type="search"] { flex: 1; min-width: 0; border: 0; border-bottom: 1px solid var(--vg-text); background: transparent; font-family: var(--vg-serif); font-size: 23px; padding: 10px 0; color: var(--vg-text); border-radius: 0; outline-offset: 4px; }
.vg-suche-form input[type="search"]::placeholder { color: var(--vg-meta); }
.vg-suche-los { font-family: var(--vg-sans); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; background: var(--vg-text); color: var(--vg-creme); border: 0; padding: 0 20px; min-height: 44px; cursor: pointer; }
.vg-suche-zu { background: none; border: 0; width: 44px; height: 44px; display: grid; place-items: center; color: var(--vg-text); cursor: pointer; }
.vg-kopf { position: relative; }

/* Suchfelder (Shop und Ergebnisseite) */
.vg-shop-werkzeuge { gap: 12px; align-items: center; }
.vg-shopsuche, .vg-seitensuche { margin: 0; }
.vg-shopsuche .wp-block-search__inside-wrapper, .vg-seitensuche .wp-block-search__inside-wrapper { border: 1px solid var(--vg-linie) !important; padding: 0 !important; background: transparent; }
.vg-shopsuche input, .vg-seitensuche input { border: 0 !important; background: transparent; font-family: var(--vg-sans); font-size: 13px; min-height: 40px; padding: 0 12px !important; color: var(--vg-text); }
.vg-shopsuche { width: 240px; }
.vg-shopsuche .wp-block-search__button, .vg-seitensuche .wp-block-search__button { background: transparent !important; color: var(--vg-text) !important; border: 0 !important; padding: 0 12px !important; margin: 0 !important; min-height: 40px; }
.vg-shopsuche .wp-block-search__button svg, .vg-seitensuche .wp-block-search__button svg { width: 18px; height: 18px; fill: currentColor; }

/* Ergebnisseite */
.vg-suchseite h1 { margin: 6px 0 24px; }
.vg-seitensuche { max-width: 520px; margin-bottom: 56px; }
.vg-seitensuche input { font-size: 14px; min-height: 44px; }
.vg-suchtreffer .wp-block-post-template.is-layout-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 56px 24px; }
.vg-suchtreffer .wp-block-post-featured-image { margin: 0 0 14px; }
.vg-treffer-art { font-family: var(--vg-sans); font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--vg-akzent); margin: 0 0 6px !important; }
.vg-suchtreffer .vg-karte-titel { letter-spacing: 0.2em; }
.vg-suchtreffer .vg-karte-text { margin-top: 8px !important; }
.vg-suchtreffer .wp-block-query-pagination { margin-top: 56px; font-family: var(--vg-sans); font-size: 13px; }

@media (max-width: 781px) {
	.vg-suche { padding: 18px var(--vg-rand); }
	.vg-suche-form { gap: 8px; }
	.vg-suche-form input[type="search"] { font-size: 18px; }
	.vg-suche-los { display: none; }
	.vg-kopf .vg-suche-knopf { margin-right: -6px; }
	.vg-shop-leiste { flex-wrap: wrap; gap: 12px; }
	.vg-shop-werkzeuge { width: 100%; }
	.vg-shopsuche { flex: 1; width: auto; }
	.vg-suchtreffer .wp-block-post-template.is-layout-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 16px; }
}
.vg-suche-form input[type="search"]:focus { outline: none; border-bottom-width: 2px; padding-bottom: 9px; }
.vg-suche input[type="search"]::-webkit-search-cancel-button, .vg-shopsuche input::-webkit-search-cancel-button, .vg-seitensuche input::-webkit-search-cancel-button { -webkit-appearance: none; display: none; }
.vg-shopsuche input:focus, .vg-seitensuche input:focus { outline: none; }
.vg-shopsuche .wp-block-search__inside-wrapper:focus-within, .vg-seitensuche .wp-block-search__inside-wrapper:focus-within { border-color: var(--vg-text) !important; }
.vg-seitensuche { margin-left: 0 !important; margin-right: auto !important; }
@media (max-width: 781px) {
	.vg-shop-werkzeuge { flex-wrap: wrap !important; }
	.vg-shopsuche { flex: 1 1 100%; }
	.vg-shop-werkzeuge .wc-block-catalog-sorting, .vg-shop-werkzeuge .woocommerce-ordering { flex: 1 1 100%; margin: 0; }
	.vg-shop-werkzeuge select { width: 100%; }
}

/* ---------- 1.2.0: Suche fertig gestaltet ---------- */
.vg-suche-form input[type="search"]:focus { outline: none; border-bottom-width: 2px; padding-bottom: 9px; }
.vg-suche input[type="search"]::-webkit-search-cancel-button, .vg-shopsuche input::-webkit-search-cancel-button, .vg-seitensuche input::-webkit-search-cancel-button { -webkit-appearance: none; display: none; }
.vg-shopsuche input:focus, .vg-seitensuche input:focus { outline: none; }
.vg-shopsuche .wp-block-search__inside-wrapper:focus-within, .vg-seitensuche .wp-block-search__inside-wrapper:focus-within { border-color: var(--vg-text) !important; }
.vg-seitensuche { margin-left: 0 !important; margin-right: auto !important; }
@media (max-width: 781px) {
	.vg-shop-werkzeuge { flex-wrap: wrap !important; }
	.vg-shopsuche { flex: 1 1 100%; }
	.vg-shop-werkzeuge .wc-block-catalog-sorting, .vg-shop-werkzeuge .woocommerce-ordering { flex: 1 1 100%; margin: 0; }
	.vg-shop-werkzeuge select { width: 100%; }
}

/* ---------- Konto-Symbol im Kopf ---------- */
.vg-konto-knopf { display: grid; place-items: center; width: 44px; height: 44px; margin: 0 -10px; color: inherit; }
.vg-konto-knopf:hover { color: var(--vg-akzent); }
.vg-startseite .vg-kopf .vg-konto-knopf { color: var(--vg-hell, var(--vg-creme)); }
.vg-warenkorb .wc-block-mini-cart__button svg { width: 19px; height: 19px; }

/* ---------- Kontaktblock Startseite (wie Projekte/Objekte) ---------- */
.vg-kontaktblock .vg-studio { gap: 0; }
.vg-kontaktblock .vg-studio .wp-block-media-text__content { padding: 0 0 0 clamp(24px, 5vw, 72px); }
.vg-kontaktblock .vg-studio h3 { margin-top: 0; }
@media (max-width: 600px) { .vg-kontaktblock .vg-studio .wp-block-media-text__content { padding: 24px 0 0; } }

/* ---------- Farbfelder (Plugin «Variation Swatches for WooCommerce») ---------- */
.vg-kaufspalte table.variations { margin-bottom: 8px; }
.vg-kaufspalte table.variations th.label, .vg-kaufspalte table.variations .label label { font-family: var(--vg-sans); font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--vg-sek); }
.vg-kaufspalte .woo-selected-variation-item-name { font-family: var(--vg-sans); font-size: 12px; font-weight: 500; letter-spacing: 0.02em; text-transform: none; color: var(--vg-text); }
.vg-kaufspalte table.variations td.value { padding-top: 8px !important; padding-bottom: 16px !important; }
.woo-variation-swatches .variable-items-wrapper { gap: 6px; margin: 0 !important; }
.woo-variation-swatches .variable-items-wrapper .variable-item:not(.radio-variable-item) {
	box-shadow: none !important; border: 1px solid var(--vg-linie) !important; border-radius: 0 !important; background: transparent !important; margin: 0 !important; min-width: 40px; min-height: 36px;
}
.woo-variation-swatches .variable-items-wrapper .button-variable-item .variable-item-span { font-family: var(--vg-sans); font-size: 12px; letter-spacing: 0.04em; color: var(--vg-text); padding: 0 10px; }
.woo-variation-swatches .variable-items-wrapper .variable-item:not(.radio-variable-item):hover { border-color: var(--vg-meta) !important; }
.woo-variation-swatches .variable-items-wrapper .variable-item:not(.radio-variable-item).selected { border-color: var(--vg-text) !important; box-shadow: inset 0 0 0 1px var(--vg-text) !important; }
.woo-variation-swatches .variable-items-wrapper .color-variable-item, .woo-variation-swatches .variable-items-wrapper .image-variable-item { width: 40px; height: 40px; padding: 3px !important; }
.woo-variation-swatches .variable-items-wrapper .color-variable-item .variable-item-span, .woo-variation-swatches .variable-items-wrapper .image-variable-item img { border-radius: 0 !important; }
.woo-variation-swatches .variable-items-wrapper .variable-item.disabled, .woo-variation-swatches .variable-items-wrapper .variable-item.disabled:hover { opacity: 0.35; }
.vg-kaufspalte .reset_variations { font-family: var(--vg-sans); font-size: 12px; color: var(--vg-meta); }
.vg-kaufspalte .woocommerce-variation-price .price { font-size: 15px; }

/* ---------- 1.4.1 Farbfelder: Abstände und Breite ---------- */
.vg-kaufspalte table.variations, .vg-kaufspalte table.variations tbody, .vg-kaufspalte table.variations tr { display: block; }
.vg-kaufspalte table.variations th.label { display: block; padding: 0 0 10px !important; line-height: 1.2 !important; }
.vg-kaufspalte table.variations td.value { display: block; padding: 0 0 18px !important; line-height: 1.2 !important; }
.vg-kaufspalte table.variations tr:last-child td.value { padding-bottom: 4px !important; }
.vg-kaufspalte .reset_variations { display: inline-block; margin-top: 10px; }
.vg-kaufspalte .reset_variations[style*="hidden"] { display: none !important; }
.woo-variation-swatches .variable-items-wrapper .variable-item.button-variable-item:not(.radio-variable-item) {
	width: auto !important; height: auto !important; min-width: 44px; min-height: 36px; padding: 0 !important; white-space: nowrap;
}
.woo-variation-swatches .variable-items-wrapper .button-variable-item .variable-item-contents { width: auto; }
.woo-variation-swatches .variable-items-wrapper .button-variable-item .variable-item-span { padding: 9px 12px !important; line-height: 1.2; white-space: nowrap; }
.vg-kaufspalte .single_variation_wrap { margin-top: 8px; }

/* Artikelnummer */
.vg-kaufspalte .wp-block-woocommerce-product-meta { margin-top: 4px; }
.vg-kaufspalte .wp-block-woocommerce-product-sku { font-family: var(--vg-sans); font-size: 12px; letter-spacing: 0.04em; color: var(--vg-meta); }
.vg-kaufspalte .wp-block-woocommerce-product-sku .wp-block-post-terms__prefix { margin-right: 6px; text-transform: uppercase; letter-spacing: 0.14em; font-size: 11px; }

/* Produktbeschreibung: Lesebreite und Zwischentitel */
.vg-details .woocommerce-Tabs-panel { max-width: 760px; }
.vg-details .woocommerce-Tabs-panel :is(h3, h4, h5, h6) {
	font-family: var(--vg-sans); font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--vg-text); margin: 2em 0 0.6em; line-height: 1.3;
}
.vg-details .woocommerce-Tabs-panel > :is(h3, h4, h5, h6):first-of-type { margin-top: 0.5em; }

/* ---------- 1.4.1 Marken: «Über die Marke», Markenseite, Partner & Hersteller ---------- */
.vg-ueber-marke { display: grid; grid-template-columns: 1fr; gap: clamp(24px, 4vw, 64px); align-items: center; border-top: 1px solid var(--vg-linie); padding: clamp(40px, 5vw, 72px) 0; margin: 0 auto !important; }
.vg-ueber-marke.hat-bild { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.vg-ueber-marke__bild { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--vg-flaeche); }
.vg-ueber-marke__bild img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s ease; }
.vg-ueber-marke__bild:hover img { transform: scale(1.03); }
.vg-ueber-marke__text { max-width: 560px; }
.vg-ueber-marke__text .vg-label { margin: 0 0 12px; }
.vg-ueber-marke__titel { font-size: clamp(26px, 2.4vw, 35px); margin: 0 0 16px; font-weight: 400; }
.vg-ueber-marke__text p { margin: 0 0 16px; }
.vg-ueber-marke .vg-mehr a, .vg-markenkachel__name { text-decoration: none; }
.vg-ueber-marke .vg-mehr a { font-family: var(--vg-sans); font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--vg-text); border-bottom: 1px solid currentColor; padding-bottom: 3px; }
.vg-ueber-marke .vg-mehr a:hover { color: var(--vg-akzent); }
@media (max-width: 781px) { .vg-ueber-marke.hat-bild { grid-template-columns: 1fr; } }

.vg-markenbild { margin: 0; width: 100%; }
.vg-markenbild img { width: 100%; max-height: 320px; object-fit: cover; display: block; }
.vg-markentext { max-width: 680px; }
.vg-markentext :is(h2, h3, h4, h5) { font-family: var(--vg-sans); font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; margin: 1.6em 0 0.5em; }

.vg-markenraster { width: min(var(--wp--style--global--wide-size, 1200px), calc(100vw - 2 * var(--vg-rand))); max-width: none !important; position: relative; left: 50%; transform: translateX(-50%); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(32px, 3vw, 48px) clamp(16px, 2vw, 32px); margin-top: clamp(40px, 5vw, 72px) !important; }
.vg-markenkachel { display: flex; flex-direction: column; gap: 6px; color: var(--vg-text); text-decoration: none; }
.vg-markenkachel__bild { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--vg-flaeche); margin-bottom: 10px; }
.vg-markenkachel__bild img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s ease; }
.vg-markenkachel:hover .vg-markenkachel__bild img { transform: scale(1.03); }
.vg-markenkachel__ersatz { text-align: center; padding: 0 12px; line-height: 1.2; display: flex; align-items: center; justify-content: center; height: 100%; font-size: clamp(19px, 1.6vw, 24px); color: var(--vg-sek); }
.vg-markenkachel__name { font-size: 20px; line-height: 1.25; }
.vg-markenkachel:hover .vg-markenkachel__name { color: var(--vg-akzent); }
.vg-markenkachel__anzahl { font-family: var(--vg-sans); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--vg-meta); }
.vg-markenkachel__text { font-size: 15px; line-height: 1.5; color: var(--vg-sek); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 1024px) { .vg-markenraster { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 700px) { .vg-markenraster { grid-template-columns: repeat(2, minmax(0, 1fr)); } .vg-markenkachel__text { display: none; } }
/* (2.7.3) alte Sonderregeln Partnerseite entfernt – Seite folgt der Textachse */

/* ---------- 1.4.2 Markentext mit Bildern ---------- */
.vg-markentext p { margin: 0 0 1em; }
.vg-markentext img { max-width: 100%; height: auto; display: block; margin: 1.6em 0; }
.vg-markentext .alignleft { float: left; margin: 0.4em 1.6em 1em 0; max-width: 50%; }
.vg-markentext .alignright { float: right; margin: 0.4em 0 1em 1.6em; max-width: 50%; }
.vg-markentext .aligncenter { margin-left: auto; margin-right: auto; }
.vg-markentext .wp-caption, .vg-markentext figure { max-width: 100%; margin: 1.6em 0; }
.vg-markentext .wp-caption-text, .vg-markentext figcaption { font-family: var(--vg-sans); font-size: 12px; color: var(--vg-meta); margin-top: 6px; }
.vg-markentext::after { content: ""; display: table; clear: both; }
.vg-markenkopf { flex-wrap: nowrap !important; align-items: flex-start !important; gap: clamp(32px, 5vw, 96px) !important; }
.vg-markenkopf > .wp-block-group { flex: 1 1 auto; min-width: 0; }
.vg-markenkopf > .vg-markenbild { flex: 0 0 clamp(240px, 30vw, 420px) !important; position: sticky; top: 120px; }
.vg-markenkopf > .vg-markenbild img { max-height: none; aspect-ratio: 4 / 5; }
@media (max-width: 781px) { .vg-markenkopf { flex-wrap: wrap !important; } .vg-markenkopf > .vg-markenbild { flex-basis: 100% !important; position: static; order: -1; } .vg-markenkopf > .vg-markenbild img { aspect-ratio: 16 / 10; } }

/* ---------- 1.4.3 Zurück-Link ---------- */
.vg-zurueck a { text-decoration: none; display: inline-flex; align-items: center; gap: 8px; transition: color .2s; }
.vg-zurueck a span { transition: transform .2s; }
.vg-zurueck a:hover { color: var(--vg-text); }
.vg-zurueck a:hover span { transform: translateX(-3px); }
.vg-navzeile { gap: 12px 24px !important; }
.vg-navzeile .vg-zurueck { margin: 0; padding-right: 24px; border-right: 1px solid var(--vg-linie); line-height: 1.2; }
.vg-navzeile .vg-brotkrumen { margin: 0 !important; }
.vg-markenkopf { margin-top: 20px !important; }
@media (max-width: 600px) { .vg-navzeile .vg-brotkrumen { display: none; } .vg-navzeile .vg-zurueck { border: 0; padding: 0; } }
.vg-navzeile > * { margin-block: 0 !important; line-height: 1.2 !important; }

/* ---------- 1.4.3 Marken-Porträts ---------- */
.vg-portraet-kopf .vg-label a { color: inherit; text-decoration: none; }
.vg-portraet-kopf .vg-label a:hover { color: var(--vg-text); }
.vg-portraet-hero { margin-bottom: clamp(40px, 5vw, 80px) !important; }
.vg-portraet-hero img { width: 100%; height: auto; max-height: 78vh; object-fit: cover; display: block; }
.vg-portraet-einleitung { line-height: 1.45 !important; margin-bottom: clamp(24px, 3vw, 40px) !important; }
.vg-portraet-haltung .wp-block-image, .vg-portraet-bildpaar .wp-block-image { margin: 0; }
.vg-portraet-haltung img, .vg-portraet-bildpaar img { width: 100%; height: auto; display: block; }
.vg-portraet-bildpaar img { aspect-ratio: 4 / 5; object-fit: cover; }
.vg-portraet-haltung h3 { font-size: clamp(24px, 2.2vw, 30px); font-weight: 400; margin: 12px 0 16px; }
.wp-block-pullquote.vg-portraet-zitat { border: 0; border-top: 1px solid var(--vg-linie); border-bottom: 1px solid var(--vg-linie); padding: clamp(32px, 4vw, 56px) 0; margin: clamp(40px, 5vw, 72px) auto !important; text-align: center; }
.vg-portraet-zitat blockquote p { font-family: var(--vg-serif); font-size: clamp(22px, 2vw, 28px) !important; line-height: 1.35; font-style: italic; color: var(--vg-text); }
.vg-portraet-zitat cite { display: block; margin-top: 18px; font-family: var(--vg-sans); font-size: 12px; font-style: normal; letter-spacing: 0.14em; text-transform: uppercase; color: var(--vg-meta); }
.vg-fakten { margin-top: clamp(40px, 5vw, 72px) !important; }
.vg-fakten .vg-label { margin-bottom: 12px !important; }
.vg-fakten p:not(.vg-label) { display: flex; gap: 24px; margin: 0 !important; padding: 12px 0; border-top: 1px solid var(--vg-linie); font-size: 17px; }
.vg-fakten p:not(.vg-label):last-child { border-bottom: 1px solid var(--vg-linie); }
.vg-fakten p strong { flex: 0 0 140px; font-family: var(--vg-sans); font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--vg-sek); padding-top: 4px; }

/* Objekte der Marke (auf Porträtseiten) */
.vg-marken-objekte { margin-top: clamp(64px, 8vw, 120px) !important; padding-top: clamp(40px, 5vw, 72px); border-top: 1px solid var(--vg-linie); }
.vg-marken-objekte__kopf { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 32px; margin-bottom: 32px; }
.vg-marken-objekte__kopf .vg-label { flex-basis: 100%; }
.vg-marken-objekte__titel { margin: 0; font-size: clamp(26px, 2.4vw, 35px); font-weight: 400; }
.vg-marken-objekte__raster { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px clamp(16px, 2vw, 32px); }
.vg-objekt { display: flex; flex-direction: column; gap: 4px; color: var(--vg-text); text-decoration: none; }
.vg-objekt__bild { display: block; aspect-ratio: 4 / 5; overflow: hidden; background: var(--vg-flaeche); margin-bottom: 12px; }
.vg-objekt__bild img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s ease; }
.vg-objekt:hover .vg-objekt__bild img { transform: scale(1.03); }
.vg-objekt__name { font-size: 18px; line-height: 1.3; }
.vg-objekt:hover .vg-objekt__name { color: var(--vg-akzent); }
.vg-objekt__preis { font-family: var(--vg-sans); font-size: 13px; color: var(--vg-sek); }
@media (max-width: 1024px) { .vg-marken-objekte__raster { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Markenseite mit Porträt */
.vg-hat-portraet .vg-markentext, .vg-hat-portraet .vg-markenbild { display: none !important; }
.vg-portraet-inhalt { margin-top: clamp(24px, 3vw, 48px) !important; margin-bottom: clamp(48px, 6vw, 96px) !important; }

/* ---------- 1.5.1 Porträts im Stil der Projektseiten ---------- */
.vg-portraet-label { font-family: var(--vg-sans); font-size: 11px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; margin: 0 0 10px !important; text-align: center; }
.vg-portraet-label a { color: var(--vg-creme); text-decoration: none; opacity: .85; }
.vg-portraet-label a:hover { opacity: 1; }
.vg-portraet .vg-projekt-hero:not(:has(.wp-block-cover__image-background)) { background: var(--vg-dunkel, #2e2b28); }
.vg-portraet .vg-projekt-spalten .wp-block-post-content > h3 { font-size: 14px; letter-spacing: 0.32em; text-transform: uppercase; font-weight: 400; margin: 2.6em 0 1.2em; }
.vg-portraet .vg-projekt-spalten .wp-block-post-content > h3 + p { text-indent: 0; }
.vg-portraet .vg-projekt-spalten .wp-block-post-content > p + h3 { margin-top: 2.6em; }
.vg-portraet .vg-projekt-spalten .wp-block-post-content > .wp-block-image { margin: 2.4em 0; }
.vg-portraet .vg-projekt-spalten .wp-block-post-content > .wp-block-image img { width: 100%; height: auto; }
.vg-portraet .vg-projekt-spalten .wp-block-post-content > .vg-portraet-zitat { margin: 3em 0 !important; }
.vg-portraet .vg-projekt-spalten .wp-block-post-content > .vg-portraet-bildpaar { margin: 2.4em 0 !important; }
.vg-portraet-designer-label { margin-top: 4em !important; padding-top: 2em; border-top: 1px solid var(--vg-linie); }
.vg-portraet .vg-projekt-spalten .wp-block-post-content > .vg-portraet-designer-label + h3 { margin-top: 1.2em; }
.vg-portraet .vg-marken-objekte { margin-top: 0 !important; padding-top: 0; border-top: 0; padding-bottom: var(--wp--preset--spacing--60); }
.vg-portraet .vg-marken-objekte .wp-block-separator { margin: 0 0 18px; }
.vg-portraet .vg-marken-objekte__kopf { align-items: baseline; margin-bottom: 28px; }
.vg-portraet .vg-marken-objekte__kopf .vg-label { flex-basis: auto; }
.vg-weitere-portraets { padding-bottom: var(--wp--preset--spacing--60); }
.vg-weitere-portraets .wp-block-separator { margin: 0 0 18px; }
.vg-weitere-portraets > .vg-label { margin-bottom: 28px !important; }
.vg-weitere-portraets__raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 72px 28px; }
.vg-weitere-portraets__karte { display: block; color: var(--vg-text); text-decoration: none; }
.vg-weitere-portraets__bild { display: block; height: clamp(220px, 22vw, 340px); overflow: hidden; background: var(--vg-flaeche); margin-bottom: 26px; }
.vg-weitere-portraets__bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vg-weitere-portraets__karte .vg-karte-titel { display: block; }
.vg-weitere-portraets__karte .vg-infozeile { display: block; text-transform: none; letter-spacing: 0.02em; }
@media (max-width: 781px) { .vg-weitere-portraets__raster { grid-template-columns: 1fr; gap: 48px; } }

/* ---------- 1.5.2 Shop-Menü: Spalte «Marken» ---------- */
.vg-kopf .vg-mega > .wp-block-navigation__submenu-container:has(.vg-mega-marken) { grid-template-columns: repeat(5, minmax(130px, 1fr)) minmax(150px, 1fr); width: min(1100px, 94vw) !important; }
.vg-kopf .vg-mega .vg-mega-marken { grid-column: -2 / -1; grid-row: 1 / span 3; padding-left: 28px; border-left: 1px solid var(--vg-linie); }
.vg-kopf .vg-mega .vg-mega-alle > .wp-block-navigation-item__content { color: var(--vg-text) !important; margin-top: 8px; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; }
@media (max-width: 899px) {
	.vg-kopf .vg-mega .vg-mega-marken { grid-column: auto; grid-row: auto; padding-left: 0; border-left: 0; }
}

/* ---------- 1.6.0 Claim über dem Projektnamen ---------- */
.vg-folie-claim { display: block; font-family: var(--vg-sans); font-size: 12px; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase; margin-bottom: 14px; padding-left: 0.24em; opacity: 0.9; }
.vg-projekt-claim { font-family: var(--vg-sans); font-size: 12px; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase; color: var(--vg-creme); margin: 0 0 10px !important; text-align: center; opacity: 0.9; }
@media (max-width: 600px) { .vg-folie-claim, .vg-projekt-claim { font-size: 11px; letter-spacing: 0.2em; margin-bottom: 10px; } }

/* ---------- 1.7.0 Galerien ---------- */
/* Produktseite: Pfeile und Vorschaubilder */
.woocommerce-product-gallery { position: relative; }
.woocommerce-product-gallery .flex-direction-nav { list-style: none; margin: 0; padding: 0; }
.woocommerce-product-gallery .flex-direction-nav a {
	position: absolute; top: 0; z-index: 3; width: 64px; height: var(--vg-galerie-hoehe, 70%); display: flex; align-items: center; justify-content: center;
	font-size: 0; color: var(--vg-text); text-decoration: none; opacity: 0; transition: opacity .25s;
}
.woocommerce-product-gallery .flex-viewport { position: relative; }
.woocommerce-product-gallery:hover .flex-direction-nav a { opacity: 1; }
.woocommerce-product-gallery .flex-direction-nav a::before { content: ""; width: 44px; height: 44px; border-radius: 50%; background: rgba(253, 252, 250, 0.9) center / 18px no-repeat; box-shadow: 0 1px 2px rgba(0,0,0,.06); }
.woocommerce-product-gallery .flex-direction-nav .flex-prev { left: 8px; }
.woocommerce-product-gallery .flex-direction-nav .flex-next { right: 8px; }
.woocommerce-product-gallery .flex-direction-nav .flex-prev::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15 5l-7 7 7 7' fill='none' stroke='%23383839' stroke-width='1.4'/%3E%3C/svg%3E"); }
.woocommerce-product-gallery .flex-direction-nav .flex-next::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 5l7 7-7 7' fill='none' stroke='%23383839' stroke-width='1.4'/%3E%3C/svg%3E"); }
.woocommerce-product-gallery .flex-direction-nav .flex-disabled { opacity: 0 !important; pointer-events: none; }
.woocommerce-product-gallery .flex-control-thumbs { display: flex !important; gap: 8px; overflow-x: auto; scrollbar-width: none; margin-top: 10px !important; padding: 0 !important; }
.woocommerce-product-gallery .flex-control-thumbs::-webkit-scrollbar { display: none; }
.woocommerce-product-gallery .flex-control-thumbs li { flex: 0 0 calc((100% - 5 * 8px) / 6); margin: 0 !important; }
.woocommerce-product-gallery .flex-control-thumbs img { aspect-ratio: 1; object-fit: cover; opacity: .55 !important; transition: opacity .2s; cursor: pointer; }
.woocommerce-product-gallery .flex-control-thumbs img.flex-active, .woocommerce-product-gallery .flex-control-thumbs img:hover { opacity: 1 !important; }
@media (hover: none) { .woocommerce-product-gallery .flex-direction-nav a { opacity: 1; } }

/* Produktkarten: Pfeile wie bei Zara Home */
[data-vg-bilder] { position: relative; }
.vg-karte-pfeil {
	position: absolute; top: 50%; z-index: 3; width: 36px; height: 36px; margin-top: -18px; padding: 0; border: 0; border-radius: 50%;
	background: rgba(253, 252, 250, 0.88); color: var(--vg-text); display: grid; place-items: center; cursor: pointer;
	opacity: 0; transition: opacity .2s, background .2s;
}
.vg-karte-pfeil svg { width: 16px; height: 16px; }
.vg-karte-pfeil--zurueck { left: 10px; }
.vg-karte-pfeil--weiter { right: 10px; }
.vg-karte-pfeil:hover { background: var(--vg-creme); }
[data-vg-bilder]:hover .vg-karte-pfeil, .vg-karte-pfeil:focus-visible { opacity: 1; }
.vg-karte-punkte { position: absolute; left: 0; right: 0; bottom: 10px; z-index: 3; display: flex; justify-content: center; gap: 5px; pointer-events: none; opacity: 0; transition: opacity .2s; }
.vg-karte-punkte i { width: 5px; height: 5px; border-radius: 50%; background: rgba(253, 252, 250, 0.6); box-shadow: 0 0 2px rgba(0,0,0,.25); }
.vg-karte-punkte i.ist-aktiv { background: var(--vg-creme); }
[data-vg-bilder]:hover .vg-karte-punkte { opacity: 1; }
@media (hover: none) { .vg-karte-pfeil { opacity: 0; pointer-events: none; } .vg-karte-punkte { opacity: 1; } }

/* Projekt- und Porträtgalerien */
.vg-galerie { margin: clamp(24px, 3vw, 40px) 0 clamp(40px, 5vw, 72px); }
.vg-galerie__buehne { position: relative; }
.vg-galerie__spur { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; outline: 0; }
.vg-galerie__spur::-webkit-scrollbar { display: none; }
.vg-galerie__bild { flex: 0 0 100%; scroll-snap-align: start; margin: 0 !important; height: clamp(300px, 62vh, 760px); display: flex; flex-direction: column; align-items: center; justify-content: center; }
.vg-galerie__bild img { width: 100% !important; height: 100% !important; object-fit: contain; display: block; }
.vg-galerie__bild figcaption { display: none; }
.vg-galerie__pfeil {
	position: absolute; top: 50%; z-index: 2; width: 48px; height: 48px; margin-top: -24px; border: 0; border-radius: 50%; padding: 0;
	background: rgba(253, 252, 250, 0.9); color: var(--vg-text); display: grid; place-items: center; cursor: pointer; transition: opacity .2s;
}
.vg-galerie__pfeil svg { width: 20px; height: 20px; }
.vg-galerie__pfeil--zurueck { left: 12px; }
.vg-galerie__pfeil--weiter { right: 12px; }
.vg-galerie__pfeil:disabled { opacity: 0; pointer-events: none; }
.vg-galerie__leiste { display: flex; justify-content: flex-end; margin-top: 10px; }
.vg-galerie__zaehler { font-family: var(--vg-sans); font-size: 12px; letter-spacing: 0.14em; color: var(--vg-sek); }
.vg-galerie__daumen { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin-top: 10px; padding-bottom: 2px; }
.vg-galerie__daumen::-webkit-scrollbar { display: none; }
.vg-galerie__daumen-knopf { flex: 0 0 auto; width: 88px; height: 64px; padding: 0; border: 0; background: var(--vg-flaeche); cursor: pointer; opacity: .5; transition: opacity .2s; outline-offset: 2px; }
.vg-galerie__daumen-knopf img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vg-galerie__daumen-knopf:hover, .vg-galerie__daumen-knopf.ist-aktiv { opacity: 1; }
.vg-galerie__daumen-knopf.ist-aktiv { box-shadow: inset 0 -2px 0 var(--vg-text); }
@media (max-width: 600px) { .vg-galerie__bild { height: 62vw; } .vg-galerie__pfeil { width: 38px; height: 38px; margin-top: -19px; } .vg-galerie__daumen-knopf { width: 64px; height: 48px; } }
.woocommerce-product-gallery .flex-direction-nav a:focus { outline: none; }
.woocommerce-product-gallery .flex-direction-nav a:focus-visible::before { outline: 1px solid var(--vg-text); outline-offset: 2px; }
.vg-kauf .wp-block-woocommerce-product-image-gallery, .vg-kauf .woocommerce-product-gallery { max-width: none !important; width: 100% !important; }

/* 1.7.1 Projektname über dem Claim */
.vg-folie-titel { margin-bottom: 14px; }
.vg-folie-claim { margin-bottom: 18px; }
.vg-projekt-hero .wp-block-post-title { margin-bottom: 10px !important; }
.vg-projekt-claim { margin: 0 auto 14px !important; }

/* ---------- 1.8.0 Kopfbereich mit feiner Linie (ausser Startseite über dem Bildwechsel) ---------- */
body:not(.vg-startseite) .vg-kopf { border-bottom: 1px solid var(--vg-linie); background: var(--vg-creme); }

/* ---------- 1.8.1 Favoriten oben im Shop ---------- */
.vg-favoriten { margin: clamp(8px, 1vw, 16px) 0 clamp(48px, 6vw, 88px); }
.vg-favoriten-kopf { margin-bottom: 24px; padding-bottom: 14px; border-bottom: 1px solid var(--vg-linie); }
.vg-favoriten-kopf h2 { margin: 0; font-weight: 400; }
.vg-alle-objekte { margin-top: clamp(48px, 6vw, 88px) !important; padding-top: 18px; border-top: 1px solid var(--vg-linie); }

/* ---------- 1.9.0 Kopfzeile ein-/ausblenden beim Scrollen ---------- */
.vg-kopf-fix .wp-site-blocks > header:first-child, .vg-kopf-fix .wp-site-blocks > div:first-child {
	position: fixed !important; top: var(--wp-admin--admin-bar--height, 0px) !important; left: 0; right: 0; z-index: 90; transform: translateY(0);
}
.vg-kopf-fix:not(.vg-startseite) .wp-site-blocks { padding-top: var(--vg-kopf-h, 0px); }
.vg-kopf-anim .wp-site-blocks > header:first-child, .vg-kopf-anim .wp-site-blocks > div:first-child { transition: transform .35s ease, box-shadow .35s ease; }
.vg-kopf-weg .wp-site-blocks > header:first-child, .vg-kopf-weg .wp-site-blocks > div:first-child { transform: translateY(calc(-100% - var(--wp-admin--admin-bar--height, 0px) - 2px)); }
.vg-kopf-fix .vg-kopf { background: var(--vg-creme) !important; border-bottom: 1px solid var(--vg-linie); }
/* Startseite: eingeblendete Kopfzeile hell mit dunkler Schrift */
.vg-startseite.vg-kopf-fix .vg-kopf { color: var(--vg-text); }
.vg-startseite.vg-kopf-fix .vg-kopf .vg-logo,
.vg-startseite.vg-kopf-fix .vg-kopf .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content,
.vg-startseite.vg-kopf-fix .vg-kopf .wp-block-navigation__responsive-container-open,
.vg-startseite.vg-kopf-fix .vg-kopf .wc-block-mini-cart__button,
.vg-startseite.vg-kopf-fix .vg-kopf .vg-suche-knopf,
.vg-startseite.vg-kopf-fix .vg-kopf .vg-konto-knopf { color: var(--vg-text) !important; }
.vg-startseite.vg-kopf-fix .vg-kopf .wc-block-mini-cart__badge { background: var(--vg-text); color: var(--vg-creme); }
@media (prefers-reduced-motion: reduce) { .vg-kopf-anim .wp-site-blocks > header:first-child, .vg-kopf-anim .wp-site-blocks > div:first-child { transition: none; } }
/* Produktbeschreibung: auch H1/H2 aus alten Texten als Zwischentitel (nur WooCommerce-Panel-Titel ausblenden) */
.vg-details .woocommerce-Tabs-panel h2 { display: block; }
.vg-details .woocommerce-Tabs-panel > h2:first-child { display: none; }
.vg-details .woocommerce-Tabs-panel :is(h1, h2):not(:first-child) {
	font-family: var(--vg-sans); font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--vg-text); margin: 2em 0 0.6em; line-height: 1.3;
}

/* ---------- 2.0.0 Cookie-Hinweis ---------- */
.vg-cookie {
	position: fixed; z-index: 120; left: 50%; bottom: 20px; transform: translateX(-50%); width: min(760px, calc(100% - 2 * var(--vg-rand)));
	display: flex; align-items: center; gap: 16px 28px; padding: 16px 20px 16px 24px; background: var(--vg-creme); color: var(--vg-text);
	border: 1px solid var(--vg-linie); box-shadow: 0 6px 24px rgba(30, 28, 26, 0.08); transition: opacity .3s, transform .3s;
}
.vg-cookie[hidden] { display: none; }
.vg-cookie.ist-weg { opacity: 0; transform: translate(-50%, 8px); }
.vg-cookie__text { margin: 0; font-family: var(--vg-sans); font-size: 13px; line-height: 1.5; flex: 1; }
.vg-cookie__text a { color: inherit; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.vg-cookie__ok { flex: 0 0 auto; font-family: var(--vg-sans); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; background: var(--vg-text); color: var(--vg-creme); border: 0; padding: 12px 20px; cursor: pointer; }
.vg-cookie__ok:hover { background: var(--vg-akzent); }
@media (max-width: 600px) { .vg-cookie { flex-direction: column; align-items: stretch; bottom: 12px; padding: 16px; } .vg-cookie__ok { width: 100%; } }
.vg-zurueck-seite { margin: 0 0 clamp(20px, 3vw, 36px) !important; }

/* ---------- 2.2.0/2.2.1 Startseite: Leitsatz über dem Bild; Projektangaben unten mittig wie bisher; weicher Verlauf unten ---------- */
.vg-folie, .vg-folie.ist-aktiv { transition-duration: .8s; }
.vg-slider-leitsatz {
	position: absolute; z-index: 2; left: 50%; top: 50%; transform: translate(-50%, -46%); width: min(920px, calc(100% - 2 * var(--vg-rand) - 120px));
	text-align: center; color: var(--vg-creme); pointer-events: none; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25), 0 2px 24px rgba(0, 0, 0, 0.35);
}
.vg-slider-leitsatz__titel { font-family: var(--vg-serif); font-weight: 400; font-size: clamp(38px, 5.4vw, 76px); line-height: 1.08; letter-spacing: -0.01em; margin: 0 0 22px; color: var(--vg-creme) !important; }
.vg-slider-leitsatz__text { font-family: var(--vg-serif); font-size: clamp(16px, 1.45vw, 21px); line-height: 1.5; margin: 0; }
@media (max-width: 781px) {
	.vg-slider-leitsatz { width: calc(100% - 2 * var(--vg-rand)); transform: translate(-50%, -50%); }
	.vg-slider-leitsatz__titel { margin-bottom: 14px; }
	.vg-umbruch { display: none; }
}
/* Leitsatz: kräftiger Schatten, Unterzeile in Figtree */
.vg-slider-leitsatz { text-shadow: 0 0 2px rgba(0, 0, 0, 0.35), 0 2px 30px rgba(0, 0, 0, 0.55), 0 0 60px rgba(0, 0, 0, 0.25); }
.vg-slider-leitsatz__text { font-family: var(--vg-sans); font-weight: 500; font-size: clamp(15px, 1.25vw, 19px); letter-spacing: 0.01em; }

/* ---------- 2.2.2 Startseite: einheitliche Abstände zwischen den Abschnitten ---------- */
.vg-startseite { --vg-abschnitt: clamp(72px, 8vw, 120px); }
.vg-startseite .vg-main > .vg-block-mit-randwort { margin-top: 0 !important; padding-top: var(--vg-abschnitt) !important; padding-bottom: 0 !important; }
.vg-startseite .vg-main > .vg-block-mit-randwort:last-child { padding-bottom: var(--vg-abschnitt) !important; }
.vg-startseite .vg-main { padding-bottom: 0 !important; }

/* ---------- 2.2.3 Normale Seiten: breite Blöcke (alignwide) möglich, Bilder ohne Rundung ---------- */
.vg-seite .wp-block-post-content > .alignwide { margin-top: var(--wp--preset--spacing--50); margin-bottom: var(--wp--preset--spacing--50); }
.vg-seite .wp-block-post-content > h3 { font-size: clamp(20px, 1.8vw, 24px); font-weight: 400; margin-top: 2em; }

/* 2.3.0 – Projektkarten mit Bildlauf (Pfeile wie Produktkarten) */
.wp-block-post-featured-image[data-vg-bilder] { overflow: hidden; }
.wp-block-post-featured-image[data-vg-bilder] img { transition: opacity .2s; }

/* 2.3.7 – Bildspalte passt sich der Höhe der Textspalte an (z. B. Kontakt: Spalte mit Klasse «vg-spalte-bild») */
.wp-block-columns:has(> .vg-spalte-bild) { align-items: stretch; }
.vg-spalte-bild { display: flex; flex-direction: column; }
.vg-spalte-bild > .wp-block-image { flex: 1 1 auto; margin: 0; min-height: 360px; position: relative; overflow: hidden; }
.vg-spalte-bild > .wp-block-image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 35%; }
@media (max-width: 781px) {
	.vg-spalte-bild > .wp-block-image { min-height: 0; aspect-ratio: 4 / 5; }
}

/* 2.3.8 – Einheitliches Schriftbild ausserhalb des Shops (Projekte, Kategorien, Porträts, Seiten, Rechtstexte).
   Shop-Seiten (body.woocommerce / .woocommerce-page) bleiben unverändert. */
body:not(.woocommerce):not(.woocommerce-page) .wp-block-post-content :is(h2, h3):not([class*="-font-size"]):not(.vg-karte-titel) {
	font-family: var(--wp--preset--font-family--caslon);
	font-size: var(--wp--preset--font-size--titel-s);
	line-height: 1.3; font-weight: 400; letter-spacing: normal; text-transform: none;
	margin: 2em 0 0.6em;
}
body:not(.woocommerce):not(.woocommerce-page) .wp-block-post-content :is(h4, h5, h6):not([class*="-font-size"]) {
	font-size: var(--wp--preset--font-size--text); line-height: 1.6; font-weight: 600; letter-spacing: normal; text-transform: none; margin: 1.6em 0 0.4em;
}
body:not(.woocommerce):not(.woocommerce-page) .wp-block-post-content :is(p, li):not([class*="-font-size"]):not(.vg-label):not(.vg-mehr):not(.vg-portraet-label):not(.vg-portraet-designer-label):not(blockquote *) {
	font-size: var(--wp--preset--font-size--text); line-height: 1.6;
}
body:not(.woocommerce):not(.woocommerce-page) .wp-block-post-content > :is(h2, h3):first-child { margin-top: 0; }

/* ==========================================================================
   2.4.0 – Neue Inhaltsstruktur (Seiten, Projekte, Porträts; Shop unverändert)
   - Eine Textachse: Text, Titel, Zitate beginnen auf derselben linken Kante
     (= Textkante der Projektseiten, rechts der Projektdaten).
   - Text schmal (620 px), linksbündig, kein Blocksatz.
   - Bilder breiter als der Text; einzelne Bilder höchstens 80 % der Fensterhöhe.
   - Zitate links auf der Achse mit feiner Linie.
   ========================================================================== */
:root { --vg-achse: 0px; --vg-textbreite: 620px; }
@media (min-width: 1000px) { :root { --vg-achse: calc(220px + clamp(40px, 6vw, 112px)); } }

/* Seiten: Titel und Inhalt auf die Achse */
.vg-seite.is-layout-constrained > .wp-block-post-title,
.vg-seite.is-layout-constrained > .vg-zurueck { max-width: var(--wp--style--global--wide-size) !important; box-sizing: border-box; }
.vg-seite.is-layout-constrained > .wp-block-post-title { padding-left: var(--vg-achse); }
.vg-seite .wp-block-post-content.is-layout-constrained > :not(.alignwide):not(.alignfull) {
	max-width: var(--vg-textbreite) !important; margin-left: var(--vg-achse) !important; margin-right: auto !important;
}
.vg-seite .wp-block-post-content.is-layout-constrained > .vg-portraet-einleitung { max-width: 760px !important; }
/* «Text + Bild»: von der Achse bis zum rechten Rand */
.vg-seite .wp-block-post-content.is-layout-constrained > .wp-block-columns.alignwide:not(.vg-portraet-bildpaar):not(.vg-bildpaar) {
	margin-left: var(--vg-achse) !important; max-width: calc(var(--wp--style--global--wide-size) - var(--vg-achse)) !important;
}

/* Kein Blocksatz mehr, normale Absätze */
.vg-blocksatz p, .vg-projekt-spalten .wp-block-post-content > p { text-align: left; hyphens: manual; -webkit-hyphens: manual; }
.vg-blocksatz p + p, .vg-projekt-spalten .wp-block-post-content > p + p { text-indent: 0; margin-top: 1em; }

/* Projekte und Porträts: Text schmal, Bilder über die ganze Inhaltsbreite */
.vg-projekt-spalten .wp-block-post-content > :is(p, h2, h3, h4, ul, ol, blockquote, .wp-block-pullquote, .wp-block-quote) { max-width: var(--vg-textbreite); }
.vg-projekt-spalten .wp-block-post-content > :is(h2, h3) { margin-top: 2.4em; }
.vg-projekt-spalten .wp-block-post-content > :is(.wp-block-image, .wp-block-gallery, .vg-galerie) { margin-top: 2.4em; margin-bottom: 2.4em; }

/* Einzelbilder: nie höher als 80 % des Fensters, linksbündig */
body:not(.woocommerce):not(.woocommerce-page) .wp-block-post-content .wp-block-image:not(.vg-galerie__bild):not(.vg-hochformat):not(.vg-portraet-hero):not(.vg-spalte-bild *):not(.vg-bildpaar *):not(.vg-portraet-bildpaar *) img {
	max-height: 80vh; width: auto; max-width: 100%; object-fit: contain;
}
body:not(.woocommerce):not(.woocommerce-page) .wp-block-post-content .wp-block-gallery.has-nested-images:not(.vg-galerie) figure.wp-block-image:only-child { flex-grow: 0; }

/* Zitate: links auf der Achse, feine Linie, ruhiger */
body:not(.woocommerce):not(.woocommerce-page) .wp-block-post-content :is(.wp-block-pullquote, .wp-block-quote) {
	border: 0 !important; border-left: 1px solid var(--vg-text) !important;
	padding: 4px 0 4px clamp(20px, 2.4vw, 32px) !important;
	margin-top: clamp(40px, 5vw, 64px) !important; margin-bottom: clamp(40px, 5vw, 64px) !important;
	text-align: left !important;
}
body:not(.woocommerce):not(.woocommerce-page) .wp-block-post-content .wp-block-pullquote blockquote { margin: 0; }
body:not(.woocommerce):not(.woocommerce-page) .wp-block-post-content :is(.wp-block-pullquote, .wp-block-quote) p {
	font-family: var(--vg-serif); font-size: clamp(19px, 1.6vw, 22px) !important; line-height: 1.45 !important; font-style: italic; color: var(--vg-text); margin: 0;
}
body:not(.woocommerce):not(.woocommerce-page) .wp-block-post-content :is(.wp-block-pullquote, .wp-block-quote) cite {
	display: block; margin-top: 14px; font-family: var(--vg-sans); font-size: 11px; font-style: normal; letter-spacing: 0.14em; text-transform: uppercase; color: var(--vg-meta);
}

/* Bildpaar: zwei Bilder gleich hoch */
.vg-bildpaar .wp-block-image { margin: 0; }
.vg-bildpaar img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block; }

@media (max-width: 999px) {
	.vg-seite .wp-block-post-content.is-layout-constrained > .wp-block-columns.alignwide { max-width: 100% !important; }
}
/* Bildwechsel in Projekten: Bild links auf der Kante statt mittig */
.vg-projekt-spalten .vg-galerie__bild { align-items: flex-start; }
.vg-projekt-spalten .vg-galerie__bild img { object-position: left center; }
body:not(.woocommerce):not(.woocommerce-page) .wp-block-post-content .wp-block-column > :is(h2, h3):first-child { margin-top: 0; }

/* 2.4.0 – Aufzählungen linksbündig auf der Textkante, mit Gedankenstrich */
body:not(.woocommerce):not(.woocommerce-page) .wp-block-post-content ul:not([class*="wp-block-post"]):not(.wp-block-social-links) { list-style: none; padding-left: 0; margin-left: 0; }
body:not(.woocommerce):not(.woocommerce-page) .wp-block-post-content ul:not([class*="wp-block-post"]):not(.wp-block-social-links) > li { position: relative; padding-left: 1.1em; }
body:not(.woocommerce):not(.woocommerce-page) .wp-block-post-content ul:not([class*="wp-block-post"]):not(.wp-block-social-links) > li::before { content: "–"; position: absolute; left: 0; font-style: normal; }

/* ==========================================================================
   2.4.1 – Niedrigere, einheitliche Bildhöhen (ausser Shop und Startseite)
   --vg-gross: Grossbild oben (Projekte, Porträts, Seiten)
   --vg-bild:  Bilder im Inhalt (Einzelbild, Bildwechsel, Bildpaar, Hochformat)
   ========================================================================== */
:root { --vg-gross: clamp(300px, 52vh, 560px); --vg-bild: clamp(260px, 50vh, 520px); }

/* Grossbild oben */
.vg-projekt-hero { min-height: var(--vg-gross) !important; }
.vg-seite > .wp-block-post-featured-image, .vg-seite > .wp-block-post-featured-image img { height: var(--vg-gross) !important; }
body:not(.woocommerce):not(.woocommerce-page) .vg-portraet-hero img { height: var(--vg-gross); max-height: none; width: 100%; object-fit: cover; }

/* Bilder im Inhalt */
body:not(.woocommerce):not(.woocommerce-page) .wp-block-post-content .wp-block-image:not(.vg-galerie__bild):not(.vg-hochformat):not(.vg-portraet-hero):not(.vg-spalte-bild *):not(.vg-bildpaar *):not(.vg-portraet-bildpaar *) img { max-height: var(--vg-bild); }
.vg-galerie__bild { height: var(--vg-bild); }
body:not(.woocommerce):not(.woocommerce-page) :is(.vg-bildpaar, .vg-portraet-bildpaar) img { aspect-ratio: auto; height: var(--vg-bild); width: 100%; object-fit: cover; }
body:not(.woocommerce):not(.woocommerce-page) .wp-block-post-content .vg-hochformat img { aspect-ratio: 4 / 5 !important; max-height: var(--vg-bild); width: auto; max-width: 100%; object-fit: cover; }
@media (max-width: 600px) {
	:root { --vg-gross: 56vh; --vg-bild: 64vw; }
	.vg-galerie__bild { height: 64vw; }
	body:not(.woocommerce):not(.woocommerce-page) .wp-block-post-content .vg-hochformat img { max-height: none; width: 100%; }
}

/* 2.4.2 – Bilder und Text auf derselben linken Kante (Textachse) – auch Grossbild und Bildpaare */
@media (min-width: 1000px) {
	.vg-seite .wp-block-post-content.is-layout-constrained > :is(.alignwide, .wp-block-columns.alignwide) {
		margin-left: var(--vg-achse) !important; margin-right: auto !important;
		max-width: calc(var(--wp--style--global--wide-size) - var(--vg-achse)) !important;
	}
	.vg-seite.is-layout-constrained > .wp-block-post-featured-image.alignwide {
		margin-left: max(var(--vg-achse), calc((100% - var(--wp--style--global--wide-size)) / 2 + var(--vg-achse))) !important;
		max-width: calc(var(--wp--style--global--wide-size) - var(--vg-achse)) !important;
	}
}

/* 2.4.3 – Text zweispaltig (mehrere Absätze hintereinander, siehe inc/zweispaltig.php) */
.vg-zweispaltig { column-count: 2; column-gap: clamp(32px, 4vw, 64px); }
.vg-zweispaltig > p { margin: 0 0 1em !important; max-width: none !important; orphans: 3; widows: 3; }
.vg-seite .wp-block-post-content.is-layout-constrained > .vg-zweispaltig:not(.alignwide):not(.alignfull) { max-width: calc(var(--wp--style--global--wide-size) - var(--vg-achse)) !important; }
.vg-projekt-spalten .wp-block-post-content > .vg-zweispaltig { max-width: none; }
@media (max-width: 781px) { .vg-zweispaltig { column-count: 1; } }

/* 2.4.4 – Weniger Weissraum im Inhalt (ausser Shop und Startseite): ein Abstandsmass für alle Blöcke */
:root { --vg-luft: clamp(24px, 2.6vw, 40px); }
body:not(.woocommerce):not(.woocommerce-page) .wp-block-post-content > :is(.wp-block-image, .wp-block-columns, .wp-block-gallery, .vg-galerie, .vg-zweispaltig, .wp-block-pullquote, .wp-block-quote, .wp-block-media-text, .wp-block-group, .vg-portraet-einleitung) {
	margin-top: var(--vg-luft) !important; margin-bottom: var(--vg-luft) !important;
}
body:not(.woocommerce):not(.woocommerce-page) .wp-block-post-content > :is(h2, h3):not([class*="-font-size"]) { margin-top: calc(var(--vg-luft) * 1.1) !important; margin-bottom: 0.5em !important; }
body:not(.woocommerce):not(.woocommerce-page) .wp-block-post-content > :is(h2, h3) + :is(p, ul, ol, .vg-zweispaltig) { margin-top: 0 !important; }
body:not(.woocommerce):not(.woocommerce-page) .wp-block-post-content > :first-child { margin-top: 0 !important; }
.vg-seite h1 { margin-bottom: var(--vg-luft) !important; }
.vg-seite > .wp-block-post-featured-image { margin-bottom: var(--vg-luft) !important; }
.vg-projekt-spalten { padding-top: var(--vg-luft) !important; }
.vg-zweispaltig > p:last-child { margin-bottom: 0 !important; }

/* 2.4.8 – Spalte «Entdecken» rechts unter «Marken» */
@media (min-width: 1000px) {
	.vg-kopf .vg-mega .vg-mega-marken { grid-row: 1 / span 2; }
	.vg-kopf .vg-mega .vg-mega-entdecken { grid-column: -2 / -1; grid-row: 3; padding-left: 28px; border-left: 1px solid var(--vg-linie); }
}

/* 2.4.9 – Shop-Menü: kleinere, ruhigere Schrift, besser lesbar */
@media (min-width: 1000px) {
	.vg-kopf .vg-mega > .wp-block-navigation__submenu-container { gap: 22px 28px; padding: 26px 30px !important; }
	.vg-kopf .vg-mega .vg-mega-gruppe > .wp-block-navigation-item__content { font-size: 11px !important; font-weight: 600; letter-spacing: 0.12em; color: var(--vg-text) !important; padding: 0 0 8px !important; }
	.vg-kopf .vg-mega .vg-mega-gruppe > .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
		font-size: 13px !important; line-height: 1.35; letter-spacing: 0.01em; text-transform: none; color: var(--vg-sek) !important; padding: 3px 0 !important;
	}
	.vg-kopf .vg-mega .vg-mega-gruppe > .wp-block-navigation__submenu-container a:hover { color: var(--vg-text) !important; text-decoration: underline; text-underline-offset: 3px; }
	.vg-kopf .vg-mega .vg-mega-alle > .wp-block-navigation-item__content { font-size: 11px !important; letter-spacing: 0.1em; text-transform: uppercase; }
}

/* Shop: Abstand «Alle Objekte» → Filter verkleinern */
.vg-alle-objekte { margin-bottom: 14px !important; }
.vg-alle-objekte + * , .vg-shopfilter { margin-top: 0 !important; }
.vg-favoriten { margin-bottom: 0 !important; }
.vg-favoriten + .vg-filter { margin-top: 0 !important; }

/* 2.5.0 – Shop-Menü in zwei Reihen mit feinen senkrechten Trennlinien */
@media (min-width: 1000px) {
	.vg-kopf .vg-mega > .wp-block-navigation__submenu-container:has(.vg-mega-marken) { column-gap: 0; row-gap: 26px; }
	.vg-kopf .vg-mega .vg-mega-gruppe { padding: 0 22px !important; border-left: 1px solid var(--vg-linie); }
	.vg-kopf .vg-mega .vg-mega-gruppe:nth-child(5n+1):not(.vg-mega-marken):not(.vg-mega-entdecken) { border-left: 0; padding-left: 0 !important; }
	.vg-kopf .vg-mega .vg-mega-marken { grid-row: 1 / span 1; padding-left: 28px !important; }
	.vg-kopf .vg-mega .vg-mega-entdecken { grid-row: 2; padding-left: 28px !important; }
}
@media (min-width: 1000px) {
	.vg-kopf .vg-mega > .wp-block-navigation__submenu-container > .vg-mega-gruppe { align-self: stretch !important; }
	.vg-kopf .vg-mega .vg-mega-gruppe > .wp-block-navigation-item__content { white-space: nowrap; }
}
@media (min-width: 1000px) {
	.vg-kopf .vg-mega > .wp-block-navigation__submenu-container > .vg-mega-gruppe { justify-content: flex-start !important; }
	.vg-kopf .vg-mega .vg-mega-gruppe > .wp-block-navigation__submenu-container { margin-top: 0 !important; flex: 0 0 auto !important; top: auto !important; }
}
@media (min-width: 1000px) {
	.vg-kopf .vg-mega .vg-mega-gruppe > .wp-block-navigation-item__content { flex: 0 0 auto !important; }
}

/* 2.5.1 – Leistungsprofil: vier Phasen nebeneinander mit feinen Linien */
.vg-leistungsphasen > .wp-block-column { border-top: 1px solid var(--vg-text); padding-top: 14px; }
.vg-leistungsphasen .vg-label { margin-bottom: 6px !important; }
.vg-leistungsphasen h3 { margin-top: 0 !important; }
.vg-leistungsphasen ul { font-size: 14px; }
@media (max-width: 999px) and (min-width: 600px) { .vg-leistungsphasen { flex-wrap: wrap !important; } .vg-leistungsphasen > .wp-block-column { flex-basis: calc(50% - 32px) !important; } }

/* ==========================================================================
   2.6.0 – Feinschliff Gestaltung
   ========================================================================== */
/* Projektkarten: Titel in normaler Schrift statt gesperrter Grossbuchstaben */
.vg-karte-titel { font-family: var(--vg-serif); font-size: 17px !important; line-height: 1.35; letter-spacing: 0.005em; text-transform: none; }
.vg-suchtreffer .vg-karte-titel { letter-spacing: 0.005em; }

/* Akzentfarbe sparsam: Links im Text, aktive Filter, Sale-Preise */
:root { --vg-akzent: var(--wp--preset--color--akzent); }
body:not(.woocommerce):not(.woocommerce-page) .wp-block-post-content p a:not(.wp-element-button) { color: inherit; text-decoration: underline; text-decoration-color: var(--vg-akzent); text-decoration-thickness: 1px; text-underline-offset: 3px; }
body:not(.woocommerce):not(.woocommerce-page) .wp-block-post-content p a:not(.wp-element-button):hover { color: var(--vg-akzent); }
.vg-chip.ist-aktiv { border-color: var(--vg-akzent); color: var(--vg-akzent); }
.vg-unterfilter a.ist-aktiv { color: var(--vg-akzent); border-bottom-color: var(--vg-akzent); }
.wc-block-components-product-price ins, .price ins, .wc-block-components-product-price__value.is-discounted { color: var(--vg-akzent); text-decoration: none; }

/* Materialfläche hinter Zitaten (Leinenton) */
body:not(.woocommerce):not(.woocommerce-page) .wp-block-post-content :is(.wp-block-pullquote, .wp-block-quote) {
	background: var(--wp--preset--color--flaeche); border-left-color: var(--vg-akzent) !important;
	padding: clamp(20px, 2.4vw, 32px) clamp(22px, 2.8vw, 40px) !important;
}

/* Leise Bewegung */
.vg-einblenden { opacity: 0; transform: translateY(14px); transition: opacity 0.9s ease, transform 0.9s cubic-bezier(.2,.7,.2,1); }
.vg-einblenden.vg-sichtbar { opacity: 1; transform: none; }
.wp-block-post-featured-image, .wc-block-components-product-image, .vg-produktbild { overflow: hidden; }
.wp-block-post-featured-image img, .wc-block-components-product-image img { transition: transform 1.4s cubic-bezier(.2,.7,.2,1); }
.wp-block-post-featured-image:hover img, .wc-block-components-product-image:hover img { transform: scale(1.035); }
.vg-folie.ist-aktiv { transition: opacity 1.6s ease, visibility 0s; }
@media (prefers-reduced-motion: reduce) {
	.vg-einblenden { opacity: 1 !important; transform: none !important; }
	.wp-block-post-featured-image:hover img, .wc-block-components-product-image:hover img { transform: none; }
	.vg-folie.ist-aktiv { transition: none; }
}

/* 404-Seite */
.vg-404 h1 { margin: 6px 0 18px; }
.vg-404-wege { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 22px 0 26px !important; }
.vg-404-wege a { font-family: var(--vg-sans); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--vg-text); text-decoration: none; border-bottom: 1px solid var(--vg-akzent); padding-bottom: 3px; }
.vg-404-figur { margin: 0; }
.vg-404-figur img { width: 100%; height: clamp(280px, 48vh, 520px); object-fit: cover; display: block; }
.vg-404 .wp-block-search { max-width: 420px; }

/* Leere Zustände */
.vg-leer { padding: clamp(36px, 5vw, 64px) 0; border-top: 1px solid var(--vg-linie); }
.vg-leer-titel { font-family: var(--vg-serif); font-size: var(--wp--preset--font-size--titel-s); margin: 8px 0 14px !important; }
.woocommerce-info, .woocommerce-message, .woocommerce-error, .wc-block-components-notice-banner {
	background: var(--wp--preset--color--flaeche) !important; border: 0 !important; border-left: 2px solid var(--vg-akzent) !important;
	border-radius: 0 !important; color: var(--vg-text) !important; font-family: var(--vg-sans); font-size: 14px; padding: 16px 20px !important;
}
.wc-block-components-notice-banner > svg { fill: var(--vg-akzent) !important; background: transparent !important; }

/* Knöpfe und Formulare einheitlich (Warenkorb, Kasse, Konto, Formulare) */
.wc-block-components-button:not(.is-link), .wc-block-cart__submit-button, .wc-block-components-checkout-place-order-button,
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .wp-element-button, input[type="submit"] {
	background: var(--wp--preset--color--text) !important; color: var(--wp--preset--color--creme) !important; border: 0 !important; border-radius: 0 !important;
	font-family: var(--vg-sans) !important; font-size: 12px !important; font-weight: 500 !important; letter-spacing: 0.16em !important; text-transform: uppercase !important;
	padding: 14px 24px !important; min-height: 0 !important; box-shadow: none !important; transition: background 0.3s ease;
}
.wc-block-components-button:not(.is-link):hover, .woocommerce a.button:hover, .woocommerce button.button:hover, .wp-element-button:hover, input[type="submit"]:hover { background: var(--wp--preset--color--dunkel) !important; }
.is-style-outline .wp-element-button, .wp-block-button.is-style-outline > .wp-block-button__link { background: transparent !important; color: var(--wp--preset--color--text) !important; border: 1px solid var(--wp--preset--color--text) !important; }
.wc-block-components-text-input input, .wc-block-components-textarea, .wc-blocks-components-select__select, .wc-block-components-combobox .components-combobox-control__input,
.woocommerce form .input-text, .woocommerce form select, .wp-block-search__input, input[type="email"], input[type="text"], input[type="tel"], textarea {
	border-radius: 0 !important; border: 1px solid var(--vg-linie) !important; background: #fff !important; box-shadow: none !important; font-family: var(--vg-sans);
}
.wc-block-components-text-input input:focus, .woocommerce form .input-text:focus, textarea:focus, .wp-block-search__input:focus { border-color: var(--vg-text) !important; outline: none; }
.wc-block-components-quantity-selector { border-radius: 0 !important; border-color: var(--vg-linie) !important; }
.wc-block-components-quantity-selector::after { border: 0 !important; }
/* Suchfelder: ein Rahmen statt zwei */
.wp-block-search__button-inside .wp-block-search__inside-wrapper { border: 1px solid var(--vg-linie) !important; border-radius: 0 !important; padding: 0 !important; background: #fff; }
.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__input { border: 0 !important; padding: 12px 14px !important; }
.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__button { background: transparent !important; color: var(--vg-text) !important; padding: 0 14px !important; margin: 0 !important; letter-spacing: 0 !important; }
.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__button svg { fill: currentColor; }
/* Leerer Warenkorb: ohne Smiley, ruhige Typografie */
.wc-block-cart__empty-cart__title.with-empty-cart-icon::before { display: none !important; }
.wc-block-cart__empty-cart__title { font-family: var(--vg-serif); font-size: var(--wp--preset--font-size--titel-m) !important; font-weight: 400; margin-top: clamp(24px, 4vw, 56px) !important; }

/* 2.7.1 – Grossbilder: Ausschnitt eher oben, damit Köpfe nicht abgeschnitten werden */
.vg-portraet-hero img, .vg-seite > .wp-block-post-featured-image img { object-position: 50% 22% !important; }

/* 2.7.2 – Shop-Menü: kräftige Linie über jedem Kleintitel (wie Leistungsprofil) statt senkrechter Linien, weniger Weissraum */
@media (min-width: 1000px) {
	.vg-kopf .vg-mega > .wp-block-navigation__submenu-container:has(.vg-mega-marken) { column-gap: 22px !important; row-gap: 22px !important; padding: 22px 26px 24px !important; }
	.vg-kopf .vg-mega .vg-mega-gruppe,
	.vg-kopf .vg-mega .vg-mega-gruppe:nth-child(5n+1):not(.vg-mega-marken):not(.vg-mega-entdecken),
	.vg-kopf .vg-mega .vg-mega-marken, .vg-kopf .vg-mega .vg-mega-entdecken {
		border-left: 0 !important; border-top: 1px solid var(--vg-text) !important; padding: 9px 0 0 !important;
	}
	.vg-kopf .vg-mega .vg-mega-gruppe > .wp-block-navigation-item__content { padding: 0 0 6px !important; }
	.vg-kopf .vg-mega .vg-mega-gruppe > .wp-block-navigation__submenu-container .wp-block-navigation-item__content { padding: 2px 0 !important; }
}

/* 2.7.3 – Marken & Designer: Einleitung und Kachelraster auf der Textachse */
.vg-partnerseite .vg-markenraster, .vg-seite .wp-block-post-content > .vg-markenraster {
	left: auto; transform: none; width: auto !important;
	margin-left: var(--vg-achse) !important; margin-right: 0 !important;
	max-width: calc(var(--wp--style--global--wide-size) - var(--vg-achse)) !important;
}
@media (min-width: 1000px) { .vg-markenraster { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* 2.7.4 – Marken & Designer wie der Shop: alles ab dem linken Rand */
body.vg-partnerseite { --vg-achse: 0px; }
body.vg-partnerseite .vg-seite .wp-block-post-content.is-layout-constrained > .vg-portraet-einleitung { max-width: 760px !important; }

/* 2.8.1 – Startseite: Kontakt direkt im Schlussblock statt Knopf «Termin anfragen» */
.vg-kontaktblock .vg-kontakt-adresse,
.vg-kontaktblock .vg-kontakt-wege { margin-top: var(--vg-luft, 24px); margin-bottom: 0; }
.vg-kontaktblock .vg-kontakt-adresse + .vg-kontakt-wege { margin-top: 16px; }
.vg-kontaktblock .vg-kontakt-wege + .vg-mehr { margin-top: 16px; }
.vg-kontaktblock .vg-kontakt-wege a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: rgba(128,97,58,.45); text-underline-offset: 3px; }
.vg-kontaktblock .vg-kontakt-wege a:hover { text-decoration-color: currentColor; }

/* 2.8.2 – Projektkarten: weniger Luft zwischen Titel und Text */
.vg-karte-titel + .vg-karte-text { margin-top: 6px !important; line-height: 1.65; }

/* 2.8.3 – Projektkarten: Titel · Infozeile · Kurztext (2 Zeilen) */
.vg-projektraster .vg-karte-titel + .vg-infozeile { margin: 4px 0 0 !important; font-size: 11px; letter-spacing: 0.12em; color: var(--vg-sek); white-space: pre; overflow: hidden; text-overflow: ellipsis; }
.vg-projektraster .vg-infozeile + .vg-karte-text { margin-top: 3px !important; line-height: 1.6; }
.vg-projektraster .vg-karte-text p { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }

/* 2.8.7 – Produktkarten: Produkt · Preis · Lieferant, klar abgestuft */
.vg-produktraster .vg-produkt-titel,
.wp-block-woocommerce-related-products .vg-produkt-titel { font-size: 15px !important; line-height: 1.3; margin: 2px 0 0 !important; color: var(--vg-text); }
.vg-produktraster .vg-preiszeile { margin-top: 4px !important; }
.vg-produktraster .vg-preis, .wp-block-woocommerce-related-products .vg-preis,
.vg-produktraster .vg-preis .wc-block-components-product-price { font-family: var(--vg-sans); font-size: 13px !important; font-weight: 500; letter-spacing: 0.01em; color: var(--vg-text); font-variant-numeric: tabular-nums; }
.vg-marke.vg-lieferant { font-size: 10.5px; font-weight: 400; letter-spacing: 0.16em; line-height: 1.4; color: var(--vg-meta, #8A847B); margin: 6px 0 0 !important; }
.vg-marke.vg-lieferant a { text-decoration: none; }
.vg-marke.vg-lieferant a:hover { color: var(--vg-akzent); }
.vg-lieferant + .wp-block-woocommerce-product-button, .vg-lieferant + .vg-warenkorb-knopf { margin-top: 14px !important; }
.vg-produktraster .wc-block-product { display: flex; flex-direction: column; }
.vg-produktraster .wc-block-product > .vg-lieferant { margin-bottom: 14px !important; }
.vg-produktraster .wc-block-product > .vg-lieferant + .wp-block-woocommerce-product-button { margin-top: auto !important; }

/* 2.8.8 – Kartenknöpfe und Umriss-Knöpfe: beim Überfahren nur Rahmen und Schrift in Akzentfarbe, keine Fläche */
.vg-warenkorb-knopf .wp-block-button__link, .vg-warenkorb-knopf .wc-block-components-product-button__button,
.is-style-outline .wp-element-button, .wp-block-button.is-style-outline > .wp-block-button__link { transition: color .25s ease, border-color .25s ease !important; }
.vg-warenkorb-knopf .wp-block-button__link:hover, .vg-warenkorb-knopf .wp-block-button__link:focus-visible,
.vg-warenkorb-knopf .wc-block-components-product-button__button:hover, .vg-warenkorb-knopf .wc-block-components-product-button__button:focus-visible,
.vg-warenkorb-knopf .wp-element-button:hover,
.is-style-outline .wp-element-button:hover, .wp-block-button.is-style-outline > .wp-block-button__link:hover {
	background: transparent !important; color: var(--vg-akzent) !important; border-color: var(--vg-akzent) !important;
}

/* 2.8.9 – Startseite: weniger Abstand zwischen den Rubriken */
.vg-startseite { --vg-abschnitt: clamp(28px, 2.8vw, 40px); }

/* 2.9.1: Hinweis Lieferung unter dem Preis mit Link zu den AGB */
.vg-hinweis-mwst a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.vg-hinweis-mwst a:hover { color: var(--vg-akzent, currentColor); }

/* 2.9.2: Hinweis «keine MWST» unter Warenkorb und Kasse */
.vg-hinweis-keine-mwst { margin-top: 16px !important; }

/* 2.9.4: Leistungsprofil – vier Leistungsphasen als 2 × 2 (01 02 / 03 04), am Handy untereinander */
@media (min-width: 600px) {
	.vg-leistungsphasen.wp-block-columns {
		display: grid !important;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: clamp(32px, 4vw, 64px) !important;
		row-gap: clamp(40px, 5vw, 64px) !important;
	}
	.vg-leistungsphasen > .wp-block-column { flex-basis: auto !important; width: auto !important; margin: 0 !important; }
}

/* 2.9.5: Hauptnavigation (Projekte · Studio) links neben dem Logo statt mittig – auf allen Seiten (ab Tablet) */
@media (min-width: 782px) {
	.vg-kopf { justify-content: flex-start !important; }
	.vg-kopf .vg-hauptnav { margin-left: clamp(32px, 4vw, 64px); }
	.vg-kopf .vg-hauptnav .wp-block-navigation__container { justify-content: flex-start !important; }
	.vg-kopf .vg-kopf-rechts { margin-left: auto; }
}

/* 2.9.6: Leitsatz statt Seitentitel (z. B. Über mich)
   Beginnt der Seiteninhalt mit einer Überschrift der Klasse «vg-leitsatz»,
   wird der Seitentitel ausgeblendet; der Leitsatz steht fett und grösser auf der Textachse.
   Optional darunter ein Absatz «vg-leitsatz-name» (Name klein, Versalien). */
.vg-seite:has(.wp-block-post-content > .vg-leitsatz:first-child) > .wp-block-post-title { display: none; }
.vg-seite .wp-block-post-content.is-layout-constrained > .vg-leitsatz:not(.alignwide):not(.alignfull) {
	max-width: 900px !important;
	margin-top: 0 !important;
	margin-bottom: clamp(12px, 1.4vw, 18px) !important;
	font-family: var(--wp--preset--font-family--caslon);
	font-weight: 700;
	font-size: clamp(26px, 2.7vw, 38px);
	line-height: 1.22;
	letter-spacing: -0.005em;
	text-wrap: balance;
}
.vg-seite .wp-block-post-content.is-layout-constrained > .vg-leitsatz-name {
	margin-top: 0 !important;
	margin-bottom: clamp(28px, 3.4vw, 48px) !important;
	font-size: var(--wp--preset--font-size--label) !important;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	opacity: 0.7;
}
.vg-seite .wp-block-post-content > .vg-leitsatz:first-child + .vg-leitsatz-name + * ,
.vg-seite .wp-block-post-content > .vg-leitsatz:first-child + :not(.vg-leitsatz-name) { margin-top: 0 !important; }

/* 2.9.7: Kernsatz – Zitat als Lauftext (editorial), ohne Fläche, ohne Linie, nicht kursiv.
   Absatz mit Klasse «vg-kernsatz» (optional darunter «vg-leitsatz-name»).
   Gleiche Schrift wie der Leitsatz, kleiner; steht auf der Textachse. */
.vg-seite .wp-block-post-content.is-layout-constrained > .vg-kernsatz:not(.alignwide):not(.alignfull),
.wp-block-post-content > p.vg-kernsatz {
	max-width: 760px !important;
	margin-top: clamp(40px, 5vw, 72px) !important;
	margin-bottom: clamp(10px, 1.2vw, 14px) !important;
	font-family: var(--wp--preset--font-family--caslon);
	font-weight: 700;
	font-style: normal;
	font-size: clamp(21px, 1.9vw, 26px) !important;
	line-height: 1.32 !important;
	text-wrap: balance;
	background: none; border: 0; padding: 0;
}
.wp-block-post-content > .vg-kernsatz + .vg-leitsatz-name { margin-bottom: clamp(40px, 5vw, 72px) !important; }

/* 2.9.8: Einladung statt Knopf – leiser Textlink in der Serifenschrift.
   Absatz mit Klasse «vg-einladung»: Satz + Link. Feine Linie unter dem Link,
   beim Überfahren Akzentfarbe, Pfeil gleitet nach rechts. */
.wp-block-post-content > p.vg-einladung {
	margin-top: clamp(28px, 3.4vw, 44px) !important;
	font-family: var(--wp--preset--font-family--caslon);
	font-size: clamp(18px, 1.5vw, 21px) !important;
	line-height: 1.5 !important;
}
.wp-block-post-content p.vg-einladung a {
	display: inline-block;
	margin-top: 6px;
	color: var(--vg-text);
	font-style: italic;
	transition: color .35s ease;
}
.vg-einladung a::after { content: "\2192"; display: inline-block; margin-left: .45em; font-style: normal; transition: transform .35s ease; }
.vg-einladung a:hover::after, .vg-einladung a:focus-visible::after { transform: translateX(6px); }
@media (prefers-reduced-motion: reduce) { .vg-einladung a, .vg-einladung a::after { transition: none; } }

/* ==========================================================================
   2.9.9 – Eine Linie für alle Links (Text, Knöpfe im Inhalt, Navigation)
   Ruhige Grundlinie; beim Überfahren zieht eine Linie in der Akzentfarbe
   von links nach rechts darüber. Shop, Warenkorb und Kasse bleiben unverändert.
   ========================================================================== */
:root { --vg-linkdauer: .45s; --vg-linkkurve: cubic-bezier(.22,.61,.36,1); }

/* 1 · Links im Fliesstext (Seiten, Projekte, Porträts) */
body:not(.woocommerce):not(.woocommerce-page) .wp-block-post-content :is(p, li) a:not(.wp-element-button),
.vg-mehr a {
	color: inherit;
	text-decoration: none !important;
	border-bottom: 0 !important;
	padding-bottom: 2px;
	background-image:
		linear-gradient(var(--vg-akzent), var(--vg-akzent)),
		linear-gradient(var(--vg-linie), var(--vg-linie));
	background-size: 0% 1px, 100% 1px;
	background-position: 0 100%, 0 100%;
	background-repeat: no-repeat;
	transition: background-size var(--vg-linkdauer) var(--vg-linkkurve), color var(--vg-linkdauer) ease;
}
body:not(.woocommerce):not(.woocommerce-page) .wp-block-post-content :is(p, li) a:not(.wp-element-button):is(:hover, :focus-visible),
.vg-mehr a:is(:hover, :focus-visible) { color: var(--vg-akzent); background-size: 100% 1px, 100% 1px; }

/* Einladung (2.9.8) nutzt dieselbe Linie */
.wp-block-post-content p.vg-einladung a { text-decoration: none !important; padding-bottom: 4px; }

/* 2 · Knöpfe im Inhalt werden zu Einladungen: Serifenschrift kursiv, Linie, Pfeil */
body:not(.woocommerce):not(.woocommerce-page) .wp-block-post-content .wp-block-button:not(.vg-warenkorb-knopf) .wp-block-button__link {
	background: none !important;
	background-image:
		linear-gradient(var(--vg-akzent), var(--vg-akzent)),
		linear-gradient(var(--vg-linie), var(--vg-linie)) !important;
	background-size: 0% 1px, 100% 1px !important;
	background-position: 0 100%, 0 100% !important;
	background-repeat: no-repeat !important;
	border: 0 !important; border-radius: 0 !important;
	padding: 0 0 4px !important;
	color: var(--vg-text) !important;
	font-family: var(--wp--preset--font-family--caslon) !important;
	font-size: clamp(18px, 1.5vw, 21px) !important;
	font-style: italic; font-weight: 400 !important;
	letter-spacing: 0 !important; text-transform: none !important;
	transition: background-size var(--vg-linkdauer) var(--vg-linkkurve), color var(--vg-linkdauer) ease !important;
}
body:not(.woocommerce):not(.woocommerce-page) .wp-block-post-content .wp-block-button:not(.vg-warenkorb-knopf) .wp-block-button__link::after {
	content: "\2192"; display: inline-block; margin-left: .45em; font-style: normal; transition: transform var(--vg-linkdauer) var(--vg-linkkurve);
}
body:not(.woocommerce):not(.woocommerce-page) .wp-block-post-content .wp-block-button:not(.vg-warenkorb-knopf) .wp-block-button__link:is(:hover, :focus-visible) {
	color: var(--vg-akzent) !important; background-size: 100% 1px, 100% 1px !important;
}
body:not(.woocommerce):not(.woocommerce-page) .wp-block-post-content .wp-block-button:not(.vg-warenkorb-knopf) .wp-block-button__link:is(:hover, :focus-visible)::after { transform: translateX(6px); }

/* 3 · Navigation oben (2.11.0 korrigiert): Linie wächst nur bei den Hauptpunkten,
       ohne Höhenänderung. Untermenüs: schlichte Unterstreichung wie im Shop-Menü. */
.vg-kopf .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
	border-bottom: 0 !important; padding-block: 12px !important;
	background-image: linear-gradient(currentColor, currentColor);
	background-size: 0% 1px; background-position: 0 calc(100% - 10px); background-repeat: no-repeat;
	transition: background-size var(--vg-linkdauer) var(--vg-linkkurve);
}
.vg-kopf .wp-block-navigation__container > .wp-block-navigation-item:is(:hover, :focus-within) > .wp-block-navigation-item__content,
.vg-kopf .wp-block-navigation__container > :is(.current-menu-item, .current-menu-ancestor) > .wp-block-navigation-item__content {
	background-size: 100% 1px; border-bottom: 0 !important;
}
.vg-kopf .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	background-image: none !important; border-bottom: 0 !important; padding: 5px 0 !important;
	text-decoration: none; text-underline-offset: 4px; text-decoration-thickness: 1px;
}
.vg-kopf .wp-block-navigation__submenu-container .wp-block-navigation-item__content:is(:hover, :focus-visible),
.vg-kopf .wp-block-navigation__submenu-container .current-menu-item > .wp-block-navigation-item__content {
	text-decoration: underline; color: var(--vg-text) !important;
}

/* 4 · Fusszeile: gleiche Linie, nur beim Überfahren */
.vg-linkliste a, .vg-fuss-unten a {
	background-image: linear-gradient(var(--vg-akzent), var(--vg-akzent));
	background-size: 0% 1px; background-position: 0 100%; background-repeat: no-repeat; padding-bottom: 2px;
	transition: background-size var(--vg-linkdauer) var(--vg-linkkurve), color var(--vg-linkdauer) ease;
}
.vg-linkliste a:is(:hover, :focus-visible), .vg-fuss-unten a:is(:hover, :focus-visible) { background-size: 100% 1px; }

@media (prefers-reduced-motion: reduce) {
	.wp-block-post-content a, .vg-mehr a, .vg-kopf .wp-block-navigation-item__content, .vg-linkliste a, .vg-fuss-unten a,
	.wp-block-button__link, .wp-block-button__link::after { transition: none !important; }
}

/* 2.10.0: Alle Zitate (Projekte, Porträts, Seiten, Baustein «Zitat») als Kernsatz –
   fett im Textfluss, ohne Leinenfläche, ohne Linie, nicht kursiv (wie 2.9.7 «vg-kernsatz»). */
body:not(.woocommerce):not(.woocommerce-page) .wp-block-post-content :is(.wp-block-pullquote, .wp-block-quote, .vg-portraet-zitat) {
	background: none !important;
	border: 0 !important;
	padding: 0 !important;
	text-align: left !important;
	max-width: 760px !important;
	margin-top: clamp(40px, 5vw, 72px) !important;
	margin-bottom: clamp(40px, 5vw, 72px) !important;
}
body:not(.woocommerce):not(.woocommerce-page) .wp-block-post-content :is(.wp-block-pullquote, .wp-block-quote) blockquote { margin: 0 !important; padding: 0 !important; border: 0 !important; }
body:not(.woocommerce):not(.woocommerce-page) .wp-block-post-content :is(.wp-block-pullquote, .wp-block-quote) p {
	font-family: var(--wp--preset--font-family--caslon) !important;
	font-weight: 700 !important;
	font-style: normal !important;
	font-size: clamp(21px, 1.9vw, 26px) !important;
	line-height: 1.32 !important;
	text-align: left !important;
	text-wrap: balance;
	color: var(--vg-text) !important;
	margin: 0 !important;
}
body:not(.woocommerce):not(.woocommerce-page) .wp-block-post-content :is(.wp-block-pullquote, .wp-block-quote) cite {
	display: block; margin-top: clamp(10px, 1.2vw, 14px) !important;
	font-family: var(--vg-sans) !important; font-size: 12px !important; font-style: normal !important; font-weight: 400 !important;
	letter-spacing: 0.14em; text-transform: uppercase; color: var(--vg-text) !important; opacity: .7; text-align: left !important;
}

/* ==========================================================================
   2.11.0 – Raster horizontal und vertikal
   Horizontal: Seiten (Über mich, Leistungsprofil, Kontakt, Rechtliches …) beginnen
   auf derselben linken Kante wie Projekte und Shop – Titel/Leitsatz, Text und Bilder.
   Projekt- und Porträtseiten behalten ihre Datenspalte links.
   Vertikal: ein Abstandssystem in drei Stufen.
   ========================================================================== */
:root {
	--vg-v1: clamp(12px, 1.2vw, 16px);   /* eng: Titel → Text, Zitat → Name */
	--vg-v2: clamp(24px, 2.6vw, 40px);   /* Block → Block */
	--vg-v3: clamp(56px, 6vw, 96px);     /* Abschnitt → Abschnitt */
}
.vg-seite { --vg-achse: 0px; }

/* Seitenkopf: Titel bzw. Leitsatz steht auf gleicher Höhe wie der Titel der Projektübersicht */
.vg-seite > .wp-block-post-title { margin-top: 0 !important; margin-bottom: var(--vg-v2) !important; }
.vg-seite .wp-block-post-content > .vg-leitsatz:first-child { margin-top: 0 !important; }
.vg-seite .wp-block-post-content > .vg-leitsatz-name { margin-bottom: var(--vg-v2) !important; }

/* Abschnitte: Zwischentitel mit grossem Abstand davor, kleinem danach */
body:not(.woocommerce):not(.woocommerce-page) .vg-seite .wp-block-post-content > :is(h2, h3) {
	margin-top: var(--vg-v3) !important; margin-bottom: var(--vg-v1) !important;
}
body:not(.woocommerce):not(.woocommerce-page) .vg-seite .wp-block-post-content > :is(h2, h3) + * { margin-top: 0 !important; }

/* Bilder, Text+Bild, Bildpaare: einheitlicher Blockabstand */
body:not(.woocommerce):not(.woocommerce-page) .vg-seite .wp-block-post-content > :is(.wp-block-image, .wp-block-columns, .wp-block-gallery, .vg-galerie) {
	margin-top: var(--vg-v2) !important; margin-bottom: var(--vg-v2) !important;
}
.vg-seite .wp-block-post-content > .vg-portraet-hero { margin-top: 0 !important; }
.vg-seite .wp-block-post-content > .vg-portraet-einleitung { margin-top: var(--vg-v2) !important; margin-bottom: var(--vg-v2) !important; }

/* Zitate / Kernsatz: Abschnittsabstand */
body:not(.woocommerce):not(.woocommerce-page) .wp-block-post-content :is(.wp-block-pullquote, .wp-block-quote, .vg-portraet-zitat),
.wp-block-post-content > p.vg-kernsatz { margin-top: var(--vg-v3) !important; }
body:not(.woocommerce):not(.woocommerce-page) .wp-block-post-content :is(.wp-block-pullquote, .wp-block-quote, .vg-portraet-zitat) { margin-bottom: var(--vg-v3) !important; }
.wp-block-post-content > .vg-kernsatz + .vg-leitsatz-name { margin-top: var(--vg-v1) !important; margin-bottom: var(--vg-v3) !important; }
.wp-block-post-content > p.vg-einladung { margin-top: var(--vg-v2) !important; }

/* ==========================================================================
   2.12.0 – Einheitliche Typografie und Seitenköpfe
   Ein Titelmass für alle Seiten (Projekte, Shop, Seiten, Leitsatz),
   ein Einleitungsmass, ein Textmass, ein Zwischentitelmass.
   Titel rücken näher an die Navigation.
   ========================================================================== */
:root {
	--vg-kopfabstand: clamp(28px, 3vw, 48px);
	--vg-t-titel: clamp(26px, 2.8vw, 40px);
	--vg-t-zwischen: clamp(20px, 1.6vw, 23px);
	--vg-t-einleitung: clamp(17px, 1.3vw, 19px);
}

/* Abstand Navigation → Titel (alle Vorlagen mit Standard-Kopfabstand) */
main.vg-main[style*="spacing--50"] { padding-top: var(--vg-kopfabstand) !important; }

/* Titel H1 – überall gleich */
.vg-main :is(h1.wp-block-post-title, h1.wp-block-query-title, .vg-seitenkopf h1),
.vg-seite .wp-block-post-content > h1.vg-leitsatz {
	font-family: var(--vg-serif) !important;
	font-size: var(--vg-t-titel) !important;
	line-height: 1.15 !important;
	letter-spacing: -0.01em !important;
	margin-top: 0 !important;
}
.vg-main :is(h1.wp-block-post-title, h1.wp-block-query-title, .vg-seitenkopf h1) { font-weight: 400 !important; }
.vg-seite .wp-block-post-content > h1.vg-leitsatz { max-width: 860px !important; }
.vg-projekt-hero :is(h1, .wp-block-post-title) { font-size: clamp(30px, 3.4vw, 48px) !important; } /* Titel auf Bild bleibt etwas grösser */

/* Einleitung – überall gleich */
.vg-seitenkopf p:not(.vg-label):not(.vg-projektfilter),
.vg-seitenkopf .wp-block-term-description,
.wp-block-post-content > .vg-portraet-einleitung,
.vg-seite .wp-block-post-content > .vg-portraet-einleitung {
	font-family: var(--vg-serif) !important;
	font-size: var(--vg-t-einleitung) !important;
	line-height: 1.5 !important;
	color: var(--vg-text) !important;
	max-width: 620px !important;
}
.vg-seitenkopf { margin-bottom: var(--vg-v2, 32px) !important; row-gap: var(--vg-v1, 14px) !important; }
.vg-seitenkopf > .wp-block-group > * + * { margin-top: var(--vg-v1, 14px) !important; }

/* Zwischentitel H2/H3 – überall gleich */
body:not(.woocommerce):not(.woocommerce-page) .wp-block-post-content :is(h2, h3):not(.vg-karte-titel):not(.vg-leitsatz),
.vg-favoriten-kopf h2, .vg-main > .wp-block-group > h2.wp-block-heading {
	font-family: var(--vg-serif) !important;
	font-size: var(--vg-t-zwischen) !important;
	font-weight: 400 !important;
	line-height: 1.25 !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
}

/* Fliesstext und Listen – überall gleich */
.vg-leistungsphasen ul { font-size: var(--wp--preset--font-size--text) !important; }
body:not(.woocommerce):not(.woocommerce-page) .wp-block-post-content :is(p, li):not([class*="-font-size"]):not([class*="vg-"]):not(blockquote *) {
	font-size: var(--wp--preset--font-size--text) !important; line-height: 1.65 !important;
}

/* ==========================================================================
   2.12.0 – Grossbild wie Startseite (Über mich): Bild über die ganze Breite,
   Text auf dem Bild rechts, mit weichem Verlauf und Schriftschatten.
   Gruppe mit Klasse «vg-hero»: Bild + Absatz «vg-hero-text».
   ========================================================================== */
.vg-main { overflow-x: clip; }
.wp-block-post-content > .vg-hero {
	position: relative;
	width: 100vw !important; max-width: 100vw !important;
	margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important;
	margin-top: var(--vg-v2, 32px) !important; margin-bottom: var(--vg-v3, 72px) !important;
	padding: 0 !important;
	height: calc(100svh - 92px); min-height: 520px; max-height: 1100px;
	overflow: hidden; background: var(--vg-dunkel);
}
.wp-block-post-content > .vg-hero > .wp-block-image { margin: 0 !important; width: 100% !important; height: 100%; max-width: none !important; }
.wp-block-post-content > .vg-hero img { max-width: none !important; max-height: none !important; }
.wp-block-post-content > .vg-hero img { width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: 42% 30%; display: block; }
.wp-block-post-content > .vg-hero::after {
	content: ""; position: absolute; inset: 0; pointer-events: none;
	background: linear-gradient(to left, rgba(20,18,15,.66) 0%, rgba(20,18,15,.42) 34%, rgba(20,18,15,0) 62%);
}
.wp-block-post-content > .vg-hero > .vg-hero-text {
	position: absolute; z-index: 1;
	top: 50%; right: var(--vg-rand); transform: translateY(-50%);
	width: min(34vw, 520px); max-width: none !important; margin: 0 !important;
	font-family: var(--vg-serif) !important;
	font-size: clamp(20px, 1.9vw, 30px) !important; line-height: 1.38 !important;
	color: var(--vg-creme) !important;
	text-shadow: 0 0 2px rgba(0,0,0,.35), 0 2px 30px rgba(0,0,0,.55), 0 0 60px rgba(0,0,0,.25);
	text-wrap: pretty;
}
@media (max-width: 781px) {
	.wp-block-post-content > .vg-hero { height: auto; min-height: 0; max-height: none; background: none; overflow: visible; }
	.wp-block-post-content > .vg-hero > .wp-block-image { height: auto; }
	.wp-block-post-content > .vg-hero img { aspect-ratio: 4 / 5; height: auto !important; object-position: 45% 30%; }
	.wp-block-post-content > .vg-hero::after { display: none; }
	.wp-block-post-content > .vg-hero > .vg-hero-text {
		position: static; transform: none; width: auto; padding: var(--vg-v2, 24px) var(--vg-rand) 0 !important;
		color: var(--vg-text) !important; text-shadow: none; font-size: var(--vg-t-einleitung) !important;
	}
}

/* ==========================================================================
   2.13.0 – Seitenkopf, Filter, Projektraster
   ========================================================================== */

/* Seitenkopf überall gleich aufgebaut: Titel → Einleitung → Filter (untereinander, linksbündig).
   Ausnahme: Markenseite mit Markenbild rechts. */
.vg-seitenkopf:not(:has(.vg-markenbild)) {
	flex-direction: column !important; align-items: flex-start !important; justify-content: flex-start !important;
	flex-wrap: nowrap !important; gap: var(--vg-v1, 14px) !important;
}
.vg-seitenkopf:not(:has(.vg-markenbild)) > * { flex: 0 0 auto !important; width: auto !important; max-width: 620px; margin: 0 !important; }
.vg-seitenkopf:not(:has(.vg-markenbild)) > .vg-projektfilter,
.vg-seitenkopf:not(:has(.vg-markenbild)) > .vg-shopfilter,
.vg-seitenkopf:not(:has(.vg-markenbild)) > :has(.vg-filter) { max-width: none; margin-top: var(--vg-v1, 14px) !important; }

/* Filter als Textlinks mit Linie – wie Navigation und Links im Text */
.vg-filter { gap: 10px 28px !important; }
.vg-chip {
	min-height: 0 !important; padding: 6px 0 !important; border: 0 !important;
	font-family: var(--vg-sans); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
	color: var(--vg-sek) !important;
	background-image: linear-gradient(currentColor, currentColor);
	background-size: 0% 1px; background-position: 0 100%; background-repeat: no-repeat;
	transition: background-size var(--vg-linkdauer, .45s) var(--vg-linkkurve, ease), color var(--vg-linkdauer, .45s) ease;
}
.vg-chip:is(:hover, :focus-visible) { color: var(--vg-text) !important; background-size: 100% 1px; }
.vg-chip.ist-aktiv { color: var(--vg-text) !important; background-size: 100% 1px; border: 0 !important; }
.vg-unterfilter a { border-bottom: 0 !important;
	background-image: linear-gradient(currentColor, currentColor);
	background-size: 0% 1px; background-position: 0 100%; background-repeat: no-repeat;
	transition: background-size var(--vg-linkdauer, .45s) var(--vg-linkkurve, ease), color var(--vg-linkdauer, .45s) ease; }
.vg-unterfilter a:is(:hover, :focus-visible), .vg-unterfilter a.ist-aktiv { color: var(--vg-text) !important; background-size: 100% 1px; }
@media (max-width: 781px) { .vg-chip { min-height: 40px !important; padding: 10px 0 !important; display: inline-flex; align-items: center; } }

/* Projektraster: die Reihe ist immer gefüllt – auch bei wenigen Projekten (ab 1024 px, 4 Spalten) */
@media (min-width: 1024px) {
	/* 1–3 Projekte: gleich breite Karten über die ganze Breite */
	.vg-projektraster .wp-block-post-template.is-layout-grid:not(:has(> li:nth-child(2))) { grid-template-columns: minmax(0, 1fr); }
	.vg-projektraster .wp-block-post-template.is-layout-grid:has(> li:nth-child(2)):not(:has(> li:nth-child(3))) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.vg-projektraster .wp-block-post-template.is-layout-grid:has(> li:nth-child(3)):not(:has(> li:nth-child(4))) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.vg-projektraster .wp-block-post-template.is-layout-grid:not(:has(> li:nth-child(4))) > li { grid-column: auto !important; }
	/* Ab 4 Projekten: Rhythmus 2+1+1 / 1+1+2; letzte Reihe wird aufgefüllt */
	.vg-projektraster:not(.vg-weitere) .wp-block-post-template:has(> li:nth-child(4)) > li:nth-child(6n+1):last-child { grid-column: span 4; }
	.vg-projektraster:not(.vg-weitere) .wp-block-post-template:has(> li:nth-child(4)) > li:nth-child(6n+2):last-child { grid-column: span 2; }
	.vg-projektraster:not(.vg-weitere) .wp-block-post-template:has(> li:nth-child(4)) > li:nth-child(6n+4):last-child { grid-column: span 4; }
	.vg-projektraster:not(.vg-weitere) .wp-block-post-template:has(> li:nth-child(4)) > li:nth-child(6n+4):nth-last-child(2),
	.vg-projektraster:not(.vg-weitere) .wp-block-post-template:has(> li:nth-child(4)) > li:nth-child(6n+5):last-child { grid-column: span 2; }
	/* Bild in breiten Karten nicht höher als in den anderen */
	.vg-projektraster .wp-block-post-template > li .wp-block-post-featured-image { height: clamp(240px, 24vw, 380px) !important; }
}

/* 2.14.0: Grossbild als Seitenanfang – wie die Startseite bildschirmfüllend.
   Beginnt der Inhalt mit «vg-hero», entfallen Seitentitel und Abstand oben;
   das Bild füllt den Bildschirm unter der Navigation. Name im Bild klein (Span «vg-hero-name»). */
.vg-seite:has(.wp-block-post-content > .vg-hero:first-child) { padding-top: 0 !important; }
.vg-seite:has(.wp-block-post-content > .vg-hero:first-child) > .wp-block-post-title { display: none !important; }
.wp-block-post-content > .vg-hero:first-child { margin-top: 0 !important; }
.wp-block-post-content > .vg-hero {
	height: calc(100svh - var(--vg-kopf-h, 92px) - var(--wp-admin--admin-bar--height, 0px)) !important;
	min-height: 520px; max-height: none !important;
}
.vg-hero-text .vg-hero-name {
	display: block; margin-top: clamp(14px, 1.4vw, 20px);
	font-family: var(--vg-sans); font-size: 12px !important; line-height: 1.4;
	letter-spacing: 0.16em; text-transform: uppercase; opacity: .9;
}
@media (max-width: 781px) {
	.wp-block-post-content > .vg-hero { height: auto !important; min-height: 0; }
	.vg-hero-text .vg-hero-name { opacity: .7; }
}

/* Leitsatz direkt unter dem Grossbild: gleicher Abstand wie ein Abschnitt */
.wp-block-post-content > .vg-hero + .vg-leitsatz { margin-top: 0 !important; margin-bottom: var(--vg-v3, 72px) !important; }

/* 2.14.1: Vorlage «Seite mit Grossbild (ohne Titel)» – erstes Bild beginnt direkt unter der Navigation */
.vg-seite-grossbild { padding-top: 0 !important; }
.vg-seite-grossbild .wp-block-post-content > .vg-hero:first-child { margin-top: 0 !important; }

/* 2.14.1: Grossbild-Text links (Gruppe zusätzlich «vg-hero-links») – wenn das Gesicht rechts im Bild ist */
.wp-block-post-content > .vg-hero.vg-hero-links::after {
	background: linear-gradient(to right, rgba(20,18,15,.66) 0%, rgba(20,18,15,.42) 34%, rgba(20,18,15,0) 62%);
}
.wp-block-post-content > .vg-hero.vg-hero-links > .vg-hero-text { right: auto; left: var(--vg-rand); top: auto; bottom: clamp(40px, 7vh, 88px); transform: none; width: min(32vw, 470px); }
.wp-block-post-content > .vg-hero.vg-hero-links::after { background: linear-gradient(to top right, rgba(20,18,15,.7) 0%, rgba(20,18,15,.35) 30%, rgba(20,18,15,0) 55%); }

/* 2.15.0: Muster «Editorial-Seite»; Kontakt in drei gleichen Spalten (Studio · Erreichbar · Termine) */
.vg-kontakt-spalten > .wp-block-column { flex-basis: 0 !important; flex-grow: 1 !important; }
.vg-kontakt-spalten > .wp-block-column > h3:first-child { margin-top: 0 !important; }
.vg-seite .wp-block-post-content ol.wp-block-list { padding-left: 1.4em; }
.vg-seite .wp-block-post-content ol.wp-block-list > li::marker { font-family: var(--vg-sans); font-size: 12px; color: var(--vg-sek); }

/* 2.15.1: Bildausschnitt bei Text links */
.wp-block-post-content > .vg-hero.vg-hero-links img { object-position: 38% 35%; }

/* 2.15.2: Kein Abstand zwischen Kopfzeile und Grossbild (allgemeine Blockabstände überstimmten die Regel) */
body:not(.woocommerce):not(.woocommerce-page) .vg-main .wp-block-post-content > .vg-hero:first-child { margin-top: 0 !important; }
body:not(.woocommerce):not(.woocommerce-page) .vg-main .wp-block-post-content > .vg-hero { margin-bottom: var(--vg-v3, 72px) !important; }
body:not(.woocommerce):not(.woocommerce-page) .vg-main.vg-seite-grossbild,
body:not(.woocommerce):not(.woocommerce-page) .vg-seite:has(.wp-block-post-content > .vg-hero:first-child) { padding-top: 0 !important; margin-top: 0 !important; }
body:not(.woocommerce):not(.woocommerce-page) .vg-seite:has(.wp-block-post-content > .vg-hero:first-child) > .wp-block-post-content { margin-top: 0 !important; }

/* ==========================================================================
   Valeria Gunz 03 – 1.0.0
   Fast weisser Grund (#FAFAF8), serifenlose Schrift mit enger Laufweite,
   Kopfzeile überall gleich (auch Startseite: hell, mit Linie, über dem Bild statt darauf).
   ========================================================================== */
:root { --vg-hell: #F7F5F0; }

/* Helle Schrift auf Bildern bleibt hell */
.vg-slider, .vg-slider-leitsatz, .vg-slider-leitsatz *, .vg-folie-text, .vg-folie-text *,
.wp-block-post-content > .vg-hero > .vg-hero-text, .vg-hero-text .vg-hero-name,
.vg-projekt-hero, .vg-projekt-hero :is(h1, p, a, .wp-block-post-title), .has-creme-color,
.vg-pfeil, .vg-karte-pfeil { color: var(--vg-hell) !important; }
@media (max-width: 781px) { .wp-block-post-content > .vg-hero > .vg-hero-text { color: var(--vg-text) !important; } }

/* Titel: serifenlos, eng gesetzt */
:root { --vg-t-titel: clamp(30px, 3.2vw, 48px); }
.vg-main :is(h1.wp-block-post-title, h1.wp-block-query-title, .vg-seitenkopf h1),
.vg-seite .wp-block-post-content > h1.vg-leitsatz,
.vg-slider-leitsatz__titel { letter-spacing: -0.03em !important; line-height: 1.08 !important; }
.vg-seite .wp-block-post-content > h1.vg-leitsatz { font-weight: 500 !important; }
body:not(.woocommerce):not(.woocommerce-page) .wp-block-post-content :is(h2, h3):not(.vg-karte-titel):not(.vg-leitsatz) { letter-spacing: -0.015em !important; }
.wp-block-post-content > p.vg-kernsatz,
body:not(.woocommerce):not(.woocommerce-page) .wp-block-post-content :is(.wp-block-pullquote, .wp-block-quote) p { font-weight: 500 !important; letter-spacing: -0.02em; }
.vg-slider-leitsatz__titel { font-weight: 400 !important; }
body:not(.woocommerce):not(.woocommerce-page) .wp-block-post-content :is(p, li):not([class*="-font-size"]):not([class*="vg-"]):not(blockquote *) { color: var(--wp--preset--color--sekundaer); line-height: 1.7 !important; }

/* Projektseiten: Titelbild bildschirmfüllend wie auf der Startseite (unter der Kopfzeile bis zum unteren Rand) */
body.single-projekt .vg-projekt-hero {
	min-height: calc(100svh - var(--vg-kopf-h, 92px) - var(--wp-admin--admin-bar--height, 0px)) !important;
	height: calc(100svh - var(--vg-kopf-h, 92px) - var(--wp-admin--admin-bar--height, 0px));
	max-height: none !important;
}
body.single-projekt .vg-projekt-hero .wp-block-cover__image-background { object-position: 50% 50%; }
@media (max-width: 781px) {
	body.single-projekt .vg-projekt-hero { min-height: calc(100svh - var(--vg-kopf-h, 72px)) !important; }
}

/* ==========================================================================
   Projektseiten editorial: Datenblatt links (fest beim Scrollen, mit Linien),
   Einleitung als Lead, nummerierte Abschnitte mit Linie, ruhiger Fliesstext.
   ========================================================================== */
/* Datenblatt */
body.single-projekt .vg-projekt-spalten > .wp-block-column:first-child { align-self: stretch; }
body.single-projekt .vg-projektdaten {
	position: sticky; top: calc(var(--vg-kopf-h, 92px) + 32px);
	display: block; margin: 0; border-top: 1px solid var(--vg-text);
}
body.single-projekt .vg-projektdaten > div, body.single-projekt .vg-projektdaten dt { margin: 0; }
body.single-projekt .vg-projektdaten dt {
	padding-top: 12px; font-family: var(--vg-sans); font-size: 11px !important; font-weight: 500 !important;
	letter-spacing: 0.16em; text-transform: uppercase; color: var(--wp--preset--color--meta) !important;
}
body.single-projekt .vg-projektdaten dd {
	margin: 4px 0 0; padding-bottom: 12px; border-bottom: 1px solid var(--vg-linie);
	font-family: var(--vg-sans); font-size: 14px !important; line-height: 1.45; color: var(--vg-text);
}

/* Inhalt */
body:not(.woocommerce):not(.woocommerce-page).single-projekt .vg-projekt-spalten .wp-block-post-content { counter-reset: vg-abschnitt; }

/* Einleitung = erster Absatz */
body:not(.woocommerce):not(.woocommerce-page).single-projekt .vg-projekt-spalten .wp-block-post-content > p:first-child {
	font-family: var(--vg-serif) !important; font-size: clamp(19px, 1.6vw, 24px) !important; line-height: 1.45 !important;
	color: var(--vg-text) !important; max-width: 34em !important; margin: 0 0 var(--vg-v3, 72px) !important; letter-spacing: -0.005em;
}

/* Abschnitte: Nummer, Linie, Titel */
body:not(.woocommerce):not(.woocommerce-page).single-projekt .vg-projekt-spalten .wp-block-post-content > :is(h2, h3) {
	counter-increment: vg-abschnitt;
	max-width: none !important; border-top: 1px solid var(--vg-linie);
	padding-top: 16px !important; margin-top: var(--vg-v3, 72px) !important; margin-bottom: var(--vg-v1, 14px) !important;
	font-size: clamp(20px, 1.6vw, 24px) !important; line-height: 1.25 !important;
}
body:not(.woocommerce):not(.woocommerce-page).single-projekt .vg-projekt-spalten .wp-block-post-content > :is(h2, h3)::before {
	content: counter(vg-abschnitt, decimal-leading-zero); display: block; margin-bottom: 10px;
	font-family: var(--vg-sans); font-size: 11px; letter-spacing: 0.16em; color: var(--wp--preset--color--meta);
}

/* Fliesstext */
body:not(.woocommerce):not(.woocommerce-page).single-projekt .vg-projekt-spalten .wp-block-post-content > p:not(:first-child):not([class*="vg-"]),
body:not(.woocommerce):not(.woocommerce-page).single-projekt .vg-projekt-spalten .wp-block-post-content .vg-zweispaltig p {
	font-size: var(--wp--preset--font-size--text) !important; line-height: 1.7 !important;
	color: var(--wp--preset--color--sekundaer) !important; max-width: var(--vg-textbreite, 620px);
}

/* Bilder: volle Spaltenbreite, Legende klein */
body:not(.woocommerce):not(.woocommerce-page).single-projekt .vg-projekt-spalten .wp-block-post-content > :is(.wp-block-image, .vg-bildpaar, .wp-block-columns, .vg-galerie) {
	margin-top: var(--vg-v2, 32px) !important; margin-bottom: var(--vg-v2, 32px) !important; max-width: none !important;
}
body.single-projekt .vg-projekt-spalten .wp-block-post-content > .wp-block-image { width: 100% !important; display: block !important; }
body.single-projekt .vg-projekt-spalten .wp-block-post-content > .wp-block-image img { width: 100% !important; height: auto !important; max-height: 82vh !important; object-fit: cover !important; object-position: center; }
body.single-projekt .vg-projekt-spalten figcaption {
	font-family: var(--vg-sans) !important; font-size: 11px !important; letter-spacing: 0.06em; color: var(--wp--preset--color--meta) !important; margin-top: 10px !important;
}

@media (max-width: 781px) {
	body.single-projekt .vg-projektdaten { position: static; display: grid; grid-template-columns: 1fr 1fr; column-gap: 20px; }
}

/* ==========================================================================
   03 – 1.1.0: Projektübersicht als Bildstrecke, kompakter Seitenkopf, Shop mit weniger Leerraum
   ========================================================================== */

/* Shop: weniger Leerraum im Kopf */
:is(.tax-product_cat, .post-type-archive-product, .search) .vg-seitenkopf:not(:has(.vg-markenbild)) { gap: 8px !important; margin-bottom: 12px !important; }
.tax-product_cat .vg-seitenkopf > p.has-klein-font-size { display: none !important; } /* allgemeiner Shop-Text nur auf der Shop-Startseite */
.vg-shop .vg-filter { padding-bottom: 0 !important; gap: 6px 24px !important; }
.vg-unterfilter { margin-top: 8px !important; gap: 4px 20px !important; }
.vg-shop-leiste { margin: 18px 0 20px !important; padding-top: 12px !important; }
.vg-shop-leiste :is(input, select) { min-height: 38px !important; height: 38px; }
.vg-shop .vg-shopfilter { margin-top: 4px !important; }

/* Kopf- und Fusszeile auf derselben linken Kante wie der Inhalt (auch auf breiten Bildschirmen) */
.vg-kopf { padding-left: max(var(--vg-rand), calc((100% - var(--wp--style--global--wide-size, 1440px)) / 2)) !important; padding-right: max(var(--vg-rand), calc((100% - var(--wp--style--global--wide-size, 1440px)) / 2)) !important; }

/* ==========================================================================
   03 – 1.2.0: Projektübersicht nach Vorbild Bild 2
   Auftakt (erstes Projekt bildschirmfüllend) → Titel + Auswahl → Raster mit Linien.
   Kopfzeile erscheint beim Hochscrollen auf allen Seiten (auch Startseite).
   ========================================================================== */

/* Auftakt */
.vg-projekte-z > .vg-projekt-auftakt { width: 100vw !important; max-width: 100vw !important; margin: 0 0 0 calc(50% - 50vw) !important; }
.vg-projekt-auftakt .vg-auftakt-link { position: relative; display: block; height: calc(100svh - var(--vg-kopf-h, 92px) - var(--wp-admin--admin-bar--height, 0px)); min-height: 520px; overflow: hidden; color: #F7F5F0 !important; text-decoration: none !important; background: none !important; }
.vg-projekt-auftakt .vg-auftakt-bild { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.8s cubic-bezier(.2,.7,.2,1); }
.vg-projekt-auftakt .vg-auftakt-leer { background: var(--vg-dunkel); }
.vg-projekt-auftakt .vg-auftakt-link:hover .vg-auftakt-bild { transform: scale(1.015); }
.vg-projekt-auftakt .vg-auftakt-link::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(18,17,16,.66) 0%, rgba(18,17,16,.2) 40%, rgba(18,17,16,0) 62%); }
.vg-projekt-auftakt .vg-auftakt-text { position: absolute; z-index: 1; left: max(var(--vg-rand), calc((100% - 1440px) / 2)); right: var(--vg-rand); bottom: clamp(32px, 6vh, 72px); display: flex; flex-direction: column; gap: 12px; max-width: 900px; }
.vg-auftakt-info { font-family: var(--vg-sans); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; opacity: .9; }
.vg-auftakt-titel { font-family: var(--vg-sans); font-size: clamp(44px, 7vw, 112px); line-height: .95; letter-spacing: -0.04em; }
.vg-auftakt-intro { font-family: var(--vg-sans); font-size: clamp(15px, 1.2vw, 18px); line-height: 1.5; max-width: 56ch; opacity: .92; }
.vg-auftakt-mehr { font-family: var(--vg-sans); font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; align-self: flex-start; padding-bottom: 4px; border-bottom: 1px solid rgba(247,245,240,.7); margin-top: 6px; }
.vg-auftakt-mehr::after { content: " \2192"; }

/* Titel + Auswahl */
.vg-projekte-z .vg-seitenkopf-projekte { flex-direction: row !important; flex-wrap: wrap !important; align-items: flex-end !important; justify-content: space-between !important;
	gap: 16px 40px !important; padding: clamp(40px, 5vw, 72px) 0 clamp(20px, 2.4vw, 28px) !important; margin: 0 auto !important; max-width: var(--wp--style--global--wide-size, 1440px) !important; }
.vg-projekte-z .vg-seitenkopf-projekte > * { max-width: none !important; margin: 0 !important; }
.vg-filterleiste { display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }
.vg-auswahl select {
	appearance: none; -webkit-appearance: none; min-width: 280px; height: 46px; padding: 0 44px 0 16px;
	font-family: var(--vg-sans); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--vg-text);
	background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23222' stroke-width='1.3'/%3E%3C/svg%3E") no-repeat right 16px center;
	border: 1px solid var(--vg-text); border-radius: 0; cursor: pointer;
}
.vg-auswahl select:focus-visible { outline: 2px solid var(--vg-akzent); outline-offset: 2px; }
.vg-filterleiste-unten { display: flex; gap: 20px; align-items: baseline; font-family: var(--vg-sans); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--wp--preset--color--meta); }
.vg-filterleiste-unten a { color: var(--vg-text) !important; text-decoration: none !important; padding-bottom: 3px; border-bottom: 1px solid var(--vg-text); background: none !important; }
.vg-filterleiste-unten a.ist-aktiv { border-bottom-color: transparent; color: var(--wp--preset--color--meta) !important; }
.vg-anzahl strong { color: var(--vg-text); font-weight: 500; }

/* Raster mit Linien */
.vg-projekte-raster { border-top: 1px solid var(--vg-linie); overflow: hidden; }
/* 1.18.1: erstes Projekt nicht mehr ausgeblendet – Liste zeigt alle Projekte der Auswahl */
.vg-projektraster.vg-projekte-raster .wp-block-post-template.is-layout-grid {
	display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 0 !important; margin: 0 -1px 0 0 !important;
}
.vg-projektraster.vg-projekte-raster .wp-block-post-template > li {
	grid-column: auto !important; grid-row: auto; display: flex; flex-direction: column; margin: 0 !important;
	padding: 20px 20px 24px; border-right: 1px solid var(--vg-linie); border-bottom: 1px solid var(--vg-linie);
}
.vg-projektraster.vg-projekte-raster .wp-block-post-template > li .wp-block-post-featured-image {
	height: auto !important; aspect-ratio: 16 / 10; margin: 0 0 18px !important; overflow: hidden;
}
.vg-projektraster.vg-projekte-raster .wp-block-post-featured-image img { width: 100% !important; height: 100% !important; object-fit: cover !important; transition: transform 1.4s cubic-bezier(.2,.7,.2,1); }
.vg-projektraster.vg-projekte-raster li:hover .wp-block-post-featured-image img { transform: scale(1.03); }
/* Erstes Rasterprojekt gross (2 × 2) */
body:not(.paged) .vg-projektraster.vg-projekte-raster .wp-block-post-template > li:nth-child(1) { grid-column: span 2 !important; grid-row: span 2; }
body:not(.paged) .vg-projektraster.vg-projekte-raster .wp-block-post-template > li:nth-child(1) .wp-block-post-featured-image { aspect-ratio: auto; flex: 1 1 auto; min-height: 420px; }
body:not(.paged) .vg-projektraster.vg-projekte-raster .wp-block-post-template > li:nth-child(1) .vg-karte-text { display: none; }
/* Karteninhalt */
.vg-projekte-raster .vg-karte-info { display: flex; flex-direction: column; gap: 10px; flex: 0 0 auto; }
.vg-projekte-raster .vg-karte-titel { margin: 0 !important; font-family: var(--vg-sans) !important; font-size: clamp(18px, 1.5vw, 22px) !important; line-height: 1.25 !important; letter-spacing: -0.015em !important; text-transform: none !important; font-weight: 400 !important; }
.vg-projekte-raster .vg-karte-titel a { display: flex; justify-content: space-between; gap: 16px; color: var(--vg-text) !important; text-decoration: none !important; background: none !important; }
.vg-projekte-raster .vg-karte-titel a::after { content: "\2192"; flex: 0 0 auto; transition: transform .35s ease; }
.vg-projekte-raster li:hover .vg-karte-titel a::after { transform: translateX(4px); }
.vg-projekte-raster .vg-karte-text { margin: 0 !important; }
.vg-projekte-raster .vg-karte-text p { font-size: 14px !important; line-height: 1.55 !important; color: var(--wp--preset--color--sekundaer) !important; -webkit-line-clamp: 3; line-clamp: 3; }
.vg-projekte-raster .vg-infozeile { align-self: flex-start; margin: 6px 0 0 !important; padding: 4px 12px; border: 1px solid var(--vg-text); border-radius: 999px; font-size: 10px !important; letter-spacing: 0.12em; color: var(--vg-text) !important; white-space: nowrap; }
.vg-projekte-raster .wp-block-query-pagination { margin-top: 40px; font-family: var(--vg-sans); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; }

@media (max-width: 1023px) {
	.vg-projektraster.vg-projekte-raster .wp-block-post-template.is-layout-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
	body:not(.paged) .vg-projektraster.vg-projekte-raster .wp-block-post-template > li:nth-child(1) { grid-row: auto; }
	body:not(.paged) .vg-projektraster.vg-projekte-raster .wp-block-post-template > li:nth-child(1) .wp-block-post-featured-image { min-height: 0; aspect-ratio: 16 / 9; }
}
@media (max-width: 640px) {
	.vg-projektraster.vg-projekte-raster .wp-block-post-template.is-layout-grid { grid-template-columns: minmax(0, 1fr) !important; }
	.vg-projektraster.vg-projekte-raster .wp-block-post-template > li { border-right: 0 !important; padding: 16px 0 20px; }
	body:not(.paged) .vg-projektraster.vg-projekte-raster .wp-block-post-template > li:nth-child(1) { grid-column: auto !important; }
	.vg-filterleiste { align-items: stretch; width: 100%; }
	.vg-auswahl select { width: 100%; }
}

/* ==========================================================================
   03 – 1.3.0: Erstes Bild immer bis ganz nach oben
   Seiten mit grossem Anfangsbild (Startseite, Projektübersicht, Projekte, Porträts,
   Seiten mit Grossbild) erhalten «vg-bildkopf»: Kopfzeile liegt transparent auf dem Bild
   und wird beim Hochscrollen hell.
   ========================================================================== */
/* Kopfzeile steht fest oben (JS setzt «vg-kopf-schwebend»), transparent über dem Bild */
body.vg-bildkopf .wp-site-blocks > header:first-child,
body.vg-bildkopf .wp-site-blocks > div:first-child {
	position: fixed !important; top: var(--wp-admin--admin-bar--height, 0px) !important; left: 0; right: 0; z-index: 90; transform: translateY(0);
}
body.vg-bildkopf .wp-site-blocks { padding-top: 0 !important; }
body.vg-bildkopf .vg-kopf { transition: background-color .35s ease, color .35s ease, border-color .35s ease; }
body.vg-bildkopf:not(.vg-kopf-hell) .vg-kopf {
	background: linear-gradient(to bottom, rgba(18,17,16,.38), rgba(18,17,16,0)) no-repeat !important; border: 0 !important; color: #F7F5F0 !important;
}
body.vg-bildkopf:not(.vg-kopf-hell) .vg-kopf :is(.vg-logo, .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content,
	.wp-block-navigation__responsive-container-open, .wc-block-mini-cart__button, .vg-suche-knopf, .vg-konto-knopf, .vg-shop-knopf) { color: #F7F5F0 !important; }
body.vg-bildkopf:not(.vg-kopf-hell) .vg-kopf .wc-block-mini-cart__badge { background: #F7F5F0 !important; color: #222221 !important; }
/* Weiss, sobald das Bild unter der Kopfzeile durch ist */
body.vg-bildkopf.vg-kopf-hell .vg-kopf { background: var(--vg-creme) !important; color: var(--vg-text) !important; }
body.vg-bildkopf.vg-kopf-hell .vg-kopf :is(.vg-logo, .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content,
	.wp-block-navigation__responsive-container-open, .wc-block-mini-cart__button, .vg-suche-knopf, .vg-konto-knopf, .vg-shop-knopf) { color: var(--vg-text) !important; }
body.vg-bildkopf.vg-kopf-hell .vg-kopf .wc-block-mini-cart__badge { background: var(--vg-text) !important; color: var(--vg-creme) !important; }
body.vg-bildkopf.vg-kopf-weg .wp-site-blocks > header:first-child,
body.vg-bildkopf.vg-kopf-weg .wp-site-blocks > div:first-child { transform: translateY(calc(-100% - var(--wp-admin--admin-bar--height, 0px) - 2px)); }
body.vg-bildkopf .vg-main { margin-top: 0 !important; }

/* Anfangsbilder füllen den ganzen Bildschirm */
body.vg-bildkopf .vg-projekt-auftakt .vg-auftakt-link,
body.vg-bildkopf .wp-block-post-content > .vg-hero:first-child { height: calc(100svh - var(--wp-admin--admin-bar--height, 0px)) !important; }
body.vg-bildkopf .vg-projekt-hero { min-height: calc(100svh - var(--wp-admin--admin-bar--height, 0px)) !important; height: calc(100svh - var(--wp-admin--admin-bar--height, 0px)) !important; }
body.vg-bildkopf .vg-slider { height: 100svh !important; }
body.vg-bildkopf .vg-seite-grossbild, body.vg-bildkopf .vg-seite:has(.wp-block-post-content > .vg-hero:first-child) { padding-top: 0 !important; }

/* 1.3.2: Kopfzeile auf Bildseiten ohne Linie und immer fest oben (kein Ausblenden) */
body.vg-bildkopf .vg-kopf,
body.vg-bildkopf .wp-site-blocks > header:first-child,
body.vg-bildkopf .wp-site-blocks > div:first-child { border: 0 !important; border-bottom: 0 !important; box-shadow: none !important; outline: 0 !important; }
body.vg-bildkopf .vg-kopf::before, body.vg-bildkopf .vg-kopf::after { display: none !important; }
body.vg-bildkopf .wp-site-blocks > header:first-child,
body.vg-bildkopf .wp-site-blocks > div:first-child { transform: none !important; }

/* ==========================================================================
   03 – 1.3.3: Eine linke Kante für alles (Logo, Bildtexte, Titel, Raster)
   ========================================================================== */
:root { --vg-kante: max(var(--vg-rand), calc((100vw - var(--vg-sbw, 0px) - var(--wp--style--global--wide-size, 1440px)) / 2)); }

/* Vollbilder exakt fensterbreit (ohne Versatz durch die Bildlaufleiste) */
.vg-projekte-z > .vg-projekt-auftakt,
.wp-block-post-content > .vg-hero,
.vg-dunkel .vg-d-hero, .vg-dunkel .vg-d-banner {
	width: calc(100vw - var(--vg-sbw, 0px)) !important; max-width: none !important;
	margin-left: calc(50% - 50vw + var(--vg-sbw, 0px) / 2) !important; margin-right: 0 !important;
}
/* Texte auf Vollbildern auf der gemeinsamen Kante */
.vg-projekt-auftakt .vg-auftakt-text { left: var(--vg-kante) !important; right: var(--vg-kante) !important; }
.wp-block-post-content > .vg-hero.vg-hero-links > .vg-hero-text { left: var(--vg-kante) !important; }
.wp-block-post-content > .vg-hero:not(.vg-hero-links) > .vg-hero-text { right: var(--vg-kante) !important; }
.vg-slider-leitsatz, .vg-folie-text { --vg-rand: var(--vg-kante); }

/* Projektübersicht: weniger Luft zwischen Bild, Titel und Raster */
.vg-projekte-z .vg-seitenkopf-projekte { padding: clamp(32px, 4vw, 56px) 0 clamp(16px, 2vw, 24px) !important; align-items: flex-end !important; }

/* Raster: erste Spalte ohne Innenabstand links → Bild und Text auf der Kante */
@media (min-width: 1024px) {
	body:not(.paged) .vg-projektraster.vg-projekte-raster .wp-block-post-template > li:nth-child(3n+1),
	body.paged .vg-projektraster.vg-projekte-raster .wp-block-post-template > li:nth-child(3n+1) { padding-left: 0 !important; }
	.vg-projektraster.vg-projekte-raster .wp-block-post-template > li { padding-left: 24px; padding-right: 24px; }
}
@media (max-width: 1023px) and (min-width: 641px) {
	.vg-projektraster.vg-projekte-raster .wp-block-post-template > li { padding-left: 20px; padding-right: 20px; }
	body:not(.paged) .vg-projektraster.vg-projekte-raster .wp-block-post-template > li:nth-child(1),
	body:not(.paged) .vg-projektraster.vg-projekte-raster .wp-block-post-template > li:nth-child(2n+2),
	body.paged .vg-projektraster.vg-projekte-raster .wp-block-post-template > li:nth-child(2n+1) { padding-left: 0 !important; }
}
.vg-projekte-z > .vg-projekte-raster { max-width: var(--wp--style--global--wide-size, 1440px) !important; margin-left: auto !important; margin-right: auto !important; }

/* ==========================================================================
   03 – 1.3.4
   ========================================================================== */
/* Navigation beginnt auf der Textachse (wie Text auf Projekt- und Inhaltsseiten) */
@media (min-width: 1000px) {
	.vg-kopf { column-gap: 0 !important; }
	.vg-kopf > .vg-logo { flex: 0 0 var(--vg-achse) !important; }
	.vg-kopf .vg-hauptnav { margin-left: 0 !important; }
	.vg-kopf .vg-kopf-rechts { margin-left: auto !important; }
}

/* Über einem Vollbild: Kopfbereich wird weiss, sobald die Maus hineinfährt oder ein Menü offen ist */
body.vg-bildkopf:not(.vg-kopf-hell) .vg-kopf:is(:hover, :focus-within) { background: var(--vg-creme) !important; color: var(--vg-text) !important; }
body.vg-bildkopf:not(.vg-kopf-hell) .vg-kopf:is(:hover, :focus-within) :is(.vg-logo, .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content,
	.wp-block-navigation__responsive-container-open, .wc-block-mini-cart__button, .vg-suche-knopf, .vg-konto-knopf, .vg-shop-knopf) { color: var(--vg-text) !important; }
body.vg-bildkopf:not(.vg-kopf-hell) .vg-kopf:is(:hover, :focus-within) .wc-block-mini-cart__badge { background: var(--vg-text) !important; color: var(--vg-creme) !important; }

/* 1.4.0: Auftakt als Bildwechsel mit Pfeilen (Zähler + ‹ › unten rechts) */
.vg-projekt-auftakt { position: relative; height: calc(100svh - var(--vg-kopf-h, 92px) - var(--wp-admin--admin-bar--height, 0px)); min-height: 520px; overflow: hidden; background: var(--vg-dunkel); }
body.vg-bildkopf .vg-projekt-auftakt { height: calc(100svh - var(--wp-admin--admin-bar--height, 0px)); }
.vg-projekt-auftakt .vg-auftakt-link,
body.vg-bildkopf .vg-projekt-auftakt .vg-auftakt-link { position: absolute !important; inset: 0; height: 100% !important; min-height: 0 !important; }
section.vg-projekt-auftakt > a.vg-auftakt-link { opacity: 0; visibility: hidden; transition: opacity .9s ease, visibility 0s linear .9s; }
section.vg-projekt-auftakt > a.vg-auftakt-link.ist-aktiv { opacity: 1; visibility: visible; z-index: 1; transition: opacity .9s ease, visibility 0s; }
.vg-auftakt-steuerung {
	position: absolute; z-index: 3; right: var(--vg-kante); bottom: clamp(32px, 6vh, 72px);
	display: flex; align-items: center; gap: 8px; color: #F7F5F0;
}
.vg-auftakt-zaehler { font-family: var(--vg-sans); font-size: 12px; letter-spacing: 0.16em; margin-right: 14px; font-variant-numeric: tabular-nums; text-shadow: 0 0 12px rgba(0,0,0,.35); }
.vg-auftakt-pfeil { width: 48px; height: 48px; display: grid; place-items: center; padding: 0; background: transparent; color: #F7F5F0; border: 1px solid rgba(247,245,240,.7); border-radius: 50%; cursor: pointer; transition: background .3s ease, color .3s ease, border-color .3s ease; }
.vg-auftakt-pfeil svg { width: 10px; height: 20px; }
.vg-auftakt-weiter svg { transform: scaleX(-1); }
.vg-auftakt-pfeil:is(:hover, :focus-visible) { background: #F7F5F0; color: #222221; border-color: #F7F5F0; }
@media (max-width: 781px) { .vg-auftakt-steuerung { bottom: auto; top: calc(var(--vg-kopf-h, 72px) + 16px); } .vg-auftakt-pfeil { width: 40px; height: 40px; } }
@media (prefers-reduced-motion: reduce) { .vg-projekt-auftakt .vg-auftakt-link { transition: none; } }

/* ==========================================================================
   03 – 1.4.0: Projektseiten – weniger Abstand zwischen Bild und nächstem Abschnitt
   ========================================================================== */
body:not(.woocommerce):not(.woocommerce-page).single-projekt .vg-projekt-spalten .wp-block-post-content > :is(h2, h3) {
	margin-top: clamp(40px, 4vw, 56px) !important;
}
body:not(.woocommerce):not(.woocommerce-page).single-projekt .vg-projekt-spalten .wp-block-post-content > :is(.wp-block-image, .vg-bildpaar, .wp-block-columns, .vg-galerie) + :is(h2, h3) {
	margin-top: 0 !important;
}
body:not(.woocommerce):not(.woocommerce-page).single-projekt .vg-projekt-spalten .wp-block-post-content > :is(.wp-block-image, .vg-bildpaar, .wp-block-columns, .vg-galerie):has(+ :is(h2, h3)) {
	margin-bottom: clamp(40px, 4vw, 56px) !important;
}
body.single-projekt .vg-projekt-spalten .vg-bildpaar .wp-block-image,
body.single-projekt .vg-projekt-spalten .vg-bildpaar .wp-block-column { margin-bottom: 0 !important; }

/* ==========================================================================
   03 – 1.5.0: Fusszeile als Bildkarte (zufällige Projektbilder, Wechsel alle 10 s)
   ========================================================================== */
footer.vg-fuss.vg-fuss-z { padding: clamp(48px, 6vw, 96px) var(--vg-rand) var(--vg-rand) !important; margin: 0 !important; background: var(--wp--preset--color--creme); }
.vg-fuss-karte {
	position: relative; overflow: hidden; border-radius: 6px; isolation: isolate;
	min-height: clamp(520px, 72vh, 780px); display: flex; flex-direction: column;
	padding: clamp(28px, 3vw, 44px); color: #F7F5F0; background: var(--vg-dunkel, #1A1A19);
	font-family: var(--vg-sans);
}
.vg-fuss-bilder { position: absolute; inset: 0; z-index: -1; }
.vg-fuss-bilder img.vg-fuss-bild { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.8s ease; max-height: none !important; margin: 0 !important; }
.vg-fuss-bilder img.vg-fuss-bild.ist-aktiv { opacity: 1; }
.vg-fuss-bilder::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(18,17,16,.48) 0%, rgba(18,17,16,.22) 32%, rgba(18,17,16,.30) 55%, rgba(18,17,16,.72) 100%); }

.vg-fuss-kopf { display: flex; justify-content: space-between; align-items: flex-start; gap: 32px; position: relative; z-index: 2; }
.vg-fuss-z .vg-fuss-logo { color: #F7F5F0 !important; display: block; line-height: 0; }
.vg-fuss-z .vg-fuss-logo svg { fill: currentColor; }

.vg-fuss-nav > ul { list-style: none; margin: 0; padding: 0; display: flex; gap: clamp(24px, 3vw, 44px); }
.vg-fuss-nav-punkt { position: relative; margin: 0 !important; }
.vg-fuss-z a { color: inherit !important; text-decoration: none !important; background-image: linear-gradient(currentColor, currentColor); background-repeat: no-repeat; background-position: 0 100%; background-size: 0 1px; transition: background-size .35s ease, opacity .25s; padding-bottom: 2px; }
.vg-fuss-z a:is(:hover, :focus-visible) { background-size: 100% 1px; }
.vg-fuss-nav-punkt > a { font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; }
.vg-fuss-sub {
	list-style: none; margin: 0; padding: 18px 0 0; position: absolute; top: 100%; left: 0; min-width: 220px;
	display: flex; flex-direction: column; gap: 9px;
	opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity .3s ease, transform .3s ease, visibility 0s linear .3s;
}
.vg-fuss-nav-punkt:last-child .vg-fuss-sub { left: auto; right: 0; text-align: right; }
.vg-fuss-sub li { margin: 0 !important; }
.vg-fuss-sub a { font-size: 14px; letter-spacing: 0.01em; opacity: .86; white-space: nowrap; }
.vg-fuss-sub a:hover { opacity: 1; }
.vg-fuss-nav-punkt:is(:hover, :focus-within, .ist-offen) .vg-fuss-sub { opacity: 1; visibility: visible; transform: none; transition: opacity .3s ease, transform .3s ease, visibility 0s; }
/* Dunkler Schleier hinter offenem Untermenü, damit es auf hellen Bildern lesbar bleibt */
.vg-fuss-karte:has(.vg-fuss-nav-punkt:is(:hover, :focus-within, .ist-offen)) .vg-fuss-bilder::after { background: linear-gradient(to bottom, rgba(18,17,16,.66) 0%, rgba(18,17,16,.40) 45%, rgba(18,17,16,.72) 100%); }
.vg-fuss-bilder::after { transition: background .4s; }

.vg-fuss-z .vg-fuss-satz {
	margin: auto 0 0 !important; padding-top: 48px; max-width: 30em;
	font-family: var(--vg-sans); font-size: clamp(20px, 2vw, 30px) !important; line-height: 1.3 !important; letter-spacing: -0.01em; color: #F7F5F0 !important;
}
.vg-fuss-leiste {
	display: flex; justify-content: space-between; align-items: center; gap: 16px 32px; flex-wrap: wrap;
	margin-top: clamp(28px, 3vw, 40px); padding-top: clamp(20px, 2vw, 28px); border-top: 1px solid rgba(247,245,240,.28);
}
.vg-fuss-social { display: flex; gap: 18px; }
.vg-fuss-social a { display: inline-flex; padding: 0; background: none !important; opacity: .9; }
.vg-fuss-social a:hover { opacity: 1; transform: translateY(-1px); }
.vg-fuss-z .vg-fuss-recht { margin: 0 !important; display: flex; flex-wrap: wrap; gap: 8px 40px; justify-content: flex-end; font-size: 12px !important; letter-spacing: 0.06em; text-transform: uppercase; color: #F7F5F0 !important; }
.vg-fuss-copy { opacity: .86; }

@media (max-width: 781px) {
	.vg-fuss-kopf { flex-direction: column; gap: 28px; }
	.vg-fuss-nav > ul { gap: 22px; }
	.vg-fuss-nav-punkt:last-child .vg-fuss-sub { left: 0; right: auto; text-align: left; }
	.vg-fuss-karte { min-height: 620px; }
	.vg-fuss-leiste { flex-direction: column; align-items: flex-start; }
	.vg-fuss-z .vg-fuss-recht { justify-content: flex-start; flex-direction: column; gap: 10px; }
}
@media (prefers-reduced-motion: reduce) { .vg-fuss-bilder img.vg-fuss-bild { transition: none; } }

/* 03 – 1.5.1: Fusskarte niedriger, Untermenü enger */
.vg-fuss-karte { min-height: clamp(420px, 56vh, 600px); }
.vg-fuss-sub { padding-top: 12px; gap: 4px; }
.vg-fuss-sub a { font-size: 13.5px; line-height: 1.45; }
@media (max-width: 781px) { .vg-fuss-karte { min-height: 520px; } }

/* 03 – 1.5.2: Projektseiten – weniger Abstand zwischen Einleitung und erstem Abschnitt */
body:not(.woocommerce):not(.woocommerce-page).single-projekt .vg-projekt-spalten .wp-block-post-content > p:first-child:has(+ :is(h2, h3)) { margin-bottom: 0 !important; }
body:not(.woocommerce):not(.woocommerce-page).single-projekt .vg-projekt-spalten .wp-block-post-content > p:first-child + :is(h2, h3) { margin-top: clamp(40px, 4vw, 56px) !important; }

/* ==========================================================================
   03 – 1.6.0: Seiten (Über mich, Leistungsprofil, Kontakt) gestaltet wie Projektseiten – ohne Nummern
   ========================================================================== */
body.vg-editorial .wp-block-post-content { --vg-ab: clamp(40px, 4vw, 56px); }

/* Abschnittstitel: feine Linie darüber, Titel, Text direkt darunter */
body.vg-editorial:not(.woocommerce) .wp-block-post-content > :is(h2, h3):not([class*="vg-"]),
body.vg-editorial:not(.woocommerce) .wp-block-post-content .vg-projekt-text .wp-block-column > :is(h2, h3):first-child {
	max-width: none !important; border-top: 1px solid var(--wp--preset--color--linie);
	padding-top: 16px !important; margin-top: var(--vg-ab) !important; margin-bottom: var(--vg-v1, 14px) !important;
	font-family: var(--vg-sans) !important; font-weight: 400 !important;
	font-size: clamp(20px, 1.6vw, 24px) !important; line-height: 1.25 !important; letter-spacing: -0.005em;
}
body.vg-editorial:not(.woocommerce) .wp-block-post-content .vg-projekt-text .wp-block-column > :is(h2, h3):first-child { margin-top: 0 !important; }
body.vg-editorial:not(.woocommerce) .wp-block-post-content > :is(h2, h3):not([class*="vg-"])::before { content: none !important; }

/* Text + Bild (Spalten): Linie über die ganze Breite – darum Spalten oben bündig, Abstand wie Abschnitte */
body.vg-editorial:not(.woocommerce) .wp-block-post-content > .wp-block-columns.vg-projekt-text { margin-top: var(--vg-ab) !important; margin-bottom: 0 !important; align-items: flex-start !important; }

/* Fliesstext */
body.vg-editorial:not(.woocommerce) .wp-block-post-content :is(p:not([class*="vg-"]):not([class*="-font-size"])) {
	font-size: var(--wp--preset--font-size--text) !important; line-height: 1.7 !important; color: var(--wp--preset--color--sekundaer);
}
body.vg-editorial:not(.woocommerce) .wp-block-post-content > p:not([class*="vg-"]) { max-width: var(--vg-textbreite, 620px) !important; margin-top: 0 !important; margin-bottom: 1em !important; }
body.vg-editorial .vg-zweispaltig { column-count: 1 !important; max-width: var(--vg-textbreite, 620px) !important; }

/* Bilder: volle Inhaltsbreite, Legende klein und links darunter */
body.vg-editorial:not(.woocommerce) .wp-block-post-content > :is(.wp-block-image, .vg-bildpaar, .vg-portraet-bildpaar, .wp-block-columns:not(.vg-projekt-text), .vg-galerie) {
	margin-top: var(--vg-v2, 32px) !important; margin-bottom: var(--vg-v2, 32px) !important;
}
body.vg-editorial:not(.woocommerce) .wp-block-post-content > :is(.wp-block-image, .vg-bildpaar, .vg-portraet-bildpaar, .wp-block-columns, .vg-galerie):has(+ :is(h2, h3)) { margin-bottom: 0 !important; }
body.vg-editorial .wp-block-post-content > .wp-block-image:not(.vg-hero *) { display: block !important; width: auto; }
body.vg-editorial .wp-block-post-content > .wp-block-image:not(.vg-hero *) img {
	display: block; width: 100% !important; height: auto !important; max-height: 82vh !important; object-fit: cover !important; object-position: center;
}
body.vg-editorial .wp-block-post-content figure:not(.vg-hero *) figcaption,
body.vg-editorial .wp-block-post-content figure:not(.vg-hero *) .wp-element-caption {
	display: block !important; width: auto !important; float: none !important; position: static !important;
	text-align: left !important; margin: 10px 0 0 !important; padding: 0 !important; max-width: none !important;
	font-family: var(--vg-sans) !important; font-size: 11px !important; line-height: 1.45 !important; letter-spacing: 0.06em; color: var(--wp--preset--color--meta) !important;
}

/* Kernsatz, Einladung: gleicher Abschnittsabstand */
body.vg-editorial .wp-block-post-content > :is(.vg-kernsatz, .wp-block-pullquote, .wp-block-quote) { margin-top: var(--vg-ab) !important; }
body.vg-editorial .wp-block-post-content > .vg-einladung { margin-top: var(--vg-v2, 32px) !important; }
body.vg-editorial:not(.woocommerce) .vg-seite .wp-block-post-content.is-layout-constrained > :is(h2, h3):not([class*="vg-"]) {
	max-width: calc(var(--wp--style--global--wide-size) - var(--vg-achse, 0px)) !important; margin-right: auto !important;
}

/* 03 – 1.6.1: Projektraster – Info dezent als Text statt Rahmen */
.vg-projekte-raster .vg-infozeile {
	padding: 0 !important; border: 0 !important; border-radius: 0 !important; margin: 4px 0 0 !important;
	font-size: 10px !important; letter-spacing: 0.14em; color: var(--wp--preset--color--meta) !important; transition: color .3s ease;
}
.vg-projekte-raster li:hover .vg-infozeile { color: var(--vg-text) !important; }

/* 03 – 1.6.2: Projektraster – Info direkt unter dem Titel, Text darunter */
.vg-projekte-raster .vg-karte-info > .vg-karte-titel { order: 0; }
.vg-projekte-raster .vg-karte-info > .vg-infozeile { order: 1; margin: -2px 0 0 !important; }
.vg-projekte-raster .vg-karte-info > :not(.vg-karte-titel):not(.vg-infozeile) { order: 2; }

/* 03 – 1.6.3: Keine kleinen Abschnittsnummern mehr */
body .wp-block-post-content :is(h2, h3)::before { content: none !important; display: none !important; }

/* 03 – 1.6.4: Projektseiten – Inhalt (Bild, Titel, Text) beginnt genau auf der Navigationsachse */
@media (min-width: 1000px) {
	body:is(.single-projekt, .single) .vg-projekt-spalten.wp-block-columns {
		column-gap: clamp(40px, 6vw, 112px) !important; gap: 0 clamp(40px, 6vw, 112px) !important; flex-wrap: nowrap !important;
	}
	body:is(.single-projekt, .single) .vg-projekt-spalten.wp-block-columns > .wp-block-column:first-child {
		flex: 0 0 220px !important; width: 220px !important; max-width: 220px !important; min-width: 0;
	}
	body:is(.single-projekt, .single) .vg-projekt-spalten.wp-block-columns > .wp-block-column:not(:first-child) {
		flex: 1 1 0 !important; min-width: 0; margin-left: 0 !important;
	}
}
/* Kontakt als Hauptpunkt: gleicher Stil wie die anderen */
.vg-kopf .vg-hauptnav .wp-block-navigation__container > .wp-block-navigation-link { margin: 0; }

/* ==========================================================================
   03 – 1.7.0
   ========================================================================== */
/* Projektfilter: alle Kategorien als Textlinks in einer Linie */
.vg-filterleiste.vg-filterleiste-linie { flex-direction: row !important; align-items: baseline !important; flex-wrap: wrap; gap: 12px clamp(28px, 3vw, 48px) !important; }
.vg-filter-links { display: flex; flex-wrap: wrap; gap: 10px clamp(18px, 2vw, 32px); font-family: var(--vg-sans); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; }
.vg-filter-links a {
	color: var(--wp--preset--color--meta) !important; text-decoration: none !important; padding-bottom: 4px;
	background-image: linear-gradient(currentColor, currentColor) !important; background-repeat: no-repeat !important; background-position: 0 100% !important; background-size: 0 1px !important;
	transition: color .25s ease, background-size .35s ease;
}
.vg-filter-links a:is(:hover, :focus-visible) { color: var(--vg-text) !important; background-size: 100% 1px !important; }
.vg-filter-links a.ist-aktiv { color: var(--vg-text) !important; background-size: 100% 1px !important; }
.vg-filterleiste-linie .vg-anzahl { font-family: var(--vg-sans); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--wp--preset--color--meta); white-space: nowrap; }
@media (max-width: 781px) {
	.vg-filterleiste.vg-filterleiste-linie { width: 100%; justify-content: space-between; }
	.vg-filter-links { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; width: 100%; padding-bottom: 2px; }
	.vg-filter-links::-webkit-scrollbar { display: none; }
	.vg-filter-links a { white-space: nowrap; }
}

/* Pfeile: schlichte lange Pfeile statt Kreise (Auftakt, Bildwechsel) */
.vg-auftakt-pfeil, .vg-galerie__pfeil {
	width: 44px !important; height: 44px !important; border: 0 !important; border-radius: 0 !important; background: transparent !important;
	display: grid; place-items: center; padding: 0 !important; cursor: pointer;
}
.vg-auftakt-pfeil svg, .vg-galerie__pfeil svg { display: none !important; }
.vg-auftakt-pfeil::before, .vg-galerie__pfeil::before {
	content: "\2192"; font-family: var(--vg-sans); font-size: 30px; line-height: 1; font-weight: 300; transition: transform .35s ease;
}
:is(.vg-auftakt-zurueck, .vg-galerie__pfeil--zurueck)::before { content: "\2190"; }
.vg-auftakt-pfeil { color: #F7F5F0 !important; }
.vg-galerie__pfeil { color: #F7F5F0 !important; text-shadow: 0 1px 6px rgba(0,0,0,.35); }
.vg-auftakt-weiter:hover::before, .vg-galerie__pfeil--weiter:hover::before { transform: translateX(4px); }
.vg-auftakt-zurueck:hover::before, .vg-galerie__pfeil--zurueck:hover::before { transform: translateX(-4px); }
.vg-auftakt-weiter svg { transform: none; }

/* Shop-Service: Pfeil-Link zum Kontakt unten in jeder Spalte */
.vg-service .wp-block-column { display: flex; flex-direction: column; }
.vg-service .vg-service-link { margin: auto 0 0 !important; padding-top: 18px; font-family: var(--vg-sans); font-size: 12px !important; letter-spacing: 0.14em; text-transform: uppercase; }
.vg-service .vg-service-link a { display: inline-flex; align-items: center; gap: 12px; color: var(--vg-text) !important; text-decoration: none !important; background: none !important; }
.vg-service .vg-service-link a::after { content: "\2192"; font-size: 20px; letter-spacing: 0; transition: transform .35s ease; }
.vg-service .vg-service-link a:hover::after { transform: translateX(4px); }

/* ==========================================================================
   03 – 1.7.2: Einheitliche Pfeilknöpfe überall – feiner Kreis mit feinem Winkel,
   Grösse nach Bild: Vollbild 64 px, Bildwechsel 52 px, Produktbild 44 px, Karten 34 px
   ========================================================================== */
:root { --vg-winkel: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14.5 5.5 8 12l6.5 6.5' fill='none' stroke='%23000' stroke-width='1.2'/%3E%3C/svg%3E"); }

:is(.vg-pfeil, .vg-auftakt-pfeil, .vg-galerie__pfeil, .vg-karte-pfeil) {
	--d: 52px;
	width: var(--d) !important; height: var(--d) !important; padding: 0 !important;
	display: grid !important; place-items: center; cursor: pointer;
	background: transparent !important; border: 1px solid currentColor !important; border-radius: 50% !important;
	color: rgba(247, 245, 240, .85) !important; box-shadow: none !important; text-shadow: none !important;
	transition: color .3s ease, background-color .3s ease, opacity .3s ease;
}
:is(.vg-pfeil, .vg-auftakt-pfeil, .vg-galerie__pfeil, .vg-karte-pfeil) svg { display: none !important; }
:is(.vg-pfeil, .vg-auftakt-pfeil, .vg-galerie__pfeil, .vg-karte-pfeil)::before {
	content: "" !important; display: block; width: 48%; height: 48%; background: currentColor;
	-webkit-mask: var(--vg-winkel) center / contain no-repeat; mask: var(--vg-winkel) center / contain no-repeat;
	font-size: 0 !important; transform: none !important; transition: transform .35s ease;
}
:is(.vg-pfeil-weiter, .vg-auftakt-weiter, .vg-galerie__pfeil--weiter, .vg-karte-pfeil--weiter)::before { transform: scaleX(-1) !important; }
:is(.vg-pfeil, .vg-auftakt-pfeil, .vg-galerie__pfeil, .vg-karte-pfeil):is(:hover, :focus-visible) { color: #fff !important; background: rgba(18, 17, 16, .18) !important; }

/* Grössen nach Bild */
.vg-pfeil, .vg-auftakt-pfeil { --d: 64px; }
.vg-pfeil { transform: translateY(-50%); opacity: 1; }
.vg-pfeil-zurueck { left: var(--vg-rand) !important; }
.vg-pfeil-weiter { right: var(--vg-rand) !important; }
.vg-galerie__pfeil { --d: 52px; margin-top: calc(var(--d) / -2) !important; }
.vg-galerie__pfeil--zurueck { left: 16px !important; }
.vg-galerie__pfeil--weiter { right: 16px !important; }
.vg-karte-pfeil { --d: 34px; margin-top: -17px !important; color: rgba(34, 34, 33, .8) !important; }
.vg-karte-pfeil:is(:hover, :focus-visible) { color: var(--vg-text) !important; background: rgba(250, 250, 248, .6) !important; }
@media (max-width: 781px) { .vg-pfeil, .vg-auftakt-pfeil { --d: 48px; } .vg-galerie__pfeil { --d: 42px; } }

/* Produktseite (helle Produktbilder): gleicher Kreis, dunkel */
.woocommerce-product-gallery .flex-direction-nav a::before {
	width: 44px !important; height: 44px !important; box-sizing: border-box; border-radius: 50% !important;
	border: 1px solid rgba(34, 34, 33, .7); box-shadow: none !important; background-color: transparent !important; background-size: 16px !important;
	transition: background-color .3s ease;
}
.woocommerce-product-gallery .flex-direction-nav a:hover::before { background-color: rgba(250, 250, 248, .6) !important; }

/* ==========================================================================
   03 – 1.8.0: Shop-Raster mit Linien wie die Projektübersicht
   ========================================================================== */
body .vg-produktraster { border-top: 1px solid var(--vg-linie); overflow: hidden; }
body .vg-produktraster :is(.wc-block-product-template, .wp-block-post-template) {
	display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
	gap: 0 !important; margin: 0 -1px 0 0 !important; padding: 0 !important; list-style: none;
}
body .vg-produktraster :is(.wc-block-product-template, .wp-block-post-template).columns-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
body .vg-produktraster :is(.wc-block-product-template, .wp-block-post-template) > li {
	width: auto !important; max-width: none !important; margin: 0 !important;
	padding: 20px 20px 26px !important; box-sizing: border-box;
	border-right: 1px solid var(--vg-linie); border-bottom: 1px solid var(--vg-linie);
	display: flex; flex-direction: column;
}
body .vg-produktraster .wc-block-components-product-image { margin: 0 0 16px !important; overflow: hidden; }
body .vg-produktraster .wc-block-components-product-image img { transition: transform 1.4s cubic-bezier(.2,.7,.2,1); }
body .vg-produktraster li:hover .wc-block-components-product-image img { transform: scale(1.03); }
/* Titel wie Projektkarten: mit Pfeil rechts */
body .vg-produktraster .vg-produkt-titel { margin: 0 !important; font-family: var(--vg-sans) !important; font-size: 16px !important; line-height: 1.3 !important; font-weight: 400 !important; letter-spacing: -0.005em !important; text-transform: none !important; }
body .vg-produktraster .vg-produkt-titel a { display: flex; justify-content: space-between; gap: 12px; color: var(--vg-text) !important; text-decoration: none !important; background: none !important; }
body .vg-produktraster .vg-produkt-titel a::after { content: "\2192"; flex: 0 0 auto; transition: transform .35s ease; }
body .vg-produktraster li:hover .vg-produkt-titel a::after { transform: translateX(4px); }
body .vg-produktraster .vg-lieferant, body .vg-produktraster .vg-marke { font-size: 10px !important; letter-spacing: 0.14em; text-transform: uppercase; color: var(--wp--preset--color--meta) !important; }
/* «Alle Objekte» und Favoriten-Kopf: auf die Linie gesetzt */
.vg-favoriten-kopf { margin-bottom: 14px !important; }
@media (max-width: 1023px) {
	body .vg-produktraster :is(.wc-block-product-template, .wp-block-post-template) { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}
@media (max-width: 781px) {
	body .vg-produktraster :is(.wc-block-product-template, .wp-block-post-template) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
	body .vg-produktraster :is(.wc-block-product-template, .wp-block-post-template) > li { padding: 14px 12px 18px !important; }
	body .vg-produktraster .vg-produkt-titel { font-size: 14px !important; }
}

/* 03 – 1.8.1: Grauer Service-Bereich gleich breit wie die Bildkarte in der Fusszeile */
body .vg-service.alignfull {
	width: calc(100vw - var(--vg-sbw, 0px) - 2 * var(--vg-rand)) !important; max-width: none !important;
	margin-left: calc(50% - (100vw - var(--vg-sbw, 0px)) / 2 + var(--vg-rand)) !important;
	margin-right: 0 !important; border-radius: 6px; box-sizing: border-box;
	padding-left: clamp(28px, 3vw, 44px) !important; padding-right: clamp(28px, 3vw, 44px) !important;
}
body .vg-service.alignfull > * { max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; }

/* ==========================================================================
   03 – 1.8.2: Alle Bilder – sanftes Heranzoomen beim Darüberfahren (wie «Ausgewählte Projekte»)
   ========================================================================== */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	body:not(.woocommerce) .wp-block-post-content :is(figure.wp-block-image, .vg-galerie__bild, .vg-hochformat),
	.vg-fuss-z .vg-fuss-karte { overflow: hidden; }
	body:not(.woocommerce) .wp-block-post-content :is(figure.wp-block-image, .vg-galerie__bild) img,
	.wp-block-post-featured-image img, .wc-block-components-product-image img,
	.vg-ueber-marke__bild img, .vg-markenkachel__bild img, .vg-objekt__bild img {
		transition: transform 1.4s cubic-bezier(.2,.7,.2,1), filter .8s ease !important;
	}
	body:not(.woocommerce) .wp-block-post-content :is(figure.wp-block-image, .vg-galerie__bild):hover img {
		transform: scale(1.03);
	}
	body:not(.woocommerce) .wp-block-post-content figure.wp-block-image figcaption { position: relative; z-index: 1; background: var(--wp--preset--color--creme); padding-top: 10px !important; margin-top: 0 !important; }
	/* Grossbilder: noch ruhiger */
	body:not(.woocommerce) .wp-block-post-content :is(.vg-hero, .vg-portraet-hero) img,
	body:not(.woocommerce) .wp-block-post-content :is(.vg-hero, .vg-portraet-hero):hover img { transform: none; }
	.wp-block-cover:hover .wp-block-cover__image-background { transform: scale(1.015); }
	.wp-block-cover .wp-block-cover__image-background { transition: transform 1.8s cubic-bezier(.2,.7,.2,1); }
}

/* ==========================================================================
   03 – 1.9.0
   ========================================================================== */
/* Einleitung pro Projektkategorie */
.vg-projekte-z > .vg-kategorie-intro {
	max-width: var(--wp--style--global--wide-size, 1440px) !important; margin: 0 auto clamp(24px, 3vw, 40px) !important; box-sizing: border-box;
	padding-right: calc(100% - 640px);
	font-family: var(--vg-sans); font-size: clamp(17px, 1.3vw, 20px) !important; line-height: 1.5 !important; color: var(--wp--preset--color--sekundaer);
}
@media (max-width: 781px) { .vg-projekte-z > .vg-kategorie-intro { padding-right: 0; } }

/* Produktseite im Stil der Projektseiten: Kaufspalte als Datenblatt mit Linien */
@media (min-width: 782px) {
	body.single-product .vg-kauf { align-items: flex-start !important; }
	body.single-product .vg-kaufspalte { position: sticky; top: calc(var(--vg-kopf-h, 92px) + 32px); }
}
body.single-product .vg-kaufspalte { border-top: 1px solid var(--vg-text); padding-top: 16px; gap: 0 !important; }
body.single-product .vg-kaufspalte > * { margin-top: 0 !important; }
body.single-product .vg-kaufspalte > .vg-marke { font-family: var(--vg-sans); font-size: 11px !important; letter-spacing: 0.16em; text-transform: uppercase; color: var(--wp--preset--color--meta) !important; margin-bottom: 10px !important; }
body.single-product .vg-kaufspalte > .vg-marke a { color: inherit !important; }
body.single-product .vg-kaufspalte > .wp-block-post-title {
	font-family: var(--vg-sans) !important; font-weight: 400 !important; font-size: clamp(26px, 2.4vw, 36px) !important; line-height: 1.15 !important; letter-spacing: -0.015em !important; margin-bottom: 14px !important;
}
body.single-product .vg-kaufspalte > .vg-preis-gross { font-family: var(--vg-sans); font-size: 17px !important; font-variant-numeric: tabular-nums; margin-bottom: 4px !important; }
body.single-product .vg-kaufspalte > .vg-hinweis-mwst { padding-bottom: 18px; margin-bottom: 18px !important; border-bottom: 1px solid var(--vg-linie); }
body.single-product .vg-kaufspalte > .vg-kurzbeschrieb { padding-bottom: 18px; margin-bottom: 18px !important; border-bottom: 1px solid var(--vg-linie); }
body.single-product .vg-kaufspalte > .vg-kurzbeschrieb p { font-size: var(--wp--preset--font-size--text) !important; line-height: 1.7 !important; color: var(--wp--preset--color--sekundaer); }
body.single-product .vg-kaufspalte > .wp-block-woocommerce-add-to-cart-form { padding-bottom: 18px; margin-bottom: 18px !important; border-bottom: 1px solid var(--vg-linie); }
body.single-product .vg-kaufspalte > .vg-beratung { padding-bottom: 18px; margin-bottom: 18px !important; border-bottom: 1px solid var(--vg-linie); }
body.single-product .vg-kaufspalte > .vg-beratung a { border: 0 !important; color: var(--vg-text) !important; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; display: inline-flex; gap: 12px; align-items: center; background: none !important; }
body.single-product .vg-kaufspalte > .vg-beratung a::after { content: "\2192"; font-size: 18px; letter-spacing: 0; transition: transform .35s ease; }
body.single-product .vg-kaufspalte > .vg-beratung a:hover::after { transform: translateX(4px); }
body.single-product .vg-kaufspalte .wp-block-woocommerce-product-meta { font-family: var(--vg-sans); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--wp--preset--color--meta); }
/* Warenkorb-Knopf: ruhig, eckig, hell mit Rahmen (1.9.5) */
body.single-product .vg-kaufspalte .single_add_to_cart_button {
	border-radius: 0 !important; background: transparent !important; color: var(--vg-text) !important; border: 1px solid var(--vg-text) !important;
	font-family: var(--vg-sans) !important; font-size: 12px !important; letter-spacing: 0.16em !important; text-transform: uppercase !important; font-weight: 400 !important; padding: 0 28px !important; min-height: 48px;
	transition: background .3s ease, color .3s ease;
}
body.single-product .vg-kaufspalte .single_add_to_cart_button:hover:not(:disabled):not(.disabled) { background: var(--vg-text) !important; color: #FAFAF8 !important; }
/* Details und «Passt dazu» mit Linien wie Abschnitte */
body.single-product .vg-details { border-top: 1px solid var(--vg-linie); padding-top: 0; }
body.single-product .wp-block-woocommerce-related-products h2 {
	font-family: var(--vg-sans) !important; font-weight: 400 !important; font-size: clamp(20px, 1.6vw, 24px) !important; margin: clamp(40px, 4vw, 56px) 0 16px !important;
}

/* 404: Wege als Textlinks mit Pfeil, ruhige Typografie */
.vg-404 h1 { font-family: var(--vg-sans) !important; font-weight: 400 !important; letter-spacing: -0.02em; }
.vg-404 .vg-404-wege { display: flex; flex-direction: column; gap: 0; border-top: 1px solid var(--vg-linie); margin: 24px 0 28px !important; max-width: 420px; }
.vg-404 .vg-404-wege a {
	display: flex; justify-content: space-between; padding: 14px 0; border-bottom: 1px solid var(--vg-linie);
	font-family: var(--vg-sans); font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--vg-text) !important; text-decoration: none !important; background: none !important;
}
.vg-404 .vg-404-wege a::after { content: "\2192"; transition: transform .35s ease; }
.vg-404 .vg-404-wege a:hover::after { transform: translateX(4px); }

/* 03 – 1.9.1: Suche dezent – feine Linie, Schrift wie Navigation, «Suchen →» als Textlink */
.vg-suche { padding: 18px var(--vg-rand) 22px !important; border-top: 1px solid var(--vg-linie) !important; border-bottom: 1px solid var(--vg-linie) !important; background: var(--wp--preset--color--creme) !important; }
.vg-suche-form { max-width: var(--wp--style--global--wide-size, 1440px) !important; gap: clamp(16px, 2vw, 32px) !important; box-sizing: border-box; }
@media (min-width: 1000px) { .vg-suche-form { padding-left: var(--vg-achse); } }
.vg-suche-form input[type="search"],
.vg-suche-form input[type="search"]:focus {
	font-family: var(--vg-sans) !important; font-size: clamp(16px, 1.3vw, 19px) !important; letter-spacing: 0.01em;
	padding: 8px 0 !important; border-bottom: 1px solid var(--wp--preset--color--linie) !important; transition: border-color .3s ease;
}
.vg-suche-form input[type="search"]:focus { border-bottom-color: var(--vg-text) !important; }
.vg-suche-form input[type="search"]::placeholder { color: var(--wp--preset--color--meta); opacity: 1; }
.vg-suche-los {
	background: none !important; color: var(--vg-text) !important; padding: 0 !important; min-height: 36px !important;
	font-size: 12px !important; letter-spacing: 0.14em !important; display: inline-flex !important; align-items: center; gap: 10px;
}
.vg-suche-los::after { content: "\2192"; font-size: 17px; letter-spacing: 0; transition: transform .35s ease; }
.vg-suche-los:hover::after { transform: translateX(4px); }
.vg-suche-zu { width: 36px !important; height: 36px !important; color: var(--wp--preset--color--meta) !important; transition: color .3s ease; }
.vg-suche-zu:hover { color: var(--vg-text) !important; }
.vg-suche-zu svg { width: 14px; height: 14px; }

/* 03 – 1.9.2: Startseite – Bildwechsel alle 5 s mit weicher Überblendung */
.vg-slider .vg-folie { transition: opacity 2.2s cubic-bezier(.45,0,.25,1), visibility 0s linear 2.2s !important; }
.vg-slider .vg-folie.ist-aktiv { transition: opacity 2.2s cubic-bezier(.45,0,.25,1), visibility 0s !important; }
@media (prefers-reduced-motion: reduce) { .vg-slider .vg-folie, .vg-slider .vg-folie.ist-aktiv { transition: none !important; } }

/* ==========================================================================
   03 – 1.9.3: Produktseite – Bild kleiner, Express-Zahlung ruhiger
   ========================================================================== */
@media (min-width: 782px) {
	body.single-product .vg-kauf > .wp-block-column:first-child { flex-basis: 50% !important; max-width: 50%; }
	body.single-product .vg-kauf > .vg-kaufspalte { flex-basis: 42% !important; }
	body.single-product .woocommerce-product-gallery .woocommerce-product-gallery__image img {
		width: 100% !important; height: auto !important; max-height: calc(100vh - var(--vg-kopf-h, 92px) - 120px) !important; object-fit: contain !important;
	}
	body.single-product .woocommerce-product-gallery .flex-viewport { max-height: calc(100vh - var(--vg-kopf-h, 92px) - 120px); }
}
/* Lupe: klein, ohne Kasten */
body.single-product .woocommerce-product-gallery__trigger {
	width: 36px !important; height: 36px !important; top: 12px !important; right: 12px !important;
	background: rgba(250, 250, 248, .75) !important; border-radius: 50% !important; display: grid !important; place-items: center; font-size: 0 !important;
}
body.single-product .woocommerce-product-gallery__trigger img, body.single-product .woocommerce-product-gallery__trigger::before, body.single-product .woocommerce-product-gallery__trigger::after { transform: scale(.75); }

/* Express-Zahlung (Stripe: Apple Pay, Google Pay …): eigener Abschnitt mit Linie und Titel, Knöpfe niedriger mit Abstand */
body.single-product :is(#wc-stripe-express-checkout-element, #wc-stripe-payment-request-wrapper, .wc-stripe-express-checkout-element, #wcpay-express-checkout-element) {
	margin: 20px 0 0 !important; padding-top: 18px !important; border-top: 1px solid var(--wp--preset--color--linie); max-width: 100%;
}
body.single-product :is(#wc-stripe-express-checkout-element, #wc-stripe-payment-request-wrapper, .wc-stripe-express-checkout-element, #wcpay-express-checkout-element)::before {
	content: "Oder direkt bezahlen"; display: block; margin-bottom: 12px;
	font-family: var(--vg-sans); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--wp--preset--color--meta);
}
body.single-product :is(#wc-stripe-express-checkout-element, .wc-stripe-express-checkout-element) iframe { border-radius: 0 !important; }
body.single-product :is(#wc-stripe-express-checkout-button-separator, #wc-stripe-payment-request-button-separator, .wc-stripe-express-checkout-button-separator) { display: none !important; }

/* 03 – 1.9.4: Kaufknöpfe im Stil der Website */
/* Titel «Oder direkt bezahlen» auf eigener Zeile, Knöpfe untereinander mit gleichem Abstand */
body.single-product :is(#wc-stripe-express-checkout-element, #wc-stripe-payment-request-wrapper, .wc-stripe-express-checkout-element, #wcpay-express-checkout-element) {
	display: flex !important; flex-direction: column !important; gap: 10px !important; width: 100% !important;
}
body.single-product :is(#wc-stripe-express-checkout-element, #wc-stripe-payment-request-wrapper, .wc-stripe-express-checkout-element, #wcpay-express-checkout-element)::before {
	flex: 0 0 auto; width: 100%; margin: 0 0 2px !important;
}
body.single-product :is(#wc-stripe-express-checkout-element, .wc-stripe-express-checkout-element) > * { width: 100% !important; margin: 0 !important; max-width: none !important; }

/* «In den Warenkorb»: inaktiv (Ausführung noch nicht gewählt) hell mit feinem Rahmen statt grauer Fläche */
body.single-product .vg-kaufspalte .single_add_to_cart_button:is(.disabled, :disabled, .wc-variation-selection-needed) {
	background: transparent !important; color: var(--wp--preset--color--meta) !important; border: 1px solid var(--wp--preset--color--linie) !important; opacity: 1 !important; cursor: not-allowed;
}
body.single-product .vg-kaufspalte form.cart:not(.variations_form),
body.single-product .vg-kaufspalte .woocommerce-variation-add-to-cart { display: flex; align-items: stretch; gap: 10px; }
body.single-product .vg-kaufspalte .single_add_to_cart_button { flex: 1 1 auto; min-height: 48px !important; }
body.single-product .vg-kaufspalte input.qty {
	min-height: 48px !important; width: 64px !important; border: 1px solid var(--wp--preset--color--linie) !important; border-radius: 0 !important; background: transparent !important;
	font-family: var(--vg-sans) !important; font-size: 14px !important; text-align: center;
}
/* Preis der gewählten Ausführung: ruhig, kleiner Abstand */
body.single-product .vg-kaufspalte .woocommerce-variation-price { margin: 6px 0 14px !important; }
body.single-product .vg-kaufspalte .woocommerce-variation-price .price { font-family: var(--vg-sans); font-size: 17px !important; }
body.single-product .vg-kaufspalte .reset_variations { display: inline-block; margin-top: 6px; font-size: 11px !important; letter-spacing: 0.14em; text-transform: uppercase; color: var(--wp--preset--color--meta) !important; text-decoration: none !important; }

/* ==========================================================================
   03 – 1.9.5: Alle Knöpfe hell im Stil der Website – feiner Rahmen, Pfeil, beim Darüberfahren dunkel
   (In den Warenkorb, Warenkorb ansehen, Zur Kasse, Bestellen, Formulare)
   ========================================================================== */
body :is(.wc-block-components-button:not(.is-link), .wc-block-cart__submit-button, .wc-block-components-checkout-place-order-button,
	.wc-block-mini-cart__footer-actions a, .wc-block-mini-cart__footer-actions .wp-element-button,
	.woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .single_add_to_cart_button,
	.wp-element-button:not(.wp-block-search__button), input[type="submit"]) {
	background: transparent !important; color: var(--vg-text) !important;
	border: 1px solid var(--vg-text) !important; border-radius: 0 !important; box-shadow: none !important;
	font-family: var(--vg-sans) !important; font-size: 12px !important; font-weight: 400 !important; letter-spacing: 0.16em !important; text-transform: uppercase !important;
	transition: background-color .3s ease, color .3s ease !important;
}
body :is(.wc-block-components-button:not(.is-link), .wc-block-cart__submit-button, .wc-block-components-checkout-place-order-button,
	.wc-block-mini-cart__footer-actions a, .woocommerce a.button, .woocommerce button.button, .single_add_to_cart_button,
	.wp-element-button:not(.wp-block-search__button), input[type="submit"]):is(:hover, :focus-visible):not(:disabled):not(.disabled) {
	background: var(--vg-text) !important; color: var(--wp--preset--color--creme) !important;
}
/* Pfeil bei den Hauptschritten */
body :is(.wc-block-cart__submit-button, .wc-block-components-checkout-place-order-button, .wc-block-mini-cart__footer-checkout, .single_add_to_cart_button) .wc-block-components-button__text::after,
body .single_add_to_cart_button::after { content: "\2002\2192"; letter-spacing: 0; }
body .single_add_to_cart_button .wc-block-components-button__text::after { content: none; }
/* Nebenschritt («Warenkorb ansehen»): nur Text mit Linie */
body .wc-block-mini-cart__footer-actions a.wc-block-mini-cart__footer-cart.wc-block-mini-cart__footer-cart {
	border-color: transparent !important; text-decoration: underline !important; text-underline-offset: 6px; text-decoration-thickness: 1px;
}
body .wc-block-mini-cart__footer-actions a.wc-block-mini-cart__footer-cart.wc-block-mini-cart__footer-cart:hover { background: transparent !important; color: var(--vg-text) !important; text-decoration-color: transparent !important; }
/* Inaktiv */
body :is(.single_add_to_cart_button, .wc-block-components-button):is(:disabled, .disabled, .wc-variation-selection-needed) {
	background: transparent !important; color: var(--wp--preset--color--meta) !important; border-color: var(--wp--preset--color--linie) !important; opacity: 1 !important;
}
body .wc-block-mini-cart__footer-actions a { white-space: nowrap; }

/* ==========================================================================
   03 – 1.9.6: Projektübersicht – Auftakt mit Begleittext, Bildwechsel alle 4 s mit Bewegung
   ========================================================================== */
section.vg-projekt-auftakt > .vg-auftakt-link {
	position: absolute !important; inset: 0; height: 100% !important; overflow: hidden;
	opacity: 1 !important; visibility: hidden; z-index: 0; transition: none !important;
}
section.vg-projekt-auftakt > .vg-auftakt-link.war-aktiv { visibility: visible !important; z-index: 1; }
section.vg-projekt-auftakt > .vg-auftakt-link.ist-aktiv {
	visibility: visible !important; z-index: 2;
	animation: vg-auftakt-wisch 1.6s cubic-bezier(.65,0,.25,1) both;
}
section.vg-projekt-auftakt > .vg-auftakt-link .vg-auftakt-bild { transition: none !important; transform: none; }
section.vg-projekt-auftakt > .vg-auftakt-link.ist-aktiv .vg-auftakt-bild { animation: vg-auftakt-zoom 5.6s cubic-bezier(.2,.6,.2,1) both; }
section.vg-projekt-auftakt > .vg-auftakt-link.war-aktiv .vg-auftakt-bild { transform: translateX(-3%) scale(1.02); transition: transform 1.6s cubic-bezier(.65,0,.25,1) !important; }
@keyframes vg-auftakt-wisch { from { clip-path: inset(0 0 0 100%); } to { clip-path: inset(0 0 0 0); } }
@keyframes vg-auftakt-zoom { from { transform: scale(1.08) translateX(2%); } to { transform: scale(1) translateX(0); } }
/* erstes Bild beim Laden: nur ruhig einblenden */
section.vg-projekt-auftakt > .vg-auftakt-link.ist-start { animation-name: vg-auftakt-ein; }
@keyframes vg-auftakt-ein { from { opacity: 0; } to { opacity: 1; } }
section.vg-projekt-auftakt > .vg-auftakt-link::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
	background: linear-gradient(to top, rgba(18,17,16,.62) 0%, rgba(18,17,16,.22) 42%, rgba(18,17,16,0) 64%), linear-gradient(to bottom, rgba(18,17,16,.28) 0%, rgba(18,17,16,0) 22%); }

/* Begleittext links unten, wie auf den Studio-Seiten */
.vg-auftakt-begleit {
	position: absolute; z-index: 4; left: var(--vg-kante); bottom: clamp(36px, 7vh, 88px);
	width: min(44vw, 620px); display: flex; flex-direction: column; gap: 26px; color: #F7F5F0;
}
.vg-auftakt-begleittext {
	margin: 0 !important; font-family: var(--vg-sans); font-size: clamp(20px, 1.9vw, 30px) !important; line-height: 1.3 !important; letter-spacing: -0.01em;
	color: #F7F5F0 !important; text-shadow: 0 1px 18px rgba(0,0,0,.25);
}
.vg-auftakt-begleittext .vg-hero-name { display: block; margin-top: 14px; font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; opacity: .85; }
.vg-auftakt-begleit .vg-auftakt-mehr {
	align-self: flex-start; color: #F7F5F0 !important; text-decoration: none !important; background: none !important;
	font-family: var(--vg-sans); font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; padding-bottom: 5px; border-bottom: 1px solid rgba(247,245,240,.7); margin: 0;
	transition: border-color .3s ease;
}
.vg-auftakt-begleit .vg-auftakt-mehr::after { content: "\2002\2192"; display: inline-block; transition: transform .35s ease; }
.vg-auftakt-begleit .vg-auftakt-mehr:hover { border-color: #F7F5F0; }
.vg-auftakt-begleit .vg-auftakt-mehr:hover::after { transform: translateX(4px); }
/* Projektname des aktuellen Bildes: klein unten rechts, über der Steuerung */
.vg-auftakt-bildname {
	position: absolute; z-index: 3; right: var(--vg-kante); bottom: calc(clamp(32px, 6vh, 72px) + 84px);
	font-family: var(--vg-sans); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
	color: #F7F5F0 !important; text-decoration: none !important; background: none !important; opacity: 0; transition: opacity .6s ease .5s;
}
.vg-auftakt-link.ist-aktiv .vg-auftakt-bildname { opacity: .85; }
.vg-auftakt-bildname:hover { opacity: 1 !important; }
.vg-auftakt-bildname::after { content: "\2002\2192"; }
.vg-auftakt-steuerung { z-index: 5 !important; }
#vg-projekte { display: block; scroll-margin-top: calc(var(--vg-kopf-h, 92px) + 8px); }
html { scroll-behavior: smooth; }
@media (max-width: 781px) {
	.vg-auftakt-begleit { width: auto; right: var(--vg-rand); }
	.vg-auftakt-bildname { display: none; }
}
@media (prefers-reduced-motion: reduce) {
	section.vg-projekt-auftakt > .vg-auftakt-link.ist-aktiv, section.vg-projekt-auftakt > .vg-auftakt-link.ist-aktiv .vg-auftakt-bild { animation: none; }
	html { scroll-behavior: auto; }
}

/* 03 – 1.9.7: Projektübersicht – weiche Überblendung statt Schieben, leichte Bewegung im Bild */
section.vg-projekt-auftakt > .vg-auftakt-link.ist-aktiv { animation: vg-auftakt-ein 2s cubic-bezier(.45,0,.25,1) both !important; }
section.vg-projekt-auftakt > .vg-auftakt-link.war-aktiv .vg-auftakt-bild { transform: scale(1) !important; transition: none !important; }
section.vg-projekt-auftakt > .vg-auftakt-link.ist-aktiv .vg-auftakt-bild { animation: vg-auftakt-ruhig 6s ease-out both !important; }
@keyframes vg-auftakt-ruhig { from { transform: scale(1.05); } to { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { section.vg-projekt-auftakt > .vg-auftakt-link.ist-aktiv, section.vg-projekt-auftakt > .vg-auftakt-link.ist-aktiv .vg-auftakt-bild { animation: none !important; } }

/* ==========================================================================
   03 – 1.9.8: Startseite wie die Projektübersicht
   ========================================================================== */
.vg-main > .vg-projekt-auftakt.vg-start-auftakt { width: calc(100vw - var(--vg-sbw, 0px)) !important; max-width: none !important; margin: 0 0 0 calc(50% - (100vw - var(--vg-sbw, 0px)) / 2) !important; }
.vg-start-auftakt .vg-auftakt-leitsatz {
	margin: 0 0 -6px !important; color: #F7F5F0 !important; font-family: var(--vg-sans) !important; font-weight: 400 !important;
	font-size: clamp(40px, 5.6vw, 88px) !important; line-height: 1 !important; letter-spacing: -0.035em !important; text-shadow: 0 1px 24px rgba(0,0,0,.2);
}
.vg-start-auftakt .vg-auftakt-begleit { width: min(52vw, 760px); }
.vg-start-auftakt .vg-auftakt-begleittext { font-size: clamp(17px, 1.4vw, 22px) !important; max-width: 36em; }

/* ==========================================================================
   03 – 1.10.0: Startseite «Planen, entdecken, einrichten»
   ========================================================================== */
.vg-start-03 { --vg-sb: clamp(72px, 9vw, 128px); padding-bottom: 0 !important; }
.vg-start-03 > .vg-start-block { margin-top: var(--vg-sb) !important; margin-bottom: 0 !important; max-width: var(--wp--style--global--wide-size, 1440px) !important; }
.vg-start-label { font-family: var(--vg-sans); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--wp--preset--color--meta); }
.vg-start-titel { margin: 0 !important; font-family: var(--vg-sans) !important; font-weight: 400 !important; font-size: clamp(30px, 2.9vw, 42px) !important; line-height: 1.1 !important; letter-spacing: -0.02em !important; color: var(--vg-text); }
.vg-start-lead { margin: 0 !important; font-size: 16px !important; line-height: 1.6 !important; color: var(--wp--preset--color--sekundaer); max-width: 34em; }
.vg-start-kopf { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px 32px; flex-wrap: wrap; margin-bottom: 28px; }
.vg-start-kopf-zeile { align-items: baseline; }
.vg-start-kopf-text { display: flex; flex-direction: column; gap: 14px; max-width: 640px; }
.vg-start-link {
	display: inline-flex; align-items: center; gap: 10px; font-family: var(--vg-sans); font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase;
	color: var(--vg-text) !important; text-decoration: none !important; padding-bottom: 5px; border-bottom: 1px solid var(--vg-text); background: none !important;
}
.vg-start-link::after { content: "\2192"; letter-spacing: 0; transition: transform .35s ease; }
.vg-start-link:hover::after { transform: translateX(4px); }

/* Linienraster */
.vg-linienraster { display: grid; border-top: 1px solid var(--vg-linie); border-left: 1px solid var(--vg-linie); }
.vg-linienraster-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.vg-linienraster > a { display: flex; flex-direction: column; gap: 12px; padding: 22px 22px 28px; border-right: 1px solid var(--vg-linie); border-bottom: 1px solid var(--vg-linie); color: var(--vg-text) !important; text-decoration: none !important; background: none !important; }
.vg-weg-rahmen { display: block; overflow: hidden; line-height: 0; }
.vg-weg-rahmen img { width: 100% !important; height: 100% !important; object-fit: cover; display: block; max-height: none !important; transition: transform 1.4s cubic-bezier(.2,.7,.2,1); }
a:hover > .vg-weg-rahmen img { transform: scale(1.03); }
.vg-weg .vg-weg-rahmen { aspect-ratio: 4 / 5; margin-bottom: 6px; }
.vg-karte-quer { aspect-ratio: 16 / 10; margin-bottom: 6px; }
.vg-karte-hoch { aspect-ratio: 4 / 5; margin-bottom: 6px; background: #fff; }
.vg-weg-titel, .vg-karte-name { display: flex; justify-content: space-between; gap: 12px; font-family: var(--vg-sans); font-size: clamp(19px, 1.6vw, 24px); line-height: 1.2; letter-spacing: -0.01em; }
.vg-karte-name { font-size: clamp(17px, 1.3vw, 20px); }
.vg-weg-titel::after, .vg-karte-name::after { content: "\2192"; flex: 0 0 auto; transition: transform .35s ease; }
a:hover > .vg-weg-titel::after, a:hover > .vg-karte-name::after { transform: translateX(4px); }
.vg-weg-text { font-size: 15px; line-height: 1.6; color: var(--wp--preset--color--sekundaer); }
.vg-karte-preis { font-family: var(--vg-sans); font-size: 13px; font-variant-numeric: tabular-nums; }

/* Planungskompetenz */
.vg-kompetenz-spalten { display: flex; flex-wrap: wrap; gap: 48px clamp(48px, 7vw, 112px); align-items: flex-start; }
.vg-kompetenz-links { flex: 1 1 340px; max-width: 520px; display: flex; flex-direction: column; gap: 20px; }
.vg-kompetenz-satz { margin: 0 !important; font-size: clamp(18px, 1.4vw, 21px) !important; line-height: 1.45 !important; font-weight: 500; color: var(--vg-text); }
.vg-kompetenz-name { margin-top: -8px; letter-spacing: 0.2em; }
.vg-kompetenz-bild { aspect-ratio: 4 / 3; margin-top: 10px; }
.vg-schritte { flex: 999 1 480px; min-width: 0; list-style: none !important; margin: 0 !important; padding: 0 !important; border-top: 1px solid var(--vg-text); }
.vg-schritte > li { display: flex; flex-wrap: wrap; gap: 8px 40px; padding: 26px 0 30px !important; border-bottom: 1px solid var(--vg-linie); margin: 0 !important; }
.vg-schritte > li::before { content: none !important; }
.vg-schritte h3 { flex: 1 1 220px; margin: 0 !important; font-family: var(--vg-sans) !important; font-weight: 400 !important; font-size: clamp(20px, 1.6vw, 24px) !important; line-height: 1.25 !important; border: 0 !important; padding: 0 !important; }
.vg-schritte p { flex: 2 1 320px; margin: 0 !important; font-size: 16px !important; line-height: 1.7 !important; color: var(--wp--preset--color--sekundaer); }
.vg-schritte > li.vg-schritte-link { border-bottom: 0; padding-bottom: 0 !important; }

/* Shop-Band */
.vg-start-03 > .vg-start-shop.alignfull {
	max-width: none !important; width: calc(100vw - var(--vg-sbw, 0px)) !important; margin-left: calc(50% - (100vw - var(--vg-sbw, 0px)) / 2) !important; margin-right: 0 !important;
	background: var(--wp--preset--color--flaeche, #F1F0EC);
}
.vg-start-shop-innen { max-width: var(--wp--style--global--wide-size, 1440px); margin: 0 auto; box-sizing: border-box; padding: clamp(64px, 7vw, 96px) var(--vg-rand); }
.vg-start-kategorien { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 26px; font-family: var(--vg-sans); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; }
.vg-start-kategorien a:not(.vg-start-link) { color: var(--wp--preset--color--sekundaer) !important; text-decoration: none !important; background: none !important; }
.vg-start-kategorien a:not(.vg-start-link):hover { color: var(--vg-text) !important; }
.vg-shop-band { display: flex; flex-wrap: wrap; border-top: 1px solid #DAD7D0; }
.vg-shop-stimmung { flex: 1 1 480px; min-width: 0; position: relative; display: block; min-height: 560px; overflow: hidden; color: #F7F5F0 !important; text-decoration: none !important; background: none !important; }
.vg-shop-stimmung img { position: absolute; inset: 0; width: 100% !important; height: 100% !important; object-fit: cover; max-height: none !important; transition: transform 1.4s cubic-bezier(.2,.7,.2,1); }
.vg-shop-stimmung:hover img { transform: scale(1.03); }
.vg-shop-stimmung::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(18,17,16,.55), rgba(18,17,16,0) 55%); }
.vg-shop-stimmung-text { position: absolute; z-index: 1; left: 28px; right: 28px; bottom: 28px; display: flex; flex-direction: column; gap: 8px; font-family: var(--vg-sans); font-size: 15px; line-height: 1.5; max-width: 30em; }
.vg-shop-stimmung-text .vg-start-label { color: #F7F5F0; }
.vg-shop-stimmung-titel { font-size: clamp(24px, 2.2vw, 32px); line-height: 1.15; letter-spacing: -0.015em; }
.vg-shop-objekte { flex: 1 1 480px; min-width: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-left: 1px solid #DAD7D0; }
.vg-shop-objekte > a { display: flex; flex-direction: column; gap: 8px; padding: 18px 18px 22px; border-right: 1px solid #DAD7D0; border-bottom: 1px solid #DAD7D0; color: var(--vg-text) !important; text-decoration: none !important; background: none !important; }
.vg-shop-objekte .vg-karte-name { font-size: 16px; }

/* Studio */
.vg-studio-spalten { display: flex; flex-wrap: wrap; gap: 48px clamp(48px, 7vw, 112px); align-items: center; }
.vg-studio-bild { flex: 1 1 420px; max-width: 640px; aspect-ratio: 3 / 2; }
.vg-studio-text { flex: 1 1 360px; max-width: 560px; display: flex; flex-direction: column; gap: 20px; }
.vg-studio-satz { margin: 0 !important; font-family: var(--vg-sans); font-size: clamp(22px, 2vw, 28px) !important; line-height: 1.3 !important; letter-spacing: -0.01em; color: var(--vg-text); }
.vg-studio-adresse { margin: 0 !important; font-size: 16px !important; line-height: 1.7 !important; color: var(--wp--preset--color--sekundaer); }
.vg-studio-adresse a { color: inherit !important; }
.vg-studio-links { display: flex; flex-wrap: wrap; gap: 16px 32px; margin: 4px 0 0 !important; }

/* Auftakt Startseite: drei Links */
.vg-auftakt-links { display: flex; flex-wrap: wrap; gap: 14px 32px; }

@media (max-width: 1023px) {
	.vg-linienraster-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
	.vg-linienraster-3 { grid-template-columns: minmax(0, 1fr); }
	.vg-linienraster > a { padding: 16px 14px 22px; }
	.vg-shop-stimmung { min-height: 380px; }
	.vg-shop-objekte > a { padding: 12px 12px 18px; }
}

/* 03 – 1.10.1: Startseite ganz auf der Leinenfläche, Shop-Teil ohne eigene Fläche */
body.home, body.home .wp-site-blocks, body.home .vg-main, body.home footer.vg-fuss.vg-fuss-z { background: var(--wp--preset--color--creme) !important; }
body.home .vg-start-03 > .vg-start-shop.alignfull { background: transparent !important; }
body.home .vg-start-shop-innen { padding-top: 0; padding-bottom: 0; }
body.home.vg-bildkopf.vg-kopf-hell .vg-kopf,
body.home.vg-bildkopf:not(.vg-kopf-hell) .vg-kopf:is(:hover, :focus-within) { background: var(--wp--preset--color--creme) !important; }
body.home .vg-suche { background: var(--wp--preset--color--creme) !important; }
/* Linien auf der Leinenfläche etwas kräftiger, damit sie sichtbar bleiben */
body.home .vg-linienraster, body.home .vg-linienraster > a, body.home .vg-schritte > li { border-color: #DAD7D0 !important; }
body.home .vg-schritte { border-top-color: var(--vg-text) !important; }

/* 03 – 1.11.0: Ganze Website auf der Leinenfläche (#F1F0EC); Fläche #E8E6E0, Linien #DAD7D0, Meta #6A6864 */
body.single-product .vg-kaufspalte .single_add_to_cart_button:hover:not(:disabled):not(.disabled) { color: var(--wp--preset--color--creme) !important; }

/* 03 – 1.11.1: «So entsteht ein Raum» – Porträt gross links, Schritte als 2 × 2 mit Linien */
.vg-kompetenz-raster { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px clamp(48px, 6vw, 112px); align-items: start; }
.vg-kompetenz-raster > .vg-kompetenz-bild { aspect-ratio: 4 / 5; margin: 0; position: sticky; top: calc(var(--vg-kopf-h, 92px) + 24px); }
.vg-kompetenz-raster > .vg-kompetenz-bild img { object-position: 60% 30%; }
.vg-kompetenz-inhalt { display: flex; flex-direction: column; padding-top: 4px; }
.vg-kompetenz-titel { font-size: clamp(36px, 4vw, 60px) !important; line-height: 1.02 !important; letter-spacing: -0.03em !important; margin-bottom: 28px !important; }
.vg-kompetenz-inhalt .vg-kompetenz-satz { font-weight: 400 !important; font-size: clamp(19px, 1.6vw, 24px) !important; line-height: 1.4 !important; max-width: 30em; margin: 0 0 clamp(40px, 5vw, 64px) !important; color: var(--vg-text); }
.vg-kompetenz-inhalt .vg-kompetenz-name { display: block; margin-top: 16px; letter-spacing: 0.2em; }
.vg-kompetenz-inhalt .vg-schritte { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px clamp(28px, 3vw, 48px); border-top: 0 !important; }
.vg-kompetenz-inhalt .vg-schritte > li { display: flex; flex-direction: column; gap: 10px; padding: 16px 0 0 !important; border-bottom: 0 !important; border-top: 1px solid var(--vg-text); }
.vg-kompetenz-inhalt .vg-schritte h3 { flex: none; font-size: clamp(19px, 1.5vw, 22px) !important; }
.vg-kompetenz-inhalt .vg-schritte p { flex: none; font-size: 15px !important; line-height: 1.65 !important; }
.vg-kompetenz-link { margin: clamp(36px, 4vw, 52px) 0 0 !important; }
@media (max-width: 900px) {
	.vg-kompetenz-raster { grid-template-columns: minmax(0, 1fr); }
	.vg-kompetenz-raster > .vg-kompetenz-bild { position: static; aspect-ratio: 4 / 3; }
}
@media (max-width: 600px) { .vg-kompetenz-inhalt .vg-schritte { grid-template-columns: minmax(0, 1fr); } }
.vg-kompetenz-inhalt .vg-schritte { flex: none !important; }

/* 03 – 1.11.2: Shop-Teil der Startseite auf derselben linken Linie wie Logo und übrige Abschnitte */
.vg-start-03 > .vg-start-shop.alignfull .vg-start-shop-innen { max-width: none !important; margin: 0 !important; padding-left: var(--vg-kante) !important; padding-right: var(--vg-kante) !important; }

/* 03 – 1.11.4: Fusskarte und Service-Fläche auf derselben Seitenkante wie Logo und Inhalte */
footer.vg-fuss.vg-fuss-z { padding-left: var(--vg-kante) !important; padding-right: var(--vg-kante) !important; }
body .vg-service.alignfull {
	width: calc(100vw - var(--vg-sbw, 0px) - 2 * var(--vg-kante)) !important;
	margin-left: calc(50% - (100vw - var(--vg-sbw, 0px)) / 2 + var(--vg-kante)) !important;
}

/* 03 – 1.11.5: Klick auf das grosse Bild öffnet das gezeigte Projekt */
.vg-auftakt-flaeche { position: absolute; inset: 0; z-index: 2; cursor: pointer; background: none !important; }
section.vg-projekt-auftakt > .vg-auftakt-link:not(.ist-aktiv) .vg-auftakt-flaeche { pointer-events: none; }

/* 03 – 1.12.0: Projektseite – Pfeile zum vorherigen/nächsten Projekt im Grossbild */
.vg-projekt-hero .vg-projekt-blaettern {
	position: absolute; z-index: 5; right: var(--vg-kante); bottom: clamp(32px, 6vh, 72px);
	display: flex; align-items: center; gap: 10px; color: #F7F5F0;
}
.vg-projekt-blaettern .vg-blaettern-name {
	margin-right: 14px; font-family: var(--vg-sans); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; opacity: .85;
	max-width: 22ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-shadow: 0 0 12px rgba(0,0,0,.35);
}
.vg-projekt-blaettern .vg-blaettern-name::after { content: "\2002\2192"; }
.vg-projekt-blaettern a.vg-auftakt-pfeil { text-decoration: none !important; }
@media (max-width: 781px) {
	.vg-projekt-hero .vg-projekt-blaettern { bottom: auto; top: calc(var(--vg-kopf-h, 72px) + 16px); }
	.vg-projekt-blaettern .vg-blaettern-name { display: none; }
}

/* 03 – 1.13.0: Shop-Einstieg mit Grossbild und Text */
body.vg-shop-start main.vg-shop { padding-top: 0 !important; }
.vg-shop > .vg-projekt-auftakt.vg-shop-einstieg { width: calc(100vw - var(--vg-sbw, 0px)) !important; max-width: none !important; margin: 0 0 clamp(56px, 7vw, 96px) calc(50% - (100vw - var(--vg-sbw, 0px)) / 2) !important; }
.vg-shop-einstieg .vg-auftakt-leitsatz {
	margin: 0 0 -6px !important; color: #F7F5F0 !important; font-family: var(--vg-sans) !important; font-weight: 400 !important;
	font-size: clamp(40px, 5.6vw, 88px) !important; line-height: 1 !important; letter-spacing: -0.035em !important; text-shadow: 0 1px 24px rgba(0,0,0,.2);
}
.vg-shop-einstieg .vg-auftakt-begleit { width: min(52vw, 760px); }
.vg-shop-einstieg .vg-auftakt-begleittext { font-size: clamp(17px, 1.4vw, 22px) !important; max-width: 36em; }
.vg-shop-einstieg .vg-auftakt-link .vg-auftakt-bild { object-position: center 40%; }
/* Seitenkopf «Shop» mit Einleitung unter dem Grossbild entfällt – der Text steht im Bild */
body.vg-shop-start .vg-shop > .vg-seitenkopf { display: none !important; }
@media (max-width: 781px) { .vg-shop-einstieg .vg-auftakt-begleit { width: auto; } }

/* 03 – 1.13.1: Projektübersicht ohne Pfeile – Projektname rechts unten auf Höhe des Links */
.vg-projekte-z .vg-projekt-auftakt:not(:has(.vg-auftakt-steuerung)) .vg-auftakt-bildname { bottom: clamp(36px, 7vh, 88px); }

/* ==========================================================================
   03 – 1.14.0: Studio-Einstieg; Shop-Einstieg ohne Pfeile
   ========================================================================== */
body:is(.vg-studio-start, .vg-kontakt-start) main { padding-top: 0 !important; }
body:is(.vg-studio-start, .vg-kontakt-start) :is(.wp-block-post-title, .vg-zurueck, .vg-seite > .wp-block-post-featured-image) { display: none !important; }
body:is(.vg-studio-start, .vg-kontakt-start) .wp-block-post-content > .vg-studio-einstieg {
	width: calc(100vw - var(--vg-sbw, 0px)) !important; max-width: none !important;
	margin: 0 0 clamp(56px, 7vw, 96px) calc(50% - (100vw - var(--vg-sbw, 0px)) / 2) !important;
}
.vg-studio-einstieg .vg-auftakt-leitsatz {
	margin: 0 0 -6px !important; color: #F7F5F0 !important; font-family: var(--vg-sans) !important; font-weight: 400 !important;
	font-size: clamp(40px, 5.6vw, 88px) !important; line-height: 1 !important; letter-spacing: -0.035em !important; text-shadow: 0 1px 24px rgba(0,0,0,.2);
}
.vg-studio-einstieg .vg-auftakt-begleit { width: min(52vw, 760px); }
.vg-studio-einstieg .vg-auftakt-begleittext { font-size: clamp(17px, 1.4vw, 22px) !important; max-width: 36em; }
.vg-studio-einstieg .vg-auftakt-link .vg-auftakt-bild { object-position: center 30%; }
body:is(.vg-studio-start, .vg-kontakt-start) .wp-block-post-content > .vg-studio-wege {
	max-width: var(--wp--style--global--wide-size, 1440px) !important; width: auto !important; margin: 0 auto clamp(56px, 7vw, 96px) !important;
}
@media (max-width: 781px) { .vg-studio-einstieg .vg-auftakt-begleit { width: auto; } }

/* 03 – 1.14.1: Shop-Raster mit Linie auch links; nur eine Linie unter «Für Sie ausgesucht» */
body .vg-produktraster :is(.wc-block-product-template, .wp-block-post-template) { border-left: 1px solid var(--vg-linie); }
.vg-favoriten-kopf { border-bottom: 0 !important; padding-bottom: 0 !important; margin-bottom: 20px !important; }

/* 03 – 1.14.2: Studio-Einstieg – Schriftgrössen und Textbreite wie Startseite/Shop (Seitenregeln übersteuern) */
body:is(.vg-studio-start, .vg-kontakt-start) .wp-block-post-content .vg-studio-einstieg .vg-auftakt-begleit {
	position: absolute !important; left: var(--vg-kante) !important; right: auto !important; bottom: clamp(36px, 7vh, 88px) !important;
	width: min(52vw, 760px) !important; max-width: none !important; margin: 0 !important; gap: 26px !important;
}
body:is(.vg-studio-start, .vg-kontakt-start) .wp-block-post-content .vg-studio-einstieg h1.vg-auftakt-leitsatz {
	font-size: clamp(40px, 5.6vw, 88px) !important; line-height: 1 !important; letter-spacing: -0.035em !important;
	max-width: none !important; margin: 0 0 -6px !important; padding: 0 !important; border: 0 !important; font-weight: 400 !important;
}
body:is(.vg-studio-start, .vg-kontakt-start) .wp-block-post-content .vg-studio-einstieg h1.vg-auftakt-leitsatz::before { content: none !important; }
body:is(.vg-studio-start, .vg-kontakt-start) .wp-block-post-content .vg-studio-einstieg p.vg-auftakt-begleittext {
	font-size: clamp(17px, 1.4vw, 22px) !important; line-height: 1.3 !important; max-width: 36em !important; margin: 0 !important; color: #F7F5F0 !important;
}
body:is(.vg-studio-start, .vg-kontakt-start) .wp-block-post-content .vg-studio-einstieg .vg-hero-name { font-size: 11px !important; }
body:is(.vg-studio-start, .vg-kontakt-start) .wp-block-post-content .vg-studio-einstieg .vg-auftakt-mehr { font-size: 12px !important; color: #F7F5F0 !important; }
@media (max-width: 781px) { body:is(.vg-studio-start, .vg-kontakt-start) .wp-block-post-content .vg-studio-einstieg .vg-auftakt-begleit { width: auto !important; right: var(--vg-rand) !important; } }

/* 03 – 1.14.3: Studio-Einstieg bis ganz nach oben (Abstände von Titel/Seitenblöcken entfernen) */
body:is(.vg-studio-start, .vg-kontakt-start) .wp-site-blocks > main, body:is(.vg-studio-start, .vg-kontakt-start) .wp-site-blocks > .vg-main { margin-top: 0 !important; padding-top: 0 !important; }
body:is(.vg-studio-start, .vg-kontakt-start) .vg-seite > .wp-block-post-content { margin-top: 0 !important; padding-top: 0 !important; }
body:is(.vg-studio-start, .vg-kontakt-start) .vg-seite > .wp-block-post-content > .vg-studio-einstieg:first-child { margin-top: 0 !important; }
body:is(.vg-studio-start, .vg-kontakt-start) .vg-studio-einstieg { height: calc(100svh - var(--wp-admin--admin-bar--height, 0px)) !important; }
/* 1.14.4: Kontakt mit eigenem Grossbild im Inhalt (vg-hero): ebenfalls bis ganz nach oben */
body.vg-kontakt-start:not(.vg-kontakt-einstieg-aktiv) .wp-block-post-content > .vg-hero:first-child { margin-top: 0 !important; }
body.vg-bildkopf.page .wp-site-blocks > main { margin-top: 0 !important; }

/* ==========================================================================
   03 – 1.14.6: Kein Rechteck beim Klicken – Fokus als Schriftfarbe und Unterstreichung
   ========================================================================== */
a:focus, button:focus, [role="button"]:focus, .wp-block-navigation-item__content:focus, summary:focus { outline: none !important; box-shadow: none !important; }
/* Tastaturbedienung bleibt sichtbar, aber im Stil der Seite */
a:focus-visible, .wp-block-navigation-item__content:focus-visible {
	outline: none !important; box-shadow: none !important;
	color: var(--wp--preset--color--akzent, #80613A) !important;
	text-decoration: underline !important; text-decoration-thickness: 1px !important; text-underline-offset: 5px !important;
}
button:focus-visible, [role="button"]:focus-visible { outline: none !important; box-shadow: 0 0 0 1px var(--wp--preset--color--akzent, #80613A) !important; }
/* Bild-Links (Karten, Vollbild-Flächen) ohne Unterstreichung, nur Titel in Akzentfarbe */
:is(.vg-linienraster, .vg-shop-objekte, .vg-projektraster, .vg-produktraster) a:focus-visible,
.vg-auftakt-flaeche:focus-visible, .vg-shop-stimmung:focus-visible { text-decoration: none !important; }
:is(.vg-linienraster, .vg-shop-objekte) a:focus-visible :is(.vg-weg-titel, .vg-karte-name),
.vg-projektraster a:focus-visible, .vg-produktraster .vg-produkt-titel a:focus-visible { color: var(--wp--preset--color--akzent, #80613A) !important; }

/* 03 – 1.14.9: Leistungsprofil – weniger Weissraum, ohne kleine Nummern */
.vg-leistungsphasen .vg-label { display: none !important; }
body.vg-editorial .wp-block-post-content > .vg-leistungsphasen.wp-block-columns { margin-top: var(--vg-v2, 32px) !important; margin-bottom: 0 !important; row-gap: clamp(28px, 3vw, 40px) !important; }
.vg-leistungsphasen > .wp-block-column { padding-top: 14px !important; padding-bottom: 0 !important; }
body.vg-editorial .vg-leistungsphasen h3 { margin: 0 0 10px !important; padding: 0 !important; border: 0 !important; font-size: clamp(19px, 1.5vw, 22px) !important; }
body.vg-editorial .vg-leistungsphasen ul { margin: 0 !important; }
body.vg-editorial .vg-leistungsphasen ul li { margin: 0 0 2px !important; line-height: 1.6 !important; }
body.vg-editorial .wp-block-post-content > p:has(+ .vg-leistungsphasen) { margin-bottom: 0 !important; }

/* ==========================================================================
   03 – 1.15.0: Navigation Studio · Projekte · Shop · Kontakt; feste Filterleisten
   ========================================================================== */
/* Shop jetzt in der Hauptnavigation – rechte Shop-Navigation ausblenden (Suche, Konto, Warenkorb bleiben) */
.vg-kopf .vg-kopf-rechts .vg-shopnav { display: none !important; }
/* Fusszeile: Shop-Untermenü rechtsbündig, weil Kontakt jetzt der letzte Punkt ist */
.vg-fuss-nav-punkt:nth-last-child(2) .vg-fuss-sub { left: auto; right: 0; text-align: right; }

/* Gemeinsamer Stil der festen Leisten */
.vg-projekte-z > .vg-filterleiste, .vg-shop > .vg-shopleiste {
	position: sticky; top: calc(var(--vg-kopf-h, 92px) + var(--wp-admin--admin-bar--height, 0px)); z-index: 30;
	max-width: var(--wp--style--global--wide-size, 1440px) !important; margin-left: auto !important; margin-right: auto !important;
	background: var(--wp--preset--color--creme); border-top: 1px solid var(--wp--preset--color--linie); border-bottom: 1px solid var(--wp--preset--color--linie);
	padding: 14px 0 !important; box-sizing: border-box;
}
/* Projekte: Leiste mit Kategorien und Anzahl */
.vg-projekte-z > .vg-filterleiste { display: flex !important; justify-content: space-between; align-items: baseline; margin-top: 0 !important; margin-bottom: clamp(24px, 3vw, 40px) !important; }
.vg-projekte-z .vg-seitenkopf-projekte { padding-bottom: clamp(16px, 2vw, 24px) !important; }
.vg-filter-links sup, .vg-shopleiste sup { font-size: 9px; letter-spacing: 0.04em; margin-left: 3px; vertical-align: super; color: var(--wp--preset--color--meta); }
.vg-filter-links a.ist-aktiv sup { color: var(--vg-text); }
.vg-projekte-z .vg-projekte-raster { border-top: 0 !important; }

/* Shop: Kategorien als Textlinks, kuratierte Einstiege rechts */
.vg-shop > .vg-shopleiste { margin-top: 0 !important; margin-bottom: clamp(32px, 4vw, 56px) !important; }
.vg-shopleiste-zeile { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 10px 32px; }
.vg-shopleiste .vg-filter { display: flex; flex-wrap: wrap; gap: 8px clamp(16px, 1.8vw, 28px) !important; padding: 0 !important; }
.vg-shopleiste .vg-chip {
	min-height: 0 !important; padding: 0 0 4px !important; border: 0 !important; background: none !important;
	font-size: 12px !important; letter-spacing: 0.14em !important; color: var(--wp--preset--color--meta) !important;
	background-image: linear-gradient(currentColor, currentColor) !important; background-repeat: no-repeat !important; background-position: 0 100% !important; background-size: 0 1px !important;
	transition: color .25s ease, background-size .35s ease;
}
.vg-shopleiste .vg-chip:hover, .vg-shopleiste .vg-chip.ist-aktiv { color: var(--vg-text) !important; background-size: 100% 1px !important; }
.vg-shopleiste .vg-unterfilter { order: 3; flex: 0 0 100%; margin-top: 4px !important; padding-top: 10px; border-top: 1px solid var(--wp--preset--color--linie); }
.vg-shop-kuratiert { display: flex; flex-wrap: wrap; gap: 8px 24px; font-family: var(--vg-sans); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; }
.vg-shop-kuratiert a { color: var(--vg-text) !important; text-decoration: none !important; background: none !important; padding-bottom: 4px; border-bottom: 1px solid var(--vg-text); }
.vg-shop-kuratiert a::after { content: "\2002\2192"; }
@media (max-width: 781px) {
	.vg-projekte-z > .vg-filterleiste, .vg-shop > .vg-shopleiste { padding: 10px 0 !important; }
	.vg-shopleiste-zeile { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
	.vg-shopleiste .vg-filter, .vg-shop-kuratiert { flex-wrap: nowrap; white-space: nowrap; }
	.vg-shop-kuratiert { display: none; }
}

/* ==========================================================================
   03 – 1.15.1: Shop prägnanter – Mega-Menü in der Hauptnavigation, Sortiment-Übersicht
   ========================================================================== */
/* Mega-Menü unter der ganzen Kopfzeile, auf der Seitenkante */
@media (min-width: 1000px) {
	body .vg-kopf .vg-hauptnav .vg-mega > .wp-block-navigation__submenu-container {
		position: fixed !important; top: var(--vg-kopf-h, 92px) !important; left: var(--vg-kante) !important; right: var(--vg-kante) !important;
		width: auto !important; max-width: none !important; box-sizing: border-box;
		grid-template-columns: repeat(5, minmax(0, 1fr)) minmax(0, 1fr) !important;
		background: var(--wp--preset--color--creme) !important; border: 0 !important; border-top: 1px solid var(--wp--preset--color--linie) !important;
		box-shadow: 0 18px 40px -24px rgba(26, 26, 25, .35) !important; padding: 28px 0 32px !important; z-index: 95;
	}
	body .vg-kopf .vg-hauptnav .vg-mega::after { content: ""; position: absolute; left: -24px; right: -24px; top: 100%; height: 48px; }
	body .vg-kopf .vg-hauptnav .vg-mega .vg-mega-gruppe > .wp-block-navigation-item__content { color: var(--vg-text) !important; }
}

/* Sortiment-Übersicht auf der Shop-Startseite */
.vg-shop > .vg-sortiment { max-width: var(--wp--style--global--wide-size, 1440px) !important; margin: 0 auto clamp(56px, 7vw, 96px) !important; }
.vg-sortiment .vg-start-titel { margin-bottom: 20px !important; }
.vg-sortiment-raster { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px clamp(24px, 3vw, 48px); }
.vg-sortiment-gruppe { border-top: 1px solid var(--vg-text); padding-top: 12px; }
.vg-sortiment-titel {
	display: flex; justify-content: space-between; gap: 10px; margin-bottom: 10px;
	font-family: var(--vg-sans); font-size: clamp(17px, 1.3vw, 20px); color: var(--vg-text) !important; text-decoration: none !important; background: none !important;
}
.vg-sortiment-titel sup { font-size: 10px; color: var(--wp--preset--color--meta); margin-left: 4px; }
.vg-sortiment-titel::after { content: "\2192"; margin-left: auto; transition: transform .35s ease; }
.vg-sortiment-titel:hover::after { transform: translateX(4px); }
.vg-sortiment-gruppe ul { list-style: none !important; margin: 0 !important; padding: 0 !important; }
.vg-sortiment-gruppe li { margin: 0 !important; padding: 0 !important; }
.vg-sortiment-gruppe li::before { content: none !important; }
.vg-sortiment-gruppe li a { display: inline-block; padding: 3px 0; font-size: 14px; color: var(--wp--preset--color--sekundaer) !important; text-decoration: none !important; background: none !important; }
.vg-sortiment-gruppe li a:hover { color: var(--vg-text) !important; text-decoration: underline !important; text-underline-offset: 4px; }
@media (max-width: 1023px) { .vg-sortiment-raster { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { .vg-sortiment-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* 03 – 1.15.2: Wegweiser im Suchfeld */
.vg-suche { max-height: calc(100vh - var(--vg-kopf-h, 92px)); overflow-y: auto; }
.vg-wegweiser { max-width: var(--wp--style--global--wide-size, 1440px); margin: 22px auto 0; box-sizing: border-box; display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 1fr); gap: 24px clamp(32px, 4vw, 64px); }
@media (min-width: 1000px) { .vg-wegweiser { padding-left: var(--vg-achse); } }
.vg-wegweiser-titel { margin: 0 0 10px !important; font-family: var(--vg-sans); font-size: 11px !important; letter-spacing: 0.16em; text-transform: uppercase; color: var(--wp--preset--color--meta); }
.vg-wegweiser-block .vg-wegweiser-titel:not(:first-child) { margin-top: 20px !important; }
.vg-wegweiser-raster { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px 24px; }
.vg-wegweiser-gruppe { display: flex; flex-direction: column; gap: 2px; border-top: 1px solid var(--wp--preset--color--linie); padding-top: 8px; }
.vg-wegweiser a { font-family: var(--vg-sans); font-size: 13.5px; line-height: 1.5; color: var(--wp--preset--color--sekundaer) !important; text-decoration: none !important; background: none !important; transition: color .2s, opacity .2s; }
.vg-wegweiser a.vg-ww-haupt { font-size: 15px; color: var(--vg-text) !important; margin-bottom: 2px; }
.vg-wegweiser a:hover { color: var(--vg-text) !important; text-decoration: underline !important; text-underline-offset: 4px; }
.vg-wegweiser.ist-gefiltert a.ist-aus { opacity: .28; }
.vg-wegweiser a.ist-treffer { color: var(--vg-text) !important; text-decoration: underline !important; text-underline-offset: 4px; }
.vg-wegweiser-leer { grid-column: 1 / -1; margin: 0 !important; font-size: 13px; color: var(--wp--preset--color--meta); }
@media (max-width: 900px) {
	.vg-wegweiser { grid-template-columns: minmax(0, 1fr); }
	.vg-wegweiser-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* 03 – 1.15.4: Suche – passende Objekte aus dem Shop direkt beim Tippen */
.vg-ww-produkte { grid-column: 1 / -1; order: -1; border-bottom: 1px solid var(--wp--preset--color--linie); padding-bottom: 18px; }
.vg-ww-produktliste { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
.vg-ww-produkt { display: flex; flex-direction: column; gap: 6px; color: var(--vg-text) !important; text-decoration: none !important; background: none !important; }
.vg-ww-produkt img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block; background: #fff; }
.vg-ww-name { font-family: var(--vg-sans); font-size: 13.5px; line-height: 1.35; }
.vg-ww-preis { font-family: var(--vg-sans); font-size: 12px; color: var(--wp--preset--color--meta); }
.vg-ww-produkt:hover .vg-ww-name { text-decoration: underline; text-underline-offset: 3px; }
.vg-ww-alle { display: inline-block; margin-top: 14px; font-family: var(--vg-sans); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--vg-text) !important; text-decoration: none !important; padding-bottom: 4px; border-bottom: 1px solid var(--vg-text); background: none !important; }
.vg-ww-alle::after { content: "\2002\2192"; }
@media (max-width: 900px) { .vg-ww-produktliste { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* 03 – 1.15.7: Objekte im Shop ruhiger – unten statt oben, kleine Vorschau, sanft eingeblendet */
.vg-wegweiser .vg-ww-produkte { order: 10 !important; border-bottom: 0 !important; border-top: 1px solid var(--wp--preset--color--linie); padding: 14px 0 0 !important; animation: vg-ww-ein .5s ease both; }
@keyframes vg-ww-ein { from { opacity: 0; } to { opacity: 1; } }
.vg-wegweiser .vg-ww-produktliste { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 10px 24px !important; }
.vg-wegweiser a.vg-ww-produkt { flex-direction: row !important; align-items: center; gap: 12px !important; display: grid !important; grid-template-columns: 52px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 12px; row-gap: 0; }
.vg-wegweiser a.vg-ww-produkt img { grid-row: 1 / span 2; width: 52px !important; height: 52px; aspect-ratio: 1 / 1 !important; }
.vg-wegweiser .vg-ww-name { font-size: 13.5px; line-height: 1.35; align-self: end; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.vg-wegweiser .vg-ww-preis { align-self: start; }
.vg-wegweiser a.vg-ww-produkt:hover { text-decoration: none !important; }
.vg-wegweiser .vg-ww-alle { margin-top: 12px; font-size: 11px; }
@media (max-width: 900px) { .vg-wegweiser .vg-ww-produktliste { grid-template-columns: minmax(0, 1fr) !important; } }

/* 03 – 1.15.8: Mega-Menü mit Titelzeile «Sortiment» */
.vg-kopf .vg-mega > .wp-block-navigation__submenu-container > .vg-mega-kopf { grid-column: 1 / -1 !important; border-bottom: 1px solid var(--wp--preset--color--linie); padding-bottom: 12px; margin-bottom: 4px; }
.vg-kopf .vg-mega > .wp-block-navigation__submenu-container > .vg-mega-kopf > .wp-block-navigation-item__content { font-size: 22px !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--vg-text) !important; padding: 0 !important; white-space: nowrap; }
.vg-kopf .vg-mega > .wp-block-navigation__submenu-container > .vg-mega-kopf > .wp-block-navigation-item__content::after { content: "\2003 Alle Objekte ansehen \2192"; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--wp--preset--color--meta); vertical-align: 3px; }
.vg-kopf .vg-mega > .wp-block-navigation__submenu-container > .vg-mega-kopf > .wp-block-navigation-item__content:hover::after { color: var(--vg-text); }
.vg-kopf .vg-shopnav .vg-mega-kopf { display: none !important; }

/* ==========================================================================
   03 – 1.15.9: Sortiment im Shop-Menü neu – kompakt und ruhig
   Links: «Sortiment», Marken, Entdecken · rechts: 5 Spalten Gruppen mit Untergruppen
   ========================================================================== */
@media (min-width: 1000px) {
	body .vg-kopf .vg-hauptnav .vg-mega > .wp-block-navigation__submenu-container {
		display: grid !important; grid-template-columns: minmax(170px, 1.1fr) repeat(5, minmax(0, 1fr)) !important;
		grid-auto-flow: row dense !important; align-items: start !important; gap: 22px clamp(18px, 2vw, 32px) !important;
		padding: 24px var(--vg-kante) 28px !important; left: 0 !important; right: 0 !important;
		box-shadow: 0 24px 36px -30px rgba(26, 26, 25, .4) !important; max-height: calc(100vh - var(--vg-kopf-h, 92px)); overflow-y: auto;
	}
	body .vg-kopf .vg-hauptnav .vg-mega > .wp-block-navigation__submenu-container > li {
		grid-row: auto !important; grid-column: auto !important; padding: 0 !important; margin: 0 !important; border: 0 !important; min-width: 0 !important; width: auto !important;
	}
	/* linke Spalte */
	body .vg-kopf .vg-hauptnav .vg-mega > .wp-block-navigation__submenu-container > .vg-mega-kopf { grid-column: 1 !important; grid-row: 1 !important; }
	body .vg-kopf .vg-hauptnav .vg-mega > .wp-block-navigation__submenu-container > .vg-mega-marken { grid-column: 1 !important; grid-row: 2 !important; }
	body .vg-kopf .vg-hauptnav .vg-mega > .wp-block-navigation__submenu-container > .vg-mega-entdecken { grid-column: 1 !important; grid-row: 3 !important; }
	body .vg-kopf .vg-hauptnav .vg-mega > .wp-block-navigation__submenu-container > .vg-mega-gruppe:not(.vg-mega-marken):not(.vg-mega-entdecken) { grid-column: span 1 !important; }
	body .vg-kopf .vg-hauptnav .vg-mega > .wp-block-navigation__submenu-container > .vg-mega-gruppe:not(.vg-mega-marken):not(.vg-mega-entdecken):nth-child(-n+6) { grid-row: 1 !important; }
	body .vg-kopf .vg-hauptnav .vg-mega > .wp-block-navigation__submenu-container > .vg-mega-gruppe:not(.vg-mega-marken):not(.vg-mega-entdecken):nth-child(n+7) { grid-row: 2 / span 2 !important; }
	/* Kopf der linken Spalte */
	body .vg-kopf .vg-hauptnav .vg-mega > .wp-block-navigation__submenu-container > .vg-mega-kopf > .wp-block-navigation-item__content {
		display: flex !important; flex-direction: column; gap: 6px; font-size: 20px !important; line-height: 1.2; white-space: normal !important;
	}
	body .vg-kopf .vg-hauptnav .vg-mega > .wp-block-navigation__submenu-container > .vg-mega-kopf > .wp-block-navigation-item__content::after {
		content: "Alle Objekte \2192"; font-size: 11px; letter-spacing: 0.14em; vertical-align: 0;
	}
	body .vg-kopf .vg-hauptnav .vg-mega > .wp-block-navigation__submenu-container > .vg-mega-kopf { border: 0 !important; }
}
/* Gruppen: Titel normal geschrieben, Untergruppen klein und eng */
body .vg-kopf .vg-mega .vg-mega-gruppe { gap: 0 !important; border-top: 1px solid var(--wp--preset--color--linie) !important; padding-top: 8px !important; }
body .vg-kopf .vg-mega .vg-mega-gruppe > .wp-block-navigation-item__content {
	font-size: 14px !important; font-weight: 400 !important; letter-spacing: 0.01em !important; text-transform: none !important;
	color: var(--vg-text) !important; padding: 0 0 4px !important; white-space: normal !important; line-height: 1.3 !important;
}
body .vg-kopf .vg-mega .vg-mega-gruppe > .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	font-size: 13px !important; line-height: 1.35 !important; padding: 2px 0 !important; color: var(--wp--preset--color--sekundaer, #5C5B58) !important;
	letter-spacing: 0.01em !important; text-transform: none !important; white-space: normal !important;
}
body .vg-kopf .vg-mega .vg-mega-gruppe a:hover { color: var(--vg-text) !important; text-decoration: underline !important; text-underline-offset: 3px; }
body .vg-kopf .vg-mega .vg-mega-gruppe > .wp-block-navigation__submenu-container { gap: 0 !important; }

/* Suchseiten: Shopleiste wie im Shop */
.vg-suchseite > .vg-shopleiste {
	position: sticky; top: calc(var(--vg-kopf-h, 92px) + var(--wp-admin--admin-bar--height, 0px)); z-index: 30;
	max-width: var(--wp--style--global--wide-size, 1440px) !important; margin: 0 auto clamp(28px, 3vw, 44px) !important;
	background: var(--wp--preset--color--creme); border-top: 1px solid var(--wp--preset--color--linie); border-bottom: 1px solid var(--wp--preset--color--linie);
	padding: 14px 0 !important; box-sizing: border-box;
}
.vg-shop > .vg-suchkopf { margin: 0 0 clamp(20px, 2.5vw, 32px) !important; }
/* 1.15.9: gleiche Linie und Höhe für alle Gruppen */
html body .vg-kopf .vg-mega > .wp-block-navigation__submenu-container > li.vg-mega-gruppe:not(#vg-x) {
	border: 0 !important; border-top: 1px solid var(--wp--preset--color--linie) !important; padding: 10px 0 0 !important; margin: 0 !important;
}
html body .vg-kopf .vg-mega > .wp-block-navigation__submenu-container > li.vg-mega-kopf:not(#vg-x) { border: 0 !important; padding: 0 !important; }

/* 03 – 1.15.10: feste Leisten rücken nach oben, wenn die Kopfzeile beim Scrollen verschwindet (keine Lücke mehr) */
.vg-projekte-z > .vg-filterleiste, .vg-shop > .vg-shopleiste, .vg-suchseite > .vg-shopleiste { transition: top .35s ease; }
body.vg-kopf-weg .vg-projekte-z > .vg-filterleiste,
body.vg-kopf-weg .vg-shop > .vg-shopleiste,
body.vg-kopf-weg .vg-suchseite > .vg-shopleiste { top: var(--wp-admin--admin-bar--height, 0px) !important; }
/* Suchseiten: nur die Kategorien, ohne «Neu» und «Marken» – bleibt einzeilig */
.vg-suchseite .vg-shop-kuratiert, body.search .vg-shop-kuratiert { display: none !important; }

/* 03 – 1.15.11: ohne Titel «Sortiment» – links Marken und Entdecken */
@media (min-width: 1000px) {
	body .vg-kopf .vg-hauptnav .vg-mega > .wp-block-navigation__submenu-container > .vg-mega-marken { grid-row: 1 !important; }
	body .vg-kopf .vg-hauptnav .vg-mega > .wp-block-navigation__submenu-container > .vg-mega-entdecken { grid-row: 2 !important; }
	body .vg-kopf .vg-hauptnav .vg-mega > .wp-block-navigation__submenu-container > .vg-mega-gruppe:not(.vg-mega-marken):not(.vg-mega-entdecken):nth-child(-n+5) { grid-row: 1 !important; }
	body .vg-kopf .vg-hauptnav .vg-mega > .wp-block-navigation__submenu-container > .vg-mega-gruppe:not(.vg-mega-marken):not(.vg-mega-entdecken):nth-child(n+6) { grid-row: 2 !important; }
}

/* 03 – 1.15.12: Shop-Menü enger – weniger Abstand, grosse Gruppen zweispaltig */
@media (min-width: 1000px) {
	body .vg-kopf .vg-hauptnav .vg-mega > .wp-block-navigation__submenu-container {
		grid-template-columns: minmax(150px, 1fr) repeat(6, minmax(0, 1fr)) !important;
		gap: 14px clamp(14px, 1.6vw, 24px) !important; padding: 18px var(--vg-kante) 20px !important;
	}
	html body .vg-kopf .vg-mega > .wp-block-navigation__submenu-container > li.vg-mega-gruppe:not(#vg-x) { padding-top: 7px !important; }
	/* Gruppen mit 5 und mehr Untergruppen: über zwei Spalten, Untergruppen nebeneinander */
	body .vg-kopf .vg-hauptnav .vg-mega > .wp-block-navigation__submenu-container > .vg-mega-gruppe:not(.vg-mega-marken):not(.vg-mega-entdecken):has(> .wp-block-navigation__submenu-container > li:nth-child(5)) { grid-column: span 2 !important; }
	html body .vg-kopf .vg-mega > .wp-block-navigation__submenu-container > .vg-mega-gruppe:not(.vg-mega-marken):not(.vg-mega-entdecken):has(> .wp-block-navigation__submenu-container > li:nth-child(5)) > .wp-block-navigation__submenu-container {
		display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(3, auto); grid-auto-flow: column; column-gap: clamp(14px, 1.6vw, 24px); width: 100% !important;
	}
}
body .vg-kopf .vg-mega .vg-mega-gruppe > .wp-block-navigation-item__content { padding-bottom: 2px !important; }
body .vg-kopf .vg-mega .vg-mega-gruppe > .wp-block-navigation__submenu-container .wp-block-navigation-item__content { padding: 1px 0 !important; line-height: 1.3 !important; }

/* ==========================================================================
   03 – 1.15.13: Nachhaltigkeit – Abschnitte zweispaltig (Titel links, Text rechts), enger
   ========================================================================== */
@media (min-width: 900px) {
	body.vg-seite-nachhaltigkeit .vg-seite .wp-block-post-content {
		display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); column-gap: clamp(32px, 5vw, 96px); align-items: start;
		max-width: var(--wp--style--global--wide-size, 1440px) !important; margin-left: auto !important; margin-right: auto !important;
	}
	body.vg-seite-nachhaltigkeit .vg-seite .wp-block-post-content > * { grid-column: 1 / -1; }
	body.vg-seite-nachhaltigkeit:not(.woocommerce) .vg-seite .wp-block-post-content.wp-block-post-content > :is(h2, h3):not([class*="vg-"]) {
		grid-column: 1 !important; max-width: none !important; margin: clamp(28px, 3vw, 40px) 0 0 !important;
		padding-top: 14px !important; border-top: 1px solid var(--wp--preset--color--linie) !important;
	}
	body.vg-seite-nachhaltigkeit:not(.woocommerce) .vg-seite .wp-block-post-content.wp-block-post-content > :is(h2, h3):not([class*="vg-"]) + p:not([class*="vg-"]) {
		margin-top: clamp(28px, 3vw, 40px) !important; padding-top: 16px; border-top: 1px solid var(--wp--preset--color--linie);
	}
	body.vg-seite-nachhaltigkeit:not(.woocommerce) .vg-seite .wp-block-post-content.wp-block-post-content > p:not([class*="vg-"]) {
		grid-column: 2 !important; max-width: 720px !important; margin-left: 0 !important; margin-right: 0 !important; margin-bottom: 0 !important;
	}
	body.vg-seite-nachhaltigkeit:not(.woocommerce) .vg-seite .wp-block-post-content.wp-block-post-content > p:not([class*="vg-"]) + p:not([class*="vg-"]) { margin-top: 1em !important; }
	body.vg-seite-nachhaltigkeit .vg-seite .wp-block-post-content > h1.vg-leitsatz { margin-bottom: clamp(8px, 1vw, 16px) !important; }
	body.vg-seite-nachhaltigkeit .vg-seite .wp-block-post-content > :is(.vg-kernsatz, .vg-leitsatz-name, .vg-einladung) { margin-left: 0 !important; }
	body.vg-seite-nachhaltigkeit .vg-seite .wp-block-post-content > .vg-kernsatz { margin-top: clamp(48px, 5vw, 72px) !important; }
}
@media (max-width: 899px) {
	body.vg-seite-nachhaltigkeit:not(.woocommerce) .vg-seite .wp-block-post-content > :is(h2, h3):not([class*="vg-"]) { margin-top: 32px !important; }
	body.vg-seite-nachhaltigkeit .vg-seite .wp-block-post-content > h1.vg-leitsatz { margin-bottom: 24px !important; }
}

/* ==========================================================================
   03 – 1.16.0: Typografie harmonisiert – Logo und Navigation kräftiger, Titel ruhiger
   Skala: Navigation 14 · Text 16–17 · Abschnittstitel 22–24 · Leitsatz/Seitentitel 30–42
   ========================================================================== */
:root { --vg-t-titel: clamp(28px, 2.7vw, 42px); }
/* Logo grösser */
.vg-kopf .vg-logo svg { height: 40px !important; width: auto !important; }
@media (max-width: 781px) { .vg-kopf .vg-logo svg { height: 32px !important; } }
/* Hauptnavigation grösser, etwas weniger gesperrt */
@media (min-width: 782px) {
	.vg-kopf .vg-hauptnav { font-size: 14px !important; letter-spacing: 0.16em !important; }
	.vg-kopf .vg-hauptnav .wp-block-navigation__container { gap: clamp(28px, 2.6vw, 44px) !important; }
	.vg-kopf .vg-hauptnav .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content { font-size: 14px !important; letter-spacing: 0.16em !important; }
	.vg-kopf .vg-kopf-rechts svg { width: 19px !important; height: 19px !important; }
}
/* Leitsatz und Seitentitel: gleiche Grösse, ruhiger Zeilenfall */
.vg-seite .wp-block-post-content > h1.vg-leitsatz {
	font-size: var(--vg-t-titel) !important; line-height: 1.14 !important; letter-spacing: -0.02em !important;
	max-width: 20em !important; text-wrap: balance;
}
.vg-main :is(h1.wp-block-post-title, h1.wp-block-query-title, .vg-seitenkopf h1) { font-size: var(--vg-t-titel) !important; letter-spacing: -0.02em !important; }
/* Abschnittstitel und Fliesstext im gleichen Verhältnis */
body.vg-editorial:not(.woocommerce) .wp-block-post-content > :is(h2, h3):not([class*="vg-"]) { font-size: clamp(20px, 1.55vw, 24px) !important; }
body.vg-editorial:not(.woocommerce) .wp-block-post-content :is(p:not([class*="vg-"]):not([class*="-font-size"])) { font-size: clamp(15px, 1.05vw, 17px) !important; line-height: 1.7 !important; }

/* ==========================================================================
   03 – 1.18.0: Produktseite «Objekt mit Geschichte»
   ========================================================================== */
/* Beschreibung: ca. 6 Zeilen, «Mehr lesen» */
.vg-pg-details { margin-top: 8px; }
.vg-pg-text { font-size: 15px; line-height: 1.7; color: var(--wp--preset--color--sekundaer, #5C5B58); max-height: calc(1.7em * 6); overflow: hidden; position: relative; transition: max-height .4s ease; }
.vg-pg-text p { margin: 0 0 .8em !important; }
.vg-pg-text:not(.ist-offen)::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1.7em; background: linear-gradient(to bottom, rgba(241, 240, 236, 0), var(--wp--preset--color--creme, #F1F0EC)); pointer-events: none; }
.vg-pg-text.ist-offen { max-height: none; }
.vg-pg-mehr { background: none !important; border: 0 !important; padding: 0 !important; margin: 8px 0 0; cursor: pointer; font-family: var(--vg-sans); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--vg-text); text-decoration: underline; text-underline-offset: 4px; }
.vg-pg-mehr:hover { color: var(--wp--preset--color--akzent, #80613A); }
/* Details zum Aufklappen */
.vg-pg-auf { margin-top: 28px; border-top: 1px solid var(--wp--preset--color--linie); }
.vg-pg-punkt { border-bottom: 1px solid var(--wp--preset--color--linie); }
.vg-pg-punkt > summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; padding: 16px 0; font-size: 15px; color: var(--vg-text); }
.vg-pg-punkt > summary::-webkit-details-marker { display: none; }
.vg-pg-punkt > summary::after { content: "+"; font-size: 20px; font-weight: 300; line-height: 1; transition: transform .3s ease; }
.vg-pg-punkt[open] > summary::after { transform: rotate(45deg); }
.vg-pg-inhalt { padding: 0 0 18px; font-size: 14px; line-height: 1.7; color: var(--wp--preset--color--sekundaer, #5C5B58); }
.vg-pg-inhalt p { margin: 0 0 .7em !important; }
.vg-pg-inhalt table { width: 100%; border-collapse: collapse; margin: 4px 0 0; }
.vg-pg-inhalt th, .vg-pg-inhalt td { text-align: left; padding: 6px 0; border: 0 !important; border-bottom: 1px solid var(--wp--preset--color--linie) !important; font-weight: 400; vertical-align: top; background: none !important; }
.vg-pg-inhalt th { width: 40%; color: var(--wp--preset--color--meta); }
.vg-pg-inhalt td p { margin: 0 !important; }
.vg-pg-beratung { margin: 22px 0 0 !important; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; font-size: 13px; color: var(--wp--preset--color--meta); }
.vg-pg-beratung > a { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--vg-text) !important; text-decoration: none !important; border-bottom: 1px solid var(--vg-text); padding-bottom: 3px; background: none !important; }
.vg-pg-beratung > a::after { content: "\2002\2192"; }
.vg-pg-beratung span a { color: var(--wp--preset--color--meta) !important; }
/* Geschichte unter dem Kaufbereich */
.vg-produktseite .vg-pg-geschichte { max-width: var(--wp--style--global--wide-size, 1440px) !important; margin: clamp(72px, 8vw, 120px) auto 0 !important; display: flex; flex-direction: column; gap: clamp(72px, 8vw, 120px); }
.vg-pg-label { margin: 0 0 12px !important; font-family: var(--vg-sans); font-size: 12px !important; letter-spacing: 0.16em; text-transform: uppercase; color: var(--wp--preset--color--meta); }
.vg-pg-auswahl { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(32px, 5vw, 88px); border-top: 1px solid var(--wp--preset--color--linie); padding-top: 40px; }
.vg-pg-auswahl-bild { flex: 1 1 300px; max-width: 460px; }
.vg-pg-auswahl-bild img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block; }
.vg-pg-auswahl-text { flex: 1 1 420px; min-width: 0; }
.vg-pg-auswahl-text .vg-pg-label:first-child { color: var(--wp--preset--color--akzent, #80613A); }
.vg-pg-zitat { margin: 0 !important; padding: 0 !important; border: 0 !important; max-width: 640px; }
.vg-pg-zitat p { margin: 0 0 .5em !important; font-size: clamp(22px, 2vw, 32px) !important; line-height: 1.28 !important; letter-spacing: -0.015em; color: var(--vg-text) !important; font-style: normal; }
.vg-pg-name-klein { margin-top: 18px !important; }
.vg-pg-herkunft { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 3vw, 48px); border-top: 1px solid var(--wp--preset--color--linie); padding-top: 24px; }
.vg-pg-spalte p { font-size: 15px; line-height: 1.7; color: var(--wp--preset--color--sekundaer, #5C5B58); margin: 0 0 .6em !important; }
.vg-pg-spalte .vg-pg-name { font-size: 20px !important; line-height: 1.3 !important; color: var(--vg-text) !important; margin-bottom: 8px !important; }
.vg-pg-spalte .vg-pg-name a { color: inherit !important; text-decoration: none !important; background: none !important; } .vg-pg-spalte .vg-pg-name a:hover { color: var(--wp--preset--color--akzent, #80613A) !important; }
.vg-pg-raum-bild { display: block; width: calc(100vw - var(--vg-sbw, 0px)); margin-left: calc(50% - (100vw - var(--vg-sbw, 0px)) / 2); }
.vg-pg-raum-bild img { width: 100%; height: clamp(340px, 48vw, 720px); object-fit: cover; display: block; }
.vg-pg-raum-zeile { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; padding-top: 14px; }
.vg-pg-raum-zeile p { margin: 0 !important; font-size: 13px; color: var(--wp--preset--color--meta); }
.vg-pg-link { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--vg-text) !important; text-decoration: none !important; border-bottom: 1px solid var(--vg-text); padding-bottom: 3px; background: none !important; }
.vg-pg-link::after { content: "\2002\2192"; }
@media (max-width: 781px) {
	.vg-pg-herkunft { grid-template-columns: minmax(0, 1fr); }
	.vg-pg-auswahl-bild { max-width: none; }
}

/* 03 – 1.18.1: nur ein Projekt in der Auswahl – über die ganze Breite */
body:not(.paged) .vg-projektraster.vg-projekte-raster .wp-block-post-template > li:only-child { grid-column: 1 / -1 !important; grid-row: auto; border-right: 0 !important; }
body:not(.paged) .vg-projektraster.vg-projekte-raster .wp-block-post-template > li:only-child .wp-block-post-featured-image { min-height: 0 !important; aspect-ratio: 21 / 9 !important; flex: none !important; }
body:not(.paged) .vg-projektraster.vg-projekte-raster .wp-block-post-template > li:only-child .vg-karte-text { display: block; }

/* 03 – 1.18.2: Warenkorb, Mini-Warenkorb und Kasse ohne Produkttext – nur Name, Ausführung, Menge, Preis */
.wc-block-components-product-metadata__description,
.wc-block-cart-item__product .wc-block-components-product-metadata__description,
.wc-block-mini-cart__drawer .wc-block-components-product-metadata__description,
.wc-block-components-order-summary-item .wc-block-components-product-metadata__description { display: none !important; }
/* Einzelpreis nur zeigen, wenn mehr als ein Stück im Warenkorb liegt */
.wc-block-cart-item__wrap .wc-block-cart-item__prices { font-size: 13px !important; color: var(--wp--preset--color--meta) !important; }
.wc-block-cart-items__row:has(.wc-block-components-quantity-selector__input[value="1"]) .wc-block-cart-item__prices { display: none !important; }

/* 03 – 1.18.3: Produkttext im Warenkorb sicher ausblenden (alle WooCommerce-Varianten), Ausführung bleibt */
body .wc-block-components-product-metadata > :not(.wc-block-components-product-details):not(ul),
body .wc-block-cart-item__product .wc-block-components-product-metadata__description,
body .wc-block-components-order-summary-item__description .wc-block-components-product-metadata__description { display: none !important; }

/* ==========================================================================
   03 – 1.18.4: Alle grossen Titel halbfett (600) und rund ein Drittel kleiner
   (:not(#vg-fett) erhöht nur die Gewichtung, damit ältere Regeln übersteuert werden)
   ========================================================================== */
/* Grossbild-Leitsätze: Startseite, Studio, Kontakt, Shop, Seiten */
.vg-auftakt-leitsatz:not(#vg-fett) {
	font-weight: 600 !important; font-size: clamp(30px, 3.8vw, 60px) !important;
	line-height: 1.04 !important; letter-spacing: -0.025em !important;
}
.vg-auftakt-titel:not(#vg-fett) { font-weight: 600 !important; font-size: clamp(32px, 4.4vw, 72px) !important; line-height: 1 !important; letter-spacing: -0.03em !important; }
.vg-slider-leitsatz__titel:not(#vg-fett) { font-weight: 600 !important; font-size: clamp(30px, 3.8vw, 56px) !important; }
/* Abschnittstitel Startseite und Kompetenz */
.vg-kompetenz-titel:not(#vg-fett) { font-weight: 600 !important; font-size: clamp(28px, 3vw, 44px) !important; letter-spacing: -0.025em !important; }
.vg-start-titel:not(#vg-fett) { font-weight: 600 !important; font-size: clamp(26px, 2.4vw, 36px) !important; letter-spacing: -0.02em !important; }
.vg-shop-stimmung-titel:not(#vg-fett) { font-weight: 600 !important; font-size: clamp(22px, 1.9vw, 28px) !important; }
/* Projekt- und Seitentitel */
.vg-projekt-hero :is(h1, .wp-block-post-title):not(#vg-fett) { font-weight: 600 !important; font-size: clamp(26px, 2.8vw, 40px) !important; letter-spacing: -0.02em !important; }
body :is(h1, .wp-block-post-title):not(.vg-auftakt-leitsatz):not(.vg-auftakt-titel):not(#vg-fett) { font-weight: 600 !important; }
body.vg-editorial:not(.woocommerce) .wp-block-post-content > h2:not([class*="vg-"]):not(#vg-fett) { font-weight: 600 !important; }

/* 03 – 1.18.5: Projektkategorie – erste Zeile der Beschreibung als fetter Titel über dem Text */
.vg-projekt-auftakt:not(.vg-start-auftakt) .vg-auftakt-leitsatz:not(#vg-fett) {
	margin: 0 0 -6px !important; color: #F7F5F0 !important; font-family: var(--vg-sans) !important;
	text-shadow: 0 1px 24px rgba(0,0,0,.2);
}
.vg-projekt-auftakt:not(.vg-start-auftakt) .vg-auftakt-begleit:has(.vg-auftakt-leitsatz) { width: min(52vw, 760px); }
.vg-projekt-auftakt:not(.vg-start-auftakt) .vg-auftakt-leitsatz + .vg-auftakt-begleittext { font-size: clamp(17px, 1.4vw, 22px) !important; max-width: 36em; }
@media (max-width: 781px) { .vg-projekt-auftakt:not(.vg-start-auftakt) .vg-auftakt-begleit:has(.vg-auftakt-leitsatz) { width: auto; right: var(--vg-kante); } }

/* 03 – 1.18.7: Grossbild auf Seiten (Kontakt, Über mich, Leistungsprofil …) – erste Zeile als fetter Titel */
.vg-hero-text .vg-hero-titel {
	display: block; margin: 0 0 clamp(14px, 1.4vw, 22px);
	font-family: var(--vg-sans) !important; font-weight: 600; font-size: clamp(30px, 3.8vw, 60px);
	line-height: 1.04; letter-spacing: -0.025em; text-wrap: balance;
}
.wp-block-post-content > .vg-hero > .vg-hero-text:has(.vg-hero-titel) { font-size: clamp(17px, 1.4vw, 22px) !important; line-height: 1.4 !important; }
.wp-block-post-content > .vg-hero.vg-hero-links > .vg-hero-text:has(.vg-hero-titel),
.wp-block-post-content > .vg-hero:not(.vg-hero-links) > .vg-hero-text:has(.vg-hero-titel) { width: min(52vw, 760px) !important; }
@media (max-width: 781px) {
	.wp-block-post-content > .vg-hero > .vg-hero-text:has(.vg-hero-titel) { width: auto !important; }
	.vg-hero-text .vg-hero-titel { font-size: clamp(28px, 8vw, 40px); }
}

/* ==========================================================================
   03 – 1.18.8: Grosse Titel in Playfair Display (SIL OFL, selbst gehostet), Text bleibt Figtree
   ========================================================================== */
@font-face { font-family: "Playfair Display"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/playfair-display-latin-400-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Playfair Display"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/playfair-display-latin-ext-400-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Playfair Display"; font-style: italic; font-weight: 400; font-display: swap; src: url("../fonts/playfair-display-latin-400-italic.woff2") format("woff2"); }
:root { --vg-titel-serif: "Playfair Display", Georgia, "Times New Roman", serif; }

:is(
	.vg-auftakt-leitsatz, .vg-auftakt-titel, .vg-slider-leitsatz__titel,
	.vg-kompetenz-titel, .vg-start-titel, .vg-shop-stimmung-titel,
	.vg-hero-text .vg-hero-titel
):not(#vg-fett):not(#vg-serif),
.vg-projekt-hero :is(h1, .wp-block-post-title):not(#vg-fett):not(#vg-serif),
body :is(h1, .wp-block-post-title):not(#vg-fett):not(#vg-serif) {
	font-family: var(--vg-titel-serif) !important; font-weight: 400 !important;
	letter-spacing: -0.01em !important; line-height: 1.08 !important;
}

/* 03 – 1.18.9: «&» in Titeln aus Figtree (schlicht wie die Navigation), Rest bleibt Playfair Display */
@font-face { font-family: "VG Und"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/figtree-latin-400-normal.woff2") format("woff2"); unicode-range: U+0026; size-adjust: 82%; }
:root { --vg-titel-serif: "VG Und", "Playfair Display", Georgia, "Times New Roman", serif; }

/* 03 – 1.18.10: Titel auf den Grossbildern (Start, Studio, Kontakt, Shop, Kategorien, Seiten) breiter und grösser */
.vg-auftakt-leitsatz:not(#vg-fett):not(#vg-serif),
.vg-hero-text .vg-hero-titel:not(#vg-fett):not(#vg-serif) { font-size: clamp(36px, 4.8vw, 78px) !important; line-height: 1.04 !important; text-wrap: balance; }
.vg-projekt-auftakt .vg-auftakt-begleit:has(.vg-auftakt-leitsatz),
body:is(.vg-studio-start, .vg-kontakt-start) .wp-block-post-content .vg-studio-einstieg .vg-auftakt-begleit:has(.vg-auftakt-leitsatz) { width: min(68vw, 1080px) !important; }
.wp-block-post-content > .vg-hero > .vg-hero-text:has(.vg-hero-titel) { width: min(68vw, 1080px) !important; }
.vg-auftakt-leitsatz + .vg-auftakt-begleittext, .vg-hero-text:has(.vg-hero-titel) { --vg-textbreite: 40em; }
.vg-auftakt-leitsatz + .vg-auftakt-begleittext { max-width: 40em !important; }
@media (max-width: 781px) {
	.vg-projekt-auftakt .vg-auftakt-begleit:has(.vg-auftakt-leitsatz),
	body:is(.vg-studio-start, .vg-kontakt-start) .wp-block-post-content .vg-studio-einstieg .vg-auftakt-begleit:has(.vg-auftakt-leitsatz),
	.wp-block-post-content > .vg-hero > .vg-hero-text:has(.vg-hero-titel) { width: auto !important; }
	.vg-auftakt-leitsatz:not(#vg-fett):not(#vg-serif), .vg-hero-text .vg-hero-titel:not(#vg-fett):not(#vg-serif) { font-size: clamp(32px, 9vw, 44px) !important; }
}

/* ==========================================================================
   03 – 1.18.11: Grossbild-Einstiege ruhiger
   ========================================================================== */
/* Kopfzeile über dem Bild: immer transparent mit sanftem Verlauf (kein heller Schleier beim Darüberfahren);
   weiss erst, wenn das Bild durchgescrollt ist (Klasse vg-kopf-hell) */
body.vg-bildkopf:not(.vg-kopf-hell) .vg-kopf,
body.vg-bildkopf:not(.vg-kopf-hell) .vg-kopf:is(:hover, :focus-within),
body.home.vg-bildkopf:not(.vg-kopf-hell) .vg-kopf:is(:hover, :focus-within) {
	background: linear-gradient(to bottom, rgba(18,17,16,.45) 0%, rgba(18,17,16,.18) 60%, rgba(18,17,16,0) 100%) no-repeat !important;
	color: #F7F5F0 !important; border: 0 !important; backdrop-filter: none !important;
}
body.vg-bildkopf:not(.vg-kopf-hell) .vg-kopf:is(:hover, :focus-within) :is(.vg-logo, .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content,
	.wp-block-navigation__responsive-container-open, .wc-block-mini-cart__button, .vg-suche-knopf, .vg-konto-knopf, .vg-shop-knopf) { color: #F7F5F0 !important; }
body.vg-bildkopf:not(.vg-kopf-hell) .vg-kopf:is(:hover, :focus-within) .wc-block-mini-cart__badge { background: #F7F5F0 !important; color: #222221 !important; }

/* Text unter dem Titel: kleiner, schmaler, leicht zurückgenommen – Titel bleibt das Hauptelement */
.vg-auftakt-leitsatz:not(#vg-fett):not(#vg-serif) { margin-bottom: 0 !important; }
.vg-auftakt-begleit:has(.vg-auftakt-leitsatz) { gap: 24px !important; }
.vg-auftakt-leitsatz + .vg-auftakt-begleittext:not(#vg-text),
body:is(.vg-studio-start, .vg-kontakt-start) .wp-block-post-content .vg-studio-einstieg .vg-auftakt-leitsatz + p.vg-auftakt-begleittext {
	font-size: clamp(16px, 1.2vw, 19px) !important; line-height: 1.5 !important; max-width: 620px !important;
	color: rgba(247,245,240,.9) !important;
}
.wp-block-post-content > .vg-hero > .vg-hero-text:has(.vg-hero-titel) { font-size: clamp(16px, 1.2vw, 19px) !important; line-height: 1.5 !important; }
.vg-hero-text .vg-hero-titel { margin-bottom: 24px !important; }
.vg-hero-text:has(.vg-hero-titel) { --vg-hero-textfarbe: rgba(247,245,240,.9); }
/* Shop: ohne Unterschrift «Valeria Gunz» */
.vg-shop-einstieg .vg-hero-name { display: none !important; }
@media (max-width: 781px) {
	.vg-auftakt-leitsatz + .vg-auftakt-begleittext:not(#vg-text) { max-width: none !important; }
	.wp-block-post-content > .vg-hero > .vg-hero-text:has(.vg-hero-titel) { color: var(--vg-text) !important; }
}

/* 03 – 1.18.13: Produktbeschreibung mit «… weiterlesen» direkt nach dem gekürzten Text */
.vg-pg-kurz, .vg-pg-voll { font-size: 15px; line-height: 1.7; color: var(--wp--preset--color--sekundaer, #5C5B58); }
.vg-pg-kurz { margin: 0 !important; }
.vg-pg-voll p { margin: 0 0 .8em !important; }
.vg-pg-voll p:last-child { margin-bottom: 0 !important; }
.vg-pg-weiter { display: inline; background: none !important; border: 0 !important; padding: 0 !important; margin: 0; cursor: pointer;
	font: inherit; color: var(--vg-text); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.vg-pg-weiter:hover { color: var(--wp--preset--color--akzent, #80613A); }
.vg-pg-beschreibung [hidden] { display: none !important; }
/* 03 – 1.18.14: Text oben in der Kaufspalte wie bisher gesetzt */
body.single-product .vg-kaufspalte > .vg-kurzbeschrieb :is(.vg-pg-kurz, .vg-pg-voll, .vg-pg-voll p) { font-size: var(--wp--preset--font-size--text) !important; line-height: 1.7 !important; color: var(--wp--preset--color--sekundaer); }
body.single-product .vg-kaufspalte > .vg-kurzbeschrieb .vg-pg-weiter { color: var(--vg-text); }
/* 03 – 1.18.15: «weiterlesen» als Akkordeon – Pfeil zeigt, dass sich der Text aufklappt */
.vg-pg-weiter::after { content: "\2009\2193"; display: inline-block; text-decoration: none; transition: transform .3s ease; }
.vg-pg-weiter.vg-pg-weniger::after { content: "\2009\2191"; }
.vg-pg-weiter:hover::after { transform: translateY(2px); }
.vg-pg-weiter.vg-pg-weniger:hover::after { transform: translateY(-2px); }
/* 03 – 1.18.16: Pfeil als echtes Zeichen im Knopf (statt ::after), Schrift mit sicherem Pfeil-Zeichen */
.vg-pg-weiter::after, .vg-pg-weiter.vg-pg-weniger::after { content: none !important; }
.vg-pg-pfeil { display: inline-block !important; font-family: "Segoe UI Symbol", "Apple Symbols", "Arial Unicode MS", Arial, sans-serif !important; text-decoration: none !important; transition: transform .3s ease; }
.vg-pg-weiter:hover .vg-pg-pfeil { transform: translateY(2px); }
.vg-pg-weniger:hover .vg-pg-pfeil { transform: translateY(-2px); }
/* 03 – 1.18.18: sichtbarer Teil bis zum Trenner «Weiterlesen» (mit Absätzen und Fett) */
div.vg-pg-kurz p { margin: 0 0 .8em !important; }
div.vg-pg-kurz p:last-child { margin-bottom: 0 !important; }
body.single-product .vg-kaufspalte > .vg-kurzbeschrieb div.vg-pg-kurz p { font-size: var(--wp--preset--font-size--text) !important; line-height: 1.7 !important; color: var(--wp--preset--color--sekundaer); }
.vg-pg-kurz strong, .vg-pg-voll strong { color: var(--vg-text); font-weight: 600; }

/* 03 – 1.18.21: Hintergrund-Test (nur mit ?grund=a…d im eigenen Browser) */
html.vg-grund-a, html.vg-grund-a body { --wp--preset--color--creme: #ECEAE5; --wp--preset--color--linie: #D6D2CA; }
html.vg-grund-b, html.vg-grund-b body { --wp--preset--color--creme: #E9E5DD; --wp--preset--color--linie: #D3CDC2; }
html.vg-grund-c, html.vg-grund-c body { --wp--preset--color--creme: #E6E3DD; --wp--preset--color--linie: #D0CBC2; }
html.vg-grund-d, html.vg-grund-d body { --wp--preset--color--creme: #E1DED8; --wp--preset--color--linie: #CBC6BD; }
html.vg-grund-e, html.vg-grund-e body { --wp--preset--color--creme: #E4E0D7; --wp--preset--color--linie: #CEC8BC; }
html.vg-grund-f, html.vg-grund-f body { --wp--preset--color--creme: #D2CDC3; --wp--preset--color--linie: #B9B3A8; --wp--preset--color--sekundaer: #4F4E4B; }
html[class*="vg-grund-"], html[class*="vg-grund-"] body { background: var(--wp--preset--color--creme) !important; }

/* ==========================================================================
   03 – 1.18.23: Fusszeile ruhig (Spalten, Studio, Zahlungsmethoden, Versand, Rechtliches)
   Hintergrund etwas dunkler als die Seite (passt sich dem Seitengrund an)
   ========================================================================== */
:root { --vg-fz-grund: color-mix(in srgb, var(--wp--preset--color--creme) 100%, #000 0%); }
html body footer.vg-fuss.vg-fuss-z:not(#vg-fz) {
	background: color-mix(in srgb, var(--wp--preset--color--creme), #6E6352 10%) !important;
	padding: clamp(56px, 6vw, 88px) var(--vg-kante, var(--vg-rand)) 28px !important; margin: 0 !important; color: var(--vg-text);
	border-top: 0 !important;
}
.vg-fz { max-width: var(--wp--style--global--wide-size, 1440px); margin: 0 auto; font-family: var(--vg-sans); color: var(--vg-text); }
.vg-fz a { color: inherit !important; text-decoration: none !important; background: none !important; }
.vg-fz a:is(:hover, :focus-visible) { text-decoration: underline !important; text-underline-offset: 3px; }
.vg-fz-titel { margin: 0 0 18px !important; font-size: 16px !important; font-weight: 500; letter-spacing: 0; color: var(--vg-text); }
.vg-fz ul { list-style: none; margin: 0; padding: 0; }
.vg-fz-oben { display: grid; grid-template-columns: minmax(120px, 1fr) minmax(0, 4fr) minmax(220px, 1.4fr); gap: 40px clamp(32px, 4vw, 72px); padding-bottom: clamp(40px, 4vw, 56px); border-bottom: 1px solid color-mix(in srgb, var(--vg-text) 18%, transparent); }
.vg-fz-logo { display: inline-block; line-height: 0; color: var(--vg-text) !important; }
.vg-fz-logo svg { fill: currentColor; height: 52px; width: auto; }
.vg-fz-spalten { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
.vg-fz-spalte li { margin: 0 0 10px; font-size: 15px; line-height: 1.45; color: #3F3D39; }
.vg-fz-studio .vg-fz-text { margin: 0 0 14px !important; font-size: 15px !important; line-height: 1.6 !important; color: #3F3D39; }
.vg-fz-social { display: flex; gap: 16px; margin-top: 22px; }
.vg-fz-social a { display: inline-flex; color: var(--vg-text) !important; }
.vg-fz-social a:hover { opacity: .7; text-decoration: none !important; }
.vg-fz-mitte { display: flex; flex-wrap: wrap; gap: 32px clamp(40px, 8vw, 140px); padding: clamp(28px, 3vw, 40px) 0 clamp(28px, 3vw, 40px); }
.vg-fz-mitte .vg-fz-titel { font-size: 15px !important; margin-bottom: 14px !important; }
.vg-fz-marken { display: flex; flex-wrap: wrap; gap: 10px; }
.vg-fz-marke { display: inline-flex; align-items: center; height: 36px; padding: 0 14px; background: #fff; border-radius: 6px; font-size: 12.5px; font-weight: 600; letter-spacing: .02em; color: #222221; white-space: nowrap; }
.vg-fz-marke-visa { color: #1A1F71; font-style: italic; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.vg-fz-marke-twint { background: #000; color: #fff; letter-spacing: .08em; text-transform: uppercase; }
.vg-fz-marke-vorauszahlung, .vg-fz-marke-leer { font-weight: 500; }
.vg-fz-marke-leer { background: transparent; padding: 0 4px; color: #5C5B58; }
.vg-fz-unten { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 12px 32px; font-size: 13.5px; color: #4A4844; }
.vg-fz-recht, .vg-fz-copy { margin: 0 !important; font-size: 13.5px !important; }
.vg-fz-recht span { margin: 0 12px; color: #8C8984; }
@media (max-width: 1100px) {
	.vg-fz-oben { grid-template-columns: 1fr 1fr; }
	.vg-fz-spalten { grid-column: 1 / -1; grid-row: 2; grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.vg-fz-studio { grid-column: 2; grid-row: 1; }
}
@media (max-width: 600px) {
	.vg-fz-oben { grid-template-columns: 1fr; }
	.vg-fz-studio, .vg-fz-spalten { grid-column: 1; grid-row: auto; }
	.vg-fz-recht span { margin: 0 8px; }
}

/* 03 – 1.18.24: Fusszeile kompakter – Logo gleich gross und bündig unter dem Logo der Kopfzeile,
   Inhalt schmaler, aussen mehr Luft */
html body footer.vg-fuss.vg-fuss-z:not(#vg-fz) { padding: clamp(80px, 8vw, 128px) var(--vg-kante, var(--vg-rand)) clamp(40px, 4vw, 56px) !important; }
html body footer.vg-fuss .vg-fz { max-width: 1320px !important; margin: 0 !important; }
.vg-fz-logo svg { height: 40px !important; }
.vg-fz-oben { grid-template-columns: var(--vg-achse, 180px) max-content max-content; gap: 32px clamp(40px, 4vw, 72px); padding-bottom: 36px; }
.vg-fz-spalten { grid-template-columns: repeat(4, max-content); gap: 28px clamp(28px, 3vw, 48px); }
.vg-fz-titel { font-size: 14px !important; margin-bottom: 12px !important; }
.vg-fz-spalte li { margin: 0 0 6px; font-size: 14px; line-height: 1.45; }
.vg-fz-studio .vg-fz-text { font-size: 14px !important; line-height: 1.55 !important; margin-bottom: 10px !important; }
.vg-fz-social { margin-top: 14px; gap: 14px; }
.vg-fz-social svg { width: 20px; height: 20px; }
.vg-fz-mitte { gap: 24px clamp(32px, 5vw, 72px); padding: 28px 0; }
.vg-fz-mitte .vg-fz-titel { font-size: 13px !important; margin-bottom: 10px !important; }
.vg-fz-marke { height: 30px; padding: 0 11px; font-size: 11.5px; border-radius: 5px; }
.vg-fz-marken { gap: 8px; }
.vg-fz-unten, .vg-fz-recht, .vg-fz-copy { font-size: 12.5px !important; }
.vg-fz-recht span { margin: 0 9px; }
@media (max-width: 781px) { .vg-fz-logo svg { height: 32px !important; } }
@media (max-width: 1320px) {
	.vg-fz-oben { grid-template-columns: var(--vg-achse, 180px) max-content; }
	.vg-fz-spalten { grid-column: 2; grid-row: 1; }
	.vg-fz-studio { grid-column: 2; grid-row: 2; display: grid; grid-template-columns: repeat(3, max-content); gap: 0 clamp(28px, 3vw, 48px); align-items: start; }
	.vg-fz-studio .vg-fz-titel { grid-column: 1 / -1; }
	.vg-fz-studio .vg-fz-social { margin-top: 0; }
}
@media (max-width: 999px) {
	.vg-fz-oben { grid-template-columns: 1fr; }
	.vg-fz-spalten { grid-column: 1; grid-row: auto; grid-template-columns: repeat(2, max-content); }
	.vg-fz-studio { grid-column: 1; grid-row: auto; display: block; }
}
.vg-fz-recht { display: flex; flex-wrap: wrap; align-items: baseline; row-gap: 6px; }

/* ==========================================================================
   03 – 1.18.25: Auswahlfelder (Varianten) – gefüllte Felder, Auswahl in Akzentfarbe,
   Farben/Bilder rund mit Ring; gewählter Wert neben dem Titel. Schrift bleibt.
   ========================================================================== */
:root { --vg-wahl-grund: color-mix(in srgb, var(--wp--preset--color--creme), #6E6352 9%); --vg-wahl-aktiv: var(--wp--preset--color--akzent, #80613A); }
html .woo-variation-swatches .variable-items-wrapper:not(#vg-w) { display: flex; flex-wrap: wrap; gap: 10px 12px !important; }
/* Textfelder */
html .woo-variation-swatches .variable-items-wrapper .variable-item.button-variable-item:not(.radio-variable-item):not(#vg-w) {
	min-width: 88px; height: auto; min-height: 46px; margin: 0 !important; padding: 0 !important;
	background: var(--vg-wahl-grund) !important; border: 0 !important; border-radius: 3px !important;
	box-shadow: none !important; transition: background-color .2s ease, color .2s ease;
}
html .woo-variation-swatches .variable-items-wrapper .button-variable-item .variable-item-contents { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
html .woo-variation-swatches .variable-items-wrapper .button-variable-item .variable-item-span:not(#vg-w) { padding: 13px 20px !important; color: var(--vg-text); text-align: center; }
html .woo-variation-swatches .variable-items-wrapper .variable-item.button-variable-item:not(.radio-variable-item):not(.selected):not(.disabled):hover { background: color-mix(in srgb, var(--vg-wahl-grund), #000 6%) !important; }
html .woo-variation-swatches .variable-items-wrapper .variable-item.button-variable-item.selected:not(#vg-w) { background: var(--vg-wahl-aktiv) !important; box-shadow: none !important; }
html .woo-variation-swatches .variable-items-wrapper .variable-item.button-variable-item.selected .variable-item-span { color: #fff !important; }
/* Farben und Bilder: rund mit Ring */
html .woo-variation-swatches .variable-items-wrapper :is(.color-variable-item, .image-variable-item):not(#vg-w) {
	width: 46px !important; height: 46px !important; padding: 3px !important; margin: 0 !important;
	border: 0 !important; border-radius: 50% !important; background: transparent !important;
	box-shadow: 0 0 0 1px color-mix(in srgb, var(--vg-text) 14%, transparent) !important; transition: box-shadow .2s ease;
}
html .woo-variation-swatches .variable-items-wrapper :is(.color-variable-item, .image-variable-item) :is(.variable-item-span, img) { border-radius: 50% !important; width: 100% !important; height: 100% !important; object-fit: cover; }
html .woo-variation-swatches .variable-items-wrapper :is(.color-variable-item, .image-variable-item):not(.selected):hover { box-shadow: 0 0 0 1px color-mix(in srgb, var(--vg-text) 45%, transparent) !important; }
html .woo-variation-swatches .variable-items-wrapper :is(.color-variable-item, .image-variable-item).selected:not(#vg-w) { box-shadow: 0 0 0 1.5px var(--vg-text) !important; }
/* Nicht verfügbar */
html .woo-variation-swatches .variable-items-wrapper .variable-item.disabled:not(#vg-w) { opacity: .4; cursor: not-allowed; }
html .woo-variation-swatches .variable-items-wrapper .variable-item.button-variable-item.disabled .variable-item-span { text-decoration: line-through; }
/* Gewählter Wert neben dem Titel: «HÖHE: 151 cm» */
.vg-kaufspalte table.variations .label .vg-wahl-wert { font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--vg-text); font-size: 13px; }
.vg-kaufspalte table.variations .woo-selected-variation-item-name { display: none !important; }
.vg-kaufspalte table.variations td.value { padding-bottom: 24px !important; }
html .woo-variation-swatches .variable-items-wrapper { list-style: none !important; padding-left: 0 !important; }
html .woo-variation-swatches .variable-items-wrapper :is(.color-variable-item, .image-variable-item) .variable-item-contents { width: 100%; height: 100%; }
html .woo-variation-swatches .variable-items-wrapper .color-variable-item .variable-item-span { display: block; }

/* 03 – 1.18.25: Logo «vg» etwas grösser – Kopf- und Fusszeile gleich */
html body .vg-kopf .vg-logo svg, html body .vg-fz-logo svg { height: 48px !important; width: auto !important; }
@media (max-width: 781px) { html body .vg-kopf .vg-logo svg, html body .vg-fz-logo svg { height: 38px !important; } }

/* 03 – 1.18.26: Fusszeile – Zahlungsmethoden, Versand und Rechtliches beginnen auf der Spaltenachse;
   das Logo steht links allein (Linie ebenfalls erst ab der Achse) */
@media (min-width: 1000px) {
	.vg-fz-oben { border-bottom: 0 !important; padding-bottom: 0 !important; }
	.vg-fz-mitte, .vg-fz-unten { margin-left: calc(var(--vg-achse, 0px) + clamp(40px, 4vw, 72px)); }
	.vg-fz-mitte { margin-top: clamp(36px, 4vw, 56px); border-top: 1px solid color-mix(in srgb, var(--vg-text) 18%, transparent); }
}

/* 03 – 1.18.27: Fusszeile beginnt genau auf der Kante von «STUDIO» in der Kopfzeile
   (--vg-fz-x wird per Skript gemessen; Ersatzwert = Textachse) */
@media (min-width: 1000px) {
	.vg-fz-oben { column-gap: 0 !important; grid-template-columns: var(--vg-fz-x, var(--vg-achse, 180px)) max-content max-content !important; }
	.vg-fz-studio { margin-left: clamp(40px, 4vw, 72px); }
	.vg-fz-mitte, .vg-fz-unten { margin-left: var(--vg-fz-x, var(--vg-achse, 0px)) !important; }
}
@media (min-width: 1000px) and (max-width: 1320px) {
	.vg-fz-studio { margin-left: 0; margin-top: 8px; }
}

/* 03 – 1.18.28: «© Valeria Gunz» links bündig unter dem Logo, Rechtliches auf der Spaltenkante */
@media (min-width: 1000px) {
	html body .vg-fz-unten:not(#vg-fz) { margin-left: 0 !important; display: grid; grid-template-columns: var(--vg-fz-x, var(--vg-achse, 180px)) minmax(0, 1fr); align-items: baseline; gap: 0; }
	.vg-fz-unten .vg-fz-copy { grid-column: 1; grid-row: 1; }
	.vg-fz-unten .vg-fz-recht { grid-column: 2; grid-row: 1; }
}

/* ==========================================================================
   03 – 1.18.29: Knopf-Farbe warmes Taupe (ähnlich nile.ch) für Hauptschritte und gewählte Varianten.
   Schrift bleibt (Versalien, Laufweite). Nebenschritte bleiben hell mit Rahmen.
   ========================================================================== */
:root { --vg-knopf: #987F62; --vg-knopf-dunkel: #826B51; --vg-wahl-aktiv: var(--vg-knopf); }
html body :is(.single_add_to_cart_button, .wc-block-cart__submit-button, .wc-block-components-checkout-place-order-button, .wc-block-mini-cart__footer-checkout, .checkout-button, #place_order):not(:disabled):not(.disabled):not(.wc-variation-selection-needed):not(#vg-k) {
	background: var(--vg-knopf) !important; border: 1px solid var(--vg-knopf) !important; color: #fff !important; border-radius: 3px !important;
}
html body :is(.single_add_to_cart_button, .wc-block-cart__submit-button, .wc-block-components-checkout-place-order-button, .wc-block-mini-cart__footer-checkout, .checkout-button, #place_order):not(:disabled):not(.disabled):not(.wc-variation-selection-needed):is(:hover, :focus-visible):not(#vg-k) {
	background: var(--vg-knopf-dunkel) !important; border-color: var(--vg-knopf-dunkel) !important; color: #fff !important;
}
html body :is(.single_add_to_cart_button, .wc-block-cart__submit-button, .wc-block-components-checkout-place-order-button, .wc-block-mini-cart__footer-checkout) :is(.wc-block-components-button__text, span) { color: inherit !important; }
html body.single-product .vg-kaufspalte .single_add_to_cart_button:is(.disabled, :disabled, .wc-variation-selection-needed):not(#vg-k) { border-radius: 3px !important; }
html .woo-variation-swatches .variable-items-wrapper .variable-item.button-variable-item.selected:not(#vg-w):not(#vg-k) { background: var(--vg-knopf) !important; }
html body.single-product .vg-kaufspalte input.qty { border-radius: 3px !important; }

/* ==========================================================================
   03 – 1.19.0: Merkliste (Herz) – Produktseite, Produktkarten, Kopfzeile, Seite «Merkliste»
   ========================================================================== */
.vg-herz { display: inline-grid; place-items: center; cursor: pointer; padding: 0; color: var(--vg-text); background: none; border: 0; -webkit-tap-highlight-color: transparent; }
.vg-herz .vg-herz-svg { fill: transparent; transition: fill .2s ease, transform .2s ease; }
.vg-herz.ist-gemerkt .vg-herz-svg { fill: currentColor; }
.vg-herz.ist-puls .vg-herz-svg { animation: vg-herz-puls .45s ease; }
@keyframes vg-herz-puls { 0% { transform: scale(1); } 40% { transform: scale(1.25); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .vg-herz.ist-puls .vg-herz-svg { animation: none; } }
/* Produktseite: rund neben «In den Warenkorb» */
html body.single-product .vg-kaufspalte .vg-herz-gross:not(#vg-m) {
	flex: 0 0 48px; width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--vg-knopf, #987F62) !important; color: var(--vg-knopf, #987F62); background: transparent;
	transition: background-color .2s ease, color .2s ease;
}
html body.single-product .vg-kaufspalte .vg-herz-gross:hover:not(#vg-m) { background: color-mix(in srgb, var(--vg-knopf, #987F62) 10%, transparent); }
html body.single-product .vg-kaufspalte .vg-herz-gross.ist-gemerkt:not(#vg-m) { background: var(--vg-knopf, #987F62); color: #fff; }
html body.single-product .vg-kaufspalte .vg-herz-gross.ist-gemerkt:not(#vg-m) .vg-herz-svg { fill: #fff; }
/* Produktkarten: oben rechts auf dem Bild */
.wc-block-components-product-image:has(.vg-herz-karte), .vg-merk-karte { position: relative; }
.vg-herz-karte { position: absolute; z-index: 3; top: 10px; right: 10px; width: 36px; height: 36px; border-radius: 50%; background: rgba(250, 250, 248, .82) !important; color: var(--vg-text); opacity: 0; transition: opacity .25s ease, background-color .2s ease; }
.vg-herz-karte.ist-gemerkt, :is(.wc-block-components-product-image, .vg-merk-karte):hover .vg-herz-karte, .vg-herz-karte:focus-visible { opacity: 1; }
.vg-herz-karte.ist-gemerkt { color: var(--vg-knopf, #987F62); }
@media (hover: none) { .vg-herz-karte { opacity: 1; } }
/* Kopfzeile: Herz mit Zahl */
.vg-merk-kopf { position: relative; }
.vg-merk-kopf .vg-herz-svg { fill: transparent; }
.vg-merk-kopf.hat-eintraege .vg-herz-svg { fill: currentColor; }
.vg-merk-zahl { position: absolute; top: 6px; right: 4px; min-width: 15px; height: 15px; padding: 0 4px; border-radius: 8px; background: var(--vg-knopf, #987F62); color: #fff; font-family: var(--vg-sans); font-size: 9.5px; line-height: 15px; text-align: center; }
/* Seite «Merkliste» */
.vg-merkliste { margin: clamp(24px, 3vw, 40px) 0 clamp(48px, 6vw, 96px); }
.vg-merk-raster { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px 24px; }
.vg-merk-raster.laedt { opacity: .4; }
.vg-merk-bild { display: block; aspect-ratio: 4 / 5; overflow: hidden; background: color-mix(in srgb, var(--wp--preset--color--creme), #6E6352 6%); }
.vg-merk-bild img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s ease; }
.vg-merk-karte:hover .vg-merk-bild img { transform: scale(1.03); }
.vg-merk-text { padding-top: 14px; }
.vg-merk-marke { margin: 0 0 4px !important; font-size: 11px !important; letter-spacing: .14em; text-transform: uppercase; color: var(--vg-sek); }
.vg-merk-name { margin: 0 0 6px !important; font-family: var(--vg-sans) !important; font-size: 15px !important; font-weight: 400 !important; line-height: 1.35 !important; letter-spacing: 0 !important; }
.vg-merk-name a { color: var(--vg-text) !important; text-decoration: none !important; }
.vg-merk-preis { font-size: 14px; color: var(--vg-text); margin-bottom: 14px; }
.vg-merk-korb { display: inline-block; padding: 11px 18px; border-radius: 3px; background: var(--vg-knopf, #987F62); color: #fff !important; text-decoration: none !important; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; transition: background-color .2s ease; }
.vg-merk-korb:hover { background: var(--vg-knopf-dunkel, #826B51); }
.vg-merk-aus { font-size: 13px !important; color: var(--vg-sek); }
.vg-merk-leer { font-size: 17px !important; line-height: 1.6 !important; color: var(--vg-text); max-width: 32em; }
.vg-merk-zumshop { display: inline-block; margin-top: 18px; padding: 12px 20px; border-radius: 3px; background: var(--vg-knopf, #987F62); color: #fff !important; text-decoration: none !important; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; }
.vg-merk-hinweis { margin-top: 40px !important; font-size: 12.5px !important; color: var(--vg-sek); }
@media (max-width: 1000px) { .vg-merk-raster { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 700px) { .vg-merk-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 14px; } }

/* ==========================================================================
   03 – 1.19.1: Warenkorb von rechts (wie nile.ch) – ruhige Schublade
   ========================================================================== */
html body .wc-block-components-drawer.wc-block-mini-cart__drawer:not(#vg-wk) { width: min(480px, 100vw) !important; max-width: 100vw; background: #FAFAF8 !important; box-shadow: -20px 0 60px rgba(26, 26, 25, .12) !important; }
.wc-block-components-drawer__screen-overlay { background-color: rgba(26, 26, 25, .28) !important; }
.wc-block-mini-cart__drawer .wc-block-mini-cart__title { font-family: var(--vg-titel-serif, var(--vg-serif)) !important; font-weight: 400 !important; font-size: clamp(30px, 2.6vw, 40px) !important; letter-spacing: -0.01em !important; margin: 40px 32px 24px !important; text-transform: none !important; }
.wc-block-mini-cart__drawer .wc-block-mini-cart__title span { font-family: var(--vg-sans) !important; font-size: 14px !important; color: var(--vg-sek); margin-left: 8px; }
.wc-block-mini-cart__drawer .wc-block-components-drawer__close { top: 40px !important; right: 26px !important; width: 40px; height: 40px; color: var(--vg-text) !important; opacity: 1 !important; }
.wc-block-mini-cart__drawer .wc-block-components-drawer__close svg { width: 26px; height: 26px; }
.wc-block-mini-cart__drawer .wc-block-mini-cart__items { padding: 0 32px !important; }
.wc-block-mini-cart__drawer .wc-block-cart-items, .wc-block-mini-cart__drawer .wc-block-cart-items td { border: 0 !important; }
.wc-block-mini-cart__drawer .wc-block-cart-items__row { padding: 0 0 24px !important; }
.wc-block-mini-cart__drawer .wc-block-cart-item__image img { width: 100px !important; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 3px; }
.wc-block-mini-cart__drawer .wc-block-components-product-name { font-family: var(--vg-sans) !important; font-size: 15px !important; color: var(--vg-text) !important; text-decoration: none !important; line-height: 1.35; }
.wc-block-mini-cart__drawer .wc-block-components-product-details { font-size: 13px !important; color: var(--vg-sek); }
.wc-block-mini-cart__drawer .wc-block-cart-item__prices, .wc-block-mini-cart__drawer .wc-block-cart-item__total { font-size: 14px !important; }
/* Mengenwähler als ruhige Pille */
.wc-block-mini-cart__drawer .wc-block-components-quantity-selector { border: 0 !important; border-radius: 999px !important; background: color-mix(in srgb, var(--wp--preset--color--creme), #6E6352 7%) !important; width: auto !important; min-width: 108px; overflow: hidden; }
.wc-block-mini-cart__drawer .wc-block-components-quantity-selector::after { display: none !important; }
.wc-block-mini-cart__drawer .wc-block-components-quantity-selector input { background: transparent !important; font-size: 14px !important; }
.wc-block-mini-cart__drawer .wc-block-components-quantity-selector__button { background: transparent !important; color: var(--vg-text) !important; font-size: 16px !important; }
.wc-block-mini-cart__drawer .wc-block-cart-item__remove-link { color: var(--vg-sek) !important; font-size: 12px !important; text-decoration: underline !important; text-underline-offset: 3px; }
/* Unten: Fläche mit Summe und «Zur Kasse» */
.wc-block-mini-cart__drawer .wc-block-mini-cart__footer { margin: 0 16px 16px !important; padding: 24px 22px 20px !important; border: 0 !important; border-radius: 6px; background: color-mix(in srgb, var(--wp--preset--color--creme), #6E6352 5%) !important; box-shadow: none !important; }
.wc-block-mini-cart__drawer .wc-block-mini-cart__footer::after { display: none !important; }
.wc-block-mini-cart__drawer .wc-block-components-totals-item { font-size: 16px !important; }
.wc-block-mini-cart__drawer .wc-block-components-totals-item__label { font-weight: 600; }
.wc-block-mini-cart__drawer .wc-block-components-totals-item__description { font-size: 12.5px !important; color: var(--vg-sek); }
.wc-block-mini-cart__drawer .wc-block-mini-cart__footer-actions { display: flex !important; flex-direction: column-reverse; gap: 12px !important; margin-top: 18px !important; }
html body .wc-block-mini-cart__drawer .wc-block-mini-cart__footer-actions .wc-block-mini-cart__footer-checkout:not(#vg-wk) { width: 100% !important; min-height: 54px !important; justify-content: center; }
html body .wc-block-mini-cart__drawer .wc-block-mini-cart__footer-actions .wc-block-mini-cart__footer-cart:not(#vg-wk) { align-self: center; min-height: 0 !important; padding: 4px 0 !important; font-size: 11px !important; }
@media (max-width: 600px) {
	.wc-block-mini-cart__drawer .wc-block-mini-cart__title { margin: 28px 20px 18px !important; }
	.wc-block-mini-cart__drawer .wc-block-components-drawer__close { top: 26px !important; right: 14px !important; }
	.wc-block-mini-cart__drawer .wc-block-mini-cart__items { padding: 0 20px !important; }
	.wc-block-mini-cart__drawer .wc-block-mini-cart__footer { margin: 0 10px 10px !important; }
}

/* 03 – 1.19.2: Warenkorb-Schublade – Feinschliff */
/* Schliessen: nur das ×, ohne Knopf-Rahmen */
html body .wc-block-mini-cart__drawer .wc-block-components-drawer__close:not(#vg-wk) {
	background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; min-height: 0 !important;
	width: 44px !important; height: 44px !important; display: grid !important; place-items: center; color: var(--vg-text) !important;
}
html body .wc-block-mini-cart__drawer .wc-block-components-drawer__close:not(#vg-wk)::after { content: none !important; }
html body .wc-block-mini-cart__drawer .wc-block-components-drawer__close svg { display: block !important; width: 28px !important; height: 28px !important; fill: currentColor !important; }
html body .wc-block-mini-cart__drawer .wc-block-components-drawer__close:hover:not(#vg-wk) { background: transparent !important; color: var(--vg-knopf, #987F62) !important; }
/* Titel in Playfair, Anzahl klein */
html body .wc-block-mini-cart__drawer :is(.wc-block-mini-cart__title, h2.wc-block-mini-cart__title):not(#vg-wk) { font-family: var(--vg-titel-serif) !important; font-size: clamp(30px, 2.6vw, 38px) !important; color: var(--vg-text) !important; line-height: 1.1 !important; }
html body .wc-block-mini-cart__drawer .wc-block-mini-cart__title > span:first-child { font-family: inherit !important; font-size: inherit !important; color: inherit !important; margin: 0 !important; }
html body .wc-block-mini-cart__drawer .wc-block-mini-cart__title > span + span, html body .wc-block-mini-cart__drawer .wc-block-mini-cart__title .wc-block-mini-cart__title-items-counter-block { font-family: var(--vg-sans) !important; font-size: 13px !important; color: var(--vg-sek) !important; margin-left: 10px !important; vertical-align: middle; }
/* Bild nicht über den Text */
html body .wc-block-mini-cart__drawer .wc-block-cart-items .wc-block-cart-item__image { width: 104px !important; padding: 0 18px 0 0 !important; vertical-align: top; }
html body .wc-block-mini-cart__drawer .wc-block-cart-items .wc-block-cart-item__image a, html body .wc-block-mini-cart__drawer .wc-block-cart-items .wc-block-cart-item__image img { display: block; width: 86px !important; max-width: 86px !important; height: auto; }
html body .wc-block-mini-cart__drawer .wc-block-cart-item__product { padding-right: 12px !important; }
html body .wc-block-mini-cart__drawer .wc-block-components-product-metadata { font-size: 13px !important; line-height: 1.45 !important; color: var(--vg-sek); }
/* «Zur Kasse» bleibt in der Fläche */
html body .wc-block-mini-cart__drawer .wc-block-mini-cart__footer, html body .wc-block-mini-cart__drawer .wc-block-mini-cart__footer * { box-sizing: border-box; }
html body .wc-block-mini-cart__drawer .wc-block-mini-cart__footer-actions { width: 100%; }
html body .wc-block-mini-cart__drawer .wc-block-mini-cart__footer-actions .wc-block-mini-cart__footer-checkout:not(#vg-wk) { width: 100% !important; max-width: 100% !important; margin: 0 !important; flex: 0 0 auto !important; padding: 0 16px !important; }

/* 03 – 1.19.4: Alle Knöpfe in Taupe (Gold) – auch «Ausführung wählen», «In den Warenkorb» auf Karten,
   Formulare, Konto. Ausnahmen: Suche, Schliessen, Mengen ±, «Warenkorb ansehen», deaktivierte Knöpfe. */
html body :is(.wc-block-components-button:not(.is-link), .wc-block-components-product-button__button, .add_to_cart_button, .product_type_variable,
	.woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .wp-element-button, input[type="submit"], .wp-block-button__link):not(#vg-k):not(.wp-block-search__button):not(.wc-block-components-drawer__close):not(.wc-block-components-quantity-selector__button):not(.wc-block-mini-cart__footer-cart):not(:disabled):not(.disabled) {
	background: var(--vg-knopf, #987F62) !important; border: 1px solid var(--vg-knopf, #987F62) !important; color: #fff !important; border-radius: 3px !important;
}
html body :is(.wc-block-components-button:not(.is-link), .wc-block-components-product-button__button, .add_to_cart_button, .product_type_variable,
	.woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .wp-element-button, input[type="submit"], .wp-block-button__link):not(#vg-k):not(.wp-block-search__button):not(.wc-block-components-drawer__close):not(.wc-block-components-quantity-selector__button):not(.wc-block-mini-cart__footer-cart):not(:disabled):not(.disabled):is(:hover, :focus-visible) {
	background: var(--vg-knopf-dunkel, #826B51) !important; border-color: var(--vg-knopf-dunkel, #826B51) !important; color: #fff !important;
}
html body :is(.wc-block-components-button, .wc-block-components-product-button__button, .wp-block-button__link) :is(span, .wc-block-components-button__text) { color: inherit !important; }

/* 03 – 1.19.5: «In den Warenkorb» vor der Auswahl im gleichen hellen Grau wie die Auswahlfelder; Menge ebenso */
html body.single-product .vg-kaufspalte .single_add_to_cart_button:is(.disabled, :disabled, .wc-variation-selection-needed):not(#vg-k):not(#vg-x) {
	background: var(--vg-wahl-grund) !important; border: 0 !important; color: var(--vg-sek) !important; border-radius: 3px !important;
}
html body.single-product .vg-kaufspalte input.qty:not(#vg-k) { background: var(--vg-wahl-grund) !important; border: 0 !important; border-radius: 3px !important; }

/* 03 – 1.19.6: Knöpfe auf den Produktkarten (Shop, «Passt dazu», Merkliste) hellgrau, beim Darüberfahren Gold */
html body :is(.wc-block-components-product-button__button, .wc-block-components-product-button .wp-block-button__link, a.add_to_cart_button, a.product_type_variable, a.product_type_simple, .vg-merk-korb):not(#vg-k):not(#vg-x):not(:disabled):not(.disabled) {
	background: var(--vg-wahl-grund) !important; border: 1px solid transparent !important; color: var(--vg-text) !important;
	transition: background-color .25s ease, color .25s ease, border-color .25s ease !important;
}
html body :is(.wc-block-components-product-button__button, .wc-block-components-product-button .wp-block-button__link, a.add_to_cart_button, a.product_type_variable, a.product_type_simple, .vg-merk-korb):not(#vg-k):not(#vg-x):not(:disabled):not(.disabled):is(:hover, :focus-visible) {
	background: var(--vg-knopf, #987F62) !important; border-color: var(--vg-knopf, #987F62) !important; color: #fff !important;
}

/* 03 – 1.19.7: Suche – Treffer dunkel ohne Unterstreichung, beim Darüberfahren Gold */
html body .vg-wegweiser a.ist-treffer:not(#vg-s) { text-decoration: none !important; border-bottom: 0 !important; background-image: none !important; }
html body .vg-wegweiser a:not(#vg-s) { transition: color .2s ease; }
html body .vg-wegweiser a:not(#vg-s):is(:hover, :focus-visible) { color: var(--vg-knopf, #987F62) !important; text-decoration: none !important; }

/* 03 – 1.19.8: Suche – feine Linie wächst beim Darüberfahren von links (wie Hauptnavigation), Schrift Gold */
html body .vg-wegweiser a:not(#vg-s):not(#vg-t) {
	background-image: linear-gradient(currentColor, currentColor) !important; background-repeat: no-repeat !important;
	background-position: 0 100% !important; background-size: 0 1px !important; padding-bottom: 2px;
	transition: color .2s ease, background-size .35s ease !important; text-decoration: none !important; align-self: flex-start;
}
html body .vg-wegweiser a:not(#vg-s):not(#vg-t):is(:hover, :focus-visible) { background-size: 100% 1px !important; color: var(--vg-knopf, #987F62) !important; }
@media (prefers-reduced-motion: reduce) { html body .vg-wegweiser a:not(#vg-s):not(#vg-t) { transition: none !important; } }
.vg-fz-marke-paypal { color: #003087; font-style: italic; font-weight: 800; }

/* 03 – 1.19.10: Startseite einheitlich mit Linien – jeder Abschnitt beginnt mit derselben feinen Linie,
   alle Raster (Wege, Projekte, Shop-Objekte) vollständig mit Linien */
body.home .vg-start-03 > .vg-start-block:not(#vg-l) { border-top: 1px solid var(--vg-linie-start, #DAD7D0) !important; padding-top: clamp(24px, 2.4vw, 36px) !important; }
body.home .vg-start-03 > .vg-start-shop.alignfull:not(#vg-l) { border-top: 0 !important; padding-top: 0 !important; }
body.home .vg-start-03 > .vg-start-shop.alignfull:not(#vg-l) .vg-start-shop-innen { border-top: 1px solid var(--vg-linie-start, #DAD7D0); padding-top: clamp(24px, 2.4vw, 36px) !important; }
body.home .vg-start-studio .vg-studio-spalten { padding-top: 4px; }
:root { --vg-linie-start: #DAD7D0; }
/* 1.19.11: TWINT wie die übrigen – schwarz auf weiss */
.vg-fz .vg-fz-marke-twint { background: #fff !important; color: #000 !important; }

/* 03 – 1.19.12: Stimmungsbild «Draussen leben» sitzt im Linienraster mit gleichem Innenabstand wie die Produktfelder */
body.home .vg-shop-stimmung:not(#vg-l) { --vg-st-in: 18px; border-left: 1px solid var(--vg-linie-start, #DAD7D0); border-bottom: 1px solid var(--vg-linie-start, #DAD7D0); }
body.home .vg-shop-stimmung:not(#vg-l) img { inset: var(--vg-st-in) var(--vg-st-in) 22px var(--vg-st-in) !important; width: calc(100% - 2 * var(--vg-st-in)) !important; height: calc(100% - var(--vg-st-in) - 22px) !important; transition: filter .6s ease !important; }
body.home .vg-shop-stimmung:not(#vg-l):hover img { transform: none !important; filter: brightness(1.04); }
body.home .vg-shop-stimmung:not(#vg-l)::after { inset: var(--vg-st-in) var(--vg-st-in) 22px var(--vg-st-in); }
body.home .vg-shop-stimmung:not(#vg-l) .vg-shop-stimmung-text { left: calc(var(--vg-st-in) + 26px); right: calc(var(--vg-st-in) + 26px); bottom: calc(22px + 26px); }
@media (max-width: 781px) { body.home .vg-shop-stimmung:not(#vg-l) { --vg-st-in: 12px; } }

/* 03 – 1.19.13: Startseite – Abstand zwischen Studio-Abschnitt und Fusszeile (Bild klebte an der Fusszeile) */
body.home .vg-start-03 > .vg-start-block:last-child:not(#vg-l), body.home .vg-start-03 > .vg-start-studio:not(#vg-l) { margin-bottom: clamp(40px, 4.5vw, 64px) !important; }
body.home .vg-start-03 { padding-bottom: 0 !important; margin-bottom: 0 !important; }

/* ==========================================================================
   03 – 1.20.0: Shop-Leiste in der Kopfzeile (Idee mooris.ch)
   ========================================================================== */
.vg-kopfleiste {
	position: relative; z-index: 59; background: var(--vg-creme); color: var(--vg-text);
	border-bottom: 1px solid var(--vg-linie); font-family: var(--vg-sans);
}
.vg-kl-innen {
	display: flex; align-items: center; gap: 16px 32px; min-height: 52px; box-sizing: border-box;
	padding-left: max(var(--vg-rand), calc((100% - var(--wp--style--global--wide-size, 1440px)) / 2));
	padding-right: max(var(--vg-rand), calc((100% - var(--wp--style--global--wide-size, 1440px)) / 2));
}
.vg-kl-liste { display: flex; align-items: stretch; gap: 0 clamp(16px, 1.7vw, 28px); list-style: none; margin: 0; padding: 0; flex: 1 1 auto; min-width: 0; }
.vg-kl-punkt { display: flex; }
.vg-kl-marken { margin-left: auto; }
html body .vg-kl-link:not(#vg-k) {
	display: flex; align-items: center; min-height: 52px; white-space: nowrap; text-decoration: none !important;
	font-size: 12px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: inherit !important;
	background-image: linear-gradient(var(--vg-knopf, #987F62), var(--vg-knopf, #987F62)) !important; background-repeat: no-repeat !important;
	background-position: 0 100% !important; background-size: 0 2px !important; transition: color .2s ease, background-size .35s ease;
}
html body .vg-kl-punkt:is(:hover, :focus-within, .ist-aktiv) > .vg-kl-link:not(#vg-k) { background-size: 100% 2px !important; }
html body .vg-kl-aktuell > .vg-kl-link:not(#vg-k) { color: var(--vg-knopf, #987F62) !important; }

/* Aufklappendes Feld unter der ganzen Leiste */
.vg-kl-feld {
	position: absolute; left: 0; right: 0; top: 100%; background: var(--vg-creme); border-bottom: 1px solid var(--vg-linie);
	box-shadow: 0 18px 30px -24px rgba(18,17,16,.35);
	visibility: hidden; opacity: 0; transform: translateY(-4px); transition: opacity .2s ease .12s, transform .2s ease .12s, visibility 0s linear .32s;
}
.vg-kl-punkt:is(:hover, :focus-within) > .vg-kl-feld { visibility: visible; opacity: 1; transform: none; transition-delay: .12s, .12s, 0s; }
.vg-kl-feld-innen {
	display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.5fr); gap: 32px; box-sizing: border-box;
	padding: 32px max(var(--vg-rand), calc((100% - var(--wp--style--global--wide-size, 1440px)) / 2)) 40px;
}
.vg-kl-spalte { display: flex; flex-direction: column; gap: 10px; border-top: 1px solid #A39B90; padding-top: 12px; }
.vg-kl-titel { margin: 0 0 4px !important; font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--wp--preset--color--meta, #6F6B64); }
html body .vg-kl-spalte a:not(#vg-k) { font-size: 15px; color: var(--vg-text) !important; text-decoration: none !important; align-self: flex-start; }
html body .vg-kl-spalte a:not(#vg-k):is(:hover, :focus-visible) { color: var(--vg-knopf, #987F62) !important; }
html body .vg-kl-spalte a.vg-kl-alle:not(#vg-k) { margin-top: 6px; color: var(--vg-knopf, #987F62) !important; }
.vg-kl-bild { grid-column: 4; display: flex; flex-direction: column; gap: 10px; text-decoration: none !important; color: var(--vg-text) !important; }
.vg-kl-bild img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block; }
.vg-kl-bild span { font-size: 14px; }

/* Suchfeld rechts */
.vg-kl-suche {
	flex: 0 1 340px; display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 12px; box-sizing: border-box;
	border: 1px solid var(--vg-linie); border-radius: 3px; background: rgba(255,255,255,.55); color: var(--wp--preset--color--meta, #6F6B64);
}
.vg-kl-suche:focus-within { border-color: var(--vg-text); color: var(--vg-text); }
.vg-kl-suche input[type="search"] { flex: 1; min-width: 0; border: 0 !important; background: transparent !important; padding: 0 !important; font: inherit; font-size: 14px; color: var(--vg-text); outline: none; box-shadow: none !important; }
.vg-kl-suche input::placeholder { color: var(--wp--preset--color--meta, #6F6B64); opacity: 1; }
/* Mit sichtbarem Suchfeld braucht es die Lupe oben nicht */
body.vg-mit-kopfleiste .vg-kopf .vg-suche-knopf { display: none !important; }
/* Kopfzeile ohne Linie unten – die Leiste schliesst ab */
body.vg-mit-kopfleiste .vg-kopf { border-bottom-color: var(--vg-linie) !important; }

/* Über einem Grossbild (Shop-Start): transparent, helle Schrift; Feld hell */
body.vg-bildkopf:not(.vg-kopf-hell) .vg-kopfleiste {
	background: linear-gradient(to bottom, rgba(18,17,16,.12), rgba(18,17,16,0)) !important; border-bottom-color: rgba(247,245,240,.35); color: #F7F5F0;
}
body.vg-bildkopf:not(.vg-kopf-hell) .vg-kopfleiste .vg-kl-feld { color: var(--vg-text); }
html body.vg-bildkopf:not(.vg-kopf-hell) .vg-kl-aktuell > .vg-kl-link:not(#vg-k) { color: #F7F5F0 !important; }
body.vg-bildkopf:not(.vg-kopf-hell) .vg-kl-suche { background: rgba(247,245,240,.14); border-color: rgba(247,245,240,.55); color: #F7F5F0; }
body.vg-bildkopf:not(.vg-kopf-hell) .vg-kl-suche input { color: #F7F5F0; }
body.vg-bildkopf:not(.vg-kopf-hell) .vg-kl-suche input::placeholder { color: rgba(247,245,240,.85); }
body.vg-bildkopf .vg-kopfleiste { transition: background-color .35s ease, color .35s ease, border-color .35s ease; }

/* Unterkategorien als Textlinks unter dem Titel */
.vg-unterkats { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 0 0 clamp(24px, 3vw, 40px) !important; padding-bottom: 14px; border-bottom: 1px solid var(--vg-linie); font-size: 14px; }
html body .vg-unterkats a:not(#vg-k) { color: var(--wp--preset--color--meta, #6F6B64) !important; text-decoration: none !important; padding-bottom: 3px; border-bottom: 1px solid transparent; }
html body .vg-unterkats a:not(#vg-k):is(:hover, .ist-aktiv) { color: var(--vg-text) !important; border-bottom-color: var(--vg-text); }

/* Handy und Tablet: Suchfeld oben über die ganze Breite, Kategorien waagrecht scrollbar, ohne Felder */
@media (max-width: 999px) {
	.vg-kl-innen { flex-direction: column; align-items: stretch; gap: 0; padding-top: 10px; }
	.vg-kl-suche { order: -1; flex: 0 0 44px; height: 44px; width: 100%; }
	.vg-kl-liste { overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; margin: 0 calc(-1 * var(--vg-rand)); padding: 0 var(--vg-rand); }
	.vg-kl-liste::-webkit-scrollbar { display: none; }
	html body .vg-kl-link:not(#vg-k) { min-height: 46px; }
	.vg-kl-feld { display: none !important; }
	.vg-kl-marken { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) { .vg-kl-feld, html body .vg-kl-link:not(#vg-k) { transition: none !important; } }

/* ==========================================================================
   03 – 1.20.1: Shop-Leiste korrigiert – Suchfeld oben in der Kopfzeile, Leiste nur Kategorien,
   bei zu wenig Platz waagrecht scrollbar (statt unter das Suchfeld zu laufen)
   ========================================================================== */
html body .vg-kl-liste:not(#vg-k) {
	flex: 1 1 auto; min-width: 0; overflow-x: auto; overflow-y: hidden; scrollbar-width: none;
	gap: 0 clamp(14px, 1.5vw, 26px); justify-content: space-between;
	-webkit-mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent);
	mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent);
}
html body .vg-kl-liste:not(#vg-k)::-webkit-scrollbar { display: none; }
html body .vg-kl-link:not(#vg-k) { letter-spacing: 0.1em; }
.vg-kl-marken { margin-left: 0; padding-right: 32px; }
/* Breiter Bildschirm: Suchfeld in der Kopfzeile, in der Leiste ausgeblendet */
.vg-kl-suche-kopf { flex: 0 1 300px; width: 300px; }
.vg-kl-suche-leiste { display: none !important; }
@media (max-width: 1099px) {
	.vg-kl-suche-kopf { display: none !important; }
	.vg-kl-suche-leiste { display: flex !important; }
	.vg-kl-innen { flex-direction: column; align-items: stretch; gap: 0; padding-top: 10px; }
	.vg-kl-suche-leiste { order: -1; flex: 0 0 44px; height: 44px; width: 100%; }
	html body .vg-kl-liste:not(#vg-k) { justify-content: flex-start; margin: 0 calc(-1 * var(--vg-rand)); padding: 0 var(--vg-rand); }
	.vg-kl-feld { display: none !important; }
}
/* Suchfeld oben über einem Grossbild: hell */
body.vg-bildkopf:not(.vg-kopf-hell) .vg-kopf .vg-kl-suche { background: rgba(247,245,240,.14); border-color: rgba(247,245,240,.55); color: #F7F5F0; }
body.vg-bildkopf:not(.vg-kopf-hell) .vg-kopf .vg-kl-suche input { color: #F7F5F0; }
body.vg-bildkopf:not(.vg-kopf-hell) .vg-kopf .vg-kl-suche input::placeholder { color: rgba(247,245,240,.85); }

/* 03 – 1.20.2: zweites Suchfeld im Inhalt entfällt, die Suche steht in der Kopfzeile */
body.vg-mit-kopfleiste .vg-shop-werkzeuge .vg-shopsuche { display: none !important; }

/* 03 – 1.20.3: Suchliste (Wegweiser + Objekte) als Feld unter der Shop-Leiste, ohne eigenes Eingabefeld */
body.vg-suche-dropdown .vg-kopfleiste > .vg-suche { position: absolute; left: 0; right: 0; top: 100%; z-index: 70; box-shadow: 0 18px 30px -24px rgba(18,17,16,.35); }
body.vg-suche-dropdown .vg-kopfleiste > .vg-suche .vg-suche-form { display: none !important; }
body.vg-suche-dropdown .vg-kl-feld { display: none !important; }
@media (max-width: 1099px) { body.vg-suche-dropdown .vg-kopfleiste > .vg-suche { max-height: calc(100vh - 160px); overflow-y: auto; } }

/* ==========================================================================
   03 – 1.20.6: Shop-Leiste mit Pfeilen ‹ ›, wenn nicht alle Kategorien Platz haben
   ========================================================================== */
.vg-kl-reihe { position: relative; display: flex; align-items: center; flex: 1 1 auto; min-width: 0; }
html body .vg-kl-liste:not(#vg-k) { -webkit-mask-image: none; mask-image: none; }
html body .vg-kopfleiste.kann-weiter .vg-kl-liste:not(#vg-k) { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 56px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 56px), transparent); }
html body .vg-kopfleiste.kann-zurueck .vg-kl-liste:not(#vg-k) { -webkit-mask-image: linear-gradient(to right, transparent, #000 56px); mask-image: linear-gradient(to right, transparent, #000 56px); }
html body .vg-kopfleiste.kann-zurueck.kann-weiter .vg-kl-liste:not(#vg-k) { -webkit-mask-image: linear-gradient(to right, transparent, #000 56px, #000 calc(100% - 56px), transparent); mask-image: linear-gradient(to right, transparent, #000 56px, #000 calc(100% - 56px), transparent); }
.vg-kl-marken { padding-right: 0 !important; }
.vg-kl-pfeil {
	position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 32px; height: 32px; padding: 0; border-radius: 50%;
	display: grid; place-items: center; cursor: pointer; color: var(--vg-text);
	background: var(--vg-creme); border: 1px solid color-mix(in srgb, currentColor 35%, transparent);
	transition: border-color .2s ease, color .2s ease;
}
.vg-kl-pfeil[hidden] { display: none; }
.vg-kl-pfeil:is(:hover, :focus-visible) { border-color: var(--vg-knopf, #987F62); color: var(--vg-knopf, #987F62); }
.vg-kl-zurueck { left: 0; }
.vg-kl-weiter { right: 0; }
/* Grösserer Tastbereich ohne grösseren Kreis */
.vg-kl-pfeil::before { content: ""; position: absolute; inset: -6px; }
/* Über dem Grossbild: hell */
body.vg-bildkopf:not(.vg-kopf-hell) .vg-kl-pfeil { background: rgba(18,17,16,.25); color: #F7F5F0; border-color: rgba(247,245,240,.6); }
@media (max-width: 1099px) {
	.vg-kl-reihe { margin: 0 calc(-1 * var(--vg-rand)); padding: 0 var(--vg-rand); }
	html body .vg-kl-liste:not(#vg-k) { margin: 0 !important; padding: 0 !important; }
}
/* Pfeile als eigene Felder neben der Liste – die aufklappenden Felder bleiben an der ganzen Leiste ausgerichtet */
html body .vg-kl-reihe:not(#vg-k) { position: static; gap: 10px; }
html body .vg-kl-pfeil:not(#vg-k) { position: relative; top: auto; left: auto; right: auto; transform: none; flex: 0 0 32px; }

/* ==========================================================================
   03 – 1.20.7: Kopfzeile über Grossbildern dunkler hinterlegt – weisse Schrift besser lesbar
   ========================================================================== */
html body.vg-bildkopf:not(.vg-kopf-hell) .vg-kopf:not(#vg-k),
html body.vg-bildkopf:not(.vg-kopf-hell) .vg-kopf:not(#vg-k):is(:hover, :focus-within) {
	background: linear-gradient(to bottom, rgba(18,17,16,.62) 0%, rgba(18,17,16,.38) 60%, rgba(18,17,16,0) 100%) no-repeat !important;
}
/* Mit Shop-Leiste: Kopfzeile und Leiste als eine durchgehende dunkle Fläche, die unten sanft ausläuft */
html body.vg-bildkopf.vg-mit-kopfleiste:not(.vg-kopf-hell) .vg-kopf:not(#vg-k),
html body.vg-bildkopf.vg-mit-kopfleiste:not(.vg-kopf-hell) .vg-kopf:not(#vg-k):is(:hover, :focus-within) {
	background: linear-gradient(to bottom, rgba(18,17,16,.62), rgba(18,17,16,.48)) no-repeat !important;
}
html body.vg-bildkopf:not(.vg-kopf-hell) .vg-kopfleiste:not(#vg-k) {
	background: linear-gradient(to bottom, rgba(18,17,16,.48), rgba(18,17,16,.36)) !important;
	border-bottom-color: rgba(247,245,240,.25) !important;
}
html body.vg-bildkopf:not(.vg-kopf-hell) :is(.vg-kopf, .vg-kopfleiste) :is(a, .vg-kl-link) { text-shadow: 0 1px 10px rgba(18,17,16,.35); }
html body.vg-bildkopf:not(.vg-kopf-hell) .vg-kopfleiste .vg-kl-feld a { text-shadow: none; }

/* 03 – 1.20.9: Shop-Leiste näher an der Kopfzeile – weniger Luft unter der Kopfzeile, Leiste etwas niedriger */
html body.vg-mit-kopfleiste .vg-kopf:not(#vg-k) { padding-bottom: 12px !important; }
html body.vg-mit-kopfleiste .vg-kl-innen:not(#vg-k) { min-height: 44px; }
html body.vg-mit-kopfleiste .vg-kl-link:not(#vg-k) { min-height: 44px; }
@media (max-width: 1099px) { html body.vg-mit-kopfleiste .vg-kl-innen:not(#vg-k) { padding-top: 4px; } }

/* ==========================================================================
   03 – 1.20.9 (enthält 1.20.8): Shop-Leiste ruhiger – normale Schreibweise, gegliedert (Aktuell | Räume | Marken & Designer);
   doppelte Linie unter den Unterkategorien entfernt
   ========================================================================== */
html body .vg-kl-link:not(#vg-k) { font-size: 14px; font-weight: 400; letter-spacing: 0.01em; text-transform: none; }
html body .vg-kl-liste:not(#vg-k) { gap: 0 clamp(16px, 1.6vw, 26px); justify-content: flex-start; }
html body .vg-kl-aktuell > .vg-kl-link:not(#vg-k) { font-weight: 500; }
.vg-kl-aktuell, .vg-kl-marken { position: relative; }
.vg-kl-aktuell { padding-right: clamp(16px, 1.6vw, 26px); }
.vg-kl-aktuell::after, .vg-kl-marken::before {
	content: ""; position: absolute; top: 50%; width: 1px; height: 18px; transform: translateY(-50%); background: currentColor; opacity: .3;
}
.vg-kl-aktuell::after { right: 0; }
html body .vg-kl-marken:not(#vg-k) { margin-left: auto; padding-left: clamp(16px, 1.6vw, 26px); }
.vg-kl-marken::before { left: 0; }
html body .vg-unterkats:not(#vg-k) { border-bottom: 0; padding-bottom: 0; margin-bottom: clamp(16px, 2vw, 24px) !important; }

/* ==========================================================================
   03 – 1.20.10: Suche über Grossbildern transparent dunkel (wie die Kopfzeile im Shop), helle Schrift;
   kein Schriftschatten in der Suchliste
   ========================================================================== */
html body .vg-suche :is(a, p, input, button):not(#vg-k) { text-shadow: none !important; }
html body.vg-bildkopf:not(.vg-kopf-hell) .vg-suche:not(#vg-k) {
	background: rgba(18,17,16,.62) !important; -webkit-backdrop-filter: blur(14px) saturate(1.1); backdrop-filter: blur(14px) saturate(1.1);
	border-color: rgba(247,245,240,.18) !important; color: #F7F5F0 !important;
}
html body.vg-bildkopf:not(.vg-kopf-hell) .vg-suche :is(a, .vg-wegweiser-titel, .vg-wegweiser-leer, .vg-suche-zu, .vg-ww-preis, .vg-ww-name):not(#vg-k):not(#vg-s):not(#vg-t) { color: #F7F5F0 !important; }
html body.vg-bildkopf:not(.vg-kopf-hell) .vg-suche .vg-wegweiser-titel:not(#vg-k) { opacity: .75; }
html body.vg-bildkopf:not(.vg-kopf-hell) .vg-suche a:not(#vg-k):not(#vg-s):not(#vg-t):is(:hover, :focus-visible) { color: #D9C4A8 !important; }
html body.vg-bildkopf:not(.vg-kopf-hell) .vg-suche .vg-wegweiser :is(.vg-wegweiser-gruppe, .vg-wegweiser-block, .vg-wegweiser-titel) { border-color: rgba(247,245,240,.22) !important; }
html body.vg-bildkopf:not(.vg-kopf-hell) .vg-suche .vg-wegweiser a.ist-aus:not(#vg-k) { opacity: .4; }
html body.vg-bildkopf:not(.vg-kopf-hell) .vg-suche-form input[type="search"]:not(#vg-k) { color: #F7F5F0 !important; border-bottom-color: rgba(247,245,240,.6) !important; }
html body.vg-bildkopf:not(.vg-kopf-hell) .vg-suche-form input[type="search"]::placeholder { color: rgba(247,245,240,.75) !important; }
html body.vg-bildkopf:not(.vg-kopf-hell) .vg-suche-los:not(#vg-k) { background: transparent !important; color: #F7F5F0 !important; }

/* ==========================================================================
   03 – 1.20.11: Kategorieseiten ohne grossen Titel – die Shop-Leiste zeigt die Kategorie bereits;
   die Seite beginnt direkt mit den Unterkategorien. Der Titel bleibt für Suchmaschinen und
   Vorleseprogramme im Code (unsichtbar).
   ========================================================================== */
body.tax-product_cat .vg-seitenkopf .wp-block-query-title {
	position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important;
	clip: rect(0 0 0 0) !important; clip-path: inset(50%) !important; white-space: nowrap !important; margin: 0 !important; padding: 0 !important;
}
body.tax-product_cat .vg-main.vg-shop { padding-top: clamp(20px, 2.4vw, 32px) !important; }
body.tax-product_cat .vg-seitenkopf { margin-bottom: 0 !important; padding-bottom: 0 !important; gap: 8px !important; }
body.tax-product_cat .vg-seitenkopf .wp-block-term-description { margin: 0 0 12px !important; max-width: 620px; font-size: 15px; color: var(--vg-sek, #5C5B58); }
body.tax-product_cat .vg-seitenkopf .wp-block-term-description:empty { display: none; }
html body.tax-product_cat .vg-unterkats:not(#vg-k) { margin-top: 0 !important; font-size: 15px; gap: 8px 26px; }

/* ==========================================================================
   03 – 1.20.12: Untergruppen erscheinen beim Darüberfahren zuverlässig
   – der weiche Auslauf am Rand (Maske) hat die aufklappenden Felder unsichtbar gemacht; jetzt mit Schatten am Pfeil
   – Trennstriche ohne «position: relative», damit auch «Aktuell» sein Feld über die ganze Breite öffnet
   ========================================================================== */
html body .vg-kopfleiste .vg-kl-liste:not(#vg-k) { -webkit-mask-image: none !important; mask-image: none !important; }
html body .vg-kl-pfeil:not(#vg-k) { box-shadow: 0 0 0 0 transparent; }
html body .vg-kl-weiter:not(#vg-k) { box-shadow: -28px 0 20px -4px var(--vg-creme); }
html body .vg-kl-zurueck:not(#vg-k) { box-shadow: 28px 0 20px -4px var(--vg-creme); }
html body.vg-bildkopf:not(.vg-kopf-hell) .vg-kl-weiter:not(#vg-k) { box-shadow: -28px 0 20px -4px rgba(18,17,16,.35); }
html body.vg-bildkopf:not(.vg-kopf-hell) .vg-kl-zurueck:not(#vg-k) { box-shadow: 28px 0 20px -4px rgba(18,17,16,.35); }
html body .vg-kl-aktuell:not(#vg-k), html body .vg-kl-marken:not(#vg-k) { position: static; }
.vg-kl-aktuell::after, .vg-kl-marken::before { content: none !important; }
html body .vg-kl-aktuell:not(#vg-k) { background: linear-gradient(rgba(127,120,110,.45), rgba(127,120,110,.45)) no-repeat right center / 1px 18px; }
html body .vg-kl-marken:not(#vg-k) { background: linear-gradient(rgba(127,120,110,.45), rgba(127,120,110,.45)) no-repeat left center / 1px 18px; }
/* Feld öffnet sofort (kurze Verzögerung nur gegen zufälliges Darüberstreifen) */
.vg-kl-punkt:is(:hover, :focus-within) > .vg-kl-feld { transition-delay: .08s, .08s, 0s; }

/* 03 – 1.20.13: Kategorieseiten – Unterkategorien näher an der Shop-Leiste */
html body.tax-product_cat .vg-main.vg-shop:not(#vg-k) { padding-top: 18px !important; }
html body.tax-product_cat .vg-seitenkopf:not(:has(.wp-block-term-description:not(:empty))):not(#vg-k) {
	height: 0 !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; gap: 0 !important; overflow: visible;
}
html body.tax-product_cat .vg-seitenkopf:not(:has(.wp-block-term-description:not(:empty))) > :not(.wp-block-group):not(#vg-k) { display: none !important; }
html body.tax-product_cat .vg-seitenkopf + *:not(#vg-k), html body.tax-product_cat .vg-unterkats:not(#vg-k) { margin-top: 0 !important; }

/* 03 – 1.21.0: Suchliste zeigt bis 12 Objekte – vier pro Reihe, kleinere Bilder */
html body .vg-wegweiser .vg-ww-produktliste:not(#vg-k) { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
@media (max-width: 900px) { html body .vg-wegweiser .vg-ww-produktliste:not(#vg-k) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }

/* ==========================================================================
   03 – 1.21.1: Suche – sobald Objekte gefunden sind, nur noch Bilder (Textliste ausgeblendet)
   ========================================================================== */
html body .vg-wegweiser.mit-objekten .vg-wegweiser-block:not(#vg-k), html body .vg-wegweiser.mit-objekten .vg-wegweiser-leer:not(#vg-k) { display: none !important; }
html body .vg-wegweiser.mit-objekten .vg-ww-produkte:not(#vg-k) { border-top: 0 !important; margin-top: 0 !important; padding-top: 4px !important; }
html body .vg-wegweiser .vg-ww-produktliste:not(#vg-k) { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; gap: 28px 20px !important; }
html body .vg-wegweiser a.vg-ww-produkt:not(#vg-k) { display: flex !important; flex-direction: column !important; align-items: stretch; gap: 8px !important; }
html body .vg-wegweiser a.vg-ww-produkt:not(#vg-k) img { grid-row: auto; width: 100% !important; height: auto; aspect-ratio: 4 / 5 !important; object-fit: cover; background: #fff; transition: opacity .25s ease; }
html body .vg-wegweiser a.vg-ww-produkt:not(#vg-k):hover img { opacity: .88; }
html body .vg-wegweiser a.vg-ww-produkt .vg-ww-name:not(#vg-k) { font-size: 14px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
html body .vg-wegweiser a.vg-ww-produkt .vg-ww-preis:not(#vg-k) { font-size: 13px; opacity: .8; }
@media (max-width: 1099px) { html body .vg-wegweiser .vg-ww-produktliste:not(#vg-k) { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 20px 14px !important; } }
@media (max-width: 600px) { html body .vg-wegweiser .vg-ww-produktliste:not(#vg-k) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }

/* ==========================================================================
   03 – 1.21.2: Shop-Leiste – Bild der Untergruppe / Marke beim Darüberfahren (rechte Spalte)
   ========================================================================== */
html body .vg-kl-bild:not(#vg-k) { grid-column: 4; display: flex; flex-direction: column; gap: 8px; align-self: start; min-height: 0; }
html body .vg-kl-bild img:not(#vg-k) { width: 100%; max-width: 360px; aspect-ratio: 4 / 5; max-height: 320px; object-fit: cover; background: #fff; opacity: 0; transition: opacity .25s ease; }
html body .vg-kl-bild img:not([hidden]):not(#vg-k) { opacity: 1; }
html body .vg-kl-bild img[hidden]:not(#vg-k) { display: none; }
html body .vg-kl-bild span:not(#vg-k) { font-size: 13px; color: var(--wp--preset--color--meta, #6F6B64); min-height: 1.2em; }
@media (prefers-reduced-motion: reduce) { html body .vg-kl-bild img:not(#vg-k) { transition: none; } }

/* ==========================================================================
   03 – 1.21.5 (13.11.2026, Livegang): Rechtliches, Datenschutz (iubenda), mobiles Menü
   (vorher als «Zusätzliches CSS» in WordPress)
   ========================================================================== */

/* Rechtliches (AGB, Impressum, Datenschutz – Unterseiten von «Rechtliches», ID 22641): kleinere Schrift, engere Abstände */
html body.parent-pageid-22641.vg-editorial:not(.woocommerce):not(.vg-x):not(.vg-y) .wp-block-post-content :is(p,li,td,ol,ul){font-size:12px!important;line-height:1.6!important;color:#5c5b58!important}
html body.parent-pageid-22641.vg-editorial:not(.woocommerce):not(.vg-x):not(.vg-y) .wp-block-post-content > :is(p,ol,ul,figure,table){margin-top:0!important;margin-bottom:.75em!important}
html body.parent-pageid-22641.vg-editorial:not(.woocommerce):not(.vg-x):not(.vg-y) .wp-block-post-content :is(ol,ul){padding-left:1.4em!important}
html body.parent-pageid-22641.vg-editorial:not(.woocommerce):not(.vg-x):not(.vg-y) .wp-block-post-content li{margin:0 0 .2em!important}
html body.parent-pageid-22641.vg-editorial:not(.woocommerce):not(.vg-x):not(.vg-y) .wp-block-post-content :is(h2){font-size:13px!important;line-height:1.35!important;color:#222221!important;margin-top:2.2em!important;margin-bottom:.6em!important}
html body.parent-pageid-22641.vg-editorial:not(.woocommerce):not(.vg-x):not(.vg-y) .wp-block-post-content :is(h3,h4){font-size:12px!important;font-weight:600!important;line-height:1.4!important;color:#222221!important;margin-top:1.4em!important;margin-bottom:.4em!important}
html body.parent-pageid-22641.vg-editorial:not(.woocommerce):not(.vg-x):not(.vg-y) .wp-block-post-content :is(p,li) :is(strong,b){color:#222221!important}
html body.parent-pageid-22641.vg-editorial:not(.woocommerce):not(.vg-x):not(.vg-y) .wp-block-post-content .vg-einblenden{opacity:1!important;transform:none!important}

/* iubenda (Datenschutz): ruhiger, linksbündig, ohne Karten-Look (ergänzt den Stil-Block «vg-iubenda» auf der Seite) */
body.parent-pageid-22641 #iub-legalDoc p,body.parent-pageid-22641 #iub-legalDoc li,body.parent-pageid-22641 #iub-legalDoc div,body.parent-pageid-22641 #iub-legalDoc td,body.parent-pageid-22641 #iub-legalDoc span,body.parent-pageid-22641 #iub-legalDoc a{font-size:12px!important}
html body.parent-pageid-22641 #iub-pp-container #iub-legalDoc h1:not(.vg-x),html body.parent-pageid-22641 #iub-pp-container #iub-legalDoc h1 strong:not(.vg-x){font-size:14px!important}
body.parent-pageid-22641 #iub-pp-container #iub-legalDoc h2{font-size:12px!important}
body.parent-pageid-22641 #iub-pp-container #iub-legalDoc h3,body.parent-pageid-22641 #iub-pp-container #iub-legalDoc h4{font-size:11.5px!important}
body.parent-pageid-22641 #iub-legalDoc .main-header,body.parent-pageid-22641 #iub-legalDoc .main-header *,body.parent-pageid-22641 #iub-legalDoc footer,body.parent-pageid-22641 #iub-legalDoc .table-of-content-btn-wrapper{text-align:left!important}
body.parent-pageid-22641 #iub-legalDoc .summary__card,body.parent-pageid-22641 #iub-legalDoc .card-button,body.parent-pageid-22641 #iub-legalDoc .legalDoc__accordion,body.parent-pageid-22641 #iub-legalDoc figure,body.parent-pageid-22641 #iub-legalDoc .accordion__body,body.parent-pageid-22641 #iub-legalDoc .btn,body.parent-pageid-22641 #iub-legalDoc .open-dialog,body.parent-pageid-22641 #iub-legalDoc .iub-manage-preferences-btn,body.parent-pageid-22641 #iub-legalDoc .footer__credits{background:transparent!important;border-color:#dad7d0!important;border-radius:0!important;box-shadow:none!important}
body.parent-pageid-22641 #iub-legalDoc .third-parties-item{background:transparent!important;border-color:#dad7d0!important}
body.parent-pageid-22641 #iub-legalDoc svg{color:#80613a!important}
html body.parent-pageid-22641 #iub-pp-container #iub-legalDoc button,html body.parent-pageid-22641 #iub-pp-container #iub-legalDoc .btn{font-size:12px!important;font-weight:600!important}

/* Mobiles Menü auf Seiten mit Grossbild: dunkle Schrift, kein Schatten */
html body.vg-bildkopf:not(.vg-x):not(.vg-y) .vg-kopf .wp-block-navigation__responsive-container.is-menu-open :is(a,.wp-block-navigation-item__content,.wp-block-navigation-item__label,button,span){color:#222221!important;text-shadow:none!important}
html body.vg-bildkopf:not(.vg-x):not(.vg-y) .vg-kopf .wp-block-navigation__responsive-container.is-menu-open svg{fill:currentColor!important;filter:none!important}

/* 1.21.5: Shop-Symbol (Tasche) in der Kopfzeile – nur auf dem Handy, wo «Shop» im Menü verschwindet */
.vg-kopf .vg-shop-knopf { display: none; align-items: center; justify-content: center; color: inherit; line-height: 0; text-decoration: none !important; background: none !important; }
@media (max-width: 599px) {
	.vg-kopf .vg-shop-knopf { display: inline-flex; }
	.vg-kopf .vg-kopf-rechts { gap: 14px !important; }
}