/* ==========================================================================
   HiTop Theme - Supplemental Styles (Figma-verifiziert)
   Audit-Fixes: 2026-04-02
   WP Best-Practice Refactor: 2026-04-17
   - Colors via var(--wp--preset--color--*) aus theme.json (Phase 1)
   - Media-Queries konsolidiert (Mobile-Breakpoint: max-width: 781px)
   - Cascade-Layer Ordnung dokumentiert (unten)
   ========================================================================== */

/* Cascade-Layer-Reihenfolge (nur deklarativ; ungeschichtete Regeln schlagen
   weiterhin geschichtete). Reihenfolge: spaeter = staerker.
   Nutze dies fuer zukuenftige Restrukturierungen, wenn WC/Germanized-Overrides
   in einen eigenen Layer wandern sollen.                                      */
@layer reset, wp, theme, components, blocks, overrides;

*,
*::before,
*::after {
	box-sizing: border-box;
}

/* Header/Footer/InfoBar volle Breite: geloest via align:full auf den
   wp:template-part Aufrufen in allen Templates (front-page.html etc.)
   zusammen mit theme.json useRootPaddingAwareAlignments: true.
   KEIN CSS-Hack noetig. */

/* ---------- Audit Fix: Font-Size Class-Aliase fuer Slugs mit Ziffer-Praefix ----------
   WP-Core generiert bei Slug `2xl`/`2lg`/`3xl` die CSS-Variable + Klasse im
   Kebab-Format (--wp--preset--font-size--2-xl, .has-2-xl-font-size). Unsere
   Patterns nutzen aber die kompakte Form (has-2xl-font-size). Ohne diese Aliase
   haetten Hero-H1 (3xl), Card-Headings (2lg) und Slider-Facts-Zahl (3xl) keine
   Font-Size-Regel gegriffen — statdessen default (md).
   Siehe https://core.trac.wordpress.org/ticket/59175                          */
:root {
	--wp--preset--font-size--2xl: var(--wp--preset--font-size--2-xl);
	--wp--preset--font-size--2lg: var(--wp--preset--font-size--2-lg);
	--wp--preset--font-size--3xl: var(--wp--preset--font-size--3-xl);
}

.has-2xl-font-size {
	font-size: var(--wp--preset--font-size--2-xl) !important;
}

.has-2lg-font-size {
	font-size: var(--wp--preset--font-size--2-lg) !important;
}

.has-3xl-font-size {
	font-size: var(--wp--preset--font-size--3-xl) !important;
}

/* ---------- Audit Fix: Card shadow (has-shadow class) ----------
   WordPress adds .has-shadow from the block editor but does NOT generate
   a box-shadow CSS rule. We must supply it.                                  */
.has-shadow {
	box-shadow: var(--wp--preset--shadow--card);
	overflow: hidden;
}

.has-shadow .wp-block-image {
	overflow: hidden;
}

.has-shadow .wp-block-image img {
	width: 100%;
	height: 240px;
	object-fit: cover;
	display: block;
}

/* ---------- Trust Badges ---------- */
.wp-block-group[style*="#F5F5F5"] .wp-block-image img,
.wp-block-group[style*="#f5f5f5"] .wp-block-image img {
	max-height: 120px;
	width: auto;
	height: auto;
	object-fit: contain;
	margin: 0 auto;
	display: block;
}

/* ---------- Team / Testimonial card image fixed height ---------- */
.hitop-slider .has-shadow .wp-block-image img {
	height: 280px;
	object-fit: cover;
}

/* ---------- Carousel slide card sizing ---------- */
.hitop-slider .hitop-slider__slide .has-shadow {
	height: 100%;
	display: flex;
	flex-direction: column;
}

.hitop-slider .hitop-slider__slide .has-shadow > .wp-block-group:last-child {
	flex: 1;
}

/* ---------- Carousel shadow fix (handled by slider-base.scss now) ----------
   .hitop-slider stays overflow:visible so shadows + side arrows render.
   Viewport uses overflow-x: clip / overflow-y: visible (slider-base.scss).   */

/* Cards inside carousels: let the card handle rounding, not the image.
   Specificity of .hitop-slider .has-shadow .wp-block-image reicht — kein !important noetig. */
.hitop-slider .has-shadow .wp-block-image img {
	border-radius: 0;
}

.hitop-slider .has-shadow .wp-block-image {
	border-radius: 0;
}

/* Carousel cards: cancel global padding so inner content is flush left to card edges.
   Selector .hitop-slider ... .has-global-padding ist spezifischer als Core's .has-global-padding. */
.hitop-slider .hitop-slider__slide > .has-global-padding,
.hitop-slider .has-shadow.has-global-padding {
	padding-left: 0;
	padding-right: 0;
}

/* Carousel cards: inner constrained groups must span full card width (default constrained shrinks to fit-content) */
.hitop-slider .hitop-slider__slide .has-shadow.is-layout-constrained > .wp-block-group,
.hitop-slider .hitop-slider__slide .has-shadow.is-layout-constrained > * {
	max-width: none;
	margin-left: 0;
	margin-right: 0;
}

.hitop-slider .hitop-slider__slide .has-shadow.is-layout-constrained > .wp-block-group {
	width: 100%;
}

/* ---------- Audit Fix: Card border-radius override ----------
   Cards in the block editor are set to 20px inline, but Figma spec is 30px
   (1.875rem = var(--wp--custom--radius--card)).                              */
.has-shadow[style*="border-radius:20px"] {
	border-radius: var(--wp--custom--radius--card) !important;
}

.has-shadow[style*="border-radius:20px"] .wp-block-image[style*="border-top-left-radius:20px"] {
	border-top-left-radius: var(--wp--custom--radius--card) !important;
	border-top-right-radius: var(--wp--custom--radius--card) !important;
}

.has-shadow[style*="border-radius:20px"] .wp-block-image[style*="border-top-left-radius:20px"] img {
	border-top-left-radius: var(--wp--custom--radius--card) !important;
	border-top-right-radius: var(--wp--custom--radius--card) !important;
}

/* ---------- Audit Fix: Button border-radius ----------
   Inline styles set 30px, Figma spec is 34px (2.125rem).                    */
.wp-block-button__link[style*="border-radius:30px"] {
	border-radius: var(--wp--custom--radius--button) !important;
}

/* ---------- Audit Fix: Button box-shadow reinforcement ----------
   Primary buttons with inline styles lose box-shadow because the global
   rule sets it, but inline background-color resets the cascade. Reinforce.   */
.wp-block-button:not(.is-style-outline) .wp-block-button__link {
	box-shadow: var(--wp--preset--shadow--button);
}

.is-style-outline .wp-block-button__link {
	box-shadow: none;
}

/* ---------- Audit Fix: Full-width column gap ----------
   The "Für wen" red/white split and hero 50/50 columns need 0 gap.          */
.wp-block-columns.alignfull {
	gap: 0 !important;
}

/* (Removed stale gradient hack — overlay column now uses its own bg via has-background rule below) */

/* ---------- Section Primitives ---------- */

.hitop-section {
	padding-block: var(--wp--preset--spacing--section);
}

.is-style-section-soft {
	background-color: var(--wp--preset--color--light-grey);
}

.is-style-section-accent {
	background-color: var(--wp--preset--color--brand-primary);
	color: var(--wp--preset--color--white);
}

.is-style-section-accent .wp-block-heading,
.is-style-section-accent .wp-block-paragraph {
	color: var(--wp--preset--color--white);
}

.is-style-section-dark {
	background-color: var(--wp--preset--color--dark-anthrazit);
	color: var(--wp--preset--color--white);
}

.is-style-section-dark .wp-block-heading {
	color: var(--wp--preset--color--white);
}

/* ---------- Button Variants (Figma: 2px border, no color-invert on hover) ---------- */

.is-style-secondary .wp-block-button__link {
	background-color: var(--wp--preset--color--white);
	color: var(--wp--preset--color--brand-primary);
	border: 2px solid var(--wp--preset--color--brand-primary);
	box-shadow: var(--wp--preset--shadow--button);
}

.is-style-secondary .wp-block-button__link:hover {
	border-color: var(--wp--preset--color--brand-hover);
	color: var(--wp--preset--color--brand-hover);
}

.is-style-tertiary .wp-block-button__link {
	background-color: var(--wp--preset--color--white);
	color: var(--wp--preset--color--dark-anthrazit);
	border: 2px solid var(--wp--preset--color--dark-anthrazit);
	font-weight: 400;
	box-shadow: none;
}

.is-style-tertiary .wp-block-button__link:hover {
	border-color: var(--wp--preset--color--brand-primary);
	color: var(--wp--preset--color--brand-primary);
}

/* ---------- Hero ---------- */

.hitop-hero {
	position: relative;
	width: 100%;
	min-height: 739px;
	overflow: hidden;
}

.hitop-hero__bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hitop-hero__overlay {
	position: absolute;
	top: 0;
	right: 0;
	width: 53%;
	height: 100%;
	background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.95) 30%);
}

.hitop-hero__content {
	position: relative;
	z-index: 2;
	max-width: 660px;
	margin-left: auto;
	padding: 120px 200px 120px 0;
}

.hitop-hero__headline {
	font-size: clamp(2rem, 1rem + 3vw, 3.125rem);
	font-weight: 300;
	line-height: 1.15;
	letter-spacing: -0.03em;
	color: var(--wp--preset--color--dark-anthrazit);
	margin: 0 0 1.5rem;
}

.hitop-hero__text {
	font-size: 1.25rem;
	font-weight: 400;
	line-height: 1.5;
	color: var(--wp--preset--color--dark-anthrazit);
	margin: 0 0 2rem;
}

/* ---------- Eyebrow ---------- */

.hitop-eyebrow {
	font-size: 1.125rem;
	font-weight: 900;
	letter-spacing: -0.03em;
	color: var(--wp--preset--color--light-anthrazit);
	text-transform: uppercase;
	margin-block-end: var(--wp--preset--spacing--2xs);
}

/* ---------- Section Heading (orange H2 Black) ---------- */

.hitop-section-heading {
	font-weight: 900;
	letter-spacing: -0.03em;
	color: var(--wp--preset--color--brand-primary);
}

/* ---------- Stat Number (Slider Facts) ---------- */

.hitop-stat {
	font-size: clamp(3rem, 8vw, 6.25rem);
	font-weight: 900;
	line-height: 1;
	letter-spacing: -0.03em;
	color: var(--wp--preset--color--brand-primary);
}

/* Slider-Facts stat numbers: ensure line-height matches Figma (100px at 100px fs) */
.hitop-slider-facts h3,
.hitop-slider-facts .wp-block-heading {
	line-height: 1;
}

/* Slider-Facts BEM classes (Webshop content uses these instead of inline styles) */
.hitop-fact-slide__stat {
	font-size: clamp(3rem, 8vw, 6.25rem);
	font-weight: 900;
	line-height: 1;
	letter-spacing: -0.03em;
	color: #EA4335;
}
.hitop-fact-slide__eyebrow {
	color: var(--wp--preset--color--light-anthrazit);
	font-size: 1.125rem;
	font-weight: 900;
	letter-spacing: -0.03em;
	text-transform: uppercase;
	margin-block-end: var(--wp--preset--spacing--sm);
}
.hitop-fact-slide__text {
	font-size: 22px;
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: -0.03em;
	color: var(--wp--preset--color--heading-text);
}

/* ---------- Card title line-height (Figma: 1.5) ---------- */
.has-shadow .wp-block-heading,
.has-shadow h3 {
	line-height: 1.5;
}

/* ---------- Spacer: remove default WP margins ---------- */
.wp-block-spacer {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

/* ---------- Price (Jetzt Testen) ---------- */

.hitop-price {
	font-size: clamp(2rem, 4vw, 3.125rem);
	font-weight: 900;
	line-height: 1;
	letter-spacing: -0.03em;
	color: var(--wp--preset--color--brand-primary);
}

/* ---------- Cards ---------- */

.hitop-card {
	border-radius: var(--wp--custom--radius--card);
	overflow: hidden;
	box-shadow: var(--wp--preset--shadow--card);
}

.hitop-card--bordered {
	border: 1px solid var(--wp--preset--color--grey);
	box-shadow: none;
}

/* ---------- Media Split (2-column: image + text) ---------- */

.hitop-media-split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0;
	align-items: stretch;
}

.hitop-media-split--reverse {
	direction: rtl;
}

.hitop-media-split--reverse > * {
	direction: ltr;
}

.hitop-media-split__media {
	overflow: hidden;
}

.hitop-media-split__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hitop-media-split__content {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: var(--wp--preset--spacing--2xl);
}

/* ---------- Full-width background with overlay ---------- */

.hitop-bg-overlay {
	position: relative;
	overflow: hidden;
}

.hitop-bg-overlay__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hitop-bg-overlay__panel {
	position: relative;
	z-index: 2;
	background: rgba(255, 255, 255, 0.5);
}

/* ---------- Trust / Badge Grid ---------- */

.hitop-trust-grid {
	display: flex;
	justify-content: center;
	gap: var(--wp--preset--spacing--xl);
	flex-wrap: wrap;
}

.hitop-trust-badge {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 300px;
	height: 150px;
	background: var(--wp--preset--color--white);
	border-radius: var(--wp--custom--radius--card);
	padding: var(--wp--preset--spacing--md);
}

/* ---------- USP Icons Row ---------- */

.hitop-usp-row {
	display: flex;
	gap: var(--wp--preset--spacing--xl);
	flex-wrap: wrap;
}

.hitop-usp-item {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	font-size: 1.125rem;
	font-weight: 900;
	color: var(--wp--preset--color--dark-anthrazit);
}

/* ---------- Feature / USP Checklist ---------- */

.hitop-checklist {
	list-style: none;
	padding: 0;
	margin: 0;
}

.hitop-checklist li {
	padding-inline-start: 1.75rem;
	position: relative;
	line-height: 1.5;
	padding-block: 0.25rem;
}

.hitop-checklist li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.35em;
	width: 1.125rem;
	height: 1.125rem;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23D83F27'%3E%3Cpath d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z'/%3E%3C/svg%3E");
	background-size: contain;
	background-repeat: no-repeat;
}

/* ---------- Product Gallery (Jetzt Testen) ---------- */

.hitop-product-main-img img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 20px;
}

.hitop-product-thumbs {
	margin-top: 0;
}

.hitop-product-thumbs .wp-block-image {
	margin: 0;
	flex-shrink: 0;
}

.hitop-product-thumbs .wp-block-image img {
	width: 75px;
	height: 75px;
	object-fit: cover;
	border-radius: 10px;
	cursor: pointer;
	border: 2px solid transparent;
	transition: border-color 0.2s;
}

.hitop-product-thumbs .wp-block-image img:hover {
	border-color: var(--wp--preset--color--brand-primary);
}

/* ---------- Feature Tags (orange text row) ---------- */

.hitop-feature-tags {
	display: flex;
	gap: var(--wp--preset--spacing--lg);
	flex-wrap: wrap;
}

.hitop-feature-tags span {
	font-size: 1rem;
	font-weight: 500;
	color: var(--wp--preset--color--brand-primary);
}

/* ---------- Dot Navigation ---------- */

.hitop-dots {
	display: flex;
	gap: 0.5625rem;
	justify-content: center;
}

.hitop-dot {
	width: 1.25rem;
	height: 1.25rem;
	border-radius: 50%;
	border: 1px solid var(--wp--preset--color--grey);
	background: var(--wp--preset--color--light-grey);
}

.hitop-dot--active {
	background: var(--wp--preset--color--brand-primary);
	border-color: var(--wp--preset--color--brand-primary);
}

/* ---------- Tab Pills ---------- */

.hitop-tab-pills {
	display: flex;
	gap: 0.5rem;
	flex-wrap: wrap;
}

.hitop-tab-pill {
	display: inline-flex;
	align-items: center;
	padding: 0.5rem 1.25rem;
	border: 1px solid var(--wp--preset--color--dark-anthrazit);
	border-radius: var(--wp--custom--radius--button);
	font-size: 1rem;
	font-weight: 400;
	color: var(--wp--preset--color--dark-anthrazit);
	background: var(--wp--preset--color--white);
	cursor: pointer;
}

.hitop-tab-pill--active {
	border-color: var(--wp--preset--color--brand-primary);
	color: var(--wp--preset--color--brand-primary);
	font-weight: 700;
}

/* ---------- Info Bar ---------- */

.hitop-info-bar {
	border-bottom: 1px solid var(--wp--preset--color--grey);
}

/* ---------- Info Bar (oberhalb Header) ---------- */

.hitop-info-bar {
	background: var(--wp--preset--color--grey);
	padding: 17px 30px;
	font-family: var(--wp--preset--font-family--inter, Inter, sans-serif);
}

.hitop-info-bar__text {
	margin: 0;
	color: #1e1e1e;
	font-size: 12px;
	font-weight: 400;
	line-height: 1.5;
	text-align: left;
}

/* Hide WooCommerce auto-injected customer account icon */
.hitop-header .wp-block-woocommerce-customer-account,
.hitop-header__inner > .wp-block-woocommerce-customer-account {
	display: none !important;
}

/* ---------- Header/InfoBar/Hero Spacing Reset ---------- */

/* Eliminate default margins between info bar, header, and first content section */
.hitop-info-bar,
.hitop-header,
body > .wp-site-blocks > header,
body > .wp-site-blocks > main {
	margin: 0 !important;
}

main.wp-block-group {
	margin-top: 0 !important;
}

main.wp-block-group > .wp-block-cover:first-child,
main.wp-block-group > *:first-child {
	margin-top: 0 !important;
}

/* Hero cover: stretch the inner-container to fill full cover height
   (cover is display:flex with align-items:center by default — override) */
.wp-block-cover[style*="padding-top:0"] {
	align-items: stretch !important;
	justify-content: stretch !important;
}

.wp-block-cover[style*="padding-top:0"] .wp-block-cover__inner-container {
	padding: 0 !important;
	width: 100%;
	align-self: stretch;
	display: flex;
	flex-direction: column;
}

.wp-block-cover[style*="padding-top:0"] .wp-block-cover__inner-container > .wp-block-columns {
	flex: 1 1 auto;
}

/* Columns + overlay column fill full cover height */
.wp-block-cover .wp-block-columns {
	height: 100%;
	min-height: 100%;
	align-items: stretch;
	margin: 0 !important;
}

.wp-block-cover .wp-block-columns > .wp-block-column {
	align-self: stretch;
}

.wp-block-cover .wp-block-column.has-background {
	background-color: rgba(255, 255, 255, 0.7) !important;
}

/* ---------- Header & Mega-Menu (wp:navigation based) ---------- */

/* Sticky on the wp:template-part wrapper (the .hitop-header element shares
   its height with the wrapper, so the wrapper must be sticky for the header
   to remain visible during scroll). */
header.wp-block-template-part:has(.hitop-header) {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--wp--preset--color--white);
}

.hitop-header {
	background: var(--wp--preset--color--white);
	border-bottom: 1px solid var(--wp--preset--color--grey);
	box-shadow: var(--wp--preset--shadow--header);
	font-family: var(--wp--preset--font-family--inter, Inter, sans-serif);
	transition: box-shadow 0.2s ease, padding 0.2s ease;
}

.hitop-header.is-scrolled {
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

/* Compact mode when scrolled: smaller padding for sleeker look */
.hitop-header.is-scrolled .hitop-header__inner {
	padding-top: 14px;
	padding-bottom: 14px;
}

.hitop-header__inner {
	max-width: 1664px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	gap: 24px;
	padding: 22px 32px;
}

.hitop-header__logo {
	flex-shrink: 0;
	margin: 0;
}

.hitop-header__logo a,
.hitop-header__logo img {
	display: block;
}

.hitop-header__logo img {
	width: 184px;
	height: 38px;
}

/* Native wp:navigation styled as Mega-Menu */
.hitop-nav.wp-block-navigation {
	flex: 1;
	font-family: inherit;
}

.hitop-nav.wp-block-navigation > .wp-block-navigation__container {
	display: flex;
	justify-content: center;
	gap: 28px;
	margin: 0;
}

.hitop-nav.wp-block-navigation .wp-block-navigation-item {
	position: relative;
}

.hitop-nav.wp-block-navigation .wp-block-navigation-item__content {
	color: var(--wp--preset--color--dark-anthrazit);
	font-size: 16px;
	font-weight: 400;
	letter-spacing: -0.03em;
	padding: 10px 0;
	border-bottom: 2px solid transparent;
	transition: border-color 0.15s, color 0.15s;
}

.hitop-nav.wp-block-navigation .wp-block-navigation-item:hover > .wp-block-navigation-item__content,
.hitop-nav.wp-block-navigation .wp-block-navigation-item__content:focus {
	border-bottom-color: var(--wp--preset--color--brand-primary);
}

/* Submenu container — vertikales Dropdown mit Category-Headings inline */
/* ---------- Mega-Menu (Figma 1114:3899 / 1207:938) ----------
   2-column layout, 920px wide, white card with shadow,
   positioned below the navigation, aligned to the trigger.
   Items fliessen sequenziell in Spalte 1, bis ein .hitop-megamenu-heading
   (nicht das erste) per break-before:column in Spalte 2 umbricht.
   column-fill:auto ist zwingend — balance verteilt Items sonst symmetrisch.  */
/* Mega-Menu Submenu-Container (Figma 1212:829 Rectangle 107 = 921x416).
   Die Items werden vom PHP-Filter (inc/megamenu.php) in echte
   `.hitop-megamenu-col`-Wrapper gruppiert — pro `.hitop-megamenu-heading`
   eine Spalte. Dadurch wird das Layout hier trivial: Flex-Row mit
   Spalten-Trennlinie. Keine magic numbers, keine height-Hacks, keine
   `:has()`-Selektoren. */
.hitop-nav.wp-block-navigation .wp-block-navigation__submenu-container {
	/* !important needed on width/max-width/display: Gutenberg Core
	   `.wp-block-navigation .has-child [aria-expanded="true"] ~ .wp-block-navigation__submenu-container`
	   has specificity (0,4,0) > ours (0,3,0) and sets width:auto when expanded. */
	display: block !important;
	width: 921px !important;
	max-width: 921px !important;
	min-width: 0;
	height: auto;
	overflow: visible;
	background: var(--wp--preset--color--white);
	border-radius: 0 0 30px 30px;
	box-shadow: 0 24px 48px rgba(0, 0, 0, 0.12);
	padding: 40px 60px !important; /* needed: Core submenu-container has padding via block-supports */
	border: 0;
	left: 50%;
	top: 60px;
	transform: translateX(-50%);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	/* Close-Delay 120ms: gibt Zeit die Luecke zwischen Nav-Item und Submenu
	   zu ueberqueren ohne dass das Menu schliesst. Open ist sofort. */
	transition: opacity 0.18s 0.12s, visibility 0.18s 0.12s;
	column-count: auto;
	column-gap: normal;
	column-rule: none;
}

/* Hover-Bridge: Unsichtbares ::before Pseudo-Element ueberbrueckt die 60px
   Luecke zwischen Nav-Item-Bottom und Submenu-Top, sodass der Mauszeiger
   beim Runterfahren nicht "zwischen die Stuehle" faellt. Wirkt nur wenn
   das Parent-Submenu-Item gehovered ist. */
.hitop-nav.wp-block-navigation .wp-block-navigation-submenu:hover::before,
.hitop-nav.wp-block-navigation .wp-block-navigation-submenu:focus-within::before {
	content: "";
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	height: 62px;
	pointer-events: auto;
	z-index: 1;
}

/* Container MIT Columns (nach PHP-Filter): Flex-Row */
.hitop-nav.wp-block-navigation .wp-block-navigation__submenu-container.hitop-megamenu-columnized {
	display: flex !important; /* needed: overrides parent display:block !important above (same rule family) */
	flex-direction: row;
	gap: 60px;
	align-items: flex-start;
}

/* Column-Wrapper (vom PHP-Filter erzeugt) */
.hitop-megamenu-col {
	flex: 1 1 0;
	min-width: 0;
	list-style: none;
	padding: 0;
	margin: 0;
}

/* Produkt-Submenu (Figma 3149:2134): Spalte 1 (PRODUKT) schmal mit 1 Item,
   Spalte 2 (ZUBEHÖR) breit mit 7 Items, davon 2 lange Titel die in 50/50-
   Aufteilung umbrechen würden. Verhältnis 1:2 nach Figma (Col1≈305px, Col2≈599px
   innerhalb des 921px breiten Frames). */
.hitop-megamenu-trigger--produkt > .wp-block-navigation__submenu-container.hitop-megamenu-columnized > .hitop-megamenu-col--1 {
	flex: 1 1 0;
}
.hitop-megamenu-trigger--produkt > .wp-block-navigation__submenu-container.hitop-megamenu-columnized > .hitop-megamenu-col--2 {
	flex: 2 1 0;
}

/* Trennlinie zwischen Columns */
.hitop-megamenu-col + .hitop-megamenu-col {
	border-left: 1px solid var(--wp--preset--color--grey);
	padding-left: 60px;
	margin-left: 0;
}

/* Inner UL in jeder Column */
.hitop-megamenu-col__list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

/* Items innerhalb Column */
.hitop-megamenu-col__list > .wp-block-navigation-item {
	display: block;
	width: 100%;
	break-inside: auto;
}

.hitop-nav.wp-block-navigation .wp-block-navigation-submenu:hover > .wp-block-navigation__submenu-container,
.hitop-nav.wp-block-navigation .wp-block-navigation-submenu:focus-within > .wp-block-navigation__submenu-container {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	/* Open: kein Delay, damit das Menu responsiv aufklappt */
	transition: opacity 0.18s, visibility 0.18s;
}

/* Submenu items: clean default styling */
.hitop-nav.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item {
	position: static;
	display: block;
}

.hitop-nav.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	display: block;
	color: var(--wp--preset--color--dark-anthrazit);
	font-size: 16px;
	font-weight: 300;
	line-height: 1.4;
	padding: 6px 0;
	border: 0;
	white-space: normal;
}

.hitop-nav.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--brand-primary);
}

/* Category headings inside mega-menu (non-clickable, bold uppercase grey).
   Rein visuelles Column-Label — kein Hover, kein Border, kein Cursor-Pointer,
   href bleibt "#" im Markup, wird aber per pointer-events:none entschaerft. */
.hitop-nav.wp-block-navigation .wp-block-navigation-item.hitop-megamenu-heading > .wp-block-navigation-item__content {
	color: var(--wp--preset--color--light-anthrazit) !important;
	font-size: 12px !important;
	font-weight: 900 !important;
	letter-spacing: 0.08em !important;
	text-transform: uppercase !important;
	pointer-events: none !important;
	cursor: default !important;
	padding: 12px 0 8px !important;
	border-bottom: 0 !important;
}

.hitop-nav.wp-block-navigation .wp-block-navigation-item.hitop-megamenu-heading:first-child > .wp-block-navigation-item__content {
	padding-top: 0 !important;
}

/* Kein Hover-Unterstrich/Farbwechsel auf Headings, trotz Container-Hover */
.hitop-nav.wp-block-navigation .wp-block-navigation-item.hitop-megamenu-heading > .wp-block-navigation-item__content:hover,
.hitop-nav.wp-block-navigation .wp-block-navigation-item.hitop-megamenu-heading:hover > .wp-block-navigation-item__content,
.hitop-nav.wp-block-navigation .wp-block-navigation-item.hitop-megamenu-heading > .wp-block-navigation-item__content:focus {
	color: var(--wp--preset--color--light-anthrazit) !important;
	border-bottom-color: transparent !important;
}

/* "more" link style */
.hitop-nav.wp-block-navigation .wp-block-navigation-item.hitop-megamenu-more > .wp-block-navigation-item__content {
	font-weight: 700;
	color: var(--wp--preset--color--brand-primary);
	margin-top: 6px;
}

/* Submenu chevron icon — Figma zeigt KEINEN chevron, daher ausblenden */
.hitop-nav.wp-block-navigation .wp-block-navigation__submenu-icon {
	display: none !important;
}

/* Header right-side actions */
.hitop-header__actions {
	display: flex;
	align-items: center;
	gap: 20px;
	flex-shrink: 0;
	margin: 0 !important;
}

.hitop-header__actions .wp-block-buttons {
	margin: 0;
}

.hitop-header__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--wp--preset--color--dark-anthrazit);
	text-decoration: none;
	transition: opacity 0.2s;
}

.hitop-header__icon:hover {
	opacity: 0.6;
}

.hitop-header__icon svg {
	display: block;
}

.hitop-header__cta .wp-block-button__link {
	font-size: 16px !important;
	font-weight: 700 !important;
	letter-spacing: -0.03em !important;
	text-transform: uppercase !important;
	white-space: nowrap;
	transition: background 0.2s;
}

.hitop-header__cta .wp-block-button__link:hover {
	background: var(--wp--preset--color--brand-primary) !important;
}

/* ---------- Mobile / Burger overlay ----------
   Hinweis: Die eigentlichen Overlay-Styles (Item-Hoehe 70px, full-width,
   Submenu inline, etc.) stehen weiter unten in der 2026-04-19-Section —
   sie greifen unabhaengig von der Media-Query ueber .is-menu-open.
   Hier nur noch: Header-Padding + Hamburger-Icon-Groesse. */
@media (max-width: 1024px) {
	.hitop-header__inner {
		padding: 14px 16px;
	}

	.hitop-nav.wp-block-navigation .wp-block-navigation__responsive-container-open svg,
	.hitop-nav.wp-block-navigation .wp-block-navigation__responsive-container-close svg {
		width: 32px;
		height: 32px;
		fill: var(--wp--preset--color--dark-anthrazit);
	}
}

/* ---------- Footer ---------- */

.hitop-footer {
	background: var(--wp--preset--color--dark-anthrazit);
	color: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--inter, Inter, sans-serif);
}

/* Footer-Template-Part direkt an Newsletter (kein WP-Block-Gap 24px).
 * Der margin-block-start kommt vom WP-Layout-System auf den direkten
 * Kindern von .wp-site-blocks, nicht von .hitop-footer selbst. */
.wp-site-blocks > footer.wp-block-template-part {
	margin-block-start: 0;
}

.hitop-footer__inner {
	max-width: 1664px;
	margin: 0 auto;
	padding: 80px 32px 40px;
}

.hitop-footer__top {
	margin-bottom: 40px;
}

.hitop-footer__brand {
	display: block;
	width: 194px;
	height: auto;
}

.hitop-footer__cols {
	display: grid !important; /* override WP wp-block-columns-is-layout-flex */
	grid-template-columns: 1.6fr 1fr 1fr 2.2fr 0.6fr;
	gap: 60px;
	padding-bottom: 60px;
	align-items: start; /* Spalten oben ausrichten, statt stretch */
}

.hitop-footer__col {
	min-width: 0;
}

.hitop-footer__address {
	font-style: normal;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.5;
	color: var(--wp--preset--color--white);
	margin: 0 0 24px;
}

.hitop-footer__contact {
	display: flex;
	align-items: center;
	gap: 12px;
	color: var(--wp--preset--color--white);
	font-size: 18px;
	font-weight: 700;
	text-decoration: none;
	margin-bottom: 6px;
}

/* Phone/Mail-Icons via ::before — inline SVG-Data-URI (anthrazit-strich-style aus Figma).
 * Avoids Pattern-Markup-Aenderung — wirkt automatisch auf alle Pages. */
.hitop-footer__contact--phone::before,
.hitop-footer__contact--mail::before {
	content: "";
	flex-shrink: 0;
	width: 22px;
	height: 22px;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

.hitop-footer__contact--phone::before {
	background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23ffffff%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M22%2016.92v3a2%202%200%200%201-2.18%202%2019.79%2019.79%200%200%201-8.63-3.07%2019.5%2019.5%200%200%201-6-6%2019.79%2019.79%200%200%201-3.07-8.67A2%202%200%200%201%204.11%202h3a2%202%200%200%201%202%201.72%2012.84%2012.84%200%200%200%20.7%202.81%202%202%200%200%201-.45%202.11L8.09%209.91a16%2016%200%200%200%206%206l1.27-1.27a2%202%200%200%201%202.11-.45%2012.84%2012.84%200%200%200%202.81.7A2%202%200%200%201%2022%2016.92z%22%2F%3E%3C%2Fsvg%3E");
}

.hitop-footer__contact--mail::before {
	background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23ffffff%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%204h16c1.1%200%202%20.9%202%202v12c0%201.1-.9%202-2%202H4c-1.1%200-2-.9-2-2V6c0-1.1.9-2%202-2z%22%2F%3E%3Cpolyline%20points%3D%2222%2C6%2012%2C13%202%2C6%22%2F%3E%3C%2Fsvg%3E");
}

.hitop-footer__contact:hover {
	color: var(--wp--preset--color--brand-primary);
}

/* Inline-Link innerhalb Kontakt-Row: erbt Farbe vom Parent-Paragraph */
.hitop-footer__contact a {
	color: inherit;
	text-decoration: none;
}

.hitop-footer__contact a:hover {
	color: var(--wp--preset--color--brand-primary);
}

.hitop-footer__contact svg {
	flex-shrink: 0;
	color: var(--wp--preset--color--white);
}

.hitop-footer__nav {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.hitop-footer__nav a {
	color: var(--wp--preset--color--white);
	font-size: 18px;
	font-weight: 300;
	text-decoration: none;
	line-height: 1.4;
}

.hitop-footer__nav a:hover {
	color: var(--wp--preset--color--brand-primary);
}

/* wp:navigation block inside footer: clean up default nav styles */
.hitop-footer__nav.wp-block-navigation {
	font-family: inherit;
}

.hitop-footer__nav.wp-block-navigation .wp-block-navigation__container {
	gap: 12px;
}

.hitop-footer__nav.wp-block-navigation .wp-block-navigation-item__content {
	color: var(--wp--preset--color--white);
	font-size: 18px;
	font-weight: 300;
	line-height: 1.4;
	padding: 0;
}

.hitop-footer__nav.wp-block-navigation .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--brand-primary);
}

.hitop-footer__nav--legal.wp-block-navigation .wp-block-navigation__container {
	gap: 8px;
}

.hitop-footer__nav--legal.wp-block-navigation .wp-block-navigation-item__content {
	font-size: 16px;
}

/* Social icons: weiß auf transparent (Figma) */
.hitop-footer__social.wp-block-social-links .wp-social-link {
	background: transparent !important;
	color: var(--wp--preset--color--white) !important;
}

.hitop-footer__social.wp-block-social-links .wp-social-link svg {
	fill: var(--wp--preset--color--white) !important;
	width: 32px;
	height: 32px;
}

.hitop-footer__social.wp-block-social-links .wp-social-link:hover svg {
	fill: var(--wp--preset--color--brand-primary) !important;
}

/* Separator: volle Breite */
.hitop-footer__separator.wp-block-separator {
	max-width: none;
	width: 100%;
	border: 0;
	height: 1px;
	background-color: rgba(255, 255, 255, 0.15) !important;
}

.hitop-footer__nav--legal {
	gap: 8px;
}

.hitop-footer__nav--legal a {
	font-size: 16px;
}

.hitop-footer__col--legal {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-self: start;
}

.hitop-footer__social {
	display: flex;
	gap: 16px;
	margin-bottom: 24px;
	align-self: flex-end;
}

.hitop-footer__social a {
	display: inline-flex;
	color: var(--wp--preset--color--white);
	transition: color 0.2s;
}

.hitop-footer__social a:hover {
	color: var(--wp--preset--color--brand-primary);
}

.hitop-footer__bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding-top: 24px;
	border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.hitop-footer__legal {
	margin: 0;
	color: var(--wp--preset--color--white);
	font-size: 14px;
	font-weight: 300;
	line-height: 1.5;
}

.hitop-footer__legal a {
	color: var(--wp--preset--color--white);
	text-decoration: none;
}

.hitop-footer__legal a:hover {
	color: var(--wp--preset--color--brand-primary);
}

.hitop-footer__logo {
	display: block;
	width: 147px;
	height: auto;
	flex-shrink: 0;
}

@media (max-width: 1024px) {
	.hitop-footer__cols {
		grid-template-columns: 1fr 1fr;
		gap: 40px;
	}

	.hitop-footer__col--legal {
		grid-column: 1 / -1;
	}

	.hitop-footer__social {
		align-self: flex-start;
	}
}

/* Footer Mobile — alle Spalten stacked, wie Live */
@media (max-width: 781px) {
	.hitop-footer__inner { padding: 40px 20px 24px; }
	.hitop-footer__cols {
		grid-template-columns: 1fr !important;
		gap: 32px;
	}
	.hitop-footer__col--legal { grid-column: auto; }
	.hitop-footer__social { align-self: flex-start; }
	.hitop-footer__bottom {
		flex-direction: column;
		align-items: flex-start;
		gap: 16px;
	}
	.hitop-footer__logo { margin-top: 12px; }
	.hitop-footer__nav.wp-block-navigation .wp-block-navigation-item__content {
		font-size: 16px;
	}
}

@media (max-width: 600px) {
	.hitop-footer__inner {
		padding: 60px 20px 32px;
	}

	/* Figma-Mobile-Layout: Address volle Breite oben, dann 2 Nav-Spalten side-by-side
	 * (links: Pages-Nav x2 untereinander, rechts: Legal-Liste), Social-Icons unten links.
	 * Markup hat 5 Columns: contact / nav / nav / legal / social — wir grid-positionieren. */
	.hitop-footer__cols {
		grid-template-columns: 1fr 1fr !important;
		gap: 24px 32px;
		padding-bottom: 40px;
	}

	.hitop-footer__col--contact {
		grid-column: 1 / -1;
		grid-row: 1;
	}

	/* Pages-Navs stapeln sich in linker Spalte (Row 2+3) */
	.hitop-footer__col:nth-of-type(2) {
		grid-column: 1;
		grid-row: 2;
	}

	.hitop-footer__col:nth-of-type(3) {
		grid-column: 1;
		grid-row: 3;
	}

	/* Legal-Liste rechts, ueber 2 Rows hinweg */
	.hitop-footer__col--legal {
		grid-column: 2;
		grid-row: 2 / span 2;
	}

	/* Social-Icons unten, volle Breite */
	.hitop-footer__col--social {
		grid-column: 1 / -1;
		grid-row: 4;
		align-self: flex-start;
	}

	.hitop-footer__social.wp-block-social-links {
		justify-content: flex-start !important;
	}

	/* gbo-Logo auf Mobile groesser (Figma ~120px) — vorher zu klein */
	.hitop-footer__brand,
	.hitop-footer__brand img {
		width: 120px !important;
		height: auto !important;
	}

	/* Listen-Spacing kompakter (Figma) */
	.hitop-footer__nav.wp-block-navigation .wp-block-navigation__container {
		gap: 8px;
	}

	.hitop-footer__nav.wp-block-navigation .wp-block-navigation-item__content {
		font-size: 16px;
	}

	.hitop-footer__nav--legal.wp-block-navigation .wp-block-navigation-item__content {
		font-size: 14px;
	}

	.hitop-footer__address,
	.hitop-footer__contact {
		font-size: 16px;
	}

	.hitop-footer__bottom {
		flex-direction: column-reverse;
		align-items: flex-start;
		gap: 16px;
	}

	.hitop-footer__legal {
		font-size: 12px;
	}
}

/* ---------- Testimonial Cards ---------- */

.hitop-testimonial-card {
	border-radius: var(--wp--custom--radius--card);
	overflow: hidden;
	background: var(--wp--preset--color--white);
	box-shadow: var(--wp--preset--shadow--card);
}

.hitop-testimonial-card img {
	width: 100%;
	height: 188px;
	object-fit: cover;
}

.hitop-testimonial-card__content {
	padding: var(--wp--preset--spacing--lg);
}

/* Testimonial Story-Card mit Badge-Overlay (Finding 1, 2026-04-20) */
.hitop-testimonial-card__image {
	position: relative;
	margin: 0 !important;
}
.hitop-testimonial-card__image img {
	border-top-left-radius: 30px;
	border-top-right-radius: 30px;
	width: 100%;
	height: 240px;
	object-fit: cover;
	display: block;
}
.hitop-testimonial-card__badge {
	position: absolute;
	top: 16px;
	right: 16px;
	background: #D83F27;
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	padding: 6px 14px;
	border-radius: 4px;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	z-index: 2;
	font-family: inherit;
	line-height: 1.2;
	white-space: nowrap;
}

/* ---------- Team Cards ---------- */

.hitop-team-card {
	border-radius: var(--wp--custom--radius--card);
	overflow: hidden;
	background: var(--wp--preset--color--white);
	box-shadow: var(--wp--preset--shadow--card);
	text-align: center;
}

.hitop-team-card img {
	width: 100%;
	height: 239px;
	object-fit: cover;
}

.hitop-team-card__info {
	padding: var(--wp--preset--spacing--lg);
}

/* ---------- Responsive ---------- */

@media (max-width: 1024px) {

	/* Header inner: tighter padding on mobile */
	.hitop-header__inner {
		padding: 14px 16px;
		gap: 12px;
	}

	/* Hide the desktop mega-menu links list — wp:navigation will swap to
	   its own responsive container (hamburger button + overlay).
	   Fix 2026-05-12: Tablet-Breakpoint (782-1024px). WP's overlayMenu="mobile"
	   only triggers below 782px (WP-Default). Wir wollen Burger-Overlay-Logik
	   bis 1024px — also den ganzen responsive_container ausblenden solange
	   er nicht .is-menu-open ist. Vorherige Regel mit `>` matchte nicht weil
	   die UL 2 Ebenen tief liegt (responsive_container > content > ul). */
	.hitop-nav .wp-block-navigation__responsive-container:not(.is-menu-open) {
		display: none !important;
	}
	.hitop-nav.wp-block-navigation > .wp-block-navigation__container {
		display: none !important;
	}

	/* Show the wp:navigation hamburger opener button on mobile */
	.hitop-nav .wp-block-navigation__responsive-container-open {
		display: flex !important;
		align-items: center;
		justify-content: center;
		background: transparent;
		border: 0;
		padding: 0;
		min-width: 44px;
		min-height: 44px;
		color: var(--wp--preset--color--dark-anthrazit);
		cursor: pointer;
	}

	.hitop-nav .wp-block-navigation__responsive-container-open svg {
		width: 28px;
		height: 28px;
		fill: currentColor;
	}

	/* Close button needs a 44x44 touch target too */
	.hitop-nav .wp-block-navigation__responsive-container-close {
		min-width: 44px;
		min-height: 44px;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.hitop-nav .wp-block-navigation__responsive-container-close svg {
		width: 28px;
		height: 28px;
	}

	/* Reorder header elements: logo left, hamburger left of logo or after,
	   actions on the right (search + cart, hide CTA button) */
	.hitop-nav {
		order: 0;
		flex: 0 0 auto;
		margin-left: auto;
		margin-right: 0;
	}

	.hitop-header__actions {
		flex-shrink: 0;
		gap: 12px;
	}

	/* Hide desktop search icon + Webshop CTA on mobile to save space */
	.hitop-header__icon--search,
	.hitop-header__cta-wrap {
		display: none !important;
	}

	/* Mobile Mega-Menu Overlay (wp:navigation responsive container) */
	.hitop-nav .wp-block-navigation__responsive-container.is-menu-open {
		background: var(--wp--preset--color--white);
		padding: 80px 24px 40px;
	}

	.hitop-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container,
	.hitop-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container.items-justified-center {
		display: flex !important;
		flex-direction: column !important;
		gap: 0 !important;
		align-items: stretch !important;
		justify-content: flex-start !important;
		text-align: left !important;
	}

	/* Top-level items: full width, left-aligned text */
	.hitop-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item {
		display: block !important;
		width: 100% !important;
		text-align: left !important;
		justify-content: flex-start !important;
		align-self: stretch !important;
	}

	.hitop-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
		justify-content: flex-start !important;
		text-align: left !important;
		width: 100%;
	}

	.hitop-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
		border-bottom: 1px solid var(--wp--preset--color--grey);
	}

	.hitop-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
		padding: 16px 0;
		font-size: 18px;
		font-weight: 700;
		color: var(--wp--preset--color--dark-anthrazit);
	}

	/* In mobile overlay: submenus expand inline (not popup) */
	.hitop-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
		position: static !important;
		transform: none !important;
		width: 100% !important;
		max-width: 100% !important;
		opacity: 1 !important;
		visibility: visible !important;
		pointer-events: auto !important;
		box-shadow: none !important;
		border-radius: 0 !important;
		padding: 0 0 16px 16px !important;
		column-count: 1 !important;
	}

	.hitop-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item {
		border-bottom: 0;
	}

	.hitop-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
		padding: 8px 0;
		font-size: 16px;
		font-weight: 400;
	}

	.hitop-nav .wp-block-navigation__responsive-container.is-menu-open .hitop-megamenu-heading > .wp-block-navigation-item__content {
		font-size: 12px;
		font-weight: 900;
		text-transform: uppercase;
		color: var(--wp--preset--color--light-anthrazit);
		padding: 12px 0 4px;
	}
}

@media (max-width: 781px) {

	/* 200px spacers → 100px on mobile */
	.wp-block-spacer[style*="height:200px"],
	.wp-block-spacer[style*="height: 200px"] {
		height: 100px !important;
	}

	/* --- 1. Spacer: 100px → 50px on mobile --- */
	.wp-block-spacer[style*="height:100px"],
	.wp-block-spacer[style*="height: 100px"] {
		height: 50px !important;
	}

	/* --- 2. Section side-padding: 40px → 16px on mobile --- */
	.wp-block-group[style*="padding-right:40px"],
	.wp-block-group[style*="padding-right: 40px"] {
		padding-left: 16px !important;
		padding-right: 16px !important;
	}

	/* --- 2b. Fix alignfull children inside reduced-padding parents ---
	   WP sets margin-left/right: -40px to break out of 40px padding,
	   but we reduced to 16px so the breakout overshoots by 24px. Fix: */
	.wp-block-group[style*="padding-right:40px"] > .alignfull,
	.wp-block-group[style*="padding-right: 40px"] > .alignfull {
		margin-left: -16px !important;
		margin-right: -16px !important;
		max-width: calc(100% + 32px) !important;
		width: calc(100% + 32px) !important;
	}

	/* --- 3. Full-width coloured sections: reduce vertical padding --- */
	.wp-block-group.alignfull[style*="padding-top:60px"] {
		padding-top: 40px !important;
		padding-bottom: 40px !important;
	}

	/* --- 4. Hero Cover: reduce min-height + fix overlay direction --- */
	.wp-block-cover.alignfull[style*="min-height:739px"] {
		min-height: 600px !important;
	}

	/* Hero-Bild auf Mobile: WP-Cover rendert das Bild auf Mobile als regulaeres
	 * relative-Image (nicht absolute-Background wie auf Desktop). Default-Hoehe
	 * ist zu klein (~320px) — Figma zeigt das Paar in voller Hoehe als oberes
	 * 50% des Heros. Wir setzen min-height auf 380px + object-position 25%
	 * (Mittelteil + Wiese sichtbar, Figma 1012:240). */
	.hitop-hero-split-card .wp-block-cover__image-background,
	.hitop-hero-split-card img[data-object-fit="cover"] {
		object-position: center 25% !important;
		min-height: 380px !important;
		height: 380px !important;
	}

	/* Hero content column: tighter padding on mobile */
	.wp-block-cover.alignfull .wp-block-column.has-background {
		padding: 24px 16px !important;
	}

	/* --- 5. hitop-hero pattern (if used) --- */
	.hitop-hero {
		min-height: 500px;
	}

	.hitop-hero__overlay {
		width: 100%;
		background: linear-gradient(to top, rgba(255,255,255,0.95) 60%, rgba(255,255,255,0) 100%);
	}

	.hitop-hero__content {
		padding: 0 var(--wp--preset--spacing--gutter) var(--wp--preset--spacing--xl);
		margin-left: 0;
		margin-top: auto;
		max-width: 100%;
	}

	/* --- 6. Columns: ensure stacking + gap fix --- */
	.wp-block-columns.alignfull {
		gap: 0 !important;
	}

	/* --- 7. Media split → stack --- */
	.hitop-media-split {
		grid-template-columns: 1fr;
	}

	.hitop-media-split--reverse {
		direction: ltr;
	}

	.hitop-media-split__content {
		padding: var(--wp--preset--spacing--lg) 16px;
	}

	/* --- 8. Cards: mobile radius --- */
	.hitop-card {
		border-radius: var(--wp--custom--radius--card-mobile, 1.25rem);
	}

	/* --- 9. Trust badges: 2-up grid on mobile --- */
	.hitop-trust-badge {
		width: calc(50% - var(--wp--preset--spacing--md));
	}

	/* Trust badge row inside light-grey section */
	.wp-block-group[style*="#F5F5F5"] .wp-block-columns,
	.wp-block-group[style*="#f5f5f5"] .wp-block-columns {
		gap: 16px !important;
	}

	/* --- 10. Carousel slides: 85% width on TABLET (600-781px) for peek effect.
	 * Echtes Mobile (max-width 600px) bekommt 100% Fullwidth — siehe separater
	 * Block weiter unten "Mobile (Figma 393px): 1-Card-Fullwidth". */
	.hitop-slider:not(.hitop-slider-facts) .hitop-slider__slide {
		flex: 0 0 85% !important;
	}

	/* --- 11. Slider Facts: content adjustments --- */
	.hitop-slider-facts .hitop-fact-slide__content {
		padding: 32px 16px;
		min-height: 350px;
	}

	.hitop-slider-facts .hitop-fact-slide {
		min-height: 350px;
	}

	.hitop-slider-facts .hitop-fact-slide__overlay {
		width: 100%;
		background: rgba(255, 255, 255, 0.75);
	}

	/* Stat number smaller on mobile */
	.hitop-stat {
		font-size: clamp(2.5rem, 12vw, 4rem);
	}

	/* --- 12. Hero headline: ensure it fits on small screens --- */
	.hitop-hero__headline {
		font-size: clamp(1.75rem, 6vw, 2.5rem);
	}

	/* --- 13. Second cover block (further down page): reduce min-height --- */
	.wp-block-cover.alignfull[style*="min-height:500px"] {
		min-height: 400px !important;
	}

	/* --- 14. Card images: shorter on mobile --- */
	.has-shadow .wp-block-image img {
		height: 200px;
	}

	.hitop-slider .has-shadow .wp-block-image img {
		height: 220px;
	}

	/* --- 15. Buttons: ensure they don't overflow --- */
	.wp-block-buttons {
		flex-wrap: wrap;
	}

	.wp-block-button__link {
		white-space: normal;
		text-align: center;
	}

	/* --- 16. Price module: stack columns + center --- */
	.hitop-price {
		font-size: clamp(1.75rem, 8vw, 2.5rem);
	}

	/* --- 17. USP icons row: wrap + smaller gap --- */
	.hitop-usp-row {
		gap: var(--wp--preset--spacing--md);
	}

	/* --- 18. Footer: tighter padding --- */
	.hitop-footer {
		padding-left: 16px !important;
		padding-right: 16px !important;
	}

	/* --- 19. H2 headings: Figma Mobile = 26px (1.625rem) --- */
	.wp-block-heading:where(h2) {
		font-size: 1.625rem !important; /* 26px per Figma Mobile-Token */
		line-height: 1.3 !important;    /* 33.8px per Figma */
	}

	/* --- 20. Eyebrow text: slightly smaller on mobile --- */
	.hitop-eyebrow {
		font-size: 0.9375rem;
	}

	/* --- 21. Trust Row: 1-up vertikal auf Mobile (Figma 1104:1676) ---
	   Figma Frame 440x710, BG #F5F5F5, 4 Items a 300x150 gestapelt.
	   Padding top 15, bottom 50, Side-Padding laesst gutter-Preset greifen.
	   Items vertikal mittig, Gap = 15px (Median der Figma-Gaps 25/15/5).
	   Desktop-Inline-Padding (84/83) muss per !important ueberschrieben werden. */
	.hitop-trust-row {
		padding-top: 15px !important;
		padding-bottom: 50px !important;
	}

	.hitop-trust-row__items {
		flex-direction: column !important;
		align-items: center;
		gap: 15px !important;
	}

	.hitop-trust-row__item {
		width: 300px;
		max-width: 100%;
		margin: 0 !important;
	}

	.hitop-trust-row__item img {
		width: 300px;
		max-width: 100%;
		height: auto;
		display: block;
	}

	.hitop-trust-row__item--badges {
		flex-direction: row !important;
		gap: 12px !important;
		width: auto !important;
	}

	.hitop-trust-row__badge img {
		height: 80px !important;
		width: auto !important;
		max-width: none !important;
	}
}

/* ------------------------------------------------------------------
 * Trust Row Desktop (Figma 1104:1584, 1728x317 #F5F5F5, Frame 1410x150)
 * Figma-Struktur exakt: 4 Slots a 300x150, space-between auf 1410 Frame.
 * 4 x 300 = 1200 + 3 Gaps x 70 = 210 = 1410 Gesamtbreite.
 * In jedem Slot ist das Siegel zentriert in seiner nativen Figma-Groesse.
 * HTML width/height-Attribute des img liefern die Intrinsic-Size — CSS
 * laesst den Browser damit arbeiten (keine max-height/max-width-Regeln
 * die die Aspect-Ratio kippen koennen).
 * ---------------------------------------------------------------- */
.hitop-trust-row__items {
	display: flex !important;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: center;
	gap: 0 !important;
	min-height: 150px;
}

.hitop-trust-row__item {
	flex: 0 0 300px;
	width: 300px;
	height: 150px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 !important;
}

.hitop-trust-row__item img {
	width: auto;
	height: auto;
	display: block;
}

/* Figma-Display-Groessen pro Slot via Klasse (nicht inline-style) — so bleibt
   core/image-Save-Validator happy, Sizing ueber Theme-CSS: */
.hitop-trust-row__slot--google img    { width: 300px; height: auto; }
.hitop-trust-row__slot--foerderer img { height: 148px; width: auto; }
.hitop-trust-row__slot--made img      { width: 189px; height: auto; }

/* Badge-Slot (Item 4): 3 kleine Logos horizontal zentriert, Gap 16px */
.hitop-trust-row__item--badges {
	gap: 16px;
}

.hitop-trust-row__badge {
	margin: 0 !important;
	flex: 0 0 auto;
}

.hitop-trust-row__badge img {
	width: auto;
	height: auto;
	display: block;
}

.hitop-trust-row__badge--it-recht img { height:  86px; width: auto; }
.hitop-trust-row__badge--activate img { height:  86px; width: auto; }
.hitop-trust-row__badge--tuev img     { height: 105px; width: auto; }

/* ==========================================================================
   WooCommerce Classic Cart + Multistep Checkout (Germanized Pro)
   Brand styling using design tokens — no hardcoded colors.
   ========================================================================== */

:root {
	--hitop-wc-radius-input: 8px;
	--hitop-wc-radius-card: 30px;
	--hitop-wc-radius-button: 34px;
	--hitop-wc-input-padding: 14px 18px;
	--hitop-wc-input-fs: 16px;
	--hitop-wc-label-color: var(--wp--preset--color--dark-anthrazit);
	--hitop-wc-label-fs: 14px;
	--hitop-wc-label-fw: 500;
	--hitop-wc-border: var(--wp--preset--color--grey);
	--hitop-wc-section-gap: 32px;
}

/* ---------- Page wrappers ---------- */
.woocommerce-cart .entry-content,
.woocommerce-checkout .entry-content {
	max-width: 1328px;
	margin-inline: auto;
	padding-inline: var(--wp--preset--spacing--gutter);
	padding-block: var(--wp--preset--spacing--xl);
}

.woocommerce-cart .entry-title,
.woocommerce-checkout .entry-title {
	font-size: clamp(2rem, 4vw, 3.125rem);
	font-weight: 300;
	color: var(--wp--preset--color--dark-anthrazit);
	letter-spacing: -0.03em;
	margin-bottom: var(--wp--preset--spacing--lg);
}

/* ---------- Form inputs (Cart, Checkout, Coupon) ---------- */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce-page form .form-row input.input-text,
.woocommerce-page form .form-row textarea,
.woocommerce-page form .form-row select,
.woocommerce input[type="text"],
.woocommerce input[type="email"],
.woocommerce input[type="tel"],
.woocommerce input[type="number"],
.woocommerce input[type="password"],
.woocommerce textarea,
.woocommerce select,
.select2-container--default .select2-selection--single {
	width: 100%;
	padding: var(--hitop-wc-input-padding);
	font-size: var(--hitop-wc-input-fs);
	font-family: var(--wp--preset--font-family--inter, Inter, sans-serif);
	color: var(--wp--preset--color--dark-anthrazit);
	background: var(--wp--preset--color--white);
	border: 1px solid var(--hitop-wc-border);
	border-radius: var(--hitop-wc-radius-input);
	box-shadow: none;
	transition: border-color 0.15s;
	min-height: 48px;
	box-sizing: border-box;
}

.select2-container--default .select2-selection--single {
	display: flex;
	align-items: center;
}

.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus,
.woocommerce input:focus,
.woocommerce textarea:focus,
.woocommerce select:focus {
	border-color: var(--wp--preset--color--brand-primary);
	outline: none;
}

.woocommerce form .form-row label,
.woocommerce-page form .form-row label,
.woocommerce form .form-row > label:first-child {
	display: block;
	font-size: var(--hitop-wc-label-fs);
	font-weight: var(--hitop-wc-label-fw);
	color: var(--hitop-wc-label-color);
	margin-bottom: 6px;
}

.woocommerce form .form-row .required {
	color: var(--wp--preset--color--brand-primary);
	text-decoration: none;
	font-weight: 700;
}

/* ---------- Buttons (Cart actions, Place Order) ---------- */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce-page a.button,
.woocommerce-page button.button,
.woocommerce-page input.button {
	font-family: var(--wp--preset--font-family--inter, Inter, sans-serif);
	font-size: 16px;
	font-weight: 700;
	letter-spacing: -0.03em;
	text-transform: uppercase;
	background: var(--wp--preset--color--brand-primary);
	color: var(--wp--preset--color--white);
	border: 0;
	border-radius: var(--hitop-wc-radius-button);
	padding: 18px 30px;
	min-height: 60px;
	cursor: pointer;
	transition: background-color 0.15s;
	box-shadow: var(--wp--preset--shadow--button, none);
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover {
	background: var(--wp--preset--color--brand-hover);
	color: var(--wp--preset--color--white);
}

/* "Alt" / primary call-to-action button (Place Order, Proceed to Checkout) */
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #place_order,
.woocommerce .wc-proceed-to-checkout a.checkout-button {
	background: var(--wp--preset--color--brand-primary);
	color: var(--wp--preset--color--white);
	font-size: 18px;
	padding: 22px 40px;
	min-height: 68px;
	width: auto;
}

/* Secondary action (Update Cart) — outlined */
.woocommerce button[name="update_cart"],
.woocommerce input[name="update_cart"] {
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--brand-primary);
	border: 2px solid var(--wp--preset--color--brand-primary);
}

.woocommerce button[name="update_cart"]:hover,
.woocommerce input[name="update_cart"]:hover {
	background: var(--wp--preset--color--brand-primary);
	color: var(--wp--preset--color--white);
}

/* Disabled state */
.woocommerce button.button:disabled,
.woocommerce button.button.disabled,
.woocommerce input.button:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

/* ---------- Cart table ---------- */
.woocommerce table.shop_table {
	width: 100%;
	border: 1px solid var(--hitop-wc-border);
	border-radius: var(--hitop-wc-radius-card);
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
	background: var(--wp--preset--color--white);
}

.woocommerce table.shop_table th {
	font-size: 14px;
	font-weight: 700;
	text-transform: uppercase;
	color: var(--wp--preset--color--dark-anthrazit);
	letter-spacing: 0.02em;
	padding: 20px 24px;
	border-bottom: 1px solid var(--hitop-wc-border);
	background: var(--wp--preset--color--light-grey);
}

.woocommerce table.shop_table td {
	padding: 24px;
	border-bottom: 1px solid var(--hitop-wc-border);
	vertical-align: middle;
	color: var(--wp--preset--color--dark-anthrazit);
	font-size: 16px;
}

.woocommerce table.shop_table tr:last-child td {
	border-bottom: 0;
}

.woocommerce table.shop_table .product-thumbnail img {
	width: 80px;
	height: auto;
	border-radius: 12px;
}

.woocommerce table.shop_table .product-name a {
	color: var(--wp--preset--color--dark-anthrazit);
	font-weight: 700;
	text-decoration: none;
}

.woocommerce table.shop_table .product-name a:hover {
	color: var(--wp--preset--color--brand-primary);
}

.woocommerce table.shop_table .product-remove a.remove {
	color: var(--wp--preset--color--brand-primary) !important;
	font-size: 22px;
	font-weight: 900;
	width: 32px;
	height: 32px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: transparent;
}

.woocommerce table.shop_table .product-remove a.remove:hover {
	background: var(--wp--preset--color--brand-light, rgba(216, 63, 39, 0.1));
}

.woocommerce table.shop_table .quantity input.qty {
	width: 72px;
	min-height: 48px;
	text-align: center;
	padding: 0;
}

/* Coupon row — Layout: Coupon (Input + Anwenden) + Update-Button alle nebeneinander */
.woocommerce table.shop_table td.actions {
	background: var(--wp--preset--color--light-grey);
	padding: 24px;
	display: flex !important;
	gap: 12px;
	align-items: center;
	justify-content: flex-start;
	flex-wrap: wrap;
}

.woocommerce table.shop_table td.actions .coupon {
	display: flex;
	gap: 12px;
	align-items: center;
	flex-wrap: nowrap;
	flex: 0 1 auto;
}

.woocommerce table.shop_table td.actions .coupon input.input-text {
	width: 220px;
	min-height: 56px;
	flex: 0 0 220px;
}

.woocommerce table.shop_table td.actions > button[name="update_cart"] {
	flex: 0 0 auto;
}

/* Auf Desktop wo Cart-Tabelle breit genug ist: Update-Button rechts ausrichten */
@media (min-width: 1200px) {
	body.woocommerce-cart .woocommerce table.shop_table td.actions > button[name="update_cart"] {
		margin-left: auto;
	}
}

/* ---------- Cart Summary box ---------- */
.woocommerce .cart-collaterals,
.woocommerce-page .cart-collaterals {
	margin-top: var(--wp--preset--spacing--xl);
}

.woocommerce .cart-collaterals .cart_totals {
	float: none;
	width: 100%;
	max-width: 480px;
	margin-inline: auto;
}

.woocommerce .cart-collaterals .cart_totals h2 {
	font-size: 22px;
	font-weight: 900;
	color: var(--wp--preset--color--dark-anthrazit);
	letter-spacing: -0.03em;
	margin-bottom: 16px;
	text-align: center;
}

.woocommerce .cart-collaterals .cart_totals table.shop_table {
	border-radius: var(--hitop-wc-radius-card);
}

.woocommerce .cart-collaterals .wc-proceed-to-checkout {
	margin-top: var(--wp--preset--spacing--lg);
	padding: 0;
}

.woocommerce .cart-collaterals .wc-proceed-to-checkout a.checkout-button {
	display: block;
	text-align: center;
	width: 100%;
}

/* ---------- Multistep Checkout: Step Indicator (Germanized Pro) ---------- */
/* .woocommerce-multistep-checkout ist eine BODY-Klasse (Germanized Pro),
   NICHT ein Container-div. max-width hier wuerde den BODY constrainen! */

/* Germanized Pro Pfeil-Chevrons KOMPLETT ENTFERNT.
   Step-Navigation wird weiter unten via 1:1 Live-CSS gestylt
   (PNG Icons statt clip-path Pfeile). */

/* ---------- Checkout columns (Multi-Step Wizard) ----------
   2026-05-11: form.checkout ist display:block (single-column), weil der
   Multi-Step-Wizard immer nur EINEN step-wrapper sichtbar zeigt
   (address/payment/order). 2-Spalten-Layout findet INNERHALB des Step-1-
   Wrappers statt (#customer_details.col2-set, weiter unten). */
/* 2026-05-11: form.checkout single-column block — Multi-Step-Wizard rotiert
   nur EINEN step-wrapper sichtbar (address, payment, order). Layout-Spalten
   sind INNERHALB der Step-Wrapper, nicht auf form-Ebene. */
.woocommerce form.checkout {
	display: block;
}

/* 2026-05-11: Step 1 (#customer_details) als 2-Spalten-Grid INNERHALB des
   Step-Wrappers: col-1 (Billing) links, col-2 (Bestellhinweise + "Wie haben
   Sie uns gefunden") rechts. Bei Step-Wechsel automatisch hidden via
   #step-wrapper-address[style="display:none"] — kein extra JS noetig.
   Annotation mp18jnk5: Bestellhinweise muessen in die rechte Spalte.

   Specificity-Hinweis: Germanized's `checkout-multistep-plain-styles.css`
   targeted `#customer_details.col2-set` mit `display:block`. Wir matchen
   mit gleicher ID-Specificity + !important. */
@media (min-width: 992px) {
	.woocommerce form.checkout #customer_details.col2-set {
		display: grid !important;
		grid-template-columns: 1fr 1fr;
		gap: var(--wp--preset--spacing--xl);
		align-items: start;
	}
	.woocommerce form.checkout #customer_details.col2-set > .col-1 {
		grid-column: 1 / 2 !important;
		grid-row: 1 !important;
		float: none !important;
		width: 100% !important;
		margin: 0 !important;
	}
	.woocommerce form.checkout #customer_details.col2-set > .col-2 {
		grid-column: 2 / 3 !important;
		grid-row: 1 !important;
		float: none !important;
		width: 100% !important;
		margin: 0 !important;
	}
	.woocommerce form.checkout #order_review_heading,
	.woocommerce form.checkout #order_review {
		width: 100%;
		float: none;
		margin: 0;
	}
}

/* 2026-05-11: Order-Review symmetrisches Padding fixen.
   2026-05-11 spaeter (mp1dasg1): Padding wandert auf #order-verify
   (Heading raus aus grauer Box). Original-Annotation mp18nutt war
   asymmetrisches Padding 22.24px 22.24px 22.24px 0px auf der Card —
   gleiches Fix gilt jetzt fuer #order-verify. */
.woocommerce #order_review #order-verify {
	padding: var(--wp--preset--spacing--lg) !important;
}

.woocommerce form.checkout .col-1,
.woocommerce form.checkout .col-2 {
	float: none;
	width: 100%;
}

.woocommerce form.checkout h3 {
	font-size: 22px;
	font-weight: 900;
	color: var(--wp--preset--color--dark-anthrazit);
	letter-spacing: -0.03em;
	margin-block: 0 var(--wp--preset--spacing--md);
}

.woocommerce form.checkout #order_review_heading {
	font-size: 22px;
	font-weight: 900;
	color: var(--wp--preset--color--dark-anthrazit);
	letter-spacing: -0.03em;
	margin: 0 0 var(--wp--preset--spacing--md) 0;
}

/* Order review box.
   2026-05-11 (Annotation mp1dasg1): Background+Radius+Padding NICHT mehr
   auf #order_review (umschliesst auch Step-Heading + Back-Button), sondern
   auf das innere #order-verify (Tabelle + Rechnungsdetails + Checkboxen +
   Jetzt-Kaufen). Heading "Uebersicht Ihrer Bestellung" steht jetzt
   ausserhalb der grauen Box. */
.woocommerce #order_review {
	background: transparent;
	border-radius: 0;
	padding: 0;
}
.woocommerce #order_review #order-verify {
	background: var(--wp--preset--color--light-grey);
	border-radius: var(--hitop-wc-radius-card);
	padding: var(--wp--preset--spacing--lg);
	margin-top: 24px;
}

.woocommerce #order_review table.shop_table {
	background: transparent;
	border: 0;
	border-radius: 0;
}

.woocommerce #order_review table.shop_table th,
.woocommerce #order_review table.shop_table td {
	background: transparent;
	padding: 12px 0;
	border-bottom: 1px solid var(--hitop-wc-border);
}

/* Payment methods */
.woocommerce #payment {
	background: transparent !important;
	border-radius: 0;
}

.woocommerce #payment ul.payment_methods {
	background: transparent;
	border: 0;
	padding: 0;
	margin: 0;
	list-style: none;
}

.woocommerce #payment ul.payment_methods li {
	background: var(--wp--preset--color--white);
	border: 1px solid var(--hitop-wc-border);
	border-radius: 12px;
	padding: 16px 20px;
	margin-bottom: 12px;
}

.woocommerce #payment ul.payment_methods li label {
	display: inline;
	font-weight: 700;
	color: var(--wp--preset--color--dark-anthrazit);
	margin: 0 0 0 8px;
}

.woocommerce #payment ul.payment_methods .payment_box {
	background: var(--wp--preset--color--light-grey);
	border-radius: 8px;
	padding: 16px;
	margin-top: 12px;
	font-size: 14px;
	color: var(--wp--preset--color--dark-anthrazit);
}

.woocommerce #payment ul.payment_methods .payment_box::before {
	display: none;
}

.woocommerce #payment .form-row.place-order {
	padding: 0;
	margin-top: var(--wp--preset--spacing--lg);
}

/* Notice / message banners */
.woocommerce-info,
.woocommerce-message,
.woocommerce-error {
	background: var(--wp--preset--color--light-grey);
	border-left: 4px solid var(--wp--preset--color--brand-primary);
	border-radius: 8px;
	padding: 16px 20px;
	color: var(--wp--preset--color--dark-anthrazit);
	font-size: 16px;
}

.woocommerce-info::before,
.woocommerce-message::before {
	color: var(--wp--preset--color--brand-primary);
}

.woocommerce-info a,
.woocommerce-message a,
.woocommerce-error a {
	color: var(--wp--preset--color--brand-primary);
	font-weight: 700;
}

/* 2026-05-11: "Warenkorb anzeigen"-Button in add-to-cart-Notice als Pill */
.woocommerce-message .button.wc-forward,
.woocommerce-info .button.wc-forward {
	background: var(--wp--preset--color--brand-primary);
	color: #fff !important;
	border: none;
	border-radius: 34px;
	padding: 10px 24px;
	font-weight: 700;
	letter-spacing: -0.01em;
	text-transform: none;
	text-decoration: none;
	display: inline-block;
	transition: background 0.2s;
}

.woocommerce-message .button.wc-forward:hover,
.woocommerce-info .button.wc-forward:hover {
	background: var(--wp--preset--color--brand-hover);
	color: #fff !important;
}

/* Mobile checkout: stack columns */
@media (max-width: 900px) {
	.woocommerce form.checkout {
		grid-template-columns: 1fr;
	}

	.woocommerce form.checkout > .col2-set,
	.woocommerce form.checkout #order_review_heading,
	.woocommerce form.checkout #order_review {
		grid-column: 1 / 2;
	}

	.woocommerce-multistep-checkout ul.nav-wizard li a,
	.woocommerce-multistep-checkout ul.nav-wizard li > span {
		padding: 14px 16px;
		font-size: 13px;
	}
}

/* ==========================================================================
   WooCommerce Single Product Page (Classic legacy template via wp:woocommerce/legacy-template)
   ========================================================================== */

/* Breadcrumbs */
.hitop-product-breadcrumbs.wc-block-components-breadcrumbs,
.hitop-single-product-main .wc-block-components-breadcrumbs {
	font-size: 14px;
	color: var(--wp--preset--color--light-anthrazit);
	margin-bottom: var(--wp--preset--spacing--md);
}

.hitop-product-breadcrumbs a {
	color: var(--wp--preset--color--light-anthrazit);
	text-decoration: none;
}

.hitop-product-breadcrumbs a:hover {
	color: var(--wp--preset--color--brand-primary);
}

/* Product container layout: gallery left + summary right */
.hitop-single-product-main .product.type-product {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: var(--wp--preset--spacing--2xl);
	align-items: start;
}

.hitop-single-product-main .product.type-product .woocommerce-product-gallery {
	width: 100% !important;
	margin: 0 !important;
	float: none;
}

.hitop-single-product-main .product.type-product .summary {
	width: 100% !important;
	margin: 0 !important;
	float: none;
}

/* Product Gallery */
.hitop-single-product-main .woocommerce-product-gallery .woocommerce-product-gallery__wrapper {
	border-radius: var(--hitop-wc-radius-card);
	overflow: hidden;
	background: var(--wp--preset--color--light-grey);
}

.hitop-single-product-main .woocommerce-product-gallery__image img {
	border-radius: var(--hitop-wc-radius-card);
	width: 100%;
	height: auto;
	object-fit: cover;
}

.hitop-single-product-main .flex-control-thumbs {
	display: flex !important;
	gap: 12px;
	margin: 16px 0 0 0 !important;
	padding: 0 !important;
	list-style: none;
}

.hitop-single-product-main .flex-control-thumbs li {
	width: 75px !important;
	height: 75px !important;
	flex: 0 0 auto;
	margin: 0 !important;
}

.hitop-single-product-main .flex-control-thumbs li img {
	width: 75px !important;
	height: 75px !important;
	object-fit: cover;
	border-radius: 12px;
	border: 2px solid transparent;
	cursor: pointer;
	transition: border-color 0.15s;
	opacity: 1;
}

.hitop-single-product-main .flex-control-thumbs li img:hover,
.hitop-single-product-main .flex-control-thumbs li img.flex-active {
	border-color: var(--wp--preset--color--brand-primary);
}

/* Product Title */
.hitop-single-product-main h1.product_title {
	font-size: clamp(2rem, 4vw, 3.125rem);
	font-weight: 300;
	color: var(--wp--preset--color--dark-anthrazit);
	letter-spacing: -0.03em;
	line-height: 1.1;
	margin: 0 0 var(--wp--preset--spacing--md) 0;
}

/* Price */
.hitop-single-product-main .summary p.price,
.hitop-single-product-main .summary span.price {
	color: var(--wp--preset--color--brand-primary);
	font-size: clamp(2rem, 4vw, 3.125rem);
	font-weight: 900;
	letter-spacing: -0.03em;
	line-height: 1;
	margin: var(--wp--preset--spacing--md) 0;
	display: block;
}

.hitop-single-product-main .summary .woocommerce-Price-amount {
	color: var(--wp--preset--color--brand-primary);
	font-weight: 900;
}

.hitop-single-product-main .summary del {
	color: var(--wp--preset--color--light-anthrazit);
	font-weight: 300;
	font-size: 0.6em;
	margin-right: 12px;
}

.hitop-single-product-main .summary ins {
	background: transparent;
	text-decoration: none;
}

/* Germanized price labels */
.hitop-single-product-main .summary .price_label,
.hitop-single-product-main .summary .wc-gzd-additional-info,
.hitop-single-product-main .summary .delivery-time-info,
.hitop-single-product-main .summary .tax-info,
.hitop-single-product-main .summary .shipping-costs-info,
.hitop-single-product-main .summary .price_unit {
	display: block;
	font-size: 14px;
	font-weight: 400;
	color: var(--wp--preset--color--light-anthrazit);
	margin-top: 4px;
}

.hitop-single-product-main .summary .wc-gzd-additional-info a,
.hitop-single-product-main .summary .delivery-time-info a,
.hitop-single-product-main .summary .shipping-costs-info a {
	color: var(--wp--preset--color--brand-primary);
}

/* Short description */
.hitop-single-product-main .summary .woocommerce-product-details__short-description {
	font-size: 18px;
	font-weight: 300;
	line-height: 1.5;
	color: var(--wp--preset--color--dark-anthrazit);
	margin: var(--wp--preset--spacing--md) 0 var(--wp--preset--spacing--lg);
}

.hitop-single-product-main .summary .woocommerce-product-details__short-description p {
	margin-bottom: 12px;
}

/* Add to cart form */
.hitop-single-product-main .summary form.cart {
	display: flex;
	gap: 16px;
	align-items: center;
	flex-wrap: wrap;
	margin-block: var(--wp--preset--spacing--lg);
}

.hitop-single-product-main .summary form.cart .quantity {
	display: flex;
	align-items: center;
}

.hitop-single-product-main .summary form.cart input.qty {
	width: 80px;
	min-height: 60px;
	text-align: center;
	font-size: 18px;
	font-weight: 700;
	border: 1px solid var(--wp--preset--color--grey);
	border-radius: var(--hitop-wc-radius-input);
	padding: 0;
}

.hitop-single-product-main .summary form.cart .single_add_to_cart_button {
	flex: 1 1 auto;
	min-width: 220px;
}

/* Product Meta (SKU, categories) */
.hitop-single-product-main .summary .product_meta {
	font-size: 14px;
	color: var(--wp--preset--color--light-anthrazit);
	border-top: 1px solid var(--wp--preset--color--grey);
	padding-top: var(--wp--preset--spacing--md);
	margin-top: var(--wp--preset--spacing--lg);
}

.hitop-single-product-main .summary .product_meta .sku_wrapper,
.hitop-single-product-main .summary .product_meta .posted_in,
.hitop-single-product-main .summary .product_meta .tagged_as {
	display: block;
	margin-bottom: 6px;
}

.hitop-single-product-main .summary .product_meta .sku,
.hitop-single-product-main .summary .product_meta a {
	color: var(--wp--preset--color--dark-anthrazit);
	font-weight: 500;
}

.hitop-single-product-main .summary .product_meta a:hover {
	color: var(--wp--preset--color--brand-primary);
}

/* Product Tabs (Beschreibung, Zusätzliche Informationen) */
.hitop-product-details .wc-tabs-wrapper,
.woocommerce div.product .woocommerce-tabs {
	margin-top: 0;
}

.woocommerce div.product .woocommerce-tabs ul.tabs {
	display: flex;
	gap: 8px;
	padding: 0 0 0 0;
	margin: 0 0 var(--wp--preset--spacing--lg) 0;
	border: 0;
	list-style: none;
	border-bottom: 2px solid var(--wp--preset--color--grey);
}

.woocommerce div.product .woocommerce-tabs ul.tabs::before,
.woocommerce div.product .woocommerce-tabs ul.tabs::after {
	display: none;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li {
	background: transparent;
	border: 0;
	border-radius: 0;
	margin: 0;
	padding: 0;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after {
	display: none;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
	display: block;
	padding: 16px 24px;
	font-size: 16px;
	font-weight: 700;
	color: var(--wp--preset--color--light-anthrazit);
	text-decoration: none;
	border-bottom: 2px solid transparent;
	margin-bottom: -2px;
	transition: color 0.15s, border-color 0.15s;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover {
	color: var(--wp--preset--color--dark-anthrazit);
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
	color: var(--wp--preset--color--brand-primary);
	border-bottom-color: var(--wp--preset--color--brand-primary);
}

.woocommerce div.product .woocommerce-tabs .panel {
	font-size: 16px;
	line-height: 1.6;
	color: var(--wp--preset--color--dark-anthrazit);
	padding: 0;
}

.woocommerce div.product .woocommerce-tabs .panel h2 {
	font-size: 24px;
	font-weight: 900;
	color: var(--wp--preset--color--dark-anthrazit);
	margin-bottom: var(--wp--preset--spacing--md);
}

/* Related Products */
.hitop-related-products,
.woocommerce .related.products {
	margin-top: 0;
}

.woocommerce .related.products h2 {
	font-size: 32px;
	font-weight: 300;
	color: var(--wp--preset--color--dark-anthrazit);
	letter-spacing: -0.03em;
	margin-bottom: var(--wp--preset--spacing--lg);
}

.woocommerce .related.products ul.products {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 30px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.woocommerce .related.products ul.products li.product {
	width: 100%;
	margin: 0;
	background: var(--wp--preset--color--white);
	border-radius: var(--hitop-wc-radius-card);
	box-shadow: var(--wp--preset--shadow--card, 0 2px 12px rgba(0,0,0,0.08));
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

.woocommerce .related.products ul.products li.product a {
	text-decoration: none;
	color: inherit;
}

.woocommerce .related.products ul.products li.product img {
	width: 100%;
	height: auto;
	border-radius: 0;
	margin: 0;
	background: var(--wp--preset--color--light-grey);
}

.woocommerce .related.products ul.products li.product .woocommerce-loop-product__title {
	font-size: 16px;
	font-weight: 700;
	color: var(--wp--preset--color--dark-anthrazit);
	padding: 16px 20px 8px;
	margin: 0;
	line-height: 1.3;
}

.woocommerce .related.products ul.products li.product .price {
	display: block;
	color: var(--wp--preset--color--brand-primary);
	font-weight: 900;
	font-size: 20px;
	padding: 0 20px 16px;
}

.woocommerce .related.products ul.products li.product .button {
	margin: 0 20px 20px;
	font-size: 14px;
	min-height: 48px;
	padding: 12px 20px;
}

/* Mobile single product */
@media (max-width: 900px) {
	.hitop-single-product-main .product.type-product {
		grid-template-columns: 1fr;
		gap: var(--wp--preset--spacing--lg);
	}

	.woocommerce .related.products ul.products {
		grid-template-columns: repeat(2, 1fr);
		gap: 16px;
	}

	.woocommerce div.product .woocommerce-tabs ul.tabs {
		flex-wrap: wrap;
	}

	.woocommerce div.product .woocommerce-tabs ul.tabs li a {
		padding: 12px 16px;
		font-size: 14px;
	}
}

/* Single Product - Hero */
.wc-block-product-image-gallery { border-radius: var(--wp--custom--radius--card); overflow: hidden; }
.hitop-single-product__title { margin-bottom: 0.5rem !important; }
.hitop-single-product__price .woocommerce-Price-amount { font-size: inherit !important; }
.hitop-single-product__summary { margin-bottom: 1.5rem; color: var(--wp--preset--color--dark-anthrazit); }
.hitop-rental-terms-link { margin-top: 1rem; font-size: 0.875rem; }
.hitop-rental-terms-link a { color: var(--wp--preset--color--brand-primary); text-decoration: underline; }

/* =========================================================================
   Single-Product Gallery — Visuelle Konsistenz mit Homepage "Jetzt Testen"
   -------------------------------------------------------------------------
   WooCommerce-Default rendert FlexSlider (.woocommerce-product-gallery) mit
   landscape Haupt-Bild + Thumb-Nav (ol.flex-control-thumbs, columns-4 grid).
   Wir ueberschreiben auf square Main + horizontale 75x75 Thumbs (gap 12px,
   border-radius 10px, brand-Border aktiv) — Pendant zur Jetzt-Testen-Pattern
   auf der Startseite (.hitop-product-main-img + .hitop-product-thumbs).
   ========================================================================= */

body.single-product .hitop-single-product__hero .woocommerce-product-gallery {
	width: 100% !important;
	margin: 0 !important;
	float: none !important;
	max-width: 537px;
}

/* FlexSlider-Viewport: quadratisch */
body.single-product .hitop-single-product__hero .woocommerce-product-gallery .flex-viewport {
	aspect-ratio: 1 / 1 !important;
	height: auto !important;
	border-radius: 20px;
	overflow: hidden;
	background: var(--wp--preset--color--light-grey, var(--wp--preset--color--light-grey));
}

body.single-product .hitop-single-product__hero .woocommerce-product-gallery__wrapper {
	height: 100% !important;
}

body.single-product .hitop-single-product__hero .woocommerce-product-gallery__image,
body.single-product .hitop-single-product__hero .woocommerce-product-gallery__image.flex-active-slide {
	height: 100% !important;
}

body.single-product .hitop-single-product__hero .woocommerce-product-gallery__image > a {
	display: block;
	height: 100%;
}

body.single-product .hitop-single-product__hero .woocommerce-product-gallery__image img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	border-radius: 20px;
	display: block;
}

/* Zoom-Layer (falls aktiv) unsichtbar lassen */
body.single-product .hitop-single-product__hero .woocommerce-product-gallery__image img.zoomImg {
	opacity: 0 !important;
	border-radius: 20px;
}

/* Thumbnail-Navigation: horizontaler Flex-Strip statt 4-Spalten-Grid */
body.single-product .hitop-single-product__hero .flex-control-nav.flex-control-thumbs {
	display: flex !important;
	flex-wrap: wrap;
	gap: 12px;
	margin: 16px 0 0 0 !important;
	padding: 0 !important;
	list-style: none !important;
	justify-content: flex-start;
}

body.single-product .hitop-single-product__hero .flex-control-nav.flex-control-thumbs li {
	width: 75px !important;
	height: 75px !important;
	flex: 0 0 auto !important;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
	float: none !important;
}

body.single-product .hitop-single-product__hero .flex-control-nav.flex-control-thumbs li img {
	width: 75px !important;
	height: 75px !important;
	object-fit: cover !important;
	border-radius: 10px !important;
	border: 2px solid transparent !important;
	cursor: pointer;
	opacity: 1 !important;
	transition: border-color 0.15s ease, transform 0.15s ease;
	display: block;
}

body.single-product .hitop-single-product__hero .flex-control-nav.flex-control-thumbs li img:hover,
body.single-product .hitop-single-product__hero .flex-control-nav.flex-control-thumbs li img.flex-active {
	border-color: var(--wp--preset--color--brand-primary, var(--wp--preset--color--brand-primary)) !important;
	transform: scale(1.02);
}

/* Lupe-Trigger (Vollbild-Modal) rechts oben dezenter einfassen */
body.single-product .hitop-single-product__hero .woocommerce-product-gallery__trigger {
	top: 12px;
	right: 12px;
	width: 36px;
	height: 36px;
	background: var(--wp--preset--color--white);
	border-radius: 50%;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	z-index: 3;
	font-size: 0;
}
body.single-product .hitop-single-product__hero .woocommerce-product-gallery__trigger::before {
	content: "\f179";
	font-family: "WooCommerce";
	font-size: 16px;
	color: var(--wp--preset--color--dark-anthrazit);
}
body.single-product .hitop-single-product__hero .woocommerce-product-gallery__trigger img.emoji {
	display: none !important;
}

/* Single Product — Add-to-Cart Button: Brand-Orange Pill, proportional zur Gallery */
body.single-product .single_add_to_cart_button,
body.single-product .hitop-single-product__add-to-cart .single_add_to_cart_button,
body.single-product button.single_add_to_cart_button.wp-element-button {
	height: 80px !important;
	min-height: 80px !important;
	padding: 16px 40px !important;
	border-radius: 999px !important;
	background: var(--wp--preset--color--brand-primary, var(--wp--preset--color--brand-primary)) !important;
	background-image: none !important;
	color: var(--wp--preset--color--white) !important;
	font-family: var(--wp--preset--font-family--inter, 'Inter', sans-serif) !important;
	font-size: 16px !important;
	font-weight: 700 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.5px !important;
	border: none !important;
	box-shadow: 0 12px 24px rgba(216, 63, 39, 0.25) !important;
	transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease !important;
}
body.single-product .single_add_to_cart_button:hover,
body.single-product button.single_add_to_cart_button.wp-element-button:hover {
	background: var(--wp--preset--color--brand-hover) !important;
	box-shadow: 0 14px 28px rgba(171, 23, 0, 0.3) !important;
	transform: translateY(-1px);
}

/* Quantity-Input an Button-Hoehe angleichen */
body.single-product .hitop-single-product__add-to-cart form.cart,
body.single-product form.cart {
	display: flex;
	gap: 16px;
	align-items: center;
	flex-wrap: wrap;
}

body.single-product .hitop-single-product__add-to-cart .quantity input.qty,
body.single-product form.cart .quantity input.qty {
	width: 80px !important;
	height: 80px !important;
	min-height: 80px !important;
	text-align: center;
	font-size: 18px;
	font-weight: 700;
	border: 1px solid var(--wp--preset--color--grey, var(--wp--preset--color--grey)) !important;
	border-radius: 12px !important;
	padding: 0 !important;
	color: var(--wp--preset--color--dark-anthrazit);
}

body.single-product .hitop-single-product__add-to-cart .single_add_to_cart_button,
body.single-product form.cart .single_add_to_cart_button {
	flex: 1 1 auto;
	min-width: 240px;
}

/* Mobile: Gallery darf volle Breite nehmen, Button Stretch */
@media (max-width: 781px) {
	body.single-product .hitop-single-product__hero .woocommerce-product-gallery {
		max-width: 100%;
	}
	body.single-product .hitop-single-product__add-to-cart .single_add_to_cart_button,
	body.single-product form.cart .single_add_to_cart_button {
		width: 100%;
	}
}

/* Single Product — Quantity Input */
body.single-product .quantity .qty {
	width: 4.631em; text-align: center; padding: 1rem; height: 56px;
}

/* Single Product — Product Meta (SKU, Kategorien, Lieferzeit) */
body.single-product .product_meta { font-size: 0.875rem; color: var(--wp--preset--color--dark-anthrazit); margin-top: 1.5rem; }
body.single-product .product_meta .posted_in { display: block; }
body.single-product .sku_wrapper { color: var(--wp--preset--color--dark-anthrazit); font-size: 0.75rem; }

/* Single Product - Beschreibung */
.hitop-single-product__description-content { font-size: 16px; font-weight: 400; line-height: 1.7; color: var(--wp--preset--color--dark-anthrazit); }
.hitop-single-product__description-content img { max-width: 100%; height: auto; border-radius: var(--wp--custom--radius--card); }

/* Single Product — Cross-Sells Section */
.hitop-single-product__cross-sells-heading { margin-bottom: 1.5rem; }

/* Single Product - Mobile */
@media (max-width: 781px) {
	.hitop-single-product .wp-block-columns { flex-direction: column; }
	.hitop-single-product .wp-block-columns .wp-block-column { flex-basis: 100% !important; }
}

/* Referenten Cards (Figma 1128:4991) */
.hitop-referent-card {
	overflow: hidden;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}
.hitop-referent-card__photo img {
	width: 100%;
	height: 239px;
	object-fit: cover;
	object-position: center top; /* Fix 2026-05-12: Köpfe wurden bei mittiger Crop-Position abgeschnitten */
	display: block;
}
.hitop-referent-card__contact {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0 0 0.5rem;
	font-family: 'Inter', sans-serif;
	font-size: 16px;
	font-weight: 300;
	line-height: 1.5625;
	color: var(--wp--preset--color--dark-anthrazit);
}
.hitop-referent-card__contact:last-child { margin-bottom: 0; }
.hitop-referent-card__contact a {
	color: inherit;
	text-decoration: none;
}
.hitop-referent-card__contact a:hover,
.hitop-referent-card__contact a:focus-visible {
	color: var(--wp--preset--color--brand-primary);
	text-decoration: underline;
}
.hitop-referent-card__icon {
	flex-shrink: 0;
	width: 25px;
	height: 25px;
}

@media (max-width: 781px) {
	.hitop-referent-card__photo img { height: 200px; }
}

/* Sticky Call Button (global, alle Seiten) */
/* Figma Homepage 923:569 — 2 Floating Buttons rechts, vertikal gestapelt */
/* Figma 1121:7792 + 923:846: Sticky-Buttons kleben am rechten Viewport-Rand
   (right:0). Nur linke Ecken gerundet — rechte Kante schneidet visuell mit
   dem Viewport-Rand ab. */
.hitop-sticky-buttons {
	position: fixed;
	bottom: 1.5rem;
	right: 0;
	z-index: 9990;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 0.75rem;
	pointer-events: none;
	opacity: 1;
	transform: translateY(0);
	transition: opacity 0.25s ease, transform 0.25s ease;
}

/* IntersectionObserver in theme.js setzt diese Klasse, sobald Footer in
 * den Viewport scrollt. Sticky-CTA fade-out, damit Footer-Inhalte (Social-
 * Icons, Copyright) nicht verdeckt werden. Wirkt auf allen Viewports —
 * besonders kritisch auf Mobile. */
.hitop-sticky-buttons.is-near-footer {
	opacity: 0;
	transform: translateY(20px);
	pointer-events: none;
}

.hitop-sticky-buttons.is-near-footer > * {
	pointer-events: none;
}

.hitop-sticky-buttons > * {
	pointer-events: auto;
}

/* Oben: Phone-Button — Default grau (923:845), Hover rot ausgefahren (765:272) */
.hitop-sticky-phone {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	width: 107px;
	height: 57px;
	padding: 0 1rem;
	background: var(--wp--preset--color--grey);
	text-decoration: none;
	/* Figma 1121:7792 cornerRadii [28.5, 0, 0, 28.5] — nur linke Seite rund. */
	border-radius: 28.5px 0 0 28.5px;
	box-shadow: 0 4px 4px rgba(0, 0, 0, 0.15);
	overflow: hidden;
	transition: width 0.35s ease, background 0.3s ease, box-shadow 0.3s ease;
}

.hitop-sticky-phone__number {
	font-family: 'Inter', sans-serif;
	font-size: 1rem;
	font-weight: 600;
	color: var(--wp--preset--color--white);
	white-space: nowrap;
	opacity: 0;
	max-width: 0;
	overflow: hidden;
	transition: opacity 0.25s ease, max-width 0.35s ease;
}

.hitop-sticky-phone__icon {
	width: 24px;
	height: 24px;
	flex-shrink: 0;
	stroke: var(--wp--preset--color--heading-text);
	transition: stroke 0.3s ease;
}

.hitop-sticky-phone:hover,
.hitop-sticky-phone:focus-visible {
	width: 277px;
	background: var(--wp--preset--color--brand-primary);
	box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
}

.hitop-sticky-phone:hover .hitop-sticky-phone__number,
.hitop-sticky-phone:focus-visible .hitop-sticky-phone__number {
	opacity: 1;
	max-width: 200px;
}

.hitop-sticky-phone:hover .hitop-sticky-phone__icon,
.hitop-sticky-phone:focus-visible .hitop-sticky-phone__icon {
	stroke: var(--wp--preset--color--white);
}

/* Unten: Roter CTA (Figma 923:846 — 184x60, #D83F27, r:34) */
.hitop-sticky-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 184px;
	height: 60px;
	padding: 0 30px;
	background: var(--wp--preset--color--brand-primary);
	color: var(--wp--preset--color--white);
	font-family: 'Inter', sans-serif;
	font-size: 1rem;
	font-weight: 700;
	text-decoration: none;
	/* Figma 923:846 cornerRadii [34, 0, 0, 34] — nur linke Seite rund. */
	border-radius: 34px 0 0 34px;
	box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
	transition: background 0.2s ease, transform 0.2s ease;
}

.hitop-sticky-cta:hover,
.hitop-sticky-cta:focus-visible {
	background: var(--wp--preset--color--brand-hover);
	color: var(--wp--preset--color--white);
	transform: translateY(-2px);
}

@media (max-width: 781px) {
	.hitop-sticky-buttons {
		bottom: 1rem;
		/* Mobile: weiterhin am rechten Rand kleben (right:0). */
	}

	.hitop-sticky-phone {
		width: 56px;
		height: 56px;
		border-radius: 28px 0 0 28px;
	}

	.hitop-sticky-cta {
		min-width: auto;
		height: 50px;
		padding: 0 20px;
		font-size: 0.875rem;
		border-radius: 25px 0 0 25px;
	}
}

/* ==========================================================================
   WooCommerce Cart + Checkout Styling
   Adaptiert aus call/hitop/style.css — Shortcode-Selektoren
   ========================================================================== */

/* --- Cart Page Hero --- */
.hitop-cart-page__hero { text-align: left; }
.hitop-cart-page__title { margin-bottom: 0.75rem; color: var(--wp--preset--color--dark-anthrazit); }
.hitop-cart-page__subcopy { color: var(--wp--preset--color--dark-anthrazit); max-width: 65rem; }

/* --- WC Base --- */
body.woocommerce h1.entry-title,
.woocommerce-cart h1.entry-title,
.woocommerce-checkout h1.entry-title {
	font-size: 48px !important; font-weight: 700 !important; color: var(--wp--preset--color--heading-text) !important;
	text-align: center !important; letter-spacing: -0.96px !important;
	font-family: 'Inter', sans-serif !important; line-height: 1.2 !important;
	margin-bottom: 20px !important;
}
body.woocommerce h2, .woocommerce-cart h2, .woocommerce-checkout h2, .woocommerce-checkout h3 {
	font-size: 20px !important; font-weight: 500 !important; color: var(--wp--preset--color--heading-text) !important;
	font-family: 'Inter', sans-serif !important; line-height: 1.4 !important; margin-bottom: 20px !important;
}
body.woocommerce p { color: var(--wp--preset--color--dark-anthrazit); font-size: 14pt; }
@media (max-width: 781px) {
	body.woocommerce-cart h1.entry-title, .woocommerce-checkout h1.entry-title { font-size: 36px !important; }
}

/* --- Shop Table --- */
.woocommerce table * { border: transparent; }
.woocommerce table.shop_table {
	border: transparent !important; border-radius: 10px !important;
	background: #F8F8F8 !important; position: relative;
}
.woocommerce table.shop_table th { font-weight: 500 !important; }
.woocommerce table.shop_table td { border: transparent !important; border-top: 1px solid var(--wp--preset--color--grey) !important; }
.woocommerce-cart table.cart .product-thumbnail { min-width: 80px; padding: 0 20px 0 0 !important; }
.woocommerce-cart table.cart img { width: 80px; border-radius: 10px !important; }
.woocommerce a.remove { color: var(--wp--preset--color--black) !important; position: absolute; right: 15px; }
.woocommerce a.remove:hover { color: var(--wp--preset--color--white) !important; background-color: var(--wp--preset--color--black) !important; }
.woocommerce .posted_in { display: none; }
.woocommerce .onsale { display: none; }

/* --- Quantity +/- --- */
body.woocommerce-cart .quantity {
	display: inline-flex !important; align-items: center !important; justify-content: center !important;
	gap: 10px !important;
}
body.woocommerce-cart .quantity input.qty {
	width: 60px !important; height: 36px !important; border: 1px solid #D0D0D0 !important;
	border-radius: 6px !important; text-align: center !important; background: var(--wp--preset--color--white) !important;
	font-size: 16px !important; font-weight: 500 !important; color: var(--wp--preset--color--dark-anthrazit) !important;
	-moz-appearance: textfield !important; appearance: textfield !important;
}
body.woocommerce-cart .quantity input.qty::-webkit-inner-spin-button,
body.woocommerce-cart .quantity input.qty::-webkit-outer-spin-button { -webkit-appearance: none !important; }
body.woocommerce-cart .quantity .qty-btn, body.woocommerce-cart .quantity button.qty-btn {
	width: 24px !important; height: 24px !important; border-radius: 50% !important;
	border: 2px solid var(--wp--preset--color--heading-text) !important; background: transparent !important; color: var(--wp--preset--color--heading-text) !important;
	font-size: 18px !important; display: inline-flex !important; align-items: center !important;
	justify-content: center !important; cursor: pointer !important; transition: all 0.2s ease !important;
}
body.woocommerce-cart .quantity .qty-btn:hover { background: var(--wp--preset--color--heading-text) !important; color: var(--wp--preset--color--white) !important; }

/* --- Cart Two-Column Desktop --- */
@media (min-width: 992px) {
	body.woocommerce-cart .woocommerce {
		display: grid !important; grid-template-columns: 1fr 380px !important;
		gap: 40px !important; align-items: start !important;
	}
	body.woocommerce-cart form.woocommerce-cart-form { grid-column: 1 !important; }
	body.woocommerce-cart .cart-collaterals { grid-column: 2 !important; width: auto !important; float: none !important; }
	body.woocommerce-cart .cart-collaterals .cart_totals { width: auto !important; float: none !important; position: sticky !important; top: 0 !important; margin-top: 0 !important; }
}

/* --- Cart Totals Sidebar --- */
body.woocommerce-cart .cart_totals {
	background: var(--wp--preset--color--white) !important; padding: 32px !important; border-radius: 8px !important;
	border: 1px solid var(--wp--preset--color--grey) !important; box-shadow: 0 1px 3px rgba(0,0,0,0.08) !important;
}
body.woocommerce-cart .cart_totals h2 { font-size: 22px !important; font-weight: 600 !important; color: var(--wp--preset--color--dark-anthrazit) !important; border: none !important; margin: 0 0 24px 0 !important; }
body.woocommerce-cart .cart_totals .shop_table { box-shadow: none !important; border: none !important; background: transparent !important; border-radius: 0 !important; }
body.woocommerce-cart .cart_totals .shop_table th, body.woocommerce-cart .cart_totals .shop_table td { padding: 12px 0 !important; background: transparent !important; border: none !important; }
body.woocommerce-cart .cart_totals .shop_table td { text-align: right !important; }
body.woocommerce-cart .cart_totals .shop_table tr > th, body.woocommerce-cart .cart_totals .shop_table tr > td { border-bottom: 1px solid var(--wp--preset--color--grey) !important; }
body.woocommerce-cart .cart_totals .shop_table tr:last-of-type > th, body.woocommerce-cart .cart_totals .shop_table tr:last-of-type > td { border-bottom: none !important; }
body.woocommerce-cart .cart_totals .order-total th, body.woocommerce-cart .cart_totals .order-total td { padding-top: 15px !important; }

/* --- Buttons (solid brand-primary, Design-System strict) ---
   2026-05-11: Scope auf body.woocommerce-cart begrenzt. Vorher griff
   `.woocommerce button.button.alt` global und ueberschrieb die Pill-Optik
   der Step-Buttons (next-step-button, place_order) auf Checkout via
   hoeherer Spezifitaet (0,3,1 vs 0,2,1). Annotations mp1d61pu / mp1d6sgh /
   mp1dcr3u: Buttons fullwidth + 8px statt Pill 34px. */
body.woocommerce-cart .wc-proceed-to-checkout a.checkout-button,
body.woocommerce-cart .woocommerce button.button.alt {
	background: var(--wp--preset--color--brand-primary) !important; color: var(--wp--preset--color--white) !important;
	padding: 16px 32px !important; border-radius: 8px !important; font-weight: 600 !important;
	font-size: 15px !important; text-transform: uppercase !important; letter-spacing: 0.5px !important;
	border: none !important; box-shadow: 0 2px 6px rgba(232, 77, 61, 0.25) !important;
	display: inline-flex !important; align-items: center !important; justify-content: center !important;
	text-align: center !important; text-decoration: none !important; margin-top: 24px !important;
	min-height: 56px !important; line-height: 1.2 !important; width: 100% !important;
}
body.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover {
	background: var(--wp--preset--color--brand-hover) !important;
	box-shadow: 0 4px 12px rgba(232, 77, 61, 0.35) !important; transform: translateY(-1px) !important;
}
body.woocommerce-cart button[name="update_cart"] {
	background-color: var(--wp--preset--color--heading-text) !important; color: var(--wp--preset--color--white) !important; padding: 12px 24px !important;
	border: none !important; border-radius: 6px !important; font-weight: 600 !important;
	font-size: 13px !important; text-transform: uppercase !important;
}
body.woocommerce-cart .coupon button {
	background-color: #B0B0B0 !important; color: var(--wp--preset--color--white) !important; padding: 12px 24px !important;
	border: none !important; border-radius: 6px !important; font-weight: 600 !important; cursor: pointer !important;
}
body.woocommerce-cart .coupon .input-text { padding: 7px 6px; width: 20rem; border-radius: 5px; }
.cross-sells { display: none !important; }

/* --- Anrede ×-Clear-Button (A4) --- */
.hitop-select-clear-wrap {
	position: relative !important;
	display: block !important;
	width: 100% !important;
}
.hitop-select-clear-wrap > select {
	padding-right: 40px !important;
}
.hitop-select-clear {
	position: absolute !important;
	right: 12px !important;
	top: 50% !important;
	transform: translateY(-50%) !important;
	width: 22px !important;
	height: 22px !important;
	border-radius: 50% !important;
	border: none !important;
	background: var(--wp--preset--color--grey) !important;
	color: var(--wp--preset--color--white) !important;
	font-size: 16px !important;
	line-height: 22px !important;
	padding: 0 !important;
	cursor: pointer !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	transition: background 0.15s ease !important;
	box-shadow: none !important;
}
.hitop-select-clear[hidden] { display: none !important; }
.hitop-select-clear:hover {
	background: var(--wp--preset--color--brand-primary) !important;
}

/* --- Checkout Inputs (CI-Decision 2026-05-10: weiss matched Figma 3044:1095) --- */
body.woocommerce-checkout .woocommerce form .form-row .input-text,
body.woocommerce-checkout .woocommerce form .form-row select,
body.woocommerce-checkout .woocommerce form .form-row textarea,
body.woocommerce-checkout form.checkout .form-row .input-text,
body.woocommerce-checkout form.checkout .form-row select {
	background: var(--wp--preset--color--white) !important; border: 1px solid var(--wp--preset--color--grey) !important;
	border-radius: 10px !important; padding: 12px 14px !important; box-shadow: none !important;
}
body.woocommerce-checkout #order_comments, body.woocommerce-checkout textarea#order_comments { background: var(--wp--preset--color--white) !important; }

/* --- Checkout Payment Methods --- */
body.woocommerce-checkout #payment ul.wc_payment_methods {
	background: #F8F8F8 !important; border-radius: 10px !important;
	padding: 12px 16px 16px !important; border: none !important;
}
body.woocommerce-checkout #payment .wc_payment_methods input[type="radio"] { accent-color: var(--wp--preset--color--brand-primary) !important; }
body.woocommerce-checkout #payment .wc_payment_methods input[type="radio"] + label {
	display: inline-block !important; border: none !important; background: transparent !important;
	color: var(--wp--preset--color--heading-text) !important; line-height: 1.4 !important;
}
body.woocommerce-checkout #payment .wc_payment_methods input[type="radio"]:checked + label { font-weight: 600 !important; }
body.woocommerce-checkout #payment .payment_box { background: transparent !important; margin: 8px 0 0 24px !important; color: #616161 !important; }
body.woocommerce-checkout #payment .payment_box::before { border-bottom-color: transparent !important; }
.woocommerce .woocommerce-input-wrapper > a { color: var(--wp--preset--color--brand-primary) !important; }

/* --- Checkout Submit Button (solid brand-primary) --- */
body.woocommerce-checkout button#place_order, body.woocommerce-checkout #place_order {
	background: var(--wp--preset--color--brand-primary) !important; color: var(--wp--preset--color--white) !important;
	padding: 16px 32px !important; border-radius: 8px !important; font-weight: 600 !important;
	font-size: 15px !important; text-transform: uppercase !important; letter-spacing: 0.5px !important;
	border: none !important; box-shadow: 0 2px 6px rgba(232, 77, 61, 0.25) !important;
}
body.woocommerce-checkout button#place_order:hover {
	background: var(--wp--preset--color--brand-hover) !important;
	box-shadow: 0 4px 12px rgba(232, 77, 61, 0.35) !important; transform: translateY(-1px) !important;
}

/* --- Checkout Checkboxes --- */
.woocommerce-checkout .input-checkbox { width: 16px; display: inline-block !important; }

/* --- Checkout Review Order Table (Germanized) --- */
.woocommerce-checkout-review-order-table { background: var(--wp--preset--color--white) !important; border-radius: 8px !important; overflow: hidden !important; }
.woocommerce-checkout-review-order-table thead th { background: var(--wp--preset--color--light-grey) !important; padding: 16px 20px !important; font-weight: 600 !important; border: none !important; }
.woocommerce-checkout-review-order-table tbody tr.cart_item { border-top: 1px solid var(--wp--preset--color--grey) !important; }
.woocommerce-checkout-review-order-table tbody td { padding: 20px !important; border: none !important; }
.woocommerce-checkout-review-order-table .product-total { text-align: right !important; font-weight: 600 !important; }
.woocommerce-checkout-review-order-table tfoot th, .woocommerce-checkout-review-order-table tfoot td { padding: 12px 20px !important; border-top: 1px solid var(--wp--preset--color--grey) !important; }
.woocommerce-checkout-review-order-table .order-total th, .woocommerce-checkout-review-order-table .order-total td { font-weight: 700 !important; font-size: 18px !important; }
.woocommerce-checkout-review-order-table .wc-gzd-cart-item-thumbnail img { width: 80px !important; height: 80px !important; border-radius: 10px !important; object-fit: cover !important; }

/* 2026-05-11 (Annotation mp1dcgf1): Cart-Item-Name-Wrapper im Order-Review
   war "total verschoben" — wrapper ist display:flex row mit gemischten
   Children (Thumbnail-Div + raw text + <p> + <strong>), die alle als
   Flex-Items in EINER Reihe gerendert wurden. Fix via Grid: Thumbnail
   spans alle Rows links, Rest fliesst rechts vertikal. */
.woocommerce-checkout-review-order-table .wc-gzd-cart-item-name-wrapper {
	display: grid !important;
	grid-template-columns: 80px 1fr !important;
	column-gap: 16px !important;
	align-items: start !important;
	flex-direction: unset !important;
}
.woocommerce-checkout-review-order-table .wc-gzd-cart-item-name-wrapper > .wc-gzd-cart-item-thumbnail {
	grid-row: 1 / -1 !important;
	grid-column: 1 !important;
	align-self: start !important;
}
.woocommerce-checkout-review-order-table .wc-gzd-cart-item-name-wrapper > :not(.wc-gzd-cart-item-thumbnail) {
	grid-column: 2 !important;
}
.woocommerce-checkout-review-order-table .wc-gzd-cart-item-name-wrapper .delivery-time-info {
	margin: 4px 0 0 !important;
	font-size: 14px !important;
	color: var(--wp--preset--color--light-anthrazit) !important;
}
.woocommerce-checkout-review-order-table .wc-gzd-cart-item-name-wrapper .product-quantity {
	font-weight: 600 !important;
	color: var(--wp--preset--color--dark-anthrazit) !important;
}

/* --- Checkout Verify Data (Germanized Pro) --- */
.woocommerce-gzdp-checkout-verify-data .col2-set { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 40px !important; }
.woocommerce-gzdp-checkout-verify-data .col-1, .woocommerce-gzdp-checkout-verify-data .col-2 {
	background: var(--wp--preset--color--white) !important; padding: 32px !important; border-radius: 8px !important;
	border: 1px solid var(--wp--preset--color--grey) !important; box-shadow: 0 1px 3px rgba(0,0,0,0.08) !important;
}
.woocommerce-gzdp-checkout-verify-data header.title h4 { font-size: 22px !important; font-weight: 600 !important; color: var(--wp--preset--color--dark-anthrazit) !important; }
.woocommerce-gzdp-checkout-verify-data address { font-style: normal !important; line-height: 1.6 !important; color: var(--wp--preset--color--heading-text) !important; }
.woocommerce-gzdp-checkout-verify-data a.edit { color: var(--wp--preset--color--brand-primary) !important; text-decoration: underline !important; }
@media (max-width: 781px) {
	.woocommerce-gzdp-checkout-verify-data .col2-set { grid-template-columns: 1fr !important; gap: 24px !important; }
}

/* --- WC Info Notice --- */
body.woocommerce-cart .woocommerce-info, body.woocommerce-checkout .woocommerce-info {
	background: var(--wp--preset--color--light-grey) !important; color: var(--wp--preset--color--heading-text) !important; border-radius: 10px !important;
	font-size: 18px !important; border: none !important; padding: 16px 20px !important;
}
.woocommerce-info::before { display: none; }

/* --- WC Login Toggle (A2 — matched Production "Besitzen Sie bereits ein Kundenkonto?")
   WC verwendet seit ~6.7 den Block-Notice (.wc-block-components-notice-banner)
   statt der Legacy-Notice (.woocommerce-info). Wir stylen beide. */
body.woocommerce-checkout .woocommerce-form-login-toggle .woocommerce-info,
body.woocommerce-checkout .woocommerce-form-login-toggle .wc-block-components-notice-banner {
	background: var(--wp--preset--color--light-grey) !important;
	color: var(--wp--preset--color--heading-text) !important;
	border-radius: 10px !important; border: none !important;
	padding: 16px 20px !important; font-size: 16px !important;
	line-height: 1.5 !important; margin: 12px 0 !important;
}
/* Block-Notice Icon (info-circle) auf Brand-Primary umfaerben */
body.woocommerce-checkout .woocommerce-form-login-toggle .wc-block-components-notice-banner > svg {
	fill: var(--wp--preset--color--primary) !important;
}
body.woocommerce-checkout .woocommerce-form-login-toggle a.showlogin {
	color: var(--wp--preset--color--primary) !important; font-weight: 500 !important;
	text-decoration: underline !important;
}
body.woocommerce-checkout .woocommerce-form-login-toggle a.showlogin:hover {
	color: var(--wp--preset--color--primary-hover) !important;
}
body.woocommerce-checkout .woocommerce-form-login {
	background: var(--wp--preset--color--light-grey) !important; border-radius: 10px !important;
	padding: 20px !important; border: none !important; margin: 12px 0 24px !important;
}
body.woocommerce-checkout .woocommerce-form-login .form-row { margin-bottom: 12px !important; }
body.woocommerce-checkout .woocommerce-form-login .lost_password { margin-top: 8px !important; }
body.woocommerce-checkout .woocommerce-form-login .lost_password a {
	color: var(--wp--preset--color--primary) !important; text-decoration: underline !important;
}

/* ============ CHECKOUT STEP NAVIGATION ============ */
/* 1:1 aus call/hitop/style.css (Live-Site) — NICHT AENDERN */

/* NUCLEAR: Kill ALL Germanized Pro arrow/chevron pseudo-elements.
   Nur a::before bleibt (dort sitzen unsere PNG-Icons). */
ul.nav-wizard li::before,
ul.nav-wizard li::after,
ul.nav-wizard li a::after,
.step-nav.nav-wizard li::before,
.step-nav.nav-wizard li::after,
.step-nav.nav-wizard li a::after,
.woocommerce-multistep-checkout ul.nav-wizard li::before,
.woocommerce-multistep-checkout ul.nav-wizard li::after,
.woocommerce-multistep-checkout ul.nav-wizard li a::after {
    display: none !important;
    content: none !important;
    border: none !important;
    width: 0 !important;
    height: 0 !important;
    background: none !important;
}

/* Override Germanized Pro clip-path + backgrounds */
.step-nav.nav-wizard li,
.woocommerce-multistep-checkout ul.nav-wizard li,
ul.nav-wizard li {
    clip-path: none !important;
    background: transparent !important;
    background-color: transparent !important;
}

.step-nav.nav-wizard li a,
.woocommerce-multistep-checkout ul.nav-wizard li a,
ul.nav-wizard li a {
    clip-path: none !important;
}

/* Step Navigation Styles */
.step-nav.nav-wizard,
.woocommerce-multistep-checkout ul.nav-wizard {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 40px auto !important;
    position: relative !important;
    max-width: 900px !important;
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    overflow: visible !important;
    height: auto !important;
}

/* Continuous line across all steps */
.step-nav.nav-wizard::before,
.woocommerce-multistep-checkout ul.nav-wizard::before {
    content: '' !important;
    position: absolute !important;
    top: 20px !important;
    left: 10% !important;
    right: 10% !important;
    height: 2px !important;
    background-color: var(--wp--preset--color--grey) !important;
    z-index: 0 !important;
}

.step-nav.nav-wizard li,
.woocommerce-multistep-checkout ul.nav-wizard li {
    flex: 1 !important;
    text-align: center !important;
    position: relative !important;
    z-index: 2 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}

.step-nav.nav-wizard li a,
.woocommerce-multistep-checkout ul.nav-wizard li a {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-decoration: none !important;
    color: var(--wp--preset--color--grey) !important;
    transition: color 0.3s ease !important;
    position: relative !important;
    z-index: 2 !important;
    background: var(--wp--preset--color--white) !important;
    background-color: var(--wp--preset--color--white) !important;
    margin-top: -20px;
}

.step-nav.nav-wizard .step-number,
.woocommerce-multistep-checkout ul.nav-wizard .step-number {
    display: none !important;
}

/* Icon container using ::before — Figma-originale PNGs via background-image
   Figma Frame 3044:29 (Checkout): inactive = #D9D9D9, active = #D83F27 brand-primary
   Inactive-State ist Standard, Active-State via li.active-Selector weiter unten */
.step-nav.nav-wizard li a::before,
.woocommerce-multistep-checkout ul.nav-wizard li a::before {
    content: '' !important;
    display: block !important;
    width: 40px !important;
    height: 40px !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-color: transparent !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
    margin: 0 auto 12px auto !important;
    flex-shrink: 0 !important;
    transition: background-image 0.3s ease !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    filter: none !important;
    opacity: 1 !important;
    position: static !important;
}

/* Step Title */
.step-nav.nav-wizard .step-title,
.woocommerce-multistep-checkout ul.nav-wizard .step-title {
    font-size: 14px !important;
    font-weight: 400 !important;
    color: var(--wp--preset--color--grey) !important;
    transition: color 0.3s ease !important;
    white-space: nowrap !important;
    margin: 0 !important;
    position: static !important;
    text-align: center !important;
}

/* Icons for each step — Mapping nur per step-KEY-Klasse.
   Cart-Icon entfernt 2026-05-10: Germanized-Pro hat KEIN Cart als nativer
   Step (verifiziert in Plugin-Source class-wc-gzdp-multistep-checkout.php).
   4-Step inkl. Cart waere ein Custom-Block-Sprint (Backlog). */
ul.nav-wizard a.step-1::before,
ul.nav-wizard a.step-address::before {
    background-image: url('/wp-content/themes/hitop-theme/assets/images/checkout-icon-invoice-inactive.png') !important;
}
ul.nav-wizard a.step-2::before,
ul.nav-wizard a.step-payment::before {
    background-image: url('/wp-content/themes/hitop-theme/assets/images/checkout-icon-card-inactive.png') !important;
}
ul.nav-wizard a.step-3::before,
ul.nav-wizard a.step-order::before {
    background-image: url('/wp-content/themes/hitop-theme/assets/images/checkout-icon-check-inactive.png') !important;
}

/* Active step: swap zu Active-PNG (Figma-Original brand-primary) */
.step-nav.nav-wizard li.active a.step-1::before,
.step-nav.nav-wizard li.active a.step-address::before,
.woocommerce-multistep-checkout ul.nav-wizard li.active a.step-1::before,
.woocommerce-multistep-checkout ul.nav-wizard li.active a.step-address::before {
    background-image: url('/wp-content/themes/hitop-theme/assets/images/checkout-icon-invoice-active.png') !important;
}
.step-nav.nav-wizard li.active a.step-2::before,
.step-nav.nav-wizard li.active a.step-payment::before,
.woocommerce-multistep-checkout ul.nav-wizard li.active a.step-2::before,
.woocommerce-multistep-checkout ul.nav-wizard li.active a.step-payment::before {
    background-image: url('/wp-content/themes/hitop-theme/assets/images/checkout-icon-card-active.png') !important;
}
.step-nav.nav-wizard li.active a.step-3::before,
.step-nav.nav-wizard li.active a.step-order::before,
.woocommerce-multistep-checkout ul.nav-wizard li.active a.step-3::before,
.woocommerce-multistep-checkout ul.nav-wizard li.active a.step-order::before {
    background-image: url('/wp-content/themes/hitop-theme/assets/images/checkout-icon-check-active.png') !important;
}
.step-nav.nav-wizard li.active a::before,
.woocommerce-multistep-checkout ul.nav-wizard li.active a::before {
    filter: none !important;
    opacity: 1 !important;
}
.step-nav.nav-wizard li.active .step-title,
.woocommerce-multistep-checkout ul.nav-wizard li.active .step-title {
    color: var(--wp--preset--color--brand-primary) !important;
    font-weight: 500 !important;
}

/* Red line for completed segments */
.step-nav.nav-wizard li.active::after,
.woocommerce-multistep-checkout ul.nav-wizard li.active::after {
    content: '' !important;
    position: absolute !important;
    top: 20px !important;
    left: -50% !important;
    width: 100% !important;
    height: 2px !important;
    background-color: var(--wp--preset--color--brand-primary) !important;
    z-index: 1 !important;
}
.step-nav.nav-wizard li:first-child.active::after,
.woocommerce-multistep-checkout ul.nav-wizard li:first-child.active::after {
    display: none !important;
}

/* Inactive steps after active — PNG-Default (grey) bleibt erhalten */
.step-nav.nav-wizard li.active ~ li a::before,
.woocommerce-multistep-checkout ul.nav-wizard li.active ~ li a::before {
    filter: none !important;
    opacity: 1 !important;
}
.step-nav.nav-wizard li.active ~ li .step-title,
.woocommerce-multistep-checkout ul.nav-wizard li.active ~ li .step-title {
    color: var(--wp--preset--color--grey) !important;
}
.step-nav.nav-wizard li.active ~ li:not(:last-child)::after,
.woocommerce-multistep-checkout ul.nav-wizard li.active ~ li:not(:last-child)::after {
    background-color: var(--wp--preset--color--grey) !important;
}

/* Hover */
.step-nav.nav-wizard li a:hover,
.woocommerce-multistep-checkout ul.nav-wizard li a:hover {
    cursor: pointer !important;
}
.step-nav.nav-wizard li a:hover .step-title,
.woocommerce-multistep-checkout ul.nav-wizard li a:hover .step-title {
    color: var(--wp--preset--color--brand-primary) !important;
    opacity: 0.8 !important;
}

/* Step Nav Mobile */
@media (max-width: 781px) {
    .step-nav.nav-wizard {
        margin: 30px auto !important;
        padding: 0 10px !important;
    }
    .step-nav.nav-wizard li a::before {
        width: 35px !important;
        height: 35px !important;
    }
    .step-nav.nav-wizard li:not(:last-child)::after {
        top: 17px !important;
        left: 40px !important;
    }
    .step-nav.nav-wizard .step-title {
        font-size: 12px !important;
        bottom: -20px !important;
        width: 80px !important;
    }
}
@media (max-width: 480px) {
    .step-nav.nav-wizard .step-title {
        font-size: 10px !important;
        bottom: -18px !important;
        width: 70px !important;
    }
    .step-nav.nav-wizard li a::before {
        width: 30px !important;
        height: 30px !important;
    }
    .step-nav.nav-wizard li:not(:last-child)::after {
        top: 15px !important;
        left: 35px !important;
    }
}

/* --- Germanized Pro Step Buttons + Place-Order (solid brand-primary) ---
   2026-05-11: place_order ergaenzt + Selektoren auf .woocommerce ...button.alt
   geschoben damit Cart-Rule auf `.woocommerce button.button.alt` (Spez 0,3,1)
   nicht mehr leakt. Annotations mp1d61pu / mp1d6sgh / mp1dcr3u. */
.woocommerce-checkout .woocommerce button.next-step-button.button.alt,
.woocommerce-checkout .woocommerce button[name="woocommerce_gzdp_checkout_next_step"].button.alt,
.woocommerce-checkout .woocommerce button#place_order.button.alt {
	background: var(--wp--preset--color--brand-primary) !important;
	color: var(--wp--preset--color--white) !important; padding: 18px 40px !important; border-radius: 34px !important;
	font-weight: 700 !important; font-size: 14px !important; text-transform: uppercase !important;
	letter-spacing: 0.5px !important; border: none !important;
	box-shadow: 0 2px 6px rgba(232, 77, 61, 0.25) !important;
	display: inline-flex !important; width: auto !important; max-width: none !important;
	margin: 24px auto 0 !important; min-height: 56px !important; line-height: 1 !important;
}
.woocommerce-checkout .woocommerce button.next-step-button.button.alt:hover,
.woocommerce-checkout .woocommerce button[name="woocommerce_gzdp_checkout_next_step"].button.alt:hover,
.woocommerce-checkout .woocommerce button#place_order.button.alt:hover {
	background: var(--wp--preset--color--brand-hover) !important;
	box-shadow: 0 4px 12px rgba(232, 77, 61, 0.35) !important; transform: translateY(-1px) !important;
}
.woocommerce-checkout .prev-step-button {
	color: var(--wp--preset--color--heading-text) !important; text-decoration: underline !important;
	font-size: 16px !important; display: block !important;
	text-align: center !important; margin: 16px auto !important;
}
.woocommerce-checkout .prev-step-button:hover { color: var(--wp--preset--color--brand-primary) !important; }
.woocommerce-checkout .step-buttons { text-align: center !important; margin-top: 2rem !important; }

/* --- Checkout H1 Title + Subtitle (Germanized Pro Multi-Step) --- */
/* Checkout H1: NICHT verstecken — Live zeigt "Ihre Daten" als grossen zentrierten Titel */
.woocommerce-checkout .checkout-subtitle {
	font-size: 18px !important; font-weight: 400 !important; color: var(--wp--preset--color--heading-text) !important;
	text-align: center !important; line-height: 1.4 !important;
	font-family: 'Inter', sans-serif !important; margin: 10px auto 30px !important; display: block !important;
}
h3.woocommerce-billing-fields__title,
.woocommerce-billing-fields > h3 { font-size: 20px !important; font-weight: 500 !important; }

/* ============ DESKTOP CHECKOUT (Figma 3044:29 Multi-Step) ============
   Nur Desktop (>=782px). Mobile-Fixes aus Bug 5 bleiben unangetastet.
   Ziel: Visuell naeher an Figma — grosser H1/Subtitle pro Step,
   Active-Step zentriert, Button als Brand-Pill, Step-Nav kompakter. */
@media (min-width: 782px) {
	/* Fix 1: Active step wrapper im Form-Raster zentrieren.
	   Germanized Pro platziert Step 1 im linken .billing-fields und Step 2+3
	   im rechten .order-review. Wir neutralisieren Float und zwingen den
	   aktiven Step in volle Form-Breite, zentriert. */
	body.woocommerce-checkout form.checkout .woocommerce-billing-fields,
	body.woocommerce-checkout form.checkout .woocommerce-checkout-review-order {
		float: none !important;
		width: 100% !important;
	}
	/* 2026-05-09: step-wrapper-active auf 742px zentriert.
	   2026-05-11 entfernt: Live (hitop-therapie.de) hat ALLE Steps
	   fullwidth (1350px gemessen bei 1440px viewport). 742px-Limit war
	   Theme-Decision ohne Live-Vergleich. Step-Wrapper jetzt
	   fullwidth ohne max-width-Override. */
	body.woocommerce-checkout form.checkout .step-wrapper-active {
		max-width: none !important;
		margin: 0 !important;
		float: none !important;
	}

	/* Fix 2: H1-Titel + Subtitle pro Step (injiziert via theme.js).
	   Figma zeigt grossen zentrierten H1 + Subtitle ueber dem Formular. */
	body.woocommerce-checkout .hitop-step-heading {
		text-align: center !important;
		margin: 0 auto 40px !important;
	}
	body.woocommerce-checkout .hitop-step-title {
		font-size: 48px !important;
		font-weight: 700 !important;
		color: var(--wp--preset--color--heading-text) !important;
		font-family: 'Inter', sans-serif !important;
		line-height: 1.1 !important;
		margin: 8px auto 12px !important;
		text-align: center !important;
	}
	body.woocommerce-checkout .hitop-step-subtitle {
		font-size: 18px !important;
		font-weight: 400 !important;
		color: var(--wp--preset--color--heading-text) !important;
		line-height: 1.5 !important;
		max-width: 640px !important;
		margin: 0 auto !important;
		text-align: center !important;
	}

	/* Fix 3: Step-Nav kompakter (Figma 963px statt 900px, mit klareren Icons/Labels) */
	.woocommerce-checkout .step-nav.nav-wizard {
		max-width: 720px !important;
		margin: 32px auto 8px !important;
	}
	.woocommerce-checkout .step-nav.nav-wizard .step-title {
		font-size: 15px !important;
		font-weight: 500 !important;
	}

	/* Fix 4: Next-Step + Place-Order als Brand-Pill matching theme (34px radius, uppercase)
	   2026-05-11: Spezifitaet auf 0,4,1 erhoeht (body + 3 Klassen + tag) damit die
	   Cart-Rule auf .woocommerce button.button.alt (0,3,1) NICHT mehr leakt.
	   Auch place_order wird hier gepillt (Annotation mp1dcr3u). */
	body.woocommerce-checkout .woocommerce button.next-step-button.button.alt,
	body.woocommerce-checkout .woocommerce button[name="woocommerce_gzdp_checkout_next_step"].button.alt,
	body.woocommerce-checkout .woocommerce button#place_order.button.alt {
		border-radius: 34px !important;
		padding: 18px 40px !important;
		font-size: 14px !important;
		font-weight: 700 !important;
		letter-spacing: 0.5px !important;
		min-height: 56px !important;
		line-height: 1 !important;
		width: auto !important;
		max-width: none !important;
		display: inline-flex !important;
		margin: 24px auto 0 !important;
	}
	/* Step-Buttons-Wrapper zentrieren statt float:right (Germanized-Default). */
	body.woocommerce-checkout .step-buttons {
		display: flex !important;
		flex-direction: column !important;
		align-items: center !important;
		gap: 0 !important;
	}
	body.woocommerce-checkout .woocommerce-multistep-checkout .step-buttons .next-step-button {
		float: none !important;
	}
	body.woocommerce-checkout .wc-gzd-order-submit,
	body.woocommerce-checkout .wc-gzd-place-order {
		text-align: center !important;
	}

	/* Fix 5: Payment-Radio-Container Figma-Optik (Radius 10px, Inner-Cards 8px) */
	body.woocommerce-checkout #payment ul.wc_payment_methods {
		background: var(--wp--preset--color--light-grey) !important;
		border-radius: 10px !important;
		padding: 16px !important;
	}
	body.woocommerce-checkout #payment ul.wc_payment_methods li.wc_payment_method {
		border-radius: 8px !important;
		border-color: var(--wp--preset--color--grey) !important;
	}
}

/* --- WC Container Width ---
   Gilt NUR fuer Cart/Checkout-Seiten und nur ab Tablet (>=782px).
   Auf Mobile (<=781px) soll der Inhalt bis zum Viewport-Rand gehen
   (Single-Product-Hero, Info-Banner, Breadcrumb, Produktbild).
   Vorher war die Regel global auf `.woocommerce` und zog auf Single-Product
   doppelt ein (body.single-product + .product-Wrapper beide matchen),
   wodurch Mobile einen 64px Innenrand + 64px Doppelrand bekam. */
@media (min-width: 782px) {
	body.woocommerce-cart .woocommerce,
	body.woocommerce-checkout .woocommerce {
		width: calc(100% - 4rem) !important;
		max-width: 1328px;
		margin-left: auto;
		margin-right: auto;
	}
}

/* Mobile Safety-Net Single-Product: KEIN Container-Shrinkage.
   Verhindert wiederkehrenden Bug 4 (links/rechts white-space auf /product/*). */
@media (max-width: 781px) {
	body.single-product,
	body.single-product .wp-site-blocks,
	body.single-product > .wp-site-blocks > .woocommerce.product {
		width: 100% !important;
		max-width: 100% !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
	}
	body.single-product .hitop-single-product__hero {
		margin-left: 0 !important;
		margin-right: 0 !important;
		width: auto !important;
		max-width: 100% !important;
	}
}

/* --- Select2 Fix --- */
.select2-container { width: 100% !important; max-width: 100% !important; }

/* --- Cart Mobile --- */
@media (max-width: 991.98px) {
	body.woocommerce-cart .cart-collaterals { width: 100% !important; float: none !important; }
	body.woocommerce-cart .cart-collaterals .cart_totals { width: 100% !important; position: static !important; }
}
@media (max-width: 781px) {
	.woocommerce table.shop_table:not(.woocommerce-checkout-review-order-table) td { border-top: transparent !important; }
	.woocommerce-cart-form__cart-item { border-top: 1px solid var(--wp--preset--color--grey) !important; padding: 20px 15px !important; position: relative; }
	.woocommerce-cart-form__cart-item td.product-thumbnail { display: inline-block !important; width: 80px; margin-right: 15px; }
	.woocommerce-cart-form__cart-item td.product-name { display: inline-block !important; width: calc(100% - 100px); }
	body.woocommerce-cart .coupon .input-text { width: 50%; border-radius: 10px; }
	.woocommerce-checkout-review-order-table .wc-gzd-cart-item-name-wrapper { flex-direction: column !important; }
	.woocommerce-checkout-review-order-table .wc-gzd-cart-info.delivery-time-info { margin-left: 0 !important; }
	.woocommerce-checkout-review-order-table .wc-gzd-item-desc { margin-left: 0 !important; }
}

/* ============================================================
   Product Image Gallery ("Jetzt Testen") — Interactive Enhancement
   Markup: .hitop-product-main-img + .hitop-product-thumbs
   JS:     theme.js  (vanilla, idempotent)
   ============================================================ */

/* Main-Image-Container: relative fuer Nav-Button-Overlay */
.hitop-product-main-img {
	position: relative;
}

/* NUCLEAR: Germanized Pro / WC Pfeil-Pseudo-Elemente auf dem
   Haupt-Bild-Container komplett killen (siehe commit 9cc9f75). */
.hitop-product-main-img::before,
.hitop-product-main-img::after,
.hitop-product-main-img a::before,
.hitop-product-main-img a::after,
.hitop-product-main-img figure::before,
.hitop-product-main-img figure::after,
.hitop-product-main-img .woocommerce-product-gallery__trigger,
.hitop-product-thumbs figure::before,
.hitop-product-thumbs figure::after,
.hitop-product-thumbs a::before,
.hitop-product-thumbs a::after {
	content: none !important;
	display: none !important;
	background: none !important;
	border: none !important;
}

/* Prev/Next Nav-Buttons (JS-injiziert) */
.hitop-gallery-nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--wp--preset--color--white);
	border: none;
	padding: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
	z-index: 2;
	color: var(--wp--preset--color--dark-anthrazit);
	transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
}

.hitop-gallery-nav:hover,
.hitop-gallery-nav:focus-visible {
	background: var(--wp--preset--color--light-grey);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
	outline: none;
}

.hitop-gallery-nav:active {
	transform: translateY(-50%) scale(0.95);
}

.hitop-gallery-nav--prev { left: 12px; }
.hitop-gallery-nav--next { right: 12px; }

.hitop-gallery-nav svg {
	display: block;
	pointer-events: none;
}

/* Aktives Thumbnail */
.hitop-product-thumbs .is-active img {
	border: 2px solid var(--wp--preset--color--brand-primary) !important;
}

/* Hover/Focus States Thumbs (leichte Skalierung) */
.hitop-product-thumbs .wp-block-image {
	transition: transform 0.15s ease;
}

.hitop-product-thumbs .wp-block-image:hover,
.hitop-product-thumbs .wp-block-image:focus-within {
	transform: scale(1.04);
}

.hitop-product-thumbs .wp-block-image img:focus-visible {
	outline: 2px solid var(--wp--preset--color--brand-primary);
	outline-offset: 2px;
}

/* Mobile: Nav-Buttons etwas kleiner */
@media (max-width: 600px) {
	.hitop-gallery-nav {
		width: 36px;
		height: 36px;
	}
	.hitop-gallery-nav--prev { left: 8px; }
	.hitop-gallery-nav--next { right: 8px; }
}

/* =========================================================================
   Single-Product Typografie-Override
   -------------------------------------------------------------------------
   Zweck: WooCommerce-/Germanized-Default-Styles auf der Single-Product-Page
   durch das HiToP-Design-System (Inter + Figma-Werte) ersetzen.
   Scope: nur body.single-product — greift nicht in Shop/Cart/Checkout.
   !important nur dort, wo Plugin-Inline-Styles (DB-Content) oder
   Germanized-CSS mit hoeherer Spezifitaet ueberschrieben werden muessen.
   ========================================================================= */

/* Font-Family erzwingen (Germanized setzt teils Arial/System-Sans) */
body.single-product,
body.single-product .hitop-single-product,
body.single-product .hitop-single-product h1,
body.single-product .hitop-single-product h2,
body.single-product .hitop-single-product h3,
body.single-product .hitop-single-product h4,
body.single-product .hitop-single-product h5,
body.single-product .hitop-single-product h6,
body.single-product .hitop-single-product p,
body.single-product .hitop-single-product li,
body.single-product .hitop-single-product span,
body.single-product .hitop-single-product a,
body.single-product .hitop-single-product div,
body.single-product .woocommerce-tabs,
body.single-product .woocommerce-tabs *,
body.single-product .related.products,
body.single-product .related.products *,
body.single-product .upsells.products,
body.single-product .upsells.products *,
body.single-product .cross-sells,
body.single-product .cross-sells * {
	font-family: var(--wp--preset--font-family--inter, 'Inter', sans-serif);
}

/* ---------- H1 Produkt-Title (Inter Light 300 / 50px / -0.03em / #2c2c2c) ---------- */
body.single-product .hitop-single-product__title,
body.single-product h1.product_title,
body.single-product .wp-block-post-title {
	font-family: var(--wp--preset--font-family--inter, 'Inter', sans-serif);
	font-size: clamp(32px, 2rem + 1.5vw, 50px);
	font-weight: 300;
	line-height: 1;
	letter-spacing: -0.03em;
	color: var(--wp--preset--color--dark-anthrazit);
	margin: 0 0 24px;
}

/* ---------- H2 Sektions-Headings (Inter Light 300 / 32px / -0.03em / #2c2c2c) ---------- */
body.single-product .hitop-single-product__description-heading,
body.single-product .hitop-single-product__cross-sells-heading,
body.single-product .woocommerce-tabs h2,
body.single-product .woocommerce-tabs .panel > h2,
body.single-product .related.products > h2,
body.single-product .upsells.products > h2,
body.single-product .cross-sells > h2,
body.single-product #reviews h2 {
	font-family: var(--wp--preset--font-family--inter, 'Inter', sans-serif);
	font-size: clamp(26px, 1.625rem + 0.5vw, 32px);
	font-weight: 300;
	line-height: 1.2;
	letter-spacing: -0.03em;
	color: var(--wp--preset--color--dark-anthrazit);
	margin: 0 0 24px;
}

/* ---------- H3 Subsection (Inter Black 900 / 22px / -0.03em / #2c2c2c) ---------- */
body.single-product .hitop-single-product h3,
body.single-product .entry-content h3,
body.single-product .woocommerce-tabs h3,
body.single-product #reviews h3 {
	font-family: var(--wp--preset--font-family--inter, 'Inter', sans-serif);
	font-size: 22px;
	font-weight: 900;
	line-height: 1.2;
	letter-spacing: -0.03em;
	color: var(--wp--preset--color--dark-anthrazit);
	margin: 32px 0 12px;
}

/* ---------- Copy / Paragraph (Inter Light 300 / 22px / 1.5 / #2c2c2c) ---------- */
body.single-product .hitop-single-product p,
body.single-product .hitop-single-product li,
body.single-product .hitop-single-product__summary,
body.single-product .hitop-single-product__summary p,
body.single-product .hitop-single-product__description-content,
body.single-product .hitop-single-product__description-content p,
body.single-product .hitop-single-product__description-content li,
body.single-product .woocommerce-product-details__short-description,
body.single-product .woocommerce-product-details__short-description p,
body.single-product .entry-content p,
body.single-product .entry-content li,
body.single-product .wp-block-post-excerpt__excerpt {
	font-family: var(--wp--preset--font-family--inter, 'Inter', sans-serif);
	font-size: 22px;
	font-weight: 300;
	line-height: 1.5;
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--dark-anthrazit);
}

/* Summary-spezifisch: Core setzt Inline clamp() -> muss uebermalt werden */
body.single-product .hitop-single-product__summary,
body.single-product .hitop-single-product__summary p.wp-block-post-excerpt__excerpt {
	font-size: 22px !important;
	font-weight: 300 !important;
	color: var(--wp--preset--color--dark-anthrazit) !important;
	margin: 16px 0 24px;
}

/* Entry-Content-Legacy-Wrapper mit Inline-Style color:#707070; font-size:14pt.
   Spezifischer Selektor + !important, weil Inline-Style 1000er Spezifitaet hat. */
body.single-product .entry-content > div[style],
body.single-product .entry-content > div[style] p,
body.single-product .entry-content > div[style] li,
body.single-product .entry-content > div[style] strong,
body.single-product .entry-content > div[style] em {
	color: var(--wp--preset--color--dark-anthrazit) !important;
	font-size: 22px !important;
	font-family: var(--wp--preset--font-family--inter, 'Inter', sans-serif) !important;
}

/* ---------- Hauptpreis: orange, Inter Black 900, ~50px ---------- */
body.single-product .hitop-single-product__price,
body.single-product .hitop-single-product__price .wc-block-components-product-price,
body.single-product .hitop-single-product__price .woocommerce-Price-amount,
body.single-product .hitop-single-product__price bdi,
body.single-product .hitop-single-product__price .woocommerce-Price-currencySymbol,
body.single-product p.price,
body.single-product .summary .price,
body.single-product .summary .price .woocommerce-Price-amount {
	font-family: var(--wp--preset--font-family--inter, 'Inter', sans-serif) !important;
	font-size: clamp(32px, 2rem + 1.4vw, 50px) !important;
	font-weight: 900 !important;
	line-height: 1 !important;
	letter-spacing: -0.03em !important;
	color: var(--wp--preset--color--brand-primary) !important;
}

body.single-product .hitop-single-product__price {
	margin: 16px 0 !important;
	display: block;
}

/* Durchgestrichener Altpreis bei Sale (falls genutzt) */
body.single-product .hitop-single-product__price del,
body.single-product .summary .price del {
	color: var(--wp--preset--color--light-anthrazit) !important;
	font-weight: 300 !important;
	opacity: 1;
}

/* ---------- Meta-Texte: SKU / Shipping / Tax (15px / 500 / #959595) ---------- */
body.single-product .product_meta,
body.single-product .product_meta .sku_wrapper,
body.single-product .product_meta .sku,
body.single-product .product_meta .posted_in,
body.single-product .product_meta .tagged_as,
body.single-product .shipping,
body.single-product .woocommerce-shipping-destination,
body.single-product .woocommerce-price-suffix,
body.single-product .tax_status,
body.single-product .wc-gzd-additional-info,
body.single-product .delivery-time-info,
body.single-product .shipping-costs-info,
body.single-product .tax-info,
body.single-product .price-unit,
body.single-product .unit-price-wrapper {
	font-family: var(--wp--preset--font-family--inter, 'Inter', sans-serif);
	font-size: 15px;
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: 0;
	color: var(--wp--preset--color--light-anthrazit);
}

/* ---------- Stock-Status + Cart-Form Labels ---------- */
body.single-product .stock,
body.single-product .stock.in-stock,
body.single-product .stock.out-of-stock,
body.single-product .quantity label,
body.single-product .hitop-single-product__add-to-cart .quantity label {
	font-family: var(--wp--preset--font-family--inter, 'Inter', sans-serif);
	font-size: 15px;
	font-weight: 500;
	color: var(--wp--preset--color--light-anthrazit);
}

/* ---------- Breadcrumbs: Meta-Text ---------- */
body.single-product .hitop-product-breadcrumbs,
body.single-product .hitop-product-breadcrumbs a,
body.single-product .wp-block-woocommerce-breadcrumbs,
body.single-product .wp-block-woocommerce-breadcrumbs a {
	font-family: var(--wp--preset--font-family--inter, 'Inter', sans-serif);
	font-size: 15px;
	font-weight: 500;
	color: var(--wp--preset--color--light-anthrazit);
	letter-spacing: 0;
}

/* ---------- Responsive: Mobile-Werte ---------- */
@media (max-width: 781px) {
	body.single-product .hitop-single-product__title,
	body.single-product h1.product_title,
	body.single-product .wp-block-post-title {
		font-size: 32px;
	}
	body.single-product .hitop-single-product__description-heading,
	body.single-product .hitop-single-product__cross-sells-heading,
	body.single-product .woocommerce-tabs h2,
	body.single-product .related.products > h2,
	body.single-product .upsells.products > h2,
	body.single-product .cross-sells > h2 {
		font-size: 26px;
	}
	body.single-product .hitop-single-product p,
	body.single-product .hitop-single-product li,
	body.single-product .hitop-single-product__summary,
	body.single-product .hitop-single-product__summary p,
	body.single-product .entry-content p,
	body.single-product .entry-content li,
	body.single-product .entry-content > div[style] p,
	body.single-product .entry-content > div[style] li {
		font-size: 20px !important;
	}
	body.single-product .hitop-single-product__price,
	body.single-product .hitop-single-product__price .woocommerce-Price-amount {
		font-size: 36px !important;
	}
}

/* Erfahrungsberichte Video-Cards */
.hitop-video-card {
	overflow: hidden;
}
.hitop-video-card__media {
	position: relative;
	margin: 0;
	overflow: hidden;
	border-top-left-radius: 30px;
	border-top-right-radius: 30px;
	aspect-ratio: 16 / 9;
	background: var(--wp--preset--color--dark-anthrazit);
}
.hitop-video-card__link {
	position: absolute;
	inset: 0;
	display: block;
	text-decoration: none;
	color: inherit;
}
.hitop-video-card__thumb {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 300ms ease, filter 200ms ease;
}
.hitop-video-card__link:hover .hitop-video-card__thumb,
.hitop-video-card__link:focus-visible .hitop-video-card__thumb {
	transform: scale(1.03);
	filter: brightness(0.9);
}
.hitop-video-card__play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 68px;
	height: 48px;
	pointer-events: none;
	filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.35));
	transition: transform 200ms ease;
}
.hitop-video-card__link:hover .hitop-video-card__play,
.hitop-video-card__link:focus-visible .hitop-video-card__play {
	transform: translate(-50%, -50%) scale(1.08);
}
.hitop-video-card__play svg {
	display: block;
	width: 100%;
	height: 100%;
}
.hitop-video-card__play-bg {
	transition: fill 200ms ease;
}
.hitop-video-card__link:hover .hitop-video-card__play-bg {
	fill: var(--wp--preset--color--brand-hover);
}
.hitop-video-card__badge {
	position: absolute;
	top: 12px;
	right: 12px;
	background: var(--wp--preset--color--brand-primary);
	color: var(--wp--preset--color--white);
	font-size: 12px;
	font-weight: 700;
	padding: 4px 12px;
	border-radius: 4px;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	z-index: 2;
}
.hitop-video-card__link:focus-visible {
	outline: 3px solid var(--wp--preset--color--brand-primary);
	outline-offset: -3px;
}
.hitop-video-card__media.is-playing {
	background: var(--wp--preset--color--black);
}
.hitop-video-card__iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}
@media (max-width: 781px) {
	.hitop-video-card__play {
		width: 54px;
		height: 38px;
	}
	.hitop-video-card__badge {
		font-size: 11px;
		padding: 3px 8px;
	}
}

/* Platzhalter fuer noch nicht gepflegte Bilder in Pattern-Gerueste
 * (Trust-Row-Icons, Webshop-Hero, Warum-Mieten-Icons, Zubehoer-Teaser, etc.)
 * Redakteur sieht sofort "Bild einfuegen" statt Broken-Image-Icon.
 */
.wp-block-image:has(img[src=""]),
.wp-block-image:has(img:not([src])) {
	min-height: 120px;
	background: repeating-linear-gradient(
		45deg,
		var(--wp--preset--color--light-grey) 0,
		var(--wp--preset--color--light-grey) 8px,
		#eeeeee 8px,
		#eeeeee 16px
	);
	border: 2px dashed var(--wp--preset--color--grey);
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
}
.wp-block-image:has(img[src=""])::before,
.wp-block-image:has(img:not([src]))::before {
	content: "Bild einfuegen";
	color: var(--wp--preset--color--light-anthrazit);
	font-family: 'Inter', sans-serif;
	font-size: 14px;
	font-weight: 500;
	letter-spacing: -0.02em;
}
.wp-block-image:has(img[src=""]) img,
.wp-block-image:has(img:not([src])) img {
	display: none;
}

/* ==========================================================================
   Produktseite (Page 47) – Mieten/Kaufen Cards Defensive Styling
   Figma: 1104:3260 / 1104:3261, Radius 30px, Badges Inter Medium 20,
   "Empfohlen zum Einstieg" auf #D83F27, "Sofort Eigentuemer" auf #2c2c2c.
   ========================================================================== */

/* Empty badge pills (content nicht gepflegt): nicht als leere Pille rendern. */
.wp-block-group[style*="border-radius:30px"] > p.has-background:first-child:empty,
.wp-block-group[style*="border-radius:30px"] > p.has-text-color.has-background:first-child:empty {
	display: none;
}

/* Mieten/Kaufen-Karten: gleiche Hoehe + flex fuer Button am Ende */
.wp-block-columns > .wp-block-column > .wp-block-group[style*="border-radius:30px"][style*="background-color:#ffffff"] {
	height: 100%;
	display: flex;
	flex-direction: column;
}

.wp-block-columns > .wp-block-column > .wp-block-group[style*="border-radius:30px"][style*="background-color:#ffffff"] > .wp-block-buttons:last-child {
	margin-top: auto;
}

/* Mieten/Kaufen-Badges: Inter Medium 20, Zeilenhoehe 1.4, kein Letter-Spacing Wunder */
.wp-block-group[style*="border-radius:30px"] > p.has-background,
.wp-block-group[style*="border-radius:30px"] > p.has-text-color.has-background {
	display: inline-block;
	width: fit-content;
	line-height: 1.4;
}

/* ---------- Slider Symptoms: Figma-Height (928px) -----------------------
   Layout-Fix: Die Slides sind in der Figma grosszuegig, Live war das
   Hero-Bild zu klein (272px) und die Slide flach (513px).
   Zielwerte Figma: ca. 880-928px. Wir setzen min-height auf die Slide,
   dehnen die Inner-Columns auf volle Hoehe und lassen das Bild
   object-fit: cover die linke Saeule komplett fuellen.
   -------------------------------------------------------------------- */
.hitop-slider-symptoms .hitop-slider__slide {
	min-height: 880px;
	display: flex;
}

.hitop-slider-symptoms .hitop-slider__slide > .wp-block-columns {
	flex: 1 1 auto;
	align-items: stretch;
	min-height: 880px;
}

.hitop-slider-symptoms .hitop-slider__slide .wp-block-columns > .wp-block-column {
	display: flex;
	flex-direction: column;
}

/* Bild-Saeule: Bild soll die komplette Slide-Hoehe fuellen */
.hitop-slider-symptoms .hitop-slider__slide .wp-block-column:has(> .wp-block-image) {
	padding: 0;
}

.hitop-slider-symptoms .hitop-slider__slide .wp-block-image,
.hitop-slider-symptoms .hitop-slider__slide .wp-block-image figure {
	flex: 1 1 auto;
	height: 100%;
	margin: 0;
	display: block;
}

.hitop-slider-symptoms .hitop-slider__slide .wp-block-image img {
	width: 100%;
	height: 100%;
	min-height: 880px;
	object-fit: cover;
	display: block;
}

/* Text-Saeule: vertikal zentriert, konsistentes Padding */
.hitop-slider-symptoms .hitop-slider__slide .wp-block-column.has-background {
	justify-content: center;
}

/* ==========================================================================
   Mobile Delta-Fixes 2026-04-17 (Figma mobile-* deltas)
   Source: .figma_compare/mobile-*-delta.md (baseline 5f8a27c)
   ========================================================================== */
@media (max-width: 781px) {

	/* --- WCAG 2.5.5 Touch-Targets (min 44x44px) ---
	   Tabs-Buttons, Slider-Arrows + Dots auf Mobile wurden zu klein gerendert. */
	.hitop-tabs__tab {
		min-height: 44px;
		min-width: 44px;
		padding: 10px 18px;
	}

	.hitop-slider__button,
	.hitop-slider__button--prev,
	.hitop-slider__button--next {
		min-width: 44px;
		min-height: 44px;
		width: 44px;
		height: 44px;
	}

	/* Dots: Visuelle Groesse bleibt 20px, Touch-Area via padding auf 44px.
	 * Border 2px laut Figma 1104:1980 (Mobile Expertenteam Pagination). */
	.hitop-slider__dot {
		box-sizing: content-box;
		padding: 12px; /* 20px + 2*12px = 44px Touch-Target */
		background-clip: content-box;
		border: 2px solid var(--wp--preset--color--grey, #D9D9D9);
		/* Visueller Durchmesser bleibt via width/height (1.25rem = 20px) erhalten */
	}
	.hitop-slider__dot.is-active {
		background-clip: content-box;
	}

	/* --- Slider-Facts H3 / Stat auf Mobile: Figma = 80px ---
	   Live-Baseline war 48px (clamp min) -- auf Figma-Mobile-Wert ziehen. */
	.hitop-slider-facts h3,
	.hitop-slider-facts .wp-block-heading,
	.hitop-fact-slide__stat {
		font-size: 80px !important;
		line-height: 1 !important;
	}

	/* --- Footer Template-Part Wrapper: Background #2C2C2C ---
	   `.hitop-footer` hat bg korrekt, aber Playwright liest den aeusseren
	   <footer class="alignfull wp-block-template-part"> als Section-Anker;
	   dieser war transparent. Setze bg auf den Wrapper fuer Delta-Kompatibilitaet. */
	footer.alignfull.wp-block-template-part,
	body > .wp-site-blocks > footer.wp-block-template-part {
		background: var(--wp--preset--color--dark-anthrazit);
	}

	/* --- Sticky-Buttons auf Mobile sichtbar halten ---
	   Figma zeigt "Jetzt Testen" + "Beratung" als Floating-Bar.
	   CSS existiert (.hitop-sticky-buttons) -- hier nur Stacking-Context sichern. */
	.hitop-sticky-buttons {
		display: flex !important;
	}

	/* --- Produktseite: Mieten/Kaufen Cards Mobile-Stacking ---
	   Delta +503px zeigt dass Cards auf Mobile zu viel Padding/Gap haben.
	   Kompakter gap + reduziertes Padding bringt Hoehe naeher an Figma. */
	.hitop-rent-buy-cards,
	.wp-block-hitop-rent-buy-cards {
		gap: 16px !important;
	}

	.hitop-rent-buy-card,
	.wp-block-hitop-rent-buy-cards .hitop-card {
		padding: 24px 20px !important;
	}

	/* --- Bug-Fix 2026-04-17: Slider-Viewport Padding reduzieren auf Mobile ---
	   slider-base.scss setzt padding-inline: 4.5rem (72px) fuer Desktop-Arrow-
	   Gutters. Auf 393px Viewport frisst das fast den kompletten Platz
	   (234px Container statt 378px). Arrows sind auf Mobile sowieso 44px, also
	   reicht 1rem (16px) Gutter. */
	.hitop-slider .hitop-slider__viewport {
		padding-inline: 1rem;
	}
	.hitop-slider-facts .hitop-slider__viewport {
		padding-inline: 0; /* Facts war schon 0, sicherstellen */
	}

	/* --- Bug-Fix 2026-04-17: Slider-Symptoms Mobile Text-Column 77px Bug ---
	   Ursache: .wp-block-column.has-background hat Desktop-Padding 80px,
	   bei 237px Spalten-Breite bleiben nur 77px Content-Flaeche -> jedes Wort
	   bricht auf eigene Zeile. Fix: reduziertes Padding + Spalte nutzt volle
	   Slide-Breite + Image-min-height 880px aufheben (zu gross fuer Mobile). */
	.hitop-slider-symptoms .hitop-slider__slide {
		min-height: 0;
		display: block;
	}
	.hitop-slider-symptoms .hitop-slider__slide > .wp-block-columns {
		min-height: 0;
		flex-direction: column;
		gap: 0;
	}
	.hitop-slider-symptoms .hitop-slider__slide .wp-block-columns > .wp-block-column {
		flex-basis: 100% !important;
		width: 100%;
	}
	.hitop-slider-symptoms .hitop-slider__slide .wp-block-column.has-background {
		/* Inline-Style aus Gutenberg setzt padding:80px + flex-basis:50%,
		   muss mit !important ueberschrieben werden. */
		padding: 32px 24px !important;
	}
	.hitop-slider-symptoms .hitop-slider__slide .wp-block-image img {
		min-height: 0;
		height: auto;
		max-height: 260px;
	}
	.hitop-slider-symptoms .hitop-slider__slide .wp-block-image,
	.hitop-slider-symptoms .hitop-slider__slide .wp-block-image figure {
		height: auto;
	}

}

/* Footer-Wrapper bg auch auf Desktop sicherstellen (Template-Part-Selector) */
footer.alignfull.wp-block-template-part,
body > .wp-site-blocks > footer.wp-block-template-part {
	background: var(--wp--preset--color--dark-anthrazit);
}

/* ==========================================================================
   Menu-Audit Fixes (2026-04-17) — Delta c14109c
   - Apotheken-Pill Top-Level-Link
   - Wissen-Dropdown A-Z Alphabet-Grid
   - Mobile-Header-Reihenfolge (Burger links, Logo mitte, Cart rechts)
   - Mobile Search sichtbar, CTA ausgeblendet
   - Mobile Accordion (siehe theme.js)
   - Chevrons als expand/collapse Indicator
   - Logo im offenen Burger-Menu
   ========================================================================== */

/* --- 1. Apotheken-Pill (Top-Level-Link, direkt hinter Logo) --- */
.hitop-nav.wp-block-navigation .wp-block-navigation-item.hitop-nav__pill > .wp-block-navigation-item__content {
	border: 1px solid var(--wp--preset--color--dark-anthrazit, var(--wp--preset--color--dark-anthrazit));
	border-radius: 34px;
	padding: 8px 18px;
	font-size: 14px;
	font-weight: 500;
	letter-spacing: -0.02em;
	line-height: 1.2;
	white-space: nowrap;
	transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}
.hitop-nav.wp-block-navigation .wp-block-navigation-item.hitop-nav__pill:hover > .wp-block-navigation-item__content,
.hitop-nav.wp-block-navigation .wp-block-navigation-item.hitop-nav__pill > .wp-block-navigation-item__content:focus {
	background: var(--wp--preset--color--dark-anthrazit, var(--wp--preset--color--dark-anthrazit));
	color: var(--wp--preset--color--white);
	border-bottom-color: var(--wp--preset--color--dark-anthrazit, var(--wp--preset--color--dark-anthrazit));
}

/* --- 2. Wissen Mega-Menu: Alphabet-Grid (A-Z Buttons) --- */
.hitop-nav.wp-block-navigation .hitop-megamenu-trigger--wissen > .wp-block-navigation__submenu-container {
	column-count: initial !important;
	column-gap: 0 !important;
	column-rule: none !important;
	display: grid !important;
	grid-template-columns: repeat(9, minmax(0, 1fr));
	gap: 8px;
	padding: 40px 48px !important;
	width: 640px;
	max-width: 640px;
}
.hitop-nav.wp-block-navigation .hitop-megamenu-trigger--wissen > .wp-block-navigation__submenu-container > .hitop-megamenu-heading {
	grid-column: 1 / -1;
	padding-bottom: 8px;
}
.hitop-nav.wp-block-navigation .hitop-megamenu-trigger--wissen > .wp-block-navigation__submenu-container > .hitop-megamenu-more {
	grid-column: 1 / -1;
	padding-top: 12px;
	border-top: 1px solid var(--wp--preset--color--grey, var(--wp--preset--color--grey));
	margin-top: 4px;
}
.hitop-nav.wp-block-navigation .hitop-megamenu-letter > .wp-block-navigation-item__content {
	display: flex !important;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	padding: 0 !important;
	border: 1px solid var(--wp--preset--color--grey, var(--wp--preset--color--grey));
	border-radius: 50%;
	font-size: 16px;
	font-weight: 700;
	color: var(--wp--preset--color--dark-anthrazit, var(--wp--preset--color--dark-anthrazit));
	transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}
.hitop-nav.wp-block-navigation .hitop-megamenu-letter > .wp-block-navigation-item__content:hover {
	background: var(--wp--preset--color--primary, var(--wp--preset--color--brand-primary));
	color: var(--wp--preset--color--white);
	border-color: var(--wp--preset--color--primary, var(--wp--preset--color--brand-primary));
}

/* --- 3. Desktop-Header: Pill darf niemals 1024er Dropdown auslösen --- */
.hitop-nav.wp-block-navigation .wp-block-navigation-item.hitop-nav__pill {
	padding: 0;
}

/* --- 4. Mobile Header Reihenfolge (Burger links, Logo mitte, Actions rechts) --- */
@media (max-width: 1024px) {
	.hitop-header__inner {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
	}
	/* Hamburger-Trigger (via wp:navigation) rendert sich in .hitop-nav — setze order:1 (links) */
	.hitop-header__inner > .hitop-nav {
		order: 1;
		flex: 0 0 auto;
		margin: 0 !important;
	}
	/* Logo in die Mitte */
	.hitop-header__inner > .hitop-header__logo {
		order: 2;
		margin: 0 auto !important;
		flex: 0 1 auto;
	}
	/* Actions (Search, Cart) ganz rechts */
	.hitop-header__inner > .hitop-header__actions {
		order: 3;
		display: flex !important;   /* Aufheben des zuvor gesetzten display:none */
		flex: 0 0 auto;
		gap: 12px;
	}
	/* Search-Icon auf Mobile sichtbar machen (war versteckt) */
	.hitop-header__icon--search {
		display: inline-flex !important;
	}
	/* Webshop-CTA aus Mobile-Header entfernen (Figma hat ihn nicht) */
	.hitop-header__cta-wrap {
		display: none !important;
	}
	/* Cart sichtbar halten */
	.hitop-header__icon--cart {
		display: inline-flex !important;
	}
}

/* --- 5. Mobile Accordion (Sub-Menus collapsed per Default) --- */
@media (max-width: 1024px) {
	/* Top-Level Submenu-Trigger: bekommen eigene Chevron-Pseudo + zeigen Sub-Menu nur bei .is-expanded
	   Bug-Fix 2026-04-17: Frueher display:none -> display:flex, was nicht animierbar war
	   (Jank: Menu springt sofort auf 466px auf). Jetzt max-height-Transition mit
	   realistischem Ziel-Wert (700px ~ 1.5x natural height), display bleibt flex. */
	.hitop-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu > .wp-block-navigation__submenu-container {
		display: flex !important;
		flex-direction: column;
		max-height: 0 !important;
		overflow: hidden !important;
		opacity: 0;
		padding-top: 0 !important;
		padding-bottom: 0 !important;
		transition: max-height 0.32s ease-out, opacity 0.2s ease-out, padding 0.2s ease-out;
		will-change: max-height, opacity;
	}
	.hitop-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu.is-expanded > .wp-block-navigation__submenu-container {
		display: flex !important;
		max-height: 1200px !important;
		overflow: hidden !important;
		opacity: 1;
		padding-top: 8px !important;
		padding-bottom: 16px !important;
		transition: max-height 0.35s ease-out, opacity 0.25s ease-in 0.05s, padding 0.25s ease-out;
	}
	/* Chevron auf Top-Level mit Submenu */
	.hitop-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-submenu > .wp-block-navigation-item__content {
		display: flex !important;
		align-items: center;
		justify-content: space-between !important;
		padding-right: 8px;
	}
	.hitop-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-submenu > .wp-block-navigation-item__content::after {
		content: '';
		display: inline-block;
		width: 12px;
		height: 12px;
		margin-left: 12px;
		background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%232c2c2c' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
		background-repeat: no-repeat;
		background-position: center;
		background-size: 12px 12px;
		transition: transform 0.2s ease-out;
		flex-shrink: 0;
	}
	.hitop-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-submenu.is-expanded > .wp-block-navigation-item__content::after {
		transform: rotate(180deg);
	}
	/* Alphabet-Grid im Mobile: normale Liste */
	.hitop-nav .wp-block-navigation__responsive-container.is-menu-open .hitop-megamenu-trigger--wissen > .wp-block-navigation__submenu-container {
		display: none !important;
	}
	.hitop-nav .wp-block-navigation__responsive-container.is-menu-open .hitop-megamenu-trigger--wissen.is-expanded > .wp-block-navigation__submenu-container {
		display: grid !important;
		grid-template-columns: repeat(6, 1fr) !important;
		gap: 6px !important;
		width: 100% !important;
		max-width: 100% !important;
		padding: 8px 0 16px !important;
	}

	/* Pill-Style auch im Burger-Menu dezent halten */
	.hitop-nav .wp-block-navigation__responsive-container.is-menu-open .hitop-nav__pill > .wp-block-navigation-item__content {
		border: 0;
		padding: 16px 0;
		font-weight: 700;
	}

	/* --- 6. Logo im offenen Burger-Menu sichtbar (oben links) --- */
	.hitop-nav .wp-block-navigation__responsive-container.is-menu-open::before {
		content: '';
		position: absolute;
		top: 18px;
		left: 24px;
		width: 140px;
		height: 30px;
		background-image: url('../images/logo-hitop-farbig.png');
		background-repeat: no-repeat;
		background-size: contain;
		background-position: left center;
		z-index: 1;
		pointer-events: none;
	}
}

/* ==========================================================================
   Bug-Fix 2026-04-17: Mobile Burger Overlay — fully opaque + proper z-index
   User-Bug: Page-Content schimmerte durch transparentes Overlay durch, weil
   Core-WP-Style "overflow: initial" die Accordion-max-height:0 unwirksam machte
   und submenu-Children mit static position aus dem container-Box rausflossen.
   Fix oben (Accordion) erzwingt overflow:hidden. Hier zusaetzlich Overlay-BG
   bekraeftigen damit auch bei unerwarteten Theme-Overrides kein Durchschimmern.
   ========================================================================== */
@media (max-width: 1024px) {
	.hitop-nav .wp-block-navigation__responsive-container.is-menu-open,
	.hitop-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
		background-color: var(--wp--preset--color--white) !important;
		z-index: 100000;
	}
}

/* ==========================================================================
   Bug-Fix 2026-04-17: Carousel Gap & Card-Heights auf Mobile
   ========================================================================== */
@media (max-width: 781px) {
	/* Bug 2: Embla-loop benoetigt margin-right auf Slides statt flex-gap am
	   Container. CSS-gap wird bei transform-gewickelten Clones nicht zwischen
	   DOM-Order-last und DOM-Order-first appliziert -> letzte Slide klebte an
	   erster. Fix: gap:0 am Container, margin-right auf jedem Slide. */
	.wp-block-hitop-carousel-cards-3v1 .hitop-slider__container,
	.wp-block-hitop-carousel-cards-3v2 .hitop-slider__container,
	.wp-block-hitop-carousel-cards-2 .hitop-slider__container {
		gap: 0 !important;
		align-items: stretch;
	}

	.wp-block-hitop-carousel-cards-3v1 .hitop-slider__slide,
	.wp-block-hitop-carousel-cards-3v2 .hitop-slider__slide,
	.wp-block-hitop-carousel-cards-2 .hitop-slider__slide {
		margin-right: 16px;
		display: flex;
		height: auto;
	}

	/* Bug 3: Card (wp-block-group child of slide) fills slide height.
	   Slide ist bereits stretch (flex-container align-items:stretch),
	   aber innere Card muss height:100% haben um die Slide auszufuellen. */
	.wp-block-hitop-carousel-cards-3v1 .hitop-slider__slide > .wp-block-group,
	.wp-block-hitop-carousel-cards-3v2 .hitop-slider__slide > .wp-block-group,
	.wp-block-hitop-carousel-cards-2 .hitop-slider__slide > .wp-block-group {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
	}
}

/* Mobile (Figma 393px): 1-Card-Fullwidth, KEIN Peek mehr.
 * Override fuer den 781px-Block oben (.hitop-slider:not(.hitop-slider-facts) ...
 * setzt flex: 0 0 85% mit Specificity 0,3,0). Wir matchen dieselbe Specificity
 * mit `.hitop-slider:not(...) .wp-block-hitop-carousel-cards-* ...` ist nicht
 * direkt moeglich; daher Specificity per zwei Klassen am gleichen Element
 * (.hitop-slider.hitop-carousel-3v1 ...) hochgehoben. */
@media (max-width: 600px) {
	.hitop-slider.hitop-carousel-3v1 .hitop-slider__slide,
	.hitop-slider.hitop-carousel-3v2 .hitop-slider__slide,
	.hitop-slider.hitop-carousel-2 .hitop-slider__slide {
		margin-right: 0 !important;
		flex: 0 0 100% !important;
	}
	/* Fix 2026-05-12: Card-Inhalt klebt zu sehr am Slider-Rand auf Mobile.
	 * Section nutzt globales `gutter` padding (32px) — Slider-Viewport bekommt zusätzlich
	 * 16px inneres Padding, damit Cards nicht direkt am Section-Rand kleben. */
	.hitop-slider.hitop-carousel-3v1 .hitop-slider__viewport,
	.hitop-slider.hitop-carousel-3v2 .hitop-slider__viewport,
	.hitop-slider.hitop-carousel-2 .hitop-slider__viewport {
		padding: 0 16px;
	}
}

/* hitop-text-bild-cta --variant-2 + .hitop-vortrag-cta (Aerztesuche/Apotheken
 * Online-Vortrag-CTA): Desktop ist 2-Spaltig (links Text, rechts Bild). Auf
 * Mobile fordert Figma dass das BILD ZUERST kommt (oben), Text-Block drunter.
 * Live-Markup hat Text als ersten Column-Child — wir kehren die Stack-Order
 * via flex column-reverse um (greift erst sobald wp-block-columns auf Mobile
 * in column wraps, was WP automatisch tut bei <781px). */
@media (max-width: 781px) {
	.hitop-text-bild-cta--variant-2 .wp-block-columns,
	.hitop-text-bild-cta--variant-2 > .wp-block-columns,
	.hitop-vortrag-cta .wp-block-columns,
	.hitop-vortrag-cta > .wp-block-columns {
		flex-direction: column-reverse !important;
	}
}

/* Webshop-Section-Headings: Figma sagt Bold-700, Live hat im post_content
 * Inline-Style font-weight:300 hardcoded. theme.json-Default kann Inline-
 * Style nicht ueberschreiben — wir forcen die Section-spezifischen H2 auf
 * 700 via !important. Wirkt nur fuer Section-Headings, nicht fuer Mieten/
 * Kaufen-Pricing-Cards (die haben absichtlich 300 fuer Label-Style). */
.hitop-template-produkt-vorteile h2.wp-block-heading,
.hitop-webshop-zubehor-section h2.wp-block-heading,
.hitop-webshop-zubehor-section .hitop-zubehor-cards__heading,
.hitop-fuer-wen-geeignet h2.wp-block-heading {
	font-weight: 700 !important;
}

/* Aerztesuche / Apotheken Anmelden-Button: Figma zeigt Solid-Brand-Pill mit
 * Caps-Label "JETZT ANMELDEN!". Live-Markup hat outline + lowercase. Wir
 * forcen Solid + Uppercase via CSS — DB-Content bleibt unangetastet. */
.hitop-text-bild-cta--variant-2 .wp-block-button .wp-block-button__link,
.hitop-text-bild-cta--variant-2 .wp-block-button.is-style-outline .wp-block-button__link,
.hitop-vortrag-cta .wp-block-button .wp-block-button__link,
.hitop-vortrag-cta .wp-block-button.is-style-outline .wp-block-button__link {
	background-color: var(--wp--preset--color--brand-primary) !important;
	color: #fff !important;
	border-color: var(--wp--preset--color--brand-primary) !important;
	text-transform: uppercase !important;
	font-weight: 700 !important;
	letter-spacing: -0.03em !important;
}

.hitop-text-bild-cta--variant-2 .wp-block-button .wp-block-button__link:hover,
.hitop-text-bild-cta--variant-2 .wp-block-button.is-style-outline .wp-block-button__link:hover,
.hitop-vortrag-cta .wp-block-button .wp-block-button__link:hover,
.hitop-vortrag-cta .wp-block-button.is-style-outline .wp-block-button__link:hover {
	background-color: #ab1700 !important;
	border-color: #ab1700 !important;
}

/* ==========================================================================
   Bug 5 – Mobile Checkout Delta (Figma 3044:29 vs Live /kasse/)
   ========================================================================== */

/* Fix 1: Sticky "Jetzt testen" CTA verdeckt das Checkout-Formular auf Mobile.
   Figma zeigt den CTA nicht auf /kasse/ — hier komplett unterdrücken,
   zusätzlich vorsorglich im Warenkorb (User ist bereits kaufwillig). */
body.woocommerce-checkout .hitop-sticky-buttons .hitop-sticky-cta,
body.woocommerce-cart .hitop-sticky-buttons .hitop-sticky-cta {
	display: none !important;
}

/* Fix 2: Gutschein-Info-Banner auf Step 1 (Persönliche Daten) ausblenden.
   Figma hat den Gutschein nur auf Warenkorb + Übersicht — NICHT auf Step 1
   "Ihre Daten". Germanized emittiert keine step-spezifische Body-Klasse,
   also greifen wir direkt per Position: der Coupon-Toggle steht VOR
   h3.woocommerce-billing-fields__title im DOM. Auf Mobile komplett aus
   dem Checkout entfernen — der Gutschein bleibt im Warenkorb erreichbar.
   Desktop behält den Toggle, da dort ausreichend Platz ist. */
@media (max-width: 781px) {
	body.woocommerce-checkout .woocommerce-form-coupon-toggle,
	body.woocommerce-checkout form.checkout_coupon {
		display: none !important;
	}
}

/* Fix 3: Container-Padding auf Mobile von 48px/16px → 24px/12px reduzieren,
   damit die Input-Felder näher an die Figma-Breite (365px von 393px = 28px
   Gesamt-Margin) kommen. Aktuell 32px horizontal × 2 = 64px Padding. */
@media (max-width: 781px) {
	body.woocommerce-checkout .hitop-checkout-page__inner,
	body.woocommerce-cart .hitop-cart-page__inner {
		padding-left: 12px !important;
		padding-right: 12px !important;
		padding-top: 24px !important;
		padding-bottom: 24px !important;
	}
}

/* Fix 4: Progress-Bar Step-Titel auf Mobile nicht umbrechen/abschneiden
   ("Persönliche Daten…langsart" durch überlappende Pills). Figma zeigt
   Icons nebeneinander verbunden mit Linien — die Titel gehoeren als
   kleine Captions darunter, nicht überlappend. */
@media (max-width: 781px) {
	.woocommerce-multistep-checkout ul.nav-wizard {
		padding: 0 8px !important;
		margin: 24px auto 32px !important;
	}
	.woocommerce-multistep-checkout ul.nav-wizard .step-title,
	.step-nav.nav-wizard .step-title {
		font-size: 11px !important;
		white-space: normal !important;
		overflow: visible !important;
		text-overflow: unset !important;
		width: auto !important;
		max-width: 90px !important;
		line-height: 1.2 !important;
		position: static !important;
		bottom: auto !important;
	}
}

/* ==========================================================================
   Bug 5b — Mobile Checkout Visual-Diff Audit 2026-05-09 (Figma 3044:1095)
   ==========================================================================
   Drei Quick-Fixes aus dem Audit, alle CSS-only:
   K1 = Trusted-Shops-Badge auf /kasse/ ausblenden (überlappt Geburtsdatum-Label)
   K2 = Vorname/Nachname 1-Spalte auf Mobile (Figma plant 1-Spalte vertikal)
   K7 = Next-Step-Button full-width Pill auf Mobile (Figma 351px pill 34px radius)
   Field-Order, Firmenname, Wohnung, Telefon-Pflicht, Step-Namen → PHP-Filter-Sprint.
   ========================================================================== */

/* K1: Trusted-Shops-Trustbadge auf Checkout-Pages ausblenden — der Sticky-Badge
   links überdeckt auf Mobile Form-Felder im Step 1. Auf Desktop ist der Badge OK
   (Sidebar-Platz), nur Mobile + Cart/Checkout problematisch. Konsistent mit
   Sticky-CTA-Hide aus Fix 1 oben.
   Trusted-Shops rendert dynamische IDs (`minimized-trustbadge-{hash}`) und
   einen iframe-Container — wir blenden alle Varianten aus. */
@media (max-width: 781px) {
	body.woocommerce-checkout [id^="minimized-trustbadge-"],
	body.woocommerce-checkout [id^="trustbadge-container-"],
	body.woocommerce-checkout #trustbadge-iframe,
	body.woocommerce-checkout .etrusted-trustbadge,
	body.woocommerce-cart [id^="minimized-trustbadge-"],
	body.woocommerce-cart [id^="trustbadge-container-"],
	body.woocommerce-cart #trustbadge-iframe,
	body.woocommerce-cart .etrusted-trustbadge {
		display: none !important;
		visibility: hidden !important;
	}
}

/* K2 wurde 2026-05-09 nach Production-Vergleich (hitop-therapie.de) zurueckgerollt:
   Production zeigt Vorname/Nachname als 2-Spalten-Grid auch auf Mobile.
   WC-Default-Verhalten ist also korrekt; der "Bug" war reine Figma-Stylistik. */

/* K7: Next-Step-Button auf Mobile full-width + Pill-Radius matching Figma.
   Aktuell ~226px zentriert mit 7px Radius — Figma plant 351px breit (full-width
   minus 24px container-padding) mit 34px pill-radius matching theme button-style.
   Desktop hat seinen eigenen Pill-Override @ 782px+ (siehe oben). */
@media (max-width: 781px) {
	body.woocommerce-checkout .woocommerce button.next-step-button.button.alt,
	body.woocommerce-checkout .woocommerce button[name="woocommerce_gzdp_checkout_next_step"].button.alt,
	body.woocommerce-checkout .woocommerce button#place_order.button.alt {
		width: 100% !important;
		max-width: none !important;
		margin: 24px 0 0 !important;
		border-radius: 34px !important;
		padding: 18px 24px !important;
		font-size: 14px !important;
		font-weight: 700 !important;
		letter-spacing: 0.5px !important;
		min-height: 56px !important;
		line-height: 1 !important;
	}
}

/* ============================================================
   CART + THANK-YOU — Visual Polish (Pre-Customer-Review)
   ============================================================
   Scope: body.woocommerce-cart, body.woocommerce-order-received
          (Thank-You sits on page-id-9 with kasse/order-received/)
   - Brand-Buttons statt Grau
   - Price/Subtotal rechtsbuendig
   - Thumbnail 100px
   - Mobile vertikal-Stack sauber
   - Cart-Empty als Empty-State-Card
   - Thank-You Desktop-Content-Breite gekapselt
   ============================================================ */

/* ---- CART: Page-Header wiederherstellen (war unsichtbar) ---- */
body.woocommerce-cart .hitop-cart-page__content {
	padding-top: var(--wp--preset--spacing--xl) !important;
}

/* ---- CART DESKTOP: Tabelle polieren ---- */
body.woocommerce-cart table.shop_table.cart {
	background: var(--wp--preset--color--white) !important;
	border-radius: 12px !important;
	border: 1px solid var(--wp--preset--color--grey) !important;
	box-shadow: 0 1px 3px rgba(0,0,0,0.04) !important;
	overflow: hidden !important;
	font-size: 16px !important;
}
body.woocommerce-cart table.shop_table.cart thead th {
	background: var(--wp--preset--color--light-grey) !important;
	font-size: 12px !important;
	font-weight: 600 !important;
	letter-spacing: 0.5px !important;
	text-transform: uppercase !important;
	color: var(--wp--preset--color--light-anthrazit) !important;
	padding: 16px 12px !important;
	border: none !important;
}
body.woocommerce-cart table.shop_table.cart tbody td {
	padding: 20px 12px !important;
	vertical-align: middle !important;
	border: none !important;
	border-top: 1px solid var(--wp--preset--color--grey) !important;
	background: transparent !important;
	font-size: 16px !important;
}
body.woocommerce-cart table.shop_table.cart .cart_item td.product-thumbnail {
	padding-left: 20px !important;
	min-width: 120px !important;
}
body.woocommerce-cart table.shop_table.cart img {
	width: 100px !important;
	height: 100px !important;
	border-radius: 12px !important;
	object-fit: cover !important;
	background: var(--wp--preset--color--light-grey) !important;
}
body.woocommerce-cart table.shop_table.cart .cart_item .product-name {
	font-weight: 500 !important;
	color: var(--wp--preset--color--heading-text) !important;
	font-size: 16px !important;
}
body.woocommerce-cart table.shop_table.cart .cart_item .product-name a {
	color: var(--wp--preset--color--heading-text) !important;
	text-decoration: none !important;
}
body.woocommerce-cart table.shop_table.cart .cart_item .product-name a:hover {
	color: var(--wp--preset--color--brand-primary) !important;
}
body.woocommerce-cart table.shop_table.cart .cart_item .product-price,
body.woocommerce-cart table.shop_table.cart .cart_item .product-subtotal {
	text-align: right !important;
	font-weight: 500 !important;
	color: var(--wp--preset--color--heading-text) !important;
	font-size: 16px !important;
	padding-right: 20px !important;
}
body.woocommerce-cart table.shop_table.cart .cart_item .product-subtotal {
	font-weight: 700 !important;
}
body.woocommerce-cart table.shop_table.cart .cart_item .product-remove {
	width: 40px !important;
	padding: 0 !important;
}
body.woocommerce-cart table.shop_table.cart .cart_item .product-remove a.remove {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 32px !important;
	height: 32px !important;
	border-radius: 50% !important;
	background: var(--wp--preset--color--light-grey) !important;
	color: var(--wp--preset--color--light-anthrazit) !important;
	font-size: 18px !important;
	line-height: 1 !important;
	position: static !important;
	transition: all 0.15s ease !important;
}
body.woocommerce-cart table.shop_table.cart .cart_item .product-remove a.remove:hover {
	background: var(--wp--preset--color--brand-primary) !important;
	color: var(--wp--preset--color--white) !important;
}

/* ---- CART: Actions-Row (Gutschein + Update) ---- */
body.woocommerce-cart table.shop_table.cart .actions {
	background: transparent !important;
	padding: 20px !important;
	border-top: 1px solid var(--wp--preset--color--grey) !important;
}
body.woocommerce-cart table.shop_table.cart .actions td {
	padding: 0 !important;
	border: none !important;
	background: transparent !important;
}
body.woocommerce-cart .coupon {
	display: inline-flex !important;
	gap: 8px !important;
	align-items: center !important;
}
body.woocommerce-cart .coupon .input-text {
	width: 200px !important;
	height: 48px !important;
	padding: 0 16px !important;
	font-size: 14px !important;
	border-radius: 30px !important;
	border: 1px solid var(--wp--preset--color--grey) !important;
	background: var(--wp--preset--color--white) !important;
}
body.woocommerce-cart .coupon button[name="apply_coupon"],
body.woocommerce-cart .coupon button.button {
	background: var(--wp--preset--color--white) !important;
	color: var(--wp--preset--color--heading-text) !important;
	border: 1px solid var(--wp--preset--color--heading-text) !important;
	height: 48px !important;
	padding: 0 24px !important;
	border-radius: 30px !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.5px !important;
	box-shadow: none !important;
	cursor: pointer !important;
	transition: all 0.15s ease !important;
}
body.woocommerce-cart .coupon button[name="apply_coupon"]:hover,
body.woocommerce-cart .coupon button.button:hover {
	background: var(--wp--preset--color--heading-text) !important;
	color: var(--wp--preset--color--white) !important;
}
body.woocommerce-cart button[name="update_cart"] {
	background: transparent !important;
	color: var(--wp--preset--color--light-anthrazit) !important;
	border: 1px solid var(--wp--preset--color--grey) !important;
	height: 48px !important;
	padding: 0 24px !important;
	border-radius: 30px !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.5px !important;
	float: right !important;
	cursor: pointer !important;
	transition: all 0.15s ease !important;
}
body.woocommerce-cart button[name="update_cart"]:hover:not([disabled]) {
	background: var(--wp--preset--color--heading-text) !important;
	color: var(--wp--preset--color--white) !important;
	border-color: var(--wp--preset--color--heading-text) !important;
}
body.woocommerce-cart button[name="update_cart"][disabled] {
	opacity: 0.5 !important;
	cursor: not-allowed !important;
}

/* ---- CART: Quantity-Box ---- */
body.woocommerce-cart table.shop_table.cart .product-quantity {
	text-align: center !important;
}
body.woocommerce-cart .quantity input.qty {
	width: 64px !important;
	height: 44px !important;
	border: 1px solid var(--wp--preset--color--grey) !important;
	border-radius: 30px !important;
	text-align: center !important;
}

/* ---- CART: Totals-Box polieren (Checkout-Button = Brand) ---- */
body.woocommerce-cart .cart_totals {
	padding: 28px !important;
}
body.woocommerce-cart .cart_totals h2 {
	font-size: 20px !important;
	text-transform: uppercase !important;
	letter-spacing: 0.5px !important;
}
body.woocommerce-cart .cart_totals .shop_table tr.order-total th,
body.woocommerce-cart .cart_totals .shop_table tr.order-total td {
	font-size: 18px !important;
	font-weight: 700 !important;
	color: var(--wp--preset--color--heading-text) !important;
}
body.woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
	border-radius: 34px !important;
	padding: 18px 32px !important;
	font-size: 14px !important;
	letter-spacing: 0.6px !important;
	text-transform: uppercase !important;
}

/* ---- CART MOBILE (<=781px): Card-Style matched Figma 3044:1010 ----
   Layout pro Item-Card:
     [               × close (absolute top-right) ]
     [ Bild 80px ] [ Titel 600w (Bold)            ]
     [ Preis: ............................. €     ]
     [ Anzahl: ........................... -1+    ]
     [ Zwischensumme: ...................... €    ]
*/
@media (max-width: 781px) {
	body.woocommerce-cart table.shop_table.cart {
		border: none !important;
		background: transparent !important;
		box-shadow: none !important;
	}
	body.woocommerce-cart table.shop_table.cart thead {
		display: none !important;
	}
	body.woocommerce-cart table.shop_table.cart tbody .cart_item {
		display: grid !important;
		grid-template-columns: 80px 1fr !important;
		grid-template-areas:
			"thumb  name"
			"price  price"
			"qty    qty"
			"sub    sub" !important;
		column-gap: 16px !important;
		row-gap: 12px !important;
		align-items: center !important;
		background: var(--wp--preset--color--white) !important;
		border: 1px solid var(--wp--preset--color--grey) !important;
		border-radius: 16px !important;
		padding: 20px 16px !important;
		margin-bottom: 16px !important;
		position: relative !important;
	}
	body.woocommerce-cart table.shop_table.cart .cart_item > td {
		padding: 0 !important;
		border: none !important;
		display: block !important;
		background: transparent !important;
	}
	/* WC-Default-Labels (":" via td::before mit data-title) komplett aus —
	   wir setzen unsere eigenen Labels gezielt pro Zelle. */
	body.woocommerce-cart table.shop_table.cart .cart_item > td::before {
		display: none !important;
		content: none !important;
	}
	/* THUMB + NAME — eine Row, vertikal-zentriert */
	body.woocommerce-cart table.shop_table.cart .cart_item td.product-thumbnail {
		grid-area: thumb !important;
		min-width: 0 !important;
		padding: 0 !important;
		max-width: 80px !important;
	}
	body.woocommerce-cart table.shop_table.cart .cart_item .product-thumbnail img {
		width: 80px !important;
		height: 80px !important;
		border-radius: 8px !important;
		object-fit: contain !important;
		background: var(--wp--preset--color--light-grey) !important;
	}
	body.woocommerce-cart table.shop_table.cart .cart_item .product-name {
		grid-area: name !important;
		padding-right: 32px !important; /* Platz fuer absolutes × */
		font-weight: 600 !important;
		font-size: 16px !important;
		line-height: 1.35 !important;
		color: var(--wp--preset--color--heading-text) !important;
	}
	/* Lieferzeit-Info (Germanized) + Upgrade-Hint kleiner darunter.
	   Breakout aus Title-Spalte (1fr) -> nutzt volle Card-Breite via
	   negativem margin-left (Column-Width 80px + 16px column-gap). */
	body.woocommerce-cart .cart_item .product-name .wc-gzd-cart-info,
	body.woocommerce-cart .cart_item .product-name .item-desc {
		font-weight: 400 !important;
		font-size: 12px !important;
		line-height: 1.35 !important;
		color: var(--wp--preset--color--light-anthrazit) !important;
		margin: 8px -32px 0 -96px !important;
		padding-top: 8px !important;
		border-top: 1px solid var(--wp--preset--color--grey) !important;
	}
	body.woocommerce-cart .cart_item .product-name .wc-gzd-cart-info .delivery-time-data {
		font-weight: 500 !important;
		color: var(--wp--preset--color--heading-text) !important;
	}
	/* Detail-Rows (Preis / Anzahl / Zwischensumme) — Label-LINKS, Wert-RECHTS */
	body.woocommerce-cart table.shop_table.cart .cart_item .product-price,
	body.woocommerce-cart table.shop_table.cart .cart_item .product-quantity,
	body.woocommerce-cart table.shop_table.cart .cart_item .product-subtotal {
		display: flex !important;
		align-items: center !important;
		justify-content: space-between !important;
		text-align: left !important;
		padding: 0 !important;
		font-size: 15px !important;
		color: var(--wp--preset--color--heading-text) !important;
	}
	body.woocommerce-cart table.shop_table.cart .cart_item .product-price::before,
	body.woocommerce-cart table.shop_table.cart .cart_item .product-quantity::before,
	body.woocommerce-cart table.shop_table.cart .cart_item .product-subtotal::before {
		display: inline !important;
		float: none !important;
		margin: 0 !important;
		padding: 0 !important;
		font-weight: 500 !important;
		color: var(--wp--preset--color--heading-text) !important;
		font-size: 15px !important;
	}
	body.woocommerce-cart table.shop_table.cart .cart_item .product-price {
		grid-area: price !important;
	}
	body.woocommerce-cart table.shop_table.cart .cart_item .product-price::before {
		content: "Preis:" !important;
	}
	body.woocommerce-cart table.shop_table.cart .cart_item .product-quantity {
		grid-area: qty !important;
	}
	body.woocommerce-cart table.shop_table.cart .cart_item .product-quantity::before {
		content: "Anzahl:" !important;
	}
	body.woocommerce-cart table.shop_table.cart .cart_item .product-subtotal {
		grid-area: sub !important;
		padding-top: 12px !important;
		border-top: 1px solid var(--wp--preset--color--grey) !important;
		margin-top: 4px !important;
		font-weight: 700 !important;
		font-size: 16px !important;
	}
	body.woocommerce-cart table.shop_table.cart .cart_item .product-subtotal::before {
		content: "Zwischensumme:" !important;
		font-weight: 500 !important;
		font-size: 15px !important;
	}
	/* × Close-Button — absolut top-right innerhalb der Card */
	body.woocommerce-cart table.shop_table.cart .cart_item .product-remove {
		position: absolute !important;
		top: 12px !important;
		right: 12px !important;
		width: auto !important;
		grid-area: unset !important;
	}
	body.woocommerce-cart table.shop_table.cart .cart_item .product-remove a.remove {
		position: static !important;
	}
	/* Actions-Row: Full-Width Stack */
	body.woocommerce-cart table.shop_table.cart .actions,
	body.woocommerce-cart table.shop_table.cart tr.actions td {
		display: block !important;
		padding: 0 !important;
		border-top: none !important;
	}
	body.woocommerce-cart .coupon {
		display: flex !important;
		flex-wrap: wrap !important;
		gap: 8px !important;
		margin-bottom: 12px !important;
		width: 100% !important;
	}
	body.woocommerce-cart .coupon .input-text {
		flex: 1 1 60% !important;
		width: auto !important;
		min-width: 0 !important;
	}
	body.woocommerce-cart .coupon button[name="apply_coupon"] {
		flex: 1 1 35% !important;
		width: auto !important;
	}
	body.woocommerce-cart button[name="update_cart"] {
		width: 100% !important;
		float: none !important;
	}
	/* Totals = full-width */
	body.woocommerce-cart .cart-collaterals,
	body.woocommerce-cart .cart-collaterals .cart_totals {
		width: 100% !important;
		max-width: 100% !important;
	}
	body.woocommerce-cart .wc-proceed-to-checkout {
		width: 100% !important;
	}
	body.woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
		width: 100% !important;
		display: block !important;
		box-sizing: border-box !important;
	}
}

/* ---- CART EMPTY-STATE: Brand-Polish ---- */
body.woocommerce-cart .wc-empty-cart-message {
	max-width: 640px !important;
	margin: 40px auto !important;
	text-align: center !important;
}
body.woocommerce-cart .wc-empty-cart-message .wc-block-components-notice-banner {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	gap: 12px !important;
	background: var(--wp--preset--color--light-grey) !important;
	border: 1px solid var(--wp--preset--color--grey) !important;
	border-radius: 16px !important;
	padding: 40px 32px !important;
	font-size: 18px !important;
	font-weight: 500 !important;
	color: var(--wp--preset--color--heading-text) !important;
	box-shadow: none !important;
	width: 100% !important;
	max-width: 100% !important;
}
body.woocommerce-cart .wc-empty-cart-message .wc-block-components-notice-banner svg {
	width: 48px !important;
	height: 48px !important;
	fill: var(--wp--preset--color--brand-primary) !important;
}
body.woocommerce-cart .wc-empty-cart-message .wc-block-components-notice-banner__content {
	font-size: 18px !important;
	line-height: 1.5 !important;
}
/* "Zum Webshop" CTA — wird via theme.js in .wc-empty-cart-message eingefuegt */
body.woocommerce-cart .hitop-empty-cart-cta {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	margin-top: 24px !important;
	padding: 16px 40px !important;
	background: var(--wp--preset--color--brand-primary) !important;
	color: var(--wp--preset--color--white) !important;
	border-radius: 34px !important;
	font-size: 14px !important;
	font-weight: 700 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.6px !important;
	text-decoration: none !important;
	transition: background 0.15s ease !important;
}
body.woocommerce-cart .hitop-empty-cart-cta:hover {
	background: var(--wp--preset--color--brand-hover) !important;
	color: var(--wp--preset--color--white) !important;
}

/* ---- THANK-YOU (order-received endpoint on /kasse/) ---- */
/* Body hat keine eigene .woocommerce-order-received Klasse (WC setzt nichts),
   aber URL enthaelt /order-received/. Wir scopen ueber body.woocommerce-checkout
   + die order-confirmation Blocks (die nur dort existieren).
   Plus: kein .hitop-checkout-page__inner-Wrap ist da, also Content ist flush.
   Fix: constrain main + add gutter. */
body.woocommerce-checkout main:has(.wc-block-order-confirmation-status) {
	max-width: 1328px !important;
	margin-inline: auto !important;
	padding-left: var(--wp--preset--spacing--gutter) !important;
	padding-right: var(--wp--preset--spacing--gutter) !important;
	padding-top: var(--wp--preset--spacing--xl) !important;
	padding-bottom: var(--wp--preset--spacing--xl) !important;
	width: auto !important;
	overflow-x: hidden !important;
}
/* Status-Headline: Brand-Style */
.wc-block-order-confirmation-status {
	font-size: clamp(28px, 4vw, 40px) !important;
	font-weight: 700 !important;
	color: var(--wp--preset--color--heading-text) !important;
	letter-spacing: -0.5px !important;
	margin: 0 0 16px !important;
}
.wc-block-order-confirmation-status p {
	font-size: inherit !important;
	font-weight: inherit !important;
	margin: 0 !important;
}
/* Description + Login-Prompt */
.wc-block-order-confirmation-status-description {
	font-size: 16px !important;
	color: var(--wp--preset--color--dark-anthrazit) !important;
	max-width: 720px !important;
	margin: 0 0 40px !important;
}
.wc-block-order-confirmation-status-description a.button {
	display: inline-block !important;
	padding: 12px 28px !important;
	background: var(--wp--preset--color--brand-primary) !important;
	color: var(--wp--preset--color--white) !important;
	border-radius: 34px !important;
	font-size: 13px !important;
	font-weight: 700 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.6px !important;
	text-decoration: none !important;
	margin: 0 8px !important;
}
.wc-block-order-confirmation-status-description a.button:hover {
	background: var(--wp--preset--color--brand-hover) !important;
}
/* Summary (Bestellnr/Datum/Gesamt/Email/Zahlung) als Card */
.wp-block-woocommerce-order-confirmation-summary {
	background: var(--wp--preset--color--light-grey) !important;
	border-radius: 16px !important;
	padding: 24px 28px !important;
	margin-bottom: 32px !important;
}
.wc-block-order-confirmation-summary-list {
	display: grid !important;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)) !important;
	gap: 16px !important;
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
}
.wc-block-order-confirmation-summary-list__item {
	margin: 0 !important;
}
.wc-block-order-confirmation-summary-list-item__key {
	font-size: 12px !important;
	font-weight: 600 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.5px !important;
	color: var(--wp--preset--color--light-anthrazit) !important;
	display: block !important;
	margin-bottom: 4px !important;
}
.wc-block-order-confirmation-summary-list-item__value {
	font-size: 16px !important;
	font-weight: 600 !important;
	color: var(--wp--preset--color--heading-text) !important;
	display: block !important;
}
/* Order-Totals (Produkt-Tabelle) */
.wp-block-woocommerce-order-confirmation-totals-wrapper {
	margin-bottom: 40px !important;
}
.wc-block-order-confirmation-totals__heading,
.wp-block-woocommerce-order-confirmation-totals-wrapper h2,
.wp-block-woocommerce-order-confirmation-totals-wrapper h3 {
	font-size: 20px !important;
	font-weight: 600 !important;
	color: var(--wp--preset--color--heading-text) !important;
	margin-bottom: 16px !important;
	text-transform: uppercase !important;
	letter-spacing: 0.5px !important;
}
.wp-block-woocommerce-order-confirmation-totals table,
.wc-block-order-confirmation-totals__table {
	width: 100% !important;
	background: var(--wp--preset--color--white) !important;
	border: 1px solid var(--wp--preset--color--grey) !important;
	border-radius: 12px !important;
	border-collapse: separate !important;
	border-spacing: 0 !important;
	overflow: hidden !important;
	box-shadow: 0 1px 3px rgba(0,0,0,0.04) !important;
}
.wp-block-woocommerce-order-confirmation-totals table th,
.wp-block-woocommerce-order-confirmation-totals table td,
.wc-block-order-confirmation-totals__table th,
.wc-block-order-confirmation-totals__table td {
	padding: 16px 20px !important;
	border: none !important;
	border-top: 1px solid var(--wp--preset--color--grey) !important;
	font-size: 15px !important;
	background: transparent !important;
}
.wp-block-woocommerce-order-confirmation-totals table thead th,
.wc-block-order-confirmation-totals__table thead th {
	background: var(--wp--preset--color--light-grey) !important;
	font-size: 12px !important;
	font-weight: 600 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.5px !important;
	color: var(--wp--preset--color--light-anthrazit) !important;
	border-top: none !important;
}
.wp-block-woocommerce-order-confirmation-totals table tfoot th,
.wc-block-order-confirmation-totals__table tfoot th {
	font-weight: 600 !important;
}
/* Address-Wrapper (Rechnung/Versand) */
.wc-block-order-confirmation-address-wrapper {
	margin: 0 0 40px !important;
	gap: 24px !important;
}
.wc-block-order-confirmation-address-wrapper h2,
.wc-block-order-confirmation-address-wrapper h3 {
	font-size: 16px !important;
	font-weight: 600 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.5px !important;
	color: var(--wp--preset--color--heading-text) !important;
	margin: 0 0 12px !important;
}
.wc-block-order-confirmation-shipping-address,
.wc-block-order-confirmation-billing-address {
	background: var(--wp--preset--color--white) !important;
	border: 1px solid var(--wp--preset--color--grey) !important;
	border-radius: 12px !important;
	padding: 24px !important;
	font-size: 15px !important;
	line-height: 1.6 !important;
	color: var(--wp--preset--color--heading-text) !important;
}

/* ---- THANK-YOU MOBILE ---- */
@media (max-width: 781px) {
	body.woocommerce-checkout main:has(.wc-block-order-confirmation-status) {
		padding-left: 16px !important;
		padding-right: 16px !important;
		padding-top: 24px !important;
	}
	.wc-block-order-confirmation-status {
		font-size: 24px !important;
	}
	.wc-block-order-confirmation-status-description {
		font-size: 15px !important;
	}
	.wp-block-woocommerce-order-confirmation-summary {
		padding: 20px !important;
	}
	.wc-block-order-confirmation-summary-list {
		grid-template-columns: 1fr 1fr !important;
		gap: 14px !important;
	}
	.wp-block-woocommerce-order-confirmation-totals table th,
	.wp-block-woocommerce-order-confirmation-totals table td,
	.wc-block-order-confirmation-totals__table th,
	.wc-block-order-confirmation-totals__table td {
		padding: 12px 14px !important;
		font-size: 14px !important;
	}
	.wc-block-order-confirmation-address-wrapper {
		flex-direction: column !important;
	}
	.wc-block-order-confirmation-address-wrapper .wp-block-column {
		flex-basis: auto !important;
		width: 100% !important;
	}
}

/* ---- CART: Seiten-Padding sicherstellen (Desktop + Mobile) ---- */
body.woocommerce-cart .hitop-cart-page__content {
	max-width: 1328px !important;
	margin-inline: auto !important;
}

/* ---- WEBSHOP MOBILE: Desktop-Padding-Erbe aufheben ---- */
@media (max-width: 781px) {
	/* Hero-Column: Desktop-Paddings 200px/40px -> kompakt */
	body.page-id-7 main .entry-content > :first-child .wp-block-column,
	.page-id-7 main .entry-content > :first-child .wp-block-column {
		padding: var(--wp--preset--spacing--xl) var(--wp--preset--spacing--md) !important;
	}

	/* warum_mieten Cards: Desktop-Padding 112px/72px -> kompakt */
	body.page-id-7 main .entry-content .wp-block-group.has-background,
	.page-id-7 main .entry-content .wp-block-group.has-background {
		padding: var(--wp--preset--spacing--xl) var(--wp--preset--spacing--md) !important;
	}

	/* Sektion-spezifisches Card-Gap auf Mobile reduzieren */
	body.page-id-7 main .entry-content .wp-block-columns {
		gap: var(--wp--preset--spacing--md) !important;
	}
}

/* ---- WEBSHOP HERO (Page 7): Figma-Layout Stacked (Heading -> Bild -> Text -> CTA) ---- */
body.page-id-7 .hitop-webshop-hero__image {
	margin-inline: auto;
}
body.page-id-7 .hitop-webshop-hero__image img {
	display: block;
	margin-inline: auto;
	max-width: 763px;
	width: 100%;
	height: auto;
}
body.page-id-7 .hitop-webshop-hero__lead {
	max-width: 920px;
	margin-inline: auto;
}

/* Mobile Typografie-Skalierung laut Figma (H1 36px / H2 20px) */
@media (max-width: 781px) {
	body.page-id-7 .hitop-webshop-hero h1 {
		font-size: 36px !important;
		line-height: 1.2 !important;
	}
	body.page-id-7 .hitop-webshop-hero h2 {
		font-size: 20px !important;
		font-weight: 400 !important;
		line-height: 1.4 !important;
	}
	body.page-id-7 .hitop-webshop-hero__lead {
		font-size: 18px !important;
		line-height: 1.55 !important;
	}
	body.page-id-7 .hitop-webshop-hero__image img {
		max-width: 340px;
	}
}

/* ============================================================
   WEBSHOP — Figma-Refactor Page 7 (2026-04-17)
   Scoped auf body.page-id-7, Preset-Tokens only.
   ============================================================ */

/* --- SECTION 2: Trust Row Dark Bar --- */
body.page-id-7 .hitop-webshop-trust-row .hitop-trust-row-inner {
	gap: var(--wp--preset--spacing--lg);
	align-items: center;
	justify-content: space-around;
}
body.page-id-7 .hitop-webshop-trust-row .hitop-trust-item {
	gap: 8px;
}
body.page-id-7 .hitop-webshop-trust-row .hitop-trust-item p {
	margin: 0;
}

/* --- SECTION 3: Trust Logos Row --- */
body.page-id-7 .hitop-webshop-trust-logos .hitop-trust-logos-inner {
	gap: var(--wp--preset--spacing--lg);
	align-items: center;
}
body.page-id-7 .hitop-webshop-trust-logos .hitop-trust-google {
	gap: 8px;
	align-items: center;
}
body.page-id-7 .hitop-webshop-trust-logos .hitop-trust-google p {
	margin: 0;
	line-height: 1.2;
}
body.page-id-7 .hitop-webshop-trust-logos img {
	max-width: 100%;
	height: auto;
}

/* --- SECTION 4: Mieten/Kaufen Cards --- */
body.page-id-7 .hitop-webshop-rent-buy .hitop-rent-buy-cols {
	align-items: stretch;
	/* Raum fuer das Badge das oberhalb der Rent-Card sitzt (top: -18px + 20px Luft). */
	padding-top: 22px;
}
body.page-id-7 .hitop-rent-buy-card {
	height: 100%;
	position: relative;
	box-shadow: 0 4px 16px rgba(0,0,0,0.04);
	/* Globaler .hitop-card-Regel setzt overflow:hidden, dadurch wird das
	   Badge der Rent-Card (top:-18px) beschnitten. Hier fuer Webshop
	   ueberschreiben, damit das Badge vollstaendig sichtbar ist. */
	overflow: visible;
}
body.page-id-7 .hitop-rent-buy-card--rent {
	position: relative;
}
body.page-id-7 .hitop-rent-buy-card__badge {
	position: absolute;
	top: -18px;
	left: 50%;
	transform: translateX(-50%);
	display: inline-block;
	margin: 0;
	white-space: nowrap;
	width: auto;
	/* Sicherstellen, dass das Badge ueber der Card-Border liegt. */
	z-index: 2;
}
body.page-id-7 .hitop-rent-buy-card__list {
	list-style: none;
	padding-left: 0;
}
body.page-id-7 .hitop-rent-buy-card__list li {
	position: relative;
	padding-left: 28px;
}
body.page-id-7 .hitop-rent-buy-card__list li::before {
	content: "\2713";
	position: absolute;
	left: 0;
	top: 0;
	color: var(--wp--preset--color--brand-primary);
	font-weight: 700;
}

/* --- SECTION 5: Slider-Facts Wrapper mit Hintergrund-Bild ---
   Figma Page 787:421 zeigt einen Hintergrund (Mann/Knie). Statt das
   Custom-Block-Plugin zu erweitern, setzen wir das Bild per wp:group-
   Wrapper und lassen die Facts-Slide darueber rendern. Overlay fuer
   Lesbarkeit. */
body.page-id-7 .hitop-slider-facts-wrapper {
	position: relative;
	/* Physiotherapy-Foto ist 1726x600 (Aspect 2.88:1) mit Motiv (Physio +
	   Mann/Knie) im unteren linken Bereich. 'auto 100%' skaliert das Bild
	   auf die Wrapper-Hoehe ohne Ueberdehnung - dadurch bleibt das Motiv
	   erkennbar und rechts laeuft das Bild natuerlich aus (Gradient faded). */
	background-size: auto 100%;
	background-position: left center;
	background-repeat: no-repeat;
	background-color: var(--wp--preset--color--light-grey);
	isolation: isolate;
	padding-block: var(--wp--preset--spacing--section);
}
body.page-id-7 .hitop-slider-facts-wrapper::before {
	content: "";
	position: absolute;
	inset: 0;
	/* Weicher Gradient: links 30% Weiss (Motiv sichtbar), rechts 85% Weiss
	   (Text-Area ueber Fakten-Block). Slider-Content steht zentriert im
	   Viewport (max-width 1328px), rechte Bild-Haelfte liefert Luft fuer Text. */
	background: linear-gradient(
		90deg,
		rgba(255, 255, 255, 0.30) 0%,
		rgba(255, 255, 255, 0.55) 40%,
		rgba(255, 255, 255, 0.85) 100%
	);
	z-index: 0;
	pointer-events: none;
}
body.page-id-7 .hitop-slider-facts-wrapper > * {
	position: relative;
	z-index: 1;
}
/* Slider + Slide + Fact-Slide haben solides weisses Background aus slider-base.
   Fuer den Wrapper-Background muessen sie transparent sein. */
body.page-id-7 .hitop-slider-facts-wrapper .hitop-slider-facts,
body.page-id-7 .hitop-slider-facts-wrapper .hitop-slider__viewport,
body.page-id-7 .hitop-slider-facts-wrapper .hitop-slider__slide,
body.page-id-7 .hitop-slider-facts-wrapper .hitop-fact-slide {
	background: transparent;
}
@media (max-width: 781px) {
	body.page-id-7 .hitop-slider-facts-wrapper {
		background-position: left center;
	}
	body.page-id-7 .hitop-slider-facts-wrapper::before {
		/* Auf Mobile: strarkeres Overlay (80%), damit zentrierter Text lesbar. */
		background: rgba(255, 255, 255, 0.80);
	}
}

/* --- SECTION 6: Warum Mieten Cards --- */
body.page-id-7 .hitop-webshop-warum-mieten .hitop-card--icon {
	box-shadow: 0 4px 16px rgba(0,0,0,0.04);
}
body.page-id-7 .hitop-webshop-warum-mieten .hitop-card__header {
	gap: var(--wp--preset--spacing--sm);
	align-items: center;
}
body.page-id-7 .hitop-webshop-warum-mieten .hitop-card__header h3 {
	margin: 0;
}
body.page-id-7 .hitop-webshop-warum-mieten__footer {
	border: 1px solid var(--wp--preset--color--brand-primary);
}

/* --- SECTION 7: Zubehoer Dark Cover --- */
body.page-id-7 .hitop-webshop-zubehoer {
	border-radius: 0;
}
body.page-id-7 .hitop-webshop-zubehoer .is-style-outline-white .wp-block-button__link {
	color: #fff;
	border: 2px solid #fff;
	background: transparent;
}
body.page-id-7 .hitop-webshop-zubehoer .is-style-outline-white .wp-block-button__link:hover {
	background: #fff;
	color: var(--wp--preset--color--dark-anthrazit);
}

/* --- SECTION 9: Bereits ueberzeugt Cover --- */
body.page-id-7 .hitop-webshop-bereits-ueberzeugt .wp-block-column:first-child {
	background: rgba(255, 255, 255, 0.9);
	padding: var(--wp--preset--spacing--xl);
	border-radius: var(--wp--custom--radius--card);
}

/* --- SECTION 10: Newsletter Rosa Bar --- */
body.page-id-7 .hitop-webshop-newsletter {
	position: relative;
}
body.page-id-7 .hitop-newsletter-inline-form {
	display: flex;
	flex-direction: column;
	gap: 12px;
	max-width: 640px;
}
body.page-id-7 .hitop-newsletter-inline-form__row {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
}
body.page-id-7 .hitop-newsletter-inline-form__field {
	flex: 1 1 200px;
	display: block;
}
body.page-id-7 .hitop-newsletter-inline-form__field--full {
	flex: 1 1 100%;
}
body.page-id-7 .hitop-newsletter-inline-form input[type="text"],
body.page-id-7 .hitop-newsletter-inline-form input[type="email"] {
	width: 100%;
	padding: 14px 18px;
	font-size: 16px;
	background: #fff;
	border: 1px solid var(--wp--preset--color--grey);
	border-radius: var(--wp--custom--radius--input);
	font-family: inherit;
}
body.page-id-7 .hitop-newsletter-inline-form__consent {
	display: flex;
	gap: 8px;
	align-items: flex-start;
	font-size: 13px;
	color: var(--wp--preset--color--dark-anthrazit);
	line-height: 1.5;
}
body.page-id-7 .hitop-newsletter-inline-form__consent input {
	margin-top: 3px;
}
body.page-id-7 .hitop-newsletter-inline-form__button {
	align-self: flex-end;
	background: var(--wp--preset--color--brand-primary);
	color: #fff;
	border: 0;
	padding: 16px 40px;
	border-radius: var(--wp--custom--radius--button);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	cursor: pointer;
	font-family: inherit;
	font-size: 14px;
}
body.page-id-7 .hitop-newsletter-inline-form__button:hover {
	background: var(--wp--preset--color--brand-hover);
}

/* --- MOBILE OVERRIDES Page 7 --- */
@media (max-width: 781px) {
	/* Trust-Row: Vertikale Stack */
	body.page-id-7 .hitop-webshop-trust-row .hitop-trust-row-inner {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--wp--preset--spacing--sm);
	}
	/* Trust-Logos: 3-spaltiges Grid (kompakter als vertikaler Stack).
	   6 Items -> 3x2, zentriert. Google-Zelle (Bild + Text) darf wrappen. */
	body.page-id-7 .hitop-webshop-trust-logos .hitop-trust-logos-inner {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: var(--wp--preset--spacing--sm);
		align-items: center;
		justify-items: center;
		flex-direction: row; /* reset flex default */
	}
	body.page-id-7 .hitop-webshop-trust-logos .hitop-trust-logos-inner > * {
		margin: 0;
	}
	body.page-id-7 .hitop-webshop-trust-logos .hitop-trust-google {
		flex-direction: column;
		text-align: center;
		gap: 4px;
	}
	body.page-id-7 .hitop-webshop-trust-logos .hitop-trust-google p {
		font-size: 11px;
		line-height: 1.2;
	}
	/* Mieten/Kaufen: Stacked Column + etwas mehr Top-Margin fuer Badge */
	body.page-id-7 .hitop-webshop-rent-buy .hitop-rent-buy-cols {
		flex-direction: column;
		gap: var(--wp--preset--spacing--xl);
	}
	body.page-id-7 .hitop-rent-buy-card--rent {
		margin-top: 18px;
	}
	/* Warum Mieten: Einspaltig */
	body.page-id-7 .hitop-webshop-warum-mieten .hitop-warum-cols {
		flex-direction: column;
	}
	/* Zubehoer: Text voll, Spacer-Column weg */
	body.page-id-7 .hitop-webshop-zubehoer .wp-block-columns {
		flex-direction: column;
	}
	body.page-id-7 .hitop-webshop-zubehoer .wp-block-column:first-child {
		display: none;
	}
	/* Bereits ueberzeugt: Text linke Haelfte voll, Placeholder-Column weg */
	body.page-id-7 .hitop-webshop-bereits-ueberzeugt .wp-block-columns {
		flex-direction: column;
	}
	body.page-id-7 .hitop-webshop-bereits-ueberzeugt .wp-block-column:last-child {
		display: none;
	}
	/* Newsletter: Einspaltig, Button volle Breite */
	body.page-id-7 .hitop-webshop-newsletter .wp-block-columns {
		flex-direction: column;
	}
	body.page-id-7 .hitop-newsletter-inline-form__button {
		align-self: stretch;
		width: 100%;
	}
}

/* ==========================================================================
   HOMEPAGE (page-id-15) — Feedback-Fixes 2026-04-19
   ========================================================================== */

/* Item 1: Video-Thumbnail im "Was ist HiToP® PNP?" Group horizontal zentrieren.
   Im Pattern ist die wp:image ohne align-Attribut, daher links am Content-Rand.
   Fix: margin auto + block-level Figure + img. */
body.page-id-15 .entry-content > .wp-block-group.alignwide > .wp-block-image.size-large {
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	max-width: 100%;
}
body.page-id-15 .entry-content > .wp-block-group.alignwide > .wp-block-image.size-large img {
	margin-left: auto;
	margin-right: auto;
	display: block;
	max-width: 100%;
	height: auto;
}

/* Items 2 + 3 + 4: Alignfull-Columns-Blocks (Selbstcheck mit RED bg + Vortrag mit
   F5F5F5 bg). Rechte Spalte enthält ein Bild das NICHT bis an den Rand geht und
   die linke (farbige) Spalte ist höher als das Bild → Background "ragt über".
   Fix: Columns auf align-items:stretch, Bild-Spalte flexed + Bild full width/
   height mit object-fit:cover damit BG-Höhe = Bild-Höhe. */
body.page-id-15 .entry-content > .wp-block-columns.alignfull {
	align-items: stretch;
}
body.page-id-15 .entry-content > .wp-block-columns.alignfull > .wp-block-column:not(.has-background) {
	display: flex;
	flex-direction: column;
	align-self: stretch;
}
body.page-id-15 .entry-content > .wp-block-columns.alignfull > .wp-block-column:not(.has-background) > .wp-block-image {
	margin: 0;
	flex: 1;
	width: 100%;
	display: flex;
}
body.page-id-15 .entry-content > .wp-block-columns.alignfull > .wp-block-column:not(.has-background) > .wp-block-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* ==========================================================================
   HEADER — Icon-Alignment-Fix (2026-04-19)
   ========================================================================== */

/* Icons (Search + Cart) nicht vertikal zentriert.
   Gutenberg setzt auf figure.wp-block-image ein margin-bottom:1em (Default).
   In Flex-Container mit align-items:center verschiebt das die Icons visuell
   nach oben (das Item-Box enthaelt den margin -> zentriert inkl. margin). */
.hitop-header__actions .hitop-header__icon,
.hitop-header__actions .wp-block-image.hitop-header__icon {
	margin: 0 !important;
	padding: 0 !important;
	align-self: center;
	line-height: 0;
}
.hitop-header__actions .hitop-header__icon img {
	vertical-align: middle;
	display: block;
}
.hitop-header__actions .wp-block-buttons.hitop-header__cta-wrap,
.hitop-header__actions .wp-block-button.hitop-header__cta {
	margin: 0;
	align-self: center;
}

/* ==========================================================================
   MOBILE / BURGER OVERLAY — Figma 1114:2974 (2026-04-19 final)
   Greift IMMER wenn .is-menu-open aktiv ist, unabhaengig von Viewport-Breite.
   Overridet die Desktop-Mega-Menu-Styles (position:absolute, width:921px,
   transform:translateX(-50%)) damit Items full-width inline rendern.
   ========================================================================== */

/* Overlay-Container: white BG, 80px Header-Platz oben, kein horizontales
   Padding (Items bekommen eigenes 22px left/right Padding). */
.hitop-nav.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open {
	padding: 80px 0 32px;
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--dark-anthrazit);
}

/* Menu-Container: vertikale Liste, full-width, kein Gap zwischen Items
   (Divider entsteht durch border-bottom). */
.hitop-nav.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	display: flex;
	flex-direction: column;
	gap: 0;
	width: 100%;
}

/* Top-level Items: full-width Rows, 70px Hoehe, 22px horizontal Padding,
   Divider-Line zwischen Items. */
.hitop-nav.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open > .wp-block-navigation__responsive-container-content > .wp-block-navigation__container > .wp-block-navigation-item {
	width: 100%;
	position: relative;
}

.hitop-nav.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open > .wp-block-navigation__responsive-container-content > .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content,
.hitop-nav.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open > .wp-block-navigation__responsive-container-content > .wp-block-navigation__container > .wp-block-navigation-item > a.wp-block-navigation-item__content,
.hitop-nav.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open > .wp-block-navigation__responsive-container-content > .wp-block-navigation__container > .wp-block-navigation-item > button.wp-block-navigation-submenu__toggle {
	display: flex;
	align-items: center;
	width: 100%;
	min-height: 70px;
	padding: 20px 22px;
	font-size: 18px;
	font-weight: 500;
	color: var(--wp--preset--color--dark-anthrazit);
	border-bottom: 1px solid #e5e5e5;
	box-sizing: border-box;
}

/* Submenu IMMER inline (kein Desktop-Absolute-Overlay), full-width,
   leicht abgesetzte Hintergrundfarbe. */
.hitop-nav.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
	position: static;
	width: 100%;
	max-width: 100%;
	min-width: 0;
	left: auto;
	top: auto;
	transform: none;
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	box-shadow: none;
	border-radius: 0;
	background: #f9f9f9;
	padding: 0;
	column-count: 1;
	column-rule: none;
	column-gap: 0;
	display: flex;
	flex-direction: column;
	gap: 0;
}

/* Submenu-Items: eingerueckt (36px left), kleinere Schrift, Divider. */
.hitop-nav.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding: 16px 22px 16px 36px;
	font-size: 16px;
	font-weight: 400;
	border-bottom: 1px solid #eee;
	min-height: 56px;
	display: flex;
	align-items: center;
}

/* Desktop-only Items im Overlay verstecken (Wissen, Apotheken-Pill).
   !important needed: Media-Query-Regel `@media (max-width:1024px)
   .hitop-nav .wp-block-navigation__responsive-container.is-menu-open
   .wp-block-navigation__container > .wp-block-navigation-item` setzt
   `display: block !important` mit gleicher Specificity. */
.hitop-nav.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .hitop-nav-desktop-only {
	display: none !important;
}

/* Pill-Styling im Overlay neutralisieren (falls doch gerendert). */
.hitop-nav.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .hitop-nav__pill > .wp-block-navigation-item__content {
	background: transparent;
	color: var(--wp--preset--color--dark-anthrazit);
	border-radius: 0;
	border: 0;
	padding: 20px 22px;
	font-weight: 500;
}

/* "Zum Webshop"-Button (falls im Overlay gerendert) als full-width 70px
   Row mit Padding. */
.hitop-nav.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-buttons {
	padding: 20px 22px;
	border-bottom: 1px solid #e5e5e5;
	margin: 0;
}

/* ==========================================================================
   HEADER — Compact-Fix (2026-04-20, Finding 4)
   Header war zu hoch, Blog umbrach auf zweite Zeile. Ursache:
   - 22px/22px Padding = 44px vertikal + Logo 38px + Button = ~86px Gesamthoehe.
   - Nav-gap 28px + 7 Items + Pill + Glossar-Letters crowdete sich bei < 1500px.
   Fix: Padding auf 14px/14px, Nav-gap 20px, Font-size 15px, Pill kompakter,
   und Pill unter 1500px ausblenden damit Blog in 1. Zeile passt.
   ========================================================================== */
@media (min-width: 1025px) {
	.hitop-header__inner {
		padding: 14px 32px;
		gap: 16px;
		flex-wrap: nowrap;
	}
	.hitop-nav.wp-block-navigation > .wp-block-navigation__container {
		gap: 20px;
		flex-wrap: nowrap;
	}
	.hitop-nav.wp-block-navigation > .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
		font-size: 15px;
		white-space: nowrap;
		padding: 8px 0;
	}
	.hitop-nav.wp-block-navigation .wp-block-navigation-item.hitop-nav__pill > .wp-block-navigation-item__content {
		font-size: 13px;
		padding: 6px 14px;
		letter-spacing: -0.01em;
	}
	.hitop-header__cta .wp-block-button__link {
		padding: 8px 24px !important; /* needed: button inline style padding-*:10px 30px from block-supports */
		font-size: 14px !important; /* needed: WP Button font-size presets with higher specificity */
	}
	.hitop-header__actions {
		gap: 14px;
		flex-shrink: 0;
	}
}

/* Pill ausblenden wenn Viewport < 1500px (Blog rutscht sonst auf 2. Zeile). */
@media (max-width: 1499px) and (min-width: 1025px) {
	.hitop-nav.wp-block-navigation .wp-block-navigation-item.hitop-nav__pill {
		display: none;
	}
	.hitop-nav.wp-block-navigation > .wp-block-navigation__container {
		gap: 18px;
	}
}

/* ==========================================================================
   NEWSLETTER — Cover mit Overlay (Figma 1104:2077, 2026-04-21)
   Cover-Block mit Hintergrund-Bild 1728x621 + rechtsseitigem weissen Overlay
   rgba(255,255,255,0.6), Breite 913/1728 = 52.83% der Sektion.
   Inner-Container ist full-width; die .hitop-newsletter__overlay-Group liegt
   absolut positioniert rechts und enthaelt Heading + Form.
   ========================================================================== */
.hitop-newsletter {
	position: relative;
	overflow: hidden;
}
/* Cover-Inner-Container: voll ausfuellen, damit das Overlay absolut rechts positioniert werden kann */
.hitop-newsletter > .wp-block-cover__inner-container {
	position: absolute;
	inset: 0;
	width: 100%;
	max-width: none;
	padding: 0;
	margin: 0;
}
/* Overlay-Group: rechte Haelfte mit halbtransparentem Weiss */
.hitop-newsletter .hitop-newsletter__overlay {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: 52.83%; /* Figma: 913/1728 */
	background: rgba(255, 255, 255, 0.6);
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 50px;
	/* Padding-Werte stammen aus dem Pattern-Inline-Style (83/106/83/49). */
}
.hitop-newsletter .hitop-newsletter__overlay > * {
	max-width: 758px; /* Figma: Frame 2 Breite innerhalb des Overlays */
	width: 100%;
}

/* Inline-Form innerhalb Overlay (Figma 1104:2077, Group 298: 640x145) */
.hitop-newsletter .hitop-newsletter-inline-form {
	display: flex;
	flex-direction: column;
	gap: 16px;
	max-width: 640px;
	margin: 0;
	text-align: left;
}
.hitop-newsletter-inline-form__sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0,0,0,0);
	border: 0;
}
/* Honeypot: fuer echte Nutzer unsichtbar, Bots fuellen aber oft alle Felder. */
.hitop-newsletter-inline-form__honeypot {
	position: absolute;
	left: -9999px;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
}
/* Status-Banner nach Submit (ok/exists/invalid/error). */
.hitop-newsletter-inline-form__banner {
	padding: 14px 18px;
	border-radius: 14px;
	margin: 0 0 18px 0;
	font-size: 15px;
	line-height: 1.4;
}
.hitop-newsletter-inline-form__banner--ok {
	background: #e8f5ec;
	color: #1f6a3a;
	border: 1px solid #b8dcc1;
}
.hitop-newsletter-inline-form__banner--info {
	background: #eef2fb;
	color: #2c4a7a;
	border: 1px solid #c3d0e8;
}
.hitop-newsletter-inline-form__banner--error {
	background: #fdecec;
	color: #8a1f1f;
	border: 1px solid #eabcbc;
}

/* ==================== BREVO Plugin (mailin) — Form ID 1 ====================
 * Plugin rendert Form als `.hitop-newsletter-block` mit `.sib-VORNAME-area`,
 * `.sib-NACHNAME-area`, `.sib-email-area`, `.hitop-newsletter-checkbox`,
 * `#sib_captcha` und `.hitop-newsletter-button > .sib-default-btn`.
 * Visual-Mapping auf das HiToP-Newsletter-Layout (analog zum frueheren
 * Custom-`.hitop-newsletter-inline-form`-Block).
 */
.hitop-newsletter .hitop-newsletter-block {
	display: flex;
	flex-direction: column;
	gap: 16px;
	max-width: 640px;
	margin: 0;
	text-align: left;
}

.hitop-newsletter .hitop-newsletter-fields {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

/* Vorname/Nachname Row: 50/50 Split mit gap, analog zum Frueher-Custom. */
.hitop-newsletter .hitop-newsletter-person-block {
	display: flex !important;
	gap: 15px;
	flex-wrap: wrap;
	align-items: flex-start !important; /* override inline align-items:center */
	margin-bottom: 0 !important; /* inline margin-bottom:10px ueberschreiben — Block-Gap regelt */
}

.hitop-newsletter .hitop-newsletter-person-block > div {
	flex: 1 1 calc(50% - 8px);
	min-width: 0;
}

/* Inputs (alle 3 Felder) auf einheitliche Hoehe + Stil. */
.hitop-newsletter .sib-VORNAME-area,
.hitop-newsletter .sib-NACHNAME-area,
.hitop-newsletter .sib-email-area {
	width: 100%;
	display: block;
}

.hitop-newsletter .sib-VORNAME-area input,
.hitop-newsletter .sib-NACHNAME-area input,
.hitop-newsletter .sib-email-area input {
	width: 100%;
	height: 48px;
	padding: 0 16px;
	background: var(--wp--preset--color--white, #fff);
	border: 1px solid var(--wp--preset--color--grey, #D9D9D9);
	border-radius: 6px;
	font-family: 'Inter', sans-serif;
	font-weight: 300;
	font-size: 1rem;
	color: var(--wp--preset--color--dark-anthrazit, #2C2C2C);
	box-sizing: border-box;
	outline: none;
	transition: border-color 0.2s ease;
}

.hitop-newsletter .sib-VORNAME-area input::placeholder,
.hitop-newsletter .sib-NACHNAME-area input::placeholder,
.hitop-newsletter .sib-email-area input::placeholder {
	color: var(--wp--preset--color--light-anthrazit, #959595);
}

.hitop-newsletter .sib-VORNAME-area input:focus,
.hitop-newsletter .sib-NACHNAME-area input:focus,
.hitop-newsletter .sib-email-area input:focus {
	border-color: var(--wp--preset--color--brand-primary, #D83F27);
}

/* Consent-Checkbox-Reihe. */
.hitop-newsletter .hitop-newsletter-checkbox {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	font-family: 'Inter', sans-serif;
	font-weight: 300;
	font-size: 0.875rem;
	line-height: 1.4;
	color: var(--wp--preset--color--dark-anthrazit, #2C2C2C);
}

.hitop-newsletter .hitop-newsletter-checkbox input[type="checkbox"] {
	flex-shrink: 0;
	margin-top: 4px;
	width: 18px;
	height: 18px;
	cursor: pointer;
	accent-color: var(--wp--preset--color--brand-primary, #D83F27);
}

.hitop-newsletter .hitop-newsletter-checkbox span {
	font-size: 0.875rem !important; /* override inline 1.25rem */
	color: var(--wp--preset--color--dark-anthrazit, #2C2C2C) !important;
}

.hitop-newsletter .hitop-newsletter-checkbox a {
	color: var(--wp--preset--color--brand-primary, #D83F27);
	text-decoration: underline;
}

/* Captcha-div (Google Invisible) — keine Sicht, kein Layout-Effekt. */
.hitop-newsletter #sib_captcha {
	min-height: 0;
}

/* Submit-Button — analog zum frueheren ANMELDEN-Button. */
.hitop-newsletter .hitop-newsletter-button {
	display: flex;
	justify-content: flex-start;
	margin-top: 8px;
}

.hitop-newsletter .sib-default-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 48px;
	padding: 0 36px;
	background: var(--wp--preset--color--brand-primary, #D83F27);
	color: var(--wp--preset--color--white, #fff);
	border: 0;
	border-radius: 34px;
	font-family: 'Inter', sans-serif;
	font-weight: 700;
	font-size: 0.875rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background 0.2s ease;
}

.hitop-newsletter .sib-default-btn:hover {
	background: var(--wp--preset--color--brand-hover, #AB1700);
}

/* Brevo-eigene Status-/Error-Messages des Plugins (kommen nach Submit). */
.hitop-newsletter .sib_signup_box_inside_2,
.hitop-newsletter .sib_loader,
.hitop-newsletter #sib-form-block-1 {
	font-family: 'Inter', sans-serif;
}
/* Vorname/Nachname Row: 305 + gap 15 + 320 = 640 (Figma) */
.hitop-newsletter .hitop-newsletter-inline-form__row {
	display: flex;
	gap: 15px;
	flex-wrap: wrap;
}
.hitop-newsletter .hitop-newsletter-inline-form__row .hitop-newsletter-inline-form__label:first-child {
	flex: 0 1 305px;
}
.hitop-newsletter .hitop-newsletter-inline-form__row .hitop-newsletter-inline-form__label:last-child {
	flex: 1 1 320px;
}
.hitop-newsletter .hitop-newsletter-inline-form__label {
	display: flex;
	flex-direction: column;
	gap: 6px;
	font-size: 14px;
	font-weight: 500;
	color: var(--wp--preset--color--dark-anthrazit);
}
.hitop-newsletter .hitop-newsletter-inline-form__label--full {
	width: 100%;
}
.hitop-newsletter .hitop-newsletter-inline-form__label-text {
	letter-spacing: -0.01em;
}
/* Input: 45px Hoehe, 1px stroke #2C2C2C, radius 6px (Figma) */
.hitop-newsletter .hitop-newsletter-inline-form__input {
	width: 100%;
	height: 45px;
	padding: 10px 12px;
	font-size: 18px;
	line-height: 1.4;
	background: #fff;
	border: 1px solid #2C2C2C;
	border-radius: 6px;
	font-family: inherit;
	color: var(--wp--preset--color--dark-anthrazit, #2C2C2C);
	transition: border-color 0.15s;
}
.hitop-newsletter .hitop-newsletter-inline-form__input::placeholder {
	color: #D9D9D9; /* Figma: Placeholder-Farbe */
	opacity: 1;
}
.hitop-newsletter .hitop-newsletter-inline-form__input:focus {
	outline: none;
	border-color: var(--wp--preset--color--brand-primary, #D83F27);
}
/* Checkbox-Consent: 16x16 Box, stroke #757575, Label Inter 400/13 #1E1E1E */
.hitop-newsletter .hitop-newsletter-inline-form__consent {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	font-size: 13px;
	line-height: 1.4;
	color: #1E1E1E;
	cursor: pointer;
}
.hitop-newsletter .hitop-newsletter-inline-form__consent input[type="checkbox"] {
	margin-top: 1px;
	flex-shrink: 0;
	width: 16px;
	height: 16px;
	border: 1px solid #757575;
	border-radius: 4px;
	background: #fff;
	accent-color: var(--wp--preset--color--brand-primary, #D83F27);
}
.hitop-newsletter .hitop-newsletter-inline-form__consent a {
	color: inherit;
	text-decoration: underline;
}
/* Button: brand-primary Pill (Figma + Design-System) */
.hitop-newsletter .hitop-newsletter-inline-form__button {
	align-self: flex-start;
	background: var(--wp--preset--color--brand-primary, #D83F27);
	color: #fff;
	border: 1px solid var(--wp--preset--color--brand-primary, #D83F27);
	padding: 20px 30px;
	border-radius: var(--wp--custom--radius--button, 34px);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0;
	cursor: pointer;
	font-family: inherit;
	font-size: 16px;
	line-height: 1;
	transition: background-color 0.15s, color 0.15s, border-color 0.15s;
	margin-top: 4px;
}
.hitop-newsletter .hitop-newsletter-inline-form__button:hover,
.hitop-newsletter .hitop-newsletter-inline-form__button:focus {
	background: var(--wp--preset--color--brand-hover, #AB1700);
	border-color: var(--wp--preset--color--brand-hover, #AB1700);
	color: #fff;
	outline: none;
}

/* ==========================================================================
   NEWSLETTER — Mobile Linear Stack (Figma 1094:935, 440x980)
   Kein Overlay. Image 439x333 oben, Content-Frame auf rotem Tint
   rgba(216,63,39,0.10) unten (Figma Rectangle 88 440x647 @ 10% #D83F27).
   Desktop-Overlay (commit a9f6489) bleibt unangetastet.
   ========================================================================== */
@media (max-width: 781px) {
	/* Cover-Wrapper: vertikal stacken, Inline-min-height aufheben */
	.hitop-newsletter {
		display: flex !important;
		flex-direction: column !important;
		min-height: 0 !important;
		aspect-ratio: auto !important;
	}
	/* Dim-Layer auf Mobile nicht benoetigt, Image liegt nicht mehr als Background darunter */
	.hitop-newsletter > .wp-block-cover__background {
		display: none;
	}
	/* Image aus der absoluten Cover-Background-Position holen und linear oben platzieren.
	   Figma: 439x333 an Top (Frame-Width 440, 0.5px Offset vernachlaessigt). */
	.hitop-newsletter > .wp-block-cover__image-background {
		position: relative !important;
		inset: auto !important;
		width: 100%;
		height: 333px;
		max-height: 333px;
		object-fit: cover;
		object-position: center;
		transform: none !important;
	}
	/* Inner-Container haelt Overlay-Group; absolute Positionierung (Desktop) aufheben. */
	.hitop-newsletter > .wp-block-cover__inner-container {
		position: relative !important;
		inset: auto !important;
		width: 100%;
		height: auto;
		display: block;
		margin: 0;
		flex: 1 1 auto;
	}
	/* Ehemaliges Overlay wird auf Mobile zum Content-Frame mit rotem Tint-Hintergrund.
	   Figma Rectangle 88: 440x647 #D83F27 @ opacity 0.10.
	   Content-Frame 3: Padding 30px top, 22px horizontal, 50px bottom, gap 41px. */
	.hitop-newsletter .hitop-newsletter__overlay {
		position: static !important;
		top: auto;
		right: auto;
		inset: auto;
		width: 100%;
		max-width: none;
		height: auto;
		background: rgba(216, 63, 39, 0.10);
		transform: none;
		padding: 30px 22px 50px !important;
		gap: 41px !important;
	}
	.hitop-newsletter .hitop-newsletter__overlay > * {
		max-width: none;
	}
	/* H2 Mobile: Inter 300, 26px, line-height 120%, letter-spacing -0.78px, #2C2C2C */
	.hitop-newsletter .hitop-newsletter__overlay h2.wp-block-heading {
		font-size: 26px !important;
		line-height: 1.2 !important;
		letter-spacing: -0.03em !important;
		color: #2C2C2C !important;
		font-weight: 300 !important;
	}
	/* Paragraph Mobile: Inter 300, 18px, line-height 30px (~166%), #2C2C2C */
	.hitop-newsletter .hitop-newsletter__overlay p {
		font-size: 18px !important;
		line-height: 1.6667 !important;
		color: #2C2C2C !important;
		font-weight: 300 !important;
	}
	/* Form: Gap zwischen Elementen entspricht Figma Group 299 pitch 30px; Spacing zu Button 41px */
	.hitop-newsletter .hitop-newsletter-inline-form {
		gap: 30px;
	}
	/* Vorname/Nachname vertikal gestapelt (Figma Mobile: alle Inputs gleich breit 396px) */
	.hitop-newsletter .hitop-newsletter-inline-form__row {
		flex-direction: column;
		gap: 30px;
	}
	.hitop-newsletter .hitop-newsletter-inline-form__row .hitop-newsletter-inline-form__label:first-child,
	.hitop-newsletter .hitop-newsletter-inline-form__row .hitop-newsletter-inline-form__label:last-child {
		flex: 0 0 auto;
		width: 100%;
	}
	/* Input Mobile: 45px hoch, radius 6, border 1px #2C2C2C, bg white, Figma-konform */
	.hitop-newsletter .hitop-newsletter-inline-form__input {
		height: 45px;
		padding: 10px 12px;
		font-size: 18px;
		border-radius: 6px;
	}
	.hitop-newsletter .hitop-newsletter-inline-form__input::placeholder {
		color: #D9D9D9;
		font-size: 18px;
		font-weight: 400;
	}
	/* Button Mobile: 149x40, outlined white + border #2C2C2C, radius 34, padding 10/30,
	   Inter 400/16 #2C2C2C, UPPERCASE, links ausgerichtet (Figma Button x=3041 = Frame-left) */
	.hitop-newsletter .hitop-newsletter-inline-form__button {
		align-self: flex-start;
		padding: 10px 30px;
		font-size: 16px;
		min-height: 40px;
		line-height: 1;
	}
}
.hitop-newsletter .hitop-newsletter-inline-form__hint {
	font-size: 12px;
	color: var(--wp--preset--color--light-anthrazit, #959595);
	text-align: center;
	margin: 0;
}

/* ------------------------------------------------------------------
 * hitop/selbstcheck-trigger — Variante fuer Buttons auf primaerem
 * (orangenem) Hintergrund: invertiert zu weissem BG + Brand-Text.
 * Plugin-Default ist orange-auf-weiss; diese Variante fuer Sections
 * wie hitop-fuer-wen-geeignet wo der BG bereits #D83F27 ist.
 * ---------------------------------------------------------------- */
.hitop-sc-trigger.is-on-primary {
	background: #ffffff;
	color: var(--wp--preset--color--dark-anthrazit, #2C2C2C);
}
.hitop-sc-trigger.is-on-primary:hover,
.hitop-sc-trigger.is-on-primary:focus-visible {
	background: #F5F5F5;
	color: var(--wp--preset--color--dark-anthrazit, #2C2C2C);
}

/* ==========================================================================
   Selbstcheck-Overlay: robuster Closed-State
   ==========================================================================
   Plugin (hitop-selbstcheck) definiert:
     .hitop-sc { position:fixed; pointer-events:none; }
     .hitop-sc__panel { transform:translateY(-110%); }
   Beim Closed-State rutscht der Panel nur -110% der eigenen Hoehe, d.h. bei
   756px Panel-Hoehe verbleibt unten ~68px im Viewport (sichtbar als
   oranger Balken der den Header zu ueberdecken scheint).

   Fix: Overlay-Root bekommt visibility:hidden solange nicht .is-open. Das
   blendet ALLE Kinder aus — Panel ist hart weg, nicht nur verschoben.
   .is-open setzt visibility zurueck, Panel-Transition laeuft normal.
   ========================================================================== */

.hitop-sc:not(.is-open) {
	visibility: hidden !important;
}
.hitop-sc.is-open {
	visibility: visible !important;
}

/* ==========================================================================
   Hero V2 Symptome (Figma 1151:3643)
   ==========================================================================
   2-Spalten-Layout: Image 600x400 r:30 links, Text rechts. H1 50/300.
   Verwendet in p41-hero.php (Symptome), p16-hero.php (Brennende Fuesse).
   Figma-Intent: kein Cover-Background, nur weisser Section-BG.
   ========================================================================== */

.hitop-hero-v2 {
	/* Section BG weiss — Figma Property "Symptom" */
}

.hitop-hero-v2__image img {
	width: 600px;
	max-width: 100%;
	height: 400px;
	object-fit: cover;
	border-radius: 30px;
	display: block;
}

/* ==========================================================================
   Mobile Layout-Overrides (Figma Mobile Components 800:1163)
   ==========================================================================
   Basis: Mobile Deep-Audit 2026-04-22 + Token-Refactor 2026-04-22.

   Typography-Scaling erfolgt jetzt AUTOMATISCH via theme.json fluid:true
   Presets. Dieser Block enthaelt NUR noch Struktur-/Layout-Overrides fuer
   Mobile, die nicht ueber Presets abbildbar sind:

   - Hero V1 Stack-Architektur (Cover-Columns stacken, Overlay-BG weg)
   - Hero V2 Image-Radius 30 -> 20, Columns-Gap
   - Trust-Row vertikal Stack
   - Footer-Columns vertikal + Gap

   Breakpoint 781px = WP-Default.
   ========================================================================== */

@media (max-width: 781px) {
	/* ==================== HERO V1 (Home, Produkt-Landings) ====================
	 * Figma 1151:3701 (V1) + 1094:1086 (V3). Struktur-Bruch Desktop->Mobile:
	 * Desktop = Cover mit Overlay-Card, Mobile = Stack (Image, H1, Body, Button).
	 * Pattern-Source bleibt unveraendert, wir stacken die Cover-Columns und
	 * entfernen den transparenten Card-BG.
	 */

	/* Cover als Stack: Bild oben (320px) + Card unten, statt Overlay-Layout
	 * Wir nutzen flex-column auf dem Cover-Wrapper, ziehen das Background-Img
	 * aus position:absolute raus und stellen es als statisches Element oben
	 * an. Der dim-layer entfaellt, die Card bekommt opaken BG. */
	.hitop-hero-split-card.wp-block-cover,
	.hitop-hero-product-cover.wp-block-cover {
		display: flex !important;
		flex-direction: column !important;
		min-height: 0 !important;
		height: auto !important;
		padding: 0 !important;
	}

	/* Background-Image: aus absolute raus, als 320px Block oben */
	.hitop-hero-split-card .wp-block-cover__image-background,
	.hitop-hero-product-cover .wp-block-cover__image-background {
		position: relative !important;
		inset: auto !important;
		width: 100% !important;
		height: 320px !important;
		object-fit: cover !important;
	}

	/* dim-layer entfaellt auf Mobile */
	.hitop-hero-split-card .wp-block-cover__background,
	.hitop-hero-product-cover .wp-block-cover__background {
		display: none !important;
	}

	/* Inner-Container nimmt restliche Breite ohne min-height */
	.hitop-hero-split-card .wp-block-cover__inner-container,
	.hitop-hero-product-cover .wp-block-cover__inner-container {
		width: 100% !important;
		min-height: 0 !important;
		flex: 1 0 auto !important;
	}

	/* Columns stacken statt nebeneinander */
	.hitop-hero-split-card .wp-block-columns,
	.hitop-hero-product-cover .wp-block-columns {
		flex-direction: column !important;
		gap: 0 !important;
	}

	/* Linke leere Platzhalter-Spalte verbergen (Desktop 50/50 fuer Cover-Split) */
	.hitop-hero-split-card .wp-block-column:first-child:empty,
	.hitop-hero-product-cover .wp-block-column:first-child:empty {
		display: none !important;
	}

	/* Rechte Text-Spalte: weisser BG (statt rgba 0.7), Padding fuer Lesbarkeit */
	.hitop-hero-split-card .wp-block-column.has-background,
	.hitop-hero-product-cover .wp-block-column.has-background {
		background: #fff !important;
		padding: 32px 22px 40px !important;
		flex-basis: 100% !important;
	}

	/* Buttons kompakter: Desktop p:20/30 -> Mobile p:10/30, Hoehe ~40px */
	.hitop-hero-split-card .wp-block-button__link,
	.hitop-hero-product-cover .wp-block-button__link {
		padding-top: 10px !important;
		padding-bottom: 10px !important;
	}

	/* ==================== HERO V2 (Symptome, Brennende Fuesse) ====================
	 * Figma 1151:3663. Bereits korrekt als Stack-Pattern gebaut.
	 * Nur Image-Radius + Columns-Stack, Typography kommt ueber Presets.
	 */

	.hitop-hero-v2 .wp-block-columns {
		gap: 24px !important;
	}

	.hitop-hero-v2 .wp-block-column[style*="flex-basis:600px"] {
		flex-basis: 100% !important;
	}

	.hitop-hero-v2__image img {
		width: 100%;
		height: auto;
		aspect-ratio: 600 / 400;
		border-radius: 20px !important; /* Mobile Image-Radius 30 -> 20 */
	}

	/* ==================== CARD-GAP ====================
	 * Desktop 46-47px inline -> Mobile 20px. Nur wo inline gesetzt.
	 */
	.wp-block-columns[style*="gap:47px"],
	.wp-block-columns[style*="gap: 47px"],
	.wp-block-columns[style*="gap:46px"],
	.wp-block-columns[style*="gap: 46px"] {
		gap: 20px !important;
	}

	/* ==================== IMAGE + CARD BORDER-RADIUS 30 -> 20 ====================
	 * Figma Mobile hat durchgehend r:20 statt r:30. Ausnahme: media-text (r:30 bleibt).
	 */
	.wp-block-image.has-custom-border img,
	.wp-block-image[style*="border-radius:30px"] img,
	.wp-block-group[style*="border-radius:30px"],
	.wp-block-column[style*="border-radius:30px"] {
		border-radius: 20px !important;
	}

	/* ==================== TRUST-ROW VERTIKAL STACK ====================
	 * Figma Mobile: 4 Groups 300x150 vertikal auf F5F5F5, statt horizontal.
	 * Fix 2026-05-12: gap 30px war zu groß — User flagged "riesige Abstände".
	 * Reduziert auf 16px, plus die Badge-Subgroup (.hitop-trust-row__item--badges)
	 * bleibt horizontal mit 12px gap (sind nur Mini-Logos). */
	.hitop-trust-row .hitop-trust-row__items {
		flex-direction: column !important;
		gap: 16px !important;
	}
	.hitop-trust-row .hitop-trust-row__item--badges {
		flex-direction: row !important;
		flex-wrap: wrap !important;
		justify-content: center !important;
		gap: 12px !important;
	}
	/* Bug 2026-05-12: Desktop hat `flex: 0 0 300px` als flex-basis.
	 * In flex-direction:column wird flex-basis zur MAIN-AXIS-Size = Höhe!
	 * Resultat: Jedes Item bekommt 300px Höhe → riesige Abstände trotz gap:16.
	 * Mobile-Override: flex-basis auto, width 300px (oder 100% bei badges). */
	.hitop-trust-row .hitop-trust-row__item {
		flex: 0 0 auto !important;
		height: auto !important;
		width: 100% !important;
		max-width: 300px !important;
	}
	.hitop-trust-row .hitop-trust-row__item--badges {
		max-width: 100% !important;
		width: auto !important;
	}

	.hitop-trust-row .hitop-trust-row__slot--google,
	.hitop-trust-row .hitop-trust-row__slot--foerderer,
	.hitop-trust-row .hitop-trust-row__slot--made,
	.hitop-trust-row .hitop-trust-row__item--badges {
		margin: 0 auto;
	}

	/* ==================== FOOTER ====================
	 * Figma Mobile: Columns vertikal, Gap 49px. Typography kommt ueber Presets
	 * (Footer-Paragraph hat fontSize:"xs" = 14px fix).
	 */
	.wp-block-template-part footer .wp-block-columns,
	footer.wp-block-template-part .wp-block-columns {
		flex-direction: column !important;
		gap: 49px !important;
	}
}

/* ==================== INLINE-LINK: brand-primary ====================
 * Ersetzt hartkodiertes style="color:#D83F27;text-decoration:underline".
 * Wird im Flow-Text benutzt (z.B. "zu den Mietbedingungen" in p47-produkt-top).
 */
a.hitop-link-primary {
	color: var(--wp--preset--color--brand-primary);
	text-decoration: underline;
}

a.hitop-link-primary:hover,
a.hitop-link-primary:focus {
	color: var(--wp--preset--color--brand-primary-hover, #AB1700);
}

/* ==================== VIDEO-FRAME (zentriert, begrenzte Breite) ====================
 * Figma zeigt Produkt-Videos mit 750x422 zentriert im 1099px-Content-Bereich.
 * WP-Image-Block rendert sonst full-width via sizeSlug:"large".
 */
.hitop-video-frame {
	max-width: 750px;
	margin-left: auto;
	margin-right: auto;
}

.hitop-video-frame img {
	width: 100%;
	height: auto;
	display: block;
}

/* ==================== VORTEILE 4-CARD-GRID (Equal-Height + Left-Align) ====================
 * Figma 1104:3253: 2x2-Card-Grid mit gleicher Hoehe. Icons + Titel in einer
 * Zeile links oben, Body darunter linksbuendig. CSS-Grid mit grid-auto-rows:1fr
 * macht alle Karten gleich hoch. Mobile bricht auf 1fr um.
 */
.hitop-vorteile-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-auto-rows: 1fr;
	gap: 24px;
}

.hitop-vorteile-grid > .has-shadow,
.hitop-vorteile-grid > .wp-block-group {
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	text-align: left;
}

/* Icon + H3 in einer Zeile (horizontal) wie in Figma */
.hitop-vorteile-grid .wp-block-image {
	margin: 0 !important;
	display: inline-block;
	vertical-align: middle;
}

.hitop-vorteile-grid .wp-block-image + .wp-block-heading {
	margin-top: 16px;
}

/* Paragraph unter Icon+Title linksbuendig */
.hitop-vorteile-grid .wp-block-heading,
.hitop-vorteile-grid p {
	text-align: left;
	width: 100%;
}

@media (max-width: 781px) {
	.hitop-vorteile-grid {
		grid-template-columns: 1fr;
	}
}

/* ==================== GUT-ZU-WISSEN / ERGEBNIS-BOX ====================
 * Brand-Primary Callout-Box (Figma Group 156 — brand-primary BG, weißer Text).
 * Verwendet in p47-produkt-top (Gut zu wissen).
 * Der Info-Glyph steht als Inline-Unicode im <strong> (ⓘ / ✓).
 */
.hitop-gut-zu-wissen strong {
	font-weight: 700;
}

/* 2026-05-11 (Annotation mown7w17): Saubere SVG-Info-Ikone statt
   Unicode-Emoji "ⓘ" — Inter-aligned, vertical mid, 8px Abstand zum
   "Gut zu wissen:"-Strong. */
.hitop-gut-zu-wissen__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	margin-right: 8px;
	vertical-align: -4px;
	color: #fff;
}
.hitop-gut-zu-wissen__icon svg {
	display: block;
}

.hitop-gut-zu-wissen a {
	color: #fff;
	text-decoration: underline;
}

/* ==================== ERGEBNIS-BOX (brand-light / helle rot-Abstufung) ====================
 * Figma 1104:3562 Group 156: Rectangle mit opacity:0.1 auf brand-primary.
 * Voll-Breite unter dem 2-Col-Wissenschaft-Block, nicht in der Text-Spalte.
 * Check-Glyph vor "Ergebnis:" in brand-primary (via inline style in pattern).
 */
.hitop-ergebnis-box strong {
	font-weight: 700;
}

/* ==================== NUTZUNG 3-CARDS (Equal-Height) ====================
 * Figma 1104:4009: 3 Cards nebeneinander, alle gleich hoch.
 */
.hitop-template-produkt-nutzung .wp-block-columns {
	align-items: stretch;
}

.hitop-template-produkt-nutzung .wp-block-column {
	display: flex;
	flex-direction: column;
}

.hitop-template-produkt-nutzung .wp-block-column > .has-shadow {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	height: 100%;
}

/* ==================== SYMPTOM-SLIDE IMAGE (full-cover links, gleiche Hoehe wie rechte Spalte) ====================
 * Figma zeigt das Slider-Bild 864x928 full-bleed links, rechts light-grey-Panel
 * mit gleicher Hoehe. object-fit:cover + height:100% damit Spalten matchen.
 */
.hitop-template-symptom-slider .wp-block-columns {
	align-items: stretch;
}

.hitop-symptom-slide__image {
	margin: 0;
	height: 100%;
}

.hitop-symptom-slide__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: left center;
	display: block;
}

/* ==================== VIDEO-CARDS IM SLIDER (Equal-Height) ====================
 * .hitop-slider__slide wird von Embla auf gleiche Hoehe gesetzt, aber die
 * innere .hitop-video-card fuellt nicht automatisch. Fix: height:100% +
 * flex-column so dass Bild oben, Content fuellt unten mit auto-margin.
 */
.hitop-slider .hitop-slider__slide > .hitop-video-card,
.hitop-slider .hitop-slider__slide > .has-shadow {
	height: 100%;
	display: flex;
	flex-direction: column;
}

/* Der Content-Bereich (nach dem Bild) soll sich fuellen damit alle Cards
 * gleich hoch enden — Title sits at top of content area, body oben. */
.hitop-slider .hitop-video-card > .hitop-video-card__content,
.hitop-slider .hitop-video-card > .wp-block-group {
	flex: 1 1 auto;
}

/* ==================== MERKMALE 3-CARDS (Symptomseite, Equal-Height) ====================
 * Figma 1104:2204: 3 Merkmale-Cards nebeneinander, alle gleich hoch.
 */
.hitop-template-symptom-grid .wp-block-columns {
	align-items: stretch;
}

.hitop-template-symptom-grid .wp-block-column {
	display: flex;
	flex-direction: column;
}

.hitop-template-symptom-grid .wp-block-column > .hitop-card-symptom,
.hitop-template-symptom-grid .wp-block-column > .has-shadow {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	height: 100%;
}

/* Merkmale-Cards (Symptomseite): Image-Figures konsistent auf volle Breite
   strecken — WP-Core rendert sonst je nach natuerlicher Bild-Ratio
   unterschiedliche Breiten (Card 1 360px, Cards 2+3 427px). 3:2-Ratio
   entspricht Figma-Slot und gleicht Card-Hoehen. Obere Ecken bleiben
   gerundet (30px) via Block-Attribut im Pattern. */
.hitop-card-symptom > .wp-block-image,
.hitop-card-symptom .hitop-card-symptom__image {
	width: 100%;
	max-width: 100%;
	margin: 0;
}

.hitop-card-symptom .hitop-card-symptom__image img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	object-position: center;
}

/* ==================== PREIS-CARDS (Mieten/Kaufen) ====================
 * Figma 1104:3869. Jede Card ist position:relative damit der Badge absolut
 * mittig ueber dem oberen Rand sitzen kann. Inhalt ist zentriert.
 * Beide Cards gleich hoch (auch bei unterschiedlicher Liste).
 */
.hitop-home-produkt-teaser .wp-block-columns {
	align-items: stretch;
}

.hitop-home-produkt-teaser .wp-block-column {
	display: flex;
	flex-direction: column;
}

.hitop-home-produkt-teaser .hitop-preis-card {
	flex: 1 1 auto;
	height: 100%;
}

.hitop-preis-card {
	position: relative;
	text-align: center;
}

.hitop-preis-card .hitop-preis-badge {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translate(-50%, -50%);
	white-space: nowrap;
	margin: 0 !important;
	z-index: 1;
}

/* Haken-Bullets statt Standard ul-Disc */
.hitop-preis-checks {
	list-style: none !important;
	padding-left: 0 !important;
	margin: 0 auto;
	text-align: left;
	display: inline-block;
}

.hitop-preis-checks li {
	position: relative;
	padding-left: 28px;
	margin-bottom: 4px;
}

.hitop-preis-checks li::before {
	content: "✓";
	position: absolute;
	left: 0;
	top: 0;
	color: var(--wp--preset--color--brand-primary);
	font-weight: 900;
}

/* Separator: subtiler grauer Divider */
.hitop-preis-card hr.wp-block-separator {
	border: 0;
	border-top: 1px solid var(--wp--preset--color--grey);
	opacity: 0.5;
}

/* "Fuer wen geeignet" — Bild fuellt rechte Spalte komplett (height + width 100%).
   User-Feedback: "Figure geht nicht auf gesamte Breite". Diese Aenderung bleibt;
   sie ist visuell unkritisch (Spalten-Layout bleibt). */
.hitop-fuer-wen-geeignet > .wp-block-column:last-child {
	display: flex;
	align-items: stretch;
}

.hitop-fuer-wen-geeignet > .wp-block-column:last-child .wp-block-image {
	margin: 0;
	width: 100%;
	height: 100%;
}

.hitop-fuer-wen-geeignet > .wp-block-column:last-child .wp-block-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
}

/* ==========================================================================
   Legal-Pages (Widerrufsbelehrung, AGB, Datenschutz, Impressum, Garantien …)
   Lesbare Spalte, ruhiger Rhythmus.
   ========================================================================== */
.hitop-legal-page {
	max-width: 880px;
	margin: 0 auto;
	color: var(--wp--preset--color--dark-anthrazit);
	line-height: 1.7;
}

.hitop-legal-page .wp-block-heading {
	color: var(--wp--preset--color--dark-anthrazit);
	letter-spacing: -0.01em;
}

.hitop-legal-page h1.wp-block-heading {
	font-size: 40px;
	font-weight: 700;
	line-height: 1.25;
	margin: 0 0 24px;
}

.hitop-legal-page h2.wp-block-heading {
	font-size: 26px;
	font-weight: 700;
	line-height: 1.3;
	margin: 40px 0 12px;
}

.hitop-legal-page h3.wp-block-heading {
	font-size: 20px;
	font-weight: 700;
	line-height: 1.35;
	margin: 24px 0 8px;
}

.hitop-legal-page h4.wp-block-heading {
	font-size: 17px;
	font-weight: 700;
	line-height: 1.4;
	margin: 20px 0 6px;
}

.hitop-legal-page p {
	margin: 0 0 14px;
	font-size: 16px;
}

.hitop-legal-page ul.wp-block-list,
.hitop-legal-page ol.wp-block-list {
	margin: 8px 0 18px;
	padding-left: 1.5rem;
	font-size: 16px;
	list-style-position: outside;
}

.hitop-legal-page ul.wp-block-list {
	list-style-type: disc;
}

.hitop-legal-page ol.wp-block-list {
	list-style-type: decimal;
}

.hitop-legal-page ul.wp-block-list li,
.hitop-legal-page ol.wp-block-list li {
	margin: 0 0 6px;
}

.hitop-legal-page a {
	color: var(--wp--preset--color--brand-primary);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.hitop-legal-page a:hover {
	color: var(--wp--preset--color--brand-hover);
}

@media (max-width: 781px) {
	.hitop-legal-page h1.wp-block-heading {
		font-size: 30px;
	}

	.hitop-legal-page h2.wp-block-heading {
		font-size: 22px;
		margin-top: 32px;
	}

	.hitop-legal-page h3.wp-block-heading {
		font-size: 18px;
	}
}

/* ==========================================================================
   Blog Template (single.html) — Hero, Meta, Tabs-Section, Selbstcheck-CTA
   ========================================================================== */

/* --- Blog Hero (hitop/blog-hero) ----------------------------------------- */
.hitop-blog-hero {
	background-color: var(--wp--preset--color--white);
}

.hitop-blog-hero .hitop-blog-hero__image img {
	display: block;
	width: 100%;
	height: auto;
	max-width: 600px;
	aspect-ratio: 600 / 400;
	object-fit: cover;
}

.hitop-blog-hero .wp-block-post-title {
	color: var(--wp--preset--color--dark-anthrazit);
}

.hitop-blog-hero .wp-block-post-excerpt__excerpt {
	margin: 0;
}

/* Meta-Row (Datum + Lesedauer) */
.hitop-blog-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 32px;
	align-items: center;
	color: var(--wp--preset--color--dark-anthrazit);
	font-size: var(--wp--preset--font-size--md);
	font-weight: 300;
}

.hitop-blog-meta__item {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	white-space: nowrap;
}

.hitop-blog-meta__icon {
	flex-shrink: 0;
	color: var(--wp--preset--color--brand-primary);
}

.hitop-blog-meta__text {
	color: inherit;
}

@media (max-width: 781px) {
	.hitop-blog-hero .hitop-blog-hero__image img {
		max-width: 100%;
	}

	.hitop-blog-meta {
		gap: 16px 24px;
	}
}

/* --- Tabs Section Wrapper (hitop/tabs-section) --------------------------- */
.hitop-tabs-section {
	background-color: var(--wp--preset--color--white);
}

.hitop-tabs-section .hitop-tabs {
	margin-top: 0;
}

/* Center-Button unterhalb der Tabs */
.hitop-tabs-section > .wp-block-group > .wp-block-buttons {
	justify-content: center;
}

/* --- Blog Selbstcheck CTA (hitop/blog-selbstcheck-cta) ------------------- */
.hitop-blog-selbstcheck-cta {
	background-color: var(--wp--preset--color--dark-anthrazit);
}

.hitop-blog-selbstcheck-cta .wp-block-columns {
	margin: 0;
}

.hitop-blog-selbstcheck-cta__image img {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 100%;
	object-fit: cover;
	aspect-ratio: 864 / 699;
}

.hitop-blog-selbstcheck-cta .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--brand-hover) !important;
}

@media (max-width: 1024px) {
	.hitop-blog-selbstcheck-cta .wp-block-column.has-dark-anthrazit-background-color {
		padding-left: var(--wp--preset--spacing--gutter) !important;
		padding-right: var(--wp--preset--spacing--gutter) !important;
		padding-top: 56px !important;
		padding-bottom: 56px !important;
	}
}

@media (max-width: 781px) {
	.hitop-blog-selbstcheck-cta .wp-block-columns {
		flex-direction: column;
	}

	.hitop-blog-selbstcheck-cta .wp-block-column {
		flex-basis: 100% !important;
		width: 100%;
	}
}

/* --- Inline Blog-CTA-Block (Anthrazit Split – Seed-Post) ----------------- */
.hitop-blog-cta-block .wp-block-columns {
	margin: 0;
}

.hitop-blog-cta-block__image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	aspect-ratio: 864 / 699;
}

@media (max-width: 1024px) {
	.hitop-blog-cta-block .wp-block-column[style*="padding-left:200px"] {
		padding-left: var(--wp--preset--spacing--gutter) !important;
		padding-right: var(--wp--preset--spacing--gutter) !important;
		padding-top: 56px !important;
		padding-bottom: 56px !important;
	}
}

@media (max-width: 781px) {
	.hitop-blog-cta-block .wp-block-columns {
		flex-direction: column;
	}

	.hitop-blog-cta-block .wp-block-column {
		flex-basis: 100% !important;
		width: 100%;
	}
}

/* --- Bild-Zitat Image im Blog (Quote-Section mit Diabetes-Sticker) ------- */
.hitop-blog-quote__image img {
	display: block;
	width: 100%;
	height: auto;
	object-fit: cover;
}

/* --- Blog-Archiv (home.html, /blog/-Page) ------------------------------- */
.hitop-blog-archive-hero {
	max-width: 100%;
}

.hitop-blog-archive-hero h1 {
	max-width: 1080px;
}

.hitop-blog-archive-hero p {
	max-width: 720px;
}

.hitop-blog-archive {
	max-width: 100%;
}

.hitop-blog-archive .wp-block-post-template.is-layout-grid {
	gap: 47px 47px;
	grid-template-columns: 1fr;
	list-style: none;
	margin: 0;
	padding: 0;
}

@media (min-width: 768px) {
	.hitop-blog-archive .wp-block-post-template.is-layout-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1024px) {
	.hitop-blog-archive .wp-block-post-template.is-layout-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.hitop-blog-archive__card {
	background: #fff;
	border-radius: 30px;
	box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	transition: box-shadow 0.2s ease;
}

.hitop-blog-archive__card:hover {
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.10);
}

.hitop-blog-archive__image {
	margin: 0 !important;
}

.hitop-blog-archive__image img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-top-left-radius: 30px;
	border-top-right-radius: 30px;
}

.hitop-blog-archive__body {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
}

.hitop-blog-archive__title a {
	color: var(--wp--preset--color--dark-anthrazit, #2C2C2C);
	text-decoration: none;
}

.hitop-blog-archive__title a:hover {
	color: var(--wp--preset--color--brand-primary, #D83F27);
}

.hitop-blog-archive__excerpt p {
	margin: 0;
}

.hitop-blog-archive__more {
	margin-top: auto;
	display: inline-block;
	color: var(--wp--preset--color--brand-primary, #D83F27);
	font-size: 0.875rem;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: uppercase;
	text-decoration: none;
	border: 2px solid var(--wp--preset--color--brand-primary, #D83F27);
	border-radius: 34px;
	padding: 10px 30px;
	align-self: flex-start;
	transition: background 0.18s ease, color 0.18s ease;
}

.hitop-blog-archive__more:hover {
	background: var(--wp--preset--color--brand-primary, #D83F27);
	color: #fff;
}

.hitop-blog-archive__pagination {
	margin-top: 60px;
}

.hitop-blog-archive__pagination .page-numbers {
	color: var(--wp--preset--color--dark-anthrazit, #2C2C2C);
	font-size: 1rem;
	padding: 0.5rem 0.875rem;
	text-decoration: none;
}

.hitop-blog-archive__pagination .page-numbers.current {
	background: var(--wp--preset--color--brand-primary, #D83F27);
	color: #fff;
	border-radius: 50%;
}

@media (max-width: 781px) {
	.hitop-blog-archive-hero {
		padding-top: 56px !important;
		padding-bottom: 32px !important;
	}
	.hitop-blog-archive {
		padding-bottom: 56px !important;
	}
}

/* --- Blog Callout-Box (hitop/blog-callout) ------------------------------ */
/* Hinweis-/Info-Kasten (Light-Grey, Radius 30px). Wiederverwendbar fuer
   "Uebrigens"-Hinweise, "Gut zu wissen"-Boxen, kurze Vertiefungen. */
.hitop-blog-callout {
	border-radius: 30px;
}

.hitop-blog-callout p {
	margin: 0;
}

.hitop-blog-callout p + p {
	margin-top: 0.6em;
}

.hitop-blog-callout strong {
	color: var(--wp--preset--color--brand-primary, #D83F27);
	font-weight: 700;
}

@media (max-width: 781px) {
	.hitop-blog-callout {
		padding: 24px 24px !important;
	}
}

/* --- Blog Quellen-Liste (.hitop-blog-sources) --------------------------- */
/* Kleinerer Font, eingerueckte ordered list, kein bold der Autoren-Namen
   um den Lese-Fluss nicht zu stoeren. */
.hitop-blog-sources {
	margin-top: 56px;
	padding-top: 32px;
	border-top: 1px solid var(--wp--preset--color--grey, #D9D9D9);
}

.hitop-blog-sources > h2,
.hitop-blog-sources > h3 {
	font-size: 1.25rem;
	font-weight: 700;
	letter-spacing: -0.02em;
	margin-bottom: 16px;
}

.hitop-blog-sources ol {
	font-size: 0.9rem;
	line-height: 1.55;
	color: var(--wp--preset--color--light-anthrazit, #595959);
	padding-left: 1.4em;
}

.hitop-blog-sources ol li {
	margin-bottom: 0.6em;
}

.hitop-blog-sources ol li a {
	color: var(--wp--preset--color--brand-primary, #D83F27);
	word-break: break-word;
}

.hitop-blog-sources ol li strong {
	color: var(--wp--preset--color--dark-anthrazit, #2C2C2C);
	font-weight: 600;
}

/* --- Blog Article-Cite (Geprueft-von / Verfasst-von Hinweis am Ende) ---- */
/* Kleines unaufdringliches Footer-Element vor den Quellen. */
.hitop-blog-cite {
	margin-top: 48px;
	padding: 16px 0;
	border-top: 1px solid var(--wp--preset--color--grey, #D9D9D9);
	border-bottom: 1px solid var(--wp--preset--color--grey, #D9D9D9);
	font-size: 0.875rem;
	color: var(--wp--preset--color--light-anthrazit, #595959);
	font-style: italic;
	line-height: 1.5;
}

.hitop-blog-cite p {
	margin: 0;
}

.hitop-blog-cite p + p {
	margin-top: 6px;
}

/* ========================================================================
   Wissensseiten (CPT `wissen`) — Single-Template & Patterns
   Figma 3139:4044 (Wissen Unterseite Template)
   ======================================================================== */

/* --- Wissen Hero (Bild links + Title/Excerpt rechts, ohne Meta) --------- */
.hitop-wissen-hero .wp-block-columns {
	gap: 70px;
}

.hitop-wissen-hero__image img {
	display: block;
	width: 100%;
	height: auto;
	max-width: 600px;
	aspect-ratio: 600 / 400;
	object-fit: cover;
}

@media (max-width: 781px) {
	.hitop-wissen-hero {
		padding-top: 56px !important;
		padding-bottom: 56px !important;
	}
	.hitop-wissen-hero .wp-block-columns {
		flex-direction: column;
		gap: 32px;
	}
	.hitop-wissen-hero .wp-block-column {
		flex-basis: 100% !important;
		width: 100%;
	}
	.hitop-wissen-hero .wp-block-post-title {
		margin-bottom: 24px !important;
	}
}

/* --- Wissen USP Row (3 zentrierte Spalten mit Icon + Title) ------------- */
.hitop-wissen-usp-row .wp-block-columns {
	align-items: flex-start;
}

.hitop-wissen-usp-row__col {
	display: flex !important;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.hitop-wissen-usp-row__icon {
	width: 80px;
	height: 80px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto;
}

.hitop-wissen-usp-row__icon svg {
	width: 80px;
	height: 80px;
	display: block;
}

.hitop-wissen-usp-row__title {
	max-width: 374px;
	margin-left: auto;
	margin-right: auto;
}

@media (max-width: 781px) {
	.hitop-wissen-usp-row .wp-block-columns {
		flex-direction: column;
		gap: 40px;
	}
	.hitop-wissen-usp-row .wp-block-column {
		flex-basis: 100% !important;
		width: 100%;
	}
}

/* --- Wissen Checklist (Bullet-Liste mit Check-Icons + Highlight-Box) ---- */
/* Container sitzt im constrained-Layout 1328 — keine eigene max-width-Verengung. */
.hitop-wissen-checklist__list {
	list-style: none;
	padding-left: 0;
}

.hitop-wissen-checklist__list li {
	position: relative;
	padding-left: 36px;
	margin-bottom: 16px;
	font-size: var(--wp--preset--font-size--lg);
	font-weight: 500;
	line-height: 1.5;
	color: var(--wp--preset--color--dark-anthrazit);
}

.hitop-wissen-checklist__list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 4px;
	width: 20px;
	height: 20px;
	background-color: var(--wp--preset--color--brand-primary);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M4 10l4 4 8-9' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M4 10l4 4 8-9' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* --- Wissen Highlight-Box (Orange-Tint r=30, Icon + Text) -------------- */
/* Figma 3139:4192 → bg rgba(216,63,39,0.1) — orange-tint, NICHT light-grey. */
.hitop-wissen-highlight-box {
	display: flex;
	align-items: center;
	gap: 16px;
	background-color: rgba(216, 63, 39, 0.1) !important;
}

.hitop-wissen-highlight-box__icon {
	flex-shrink: 0;
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.hitop-wissen-highlight-box__icon svg {
	width: 40px;
	height: 40px;
	display: block;
}

.hitop-wissen-highlight-box__text {
	flex: 1 1 auto;
	min-width: 0;
}

/* --- Wissen Text+Video+CTA --------------------------------------------- */
.hitop-wissen-text-video-cta__thumb img {
	display: block;
	width: 100%;
	max-width: 750px;
	height: auto;
	aspect-ratio: 750 / 422;
	object-fit: cover;
	margin: 0 auto;
}

/* CTA-Button "ZUM PRODUKT" — Outline-Style (Figma 3139:4211).
   White BG + 2px solid #D83F27 + orange text + drop-shadow. */
.hitop-wissen-text-video-cta__btn .wp-block-button__link {
	background-color: #ffffff;
	color: var(--wp--preset--color--brand-primary);
	box-shadow: 0 4px 4px rgba(0, 0, 0, 0.35);
}
.hitop-wissen-text-video-cta__btn .wp-block-button__link:hover,
.hitop-wissen-text-video-cta__btn .wp-block-button__link:focus {
	background-color: var(--wp--preset--color--brand-primary);
	color: #ffffff;
}

/* --- Wissen Text+Media (Was ist Polyneuropathie? Section) -------------- */
.hitop-wissen-text-media .wp-block-image img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 864 / 699;
	object-fit: cover;
}

@media (max-width: 781px) {
	.hitop-wissen-text-media .wp-block-columns {
		flex-direction: column;
		gap: 32px;
	}
	.hitop-wissen-text-media .wp-block-column {
		flex-basis: 100% !important;
		width: 100%;
	}
}

/* --- Wissen Mehr-Lesen Carousel-2 Cards mit Bild ----------------------- */
.hitop-wissen-mehr-lesen .hitop-card-2 .wp-block-image img,
.hitop-blog-mehr-lesen .hitop-card-2 .wp-block-image img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 550 / 187;
	object-fit: cover;
}

/* --- P1-Fixes (Computed-Style-Diff 2026-04-29) ------------------------- */

/* (3) Card-Bild Height fixen: Usage/Carousel-Cards/Wissen — 187px statt 240-280px */
.hitop-usage-cards-with-text .hitop-card-usage__image,
.hitop-usage-cards-with-text .hitop-card-usage__image img,
.wp-block-hitop-carousel-cards-3v1 .hitop-card .wp-block-image,
.wp-block-hitop-carousel-cards-3v1 .hitop-card .wp-block-image img,
.wp-block-hitop-carousel-cards-3v2 .hitop-card .wp-block-image,
.wp-block-hitop-carousel-cards-3v2 .hitop-card .wp-block-image img,
.hitop-wissen-mehr-lesen .hitop-card-2 .wp-block-image,
.hitop-wissen-mehr-lesen .hitop-card-2 .wp-block-image img,
.hitop-blog-mehr-lesen .hitop-card-2 .wp-block-image,
.hitop-blog-mehr-lesen .hitop-card-2 .wp-block-image img {
	height: 187px;
	object-fit: cover;
	object-position: center;
}

/* (4) H2 line-height-Override: has-xl-font-size soll 1.5 sein, nicht 1.2.
   Spezifisch nur fuer h2, damit Hero-H1 (mit eigenem 1.05/1.1/1.2 inline-style) nicht betroffen ist. */
h2.wp-block-heading.has-xl-font-size {
	line-height: 1.5;
}

/* (5) H3 Color + Weight: FAQ-Trigger-Button, Newsletter-H2, Card-2-H3 — Black-Token.
   Theme.json elements.h3 liefert default 900 + dark-anthrazit. Hier nur noch
   spezifische Faelle wo Plugin-SCSS oder Pattern-Inline-Styles dagegenhalten. */

/* FAQ-Trigger: plugin SCSS (.hitop-faq__trigger) setzt font-weight:300 +
   color:dark-anthrazit. Spezifischere Selector-Kette schlaegt ohne !important. */
.wp-block-hitop-faq .hitop-faq__heading .hitop-faq__trigger,
.wp-block-hitop-faq .hitop-faq__heading .hitop-faq__question {
	color: var(--wp--preset--color--dark-anthrazit);
	font-weight: 900;
}

/* Newsletter-H2 (Figma 3143:9591/1104:2077): Inter 300, 32px, lh 48px, #2C2C2C.
   Strong-Span fuer "10€" als Brand-Akzent (Orange #D83F27, fw 700).
   theme.json setzt h2 generell auf fw 900 — hier explizit zurueck auf 300. */
.hitop-newsletter h2,
.hitop-newsletter h2.wp-block-heading {
	color: var(--wp--preset--color--dark-anthrazit) !important;
	font-weight: 300 !important;
}
.hitop-newsletter h2 strong {
	font-weight: 700 !important;
	color: var(--wp--preset--color--brand-primary) !important;
}

/* (6) Blog-Selbstcheck-CTA: Anthrazit-Cover linke Haelfte, Bild rechts.
   Outer-Group hat keinen Background mehr (Cover wird im Spalten-Background gesetzt).
   Bild rechts soll voll bleeden ohne Border-Radius. */
.hitop-blog-selbstcheck-cta {
	background-color: transparent;
}

.hitop-blog-selbstcheck-cta__image {
	margin: 0;
}

.hitop-blog-selbstcheck-cta__image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	aspect-ratio: 864 / 699;
	border-radius: 0;
}

/* ==========================================================================
   WEBSHOP HERO — Cover mit Right-Overlay (Figma 3143:9537, Hero-Variante 3 Produkt)
   Cover 1728x739, Bild full-bleed, rechtsseitiges weisses Overlay
   rgba(255,255,255,0.6) 913x739 (52.83% der Sektion).
   ========================================================================== */
.hitop-webshop-hero {
	position: relative;
	overflow: hidden;
}

.hitop-webshop-hero > .wp-block-cover__inner-container {
	position: absolute;
	inset: 0;
	width: 100%;
	max-width: none;
	padding: 0;
	margin: 0;
}

.hitop-webshop-hero .hitop-webshop-hero__overlay {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: 52.83%; /* Figma: 913/1728 */
	background: rgba(255, 255, 255, 0.6);
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 24px;
}

.hitop-webshop-hero .hitop-webshop-hero__overlay > * {
	max-width: 661px; /* Figma: Frame 6 Breite */
	width: 100%;
}

/* Mobile: Overlay full-width, etwas kompakteres Padding */
@media (max-width: 781px) {
	.hitop-webshop-hero .hitop-webshop-hero__overlay {
		position: relative;
		width: 100%;
		padding: 64px 24px !important;
	}
	.hitop-webshop-hero .hitop-webshop-hero__overlay h1 {
		font-size: clamp(2.5rem, 10vw, 4rem) !important;
	}
}

/* =========================================================
   Webshop — Für wen ist HiToP geeignet (Figma 3143:9584)
   Halb-Halb: links Orange-Panel, rechts Senior-Couple Bild
   ========================================================= */
.hitop-webshop-fuer-wen .hitop-webshop-fuer-wen__cols {
	gap: 0 !important;
	margin-bottom: 0;
}

.hitop-webshop-fuer-wen .hitop-webshop-fuer-wen__media {
	padding: 0 !important;
	align-self: stretch;
	display: flex;
}

.hitop-webshop-fuer-wen .hitop-webshop-fuer-wen__img,
.hitop-webshop-fuer-wen .hitop-webshop-fuer-wen__img img {
	margin: 0;
	width: 100%;
	height: 100%;
	display: block;
}

.hitop-webshop-fuer-wen .hitop-webshop-fuer-wen__img img {
	object-fit: cover;
	object-position: center;
}

@media (max-width: 1100px) {
	.hitop-webshop-fuer-wen .wp-block-column.has-primary-background-color {
		padding: 64px 32px !important;
	}
}

@media (max-width: 781px) {
	.hitop-webshop-fuer-wen .hitop-webshop-fuer-wen__cols {
		flex-direction: column;
	}
	.hitop-webshop-fuer-wen .wp-block-column {
		flex-basis: 100% !important;
	}
	.hitop-webshop-fuer-wen .hitop-webshop-fuer-wen__media {
		min-height: 320px;
	}
}

/* =========================================================
   Webshop — Erfahrungsberichte (Figma 3143:9588)
   3 Cards mit Bild oben, Quote + Autor unten
   ========================================================= */
.hitop-webshop-erfahrungsberichte .hitop-erfahrung-card {
	height: 100%;
	overflow: hidden;
	box-shadow: 0 4px 24px rgba(0, 0, 0, 0.05);
}

.hitop-webshop-erfahrungsberichte .hitop-erfahrung-card__image {
	margin: 0;
	aspect-ratio: 335 / 188;
	overflow: hidden;
}

.hitop-webshop-erfahrungsberichte .hitop-erfahrung-card__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

@media (max-width: 781px) {
	.hitop-webshop-erfahrungsberichte .hitop-webshop-erfahrungsberichte__cols {
		flex-direction: column;
	}
}

/* Override: Button "selbstcheck starten" — Figma fw 400, lowercase */
.hitop-webshop-fuer-wen .hitop-webshop-fuer-wen__btn .wp-block-button__link {
	text-transform: lowercase !important;
	font-weight: 400 !important;
	font-size: 1rem !important;
	letter-spacing: 0 !important;
}

/* Override: Section Eyebrow — Figma 22/300, kein uppercase */
.hitop-section-eyebrow {
	text-transform: none !important;
	font-weight: 300 !important;
	letter-spacing: 0 !important;
}

/* Home Lecture: Linke Spalte (light-grey BG) muss bis zur Bild-Hoehe reichen.
   Default WC-columns sind align-items:stretch — aber `is-vertically-aligned-center`
   (vorher gesetzt) machte `align-self:center` und damit shrink-to-fit. Stattdessen
   stretchen wir die Spalte auf volle Hoehe und zentrieren den Content vertikal
   per inner-flex. */
.hitop-home-lecture {
	align-items: stretch;
}
.hitop-home-lecture > .hitop-home-lecture__copy {
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.hitop-home-lecture > .hitop-home-lecture__media {
	display: flex;
}
.hitop-home-lecture > .hitop-home-lecture__media > figure,
.hitop-home-lecture > .hitop-home-lecture__media > figure > img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	margin: 0;
}

/* Carousel-2 (Blog-Grid): Card-Schatten nicht abschneiden. Slider-base hat zwar
   overflow-y:visible — aber das clipsContent vom .hitop-card kann abschneiden.
   Plus: das padding-block 1.5rem reicht fuer 2px-Offset-Schatten, aber wir geben
   ein bisschen mehr Luft horizontal beim ersten/letzten Slide. */
.hitop-carousel-2 .hitop-slider__viewport {
	padding-block: 2rem;
	margin-block: -2rem;
}

/* Slider-Facts: Inner-Group oben anliegend (kein flex auto-center). Figma 1099:791
   stellt Eyebrow + 88% + Body + Button alle ab y=+37 untereinander, NICHT vertikal
   zentriert. Default core/group ohne layout=flex hat keine Centering-Regel — aber
   __content ist flex-column und wuerde ohne explizite Vorgabe seine Children mittig
   positionieren wenn .hitop-fact-slide-inner auch flex bekommt. Hier explizit:
   inner-Group bleibt block (kein flex). */
.hitop-slider-facts .hitop-fact-slide-inner {
	display: block;
}

/* Expertenteam (carousel-3v2 Card): Image bis Card-Rand. Card hat padding 0;
   aber das Image koennte selber padding/inline-style setzen — sauber: figure
   margin 0 + img width 100%. */
.hitop-expertenteam .hitop-referent-card .hitop-referent-card__photo,
.hitop-expertenteam .hitop-referent-card > figure {
	margin: 0;
	width: 100%;
}
.hitop-expertenteam .hitop-referent-card .hitop-referent-card__photo img,
.hitop-expertenteam .hitop-referent-card > figure img {
	width: 100%;
	height: 239px; /* Fix 2026-05-12: war height:auto -> Bilder rendered overflow + Kopf-Crop */
	object-fit: cover;
	object-position: center top; /* Kopf bleibt sichtbar, Crop unten */
	display: block;
}
@media (max-width: 781px) {
	.hitop-expertenteam .hitop-referent-card .hitop-referent-card__photo img,
	.hitop-expertenteam .hitop-referent-card > figure img {
		height: 280px; /* Mobile etwas größer da Card schmaler — mehr Kopffläche */
	}
}

/* ==========================================================================
   WEBSHOP REFACTOR — Pattern-spezifisches CSS für die 2 webshop-eigenen
   Patterns (usp-cards-four "Vorteile" via .hitop-vorteile-card +
   webshop-zubehoer-3-cards). Mieten/Kaufen, Jetzt-Testen, Trust-Zertifikate
   und Slider-Facts laufen über Master-Components/Synced Patterns
   (p47-produkt-mieten-kaufen, jetzt-testen, include-trust-row, home-facts).
   ========================================================================== */

/* USPs 4er-Cards: nutzt .hitop-vorteile-grid (Equal-Height-Grid in Zeile 6464+)
   und .hitop-gut-zu-wissen (Banner in Zeile 6504+). Pattern hitop/usp-cards-four
   ist 1:1-Kopie des Vorteile-Blocks aus hitop/p47-produkt-top — gleiche Klassen,
   gleiche Icons (vorteil-1/3/2/4-*.svg), keine zusätzlichen webshop-Klassen. */

/* Zubehör nutzt jetzt den Custom-Block hitop/zubehor-cards via Pattern
   hitop/webshop-zubehor-section. Stylings im Plugin (hitop-blocks/src/blocks/zubehor-cards/). */

/* Pin mom21uh7: Thumbs gap to main image (Figma 1099:1027 — Hauptbild endet bei 548,
   Thumbs starten bei 568 = 20px Gap). */
.hitop-home-produkt-teaser .hitop-product-thumbs {
	padding-top: 20px;
}

/* Pin mom20zar: Für-wen-Sektion — Bild-Spalte muss Höhe der Text-Spalte annehmen.
   Override fuer .are-vertically-aligned-center / .is-vertically-aligned-center
   (sonst align-self:center → 432px statt 607px). */
.hitop-fuer-wen-geeignet,
.hitop-fuer-wen-geeignet.are-vertically-aligned-center {
	align-items: stretch !important;
}
.hitop-fuer-wen-geeignet > .wp-block-column,
.hitop-fuer-wen-geeignet > .wp-block-column.is-vertically-aligned-center {
	align-self: stretch !important;
}
.hitop-fuer-wen-geeignet > .wp-block-column:not(.has-brand-primary-background-color) {
	display: flex;
	padding: 0 !important;
}
.hitop-fuer-wen-geeignet > .wp-block-column:not(.has-brand-primary-background-color) > figure {
	width: 100%;
	height: 100%;
	margin: 0;
}
.hitop-fuer-wen-geeignet > .wp-block-column:not(.has-brand-primary-background-color) figure img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Pin mom21c74: Trust-Badges in Jetzt-Testen — Figma-konformes SVG-Häkchen
   (stroke #D83F27, width 3, line-cap round) statt Unicode "✓". CSS-::before mit
   data-uri SVG. Pattern entfernt das Unicode-Häkchen, CSS injiziert das echte Icon. */
.hitop-jetzt-testen__badges p {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}
.hitop-jetzt-testen__badges p::before {
	content: "";
	display: inline-block;
	width: 20px;
	height: 14px;
	flex-shrink: 0;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 23 17' fill='none'><path d='M21.5 1.5L7.75 15.5L1.5 9.13636' stroke='%23D83F27' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/></svg>");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}