/*
 * Digitalstreifen — Komponenten und Abbildung auf WooCommerce.
 * Tokens kommen aus theme.json. Hier stehen nur Regeln, die theme.json
 * nicht ausdrücken kann: Komponenten-Klassen für Plugin-Markup, Block-Stile,
 * WooCommerce-Blöcke und klassische WooCommerce-Seiten (order-pay).
 * Keine Hex-Werte außer den zwei Badge-Flächen, die der Export so definiert.
 */

/* ---------- 1. Aliase: Design-System-Namen → theme.json-Presets ---------- */
:root {
	--blue-950: var(--wp--preset--color--blue-950);
	--blue-900: var(--wp--preset--color--blue-900);
	--blue-800: var(--wp--preset--color--blue-800);
	--blue-700: var(--wp--preset--color--blue-700);
	--blue-600: var(--wp--preset--color--blue-600);
	--blue-100: var(--wp--preset--color--blue-100);
	--blue-50: var(--wp--preset--color--blue-50);
	--ink: var(--wp--preset--color--ink);
	--gray-700: var(--wp--preset--color--gray-700);
	--gray-500: var(--wp--preset--color--gray-500);
	--gray-400: var(--wp--preset--color--gray-400);
	--gray-300: var(--wp--preset--color--gray-300);
	--gray-200: var(--wp--preset--color--gray-200);
	--gray-100: var(--wp--preset--color--gray-100);
	--white: var(--wp--preset--color--white);
	--signal-500: var(--wp--preset--color--signal-500);
	--signal-600: var(--wp--preset--color--signal-600);
	--signal-800: var(--wp--preset--color--signal-800);
	--success: var(--wp--preset--color--success);
	--error: var(--wp--preset--color--error);
	--warning: var(--wp--preset--color--warning);

	--text-body: var(--ink);
	--text-muted: var(--gray-500);
	--text-onbrand: var(--white);
	--text-price: var(--blue-800);
	--surface-page: var(--white);
	--surface-card: var(--white);
	--surface-tint: var(--gray-100);
	--surface-brand: var(--blue-800);
	--surface-brand-deep: var(--blue-900);
	--border-default: var(--gray-200);
	--border-strong: var(--gray-300);
	--border-input: var(--gray-300);
	--action-primary: var(--blue-800);
	--action-primary-hover: var(--blue-900);
	--action-signal: var(--signal-500);
	--action-signal-hover: var(--signal-600);
	--link: var(--blue-700);
	--link-hover: var(--blue-900);

	--font-sans: var(--wp--preset--font-family--sans);
	--fs-display-xl: var(--wp--preset--font-size--display-xl); --lh-display-xl: var(--wp--custom--line-height--display-xl);
	--fs-display: var(--wp--preset--font-size--display); --lh-display: var(--wp--custom--line-height--display);
	--fs-h2: var(--wp--preset--font-size--heading-2); --lh-h2: var(--wp--custom--line-height--heading-2);
	--fs-h3: var(--wp--preset--font-size--heading-3); --lh-h3: var(--wp--custom--line-height--heading-3);
	--fs-body: var(--wp--preset--font-size--medium); --lh-body: var(--wp--custom--line-height--body);
	--fs-sm: var(--wp--preset--font-size--small); --lh-sm: var(--wp--custom--line-height--small);
	--fs-caption: var(--wp--preset--font-size--caption); --lh-caption: var(--wp--custom--line-height--caption);
	--fs-price-lg: var(--wp--preset--font-size--price); --lh-price-lg: var(--wp--custom--line-height--price);
	--fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700;
	--ls-tight: var(--wp--custom--letter-spacing--tight);
	--ls-display: var(--wp--custom--letter-spacing--display);
	--ls-caps: var(--wp--custom--letter-spacing--caps);

	--space-1: var(--wp--preset--spacing--1); --space-2: var(--wp--preset--spacing--2);
	--space-3: var(--wp--preset--spacing--3); --space-4: var(--wp--preset--spacing--4);
	--space-5: var(--wp--preset--spacing--5); --space-6: var(--wp--preset--spacing--6);
	--space-7: var(--wp--preset--spacing--7); --space-8: var(--wp--preset--spacing--8);
	--radius-sm: var(--wp--custom--radius--sm); --radius-md: var(--wp--custom--radius--md);
	--radius-lg: var(--wp--custom--radius--lg); --radius-pill: var(--wp--custom--radius--pill);
	--control-h-sm: var(--wp--custom--control--sm); --control-h-md: var(--wp--custom--control--md);
	--control-h-lg: var(--wp--custom--control--lg);
	--shadow-sm: var(--wp--preset--shadow--sm); --shadow-md: var(--wp--preset--shadow--md);
	--focus-ring: var(--wp--custom--focus-ring); --focus-ring-signal: var(--wp--custom--focus-ring-signal);
	--transition: var(--wp--custom--transition);
}

/* ---------- 2. Grundlagen ---------- */
html { -webkit-font-smoothing: antialiased; }
.nums, td.num, .price { font-variant-numeric: tabular-nums lining-nums; }
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
	outline: none;
	box-shadow: var(--focus-ring);
	border-radius: var(--radius-sm);
}
::selection { background: var(--blue-100); }

/* ---------- 3. Logo (Header/Footer): Bildzeichen als Inline-SVG, Wortmarke als Text ---------- */
.ds-logo {
	display: inline-flex; align-items: flex-end; gap: 0.4em;
	color: var(--blue-800); text-decoration: none; line-height: 1;
	font-weight: 600; font-size: 1.625rem; letter-spacing: var(--ls-display);
}
.ds-logo:hover, .ds-logo:focus { color: var(--blue-800); text-decoration: none; }
.ds-logo__mark { height: 1.15em; width: auto; fill: currentColor; display: block; }
.ds-logo__word { display: block; transform: translateY(0.02em); }
.ds-logo--sm { font-size: 1.25rem; }
.ds-logo--onbrand { color: var(--white); }

/* ---------- 4. Header, Footer ---------- */
.ds-header .wp-block-navigation a { color: var(--ink); }
.ds-header .wp-block-navigation a:hover { color: var(--blue-800); text-decoration: none; }
.ds-header .wp-block-navigation .current-menu-item > a { color: var(--blue-800); }
.ds-header__cta .wp-block-button__link { padding-top: 0.625rem; padding-bottom: 0.625rem; }
.ds-footer .wp-block-navigation a { color: var(--gray-700); font-size: var(--fs-sm); font-weight: 400; }
.ds-footer .wp-block-navigation a:hover { color: var(--blue-800); }

/* ---------- 5. Buttons ---------- */
.ds-btn, .wp-block-button__link, .wp-element-button {
	display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
	font-family: var(--font-sans); font-weight: 600; font-size: 0.9375rem; line-height: 1;
	min-height: var(--control-h-md); padding: 0 1rem;
	border: 1px solid transparent; border-radius: var(--radius-md);
	background: var(--action-primary); color: var(--white);
	cursor: pointer; text-decoration: none;
	transition: background var(--transition), border-color var(--transition), color var(--transition);
}
.ds-btn:hover, .ds-btn:focus-visible,
.wp-block-button__link:hover, .wp-block-button__link:focus-visible { background: var(--action-primary-hover); color: var(--white); text-decoration: none; }
.ds-btn:active { background: var(--blue-950); }
.ds-btn:disabled, .ds-btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
.ds-btn--sm { min-height: var(--control-h-sm); font-size: var(--fs-sm); padding: 0 0.75rem; }
.ds-btn--lg { min-height: var(--control-h-lg); font-size: var(--fs-body); padding: 0 1.375rem; }
.ds-btn--block { width: 100%; }

.ds-btn--signal, .wp-block-button.is-style-signal .wp-block-button__link {
	background: var(--action-signal); color: var(--blue-950);
}
.ds-btn--signal:hover, .ds-btn--signal:focus-visible,
.wp-block-button.is-style-signal .wp-block-button__link:hover,
.wp-block-button.is-style-signal .wp-block-button__link:focus-visible { background: var(--action-signal-hover); color: var(--blue-950); }
.ds-btn--signal:focus-visible { box-shadow: var(--focus-ring-signal); }

.ds-btn--secondary, .wp-block-button.is-style-secondary .wp-block-button__link {
	background: var(--white); color: var(--blue-800); border-color: var(--border-strong);
}
.ds-btn--secondary:hover, .ds-btn--secondary:focus-visible,
.wp-block-button.is-style-secondary .wp-block-button__link:hover,
.wp-block-button.is-style-secondary .wp-block-button__link:focus-visible { background: var(--surface-tint); color: var(--blue-800); }

.ds-btn--ghost, .wp-block-button.is-style-ghost .wp-block-button__link { background: transparent; color: var(--blue-800); }
.ds-btn--ghost:hover, .ds-btn--ghost:focus-visible,
.wp-block-button.is-style-ghost .wp-block-button__link:hover,
.wp-block-button.is-style-ghost .wp-block-button__link:focus-visible { background: var(--surface-tint); color: var(--blue-800); }

.ds-btn--danger { background: var(--error); color: var(--white); }
.ds-btn--danger:hover, .ds-btn--danger:focus-visible { background: #B02742; color: var(--white); }

/* ---------- 6. Karten ---------- */
.ds-card, .wp-block-group.is-style-card, .wp-block-group.is-style-card-tint, .wp-block-group.is-style-card-brand {
	background: var(--surface-card); color: var(--text-body);
	border: 1px solid var(--border-default); border-radius: var(--radius-lg);
	box-shadow: var(--shadow-sm); overflow: hidden;
}
.wp-block-group.is-style-card, .wp-block-group.is-style-card-tint, .wp-block-group.is-style-card-brand { padding: var(--space-5); }
.ds-card--tint, .wp-block-group.is-style-card-tint { background: var(--surface-tint); box-shadow: none; }
.ds-card--brand, .wp-block-group.is-style-card-brand {
	background: var(--surface-brand); border-color: var(--surface-brand); color: var(--white); box-shadow: none;
}
.ds-card--brand a, .wp-block-group.is-style-card-brand a,
.ds-card--brand :is(h1, h2, h3, h4), .wp-block-group.is-style-card-brand :is(h1, h2, h3, h4) { color: var(--white); }
.ds-card__header { padding: var(--space-5) var(--space-5) 0; font-size: var(--fs-h3); line-height: var(--lh-h3); font-weight: 600; }
.ds-card__body { padding: var(--space-5); }
.ds-card__footer { padding: var(--space-4) var(--space-5); border-top: 1px solid var(--border-default); }
.ds-card--brand .ds-card__footer { border-top-color: rgba(255,255,255,.18); }
.ds-card--compact .ds-card__header { padding: var(--space-4) var(--space-4) 0; }
.ds-card--compact .ds-card__body { padding: var(--space-4); }
.ds-card--compact .ds-card__footer { padding: var(--space-3) var(--space-4); }

/* ---------- 7. Badges ---------- */
.ds-badge {
	display: inline-flex; align-items: center; height: 22px; padding: 0 8px;
	border-radius: var(--radius-sm); border: 1px solid var(--border-default);
	background: var(--surface-tint); color: var(--gray-700);
	font-size: var(--fs-caption); font-weight: 500; letter-spacing: .01em; white-space: nowrap;
	font-variant-numeric: tabular-nums;
}
.ds-badge--blue { background: var(--blue-50); color: var(--blue-800); border-color: var(--blue-100); }
.ds-badge--signal { background: var(--signal-500); color: var(--blue-950); border-color: var(--signal-500); }
.ds-badge--success { background: #E7F5EE; color: var(--success); border-color: #C9E9D8; }
.ds-badge--error { background: #FBEAEE; color: var(--error); border-color: #F3CCD6; }
.ds-badge--outline { background: transparent; color: var(--gray-700); border-color: var(--border-strong); }
.ds-badge--pill { border-radius: var(--radius-pill); }

/* ---------- 8. Formularfelder ---------- */
.ds-field { display: block; }
.ds-field__label { display: block; font-size: var(--fs-sm); line-height: var(--lh-sm); font-weight: 500; margin-bottom: 6px; }
.ds-field__hint { display: block; margin-top: 6px; font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--text-muted); }
.ds-field--error .ds-field__hint { color: var(--error); }

.ds-input, .ds-select {
	display: block; width: 100%; height: var(--control-h-md);
	font-family: var(--font-sans); font-size: var(--fs-body); color: var(--text-body);
	background: var(--white); border: 1px solid var(--border-input); border-radius: var(--radius-md);
	padding: 0 12px; font-variant-numeric: tabular-nums;
	transition: border-color var(--transition), box-shadow var(--transition);
}
.ds-input:focus, .ds-select:focus { outline: none; border-color: var(--blue-600); box-shadow: var(--focus-ring); }
.ds-input:disabled, .ds-select:disabled { background: var(--surface-tint); cursor: not-allowed; }
.ds-input--sm { height: var(--control-h-sm); }
.ds-input--right { text-align: right; }
.ds-field--error .ds-input, .ds-field--error .ds-select { border-color: var(--error); }
.ds-input-group { display: flex; align-items: center; overflow: hidden; background: var(--white); border: 1px solid var(--border-input); border-radius: var(--radius-md); height: var(--control-h-md); }
.ds-input-group:focus-within { border-color: var(--blue-600); box-shadow: var(--focus-ring); }
.ds-input-group .ds-input { border: 0; height: 100%; box-shadow: none; }
.ds-input-group__affix { padding: 0 10px; font-size: var(--fs-sm); color: var(--text-muted); white-space: nowrap; }
.ds-select {
	appearance: none; -webkit-appearance: none; padding-right: 34px; cursor: pointer;
	background-image: 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 1.5 6 6.5 11 1.5' fill='none' stroke='%23676E85' stroke-width='1.75'/%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: right 12px center;
}

/* Stepper: <span class="ds-stepper"><button>−</button><input inputmode="numeric"><button>+</button></span> */
.ds-stepper {
	display: inline-flex; align-items: center; height: var(--control-h-md); width: 132px;
	border: 1px solid var(--border-input); border-radius: var(--radius-md); background: var(--white); overflow: hidden;
}
.ds-stepper:focus-within { border-color: var(--blue-600); box-shadow: var(--focus-ring); }
.ds-stepper button {
	width: 38px; align-self: stretch; border: 0; background: transparent; color: var(--blue-800);
	font-family: var(--font-sans); font-size: 18px; font-weight: 500; line-height: 1; cursor: pointer; padding: 0;
	transition: background var(--transition);
}
.ds-stepper button:hover { background: var(--surface-tint); }
.ds-stepper button:focus-visible { box-shadow: inset var(--focus-ring); border-radius: 0; }
.ds-stepper button:disabled { color: var(--gray-400); cursor: not-allowed; }
.ds-stepper input {
	flex: 1; min-width: 0; height: 100%; border: 0; border-left: 1px solid var(--border-default); border-right: 1px solid var(--border-default);
	outline: none; text-align: center; background: transparent; padding: 0;
	font-family: var(--font-sans); font-size: var(--fs-body); font-weight: 500; color: var(--text-body); font-variant-numeric: tabular-nums;
	-moz-appearance: textfield;
}
.ds-stepper input::-webkit-outer-spin-button, .ds-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ds-stepper input:focus { box-shadow: none; }
.ds-stepper--disabled, .ds-stepper:has(input:disabled) { background: var(--surface-tint); }

/* Checkbox: <label class="ds-checkbox"><input type="checkbox"><span class="ds-checkbox__box"></span><span class="ds-checkbox__text">…<small>…</small></span></label> */
.ds-checkbox { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; position: relative; }
.ds-checkbox input { position: absolute; opacity: 0; width: 18px; height: 18px; margin: 3px 0 0; cursor: inherit; }
.ds-checkbox__box {
	flex: none; width: 18px; height: 18px; margin-top: 3px; border-radius: var(--radius-sm);
	border: 1px solid var(--border-strong); background: var(--white);
	display: flex; align-items: center; justify-content: center;
	transition: background 120ms ease-out, border-color 120ms ease-out;
}
.ds-checkbox input:checked + .ds-checkbox__box { background: var(--blue-800); border-color: var(--blue-800); }
.ds-checkbox input:checked + .ds-checkbox__box::after {
	content: ""; width: 11px; height: 9px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='9' viewBox='0 0 11 9'%3E%3Cpath d='M1 4.5 4 7.5 10 1' fill='none' stroke='%23fff' stroke-width='2'/%3E%3C/svg%3E") no-repeat center;
}
.ds-checkbox input:focus-visible + .ds-checkbox__box { box-shadow: var(--focus-ring); }
.ds-checkbox input:disabled ~ * { opacity: .5; cursor: not-allowed; }
.ds-checkbox__text { font-size: var(--fs-body); line-height: var(--lh-body); }
.ds-checkbox__text small { display: block; font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--text-muted); }

/* ---------- 9. Tabellen ---------- */
.ds-table, .wp-block-table.is-style-nums table { border-collapse: collapse; width: 100%; background: var(--white); font-size: var(--fs-sm); line-height: var(--lh-sm); }
.ds-table th, .ds-table td { padding: 12px 16px; text-align: left; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ds-table--compact th, .ds-table--compact td { padding: 8px 12px; }
.ds-table thead tr { border-bottom: 1px solid var(--border-strong); }
.ds-table th { font-size: var(--fs-caption); font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: var(--ls-caps); }
.ds-table tbody tr { border-bottom: 1px solid var(--border-default); }
.ds-table tfoot tr { background: var(--surface-tint); font-weight: 600; }
.ds-table .num, .ds-table [data-align="right"] { text-align: right; }
.wp-block-table.is-style-nums td, .wp-block-table.is-style-nums th { font-variant-numeric: tabular-nums lining-nums; }
.wp-block-table.is-style-nums td:not(:first-child), .wp-block-table.is-style-nums th:not(:first-child) { text-align: right; }
.wp-block-table thead th { border-bottom: 1px solid var(--border-strong); font-size: var(--fs-caption); font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: var(--ls-caps); }
.wp-block-table td, .wp-block-table th { border-color: var(--border-default); padding: 12px 16px; }
.wp-block-table tfoot td { background: var(--surface-tint); font-weight: 600; }

/* ---------- 10. Kleinkram ---------- */
.wp-block-list.is-style-plain { list-style: none; padding-left: 0; }
.ds-price-lg { font-size: var(--fs-price-lg); line-height: var(--lh-price-lg); font-weight: 600; font-variant-numeric: tabular-nums; }
.ds-muted { color: var(--text-muted); }
.ds-caps { font-size: var(--fs-caption); font-weight: 600; letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--text-muted); }
.wp-block-search__input { border: 1px solid var(--border-input); border-radius: var(--radius-md); height: var(--control-h-md); padding: 0 12px; font-family: var(--font-sans); }
.wp-block-search__input:focus { border-color: var(--blue-600); box-shadow: var(--focus-ring); outline: none; }
.wp-block-search__button { border-radius: var(--radius-md); }
.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper { border: 1px solid var(--border-input); border-radius: var(--radius-md); padding: 3px; }
.wp-block-search.wp-block-search__button-inside .wp-block-search__input { border: 0; box-shadow: none; }
.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper:focus-within { border-color: var(--blue-600); box-shadow: var(--focus-ring); }

/* ---------- 11. WooCommerce: Cart- und Checkout-Blöcke ---------- */
.wc-block-components-button, .wc-block-components-button:not(.is-link) {
	font-family: var(--font-sans); font-weight: 600; font-size: 0.9375rem; line-height: 1;
	min-height: var(--control-h-lg); border-radius: var(--radius-md); border: 1px solid transparent;
	background: var(--action-primary); color: var(--white);
	transition: background var(--transition);
}
.wc-block-components-button:not(.is-link):hover, .wc-block-components-button:not(.is-link):focus { background: var(--action-primary-hover); color: var(--white); }
/* Der eine Haupt-CTA im Checkout: „Zahlungspflichtig bestellen" in Signal. */
.wc-block-components-button.wc-block-components-checkout-place-order-button:not(.is-link) { background: var(--action-signal); color: var(--blue-950); }
.wc-block-components-button.wc-block-components-checkout-place-order-button:not(.is-link):hover,
.wc-block-components-button.wc-block-components-checkout-place-order-button:not(.is-link):focus { background: var(--action-signal-hover); color: var(--blue-950); }
.wc-block-components-button.outlined, .wc-block-components-button.contained.outlined { background: var(--white); color: var(--blue-800); border-color: var(--border-strong); }

.wc-block-components-text-input input, .wc-block-components-textarea, .wc-block-components-form .wc-block-components-select .components-custom-select-control__button,
.wc-block-components-country-input .components-combobox-control__input, .wc-block-components-combobox .components-combobox-control__input {
	font-family: var(--font-sans); font-size: var(--fs-body); color: var(--text-body);
	border: 1px solid var(--border-input); border-radius: var(--radius-md); background: var(--white);
}
.wc-block-components-text-input input:focus, .wc-block-components-textarea:focus,
.wc-block-components-combobox .components-combobox-control__input:focus { border-color: var(--blue-600); box-shadow: var(--focus-ring); outline: none; }
.wc-block-components-text-input.has-error input { border-color: var(--error); }
.wc-block-components-validation-error p { color: var(--error); font-size: var(--fs-caption); }
.wc-block-components-checkbox .wc-block-components-checkbox__input[type="checkbox"] { border: 1px solid var(--border-strong); border-radius: var(--radius-sm); width: 18px; height: 18px; }
.wc-block-components-checkbox .wc-block-components-checkbox__input[type="checkbox"]:checked { background: var(--blue-800); border-color: var(--blue-800); }
.wc-block-components-checkbox .wc-block-components-checkbox__mark { color: var(--white); }
.wc-block-components-radio-control__input { border-color: var(--border-strong); }
.wc-block-components-radio-control__input:checked { border-color: var(--blue-800); }
.wc-block-components-radio-control__input:checked::before { background: var(--blue-800); }
.wc-block-components-radio-control--highlight-checked .wc-block-components-radio-control-accordion-option--checked-option-highlighted,
.wc-block-components-radio-control--highlight-checked .wc-block-components-radio-control__option--checked-option-highlighted { box-shadow: inset 0 0 0 2px var(--blue-800); border-radius: var(--radius-md); }

.wc-block-components-checkout-step__title, .wc-block-components-title, .wc-block-components-checkout-order-summary__title { font-family: var(--font-sans); font-weight: 600; letter-spacing: 0; }
.wc-block-components-totals-item, .wc-block-components-order-summary-item__total-price, .wc-block-components-product-price, .wc-block-formatted-money-amount, .wc-block-components-quantity-selector input { font-variant-numeric: tabular-nums lining-nums; }
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value { font-size: var(--fs-price-lg); line-height: var(--lh-price-lg); font-weight: 600; color: var(--text-price); }
.wc-block-components-sidebar .wc-block-components-panel, .is-large .wc-block-components-sidebar { background: var(--white); border: 1px solid var(--border-default); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.wc-block-components-notice-banner { border-radius: var(--radius-md); font-family: var(--font-sans); }
.wc-block-components-notice-banner.is-error { border-color: var(--error); }
.wc-block-components-notice-banner.is-success { border-color: var(--success); }
.wc-block-components-quantity-selector { border: 1px solid var(--border-input); border-radius: var(--radius-md); box-shadow: none; }
.wc-block-components-quantity-selector::after { display: none; }
.wc-block-components-quantity-selector input { font-family: var(--font-sans); font-weight: 500; }
.wc-block-components-quantity-selector .wc-block-components-quantity-selector__button { color: var(--blue-800); opacity: 1; }
.wc-block-components-quantity-selector .wc-block-components-quantity-selector__button:hover { background: var(--surface-tint); }
.wc-block-cart__submit-button, .wc-block-cart__submit-container .wc-block-components-button { border-radius: var(--radius-md); }
.wc-block-components-checkout-return-to-cart-button, .wc-block-components-checkout-step__description { color: var(--text-muted); }

/* ---------- 12. WooCommerce klassisch (order-pay, Mein Konto, Danke-Seite) ---------- */
.woocommerce .button, .woocommerce button.button, .woocommerce a.button, .woocommerce input.button, .woocommerce #respond input#submit,
.woocommerce button.button.alt, .woocommerce a.button.alt, .woocommerce input.button.alt {
	font-family: var(--font-sans); font-weight: 600; font-size: 0.9375rem; line-height: 1;
	min-height: var(--control-h-md); padding: 0 1rem; display: inline-flex; align-items: center; justify-content: center;
	border: 1px solid transparent; border-radius: var(--radius-md);
	background: var(--action-primary); color: var(--white);
	transition: background var(--transition);
}
.woocommerce .button:hover, .woocommerce button.button:hover, .woocommerce a.button:hover, .woocommerce input.button:hover,
.woocommerce button.button.alt:hover, .woocommerce a.button.alt:hover, .woocommerce input.button.alt:hover { background: var(--action-primary-hover); color: var(--white); }
.woocommerce #payment #place_order, .woocommerce-page #payment #place_order { background: var(--action-signal); color: var(--blue-950); min-height: var(--control-h-lg); width: 100%; }
.woocommerce #payment #place_order:hover { background: var(--action-signal-hover); color: var(--blue-950); }
.woocommerce .button.disabled, .woocommerce button.button:disabled { opacity: .45; }
.woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea, .woocommerce form .form-row select, .woocommerce .select2-container .select2-selection--single {
	font-family: var(--font-sans); font-size: var(--fs-body); color: var(--text-body); height: var(--control-h-md);
	border: 1px solid var(--border-input); border-radius: var(--radius-md); background: var(--white); padding: 0 12px;
}
.woocommerce form .form-row input.input-text:focus, .woocommerce form .form-row textarea:focus, .woocommerce form .form-row select:focus { border-color: var(--blue-600); box-shadow: var(--focus-ring); outline: none; }
.woocommerce form .form-row textarea { height: auto; padding: 8px 12px; }
.woocommerce form .form-row label { font-size: var(--fs-sm); font-weight: 500; }
.woocommerce table.shop_table { border: 1px solid var(--border-default); border-radius: var(--radius-lg); border-collapse: separate; font-size: var(--fs-sm); }
.woocommerce table.shop_table th, .woocommerce table.shop_table td { border-top: 1px solid var(--border-default); padding: 12px 16px; font-variant-numeric: tabular-nums; }
.woocommerce table.shop_table thead th { border-top: 0; font-size: var(--fs-caption); font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: var(--ls-caps); }
.woocommerce table.shop_table tfoot th, .woocommerce table.shop_table tfoot td { background: var(--surface-tint); font-weight: 600; }
.woocommerce table.shop_table .order-total .amount, .woocommerce-order-overview__total .amount { color: var(--text-price); }
.woocommerce #payment, .woocommerce-checkout #payment { background: var(--surface-tint); border-radius: var(--radius-lg); border: 1px solid var(--border-default); }
.woocommerce-checkout #payment ul.payment_methods { border-bottom: 1px solid var(--border-default); }
.woocommerce-checkout #payment div.payment_box { background: var(--white); border-radius: var(--radius-md); color: var(--text-body); }
.woocommerce-checkout #payment div.payment_box::before { border-bottom-color: var(--white); }
.woocommerce-message, .woocommerce-info, .woocommerce-error, .woocommerce-notice {
	font-family: var(--font-sans); border-radius: var(--radius-md); background: var(--surface-tint); color: var(--text-body); border-top-width: 3px;
}
.woocommerce-message { border-top-color: var(--success); }
.woocommerce-info { border-top-color: var(--blue-800); }
.woocommerce-error { border-top-color: var(--error); }
.woocommerce-message::before { color: var(--success); }
.woocommerce-info::before { color: var(--blue-800); }
.woocommerce-error::before { color: var(--error); }
.woocommerce ul.order_details { font-variant-numeric: tabular-nums; }
.woocommerce ul.order_details li strong { font-weight: 600; color: var(--text-body); }
.woocommerce-MyAccount-navigation ul { list-style: none; padding: 0; }
.woocommerce-MyAccount-navigation ul li a { display: block; padding: 8px 12px; border-radius: var(--radius-sm); color: var(--ink); }
.woocommerce-MyAccount-navigation ul li.is-active a, .woocommerce-MyAccount-navigation ul li a:hover { background: var(--blue-50); color: var(--blue-800); text-decoration: none; }

/* ---------- 13. Druck ---------- */
@media print {
	.ds-header__cta, .ds-footer .wp-block-navigation { display: none; }
	.ds-card, .wp-block-group.is-style-card { box-shadow: none; }
	body { color: #000; }
}

/* ---------- 14. Konfigurator (Markup aus Plugin-Modul configurator) ---------- */
[hidden] { display: none !important; }
.ds-btn[aria-disabled="true"], .wp-block-button__link[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
.ds-konfigurator { max-width: var(--wp--style--global--wide-size, 75rem); margin: 0 auto; }
.ds-konfigurator__intro { margin-bottom: var(--space-6); }
.ds-konfigurator__headline { margin: 0 0 var(--space-2); font-size: var(--fs-display); line-height: var(--lh-display); }
.ds-konfigurator__sub { margin: 0; color: var(--text-muted); max-width: 36rem; }
.ds-konfigurator__estimate { margin: var(--space-2) 0 0; font-weight: 500; }
.ds-konfigurator__grid { display: grid; grid-template-columns: minmax(0, 1fr) 22.5rem; gap: var(--space-5); align-items: start; }
.ds-konfigurator__groups { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.ds-konfigurator__aside { position: sticky; top: var(--space-5); display: flex; flex-direction: column; gap: var(--space-4); }
.ds-konfigurator .ds-card__header { margin: 0; }
.ds-konfigurator__note { margin: var(--space-1) 0 var(--space-4); font-size: var(--fs-sm); line-height: var(--lh-sm); color: var(--text-muted); }
.ds-konfigurator__row {
	display: grid; grid-template-columns: minmax(0, 1fr) auto 8.25rem 6.5rem; gap: var(--space-4); align-items: center;
	padding: var(--space-3) 0; border-top: 1px solid var(--border-default);
}
.ds-konfigurator__name { font-weight: 500; }
.ds-konfigurator__unit-price { text-align: right; font-size: var(--fs-sm); color: var(--text-muted); white-space: nowrap; }
.ds-konfigurator__unit-price small { font-size: var(--fs-caption); }
.ds-konfigurator__unit-price .woocommerce-Price-amount { color: inherit; font-weight: inherit; }
.ds-konfigurator__line-total { text-align: right; font-weight: 600; color: var(--text-price); }
.ds-konfigurator__line-total:empty::before { content: "\2014"; color: var(--gray-400); }

.ds-konfigurator__summary .ds-card__body { display: flex; flex-direction: column; gap: var(--space-2); font-size: var(--fs-sm); line-height: var(--lh-sm); }
.ds-konfigurator__empty { margin: 0; opacity: .75; }
.ds-konfigurator__lines { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.ds-konfigurator__lines li, .ds-konfigurator__fee, .ds-konfigurator__label { display: flex; justify-content: space-between; gap: var(--space-3); }
.ds-konfigurator__lines li span:first-child { opacity: .85; }
.ds-konfigurator__fee { color: var(--signal-500); }
.ds-konfigurator__label { opacity: .85; }
.ds-konfigurator__total {
	display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3);
	margin-top: var(--space-1); padding-top: var(--space-3); border-top: 1px solid rgba(255,255,255,.18); font-weight: 500;
}
.ds-konfigurator__vat { margin: 0; font-size: var(--fs-caption); opacity: .6; }
.ds-konfigurator__distance { margin: var(--space-1) 0 0; font-size: var(--fs-sm); color: var(--signal-500); }
.ds-konfigurator__error { margin: var(--space-1) 0 0; font-size: var(--fs-caption); opacity: .85; }
.ds-konfigurator__hint { margin: var(--space-2) 0 0; text-align: center; font-size: var(--fs-caption); opacity: .7; }
.ds-konfigurator__summary .woocommerce-Price-amount { color: inherit; }

.ds-konfigurator__tier-list { list-style: none; margin: 0 calc(-1 * var(--space-2)); padding: 0; }
.ds-konfigurator__tier-list li { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); padding: var(--space-2); border-radius: var(--radius-sm); font-size: var(--fs-sm); }
.ds-konfigurator__tier-list li.is-active { background: var(--blue-50); font-weight: 600; }

.ds-konfigurator__save form { display: flex; flex-direction: column; gap: var(--space-3); }
.ds-konfigurator__hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.ds-konfigurator__save-msg { margin: 0; font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--text-muted); }
.ds-konfigurator__save-msg:empty { display: none; }

@media (max-width: 900px) {
	.ds-konfigurator__grid { grid-template-columns: 1fr; }
	.ds-konfigurator__aside { position: static; }
}
@media (max-width: 560px) {
	.ds-konfigurator__row { grid-template-columns: 1fr 8.25rem; grid-template-areas: "name stepper" "price total"; row-gap: var(--space-2); }
	.ds-konfigurator__name { grid-area: name; }
	.ds-konfigurator__unit-price { grid-area: price; text-align: left; }
	.ds-konfigurator__row .ds-stepper { grid-area: stepper; justify-self: end; }
	.ds-konfigurator__line-total { grid-area: total; }
}