/*
 Theme Name:   Woodmart Child
 Description:  Woodmart Child Theme
 Author:       XTemos
 Author URI:   http://xtemos.com
 Template:     woodmart
 Version:      1.0.0
 Text Domain:  woodmart
*/

/* ============================================================
   textil handel24 — custom styles (update-safe, child theme)
   Loaded after WoodMart so these rules win without !important
   wherever specificity allows.
   ============================================================ */

/* ---- Single product: left (vertical) gallery thumbnails ----
   Keep the thumbnail rail compact so the main image stays the
   hero, and shrink it further on tablet/phone so the product
   photo never gets cramped. Width is driven by WoodMart's own
   --wd-thumbs-width custom property. */
.single-product .woocommerce-product-gallery.thumbs-position-left {
	--wd-thumbs-width: 100px;
}
@media (max-width: 1024px) {
	.single-product .woocommerce-product-gallery.thumbs-position-left {
		--wd-thumbs-width: 78px;
	}
}
@media (max-width: 575px) {
	.single-product .woocommerce-product-gallery.thumbs-position-left {
		--wd-thumbs-width: 60px;
	}
}

/* Tighten the gap between the thumbnail rail and the main image. */
.single-product .woocommerce-product-gallery.thumbs-position-left {
	--wd-gallery-gap: 10px;
}

/* Remove dead vertical space above the summary so title/price sit
   closer to the gallery on every breakpoint. */
.single-product .wd-single-gallery,
.single-product .product-image-summary-inner {
	margin-block-start: 0;
}

/* Safety net: the product page must never scroll horizontally. */
.single-product .product,
.single-product .wd-single-gallery {
	max-width: 100%;
}

/* ---- Single product main gallery: hide the redundant prev/next
   arrows on the big image (the thumbnail rail already handles
   navigation) and stop the image area from leaving empty space. ---- */
.single-product .woocommerce-product-gallery .wd-gallery-images > .wd-nav-arrows,
.single-product .woocommerce-product-gallery .wd-gallery-images .wd-carousel-inner > .wd-nav-arrows {
	display: none !important;
}
/* Before the carousel JS initialises, show only the first image so the
   page never flashes a tall stack of all gallery images. */
.single-product .woocommerce-product-gallery .wd-gallery-images .wd-carousel:not(.wd-initialized) .wd-carousel-wrap > *:not(:first-child) {
	display: none !important;
}
/* Give every main-gallery slide the same portrait frame (7:8, matching the
   reference product) so mixed source image sizes (portrait/landscape) can't
   blow out the gallery height. Images are contained cleanly, never distorted. */
.single-product .woocommerce-product-gallery .wd-gallery-images .wd-carousel-item {
	aspect-ratio: 7 / 8;
	height: auto !important;
	overflow: hidden;
}
.single-product .woocommerce-product-gallery .wd-gallery-images .wd-carousel-item img,
.single-product .woocommerce-product-gallery .wd-gallery-images .wd-carousel-item a {
	width: 100% !important;
	height: 100% !important;
	object-fit: contain;
	object-position: center;
}

/* ============================================================
   Uniform product-card images across ALL grids & carousels
   (shop, homepage, related, category, search). Every card gets
   the same 7:8 portrait frame so inconsistent or low-res source
   images (e.g. a landscape photo) can no longer break the grid.
   object-fit: contain = uniform size, no stretching, no distortion.
   ============================================================ */
.wd-product .wd-product-img-link,
.wd-product .product-image-link,
.wd-products .product-image-link {
	display: block;
	position: relative;
	aspect-ratio: 7 / 8;
	overflow: hidden;
}
.wd-product .wd-product-img-link img,
.wd-product .product-image-link img {
	position: absolute;
	inset: 0;
	width: 100% !important;
	height: 100% !important;
	object-fit: contain;
	object-position: center;
}

/* ---- Mengenrabatt (volume-tier) selector ---- */
.th-volume-tiers {
	margin: 18px 0 20px;
	width: 100%;
}
.th-volume-tiers.th-vt-nobase {
	display: none;
}
.th-vt-title {
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .02em;
	text-transform: uppercase;
	color: var(--wd-text-color, #242424);
	margin-bottom: 10px;
}
.th-vt-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.th-vt-item {
	margin: 0;
	border: 1px solid rgba(0, 0, 0, .12);
	border-radius: 10px;
	transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
	background: #fff;
}
.th-vt-item:hover {
	border-color: rgba(0, 0, 0, .35);
}
.th-vt-item.is-selected {
	border-color: var(--wd-primary-color, #131313);
	box-shadow: 0 0 0 1px var(--wd-primary-color, #131313) inset;
	background: rgba(0, 0, 0, .015);
}
.th-vt-item > label {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0;
	padding: 12px 16px;
	cursor: pointer;
	width: 100%;
}
.th-vt-item input[type="radio"] {
	flex: 0 0 auto;
	margin: 0;
	accent-color: var(--wd-primary-color, #131313);
	width: 18px;
	height: 18px;
}
.th-vt-main {
	display: flex;
	flex-direction: column;
	line-height: 1.25;
	min-width: 0;
}
.th-vt-qty {
	font-weight: 600;
	font-size: 15px;
	color: var(--wd-text-color, #242424);
}
.th-vt-unit {
	font-size: 12px;
	color: rgba(0, 0, 0, .55);
}
.th-vt-badge {
	flex: 0 0 auto;
	margin-left: auto;
	background: var(--wd-primary-color, #131313);
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
	padding: 5px 8px;
	border-radius: 6px;
}
.th-vt-right {
	flex: 0 0 auto;
	margin-left: 12px;
	text-align: right;
	display: flex;
	flex-direction: column;
	line-height: 1.25;
}
.th-vt-item .th-vt-badge + .th-vt-right {
	margin-left: 12px;
}
.th-vt-item:not(:has(.th-vt-badge)) .th-vt-right {
	margin-left: auto;
}
.th-vt-total {
	font-weight: 700;
	font-size: 16px;
	color: var(--wd-text-color, #242424);
}
.th-vt-save {
	font-size: 12px;
	font-weight: 600;
	color: #1a8f4c;
}

@media (max-width: 575px) {
	.th-vt-item > label {
		gap: 8px;
		padding: 10px 12px;
	}
	.th-vt-qty { font-size: 14px; }
	.th-vt-total { font-size: 15px; }
}

/* ============================================================
   Größen-Mengen-Matrix (size × quantity wholesale order form)
   Step 1 colour → Step 2 size/qty grid → totals → Step 3 add.
   ============================================================ */
/* Site-wide readability: the theme's base body text is a light grey (#767676)
   which reads faint on home, shop and product pages. Darken it to a readable
   tone by re-scoping the theme's OWN variable (no per-element hardcoding). */
:root {
	--wd-text-color: #2b2b2b !important;
}

.th-matrix {
	--th-line: rgba(0, 0, 0, .12);
	--th-accent: var(--wd-primary-color, #131313);
	width: 100%;
	margin: 6px 0 4px;
	color: #2b2b2b;
}
.th-matrix-step {
	margin-bottom: 14px;
}
.th-step-label {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.25;
	margin-bottom: 10px;
	color: #1f1f1f;
}
.th-step-text { min-width: 0; }
.th-step-num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--th-accent);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	flex: 0 0 auto;
}

/* ---- Step 1: colour swatches (square, grid, show-more toggle) ---- */
.th-color-selected {
	margin-bottom: 10px;
	font-size: 15px;
	color: #2b2b2b;
}
.th-color-selected strong {
	font-weight: 700;
}

/* Mobile-first: 4 swatches per row. */
.th-color-list {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 10px;
}

.th-color {
	position: relative;
	display: block;
	width: 100%;
	height: 52px;
	padding: 0;
	margin: 0;
	border: 0;
	border-radius: 12px;
	background: transparent;
	cursor: pointer;
	transition: box-shadow .15s ease, transform .12s ease;
	-webkit-tap-highlight-color: transparent;
}
.th-color:hover {
	transform: translateY(-1px);
}
.th-color-sw {
	position: absolute;
	inset: 0;
	border-radius: 12px;
	background-size: cover;
	background-position: center;
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .14);
}
.th-color:hover .th-color-sw {
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .3);
}
/* Selected: gap ring in the site accent colour, like the reference. */
.th-color.is-active {
	box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--th-accent);
}
.th-color:focus-visible {
	outline: none;
	box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--th-accent);
}

/* Extra swatches stay hidden until the toggle expands the list. */
.th-color--extra {
	display: none;
}
.th-color-list.is-expanded .th-color--extra {
	display: block;
}

/* "+N mehr anzeigen" toggle: sits in the grid and fills the rest of the row. */
.th-color-toggle {
	grid-column: span 2; /* 4-col grid, after 10 items 2 cells remain */
	height: 52px;
	padding: 0 8px;
	border: 1px solid var(--th-accent);
	border-radius: 12px;
	background: #fff;
	color: var(--th-accent);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.2;
	text-transform: none;
	letter-spacing: normal;
	cursor: pointer;
	transition: background-color .15s ease;
}
.th-color-toggle:hover,
.th-color-toggle:focus-visible {
	background: rgba(0, 0, 0, .04);
	outline: none;
}
/* When expanded the toggle can wrap to its own full-width row. */
.th-color-list.is-expanded .th-color-toggle {
	grid-column: 1 / -1;
}

/* Desktop: 7 swatches per row (matches the reference). */
@media (min-width: 1025px) {
	.th-color-list {
		grid-template-columns: repeat(7, 1fr);
	}
	.th-color,
	.th-color-sw,
	.th-color-toggle {
		height: 56px;
	}
	.th-color-toggle {
		grid-column: span 4; /* 7-col grid, after 10 items 4 cells remain */
	}
	.th-color-list.is-expanded .th-color-toggle {
		grid-column: 1 / -1;
	}
}

/* ---- Step 2: compact size cards (responsive grid) ---- */
.th-size-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
	gap: 8px;
}
.th-size-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 5px;
	padding: 9px 4px;
	border: 1px solid var(--th-line);
	border-radius: 10px;
	background: #fff;
	text-align: center;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.th-size-card.has-qty {
	border-color: var(--th-accent);
	box-shadow: 0 0 0 1px var(--th-accent) inset;
}
.th-size-card.is-oos {
	opacity: .5;
}
.th-size-label {
	font-weight: 700;
	font-size: 15px;
	line-height: 1.15;
	color: #1f1f1f;
}
.th-size-price {
	font-size: 13px;
	font-weight: 600;
	color: #3f3f3f;
	white-space: nowrap;
}
.th-size-price.is-sale {
	display: flex;
	flex-direction: column;
	line-height: 1.15;
}
.th-size-price.is-sale del { color: rgba(0, 0, 0, .4); }
.th-size-price.is-sale ins {
	text-decoration: none;
	color: #b02a37;
	font-weight: 700;
}
.th-size-oos {
	font-size: 11px;
	color: #b02a37;
	line-height: 1.2;
}
.th-size-line {
	display: none;
	font-weight: 700;
	font-size: 12px;
	color: var(--th-accent);
	white-space: nowrap;
}
.th-size-card.has-qty .th-size-line { display: block; }

/* Quantity stepper (compact, touch-friendly) */
.th-qty {
	display: inline-flex;
	align-items: center;
	border: 1px solid var(--th-line);
	border-radius: 7px;
	overflow: hidden;
	background: #fff;
}
.th-qbtn {
	width: 28px;
	height: 34px;
	flex: 0 0 auto;
	border: 0;
	background: #f6f6f6;
	font-size: 17px;
	line-height: 1;
	cursor: pointer;
	color: #333;
	padding: 0;
	touch-action: manipulation;
}
.th-qbtn:hover { background: #ececec; }
/* Scoped under .th-qty so it beats WoodMart's global
   input[type="number"]{width:100%} rule without !important. */
.th-qty .th-qinput {
	width: 36px;
	height: 34px;
	flex: 0 0 auto;
	border: 0;
	border-left: 1px solid var(--th-line);
	border-right: 1px solid var(--th-line);
	text-align: center;
	font-size: 15px;
	font-weight: 600;
	-moz-appearance: textfield;
	appearance: textfield;
	background: #fff;
	color: #222;
	box-sizing: border-box;
}
.th-qinput::-webkit-outer-spin-button,
.th-qinput::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}
.th-size-card.has-qty .th-qinput { color: var(--th-accent); }

/* ---- Totals ---- */
.th-matrix-totals {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 11px 14px;
	margin: 2px 0 12px;
	background: rgba(0, 0, 0, .035);
	border-radius: 10px;
}
.th-tot-qty-num {
	font-size: 19px;
	font-weight: 700;
}
.th-tot-qty-lbl,
.th-tot-sum-lbl {
	font-size: 13px;
	color: #555;
	margin-left: 4px;
}
.th-tot-right { text-align: right; }
.th-tot-sum-lbl { display: block; margin: 0 0 1px; }
.th-tot-sum-num {
	font-size: 21px;
	font-weight: 800;
	color: var(--th-accent);
}

/* ---- Step 3: actions ---- */
.th-matrix-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: stretch;
}
.th-matrix-actions .th-add {
	flex: 1 1 auto;
	min-height: 52px;
	font-weight: 700;
	font-size: 15px;
}
/* Brand-red order button (theme's own primary colour) instead of black. */
.single-product .th-matrix-actions .th-add,
.single-product .th-matrix-actions .th-add:hover,
.single-product .th-matrix-actions .th-add:focus {
	background-color: var(--wd-primary-color, #96000d);
	border-color: var(--wd-primary-color, #96000d);
	color: #fff;
}
.single-product .th-matrix-actions .th-add:hover {
	filter: brightness(1.1);
}
.th-add[disabled] {
	opacity: .45;
	cursor: not-allowed;
}
.th-add.loading {
	opacity: .7;
	pointer-events: none;
}
.th-checkout {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	min-height: 50px;
}
.th-checkout[hidden] {
	display: none;
}

/* PayPal express button — own full-width row under "In den Warenkorb". */
.th-paypal {
	flex: 1 1 100%;
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1px;
	min-height: 50px;
	padding: 7px 18px;
	border: 0;
	border-radius: 8px;
	background: #ffc439;
	cursor: pointer;
	line-height: 1.1;
	transition: filter .15s ease;
}
.th-paypal:hover { filter: brightness(.96); }
.th-paypal:focus-visible { outline: 3px solid rgba(0, 48, 135, .35); outline-offset: 2px; }
.th-paypal[disabled] { opacity: .5; cursor: not-allowed; }
.th-paypal.loading { opacity: .7; pointer-events: none; }
.th-pp-pre { font-size: 11px; font-weight: 600; color: #2c2e2f; }
.th-pp-word { font-size: 19px; font-weight: 800; font-style: italic; letter-spacing: -.01em; }
.th-pp-a { color: #003087; }
.th-pp-b { color: #009cde; }

/* ============================================================
   Header main menu — keep it on ONE row on laptops.
   The center header column was shrinking on ~1050–1300px widths,
   which wrapped "Über uns · Kontakt · Versand & Lieferung · Häufige
   Fragen · Orders Tracking" onto two rows and broke the header.
   Fix: the center column keeps the menu's width, the menu never
   wraps, and the item gap tightens a touch so the search still fits.
   Desktop header only (≥1025px; below that the mobile header shows).
   ============================================================ */
@media (min-width: 1025px) {
	.whb-col-center {
		flex-shrink: 0;
	}
	.wd-header-nav ul.wd-nav-main.wd-nav-main {
		flex-wrap: nowrap !important;
		--nav-gap: 12px;
	}
	.wd-header-nav ul.wd-nav-main.wd-nav-main > li > a {
		padding-left: 9px;
		padding-right: 9px;
	}
}

/* Header account dropdown: brand-red login button (matches the account page). */
.wd-header-my-account .wd-dropdown button[name="login"],
.wd-header-my-account .wd-dropdown .woocommerce-form-login__submit {
	background-color: var(--wd-primary-color, #96000d);
	border-color: var(--wd-primary-color, #96000d);
	color: #fff;
}

/* FAQ accordion (homepage): remove the link-style underline on questions
   and give the active question the brand colour for a clean look. */
.elementor-accordion .elementor-accordion-title,
.elementor-accordion .elementor-tab-title a,
.elementor-accordion .elementor-tab-title .elementor-accordion-title {
	text-decoration: none !important;
}
.elementor-accordion .elementor-tab-title.elementor-active .elementor-accordion-title {
	color: var(--wd-primary-color, #96000d);
}

/* B2B teaser ("Für Unternehmen & Vereine") — compact, tidy on mobile.
   The base styles set the CTA to full-width block on phones, which looks
   oversized; keep it a normal auto-width button and left-aligned. */
@media (max-width: 560px) {
	.th-b2b-teaser .th-b2b-teaser-btn {
		display: inline-block !important;
		width: auto !important;
		text-align: center;
		padding: 12px 22px !important;
		font-size: 14px !important;
	}
	.th-b2b-teaser .th-chip {
		font-size: 12.5px;
		padding: 7px 13px;
	}
}
.th-matrix-msg {
	margin-top: 9px;
	font-size: 13px;
	min-height: 1em;
}
.th-matrix-msg.is-error { color: #b02a37; }
.th-matrix-msg.is-success { color: #1a8f4c; }
.th-matrix-msg.is-info { color: rgba(0, 0, 0, .6); }

/* ---- Phones: 2 large, touch-friendly cards per row ---- */
@media (max-width: 575px) {
	.th-size-grid {
		grid-template-columns: repeat(2, 1fr);
	}
	.th-size-card { padding: 10px 8px; }
	.th-qbtn { width: 38px; height: 38px; font-size: 18px; }
	.th-qty .th-qinput { width: 48px; height: 38px; }
	.th-matrix-totals { padding: 11px 13px; }
	.th-matrix-actions .th-add { min-height: 52px; }
}

/* ============================================================
   Single product: give the order form (matrix) more room than the
   default narrow summary column, so the whole purchase flow —
   colour, sizes and Add to Cart — sits higher and uses the viewport
   better. Targeted by CONTENT (not element IDs) so it survives layout
   edits. Desktop only; tablet/mobile keep the stacked single column.
   ============================================================ */
@media (min-width: 1025px) {
	.single-product .e-con-inner > .e-con:has(.wd-single-gallery) {
		width: 50%;
		flex-basis: 50%;
		max-width: 50%;
	}
	.single-product .e-con-inner > .e-con:has(.th-matrix) {
		width: 47%;
		flex-basis: 47%;
		max-width: 47%;
	}
}

/* ============================================================
   Single product: "Ihre Vorteile bei uns" trust box + payments
   (styled after the reference shop; fully responsive)
   ============================================================ */
.th-benefits {
	margin: 18px 0 4px;
	padding: 18px 18px 16px;
	border: 1px solid var(--th-line, rgba(0, 0, 0, .12));
	border-radius: 12px;
	background: #fff;
}
.th-benefits-title {
	margin: 0 0 12px;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.25;
	color: var(--wd-text-color, #242424);
}
.th-benefits-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 9px;
}
.th-benefit {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	margin: 0;
	font-size: 14px;
	line-height: 1.4;
	color: var(--wd-text-color, #333);
}
.th-benefit-check {
	flex: 0 0 auto;
	margin-top: 1px;
	color: #1a8f4c;
}
.th-benefit-text strong {
	font-weight: 700;
}
.th-benefit-sub {
	font-weight: 400;
	color: rgba(0, 0, 0, .7);
}

/* ---- Payment methods ---- */
.th-benefits-pay-label {
	margin: 16px 0 8px;
	font-size: 13px;
	font-weight: 600;
	color: rgba(0, 0, 0, .6);
}
.th-payments {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.th-pay {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 58px;
	height: 34px;
	padding: 0 12px;
	border: 1px solid rgba(0, 0, 0, .12);
	border-radius: 7px;
	background: #fff;
	font-size: 13px;
	font-weight: 700;
	line-height: 1;
	white-space: nowrap;
	color: #333;
	box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
}
.th-pay--paypal { color: #003087; }
.th-pay--visa { color: #1a1f71; font-style: italic; letter-spacing: .5px; }
.th-pay--mastercard { color: #1a1a1a; }
.th-pay--klarna { background: #ffb3c7; border-color: #ffb3c7; color: #17120f; }
.th-pay--applepay { color: #000; }
.th-pay--amazonpay { color: #232f3e; }
.th-pay--rechnung,
.th-pay--vorkasse { color: #555; font-weight: 600; }

@media (max-width: 575px) {
	.th-benefits {
		padding: 15px 14px 14px;
	}
	.th-benefits-title { font-size: 16px; }
	.th-benefit { font-size: 13.5px; }
	.th-pay { min-width: 52px; height: 32px; padding: 0 10px; font-size: 12px; }
}

/* The "Ihre Vorteile bei uns" box supersedes the three summary trust
   infoboxes — hide them on single product to avoid duplicate content.
   (Reversible: the Elementor widgets remain in the layout.) */
.single-product .elementor-widget-wd_infobox {
	display: none;
}

/* ============================================================
   HOMEPAGE POLISH (2026-07-22)
   Consistent vertical rhythm between sections + harmonised
   section-title sizes, so the page reads as one clean scale on
   desktop and mobile. Scoped to body.home AND to exact Elementor
   element IDs — no other page or section is touched. Fully
   reversible (child theme, no Elementor data changed).
   ============================================================ */

/* --- 1. Uniform spacing between content sections ---
   Sections previously had erratic top margins (16/30/50px) and the
   Best-Selling row an 80px bottom gap. Give every content section
   the same top gap; hero and footer are deliberately left alone. */
body.home .elementor-element-f4af566,   /* Warum bei uns kaufen?   */
body.home .elementor-element-46cab61,   /* Damen / Herren / Kinder */
body.home .elementor-element-b924179,   /* Best Selling Produkte   */
body.home .elementor-element-2dfe27d9,  /* Jetzt verfügbar / 10er  */
body.home .elementor-element-f35c30b,   /* B2B teaser              */
body.home .elementor-element-69d258e,   /* Nach Marken einkaufen   */
body.home .elementor-element-faqsec01 { /* Häufige Fragen          */
	margin-top: 56px !important;
	margin-bottom: 0 !important;
}

/* --- 2. Harmonised section titles ---
   All top-level section headings share one size; the oversized
   "Jetzt verfügbar" title (34–40px) drops to match, and "10er-Packs"
   sits beneath it as a clear subtitle. */
body.home .elementor-element-whyhead1 .elementor-heading-title,  /* Warum          */
body.home .elementor-element-e9765d6 h4,                         /* Best Selling   */
body.home .elementor-element-e9765d6 .wd-title-text,
body.home .elementor-element-8066716 h2,                         /* Nach Marken    */
body.home .elementor-element-8066716 .wd-title-text,
body.home .elementor-element-faqhead1 .elementor-heading-title,  /* Häufige Fragen */
body.home .elementor-element-60ea03c .elementor-heading-title {  /* Jetzt verfügbar */
	font-size: 28px !important;
	line-height: 1.25 !important;
	font-weight: 700 !important;
}
body.home .elementor-element-2cc91c7 .elementor-heading-title {  /* 10er-Packs subtitle */
	font-size: 20px !important;
	line-height: 1.3 !important;
	font-weight: 700 !important;
}

@media (max-width: 767px) {
	body.home .elementor-element-f4af566,
	body.home .elementor-element-46cab61,
	body.home .elementor-element-b924179,
	body.home .elementor-element-2dfe27d9,
	body.home .elementor-element-f35c30b,
	body.home .elementor-element-69d258e,
	body.home .elementor-element-faqsec01 {
		margin-top: 40px !important;
		margin-bottom: 0 !important;
	}
	body.home .elementor-element-whyhead1 .elementor-heading-title,
	body.home .elementor-element-e9765d6 h4,
	body.home .elementor-element-e9765d6 .wd-title-text,
	body.home .elementor-element-8066716 h2,
	body.home .elementor-element-8066716 .wd-title-text,
	body.home .elementor-element-faqhead1 .elementor-heading-title,
	body.home .elementor-element-60ea03c .elementor-heading-title {
		font-size: 22px !important;
		line-height: 1.3 !important;
	}
	body.home .elementor-element-2cc91c7 .elementor-heading-title {
		font-size: 17px !important;
	}
	/* "Warum bei uns" cards stack on phones — tighten the 30px gap
	   so the four cards don't sprawl down the screen. */
	body.home .elementor-element-whyrow1 {
		row-gap: 16px !important;
	}
}