/* ==========================================================================
   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;
}

.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;
}

.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) */

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

/* Modul-Abstand = Figma (Node 800:1496): 100px Desktop / 50px Mobile zwischen Modulen.
 * Module (full/wide-aligned Sections) tragen ihren Abstand selbst ueber das
 * section-Padding (oben+unten je 50/25px → gestapelt 100/50). Den zusaetzlichen
 * WordPress-Default-Block-Gap (~24px) zwischen Modulen entfernen, damit es exakt
 * 100/50 wird. Schmale Content-Bloecke (Headings/Absaetze, nicht full/wide) behalten
 * ihren Block-Gap fuer den Lesefluss. 2026-06-03 (Johannes-Feedback). */
:where(.wp-block-post-content, .entry-content) > .alignfull,
:where(.wp-block-post-content, .entry-content) > .alignwide {
	margin-block-start: 0;
	margin-block-end: 0;
}

/* Symptom-Body Narrative (2026-06-01, Annotations mpscm6wp + mpsc0fls + mpsc06zd):
 * Fliesstext nutzt die VOLLE Content-Breite (1328px) wie die Heading — Regel
 * reference_wissen_content_width: Lesetext = 1328, nur Karten/Carousel = 1100.
 * Vorher war der Text auf 1100 geklemmt -> klebte links unter der 1328-Heading. */
.hitop-symptom-narrative > p {
	max-width: 1328px;
	margin-inline: 0 auto;
}

.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);
}

.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;
}

/* ============================================================
   Fliesstext = Inter Light (300)
   User-Vorgabe 2026-06-08: Content-Absaetze light. Ausgenommen bleiben
   Hero-Module, Headlines, Auszeichnung (strong/b) und Listen (li).
   "main p" trifft nur Content-Absaetze (Hero, Includes und Footer liegen
   ausserhalb <main>; alle Templates wrappen Content in <main>). Komponenten
   mit eigenem font-weight (z.B. .hitop-fact-slide__text) gewinnen per
   Klassen-Spezifitaet und behalten ihr Gewicht. li wird NICHT getroffen.
   ============================================================ */
main p {
	font-weight: 300;
}

/* Auszeichnung im Fliesstext bleibt fett (Light-Absatz darf strong/b nicht
   relativ auf 400 ziehen) */
main p strong,
main p b {
	font-weight: 700;
}

/* Hero-Guard: Inline-Hero-Templates (Home / Symptome / Produkt / Webshop)
   haben den Hero innerhalb <main>. Dort Body-Text auf 400 halten. */
.hitop-hero p,
.hitop-hero-v2 p,
.hitop-hero-split-card p,
.hitop-hero-product-cover p,
.hitop-webshop-hero p,
.hitop-single-product__hero p,
.hitop-blog-hero p,
.hitop-wissen-hero p {
	font-weight: 400;
}

/* 2026-05-20 User-Korrektur: Klasse `.hitop-eyebrow` historisch als
 * "uppercase, bold 900, light-grey" definiert. User-Brief: "nicht versal" —
 * Versal-Audit fand 15 Patterns + 3 DB-Posts die diese Class nutzen, ueberall
 * als weiche Subline unter einer H2 gemeint. Klasse jetzt auf neutralen
 * Subline-Style umgestellt:
 *   - text-transform: none (war: uppercase)
 *   - font-weight: 300 (war: 900)
 *   - color: dark-anthrazit (war: light-anthrazit)
 *   - line-height: 1.5 fuer Lesefluss
 *
 * Falls echter Eyebrow-Look (uppercase + bold) gewuenscht: spezifische
 * Sub-Class wie `.hitop-fact-slide__eyebrow` (slider-facts) ueberschreibt
 * lokal. */
.hitop-eyebrow {
	font-size: 1.125rem;
	font-weight: 300;
	letter-spacing: 0;
	color: var(--wp--preset--color--dark-anthrazit);
	text-transform: none;
	line-height: 1.5;
	margin-block-end: var(--wp--preset--spacing--2xs);
}

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

.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);
}

/* ==========================================================================
   Pastel 2026-06-09 (Yanick) — Fakten-Slider: Text vs. Stickys + Light
   #18/#19: Beschreibungstext der Fakten-Slides lief rechts unter das
   eTrusted-Badge (linke Kante x≈1919) + Telefon-Pill (x≈1925). Content-Panel
   hatte padding-right:100px → Text-Kante bei ~1932 (13px im Sticky-Bereich).
   Desktop padding-right → 130px: Text endet ~1902, ~17px Luft vor dem Badge.
   Reserve = eTrusted+Telefon-Breite, NICHT der 184px rote CTA (User-Vorgabe:
   sonst zu viel Textbreite verloren). Mobile (32px 16px, s.o.) bleibt unberuehrt
   durch min-width:782px.
   #20: Beschreibung (.has-heading-text-color Home / .hitop-fact-slide__text
   Webshop) Schriftschnitt LIGHT (300). Inline-font-weight:400 → !important.
   ========================================================================== */
@media (min-width: 782px) {
	.hitop-slider-facts .hitop-fact-slide__content {
		padding-right: var(--hitop-sticky-clearance);
	}
	.hitop-slider-facts .hitop-fact-slide__content .has-heading-text-color,
	.hitop-slider-facts .hitop-fact-slide__text {
		font-weight: 300 !important;
	}
	/* page-id-7: Fakten in constrained Wrapper (nicht full-bleed → kein
	   Sticky-Overlap). Original-Padding behalten, keine Asymmetrie. */
	body.page-id-7 .hitop-slider-facts-wrapper .hitop-fact-slide__content {
		padding-right: 100px;
	}
}

/* ==========================================================================
   Pastel 2026-06-09 (Yanick) — Hero-Split-Card: Text vs. Stickys + Absatz
   #16: Hero-Headline + Absatz liefen rechts unter eTrusted-Badge (l≈1411) +
   Telefon-Pill (l≈1417). Card-Spalte hatte padding-right:60px (inline) → Text
   endete bei ~1464 (53px im Sticky-Bereich; Badge deckte „…ode[r]", Telefon
   schnitt den Absatz). Desktop padding-right → 130px (gleiche Reserve wie der
   Fakten-Slider): Text endet ~1394, ~17px Luft vor dem Badge. Roter CTA bleibt
   außen vor (User-Vorgabe). User-Entscheidung 2026-06-09: Headline darf dabei
   3→4 Zeilen umbrechen ("Einrücken, 4 Zeilen ok").
   #15: Hero-Absatz Schriftschnitt kleiner (2lg→md) + LIGHT (400→300).
   Mobile (eigenes Hero-Layout) unberuehrt durch min-width:782px.
   !important nötig, da Card-Padding + Absatz-font-weight inline gesetzt sind.
   ========================================================================== */
@media (min-width: 782px) {
	.hitop-hero-split-card .wp-block-column.has-background {
		padding-right: var(--hitop-sticky-clearance) !important;
	}
	.hitop-hero-split-card .wp-block-column.has-background p.has-heading-text-color {
		/* WP-Preset-Klasse .has-2lg-font-size setzt font-size !important → hier auch nötig */
		font-size: var(--wp--preset--font-size--md) !important;
		font-weight: 300 !important;
	}
	/* Pastel #44: Produkt-Hero (organism-hero-product) hat keinen CTA mehr → Text
	 * vertikal zentrieren statt oben-bündig (Card-Höhe 739 = Webshop-Hero). Nur der
	 * --vcenter-Modifier (Produkt /produkt/); Home-Hero (gleiche Basisklasse) bleibt. */
	.hitop-hero-split-card--vcenter .wp-block-column.has-background {
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
}

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

.wp-block-spacer {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

.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);
}

/* ============================================================
 * CARD-BASIS (SSOT) — gemeinsame Basis ALLER regulären Karten
 * mit Bild+Text(+CTA): card-2 (Blog/Wissen/Mehr-Lesen),
 * card-symptom (Symptom-Überblick + Merkmale OHNE CTA) und
 * blog-category (/blog/). Box-Look (Radius 30 + Shadow + overflow)
 * wird hier EINMAL definiert — vorher 3× über 2 Stylesheets
 * dupliziert (User 2026-06-09: „gleiche Basis, sauberes CSS").
 * Ergänzende geteilte SSOTs:
 *   • Bildhöhe 187px → Block „CONTENT-CARD BILD-VEREINHEITLICHUNG"
 *   • CTA-Bottom-Align → #26 (symptom) / #60 (card-2) / scss (blog-cat)
 *   • Titel lg/900 + Body-Pad 16/24/24 → pro Variante, werte-gleich
 * Hinweis: card-2 trägt Radius/Shadow/BG zusätzlich via Inline-Style
 * + has-*-Klassen (Editor-authored Instanzen, nicht CSS-entfernbar) —
 * redundant aber harmlos; die Basis garantiert Konsistenz.
 * blog-category bezieht den Box-Look NUR noch von hier (Box-Duplikate
 * aus blog-category/style.scss entfernt).
 * ============================================================ */
.hitop-card,
.hitop-card-2,
.hitop-blog-category-section__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;
}

.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);
}

.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);
}

.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);
}

.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);
}

.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;
}

.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;
	/* KEINE border auf img — Active-State wird via outline auf figure-Wrapper
	 * markiert (.hitop-thumb-img.is-active im plugin SCSS). Pin mp40bs2u
	 * 2026-05-13: "figma hat keine doppelte outline hierfür". */
}

.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);
}

.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);
}

.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;
}

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

.hitop-info-bar {
	background: var(--wp--preset--color--grey);
	/* Pastel #72 (Christian 08.06.): schmalerer grauer Rahmen — 17px -> 9px */
	padding: 9px 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;
}

/* Pastel #81 (Philipp Keck 30.06.): Auf der WooCommerce-Single-Product-Seite
   blaeht die WC-Kaskade den Disclaimer-Text auf (18.67px statt 12px). Hoehere
   Spezifitaet + !important pinnt ihn global auf 12px (verifiziert: Home 12px,
   /produkt/fuss-set-hitop-pnp/ 18.67px). */
.hitop-info-bar .hitop-info-bar__text {
	font-size: 12px !important;
}

.hitop-header .wp-block-woocommerce-customer-account,
.hitop-header__inner > .wp-block-woocommerce-customer-account {
	display: none !important;
}

/* 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;
}

.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;
}

/* 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) {
	/* Pastel #86 (Update 01.07., User "nur top"): Auf Desktop soll NUR der graue
	   Disclaimer oben kleben — die Navigation scrollt normal mit weg. Daher KEIN
	   sticky mehr; position:relative behaelt nur den Stacking-Context (z-index)
	   fuers Mega-Menue. Auf Mobil re-aktiviert der Headroom-Block (Z.~3414,
	   position:sticky !important) das Ein-/Ausfahren der Nav unveraendert. */
	position: relative;
	z-index: 100;
	background: var(--wp--preset--color--white);
}

/* Pastel #86 (Philipp Keck 30.06.): Der graue Disclaimer liegt in einem EIGENEN
   <header>-Template-Part (nur .hitop-info-bar, kein .hitop-header) und war daher
   NIE sticky — er scrollte auf Desktop weg. Jetzt sticky top:0, gestapelt UEBER
   dem Nav-Header. Sticky sitzt auf dem Template-Part-WRAPPER (nicht dem inneren
   .hitop-info-bar), sonst Short-Parent-Bug. Auf <=1024px greift der bestehende
   relative-Override (Mobile-Overlay) → dort unveraendert wie bisher. */
header.wp-block-template-part:has(.hitop-info-bar) {
	position: sticky;
	top: 0;
	z-index: 101;
	background: var(--wp--preset--color--grey);
}

.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);
}

.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;
}

.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: 0;            /* gap raus — Hover-Target via padding statt margin */
	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 10/14: vorher 10/0 — Hover-Target jetzt 28px breiter
	   pro Item, sodass Cursor nicht "zwischen die Stuehle" faellt.
	   Visueller Item-zu-Item-Abstand bleibt ~28px (14+14) wie vorher. */
	padding: 10px 14px;
	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);
}

/* ---------- 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: 20px 30px !important; /* Figma 1207:942: panel padding 20/30, NICHT 40/60 */
	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.
 * Pin mp495b6r 2026-05-13: align-items stretch fuer gleichhohe Spalten.
 * Pin mpb0qo41 v2 (2026-05-18, Figma 1207:943): KEINE position:relative hier —
 * Submenu MUSS position:absolute bleiben (WP-Default), sonst kollabiert die
 * ganze Top-Nav (Submenu nimmt vertikal Platz im Document-Flow). Stattdessen
 * nutzen wir das ::after-Pseudo das absolute zum bereits positionierten Submenu
 * positioniert wird (Submenu ist nearest positioned ancestor des Pseudos). */
.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: stretch;
}

/* Horizontale Linie (Figma 1207:942): EINE Linie unter der Eyebrow-Row,
 * spannt panel-volle Breite minus padding-inline (30px). Position bei Y=45px
 * = panel-padding-top (20) + heading-text-height (21) + 4px gap-to-line.
 * Inset matches new panel padding-inline 30px. */
.hitop-nav.wp-block-navigation .wp-block-navigation__submenu-container.hitop-megamenu-columnized::after {
	content: '';
	position: absolute;
	top: 45px;
	left: 30px;
	right: 30px;
	height: 1px;
	background: var(--wp--preset--color--grey, #D9D9D9);
	pointer-events: none;
}

.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: Pin mpb0qo41 v2 (2026-05-18, Figma 1207:943) —
 * KEIN vertikaler Strich mehr, User-Vorgabe explizit. Spalten nur via gap getrennt. */
.hitop-megamenu-col + .hitop-megamenu-col {
	border-left: 0;
	padding-left: 0;
	margin-left: 0;
}

/* Inner UL in jeder Column. Figma 1207:942: 20px gap zwischen Item-Reihen
 * (Item-Text 22px + gap 20 = 42px row-height). */
.hitop-megamenu-col__list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 20px;
}

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

/* Pastel #12 (Justus, /onlinevortrag-polyneuropathie/): Bug = Klick auf einen
   Top-Level-Punkt (`<a href="#">`) gibt dem Link den FOKUS → `:focus-within`
   hielt das Submenu offen, auch wenn die Maus weg war ("Menue bleibt fixiert").
   Fix: statt `:focus-within` jetzt `:has(:focus-visible)` — ein Maus-Klick
   erzeugt KEIN :focus-visible (nur Tastatur-Fokus tut das). So klebt das Menue
   nach Maus-Klick nicht mehr, bleibt aber per Tastatur (Tab) voll bedienbar.
   Hover oeffnet unveraendert. */
.hitop-nav.wp-block-navigation .wp-block-navigation-submenu:hover > .wp-block-navigation__submenu-container,
.hitop-nav.wp-block-navigation .wp-block-navigation-submenu:has(:focus-visible) > .wp-block-navigation__submenu-container {
	opacity: 1 !important;
	visibility: visible !important;
	pointer-events: auto !important;
	/* Open: kein Delay, damit das Menu responsiv aufklappt */
	transition: opacity 0.18s, visibility 0.18s;
}

/* Belt-and-suspenders: falls ein Pfad doch aria-expanded="true" setzt (Klick-
   Toggle), die Klick-Sticky-Sichtbarkeit auf Desktop ebenfalls neutralisieren.
   NUR Desktop — das Mobile-Menue nutzt aria-expanded bewusst als Akkordeon. */
@media (min-width: 782px) {
	.hitop-nav.wp-block-navigation .has-child [aria-expanded="true"] ~ .wp-block-navigation__submenu-container,
	.hitop-nav.wp-block-navigation .wp-block-navigation-submenu[aria-expanded="true"] > .wp-block-navigation__submenu-container {
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
	}
}

.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-family: "Inter", sans-serif;
	font-size: 18px;
	font-weight: 300;
	line-height: 22px;  /* Figma 1207:942: item-text 22px (war 23.4) */
	letter-spacing: 0;
	padding: 0;  /* Figma: kein per-Item Padding — Gap kommt aus .col__list { gap: 20 } */
	border: 0;
	white-space: normal;
	transition: font-weight .15s ease, color .15s ease;
}

.hitop-nav.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
.hitop-nav.wp-block-navigation .wp-block-navigation__submenu-container .current-menu-item > .wp-block-navigation-item__content {
	font-weight: 500;
	color: var(--wp--preset--color--brand-primary);
}

/* Category headings inside mega-menu (Figma 3149:1991 — 14px / 900 / grey / UPPER).
   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: 14px !important;
	font-weight: 900 !important;
	line-height: 21px !important;
	letter-spacing: 0.05em !important;
	text-transform: uppercase !important;
	pointer-events: none !important;
	cursor: default !important;
	/* Pin mpb0qo41 v3 (2026-05-18, Figma 1207:942): KEIN padding/margin auf Heading.
	 * Gap zur ersten Reihe kommt aus .col__list { gap: 20px } → heading-bottom Y=41,
	 * gap 20 → first-item Y=61. Line@45 → Line-zu-Item = 16. Aber Figma will 20.
	 * Loesung: heading margin-bottom 4px → first-item Y=65 → Line-zu-Item 20. ✓ */
	padding: 0 !important;
	margin-bottom: 4px !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;
	font-weight: 900 !important;
}

/* "more" link style — Figma: weight 500, brand-primary, top-border */
.hitop-nav.wp-block-navigation .wp-block-navigation-item.hitop-megamenu-more > .wp-block-navigation-item__content {
	font-size: 16px !important;
	font-weight: 500 !important;
	color: var(--wp--preset--color--brand-primary) !important;
	padding: 14px 0 0 0 !important;
	margin-top: 6px;
	border-top: 1px solid var(--wp--preset--color--grey);
}

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

.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;
	/* 2026-05-28 QW13 (Anpassungen-XLSX): "Buttonhöhe etwas vergrößern".
	 * Vorher kam padding aus block-supports (~10/30). Explizit 16/32 macht
	 * den Button merkbar höher + spürbarer als CTA. */
	padding: 16px 32px !important;
}

.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);
	}
}

.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);
}

.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;
}

.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;
	}
}

@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;
	}

	.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;
	}

	.hitop-footer__col--legal {
		grid-column: 2;
		grid-row: 2 / span 2;
	}

	.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;
	}
}

.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;
}

.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);
}

@media (max-width: 1024px) {

	.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;
	}

	.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;
	}

	.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;
	}

	/* Section A's Header-Actions/Search/CTA Rules (Z.1525-1534) ENTFERNT 2026-05-19
	   — Section B Z.5031-5070 setzt sie ohnehin spaeter mit Override-Wert (search:
	   inline-flex, cta: none). Sauberer wenn nur 1 Ort. */

	/* Section A's Mobile Mega-Menu Overlay Rules (Z.1536-1635) ENTFERNT 2026-05-19.
	   Diese setzten 18px Bold/16px 0-Padding/24px-padding-overlay etc. — alles
	   in Section F Z.9505+ ueberschrieben (26px Light Top-Level / 20px Light Submenu
	   / 0-Padding Overlay / dynamische max-height Akkordeon).
	   Behalten wir aber 2 wichtige strukturelle Regeln, die F NICHT explizit setzt:
	   - Submenu-Container `position: static` (sonst greift Desktop position:absolute)
	   - Submenu-Container `width: 100%` (sonst rendert Submenu Desktop-mega-width)
	   - hitop-megamenu-col padding-left/border-left:0 (sonst Desktop-Trennlinie)
	   Section F setzt diese teilweise auch via z.B. Z.9744 submenu-BG, aber die
	   strukturellen position/width/transform sind hier. */
	.hitop-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
		display: flex !important;
		flex-direction: column !important;
		gap: 0 !important;
		align-items: stretch !important;
		text-align: left !important;
	}

	.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;
		border-bottom: 1px solid var(--wp--preset--color--grey);
	}

	/* Submenu inline (kein Desktop-Absolute-Overlay) — strukturelle Basis.
	   FIX 2026-05-19: flex-direction:column kritisch — sonst rendern Megamenu-Cols
	   side-by-side (war in Section C+E, die nun konsolidiert sind). */
	.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;
		visibility: visible !important;
		pointer-events: auto !important;
		box-shadow: none !important;
		border-radius: 0 !important;
		column-count: 1 !important;
		display: flex !important;
		flex-direction: column !important;
	}

	/* Akkordeon: Default collapsed (max-height: 0, overflow:hidden), expanded
	   via .is-expanded ueberschreibt in Section F Z.9737 mit calc((100vh-header)*0.55).
	   FIX 2026-05-19: kritische Rule die war in Section C, ist im Konsolidierungs-
	   Refactor verloren gegangen — ohne diese Rule ist Submenu IMMER sichtbar. */
	.hitop-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu > .wp-block-navigation__submenu-container {
		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;
	}
	.hitop-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu.is-expanded > .wp-block-navigation__submenu-container {
		opacity: 1;
		padding-top: 8px !important;
		padding-bottom: 16px !important;
	}

	/* Megamenu-Heading auf Mobile weg (kein "DIE HAEUFIGSTEN SYMPTOME" Header). */
	.hitop-nav .wp-block-navigation__responsive-container.is-menu-open .hitop-megamenu-heading {
		display: none !important;
	}
	/* 2026-06-10 Pastel #74 (Figma 1755:507 "Menu - Dropdown Produkt -mobile"):
	 * Das ZUBEHÖR-Gruppenlabel bleibt mobil SICHTBAR — ohne das Label haengt
	 * "→ zur Übersicht" kontextlos unter HiToP® PNP. Typo-Stil (14/900/grau/
	 * UPPER, keine Trennlinie) kommt aus den globalen Heading-Regeln. */
	.hitop-nav .wp-block-navigation__responsive-container.is-menu-open .hitop-megamenu-heading--zubehoer {
		display: block !important;
		padding-top: 12px !important;
	}

	/* Megamenu-Cols: kein Desktop-Trennlinie-Padding, gestackt untereinander. */
	.hitop-nav .wp-block-navigation__responsive-container.is-menu-open .hitop-megamenu-col {
		padding: 0 !important;
	}
	.hitop-nav .wp-block-navigation__responsive-container.is-menu-open .hitop-megamenu-col + .hitop-megamenu-col {
		padding-left: 0 !important;
		border-left: 0 !important;
		margin-top: 8px;
	}
}

@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;
	}

	.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.
	 * Pastel #46 (Yanick): hero-couple.webp ist ein 2101x762-Panorama; das Paar
	 * sitzt im linken ~15-47% der Breite, rechts nur See/Wiese. Der near-square
	 * Mobile-Crop (378x380, ~36% Breite sichtbar) mit horizontal=center (50%)
	 * landete in der leeren Wiese rechts → Mann abgeschnitten, nur die Frau zu
	 * sehen. object-position-X auf 20% → Crop-Fenster sitzt auf dem Paar (beide
	 * Personen zentriert). Y bleibt 25% (irrelevant: keine vertikale Ueberlauf). */
	.hitop-hero-split-card .wp-block-cover__image-background,
	.hitop-hero-split-card img[data-object-fit="cover"] {
		object-position: 20% 25% !important;
		min-height: 380px !important;
		height: 380px !important;
	}

	.wp-block-cover.alignfull .wp-block-column.has-background {
		padding: 24px 16px !important;
	}

	.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;
	}

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

	.hitop-trust-badge {
		width: calc(50% - var(--wp--preset--spacing--md));
	}

	.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;
	}

	.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);
	}

	.hitop-stat {
		font-size: clamp(2.5rem, 12vw, 4rem);
	}

	.hitop-hero__headline {
		font-size: clamp(1.75rem, 6vw, 2.5rem);
	}

	.wp-block-cover.alignfull[style*="min-height:500px"] {
		min-height: 400px !important;
	}

	.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;
	}

	.hitop-price {
		font-size: clamp(1.75rem, 8vw, 2.5rem);
	}

	.hitop-usp-row {
		gap: var(--wp--preset--spacing--md);
	}

	.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 */
	}

	.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;
	}

	/* Figma 1104:1677: 4 Cards a 300x150 vertikal, gap 25px,
	 * Logo zentriert in jeder Karte. */
	.hitop-trust-row__items {
		flex-direction: column !important;
		align-items: center;
		gap: 25px !important;
	}

	.hitop-trust-row__item {
		flex: 0 0 150px !important; /* basis = main-axis = HEIGHT on column flex */
		width: 300px !important;
		max-width: 100%;
		height: 150px !important;
		margin: 0 !important;
		display: flex !important;
		align-items: center;
		justify-content: center;
	}

	.hitop-trust-row__item img {
		max-width: 100%;
		max-height: 100%;
		width: auto;
		height: auto;
		object-fit: contain;
		display: block;
	}

	.hitop-trust-row__item--badges {
		flex-direction: row !important;
		flex-wrap: wrap !important;          /* 2026-06-01: 2. Reihe statt Overflow */
		justify-content: center !important;
		gap: 12px !important;
		width: 100% !important;              /* war 300px fix → vorhandene Breite nutzen */
		max-width: 300px !important;
		height: auto !important;             /* war 150px fix */
	}

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

	.hitop-trust-row__badge img {
		max-height: 70px !important;
		width: auto !important;
		max-width: 100% !important;          /* KRITISCH: ersetzt max-width:none (Overflow-Ursache) */
	}
}

/* ------------------------------------------------------------------
 * 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;
	/* 4 x 300 = 1200px Inhalt. Bei Viewports < ~1265 (Container < 1200) muss
	 * gewrapped werden, sonst horizontaler Page-Overflow. 2026-05-16. */
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 24px 40px;
	min-height: 150px;
}

/* Desktop ab 1280: 4 Slots nebeneinander mit space-between wie Figma 1410-Frame */
@media (min-width: 1280px) {
	.hitop-trust-row__items {
		flex-wrap: nowrap;
		justify-content: space-between;
		gap: 0 !important;
	}
}

.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; }

.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;
}

.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);
}

.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;
}

.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;
}

.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);
}

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

.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;
	}
}

.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);
}

.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);
}

.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;
}

@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)
   ========================================================================== */

.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);
}

.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;
}

.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);
}

.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;
}

.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;
}

.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);
}

.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;
}

.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;
}

.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);
}

.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);
}

.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;
}

@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;
	}
}

.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;
}

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;
}

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);
}

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);
}

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;
}

@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%;
	}
}

body.single-product .quantity .qty {
	width: 4.631em; text-align: center; padding: 1rem; height: 56px;
}

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; }

.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); }

.hitop-single-product__cross-sells-heading { margin-bottom: 1.5rem; }

@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;
}

/* Referenten-Karten-Spalten horizontal zentrieren (Annotation mpy3cpfl-q3ewg0).
   Bei 2 Karten (je 335px) in voller Constrained-Breite (1328px) klebten sie
   sonst links (Columns-Flex default justify-content:flex-start). Greift ueber
   :has() auf jede Columns-Reihe mit Referenten-Karten (Onlinevortrag-Seiten).
   Nur Desktop — mobil stacken die Columns ohnehin (flex-direction:column). */
@media (min-width: 782px) {
	.wp-block-columns:has( .hitop-referent-card ) {
		justify-content: center;
	}
}

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

/* 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);
}

/* Icon-Slot der CTA — vorerst leer (Icon klaert der Kunde noch).
 * :empty hat hoehere Spezifitaet (0,2,0) als die Basisregel (0,1,0) →
 * solange kein Icon drin ist, kein Layout-Effekt (Desktop bleibt reiner Text). */
.hitop-sticky-cta__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	flex-shrink: 0;
}

.hitop-sticky-cta__icon:empty {
	display: none;
}

@media (max-width: 781px) {
	.hitop-sticky-buttons {
		bottom: 1rem;

	}

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

	/* Annotation #8: Sticky-CTA mobil eingeklappt (Icon-Slot, KEIN Text) und
	 * 1x beim Laden ausfahren (Teaser) — Pendant zum Phone-Button, aber Touch
	 * hat kein echtes :hover, daher Reveal per einmaliger Lade-Animation.
	 * Nach der Animation bleibt der eingeklappte Pill (Icon folgt vom Kunden). */
	.hitop-sticky-cta {
		min-width: 0;
		width: 50px;
		height: 50px;
		padding: 0;
		gap: 0.5rem;
		font-size: 0.875rem;
		border-radius: 25px 0 0 25px;
		overflow: hidden;
		/* fill-mode none (statt both): der Lade-Peek haelt die width NICHT dauerhaft
		   unter Animations-Kontrolle — sonst koennte die Scroll/Tap-Transition nie
		   greifen (Animationen schlagen Transitions). 0%==100%-Keyframe = 50px =>
		   optisch identisch zu both, gibt width nach dem Peek aber frei. */
		animation: hitop-cta-peek 4s ease 0.6s 1 none;
		/* Smooth ausfahren beim Hochscrollen / Tap (analog Phone-Button 0.35s).
		   feste Breiten 50px<->178px sind transitionierbar (width:auto waere es nicht). */
		transition: width 0.35s ease, padding 0.35s ease, background 0.2s ease;
	}

	.hitop-sticky-cta__label {
		max-width: 0;
		opacity: 0;
		overflow: hidden;
		white-space: nowrap;
		animation: hitop-cta-label-peek 4s ease 0.6s 1 none;
		transition: max-width 0.35s ease, opacity 0.25s ease;
	}

	@keyframes hitop-cta-peek {
		0%   { width: 50px; padding: 0; }
		12%  { width: 178px; padding: 0 20px; }
		68%  { width: 178px; padding: 0 20px; }
		100% { width: 50px; padding: 0; }
	}

	@keyframes hitop-cta-label-peek {
		0%   { max-width: 0; opacity: 0; }
		12%  { max-width: 150px; opacity: 1; }
		68%  { max-width: 150px; opacity: 1; }
		100% { max-width: 0; opacity: 0; }
	}
}

/* Reduced-Motion: keine Lade-Animation — stattdessen voll ausgeschriebener
 * Pill (immer beschriftet), damit die CTA fuer bewegungssensible Nutzer
 * nutzbar bleibt (kein leerer Icon-Pill ohne Reveal). */
@media (max-width: 781px) and (prefers-reduced-motion: reduce) {
	.hitop-sticky-cta {
		width: auto;
		min-width: 0;
		padding: 0 20px;
		animation: none;
	}

	.hitop-sticky-cta__label {
		max-width: none;
		opacity: 1;
		animation: none;
	}
}

/* ==========================================================================
   Mobile-only: Headroom-Header + Tap-to-arm Sticky-Buttons
   JS-Controller (theme.js) setzt html.hitop-head-hidden + .is-armed.
   Desktop bleibt unberuehrt (Hover-Expand + dauer-sichtbarer Sticky-Header).
   ========================================================================== */
@media (max-width: 781px) {
	/* 1) Headroom: Header faehrt beim Runterscrollen aus dem Viewport,
	   beim Hochscrollen zurueck. Nur der Haupt-Header (mit .hitop-header),
	   nicht die Info-Bar (die scrollt ohnehin oben weg).
	   WICHTIG: Der Mobile-Overlay-Fix (@media 1024px, Z.~10690) setzt den
	   Wrapper auf position:relative !important — dadurch scrollte der Header
	   auf Phones komplett weg (Hamburger beim Lesen unerreichbar). Headroom
	   braucht einen Anker: hier sticky re-aktivieren. Sticky ist ebenfalls
	   non-static → der z-index-100001-Fix fuers Menue-Overlay greift weiter.
	   Selektor-Spezifitaet (0,3,2) schlaegt den 1024px-Override (0,2,2). */
	body > .wp-site-blocks > header.wp-block-template-part:has( .hitop-header ) {
		position: sticky !important;
		/* Pflichthinweis-Fix (User 03.07.): Info-Bar ist mobil jetzt ebenfalls sticky
		   (Z.~10800) — Nav dockt DARUNTER an. --hitop-info-bar-h misst theme.js live
		   (0 wenn Info-Bar versteckt, z.B. Menu-Overlay offen -> Nav rueckt auf 0).
		   Fallback 0 (nicht 55/71): theme.js laedt via Delay-JS erst bei Interaktion —
		   ein fixer Fallback wuerde die Nav beim initialen Paint unter die Info-Bar-
		   Unterkante druecken (sticky-top schiebt auch im Ruhezustand). Mit 0 sitzt
		   sie natuerlich; beim ersten Scroll (=Interaktion) setzt JS den Messwert. */
		top: var( --hitop-info-bar-h, 0px );
	}

	header.wp-block-template-part:has( .hitop-header ) {
		transition: transform 0.3s ease, box-shadow 0.2s ease;
		will-change: transform;
	}

	html.hitop-head-hidden header.wp-block-template-part:has( .hitop-header ) {
		transform: translateY( -100% );
	}

	/* 2)+3) Phone "armed" (erster Tap / kein :hover auf Touch) — ausgefahren,
	   spiegelt die Desktop-Hover-Optik. */
	.hitop-sticky-phone.is-armed {
		width: 277px;
		background: var(--wp--preset--color--brand-primary);
		box-shadow: 0 4px 4px rgba( 0, 0, 0, 0.25 );
	}

	.hitop-sticky-phone.is-armed .hitop-sticky-phone__number {
		opacity: 1;
		max-width: 200px;
	}

	.hitop-sticky-phone.is-armed .hitop-sticky-phone__icon {
		stroke: var(--wp--preset--color--white);
	}

	/* Roter CTA "armed" (erster Tap ODER Hochscrollen) — ausgefahren mit Label.
	   animation:none bricht den einmaligen Lade-Peek ab, sobald Scroll/Tap die
	   Steuerung uebernimmt. */
	.hitop-sticky-cta.is-armed {
		width: 178px; /* feste Breite => width-Transition greift (50->178) */
		padding: 0 20px;
		animation: none;
	}

	.hitop-sticky-cta.is-armed .hitop-sticky-cta__label {
		max-width: 150px;
		opacity: 1;
		animation: none;
	}
}

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

.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; }

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; }
}

.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; }

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 Layout: 2-Spalter (Items links, Totals rechts) ---
 * 2026-05-16: Cart-Tabelle ist jetzt Card-Stack (display:block via Regel
 * unten), kann beliebig schmal werden -> 2-col Grid wieder moeglich.
 * minmax(0, 1fr) = Track darf unter min-content schrumpfen.
 * Ab <=900px stackt zu 1 Spalte. */
body.woocommerce-cart .woocommerce {
	display: grid !important;
	grid-template-columns: minmax(0, 1fr) 380px;
	gap: 40px;
	align-items: start;
}
/* Notices spannen ueber beide Spalten, sonst nimmt der leere Wrapper Cell (1,1)
 * weg und das Form rutscht in Spalte 2 statt 1. */
body.woocommerce-cart .woocommerce > .woocommerce-notices-wrapper {
	grid-column: 1 / -1;
}
body.woocommerce-cart form.woocommerce-cart-form {
	grid-column: 1;
	width: 100% !important;
	max-width: 100%;
	min-width: 0;
}
body.woocommerce-cart .cart-collaterals {
	grid-column: 2;
	width: 100% !important;
	max-width: 100%;
	float: none !important;
	margin-top: 0;
	position: sticky;
	top: 100px;
}
body.woocommerce-cart .cart-collaterals .cart_totals {
	width: 100% !important;
	max-width: 100%;
	float: none !important;
	position: static !important;
}
@media (max-width: 900px) {
	body.woocommerce-cart .woocommerce {
		grid-template-columns: 1fr;
		gap: 24px;
	}
	body.woocommerce-cart form.woocommerce-cart-form,
	body.woocommerce-cart .cart-collaterals {
		grid-column: 1;
	}
	body.woocommerce-cart .cart-collaterals {
		position: static;
	}
}

/* --- Cart-Rows als Card-Stack (ALLE Viewports) ---
 * Die Tabellen-Optik schiess sogar bei breiten Viewports schief (Remove +
 * Thumbnail-Cells ohne Header, viel leerer Raum zwischen Spalten). Daher
 * komplett aufgeloeste Tabelle: jede Cart-Row ist ein Grid-Card. */
body.woocommerce-cart table.shop_table.cart {
	display: block !important;
	background: var(--wp--preset--color--light-grey, #F5F5F5) !important;
	border-radius: 10px !important;
	border: 0 !important;
	padding: 8px !important;
}
body.woocommerce-cart table.shop_table.cart thead {
	display: none !important;
}
body.woocommerce-cart table.shop_table.cart tbody,
body.woocommerce-cart table.shop_table.cart tfoot {
	display: block !important;
}
body.woocommerce-cart table.shop_table.cart tr.cart_item {
	display: grid !important;
	grid-template-columns: 40px 120px 1fr auto;
	grid-template-areas:
		"remove thumb name      subtotal"
		"remove thumb price-row price-row";
	column-gap: 20px;
	row-gap: 8px;
	align-items: center;
	padding: 16px !important;
	border: 0 !important;
	border-radius: 8px !important;
	margin-bottom: 8px !important;
	background: var(--wp--preset--color--white, #fff) !important;
}
body.woocommerce-cart table.shop_table.cart tr.cart_item:last-of-type {
	margin-bottom: 0 !important;
}
body.woocommerce-cart table.shop_table.cart tr.cart_item td {
	display: block !important;
	border: none !important;
	padding: 0 !important;
	background: transparent !important;
	text-align: left !important;
}
body.woocommerce-cart table.shop_table.cart tr.cart_item td.product-remove {
	grid-area: remove;
	align-self: center;
}
body.woocommerce-cart table.shop_table.cart tr.cart_item td.product-thumbnail {
	grid-area: thumb;
	max-width: 120px;
}
body.woocommerce-cart table.shop_table.cart tr.cart_item td.product-thumbnail img {
	max-width: 100%;
	height: auto;
	display: block;
}
body.woocommerce-cart table.shop_table.cart tr.cart_item td.product-name {
	grid-area: name;
}
body.woocommerce-cart table.shop_table.cart tr.cart_item td.product-subtotal {
	grid-area: subtotal;
	text-align: right !important;
	font-weight: 700;
	white-space: nowrap;
}
body.woocommerce-cart table.shop_table.cart tr.cart_item td.product-subtotal::before {
	content: none !important;
}
body.woocommerce-cart table.shop_table.cart tr.cart_item td.product-price {
	grid-area: price-row;
	align-self: start;
	display: inline-flex !important;
	align-items: center;
	gap: 6px;
	color: var(--wp--preset--color--light-anthrazit, #959595);
}
body.woocommerce-cart table.shop_table.cart tr.cart_item td.product-quantity {
	grid-area: price-row;
	align-self: start;
	justify-self: end;
	display: inline-flex !important;
	align-items: center;
	gap: 6px;
}
body.woocommerce-cart table.shop_table.cart tr.cart_item td.product-price::before {
	content: "Einzelpreis:";
	font-weight: 400;
	font-size: 13px;
	color: var(--wp--preset--color--light-anthrazit, #959595);
}
body.woocommerce-cart table.shop_table.cart tr.cart_item td.product-quantity::before {
	content: "Menge:";
	font-weight: 400;
	font-size: 13px;
	color: var(--wp--preset--color--light-anthrazit, #959595);
}
body.woocommerce-cart table.shop_table.cart tr.cart_actions {
	display: block !important;
	padding: 16px 0 !important;
	border-top: 1px solid var(--wp--preset--color--grey, #D9D9D9) !important;
}
body.woocommerce-cart table.shop_table.cart tr.cart_actions td {
	display: block !important;
	padding: 0 !important;
	border: none !important;
}

@media (max-width: 700px) {
	body.woocommerce-cart table.shop_table.cart tr.cart_item {
		grid-template-columns: 40px 1fr auto;
		grid-template-areas:
			"remove name     subtotal"
			"remove thumb    thumb"
			"remove price    price"
			"remove quantity quantity";
	}
	body.woocommerce-cart table.shop_table.cart tr.cart_item td.product-thumbnail {
		max-width: 120px;
		margin-block: 4px;
	}
	body.woocommerce-cart table.shop_table.cart tr.cart_item td.product-price {
		grid-area: price;
		justify-self: start;
	}
	body.woocommerce-cart table.shop_table.cart tr.cart_item td.product-quantity {
		grid-area: quantity;
		justify-self: start;
	}
}

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; }

.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; }

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; }

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;
}

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

.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) ---
 * 2026-05-17: 2 weisse Karten in der grauen Wanne (#order-verify) —
 * Rechnungsdetails 50% links, Lieferadresse+Zahlungsart gestackt 50% rechts.
 *
 * Layout-Mechanik: display:contents flattent col-1/col-2 Children in die
 * outer grid. Pseudo-Elemente ::before (Card 1) und ::after (Card 2)
 * werden als Grid-Items mit gleicher Position wie die Content-Sektion
 * platziert und liefern den weissen Card-Background+Border. Content sitzt
 * via z-index DARUEBER. */
.woocommerce-gzdp-checkout-verify-data .col2-set {
	display: grid !important;
	grid-template-columns: 1fr 1fr !important;
	column-gap: 24px !important;
	row-gap: 0 !important;
	align-items: start !important;
	grid-auto-flow: dense !important;
}

/* Card-Backgrounds: ::before = Card links (col 1, rows 1-3),
 * ::after = Card rechts (col 2, rows 1-6 inkl. Zahlung). */
.woocommerce-gzdp-checkout-verify-data .col2-set::before,
.woocommerce-gzdp-checkout-verify-data .col2-set::after {
	content: '';
	background: var(--wp--preset--color--white, #fff) !important;
	border: 1px solid var(--wp--preset--color--grey, #D9D9D9) !important;
	border-radius: 8px !important;
	box-shadow: 0 1px 3px rgba(0,0,0,0.04) !important;
	z-index: 0 !important;
	align-self: stretch !important;
	justify-self: stretch !important;
	min-height: 100% !important;
}
.woocommerce-gzdp-checkout-verify-data .col2-set::before {
	grid-column: 1 !important;
	grid-row: 1 / span 3 !important;
}
.woocommerce-gzdp-checkout-verify-data .col2-set::after {
	grid-column: 2 !important;
	grid-row: 1 / span 6 !important;
}

.woocommerce-gzdp-checkout-verify-data .col-1,
.woocommerce-gzdp-checkout-verify-data .col-2 {
	display: contents !important;
}

/* Content z-index ueber Card-Backgrounds + Padding fuer Innenabstand. */
.woocommerce-gzdp-checkout-verify-data .col-1 > *,
.woocommerce-gzdp-checkout-verify-data .col-2 > * {
	position: relative !important;
	z-index: 1 !important;
	padding-left: 24px !important;
	padding-right: 24px !important;
}

/* Rechnungsdetails (col-1's erste 3 Children) -> Spalte 1, Rows 1-3.
 * col-1 enthaelt 3 <p>: nth(1)=Rechnungs-bearbeiten,
 * nth(2)=p.wc-gzdp-payment-gateway, nth(3)=Zahlungs-bearbeiten. */
.woocommerce-gzdp-checkout-verify-data .col-1 > header.title:nth-of-type(1) { grid-column: 1 !important; grid-row: 1 !important; padding-top: 24px !important; }
.woocommerce-gzdp-checkout-verify-data .col-1 > address { grid-column: 1 !important; grid-row: 2 !important; }
.woocommerce-gzdp-checkout-verify-data .col-1 > p:nth-of-type(1) { grid-column: 1 !important; grid-row: 3 !important; padding-bottom: 24px !important; }

.woocommerce-gzdp-checkout-verify-data .col-2 > header.title { grid-column: 2 !important; grid-row: 1 !important; padding-top: 24px !important; }
.woocommerce-gzdp-checkout-verify-data .col-2 > address { grid-column: 2 !important; grid-row: 2 !important; }
.woocommerce-gzdp-checkout-verify-data .col-2 > p { grid-column: 2 !important; grid-row: 3 !important; padding-bottom: 16px !important; }

/* Zahlungsart -> Spalte 2, Rows 4-6 (unter Liefer in derselben Karte).
 * Trennlinie zwischen Liefer und Zahlung als border-top auf Zahlungsart-Header. */
.woocommerce-gzdp-checkout-verify-data .col-1 > header.title:nth-of-type(2) {
	grid-column: 2 !important; grid-row: 4 !important;
	padding-top: 20px !important;
	margin-top: 4px !important;
	border-top: 1px solid var(--wp--preset--color--grey, #D9D9D9) !important;
}
.woocommerce-gzdp-checkout-verify-data .col-1 > p.wc-gzdp-payment-gateway { grid-column: 2 !important; grid-row: 5 !important; }
.woocommerce-gzdp-checkout-verify-data .col-1 > p:nth-of-type(3) { grid-column: 2 !important; grid-row: 6 !important; padding-bottom: 24px !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; margin-bottom: 12px !important; }
.woocommerce-gzdp-checkout-verify-data address { font-style: normal !important; line-height: 1.6 !important; color: var(--wp--preset--color--heading-text) !important; margin-bottom: 8px !important; }
.woocommerce-gzdp-checkout-verify-data a.edit { color: var(--wp--preset--color--brand-primary) !important; text-decoration: underline !important; }

@media (max-width: 781px) {
	/* 2026-07-03 (User-Report "Checkout mobil kaputt"): Der bisherige Mobile-
	   Override (Grid auf 1 Spalte + Grid-Row-Reassign) war im minifizierten
	   theme.min.css WIRKUNGSLOS. esbuild (Minifier in deploy-theme.sh) sortiert
	   @media-Bloecke um -> der Mobile-Override `col2-set{grid-template-columns:1fr}`
	   und die Desktop-Basis `col2-set{grid-template-columns:1fr 1fr}` haben BEIDE
	   gleiche Spezifitaet (0,2,0) + !important; nach der Umsortierung stand die
	   Desktop-Regel zuletzt -> sie gewann den Gleichstand. Folge (verifiziert
	   @390px via getBoundingClientRect): Verify-Karten blieben 2-spaltig, Spalten
	   bliesen auf min-content auf (327+211px > 279px Container) -> "Lieferadresse"
	   ragte bis 611px und wurde rechts abgeschnitten.
	   Fix: (1) hoehere Spezifitaet via `body`-Prefix (0,2,1 > 0,2,0) erzwingt den
	   Mobile-Zustand unabhaengig von der esbuild-Reihenfolge; (2) wir verlassen das
	   fragile Pseudo-Element-Grid komplett -> col-1/col-2 werden echte Block-Karten,
	   die ::before/::after Card-Backgrounds entfallen. Kein Grid, kein Row-Zaehlen,
	   nichts was an der exakten Kind-Reihenfolge haengt. */
	body .woocommerce-gzdp-checkout-verify-data .col2-set,
	body .woocommerce-gzdp-checkout-verify-data .col2-set.addresses {
		display: block !important;
	}
	body .woocommerce-gzdp-checkout-verify-data .col2-set::before,
	body .woocommerce-gzdp-checkout-verify-data .col2-set::after {
		display: none !important;
	}
	body .woocommerce-gzdp-checkout-verify-data .col-1,
	body .woocommerce-gzdp-checkout-verify-data .col-2 {
		display: block !important;
		background: var(--wp--preset--color--white, #fff) !important;
		border: 1px solid var(--wp--preset--color--grey, #D9D9D9) !important;
		border-radius: 8px !important;
		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
		padding: 20px !important;
		margin-bottom: 16px !important;
	}
	/* Grid-Platzierung + horizontales Card-Padding der Kinder zuruecksetzen
	   (das Padding lag auf den Kindern, nicht auf col-1/col-2). Der border-top-
	   Trenner der Zahlungsart-Ueberschrift (Basis-Regel) bleibt erhalten und
	   separiert Zahlungsart visuell innerhalb der Rechnungsdetails-Karte. */
	body .woocommerce-gzdp-checkout-verify-data .col-1 > *,
	body .woocommerce-gzdp-checkout-verify-data .col-2 > * {
		grid-column: auto !important;
		grid-row: auto !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
	/* Lange E-Mail-Adressen umbrechen statt ueber den Kartenrand schieben. */
	body .woocommerce-gzdp-checkout-verify-data address {
		overflow-wrap: anywhere !important;
	}
	/* 2026-07-03: Zweiter Overflow im selben Bestaetigungs-Step — die
	   Bestell-Tabelle (.woocommerce-checkout-review-order-table in #order-verify,
	   NICHT im verify-data-Wrapper) lief mit table-layout:auto auf 476px in einem
	   334px-Container -> Summen (Zwischensumme/Gesamtsumme/MwSt) ragten bis 508px
	   und wurden rechts abgeschnitten (Kunde sah den Gesamtbetrag mobil nicht).
	   ERSTER FIX-VERSUCH (table-layout:fixed + word-break:break-word) war eine
	   REGRESSION (User-Screenshot: Produktname brach pro BUCHSTABE um):
	   (a) Germanized packt das 300er-Thumbnail MIT in td.product-name
	   (.wc-gzd-cart-item-thumbnail, es gibt KEINE .product-thumbnail-Zelle) —
	   das Bild frass die halbe Fixed-Spalte, der Resttext war ~1 Zeichen breit;
	   (b) word-break:break-word zerhackt lange deutsche Composita
	   ("ZWISCHENSUMME", "Versandkostenfrei") in Silbenbrocken. 279px Container
	   vertragen schlicht kein 2-Spalten-TABLE-Layout mit diesen Wortlaengen.
	   JETZT: klassisches Responsive-Muster — thead weg, jede Zeile als Flex
	   (Label links waechst, Wert rechts), Zell-Borders wandern auf die Zeile,
	   Thumbnail auf 48px. Alles einzeilig lesbar, kein Overflow (visuell
	   verifiziert @390px Stage + Kopie). */
	body .woocommerce #order-verify .woocommerce-checkout-review-order-table {
		display: block !important;
		width: 100% !important;
	}
	body .woocommerce #order-verify .woocommerce-checkout-review-order-table thead {
		display: none !important;
	}
	body .woocommerce #order-verify .woocommerce-checkout-review-order-table tbody,
	body .woocommerce #order-verify .woocommerce-checkout-review-order-table tfoot {
		display: block !important;
	}
	body .woocommerce #order-verify .woocommerce-checkout-review-order-table tr {
		display: flex !important;
		justify-content: space-between;
		align-items: flex-start;
		gap: 12px;
		padding: 12px 0;
		border-bottom: 1px solid var(--hitop-wc-border, #E5E5E5);
	}
	body .woocommerce #order-verify .woocommerce-checkout-review-order-table tr:last-child {
		border-bottom: none;
	}
	body .woocommerce #order-verify .woocommerce-checkout-review-order-table th,
	body .woocommerce #order-verify .woocommerce-checkout-review-order-table td {
		display: block !important;
		border: none !important;
		padding: 0 !important;
		width: auto !important;
		word-break: normal !important;
		overflow-wrap: break-word !important;
	}
	body .woocommerce #order-verify .woocommerce-checkout-review-order-table td.product-name,
	body .woocommerce #order-verify .woocommerce-checkout-review-order-table tfoot th {
		flex: 1 1 auto;
		min-width: 0;
		text-align: left;
	}
	body .woocommerce #order-verify .woocommerce-checkout-review-order-table td.product-total,
	body .woocommerce #order-verify .woocommerce-checkout-review-order-table tfoot td {
		flex: 0 1 auto;
		text-align: right;
	}
	body .woocommerce #order-verify .woocommerce-checkout-review-order-table .wc-gzd-cart-item-thumbnail img {
		max-width: 48px !important;
		height: auto !important;
	}
}

/* Order-Review-Table: weisse Card-Optik (wie Cart-Item im Warenkorb),
 * statt heller-grauer Balken-Look (#F8F8F8) in der grauen Wanne. */
.woocommerce-checkout-review-order-table {
	background: var(--wp--preset--color--white, #fff) !important;
	border-radius: 8px !important;
	border: 0 !important;
	padding: 16px !important;
	margin-top: 16px !important;
}

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;
}

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;
}

/* 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-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;
}

.step-nav.nav-wizard::before,
.woocommerce-multistep-checkout ul.nav-wizard::before {
    content: '' !important;
    position: absolute !important;
    /* Figma 212:1947: Verbindungslinie liegt auf der Icon-Mitte. Icon-Mitte
       liegt bei y=0 rel. zur nav (a hat margin-top:-20px, Icon 40px). */
    top: -1px !important;
    left: 16.6% !important;
    right: 16.6% !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-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;
}

.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;
}

.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;
}

@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.
   2026-05-18: Padding auf SSOT 22/25 + radius 100 (Master-Pill-Spec). */
.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: 22px 25px !important; border-radius: 100px !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: 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.
	   2026-05-11: Spezifitaet auf 0,4,1 erhoeht.
	   2026-05-18: Auf SSOT-Pill 22/25 + radius 100 umgestellt. */
	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: 100px !important;
		padding: 22px 25px !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; }

@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)
   ============================================================ */

.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;
}

.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: outline kommt von .hitop-thumb-img.is-active (plugin SCSS),
 * KEINE img-border (würde mit figure-outline doppelt sein). Pin mp40bs2u. */

.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;
}

@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.
   ========================================================================= */

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) !important;
	font-weight: 300 !important;
	line-height: 1.2;
	letter-spacing: -0.03em;
	color: var(--wp--preset--color--dark-anthrazit) !important;
	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;
}

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;
}

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);
}

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);
}

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;
}

@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;
	}
}

.hitop-video-card {
	overflow: hidden;
}
/* DSGVO-Hinweis der Zwei-Klick-Loesung: dezent, aber vor dem Klick lesbar.
   Spezifitaet 0,3,0: schlaegt Kontext-Regeln wie `.hitop-text-bild-cta--variant-1 p`
   (0,1,1) und `.hitop-faq__panel-inner .hitop-video-card p`-artige (0,2,1). */
.hitop-card.hitop-video-card .hitop-video-card__privacy {
	/* !important noetig: variant-1 setzt `p { font-size/margin ... !important }`. */
	margin: 8px 0 0 !important;
	font-size: 0.75rem !important;
	font-weight: 300 !important;
	line-height: 1.4 !important;
	color: var(--wp--preset--color--light-anthrazit, #959595);
}
.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;
	/* Fix 2026-05-12 (mp2mup8u): bei langen Strings wie "Persönliche Therapieerfahrung"
	 * wrapt das Badge auf 2 Zeilen wenn die Card schmal ist. Pill-Konvention: 1 Zeile,
	 * Ellipsis falls Card zu schmal — Designer kann dann Text kürzen. */
	white-space: nowrap;
	max-width: calc(100% - 24px);
	overflow: hidden;
	text-overflow: ellipsis;
}
.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;
}

.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;
}

.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;
}

.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 20x20 (Figma 1099:826 / 1104:1980), Touch-Area
	 * 44x44 via ::after Pseudo-Element (transparent). Pin mp476w8q 2026-05-13:
	 * vorher padding+content-box Hack -> Border-Outline 50% formte 48px-Kreis,
	 * sah aus wie "Digits". Jetzt klare 20px-Ellipse + invisible Touch-Layer. */
	.hitop-slider__dot {
		box-sizing: border-box !important;
		padding: 0 !important;
		width: 1.25rem !important;
		height: 1.25rem !important;
		background-clip: border-box !important;
		border: 2px solid var(--wp--preset--color--grey, #D9D9D9);
		position: relative;
	}
	.hitop-slider__dot::after {
		content: '';
		position: absolute;
		inset: -12px;
	}

	/* --- 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;
	}

	/* --- 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
   ========================================================================== */

.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. Mega-Menu Heading + Link Tokens (Figma-konform, GLOBAL für alle Submenus) ---
 * Wissen-Dropdown (Figma 3149:1991), Symptome, Produkt, Beratung, Über Uns nutzen
 * dieselben Konventionen — KEIN per-Menüpunkt-CSS. Layout via PHP-Filter
 * (inc/megamenu.php) gruppiert Items pro `.hitop-megamenu-heading` in eine
 * `.hitop-megamenu-col`, Heading-Style + Link-Style sind oben generisch.
 *
 * Figma-Werte (global):
 *   Heading: Inter 900 / 14px / lh 21 / #959595 / UPPER / ls 0.05em
 *   Link:    Inter 300 / 18px / lh 23.4 / #2C2C2C
 *   Active:  Inter 500 (highlighted weight)
 */

.hitop-nav.wp-block-navigation .wp-block-navigation-item.hitop-nav__pill {
	padding: 0;
}

/* --- 4. Mobile Header Reihenfolge (Logo links, Actions mitte/rechts, Burger ganz rechts)
       Fix 2026-05-12 (mp2mtgb2): Burger war an linkem Rand (16px). Thumb-friendly +
       konventionelles Mobile-Pattern: Burger ganz rechts, Logo links. Außerdem Header
       Padding leicht erhöht damit nichts mehr "am Rand" klebt. */
@media (max-width: 1024px) {
	.hitop-header__inner {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		padding: 14px 20px !important;
	}

	.hitop-header__inner > .hitop-header__logo {
		order: 1;
		margin: 0 !important;
		flex: 0 1 auto;
	}

	.hitop-header__inner > .hitop-header__actions {
		order: 2;
		margin-left: auto !important;
		display: flex !important;
		flex: 0 0 auto;
		gap: 12px;
	}

	.hitop-header__inner > .hitop-nav {
		order: 3;
		flex: 0 0 auto;
		margin: 0 !important;
	}

	.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;
	}

	.hitop-header__icon--cart {
		display: inline-flex !important;
	}
}

/* --- 5+6. Mobile Accordion + Logo-Pseudo — ENTFERNT 2026-05-19.
   Diese Section hatte:
   - max-height 0 / 1200px Akkordeon-Animation (ersetzt durch F Z.9737 mit
     dynamischer max-height calc((100vh - header) * 0.55) + overflow-y: auto)
   - dunklen Chevron (%232c2c2c, 12x12px) (ersetzt durch F Z.9803 brand-primary
     %23D83F27, 18x18px, position:absolute right:22px)
   - Logo-Pseudo ::before (ersetzt durch echten Header oberhalb Overlay in F)
   - Wissen-Alphabet 6-Spalten-Grid (Mobile zeigt es als gestapelte Liste — der
     Grid-Override ist unnoetig, weil hitop-megamenu-col stackt sowieso)
   - Pill-Style border:0 + font-weight:700 (Pill ist nicht im Top-Level —
     wird via JS in .hitop-mobile-overlay-cta geklont; siehe F Z.9847+)
   Alle Regeln in Section F Z.9505+ sauber gehandhabt. */

/* Mobile Burger Overlay — Opacity/z-index Patch von 2026-04-17 ENTFERNT
   2026-05-19. Section F Z.9525-9534 setzt z-index 100001 + Header darüber. */

/* ==========================================================================
   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. */
/* 2026-06-09 (#52 Mobil, User „Slider-Karten sehen kaputt aus, statische gut"):
 * War @media max-width:600px → ZWISCHEN 601 und 781px blieb die Slide bei 85%
 * (Peek + keine Pfeile) und die Karte schmaler als die guten statischen Karten
 * → genau der „Foto fuellt nicht / Karte angeschnitten"-Bug auf Tablet/Foldable/
 * grossem Phone. Jetzt auf GANZ Mobil (≤781): Slide = 100% volle Breite, kein Peek.
 * UND: das zusaetzliche Viewport-padding:0 16px ergab eine DOPPELTE Gutter (Section
 * 16 + Viewport 16 = 32) → Blog-Karte 314 statt 346 (schmaler als statische Karte).
 * Section-Gutter (16px) reicht (statische Karten sitzen genauso) → Viewport-padding
 * raus, Slider-Karte = volle Section-Breite = identisch zur statischen Karte. */
@media (max-width: 781px) {
	/* 2026-06-10: margin-right NICHT mehr 0. Karte bleibt 100% Viewport-Breite
	 * (= zentriert via margin-inline-Gutter), aber der slider-base-Gap
	 * (var(--spacing--md), ~24px, im Ruhezustand off-screen rechts) kehrt zurück.
	 * Grund: bei margin-right:0 saß die Folge-Karte BÜNDIG an der rechten Karten-
	 * kante, also IM 16px-overflow-clip-margin → die (weiße) Folge-Karte verdeckte
	 * den rechten Karten-Schatten (User „Schatten leicht abgeschnitten") UND es gab
	 * keinen Abstand zwischen den Karten beim Swipen. Gap (24) > clip-margin (16) >
	 * Schatten (4) → Schatten frei, Karten getrennt, weiterhin KEIN Peek (Folge-
	 * Karte 24px entfernt, Clip zeigt nur 16px = nur Schattenraum). */
	.hitop-slider.hitop-carousel-3v1 .hitop-slider__slide,
	.hitop-slider.hitop-carousel-2 .hitop-slider__slide {
		flex: 0 0 100% !important;
	}
	/* Figma 1104:1496 „Carousel 3-Cards Variante 1 -mobile": Karte zentriert mit
	 * Seitenrand (335/440 = 76%), NICHT full-bleed. Gutter via margin-inline (NICHT
	 * padding) → liegt AUSSERHALB des overflow-clip → kein Peek + Karten-Schatten
	 * sichtbar (sonst „leicht abgeschnitten"). 1.5rem ergibt ~76% auf Phone-Breiten. */
	.hitop-slider.hitop-carousel-3v1 .hitop-slider__viewport,
	.hitop-slider.hitop-carousel-2 .hitop-slider__viewport {
		padding-inline: 0 !important;
		margin-inline: 1.5rem !important;
	}
	/* Figma: 30px Gap Karte→Dots (war ~4-12px, „Bullets klemmen zu nah"). Der
	 * Viewport zieht via margin-block:-1.5rem das folgende Nav 24px hoch → 50px
	 * padding-block-start ergibt netto ~30px sichtbaren Abstand. */
	.hitop-slider.hitop-carousel-3v1 .hitop-slider__nav,
	.hitop-slider.hitop-carousel-2 .hitop-slider__nav {
		padding-block-start: 50px !important;
	}
}

/* hitop-blog-quote__image — Image im Blog/Wissen-Wirksamkeits-Block (Figma 3168-3236).
 * Aspect-Ratio bewahren (Sticker soll nicht gecropped werden) + subtle Shadow.
 * Override fuer .has-shadow .wp-block-image img (height:240px crop) wird durch
 * hoehere Specificity (.hitop-blog-quote__image-Klasse) gewonnen. */
.hitop-blog-quote__image.has-shadow {
	box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
	overflow: visible;
	border-radius: 30px;
}
.hitop-blog-quote__image.has-shadow img,
.hitop-blog-quote__image img {
	height: auto !important;
	width: 100%;
	object-fit: contain !important;
	border-radius: 30px;
	display: block;
}

/* ===================================================================
 * READING-COLUMN für Blog + Wissen — 2026-05-20 Container-Refactor.
 *
 * Hintergrund: Blog single.html nutzte vorher contentSize:800px im
 * Main-Container — guter Lesefluss-Container, aber Pattern-Sections
 * mit align:wide/full wurden ungewollt auf 800px geklammert (Trap-
 * Bug bei Post 2299). Nach Refactor: Blog-Container auf 1328px, naked
 * Core-Blocks kriegen ihre Reading-Column via CSS automatisch.
 *
 * 2026-05-20 erweitert: Wissen-CPT bekommt die gleiche Regel
 * (Figma 3168-3351 "Copy Large" zeigt raw Text-Paragraphs zwischen
 * Patterns als legitimen Use-Case).
 *
 * Reading-Column-Breite differenziert pro CPT:
 *   - Blog (single-post): 800px — klassische Magazin-/Article-Spec
 *     (60-75 Zeichen/Zeile bei Default-Body 18-20px).
 *   - Wissen (single-wissen): 1100px — Figma-Spec gemessen aus
 *     3168-3351 (1099px) und 3168-3390 (1129px). HiTop-Design will
 *     fuer Wissens-Content breitere Lese-Spalten (~90 Zeichen/Zeile
 *     bei 22px Light) — informative Long-Form, nicht klassisches
 *     Article-Layout. Token-konsistent mit patterns/glossar.php.
 *
 * padding-inline:gutter sichert Mobile gegen Viewport-Edge-Cling
 * (Wissen-main hat kein inline gutter-padding, anders als Blog-main).
 *
 * Pattern-Sections (mit hitop-* Klasse, align:wide, align:full,
 * has-* Hintergrund) sind explizit ausgeschlossen via :not()-Filter. */
/* Reading-Column-Width Blog: 1100px (Figma-Spec, gleicher Token wie Wissen).
 * 2026-05-20 User-Korrektur: 800px war urspruenglich Magazin-Spec-Annahme,
 * aber Figma zeigt fuer Blog raw Text-Sections gleichen Wert wie Wissen. */
body.single-post .wp-block-post-content > p,
body.single-post .wp-block-post-content > h2,
body.single-post .wp-block-post-content > h3,
body.single-post .wp-block-post-content > h4,
body.single-post .wp-block-post-content > h5,
body.single-post .wp-block-post-content > h6,
body.single-post .wp-block-post-content > ul,
body.single-post .wp-block-post-content > ol,
body.single-post .wp-block-post-content > blockquote,
body.single-post .wp-block-post-content > pre,
body.single-post .wp-block-post-content > .wp-block-separator,
body.single-post .wp-block-post-content > figure:not(.alignfull):not(.alignwide),
body.single-post .wp-block-post-content > .wp-block-group:not(.alignfull):not(.alignwide):not([class*="hitop-"]) {
	max-width: var(--hitop-content-width, 1100px);
	margin-inline: auto;
}

/* Reading-Column-Width Wissen: 1100px (Figma 3168-3351/3390 exakt gemessen
 * 1099/1129px, gerundet auf 1100 = Konsistenz mit patterns/glossar.php). */
body.single-wissen .wp-block-post-content > p,
body.single-wissen .wp-block-post-content > h2,
body.single-wissen .wp-block-post-content > h3,
body.single-wissen .wp-block-post-content > h4,
body.single-wissen .wp-block-post-content > h5,
body.single-wissen .wp-block-post-content > h6,
body.single-wissen .wp-block-post-content > ul,
body.single-wissen .wp-block-post-content > ol,
body.single-wissen .wp-block-post-content > blockquote,
body.single-wissen .wp-block-post-content > pre,
body.single-wissen .wp-block-post-content > .wp-block-separator,
body.single-wissen .wp-block-post-content > figure:not(.alignfull):not(.alignwide),
body.single-wissen .wp-block-post-content > .wp-block-group:not(.alignfull):not(.alignwide):not([class*="hitop-"]) {
	max-width: var(--hitop-content-width, 1100px);
	margin-inline: auto;
}

/* Wissen-Mobile-Safety: Wissen-main hat KEIN inline gutter-padding (anders
 * als Blog-main). Naked Core-Blocks wuerden auf Mobile am Viewport-Rand
 * kleben. Daher hier separates padding-inline. Auf Desktop greift es nur
 * wenn Viewport < 1100+2*gutter (~1180) — sonst hat die Reading-Column
 * eh genug Whitespace links/rechts. box-sizing:border-box damit das
 * padding nicht den 1100px-Cap sprengt. */
body.single-wissen .wp-block-post-content > p,
body.single-wissen .wp-block-post-content > h2,
body.single-wissen .wp-block-post-content > h3,
body.single-wissen .wp-block-post-content > h4,
body.single-wissen .wp-block-post-content > h5,
body.single-wissen .wp-block-post-content > h6,
body.single-wissen .wp-block-post-content > ul,
body.single-wissen .wp-block-post-content > ol,
body.single-wissen .wp-block-post-content > blockquote,
body.single-wissen .wp-block-post-content > pre,
body.single-wissen .wp-block-post-content > figure:not(.alignfull):not(.alignwide),
body.single-wissen .wp-block-post-content > .wp-block-group:not(.alignfull):not(.alignwide):not([class*="hitop-"]) {
	padding-inline: var(--wp--preset--spacing--gutter);
	box-sizing: border-box;
}

/* 2026-05-27 User-Feedback "die bullets sind nicht eingerückt":
 * WP-Core default ul/ol padding-left = 40px → Bullet-Marker hängt ~24px rechts
 * vom Paragraph-Edge, LI-Text 40px rechts. Sieht im Reading-Flow "floaty" aus
 * statt sauber bündig zur Reading-Column. Fix: reduzieren auf 1.5em (~33px bei
 * font-size lg=22px) → Bullet sitzt fast bündig zum Paragraph-Edge, LI-Text
 * leicht indented (hängender Editorial-Style). Gilt nur für direkte Listen
 * im Reading-Flow, nicht für Listen in Patterns/Cards. */
body.single-post .wp-block-post-content > ul,
body.single-post .wp-block-post-content > ol,
body.single-wissen .wp-block-post-content > ul,
body.single-wissen .wp-block-post-content > ol {
	padding-inline-start: 1.5em;
}

/* 2026-05-27 User-Feedback "das Hinweisfeld auch nicht":
 * Callout `--important` hat `margin: 32px auto` und max-width:1100px. Auf
 * Desktop perfekt zentriert in Reading-Column. Auf Mobile (vor allem
 * Wissen-Template das kein global-padding hat) wird Callout 100% breit und
 * klebt am viewport-edge. Fix: explizite Mobile-Margin statt auto. */
@media (max-width: 1180px) {
	body.single-wissen .hitop-blog-callout.hitop-blog-callout--important,
	body.single-post .hitop-blog-callout.hitop-blog-callout--important {
		margin-inline: var(--wp--preset--spacing--gutter) !important;
		max-width: calc(100% - 2 * var(--wp--preset--spacing--gutter)) !important;
	}
}

/* "Copy Large"-Default fuer Body-Paragraphs in Blog + Wissen
 * (Figma 3168-3351, 3168-3390 + globale Brand-Regel User 2026-05-20):
 * Inter Light 22px / line-height 1.5 / dark-anthrazit.
 *
 * Brand-Typography-Hierarchie:
 *   - Copytext (Lesefluss-Body, Section-Body, Pattern-Body):    lg = 22px Light
 *   - Card-Text (Carousel-Cards, FAQ, USP-Cards, Trust-Row):    sm = 16px
 *
 * Zwei Regel-Bloecke fuer zwei Wege:
 *
 * (1) Naked Paragraph direkt im post-content (raw Text-Sections wie
 *     "Softdrinks"). Setzt Size + Weight + Line-Height + Color.
 *
 * (2) Paragraph mit has-lg-font-size IRGENDWO im post-content (Pattern-
 *     Body in text-media-cta-*, hochtontherapie-cta etc.). Size kommt
 *     schon via has-lg-font-size Klasse, wir setzen nur Weight + Line +
 *     Color (Figma "Copy Large" Spec).
 *
 * Card-Texte (has-sm-font-size) sind nicht betroffen — andere Klasse.
 * Headings (h2-h6) bleiben unberuehrt — eigene theme.json-Defaults.
 * Listen (ul/ol) erben Typography von p via inheritance.
 *
 * Author-Override jederzeit moeglich via Inline-style oder spezifischer
 * has-* Klasse (z.B. has-bold-font-weight). */

body.single-post .wp-block-post-content > p:not([class*="has-"]),
body.single-wissen .wp-block-post-content > p:not([class*="has-"]) {
	font-size: var(--wp--preset--font-size--lg);
	font-weight: 300;
	line-height: 1.5;
	color: var(--wp--preset--color--dark-anthrazit);
}

body.single-post .wp-block-post-content p.has-lg-font-size,
body.single-wissen .wp-block-post-content p.has-lg-font-size {
	font-weight: 300;
	line-height: 1.5;
	color: var(--wp--preset--color--dark-anthrazit);
}

/* hitop-text-bild-cta --variant-1 (Figma 3168-3223, "Text Bild CTA Variante 1"):
 * Light-grey BG (#F5F5F5) NUR auf linker Text-Spalte (Section-Hintergrund bleibt
 * transparent — Bild rechts geht edge-to-edge mit eigener Kante). Title 32px Light
 * + Body 22px Light. Padding inner-column 86px top / 200px left (Figma exact).
 * Image rechts ohne radius, fuellt die Spalte komplett.
 *
 * 2026-05-20: 100vw-Hack BLEIBT auch nach Container-Refactor 800→1328.
 * Begründung: `single.html` main hat inline gutter-padding (für andere Sections
 * ohne eigenes padding). `align:full` bricht aus post-content's contentSize:1328
 * aus, landet aber im main's gutter-padded Box → max viewport-minus-2*gutter.
 * variant-1 will aber bis ZUM ECHTEN VIEWPORT-RAND — also brauchen wir den
 * 100vw-Breakout PLUS padding-inline:0 gegen has-global-padding.
 * Die "Container-Refactor erlaubt 100vw-removal"-Annahme war falsch — der Trap
 * war contentSize:800 (zwingt Sections in Lesefluss-Container), der Hack ist
 * für die separate Frage "Pattern bis Viewport-Rand statt Content-Container". */
.hitop-text-bild-cta--variant-1 {
	width: 100vw !important;
	margin-inline: calc((100% - 100vw) / 2) !important;
	padding-inline: 0 !important;
	overflow: hidden;
}
.hitop-text-bild-cta--variant-1 > .wp-block-columns {
	/* 2026-06-08 User: "geht nur bis 1328, muss bis zum Seitenrand". Die inneren
	   Columns waren auf Content-Breite begrenzt -> Bg-Spalte + Bild stoppten bei
	   1328 obwohl der Wrapper 100vw ist. max-width:none laesst sie echt edge-to-edge. */
	max-width: none !important;
	width: 100% !important;
	gap: 0 !important;
	align-items: stretch;
	margin: 0;
}
.hitop-text-bild-cta--variant-1 .wp-block-column {
	margin: 0;
}
.hitop-text-bild-cta--variant-1 .wp-block-column:first-child {
	display: flex !important;
	flex-direction: column;
	justify-content: center;
	padding: 86px 100px 86px 200px;
	background-color: var(--wp--preset--color--light-grey);
}
.hitop-text-bild-cta--variant-1 .wp-block-column:last-child {
	padding: 0 !important;
}
.hitop-text-bild-cta--variant-1 .wp-block-column:last-child .wp-block-image {
	margin: 0;
	width: 100%;
	height: 100%;
}
.hitop-text-bild-cta--variant-1 .wp-block-column:last-child .wp-block-image img {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
	border-radius: 0;
}
.hitop-text-bild-cta--variant-1 h2 {
	font-size: 32px !important;
	font-weight: 300 !important;
	line-height: 1.2 !important;
	letter-spacing: -0.96px !important;
	color: var(--wp--preset--color--dark-anthrazit);
	margin: 0 0 32px !important;
}
.hitop-text-bild-cta--variant-1 p {
	font-size: 22px !important;
	font-weight: 300 !important;
	line-height: 1.5 !important;
	color: var(--wp--preset--color--dark-anthrazit);
	margin: 0 0 16px !important;
}
.hitop-text-bild-cta--variant-1 p:last-child {
	margin-bottom: 0 !important;
}

/* hitop-text-bild-cta --variant-1 + --variant-2 + .hitop-vortrag-cta (Aerztesuche/
 * Apotheken Online-Vortrag-CTA): Desktop 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-1 .wp-block-columns,
	.hitop-text-bild-cta--variant-1 > .wp-block-columns,
	.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;
	}

	.hitop-text-bild-cta--variant-1 .wp-block-column:first-child {
		padding: 40px 24px !important;
	}
	.hitop-text-bild-cta--variant-1 h2 {
		font-size: 24px !important;
		letter-spacing: -0.72px !important;
		margin-bottom: 20px !important;
	}
	.hitop-text-bild-cta--variant-1 p {
		font-size: 18px !important;
	}
	/* Bild bleibt full-width auf Mobile, fixe Hoehe damit es nicht crashed */
	.hitop-text-bild-cta--variant-1 .wp-block-column:last-child .wp-block-image img {
		height: auto;
		max-height: 320px;
	}
}

/* 2026-05-13 KORREKTUR (vorherige Annahme war falsch):
 * Figma-Wahrheit aus REST API: Section-H2 = Inter **300** (light), nicht 700.
 * Belegt in design-system.json (28x weight 300 / 32px / lh 48 / ls -0.96).
 * Inline-Style font-weight:300 ist KORREKT — diese alte 700-Override-Regel
 * war wider Figma und wird entfernt. */

/* 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;
	}
}

/* 2026-05-28 QW12 (Anpassungen-XLSX): Trustedshop Käuferschutz-Widget
 * überlappt mit Sticky-"Jetzt Testen"-CTA (beide bottom-right). Fix:
 * Trustedshop nach oben schieben, damit Sticky-CTA freistehen kann.
 *
 * Erste Version (bottom:101px) griff nicht, da das eigentlich `position:fixed`-
 * platzierte Element der React-Wrapper-Div ist (keine stabile Klasse/ID),
 * während der innere `[id^="minimized-trustbadge-"]` `position:relative` ist.
 * Lösung: transform:translateY auf das innere Element — wirkt unabhängig vom
 * Positionierungs-Kontext und verschiebt das sichtbare Badge nach oben. */
/* Re-try 2026-05-28: transform auf Button hatte keinen visuellen Effekt.
 * Der position:fixed-Wrapper ist Trustedshops obfuscated Klasse `._1y0juye`
 * INNERHALB von `#trustbadge-container-*`. Wir verschieben dessen `bottom`.
 * Wenn Trustedshop die Klasse irgendwann umbenennt, hier nachziehen. */
[id^="trustbadge-container-"] ._1y0juye {
	bottom: 224px !important;
}

/* Pastel #80-Folge (Philipp Keck 30.06.): Auf Mobil rendert der schwebende
   Trusted-Shops-Käuferschutz-Badge (unten-links) ÜBER dem etracker-Cookie-Banner
   (#et-consent-overlay, z-index 10001). Der Cookie-Layer muss immer oben liegen →
   Trustbadge unter 10001 legen. Stabile [id^=…]-Hooks + der aktuelle Mobile-Hash
   (._1b4t9li, ggf. bei Trusted-Shops-Rebuild nachziehen wie bei QW12). Nach dem
   Consent ist der Cookie-Layer weg → Badge unten-links wieder normal sichtbar. */
@media (max-width: 781px) {
	[id^="trustbadge-container-"],
	[id^="minimized-trustbadge-"],
	#trustbadge-iframe,
	.etrusted-trustbadge,
	[id^="trustbadge-container-"] ._1b4t9li {
		z-index: 9000 !important;
	}
}

/* 2026-05-28 Annotation mppl8xd8: /blog/ "Für wen ist HiToP geeignet" Spalte zu
 * groß (1462×1085 mit padding 80/60). Reduziere padding + cap die Spalte auf
 * lesefreundliche Breite.
 * 2026-05-28 Annotation mppojamw: Abstand unten reduzieren wie oben. Outer Section
 * margin-block weg + Newsletter darüber bündig. */
/* 2026-06-01 (User: "nur links im Grid, nicht die Breite" / max-width hinfaellig):
 * Rote Selbstcheck-Spalte bleibt full-bleed links, ABER der Text startet am
 * Content-Grid-Rand (1328 zentriert) statt am Viewport-Rand — steht so "im Grid"
 * links-buendig mit dem uebrigen Seiteninhalt, in natuerlicher Breite (kein Width-Cap;
 * Textblock ist konstruktionsbedingt ~624px, nicht 1328). Home (15) bleibt kompakt. */
.hitop-fuer-wen-geeignet .wp-block-column.has-brand-primary-background-color {
	padding: 48px 40px !important;
	padding-left: max(40px, calc((100vw - 1328px) / 2)) !important;
}
body.page-id-15 .hitop-fuer-wen-geeignet .wp-block-column.has-brand-primary-background-color {
	padding-left: 40px !important;
}
body.page-id-15 .hitop-fuer-wen-geeignet .wp-block-column.has-brand-primary-background-color > * {
	max-width: 540px;
	/* Pastel #4 "Einzug bearbeiten. Textblock mittiger setzen": Textblock (540)
	 * stand links-buendig (40px links / 161px rechts). Jetzt im Orange-Panel
	 * zentriert (~100px je Seite), Text bleibt links-buendig lesbar. */
	margin-inline: auto;
}
/* agent-pin mq0n30xn "der button ist aber noch nicht zentriert, der text schon":
 * Der Selbstcheck-Trigger ist display:inline-flex -> margin-inline:auto wird bei
 * Inline-Level zu 0, daher blieb der Button links. Block-Level flex + fit-content
 * macht die auto-Margins wirksam -> Button zentriert wie der Textblock.
 * 2026-06-08 Pastel #47 (/brennende-fuesse/): war auf body.page-id-15 gescopet ->
 * jede andere Symptom-Page (andere ID) liess den sc-trigger wieder full-width
 * stretchen. page-id-Scope entfernt -> gilt jetzt fuer ALLE fuer-wen-Spalten. */
.hitop-fuer-wen-geeignet .wp-block-column.has-brand-primary-background-color > .hitop-sc-trigger {
	display: flex;
	width: fit-content;
}
.hitop-fuer-wen-geeignet {
	margin-block: 0 !important;
}

/* 2026-05-28 Annotation mppl6od8: Abstand zwischen Blog-Category-Sections.
 * WP-core .is-layout-flow > * setzt margin-block:24px mit höherer Specificity
 * als unsere SCSS-Regel im Plugin. Override mit !important. */
.hitop-blog-category-section {
	margin-block: clamp(3.5rem, 7vw, 6.5rem) !important;
}

/* 2026-05-28 R15a (Anpassungen-XLSX): Kontaktseite Überschrift "Kontakt"
 * kleiner machen. Aktuell 50px/Black-900 (3xl-Token + inline font-weight:900)
 * → 32px/Light-300, passt zu Brand-Heading-Typography. Page-ID 2338. */
body.page-id-2338 h1.wp-block-heading {
	font-size: 32px !important;
	font-weight: 300 !important;
	letter-spacing: -0.03em;
	line-height: 1.2;
}

/* 2026-05-28 R7-R9 Compact-Modifier (Anpassungen-XLSX): Symptom-Modul / Selbstcheck /
 * "Was ist HiToP" / "Jetzt Testen" als kompakte 1/3-Höhen-Variante. Funktioniert
 * via `.is-compact` Klasse auf der Pattern-Section ODER auf body.page-id-X für
 * sortenrein. Bis Figma kommt: weniger padding + große Sub-Elemente (Video, USPs)
 * ausblenden. Späterer Swap einfach durch Klasse-Entfernen oder anderem Pattern. */
.hitop-home-was-ist-pnp.is-compact,
.hitop-home-produkt-teaser.is-compact,
.hitop-selbstcheck-cta.is-compact,
.hitop-symptom-carousel.is-compact,
body.is-product-compact .hitop-home-was-ist-pnp,
body.is-product-compact .hitop-home-produkt-teaser,
body.page-id-47 .hitop-home-produkt-teaser {
	padding-block: clamp(1.5rem, 3vw, 2.5rem) !important;
}

/* "Was ist HiToP PNP" compact: Video + USP-Spalten + lange Erklärung ausblenden,
 * nur Heading + kurzer Lead bleiben. */
.hitop-home-was-ist-pnp.is-compact .hitop-home-pnp-video,
.hitop-home-was-ist-pnp.is-compact .hitop-was-ist-pnp__usps,
body.is-product-compact .hitop-home-was-ist-pnp .hitop-home-pnp-video,
body.is-product-compact .hitop-home-was-ist-pnp .hitop-was-ist-pnp__usps,
body.is-product-compact .hitop-home-was-ist-pnp > .wp-block-group > p:last-of-type {
	display: none !important;
}
/* 2026-06-03: page-id-47 aus der Compact-Hide-Regel entfernt — auf /produkt/ soll
   das volle "Was ist HiToP"-Modul (Video + 3 USP-Icons + Erklaertext) zeigen,
   1:1 wie Figma 1104:3086. Annotation mpvbx966/mpvc1ex7. */

/* "Jetzt Testen oder Kaufen" compact: Bilder-Slider klein, Pricing-Cards bleiben.
 * 2026-06-01: page-id-47 entfernt — Produkt-Galerie soll ihre Thumbnails zeigen
 * (User: "was ist mit den Thumbnails passiert, das ist ein Standardmodul").
 * Die .is-compact / is-product-compact Varianten bleiben fuer andere Kontexte. */
.hitop-home-produkt-teaser.is-compact .hitop-product-thumbs,
body.is-product-compact .hitop-home-produkt-teaser .hitop-product-thumbs {
	display: none !important;
}
.hitop-home-produkt-teaser.is-compact .hitop-product-main-image,
body.is-product-compact .hitop-home-produkt-teaser .hitop-product-main-image,
body.page-id-47 .hitop-home-produkt-teaser .hitop-product-main-image {
	max-height: 280px;
	object-fit: contain;
}

/* Selbstcheck-CTA compact (NOCH NICHT eingesetzt — nur .is-compact, kein page-id):
 * brand-primary Text-Spalte hat inline padding 86/78/200/109. Compact reduziert
 * vertikales padding + Heading/Paragraph-Margins, Bildspalte unverändert. */
.hitop-selbstcheck-cta.is-compact .wp-block-column.has-brand-primary-background-color {
	padding-top: 40px !important;
	padding-bottom: 40px !important;
}
.hitop-selbstcheck-cta.is-compact .wp-block-heading {
	margin-bottom: 20px !important;
}
.hitop-selbstcheck-cta.is-compact p {
	margin-bottom: 24px !important;
}

/* Symptom-Carousel compact (NOCH NICHT eingesetzt — nur .is-compact):
 * padding-block runter + optionaler Long-Text-Block unter dem Carousel ausgeblendet. */
.hitop-symptom-carousel.is-compact {
	padding-block: clamp(1.5rem, 3vw, 2.5rem) !important;
}
.hitop-symptom-carousel.is-compact .hitop-symptom-carousel__longtext,
.hitop-symptom-carousel.is-compact > .wp-block-group > p {
	display: none !important;
}

/* 2026-05-29 Figma 1626:928 — Newsletter Kompakt-Variante (Höhe 621→500).
 * Auto-kompakt auf Wissen-CPT + Blog-Single: dort wird der Newsletter per Template
 * (single-wissen.html / single.html) eingebunden und wiederholt sich beim Scrollen
 * auf jeder Seite. Home (home.html) + Archive bleiben bewusst groß (621px).
 * Figma-Diff Variant2: Overlay top/bottom 83→52, blockGap 50→30, Cover-Höhe 621→500. */
body.single-wissen .hitop-newsletter,
body.single-post .hitop-newsletter {
	min-height: 500px !important;
}
/* 2026-06-10 User-Befund (Wissen-Page): Anmelden-Button unten abgeschnitten.
 * Ursache: Overlay ist global position:absolute (inset-block 0) -> Inhalt (558px)
 * kann den 500px-Kompakt-Cover nicht aufziehen, overflow:hidden clippt 58px.
 * Fix nur Wissen/Blog: Overlay in den Flow -> Cover waechst mit Inhalt,
 * min-height 500 bleibt Kompakt-Untergrenze. Desktop-Optik unveraendert
 * (Overlay weiter rechtsbuendig 52.83% via margin-left:auto). */
body.single-wissen .hitop-newsletter > .wp-block-cover__inner-container,
body.single-post .hitop-newsletter > .wp-block-cover__inner-container {
	position: relative;
	inset: auto;
}
body.single-wissen .hitop-newsletter .hitop-newsletter__overlay,
body.single-post .hitop-newsletter .hitop-newsletter__overlay {
	position: relative;
	top: auto;
	right: auto;
	bottom: auto;
	margin-left: auto;
	min-height: 396px; /* 500 - 2x52 Overlay-Padding: Cover bleibt mind. kompakt-hoch */
}
body.single-wissen .hitop-newsletter .hitop-newsletter__overlay,
body.single-post .hitop-newsletter .hitop-newsletter__overlay {
	padding-top: 52px !important;
	padding-bottom: 52px !important;
}
body.single-wissen .hitop-newsletter__overlay > * + *,
body.single-post .hitop-newsletter__overlay > * + * {
	margin-block-start: 30px !important;
}

/* 2026-06-08 User: "padding/margin zum Inhalt darueber muss weg" — Newsletter
   klebt jetzt direkt an die Mehr-Lesen-Section drueber (kein 24px-Top-Gap). */
body.single-wissen .hitop-newsletter,
body.single-post .hitop-newsletter {
	margin-top: 0 !important;
}

/* 2026-06-08 User: "inhalte kleben im bereich" — Overlay-Inline-Padding war
   asymmetrisch (49 links / 106 rechts), Text klebte am Geraete-Bild. Links/rechts
   angleichen -> Block sitzt luftig statt am Bildrand. */
body.single-wissen .hitop-newsletter__overlay,
body.single-post .hitop-newsletter__overlay {
	padding-left: 72px !important;
	padding-right: 72px !important;
}

/* 2026-05-29 Figma 1626:856 — "Für wen geeignet" / Selbstcheck Kompakt (Höhe 699→~540).
 * Modul = synced hitop-fuer-wen (.hitop-fuer-wen-geeignet), eingebunden auf Blog-Single
 * (single.html), Home (home.html) und den Symptom-Pages (symptom-landing-top). Auto-kompakt
 * nur dort, wo es sich beim Scrollen wiederholt: Blog-Single + die 7 Symptom-Einzelseiten.
 * Home (page-id-16) bleibt bewusst groß (Bild-natürliche 699px). Brand-Textspalten-Padding
 * ist global schon 48/40 (mppl8xd8, unter Figma-Compact 57) — Höhentreiber ist allein das Bild
 * couple-elderly.webp (864×699, ratio 1.236). Lösung: Bildhöhe responsiv deckeln + object-fit
 * cover; die Textspalte bleibt content-natürlich (kein Clipping). */
/* 2026-05-29 Annotation mpqxajdi-tsr4wm ("was ist denn hiermit passiert?"):
 * Selbstcheck-Spalte bei breiten Viewports viel zu hoch (gemessen 997-1117px statt
 * ~560), Text klebte oben. URSACHE: die globale Fill-Regel weiter unten
 *   .hitop-fuer-wen-geeignet > .wp-block-column:last-child .wp-block-image img { height:100% }
 * (Specificity 0,4,1) schlug den frueheren #133-Clamp (0,3,3) -> das Bild lief auf
 * seine natuerliche Aspect-Hoehe (couple-elderly.webp 864x699), und align-items:stretch
 * streckte die Row darauf; der Clamp hat de facto NIE gegriffen.
 * FIX (Desktop >=782px): Bild absolut in die Bild-Spalte legen -> es traegt KEINE
 * Eigenhoehe zur Row bei, sondern fuellt (object-fit:cover) die von der Textspalte
 * bestimmte content-natuerliche Hoehe (~560-630px). Empirisch verifiziert
 * @1440/1920/2560: rowH == imgH, Lücke 0, kein Ballon. Orange-Textspalte vertikal
 * zentriert als Safety-Net.
 * SCOPE: single-post (Blog) + Symptom-Pages inkl. 16 (Brennende Fuesse — ist eine
 * Symptomseite, war faelschlich als "Home" ausgenommen; echtes Home = page-id-15
 * bleibt bewusst gross und ist NICHT in dieser Liste). Mobile (<782px) unveraendert. */
@media (min-width: 782px) {
	body.single-post .hitop-fuer-wen-geeignet > .wp-block-column:not(.has-brand-primary-background-color),
	body.page-id-16 .hitop-fuer-wen-geeignet > .wp-block-column:not(.has-brand-primary-background-color),
	body.page-id-2334 .hitop-fuer-wen-geeignet > .wp-block-column:not(.has-brand-primary-background-color),
	body.page-id-2335 .hitop-fuer-wen-geeignet > .wp-block-column:not(.has-brand-primary-background-color),
	body.page-id-2336 .hitop-fuer-wen-geeignet > .wp-block-column:not(.has-brand-primary-background-color),
	body.page-id-2337 .hitop-fuer-wen-geeignet > .wp-block-column:not(.has-brand-primary-background-color),
	body.page-id-2342 .hitop-fuer-wen-geeignet > .wp-block-column:not(.has-brand-primary-background-color),
	body.page-id-2344 .hitop-fuer-wen-geeignet > .wp-block-column:not(.has-brand-primary-background-color),
	body.page-id-2345 .hitop-fuer-wen-geeignet > .wp-block-column:not(.has-brand-primary-background-color) {
		display: flex !important;
		align-self: stretch !important;
	}
	body.single-post .hitop-fuer-wen-geeignet > .wp-block-column:not(.has-brand-primary-background-color) .wp-block-image,
	body.page-id-16 .hitop-fuer-wen-geeignet > .wp-block-column:not(.has-brand-primary-background-color) .wp-block-image,
	body.page-id-2334 .hitop-fuer-wen-geeignet > .wp-block-column:not(.has-brand-primary-background-color) .wp-block-image,
	body.page-id-2335 .hitop-fuer-wen-geeignet > .wp-block-column:not(.has-brand-primary-background-color) .wp-block-image,
	body.page-id-2336 .hitop-fuer-wen-geeignet > .wp-block-column:not(.has-brand-primary-background-color) .wp-block-image,
	body.page-id-2337 .hitop-fuer-wen-geeignet > .wp-block-column:not(.has-brand-primary-background-color) .wp-block-image,
	body.page-id-2342 .hitop-fuer-wen-geeignet > .wp-block-column:not(.has-brand-primary-background-color) .wp-block-image,
	body.page-id-2344 .hitop-fuer-wen-geeignet > .wp-block-column:not(.has-brand-primary-background-color) .wp-block-image,
	body.page-id-2345 .hitop-fuer-wen-geeignet > .wp-block-column:not(.has-brand-primary-background-color) .wp-block-image {
		position: relative !important;
		flex: 1 1 auto !important;
		min-height: 0 !important;
		width: 100% !important;
		margin: 0 !important;
	}
	body.single-post .hitop-fuer-wen-geeignet > .wp-block-column:not(.has-brand-primary-background-color) .wp-block-image img,
	body.page-id-16 .hitop-fuer-wen-geeignet > .wp-block-column:not(.has-brand-primary-background-color) .wp-block-image img,
	body.page-id-2334 .hitop-fuer-wen-geeignet > .wp-block-column:not(.has-brand-primary-background-color) .wp-block-image img,
	body.page-id-2335 .hitop-fuer-wen-geeignet > .wp-block-column:not(.has-brand-primary-background-color) .wp-block-image img,
	body.page-id-2336 .hitop-fuer-wen-geeignet > .wp-block-column:not(.has-brand-primary-background-color) .wp-block-image img,
	body.page-id-2337 .hitop-fuer-wen-geeignet > .wp-block-column:not(.has-brand-primary-background-color) .wp-block-image img,
	body.page-id-2342 .hitop-fuer-wen-geeignet > .wp-block-column:not(.has-brand-primary-background-color) .wp-block-image img,
	body.page-id-2344 .hitop-fuer-wen-geeignet > .wp-block-column:not(.has-brand-primary-background-color) .wp-block-image img,
	body.page-id-2345 .hitop-fuer-wen-geeignet > .wp-block-column:not(.has-brand-primary-background-color) .wp-block-image img {
		position: absolute !important;
		inset: 0 !important;
		width: 100% !important;
		height: 100% !important;
		object-fit: cover !important;
	}
	body.single-post .hitop-fuer-wen-geeignet .wp-block-column.has-brand-primary-background-color,
	body.page-id-16 .hitop-fuer-wen-geeignet .wp-block-column.has-brand-primary-background-color,
	body.page-id-2334 .hitop-fuer-wen-geeignet .wp-block-column.has-brand-primary-background-color,
	body.page-id-2335 .hitop-fuer-wen-geeignet .wp-block-column.has-brand-primary-background-color,
	body.page-id-2336 .hitop-fuer-wen-geeignet .wp-block-column.has-brand-primary-background-color,
	body.page-id-2337 .hitop-fuer-wen-geeignet .wp-block-column.has-brand-primary-background-color,
	body.page-id-2342 .hitop-fuer-wen-geeignet .wp-block-column.has-brand-primary-background-color,
	body.page-id-2344 .hitop-fuer-wen-geeignet .wp-block-column.has-brand-primary-background-color,
	body.page-id-2345 .hitop-fuer-wen-geeignet .wp-block-column.has-brand-primary-background-color {
		display: flex !important;
		flex-direction: column;
		justify-content: center;
	}
}
/* Mobile (<782px): Bild natuerlich, kein absolute/Crop (Baseline unveraendert). */
@media (max-width: 781px) {
	body.single-post .hitop-fuer-wen-geeignet figure.wp-block-image img,
	body.page-id-16 .hitop-fuer-wen-geeignet figure.wp-block-image img,
	body.page-id-2334 .hitop-fuer-wen-geeignet figure.wp-block-image img,
	body.page-id-2335 .hitop-fuer-wen-geeignet figure.wp-block-image img,
	body.page-id-2336 .hitop-fuer-wen-geeignet figure.wp-block-image img,
	body.page-id-2337 .hitop-fuer-wen-geeignet figure.wp-block-image img,
	body.page-id-2342 .hitop-fuer-wen-geeignet figure.wp-block-image img,
	body.page-id-2344 .hitop-fuer-wen-geeignet figure.wp-block-image img,
	body.page-id-2345 .hitop-fuer-wen-geeignet figure.wp-block-image img {
		position: static !important;
		height: auto !important;
		object-fit: initial !important;
	}
}

/* 2026-06-03 Annotation mpuw4v6x: /produkt/ (page-id-47) fehlte in der mpqxajdi-Liste
   oben -> Text der orangen "Fuer wen"-Spalte klebte oben statt vertikal zentriert,
   Bild (couple-elderly.webp 864x699) trieb die Row-Hoehe. Gleicher Fix wie Blog/Home/
   Symptom: Bild absolut fuellen (object-fit:cover) + Orange-Spalte flex justify-center. */
@media (min-width: 782px) {
	body.page-id-47 .hitop-fuer-wen-geeignet > .wp-block-column:not(.has-brand-primary-background-color) {
		display: flex !important;
		align-self: stretch !important;
	}
	body.page-id-47 .hitop-fuer-wen-geeignet > .wp-block-column:not(.has-brand-primary-background-color) .wp-block-image {
		position: relative !important;
		flex: 1 1 auto !important;
		min-height: 0 !important;
		width: 100% !important;
		margin: 0 !important;
	}
	body.page-id-47 .hitop-fuer-wen-geeignet > .wp-block-column:not(.has-brand-primary-background-color) .wp-block-image img {
		position: absolute !important;
		inset: 0 !important;
		width: 100% !important;
		height: 100% !important;
		object-fit: cover !important;
	}
	body.page-id-47 .hitop-fuer-wen-geeignet .wp-block-column.has-brand-primary-background-color {
		display: flex !important;
		flex-direction: column;
		justify-content: center;
	}
}
@media (max-width: 781px) {
	body.page-id-47 .hitop-fuer-wen-geeignet figure.wp-block-image img {
		position: static !important;
		height: auto !important;
		object-fit: initial !important;
	}
}

/* Pastel #50 (Yanick) /webshop/ (page-id-7) — "Modul mehr an Figma anlehnen":
   Figma 1099:251 "Text Bild CTA Variante 1 -mobile" zeigt auf Mobil das BILD
   OBEN (full-bleed, scharfe Ecken) und den Orange-Block (Heading + Copy +
   Selbstcheck-Button) BUENDIG DARUNTER. Live war es umgekehrt (Text oben, Bild
   unten mit 20px-Radius + 16px-Gap). Fix nur fuer /webshop/ (das Modul ist auf
   ~10 Seiten synced — Home/Blog/Symptome bleiben unveraendert):
   column-reverse = Bild zuerst, gap:0 = flush, img radius:0 = Figma-scharf. */
@media (max-width: 781px) {
	/* Selektor bewusst hoch-spezifisch (body main .entry-content …columns…):
	   die webshop-weite Mobile-Regel `body.page-id-7 main .entry-content
	   .wp-block-columns { gap: var(--spacing--md) !important }` (Spezifitaet
	   0,3,2) wuerde sonst gap:0 schlagen → 16px Spalt bliebe. */
	body.page-id-7 main .entry-content .wp-block-columns.hitop-fuer-wen-geeignet {
		flex-direction: column-reverse !important;
		gap: 0 !important;
	}
	body.page-id-7 .hitop-fuer-wen-geeignet figure.wp-block-image img {
		border-radius: 0 !important;
	}
}

/* 2026-06-03 Annotation mpvbwxfa: Zubehoer-Banner (text-media-cta-v3). Im Motiv
   zubehoer-banner.png liegen die Produkte (Tasche + Sprays) LINKS, rechts leere
   Pastellflaeche. Der Text lag aber auch links -> ueberlagerte die Produkte.
   Figma 1104:3489: Text RECHTS ueber der freien Flaeche. Fix (Desktop): Textblock
   nach rechts (margin-left:auto) + Hintergrundbild links verankern, damit die
   Produkte bei schmaleren Viewports nicht weggecroppt werden. Mobile bleibt
   unveraendert (Text volle Breite, Bild zentriert). */
@media (min-width: 782px) {
	.hitop-text-media-cta-v3 img.wp-block-cover__image-background {
		object-position: left center !important;
	}
	.hitop-text-media-cta-v3__content {
		max-width: 620px;
		margin-left: auto !important;
		margin-right: 0 !important;
	}
}

/* 2026-06-03 (User /produkt/ mobil): Auf Desktop ist die Zubehoer-Sektion ein
   Cover (Bild als Vollflaechen-Hintergrund, Text-Overlay). Auf Mobile soll laut
   Figma 1104:3481 ("Text Bild CTA Variante 3 - mobile") GESTAPELT werden: Bild als
   Band oben (440x333 = ratio 1.32, full-bleed), darunter weisser Bereich mit H2 +
   Absatz + Pill-Button (links, 16px Gutter) — KEIN Overlay mehr. Dazu das
   Cover-Image aus der absoluten Vollflaeche in den Fluss holen (position:relative,
   feste Ratio) und den Inner-Container auf Weiss. object-position 22% zeigt die
   links liegenden Produkte (Tasche + Sprays) vollstaendig. */
@media (max-width: 781px) {
	.hitop-text-media-cta-v3 {
		display: block !important;
		min-height: 0 !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
	.hitop-text-media-cta-v3 img.wp-block-cover__image-background {
		position: relative !important;
		inset: auto !important;
		width: 100% !important;
		height: auto !important;
		aspect-ratio: 440 / 333 !important;
		object-fit: cover !important;
		object-position: 22% center !important;
	}
	.hitop-text-media-cta-v3 .wp-block-cover__background {
		display: none !important;
	}
	.hitop-text-media-cta-v3 .wp-block-cover__inner-container {
		position: relative !important;
		background: #fff !important;
	}
	.hitop-text-media-cta-v3__content {
		min-height: 0 !important;
		max-width: none !important;
		margin: 0 !important;
		padding: var(--wp--preset--spacing--lg, 24px) var(--wp--preset--spacing--gutter, 16px) !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 + SSOT-Pill-Radius.
   2026-05-18: SSOT 22/25 + radius 100. Vorher: 18/24 + radius 34. */
@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: 100px !important;
		padding: 22px 25px !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
   ============================================================ */

body.woocommerce-cart .hitop-cart-page__content {
	padding-top: var(--wp--preset--spacing--xl) !important;
}

/* ---- CART DESKTOP: Tabelle polieren ----
 * 2026-05-16: Graue Wanne (#F5F5F5) statt weiss-mit-Rahmen, analog zu
 * Payment-Methods-Container auf /kasse/. Items darin behalten weisse
 * Karten-Optik via Regel oben (~3386). */
body.woocommerce-cart table.shop_table.cart {
	background: var(--wp--preset--color--light-grey, #F5F5F5) !important;
	border-radius: 10px !important;
	border: 0 !important;
	box-shadow: none !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;
}

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;
}

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;
}

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;
	}

	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;
		width: 100% !important;
		min-width: 0 !important;
		padding-right: 32px !important;
		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.
	   2026-06-10 Pastel #68: Breakout via margin-left:-96px lief ueber das
	   Produktbild (Reviewer: "Bild und Text ueberlappen"). Info bleibt jetzt
	   in der Name-Spalte — kein Kreuzen der Thumb-Spalte mehr. */
	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 0 0 0 !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;
	}

	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;
	}

	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;
	}

	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;
	}
}

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.
 * Master-Pill-Spec 22/25 + radius 100 (SSOT).
 * 2026-05-28 QW14 (Anpassungen-XLSX): Pill mittig zentrieren. Vorher saß sie
 * trotz text-align:center am Parent links, weil inline-flex sich im flow
 * unterschiedlich verhält. Fix: display:flex + margin-inline:auto + fit-content. */
body.woocommerce-cart .hitop-empty-cart-cta {
	display: flex !important;
	width: fit-content !important;
	margin-inline: auto !important;
	align-items: center !important;
	justify-content: center !important;
	margin-top: 24px !important;
	padding: 22px 25px !important;
	background: var(--wp--preset--color--brand-primary) !important;
	color: var(--wp--preset--color--white) !important;
	border-radius: 100px !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;
}

/* 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;
}

.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;
}

.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;
}

.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;
}

.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;
}

.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;
}

@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;
	}
}

body.woocommerce-cart .hitop-cart-page__content {
	max-width: 1328px !important;
	margin-inline: auto !important;
}

@media (max-width: 781px) {

	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;
	}

	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;
	}

	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.
   ============================================================ */

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;
}

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;
}

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;

	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);
	}
}

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);
}

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);
}

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);
}

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: 22px 25px;
	border-radius: 100px;
	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) {

	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;
	}
	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;
	}

	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;
	}

	body.page-id-7 .hitop-webshop-warum-mieten .hitop-warum-cols {
		flex-direction: column;
	}

	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;
	}

	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;
	}

	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 — ENTFERNT 2026-05-19
   Diese Section war out-of-media-query (top-level) und kollidierte spezifizitaets-
   gleich mit dem aktuellen Mobile-Block ab Z.9505+ (Figma 3149-1792). Alle Regeln
   sind dort sauberer geloest. Submenu-BG #f9f9f9 → weiss; padding 80px 0 32px →
   0; border-bottom 1px #e5e5e5 → 0 (separator kommt von LI in Section F).
   .hitop-nav-desktop-only display:none + Pill-Neutralisierung sind in Section F.
   ========================================================================== */
/* Desktop-only Items im Overlay verstecken — bleibt als einzelne Regel weil
   ohne Media-Query (sollte auch greifen wenn Desktop-Layout grade umschaltet). */
.hitop-nav.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .hitop-nav-desktop-only {
	display: none !important;
}

/* ==========================================================================
   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 {
		/* 2026-05-28 QW13 (Anpassungen-XLSX): "Buttonhöhe etwas vergrößern".
		 * Vorher 8/24 + 14px (Compact-Fix). Jetzt 16/32 + 16px für spürbar
		 * größeren CTA. Override hier wegen Block-Supports-Specificity. */
		padding: 16px 32px !important;
		font-size: 16px !important;
	}
	.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.
   ========================================================================== */
/* 2026-05-28 QW7-revert (Annotation mppdvbag → User-Klarstellung):
 * Newsletter-Banner ZURÜCK auf volle Breite (alignfull). Width/max-width
 * Constraints entfernt — Cover füllt wieder 100vw. Höhe bleibt 621px
 * via Pattern-Inline-Style. */
.hitop-newsletter {
	position: relative;
	overflow: hidden;
}

/* 2026-05-28 Item 17 (Anpassungen-XLSX): "Wissensseiten — Abstände
 * verringern zwischen allen Modulen". Section-spacing global ist
 * clamp(3rem, 6vw, 6.25rem) = 48-100px je nach Viewport. Auf Wissen-Pages
 * stapeln sich 6+ Sections, das wirkt zu luftig. Override: 32-64px max,
 * gilt nur für single-wissen Template. */
body.single-wissen .hitop-section {
	padding-block: clamp(2rem, 4vw, 4rem) !important;
}
/* 2026-06-11 (Annotation mq9ovvrh): Newsletter-Cover darf KEIN Section-Top/Bottom-
   Padding haben. Die Kompakt-Variante (Wissen/Blog) stellt das Overlay auf
   position:relative (in-flow, damit der Cover mit dem Inhalt waechst) — dadurch
   respektiert es das o.g. .hitop-section padding-block und wird oben/unten ~58px
   eingerueckt, sodass das Hintergrundbild als Spalt ueber/unter dem weissen Overlay
   hervorlugt. Padding 0 => Overlay buendig bis Cover-Ober-/Unterkante (Figma
   1626:928 / 1104:2077). Muss NACH der .hitop-section-Regel stehen (gleiche
   Spezifitaet, spaeter gewinnt). */
body.single-wissen .hitop-newsletter,
body.single-post .hitop-newsletter {
	padding-block: 0 !important;
}
/* 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;
}

.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;

}
.hitop-newsletter .hitop-newsletter__overlay > * {
	max-width: 758px; /* Figma: Frame 2 Breite innerhalb des Overlays */
	width: 100%;
}

/* Tablet (<=1024px): Overlay füllt komplette Section-Breite, Form bekommt Luft.
 * Fix 2026-05-12 (mp2mwoel/mp2mwvp8): Bei viewport 855px war Overlay nur 452px breit
 * (52.83% × 855 = 451px), Padding 49px+106px = 155px → Form-Innenraum 297px.
 * Form-Felder + Consent-Text wurden abgeschnitten/gequetscht. */
@media (max-width: 1024px) {
	.hitop-newsletter .hitop-newsletter__overlay {
		width: 100%;
		padding: 60px 32px !important;
		gap: 32px;
		background: rgba(255, 255, 255, 0.85);
	}
	.hitop-newsletter .hitop-newsletter__overlay > * {
		max-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;
}

.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;
}

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

.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);
}

.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;
}

.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);
}

.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;
}
/* Newsletter-Button = Tertiary-Style (Pin mp7x358j 2026-05-16):
 * white BG + anthrazit Text + 1px anthrazit Border + weight 400 + padding 10/30
 * + radius 100 (Pill). Matched zu .is-style-hitop-tertiary (Zeile ~8635). */
.hitop-newsletter .hitop-newsletter-inline-form__button {
	align-self: flex-start;
	background: var(--wp--preset--color--white, #FFFFFF);
	color: var(--wp--preset--color--dark-anthrazit, #2C2C2C);
	border: 1px solid var(--wp--preset--color--dark-anthrazit, #2C2C2C);
	padding: 22px 25px;
	border-radius: 100px;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0;
	cursor: pointer;
	font-family: inherit;
	font-size: 16px;
	line-height: 1;
	box-shadow: var(--wp--preset--shadow--button, 0 4px 8px rgba(0,0,0,0.35));
	transition: color 0.15s, border-color 0.15s, box-shadow 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--white, #FFFFFF);
	color: var(--wp--preset--color--brand-primary, #D83F27);
	border-color: var(--wp--preset--color--brand-primary, #D83F27);
	outline: none;
}
.hitop-newsletter .hitop-newsletter-inline-form__button:active {
	box-shadow: 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) {

	.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;
	}

	.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: 22/25 (Master-Pill-Spec), outlined white + border #2C2C2C, radius 100,
	   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: 22px 25px;
		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" */
}

/* Tablet + Mobile (<=1024px): Columns stacken, sonst wird die rechte Text-Spalte
 * auf 120px zerquetscht weil das Bild flex-basis:600px hat. Annotation mp2mu5me
 * 2026-05-12: User-Komplaint "nicht gut" bei viewport 855px. */
@media (max-width: 1024px) {
	.hitop-hero-v2 .wp-block-columns {
		flex-direction: column !important;
		gap: 32px !important;
	}
	.hitop-hero-v2 .wp-block-column[style*="flex-basis:600px"],
	.hitop-hero-v2 .wp-block-column[style*="flex-basis: 600px"] {
		flex-basis: 100% !important;
	}
	.hitop-hero-v2 .wp-block-column {
		flex: 1 1 100% !important;
	}
}

/* Hero V2: Desktop-Padding (110/134) ist mobil zu groß -> großer Leerraum
   unter dem Sticky-Header (agent-pin mqasa8x6 2026-06-12). */
@media (max-width: 781px) {
	.hitop-hero-v2 {
		padding-top: 32px !important;
		padding-bottom: 40px !important;
	}
}

/* Online-Vortrag-CTA (Apotheken/Aerzte): Figma-Desktop-Padding (links 201px)
   zerquetscht den Text auf Mobil -> Bild zuerst, Text-Panel mit mobilem
   Padding (agent-pin mqas9f2k 2026-06-12). */
@media (max-width: 781px) {
	.hitop-online-vortrag-cta .wp-block-columns {
		flex-direction: column-reverse !important;
		gap: 0 !important;
	}
	.hitop-online-vortrag-cta .wp-block-column.has-light-grey-background-color {
		padding: 40px 24px 48px !important;
	}
	.hitop-online-vortrag-cta .wp-block-column h2 {
		font-size: 26px !important;
	}
}

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

/* ==========================================================================
   HERO V1 (Home, Produkt-Landings) — Tablet Stack
   Tablet-Optimierung 2026-05-12 (Triage-Findings): Bei viewport 855px
   wurde die H1 "Kribbeln, Brennen oder taube Füße?" auf nur 300px
   gequetscht und wrapte auf 4 Zeilen. Mobile-Stack-Regeln (bisher nur
   <=781px) jetzt auch für Tablet aktiv. Wie bei Hero-V2 (s.o.).
   ========================================================================== */
@media (min-width: 782px) and (max-width: 1024px) {
	/* Cover als Stack: Bild oben + Card unten, statt Overlay-Layout */
	.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 Block oben (höher als Mobile da Tablet) */
	.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: 420px !important;
		object-fit: cover !important;
	}

	.hitop-hero-split-card .wp-block-cover__background,
	.hitop-hero-product-cover .wp-block-cover__background {
		display: none !important;
	}

	.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;
	}

	.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: weißer BG (statt rgba), Padding mehr als Mobile */
	.hitop-hero-split-card .wp-block-column.has-background,
	.hitop-hero-product-cover .wp-block-column.has-background {
		background: #fff !important;
		padding: 48px 40px 56px !important;
		flex-basis: 100% !important;
	}
}

/* ==========================================================================
   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;
	}

	.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;
	}

	.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;
	}

	.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.
	 * Stack-Regel via 1024er-MQ (siehe weiter unten in dieser Datei) — bei 781-1024
	 * blieb Bild-Spalte sonst auf flex-basis:600px und H1-Spalte wurde auf <120px
	 * zerquetscht (Annotation mp2mu5me 2026-05-12).
	 */

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

	/* ==================== 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 (Pin mp478af9 2026-05-13) =========
	 * Figma 1104:1677: 4 Cards a 300x150, vertikal gestackt, gap 25px.
	 * Jede Karte fix 300x150, Logo zentriert per object-fit. */
	.hitop-trust-row .hitop-trust-row__items {
		flex-direction: column !important;
		align-items: center !important;
		gap: 25px !important;
	}
	.hitop-trust-row .hitop-trust-row__item--badges {
		flex-direction: row !important;
		flex-wrap: nowrap !important;
		justify-content: center !important;
		gap: 12px !important;
	}
	.hitop-trust-row .hitop-trust-row__item {
		flex: 0 0 150px !important; /* basis = main-axis = HEIGHT in column flex */
		width: 300px !important;
		max-width: 100% !important;
		height: 150px !important;
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
	}
	.hitop-trust-row .hitop-trust-row__item img {
		max-width: 100% !important;
		max-height: 100% !important;
		width: auto !important;
		height: auto !important;
		object-fit: contain !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;
}

/* Pin mp49a0ow 2026-05-13: SVG-Icons sind 51-71px breit, alle 54 hoch (variable
 * Aspect-Ratio). Inline-Style "width:54px;height:54px" zwingt sie auf 1:1 →
 * sah aus wie "abgeschnitten" (Letterbox/Squash je nach preserveAspectRatio).
 * CSS override: height fix 54, width auto → echtes Figma-Verhaeltnis. */
.hitop-vorteile-grid .wp-block-image img,
.hitop-vorteile-grid figure img {
	width: auto !important;
	height: 54px !important;
	max-width: 100% !important;
}

/* Pin mp49a0ow: Grid hat gap:24px, aber WP-is-layout-flow injiziert ZUSAETZLICH
 * margin-block-start:24px auf konsekutive Kinder. In Grid-Context addiert sich
 * das zum Gap → effektiv 48px Abstand zwischen Cards, 2. Karte "weiter unten". */
.hitop-vorteile-grid > * + * {
	margin-block-start: 0 !important;
}

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

.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;
}

/* 2026-06-09 (Pastel #25, Yanick „Bilder einpassen"): Wenn das Card-Bild einen
   Link-Wrapper hat (linkDestination != none, z. B. Symptom-Ueberblick-Carousel),
   ist der inline-<a> nur so breit wie das Bild (gemessen 281px) → das img-
   width:100% darunter greift nur auf den schmalen Link, nicht auf die 379px-
   Card. Link auf block + 100% stellen, damit Link UND Bild die Card fuellen.
   Karten ohne Link (Merkmale) haben kein <a> → unberuehrt. */
.hitop-card-symptom .hitop-card-symptom__image a {
	display: block;
	width: 100%;
}

.hitop-card-symptom .hitop-card-symptom__image img {
	display: block;
	width: 100%;
	/* 2026-06-09 User „alle Karten gleiche Bildhöhe 187px": war aspect-ratio 3/2
	   (= 234px) → auf die einheitliche Card-Bildhöhe 187px (s. SSOT-Block unten). */
	height: 187px;
	object-fit: cover;
	object-position: center;
}

/* 2026-06-09 (Pastel #26, Yanick „Cards Groesse anpassen" / User „Buttons nicht
   unten ausgerichtet"): Die Symptom-Cards sind dank Slider-Stretch gleich hoch,
   aber die „Mehr erfahren"-CTA klebte direkt unter dem unterschiedlich langen
   Beschreibungstext → CTAs landeten auf verschiedener Hoehe (Spread 32px). Card
   + Content als Flex-Spalte, CTA via margin-top:auto an den Card-Boden → alle CTAs
   buendig (gemessen: Spread 0). CTA-Absatz hat inline-margin → !important noetig.
   Cards ohne CTA (Merkmale) haben kein .has-brand-primary-color → unberuehrt.
   Wirkt nur wenn die Card hoehen-stretched ist (Slider/Grid); sonst kein Slack. */
.hitop-card-symptom {
	display: flex;
	flex-direction: column;
}
.hitop-card-symptom .hitop-card-symptom__content {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
}
/* CTA an den Card-Boden: 2026-06-09 „Mehr erfahren" von Text-Link (.has-brand-
   primary-color) auf echten is-style-hitop-secondary Button (.hitop-card-symptom__cta)
   umgestellt → beide Selektoren targeten, damit Bottom-Align (#26) weiter greift. */
.hitop-card-symptom .hitop-card-symptom__content > .has-brand-primary-color,
.hitop-card-symptom .hitop-card-symptom__content > .hitop-card-symptom__cta {
	margin-top: auto !important;
}

/* ==================== ERFAHRUNGSBERICHTE 3-CARDS (Equal-Height) ====================
 * User-Feedback mq4n9dvl 2026-06-08: "die Karten sollten die gleiche Hoehe haben".
 * Video-Cards in wp:columns: die Spalten stretchen (Flex-Default), aber die Card-Box
 * fuellt die Spaltenhoehe nicht ohne explizites height:100%. Media bleibt 16:9 oben,
 * der Body waechst -> alle 3 Karten gleich hoch (Bottom-Alignment).
 */
.hitop-erfahrungsberichte__grid {
	align-items: stretch;
}
.hitop-erfahrungsberichte__grid > .wp-block-column {
	display: flex;
	flex-direction: column;
}
.hitop-erfahrungsberichte__grid > .wp-block-column > .hitop-video-card {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	height: 100%;
}

/* ---------- Card-Expertise + Card-Beratung-Location ----------
 * Drift-Cleanup 2026-05-14 (User-Report 'Bilder ungueltiger Inhalt'):
 * Pattern hatte aspect-ratio + object-fit inline am img → Block-Validator
 * meldete Drift (Save() generiert keine inline-styles am img). Sizing nun
 * via CSS, Pattern-Source liefert nur figure mit has-custom-border + Radius.
 */
.hitop-card-expertise > .wp-block-image,
.hitop-card-expertise .hitop-card-expertise__photo {
	width: 100%;
	max-width: 100%;
	margin: 0;
}

.hitop-card-expertise .hitop-card-expertise__photo img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 335 / 239;
	object-fit: cover;
	object-position: center;
}

.hitop-card-beratung-location > .wp-block-image,
.hitop-card-beratung-location .hitop-card-beratung-location__logo {
	width: 100%;
	max-width: 100%;
	margin: 0;
}

.hitop-card-beratung-location .hitop-card-beratung-location__logo img {
	display: block;
	width: 100%;
	height: auto;
	object-fit: contain;
	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;
	/* Pin mpatx34q (2026-05-18): User revert — "element doch nicht eingrueckt!".
	 * 960px-Constraint von Pin mp7xkgo7 (16.05.) zurueckgezogen, Cards-Container
	 * nutzt jetzt volle alignwide(1328px). Reusable .hitop-content-narrow bleibt
	 * fuer andere Sektionen verfuegbar (siehe unten). */
}

/* Global re-usable: schmaler Content-Container fuer "eingerueckte" Sektionen
 * (Price-Cards, gesammelte CTAs etc.) — kleiner als alignwide(1328px). */
.hitop-content-narrow {
	max-width: 960px;
	margin-inline: auto;
}

.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 (rote Brand-Haken statt Standard ul-Disc) — 2 Varianten:
 *
 * `.hitop-preis-checks`: ursprünglich für Preis-USPs, inline-block + center.
 * `.hitop-check-list`: generisch für Body-Content (Lesefluss-Listen in Blog/
 *                      Wissen, max-width-Reading-Column kompatibel, list-style
 *                      Lesefluss-natural). 2026-05-20 ergänzt fuer Post 2459
 *                      Softdrinks-Alternativen-Liste. */
.hitop-preis-checks,
.hitop-check-list {
	list-style: none !important;
	padding-left: 0 !important;
}

.hitop-preis-checks {
	margin: 0 auto;
	text-align: left;
	display: inline-block;
}

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

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

.hitop-check-list li {
	margin-bottom: 12px;
}

.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;
	/* 2026-06-02: lange URLs (z.B. Google-Analytics-Link in der DSE) brechen statt Mobile-Overflow zu erzeugen. */
	overflow-wrap: anywhere;
}

/* 2026-06-28: KEINE Auto-Silbentrennung in Content-Headings — hyphens:auto zerlegte normale
   Wörter wie "Brennen" -> "Bren-nen" in der Home-Hero-H1 auf Mobil (User-gemeldet).
   overflow-wrap:break-word bleibt als Schutz NUR für echte Bandwurmwörter
   (z.B. "Datenschutzerklärung") gegen horizontalen Mobile-Overflow. */
.wp-block-post-content h1.wp-block-heading,
.wp-block-post-content h2.wp-block-heading {
	overflow-wrap: break-word;
	hyphens: manual;
}

.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;
}

.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) {
	/* 2026-05-27 Mobile-Overflow-Fix: Hero-Pattern hat width:600px inline-style
	 * auf der linken Bild-Spalte (flex-basis:600px) + width=600 height=400 auf
	 * post-featured-image. Auf mobile pushed das die Spalte über die Viewport-
	 * Breite raus → horizontal scroll. Fix: Column auf 100% zwingen + Bild-
	 * Wrapper auch. */
	.hitop-blog-hero .wp-block-columns > .wp-block-column {
		flex-basis: 100% !important;
		width: 100% !important;
		max-width: 100% !important;
	}

	.hitop-blog-hero .hitop-blog-hero__image,
	.hitop-blog-hero .hitop-blog-hero__image img {
		width: 100% !important;
		max-width: 100% !important;
		height: auto !important;
	}

	.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;
}

.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%;
}

/* agent-pin mq0nhsg3 "1326 Breite" (H1) + mq0nie5f "auch 1328 Breite" (Intro):
 * Blog-Hero-Titel + Intro auf volle Content-Breite 1328 (vorher H1 1080 / Intro
 * 720). Beide zentriert (margin-inline:auto) -> selber linker Rand, keine
 * Sonder-Margins noetig (ersetzt den frueheren 720-links-Hack). */
.hitop-blog-archive-hero h1 {
	max-width: 1328px;
}

/* Pastel #7 (Justus „Einzug anpassen?", User-Spec „muss 1100", „wie sonst auch
 * immer"): Blog-Hero-Subline auf 1100 EINGERÜCKT — exakt die projektweite
 * „1100 eingerückt"-Konvention (Z.10757 / Z.10772): max-width = Content-Width-Token
 * + margin-inline:auto = ZENTRIERT (sichtbarer Einzug links UND rechts, l≈212).
 * H1 bleibt volle 1328 Breite. */
.hitop-blog-archive-hero p {
	max-width: var(--hitop-content-width, 1100px);
	margin-left: auto;
	margin-right: auto;
}

.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: 100px;
	padding: 22px 25px;
	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;
}

/* Callout-Variante --important (Figma 3168-3412 exakt umgesetzt):
 * - Background: rgba(216,63,39,0.1) = Brand-Primary 10% Alpha (helles Rose/Orange)
 * - Border-Radius: 30px
 * - Inline-Layout: kleiner Outline-Icon (brand-primary, 24px) + Text rechts
 * - Kein Pill-Background mehr — Icon ist outline-alert-circle inline.
 *
 * Override gegen die has-light-grey-background-color-Klasse aus dem Markup
 * (--important kommt nach light-grey im selector). */
.hitop-blog-callout.hitop-blog-callout--important.has-light-grey-background-color,
.hitop-blog-callout.hitop-blog-callout--important {
	background: rgba(216, 63, 39, 0.10) !important;
	padding: 20px 32px !important;
	margin: 32px auto !important;
	/* 2026-05-26 Annotation mpmqgjua: Callout muss in Reading-Column-Grid
	 * sitzen (1100px), nicht full-bleed durch die Section. Reading-Column-
	 * Rule oben (Z.5197ff) excludiert [class*="hitop-"] — Override hier. */
	max-width: var(--hitop-content-width, 1100px);
	box-sizing: border-box;
}

.hitop-blog-callout--important .hitop-blog-callout__inner {
	display: flex;
	align-items: center;
	gap: 12px;
}

.hitop-blog-callout--important .hitop-blog-callout__icon {
	flex-shrink: 0;
	display: inline-flex;
	color: var(--wp--preset--color--brand-primary, #D83F27);

	background: transparent;
	padding: 0;
}

.hitop-blog-callout--important .hitop-blog-callout__icon svg {
	width: 24px;
	height: 24px;
	display: block;
}

.hitop-blog-callout--important .hitop-blog-callout__text {
	font-size: var(--wp--preset--font-size--md);
	font-weight: 300;
	line-height: 1.5;
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--dark-anthrazit, #2C2C2C);
	margin: 0;
	flex: 1;
}

@media (max-width: 781px) {
	.hitop-blog-callout.hitop-blog-callout--important {
		padding: 20px 24px !important;
	}
	.hitop-blog-callout--important .hitop-blog-callout__inner {
		align-items: flex-start;
		gap: 10px;
	}
	.hitop-blog-callout--important .hitop-blog-callout__icon svg {
		width: 20px;
		height: 20px;
		margin-top: 2px;
	}
}

/* --- 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) ---- */

.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: auto;
	max-width: 130px;
	height: 80px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto;
}

.hitop-wissen-usp-row__icon svg {
	height: 80px;
	width: auto;
	max-width: 100%;
	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: 6px;
	width: 22px;
	height: 18px;
	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 22 18' fill='none'%3E%3Cpath d='M2 9h17M12 2l8 7-8 7' 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 22 18' fill='none'%3E%3Cpath d='M2 9h17M12 2l8 7-8 7' 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;
}
/* 2026-06-01: Video-Rundung via overflow statt Inline-Radius am <video>.
   Das Inline style="border-radius:30px" am <video> wich von core/video save()
   ab (Block-Validation-Fehler). Jetzt: Radius nur auf der <figure> (canonical),
   overflow:hidden clippt das Video auf die runden Ecken. */
.hitop-wissen-text-video-cta__video {
	overflow: hidden;
}

/* 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-was-ist .wp-block-image img,
.hitop-wissen-text-media .wp-block-image img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 864 / 699;
	object-fit: cover;
}

/* Mobile: Cover-Split-Layout aufloesen — Cols stacken (WP default tut das
 * schon), aber 200px/109px Padding aus Figma-Desktop-Spec muss reset werden,
 * sonst kollabiert die Spalte auf ~84px Content-Breite und der Text wird
 * 2000px+ hoch. */
@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%;
	}

	/* Figma Mobile 3139:4254: Bild OBEN, Light-Grey-Text-Card UNTEN.
	 * Desktop hat Text-Spalte links + Bild rechts — wir kehren auf Mobile
	 * die Reihenfolge um. */
	.hitop-wissen-was-ist .wp-block-columns {
		flex-direction: column-reverse !important;
		gap: 0 !important;
	}
	.hitop-wissen-was-ist > .wp-block-columns > .wp-block-column,
	.hitop-wissen-was-ist .wp-block-column {
		flex-basis: 100% !important;
		width: 100% !important;
		padding-left: var(--wp--preset--spacing--gutter) !important;
		padding-right: var(--wp--preset--spacing--gutter) !important;
		padding-top: 40px !important;
		padding-bottom: 40px !important;
	}
	/* Image-column kein extra padding, soll bis zum Rand */
	.hitop-wissen-was-ist .wp-block-column:has(> figure),
	.hitop-wissen-was-ist .wp-block-column:nth-child(2) {
		padding: 0 !important;
	}
}

/* --- Blog Mehr-Lesen: Carousel-Inset + Subline-Gap (Figma 3168-3261) ---
 * Figma: Cards 102px eingerueckt vs Heading/Subline (left 302 vs left 200
 * in 1728-Container). Plus deutlich groesserer Gap Subline→Carousel
 * (~90px). 2026-05-20 User-Korrektur "Karten muessten eingerueckt sein
 * und deutlich mehr abstand zur eyebrow". */
.hitop-blog-mehr-lesen .hitop-post-carousel,
.hitop-wissen-mehr-lesen .hitop-post-carousel {
	/* 2026-06-08 User: Slider MIT Pfeilen auf volle regulaere Breite (1328);
	   der Karten-Track wird separat auf 1100 zentriert (Pfeile flankieren
	   ausserhalb der Karten). War vorher margin-inline:102 (Slider gesamt schmal).
	   2026-06-11 FIX: 0 -> auto. single-wissen.html hat <main>/post-content layout:default
	   (flow, NICHT constrained wie single.html) -> der max-width:1328-Slider wird vom
	   Eltern-Layout nicht zentriert und klebt links (sichtbar ab ~1500px Viewport). auto
	   zentriert ihn selbst; auf Blog (constrained 1328-Parent) bleibt es effektiv 0. */
	margin-inline: auto !important;
	margin-top: 80px !important;
}
/* Karten-Track auf 1100 zentriert, ABER Viewport bleibt volle Slider-Breite:
   die Pfeile sind position:absolute; left/right:12px relativ zum Viewport, also
   schiebt max-width sie faelschlich mit rein. Stattdessen die Karten per
   padding-inline auf 1100 einruecken -> Pfeile (12px vom Viewport-Rand) sitzen
   ausserhalb der Karten an der vollen Breite. */
.hitop-blog-mehr-lesen .hitop-post-carousel .hitop-slider__viewport,
.hitop-wissen-mehr-lesen .hitop-post-carousel .hitop-slider__viewport {
	max-width: none;
	padding-inline: max(12px, calc((100% - 1100px) / 2)) !important;
}

@media (max-width: 1024px) {
	.hitop-blog-mehr-lesen .hitop-post-carousel,
	.hitop-wissen-mehr-lesen .hitop-post-carousel {
		margin-inline: 0 !important;
		margin-top: 48px !important;
	}
}

/* Pastel #52 (Yanick) /brennende-fuesse/ — der „Blog/Mehr-Lesen"-post-carousel
 * auf Symptom-Seiten liegt in `.hitop-template-symptom-blog` (NICHT in
 * blog-/wissen-mehr-lesen, die ihre Karten bewusst auf 1100 einrücken). Hier
 * No-Peek wie bei carousel-2/3v2: Viewport = Karten-Box via margin-inline-Gutter
 * (statt padding-inline, das den 4.-Karten-Peek im Gutter zeigte) → overflow
 * clippt am Kartenrand. Pfeile sind per render.php jetzt ausserhalb des Viewports
 * (Slider-Kinder) → sitzen im margin-Gutter, verdecken keine Karte mehr. */
@media (min-width: 782px) {
	.hitop-template-symptom-blog .hitop-post-carousel .hitop-slider__viewport {
		max-width: none !important;
		padding-inline: 0 !important;
		margin-inline: 4.5rem !important;
	}
}

/* Pastel #60 / „Buttons nicht unten ausgerichtet": Mehr-Lesen + carousel-cards-2
 * Karten (hitop-card-2) sind gleich hoch (Slider-Stretch), aber der CTA klebte
 * direkt unter dem unterschiedlich langen Text → CTAs auf verschiedener Höhe.
 * Content-Group als Flex-Spalte füllen + Buttons margin-top:auto → CTAs bündig
 * am Card-Boden (analog #26 Symptom-Cards). Gilt überall wo hitop-card-2 rendert. */
.hitop-card-2 > .wp-block-group {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
}
.hitop-card-2 > .wp-block-group > .wp-block-buttons {
	margin-top: auto;
}

/* --- 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;
}

/* --- Pin mpatzvq9 + mpau0kfn + mpatycz8 (2026-05-18): Blog-Grid Polish ------
 * mpatzvq9: Bilder auf gesamte Card-Breite (vorher ~485px in 652px Card).
 * mpau0kfn: Bilder ohne eigene radius — Parent .hitop-card hat radius:30px
 *           + overflow:hidden, der die oberen Ecken automatisch clipt.
 * mpatycz8: Blog-Carousel auf ~1120px eingerueckt (H2 + Subline + Button
 *           bleiben alignwide @ 1328px). */
.hitop-blog-grid .hitop-card .wp-block-image,
.hitop-blog-grid .hitop-card-2 .wp-block-image,
.wp-block-hitop-carousel-cards-2 .hitop-card .wp-block-image,
.wp-block-hitop-carousel-cards-2 .hitop-card-2 .wp-block-image {
	margin: 0;
	width: 100%;
}

.hitop-blog-grid .hitop-card .wp-block-image img,
.hitop-blog-grid .hitop-card-2 .wp-block-image img,
.wp-block-hitop-carousel-cards-2 .hitop-card .wp-block-image img,
.wp-block-hitop-carousel-cards-2 .hitop-card-2 .wp-block-image img {
	display: block;
	width: 100%;
	/* 2026-06-09 User: war aspect-ratio 3/2 (variabel ~240-280px) → einheitliche
	   Card-Bildhöhe 187px (s. SSOT-Block unten). */
	height: 187px;
	object-fit: cover;
	border-radius: 0;
}

.hitop-blog-grid > .hitop-slider,
.hitop-blog-grid > .wp-block-hitop-carousel-cards-2 {
	max-width: 1120px;
	margin-inline: auto;
}

/* --- 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;
}

/* ============================================================
 * CONTENT-CARD BILD-VEREINHEITLICHUNG — SSOT (User 2026-06-09)
 * „Haben die unterschiedlichen Karten mit Bild/Text/CTA alle die
 *  gleiche Bildhöhe (187px)? Selbst die ohne CTA?" → JA, ab hier.
 * Referenz = Mehr-Lesen hitop-card-2 (187px, Figma 550/187). Diese
 * Regel ist die Single-Source-of-Truth und überschreibt die früher
 * verstreuten aspect-ratio-Werte (blog-grid/carousel 3:2 = 234-280px,
 * symptom 3:2 = 234px, blog-category 4:3 = 259px) zentral auf 187px.
 * object-fit:cover croppt, die Breite folgt der Card.
 * !important nötig: höher-spezifische Kontext-Regeln (carousel-3v1/3v2,
 * symptom-landing post-carousel) + Cross-Stylesheet (blog-category
 * style.scss). Gilt für ALLE „Bild+Text(+CTA)"-Karten, auch ohne CTA. */
.hitop-card-2 .wp-block-image img,
.hitop-card-symptom .hitop-card-symptom__image img,
.hitop-blog-category-section__card-image,
.hitop-blog-category-section__card-image img {
	height: 187px !important;
	aspect-ratio: auto !important;
	object-fit: cover;
	object-position: center;
}
.hitop-blog-category-section__card-image {
	overflow: hidden;
}
.hitop-blog-category-section__card-image img {
	width: 100%;
	display: block;
}

/* ============================================================
 * CARD-ABSTÄNDE + CTA-UNTEN (SSOT) — User 2026-06-09
 * (1) Bild→Headline einheitlich 30px. War uneinheitlich: card-2 57px
 *     (figure-Margin 19.6 + pad 16 + h3-Margin 21.2), symptom 40px
 *     (Block-Gap 24 + pad 16), Home-Blog .hitop-card 40px, blog-category
 *     16px. Hier zentral: alle „Störer" (figure-Margin, h3-Margin,
 *     Block-Gap) auf 0, Abstand = content padding-top 30px.
 * (2) CTA-Bottom-Align auch für .hitop-card in carousel-cards-2/blog-grid
 *     (Home-Blog) — die #60-Regel traf nur .hitop-card-2, deshalb war der
 *     Content-Container dort display:block → margin-top:auto wirkungslos
 *     → Buttons-Spread 88px. Jetzt flex-column wie bei card-2.
 * !important: überschreibt Inline-padding (16) + Theme-h3-Default + Block-Gap.
 * ============================================================ */

/* (1a) figure-Default-Margin raus */
.hitop-card-2 .wp-block-image,
.wp-block-hitop-carousel-cards-2 .hitop-card .wp-block-image,
.hitop-blog-grid .hitop-card .wp-block-image,
.hitop-card-symptom .hitop-card-symptom__image,
.hitop-blog-category-section__card-image {
	margin-bottom: 0 !important;
}

/* (1b) h3-Default-Margin raus */
.hitop-card-2 h3.wp-block-heading,
.wp-block-hitop-carousel-cards-2 .hitop-card h3.wp-block-heading,
.hitop-blog-grid .hitop-card h3.wp-block-heading,
.hitop-card-symptom h3.wp-block-heading,
.hitop-blog-category-section__card-title {
	margin-top: 0 !important;
}

/* (1c) Abstand Bild→Headline = content-group padding-top 30 (+ Block-Gap-Margin raus) */
.hitop-card-2 > .wp-block-group,
.wp-block-hitop-carousel-cards-2 .hitop-card > .wp-block-group,
.hitop-blog-grid .hitop-card > .wp-block-group,
.hitop-card-symptom .hitop-card-symptom__content,
.hitop-blog-category-section__card-body {
	padding-top: 30px !important;
	margin-top: 0 !important;
}

/* (2) CTA-Bottom-Align für .hitop-card (carousel-cards-2/blog-grid) —
   Content-Group flex-column füllen + Buttons margin-top:auto (analog #60). */
.wp-block-hitop-carousel-cards-2 .hitop-card > .wp-block-group,
.hitop-blog-grid .hitop-card > .wp-block-group {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
}
.wp-block-hitop-carousel-cards-2 .hitop-card > .wp-block-group > .wp-block-buttons,
.hitop-blog-grid .hitop-card > .wp-block-group > .wp-block-buttons {
	/* !important + logische Property: der is-layout-flow-Container setzt
	   margin-block-start:16px auf die Buttons, das überschrieb margin-top:auto. */
	margin-top: auto !important;
	margin-block-start: auto !important;
}

/* ============================================================
 * CAROUSEL-2 KEIN HALB-SICHTBARE-KARTE (User 2026-06-09)
 * Der 2-up carousel-cards-2 (z.B. Home-Blog) zeigte im Scroll-Modus
 * eine halb sichtbare nächste Karte im rechten Pfeil-Gutter: die Slides
 * füllen die um 72px (4.5rem) gepaddete Content-Box exakt, aber
 * overflow-x:clip clippt erst am Padding-Rand → die nächste Karte lugt
 * durch den Gutter. Fix: Gutter via margin-inline statt padding-inline →
 * Viewport = Karten-Box, overflow clippt am Kartenrand → kein Peek.
 * Pfeile sind dafür per render.php aus dem Viewport raus (Slider-Kinder)
 * → sitzen weiterhin im Gutter (left/right:0.75rem relativ zum Slider),
 * ungeclippt. Nur Desktop + Scroll-Modus (all-visible/Mobile unberührt). */
@media (min-width: 782px) {
	/* :not(.hitop-post-carousel): der dyn. Mehr-Lesen-Slider hat seine Pfeile im
	   Viewport (render.php) → margin-inline-Gutter würde sie auf die Karten ziehen
	   (= Pastel #52 Blog-Slider). post-carousel nutzt stattdessen die padding-inline-
	   Inset-Behandlung (Karten 1100, Pfeile außen). carousel-3v2 (#52 Expertenteam):
	   Pfeile per render.php jetzt außerhalb des Viewports → margin-inline klippt den
	   4.-Karten-Peek am Kartenrand statt im Padding-Gutter. */
	/* carousel-3v2 verwaltet No-Peek + Schattenraum jetzt selbst im Plugin
	   (carousel-cards-3v2/style.scss) — hier nur noch carousel-2 + cross-sells. */
	.hitop-slider.hitop-carousel-2:not(.hitop-slider--all-visible):not(.hitop-post-carousel) .hitop-slider__viewport,
	.hitop-slider.hitop-cross-sells-carousel:not(.hitop-slider--all-visible) .hitop-slider__viewport {
		padding-inline: 0;
		margin-inline: 4.5rem;
	}
}

/* (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: Override 2026-05-13 entfernt (war seit adc55e5/30.04. falsch:
   weight 900, Figma 1128:4911 sagt 300 closed / 700 open + underline).
   Korrektes Styling kommt aus plugin SCSS faq/style.scss (Card-Layout).
   Siehe .figma_compare/tokens/dumps/faq-1128-4911.json. */

/* 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%;
}

/* 2026-06-10 Pastel #64 + #51 (Figma 1331:4675): Mobil Bild OBEN (Gerät sichtbar,
 * linksbündig verankert, Höhe 264@440 = 60vw), Text auf WEISS darunter (gap 50px).
 * Vorher: Text oben, Cover-Bild 600px darunter zeigte nur rosa Hintergrund. */
@media (max-width: 781px) {
	.hitop-webshop-hero {
		display: flex;
		flex-direction: column;
		min-height: 0 !important;
	}
	.hitop-webshop-hero > .wp-block-cover__image-background {
		position: relative !important;
		inset: auto !important;
		order: 1;
		width: 100%;
		height: clamp(220px, 60vw, 300px) !important;
		object-fit: cover;
		object-position: left center !important;
	}
	.hitop-webshop-hero > .wp-block-cover__background {
		display: none;
	}
	.hitop-webshop-hero > .wp-block-cover__inner-container {
		position: relative;
		inset: auto;
		order: 2;
	}
	.hitop-webshop-hero .hitop-webshop-hero__overlay {
		position: relative;
		width: 100%;
		background: var(--wp--preset--color--white, #fff);
		padding: 50px 24px 64px !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;
}

/* 2026-06-11: Fakten-Slide Bilder auf Mobil. Der schmale Mobil-Banner (≈393×290)
   ist ein horizontaler Center-Crop des 1726×600-Querformat-Banners → bei Motiven,
   die links sitzen, schneidet 50%-Mitte das Motiv ab. physiotherapy: Therapeut +
   Behandlung sind links, Center zeigt nur den hochgelagerten Fuss → nach links rücken.
   leitlinien/anwender/chemo: Center passt (Motiv mittig bzw. ganzbreit). */
@media (max-width: 781px) {
	.hitop-slider-facts .hitop-fact-slide__bg[src*="physiotherapy"] {
		object-position: 18% 50%;
	}
}

/* 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;
	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;
	}
}

/* ==========================================================================
   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;
}

/* ============================================================================
 * DESIGN-SYSTEM SYNC — 2026-05-13
 * ----------------------------------------------------------------------------
 * Werte 1:1 aus Figma REST API extrahiert (.figma_compare/tokens/design-system.json).
 * Behebt 33 Live-Annotations vom 13.05.2026 (mp3pn… - mp3qh…) durch
 * globale Component-Classes statt page-spezifische Patches.
 *
 * Token-Quellen:
 *   - shadow.card:    0 4px 4px rgba(0,0,0,.25)  (Figma)
 *   - shadow.button:  0 4px 8px rgba(0,0,0,.35)  (Figma)
 *   - radius.card:    30px  (Figma)
 *   - radius.button:  34px  (Figma)
 *   - H2-section:     Inter 300 / 32px / lh 1.5 / ls -3% / #2C2C2C
 *   - Subline-22:     Inter 300 / 22px / lh 33-35 / ls 0 / #2C2C2C
 *   - Card-H3:        Inter 900 / 22px / lh 33 / ls -3% / #2C2C2C
 *   - Button-Label:   Inter 400 / 16px / lh 16 / UPPER
 *   - Buttons IMMER: padding 10/30 + radius 34 + shadow-button
 * ============================================================================ */

/* ---------- Section-Subline (Eyebrow unter/über H2) ----------
 * Figma: Inter 300 / 22px / lh 33 / color #2C2C2C
 * Ersetzt die alte UPPER-900-Eyebrow-Konvention überall wo Sublines unter
 * Section-H2 stehen. */
.hitop-section-subline,
.hitop-kalender-eyebrow {
	font-size: 1.375rem;
	font-weight: 300;
	line-height: 1.5;
	letter-spacing: 0;
	color: var(--wp--preset--color--dark-anthrazit);
	margin: 0 0 0.5rem;
}

/* Section-Title — globale H2-Klasse (kein Eyebrow-Style) */
.hitop-section-title,
.wp-block-heading.hitop-section-title {
	font-weight: 300 !important;
	font-size: var(--wp--preset--font-size--xl);
	line-height: 1.5;
	letter-spacing: -0.03em;
	color: var(--wp--preset--color--dark-anthrazit);
}
.hitop-section-title.is-on-brand,
.has-brand-primary-background-color .hitop-section-title {
	color: var(--wp--preset--color--white);
	line-height: 1.2;
}

/* ---------- Card-Shadow Token-Anwendung ----------
 * Alle .hitop-card-Varianten + .has-shadow nutzen den Card-Shadow-Token.
 * Annotation #6 (mp3posw8): "schatten links/rechts abgeschnitten" — Slider-Viewports
 * brauchen Padding um Card-Shadows nicht zu clippen. */
.hitop-card,
.wp-block-group.has-shadow,
.hitop-vorteile-grid > .wp-block-group {
	box-shadow: var(--wp--preset--shadow--card);
}

/* Slider-Viewports: nur padding-BLOCK für Card-Shadows (Pin mp3posw8 "schatten
 * links/rechts abgeschnitten"). padding-INLINE NICHT überschreiben — das kommt
 * aus slider-base.scss (4.5rem = 72px Gutter für Pfeil-Position außerhalb der
 * Cards, Figma 1104:1915). Pin mp40is6l + mp40jup1 2026-05-13: Pfeile außerhalb,
 * Cards eingerückt. */
.hitop-erfahrungsberichte .hitop-slider__viewport,
.hitop-slider .hitop-slider__viewport {
	padding-block: 12px;
}

/* ============================================================
 * BUTTON SYSTEM — Figma 763:3359 + 771:62 (SSOT v2)
 * ============================================================
 * 7 Style-Variations (registriert in inc/block-styles.php als
 * is-style-hitop-*) + Legacy-Aliase + State-Konvention.
 *
 * SPECIFICITY-TRICK: doubled-class (.wp-block-button__link.wp-block-button__link)
 * = 0,0,2,0 schlägt WP-Gutenberg-Default :root :where(.wp-element-button) = 0,0,1,0.
 * Kein !important nötig gegen WP-Core.
 *
 * INLINE-STYLES in post_content (style="font-weight:700; padding:20/30") schlagen
 * weiterhin diese Regeln (1,0,0,0). Werden in Pin-by-Pin-Fix-Phase per
 * parse_blocks-Roundtrip aus post_content extrahiert.
 *
 * Quelle: .figma_compare/tokens/design-system.json (SSOT v2)
 * ============================================================ */

/* Shared base — alle 7 Button-Klassen (Box/Radius/Shadow/Padding/UPPER)
 * SSOT 2026-05-18 (User-Korrektur Pin mpatvu7q-Folge): Padding 22/25 statt 10/30.
 * Vorher: 10/30 war aus Webshop-Popup-Button gemessen, falsche Figma-Frame-Quelle.
 * Jetzt: 22px vertikal / 25px horizontal — User-bestaetigt als Master-Pill-Spec.
 * Pattern-Inline-Overrides werden im selben Sprint entfernt damit dieser Wert
 * tatsaechlich greift (alte Inline-Styles haben hoehere Specificity). */
.wp-block-button.is-style-hitop-primary > .wp-block-button__link.wp-block-button__link,
.wp-block-button.is-style-hitop-secondary > .wp-block-button__link.wp-block-button__link,
.wp-block-button.is-style-hitop-tertiary > .wp-block-button__link.wp-block-button__link,
.wp-block-button.is-style-hitop-header-cta > .wp-block-button__link.wp-block-button__link,
.wp-block-button.is-style-hitop-sticky-primary > .wp-block-button__link.wp-block-button__link,
.wp-block-button.is-style-hitop-special-phone > .wp-block-button__link.wp-block-button__link,
.wp-block-button > .wp-block-button__link.wp-block-button__link,
.wp-block-button.is-style-secondary > .wp-block-button__link.wp-block-button__link,
.wp-block-button.is-style-tertiary > .wp-block-button__link.wp-block-button__link,
.wp-block-button.is-style-outline > .wp-block-button__link.wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 1.375rem 1.5625rem;
	border: 0;
	border-radius: 100px;
	box-shadow: var(--wp--preset--shadow--button);
	font-family: inherit;
	font-size: 1rem;
	line-height: 1;
	letter-spacing: 0;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: background .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease;
}

/* ---------- PRIMARY (Default für wp:button OHNE Style-Variation + is-style-hitop-primary) ---------- */
.wp-block-button > .wp-block-button__link.wp-block-button__link,
.wp-block-button.is-style-hitop-primary > .wp-block-button__link.wp-block-button__link {
	background: var(--wp--preset--color--brand-primary);
	color: var(--wp--preset--color--white);
	font-weight: 700;
}
.wp-block-button > .wp-block-button__link.wp-block-button__link:hover,
.wp-block-button.is-style-hitop-primary > .wp-block-button__link.wp-block-button__link:hover {
	background: var(--wp--preset--color--brand-hover);
}
.wp-block-button > .wp-block-button__link.wp-block-button__link:active,
.wp-block-button.is-style-hitop-primary > .wp-block-button__link.wp-block-button__link:active {
	box-shadow: none;
}

/* ---------- SECONDARY (Outline) — auch Mapping für Legacy is-style-secondary/-outline ----------
 * User-SSOT-Klärung 2026-05-13 Pin-Phase: `is-style-secondary` ist visuell die OUTLINE-Variante
 * (white BG + orange Border + orange Text + weight 700). NICHT die Soft-Variante. */
.wp-block-button.is-style-hitop-secondary > .wp-block-button__link.wp-block-button__link,
.wp-block-button.is-style-secondary > .wp-block-button__link.wp-block-button__link,
.wp-block-button.is-style-outline > .wp-block-button__link.wp-block-button__link {
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--brand-primary);
	border: 2px solid var(--wp--preset--color--brand-primary);
	font-weight: 700;
}
.wp-block-button.is-style-hitop-secondary > .wp-block-button__link.wp-block-button__link:hover,
.wp-block-button.is-style-secondary > .wp-block-button__link.wp-block-button__link:hover,
.wp-block-button.is-style-outline > .wp-block-button__link.wp-block-button__link:hover {
	color: var(--wp--preset--color--brand-hover);
	border-color: var(--wp--preset--color--brand-hover);
}
.wp-block-button.is-style-hitop-secondary > .wp-block-button__link.wp-block-button__link:active,
.wp-block-button.is-style-secondary > .wp-block-button__link.wp-block-button__link:active,
.wp-block-button.is-style-outline > .wp-block-button__link.wp-block-button__link:active {
	box-shadow: none;
}

/* ---------- TERTIARY (Soft) — auch Mapping für Legacy is-style-tertiary ----------
 * White BG + anthrazit Text + 1px anthrazit BORDER + weight 400.
 * Quelle: Figma 771:76 (strokes: #2C2C2C, strokeWeight 1, strokeAlign INSIDE).
 * Pin mp438hg1 2026-05-13: User-Korrektur "Tertiär ist mit grauer Outline" —
 * der 1px dark-anthrazit Border war in meiner CSS-Klasse gefehlt.
 * Hover: Color shift anthrazit → brand-primary (Border bleibt). */
.wp-block-button.is-style-hitop-tertiary > .wp-block-button__link.wp-block-button__link,
.wp-block-button.is-style-tertiary > .wp-block-button__link.wp-block-button__link {
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--dark-anthrazit);
	border: 1px solid var(--wp--preset--color--dark-anthrazit);
	font-weight: 400;
}
.wp-block-button.is-style-hitop-tertiary > .wp-block-button__link.wp-block-button__link:hover,
.wp-block-button.is-style-tertiary > .wp-block-button__link.wp-block-button__link:hover {
	color: var(--wp--preset--color--brand-primary);
	border-color: var(--wp--preset--color--brand-primary);
}
.wp-block-button.is-style-hitop-tertiary > .wp-block-button__link.wp-block-button__link:active,
.wp-block-button.is-style-tertiary > .wp-block-button__link.wp-block-button__link:active {
	box-shadow: none;
}

/* ---------- QUARTIERY (Text-Link) — separate Properties (kein shared-base hier) ---------- */
.wp-block-button.is-style-hitop-quartiery > .wp-block-button__link.wp-block-button__link {
	display: inline;
	background: transparent;
	color: var(--wp--preset--color--dark-anthrazit);
	padding: 0;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	font-size: 1rem;
	font-weight: 500;
	text-transform: none;
	text-decoration: underline;
	cursor: pointer;
}
.wp-block-button.is-style-hitop-quartiery > .wp-block-button__link.wp-block-button__link:hover {
	color: var(--wp--preset--color--brand-primary);
}

.wp-block-button.is-style-hitop-header-cta > .wp-block-button__link.wp-block-button__link {
	background: var(--wp--preset--color--dark-anthrazit);
	color: var(--wp--preset--color--white);
	padding: 0 1.25rem;
	border-radius: 17.5px;
	box-shadow: var(--wp--preset--shadow--card);   /* 0/4/4 #000@25% (NICHT button-shadow!) */
	font-weight: 600;
	text-transform: none;
	min-height: 35px;
}
.wp-block-button.is-style-hitop-header-cta > .wp-block-button__link.wp-block-button__link:hover {
	background: #000000;
}

.wp-block-button.is-style-hitop-sticky-primary > .wp-block-button__link.wp-block-button__link {
	background: var(--wp--preset--color--brand-primary);
	color: #F5F5F5;
	padding: 24px 30px;
	border-radius: 36px 0 0 36px;
	box-shadow: var(--wp--preset--shadow--card);
	font-weight: 600;
	font-size: 1.5rem;
	line-height: 1;
	text-transform: none;
}
.wp-block-button.is-style-hitop-sticky-primary > .wp-block-button__link.wp-block-button__link:hover {
	background: var(--wp--preset--color--brand-hover);
}
@media (max-width: 768px) {
	.wp-block-button.is-style-hitop-sticky-primary > .wp-block-button__link.wp-block-button__link {
		padding: 20px 24px;
		border-radius: 31px 0 0 31px;
		font-size: 1.375rem;
	}
}

/* ---------- SPECIAL PHONE (Icon-Sticky, asymm pill, light-grey) ---------- */
.wp-block-button.is-style-hitop-special-phone > .wp-block-button__link.wp-block-button__link {
	background: var(--wp--preset--color--grey);
	color: var(--wp--preset--color--white);
	padding: 1.375rem 1.5625rem;
	border-radius: 28.5px 0 0 28.5px;
	box-shadow: var(--wp--preset--shadow--card);
	text-transform: none;
}
.wp-block-button.is-style-hitop-special-phone > .wp-block-button__link.wp-block-button__link:hover {
	background: var(--wp--preset--color--brand-primary);
	border-radius: 30px 0 0 30px;
}

/* ---------- LEGACY .hitop-button-* CSS-Klassen (Backwards-Compat für direkte Klassen-Setzung) ----------
 * Patterns/Custom-Blocks die direkt `class="hitop-button-primary"` setzen statt
 * `is-style-hitop-primary`. Specificity doubled-class um WP-:where()-Trap zu schlagen.
 * Migration sukzessive — diese Block bleibt vorerst.
 */
.hitop-button-primary.hitop-button-primary {
	display: inline-flex; align-items: center; justify-content: center;
	background: var(--wp--preset--color--brand-primary);
	color: var(--wp--preset--color--white);
	padding: 1.375rem 1.5625rem;
	border: 0; border-radius: 100px;
	box-shadow: var(--wp--preset--shadow--button);
	font-weight: 700; font-size: 1rem; line-height: 1;
	text-transform: uppercase; text-decoration: none;
	cursor: pointer;
	transition: background .18s ease;
}
.hitop-button-primary.hitop-button-primary:hover {
	background: var(--wp--preset--color--brand-hover);
}

.hitop-button-secondary.hitop-button-secondary {
	display: inline-flex; align-items: center; justify-content: center;
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--brand-primary);
	border: 2px solid var(--wp--preset--color--brand-primary);
	padding: 1.375rem 1.5625rem;
	border-radius: 100px;
	box-shadow: var(--wp--preset--shadow--button);
	font-weight: 700; font-size: 1rem; line-height: 1;
	text-transform: uppercase; text-decoration: none;
	cursor: pointer;
	transition: background .18s ease, color .18s ease;
}
.hitop-button-secondary.hitop-button-secondary:hover {
	color: var(--wp--preset--color--brand-hover);
	border-color: var(--wp--preset--color--brand-hover);
}

/* Pin mpatvu7q (2026-05-18): User-confirmed — .is-on-primary = TERTIARY-Style.
 * Canonical Tertiary-Spec (siehe L8953): white BG + dark-anthrazit Text +
 * 1px dark-anthrazit Border + weight 400. Hover: Text + Border -> brand-primary.
 * Padding 22/25 matched zur Shared Base. */
.hitop-button-ghost.hitop-button-ghost,
.hitop-sc-trigger.is-on-primary.is-on-primary {
	display: inline-flex; align-items: center; justify-content: center;
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--dark-anthrazit);
	padding: 1.375rem 1.5625rem;
	border: 1px solid var(--wp--preset--color--dark-anthrazit);
	border-radius: 100px;
	box-shadow: var(--wp--preset--shadow--button);
	font-weight: 400; font-size: 1rem; line-height: 1;
	text-transform: uppercase; text-decoration: none;
	cursor: pointer;
	transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.hitop-button-ghost.hitop-button-ghost:hover,
.hitop-sc-trigger.is-on-primary.is-on-primary:hover {
	color: var(--wp--preset--color--brand-primary);
	border-color: var(--wp--preset--color--brand-primary);
}

/* .hitop-sc-trigger ohne .is-on-primary = default Primary-Style. Padding 22/25 matched. */
.hitop-sc-trigger:not(.is-on-primary).hitop-sc-trigger {
	display: inline-flex; align-items: center; justify-content: center;
	background: var(--wp--preset--color--brand-primary);
	color: var(--wp--preset--color--white);
	padding: 1.375rem 1.5625rem;
	border: 0; border-radius: 100px;
	box-shadow: var(--wp--preset--shadow--button);
	font-weight: 700; font-size: 1rem; line-height: 1;
	text-transform: uppercase; text-decoration: none;
	cursor: pointer;
}
.hitop-sc-trigger:not(.is-on-primary).hitop-sc-trigger:hover {
	background: var(--wp--preset--color--brand-hover);
}

/* ---------- Annotation #2 (mp3po9h1): Video-Card-Badge Position ----------
 * Badge soll im obersten-rechten Corner sitzen mit korrekter Pill-Form (kein
 * 4px-radius, sondern 21.5px Badge-radius). Browser-computed bottom/left sind
 * Folge von width:auto + nur top/right gesetzt — visuell OK, aber Pill-Radius
 * fixieren wir mit 21.5px für die Badge-Form. */
.hitop-video-card__badge {
	border-radius: var(--wp--custom--radius--badge, 21.5px);
}

/* ---------- Kalender-Termin-Section (Figma 1104:1744 GBO-Copy) ----------
 * Section: weisser Background, H2 "Kontaktieren Sie uns" + Subline oben,
 * darunter 50/50-Split: links Couple-Bild, rechts Card mit Brand-Border um SSA.
 */
.hitop-kalender-termin-inner {
	background: transparent;
}

.hitop-kalender-termin-inner > .wp-block-heading {
	font-weight: 300;
	color: var(--wp--preset--color--dark-anthrazit);
	font-size: var(--wp--preset--font-size--xl);
	line-height: 1.5;
	letter-spacing: -0.03em;
}

/* Kalender-Card: 1px orange-10 Border, 30px radius, weisser BG, drop-shadow.
 * Pin mp7x2mp4 2026-05-16 (User-suggestedChange):
 *   border 1px rgba(216,63,39,0.10), shadow 0 4px 4px 0 rgba(0,0,0,0.25).
 * Hoehe wird automatisch durch SSA-iframe (716px) ueberschrieben, Card waechst mit. */
.hitop-kalender-card {
	background: #ffffff;
	border: 1px solid rgba(216, 63, 39, 0.10);
	border-radius: var(--wp--custom--radius--card, 30px);
	box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
	padding: 32px 24px 24px;
	box-sizing: border-box;
	max-width: 550px;
	margin-inline: auto;
}

.hitop-kalender-card__title {
	font-family: var(--wp--preset--font-family--inter, Inter), sans-serif;
	font-weight: 300;
	font-size: 32px;
	line-height: 1.2;
	color: var(--wp--preset--color--dark-anthrazit);
	letter-spacing: -0.03em;
	margin: 0 0 8px;
}

.hitop-kalender-card__subtitle {
	font-family: var(--wp--preset--font-family--inter, Inter), sans-serif;
	font-weight: 300;
	font-size: 16px;
	line-height: 1.4;
	color: var(--wp--preset--color--dark-anthrazit);
	margin: 0 0 16px;
}

/* SSA-iframe innerhalb der Card: kein extra Border/BG (Card uebernimmt das) */
.hitop-kalender-card .ssa_booking_iframe {
	width: 100% !important;
	border: 0;
	background: transparent;
	display: block;
}

@media (max-width: 781px) {
	.hitop-kalender-card {
		padding: 24px 16px 16px;
		margin-top: 24px;
	}
	.hitop-kalender-card__title {
		font-size: 26px;
	}
}

/* ---------- Annotation #5 (mp3prc86): Footer-Legal Font-Size ----------
 * has-xs-font-size soll greifen; aber inheritance vom GROUP-Wrapper md überschreibt
 * das. Force den Figma-Wert (14px/lh21/ls-0.42 weight 300). */
.hitop-footer__bottom .hitop-footer__legal,
.hitop-footer__legal {
	font-size: 14px !important;
	font-weight: 300 !important;
	line-height: 21px !important;
	letter-spacing: -0.42px !important;
	color: var(--wp--preset--color--white) !important;
}

/* ---------- Annotation #7 (mp3ptr8c): H2 weight via theme.json default 300 ----------
 * Theme.json war 700, jetzt 300. Inline-style 300 wird nun nicht mehr überschrieben. */

/* ---------- Annotation #9 (mp3pvrd7) & #10 (mp3pwb8p): Symptom-Slider-Card ----------
 * Card BG soll halb-transparent sein (auf hellem Slider-BG soll der light-grey leicht
 * abgesetzt aussehen vom äußeren weißen BG der Section). */
.hitop-slider-symptoms .hitop-slider__slide .wp-block-column.has-light-grey-background-color {
	background: var(--wp--preset--color--light-grey) !important;
}
/* Mehr Erfahren Button auf Symptom-Card matches Secondary-Style (auto via .is-style-secondary) */

/* ---------- Annotation #12+#13 (mp3pzjb2+mp3pzpjx): Vorteile-Grid Card-Alignment ----------
 * Cards in Grid sollen exakt gleich hoch sein + Icon nicht abgeschnitten.
 * grid-auto-rows: 1fr macht das schon, aber Icons brauchen flex-shrink:0. */
.hitop-vorteile-grid .wp-block-image {
	flex-shrink: 0 !important;
	overflow: visible !important;
}
.hitop-vorteile-grid .wp-block-image img {
	display: block;
	max-width: 100%;
	height: auto;
}

/* ---------- Annotation #14 (mp3qevns/mp3q012u): Gut-zu-wissen Box-Spacing ----------
 * Klebt am Element darüber. Margin-top vergrößern. Section-Padding ist
 * separat — die Box braucht zusätzlichen Abstand. */
.hitop-gut-zu-wissen {
	margin-top: var(--wp--preset--spacing--lg) !important;
}

/* ---------- Pastel #54 (Yanick, Figma 1104:3562) — REVERSE Annotation #15 ----------
 * Yanick (Designer) hat das Design geaendert: Name "Professor Dr. Stephan Martin"
 * = orange + Black(900), Untertitel-<span.hitop-author-role> = Light(300).
 * War vorher (alte Anno #15) 300/anthrazit — Designer-SOLL gewinnt. */
.hitop-wissenschaft-block .wp-block-column:last-child p.has-brand-primary-color,
.hitop-wissenschaft-block .wp-block-column:last-child p[class*="has-brand-primary"] {
	font-weight: 900 !important;
	color: var(--wp--preset--color--brand-primary) !important;
	letter-spacing: -0.03em !important;
}
.hitop-wissenschaft-block .wp-block-column:last-child p.has-brand-primary-color .hitop-author-role {
	font-weight: 300 !important;
}

/* ---------- Annotation #16 (mp3q15ld): ✓ Ergebnis Color ----------
 * Strong-Tag mit inline-color brand-primary → "Ergebnis steht schwarz" feedback.
 * Figma: "Ergebnis:" weight 400 / 20px / #2C2C2C. ✓ separat als Icon. */
.hitop-ergebnis-box p strong[style*="brand-primary"],
.hitop-ergebnis-box p strong {
	color: var(--wp--preset--color--dark-anthrazit) !important;
	font-weight: 700 !important;
}

/* ---------- Annotation #17 (mp3q1iuw): Preis-Card li-Bullet ----------
 * Unicode "✓" kann je nach Font ungleichmäßig aussehen. SVG-Häkchen statt Unicode. */
.hitop-preis-checks li::before {
	content: "" !important;
	width: 16px;
	height: 12px;
	top: 0.55em !important;
	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;
	font-weight: 0 !important;
}

/* ---------- Annotation #18 (mp3q1swk): Preis-Card Button-Alignment ----------
 * 2 Preis-Cards nebeneinander; eine hat mehr Content (Bullets), die andere nicht.
 * Buttons sollen unten gleichbündig sein. */
.hitop-preis-card {
	display: flex !important;
	flex-direction: column !important;
	height: 100%;
}
.hitop-preis-card > .wp-block-buttons,
.hitop-preis-card > .wp-block-buttons:last-child {
	margin-top: auto !important;
	/* Pin mp7xma39 (2026-05-16): Mindestabstand zur Liste oben — vorher klebte
	 * der Button bei voller Mieten-Liste (7 Bullets) an der letzten Zeile. */
	padding-block-start: 32px;
}

/* ---------- Annotation #19 (mp3q2020): hr in Preis-Card weg ----------
 * Trennstrich soll laut Figma-Werten weg. */
.hitop-preis-card hr.wp-block-separator {
	display: none !important;
}

/* ---------- Annotation #20 (mp3q27f6): *Zufriedenheitsgarantie Color ----------
 * Figma: weight 400 / 18px / #000000. Aktuell light-anthrazit (zu hell). */
.hitop-home-produkt-teaser p.has-light-anthrazit-color,
.hitop-home-produkt-teaser p.has-text-align-center.has-light-anthrazit-color {
	color: var(--wp--preset--color--dark-anthrazit) !important;
}

/* ---------- Annotation #24 (mp3q50gi): Referent-Card Photo zu schmal ----------
 * Figma: photo 335px × 239px (ratio 1.4:1). Live-Card 425px → photo soll 303px hoch.
 * aspect-ratio auf <figure> greift nicht (WP setzt display:table für wp-block-image).
 * Padding-Bottom-Hack ist hier robuster: 239/335 = 71.34%.
 * Absolute-position img mit object-fit:cover füllt die Box komplett. */
.hitop-cards-referenten .hitop-referent-card__photo,
.hitop-expertenteam .hitop-referent-card__photo,
.hitop-referent-card__photo {
	display: block !important;
	position: relative !important;
	width: 100% !important;
	padding-bottom: 71.34% !important;
	height: 0 !important;
	overflow: hidden !important;
	margin: 0 !important;
}
.hitop-cards-referenten .hitop-referent-card__photo img,
.hitop-expertenteam .hitop-referent-card__photo img,
.hitop-referent-card__photo img {
	position: absolute !important;
	inset: 0 !important;
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	object-position: center top !important;
	display: block !important;
}

/* ---------- Über-uns Konsolidierung (2026-06-02): gbo-Heritage / Länder / Qualität / Vorstand ----------
 * Logo-Chips (Partner Siemens/Bosch/VDO + Zertifikate ISO 13485 / TÜV Süd / Made in Germany)
 * als weiße Karten + zentrierte Vorstand-Cards (Familie Keck). Quelle: Live /gbo-ag/.
 * Cards selbst nutzen die globale .hitop-referent-card-Photo-CSS (s.o.). */
.hitop-uu-logos {
	align-items: center;
}
.hitop-uu-logo-chip {
	display: flex !important;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	box-shadow: 0 4px 18px rgba(0, 0, 0, 0.06);
}
.hitop-uu-logo-chip .wp-block-image,
.hitop-uu-logo-chip figure {
	margin: 0 !important;
}
.hitop-uu-logo img {
	display: block;
	width: auto;
	height: 46px;
}
.hitop-uu-logo--cert img {
	height: 128px;
}
.hitop-uu-logo--made img {
	height: 52px;
}
.hitop-uu-vorstand__cards {
	justify-content: center;
	align-items: stretch;
}
.hitop-uu-vorstand__card {
	flex: 0 1 300px;
	max-width: 300px;
}
/* Annotation 2026-06-02: Hochformat-Portraits (Madlen/Philipp) wurden in der globalen
   Querformat-referent-card-Box oben/unten abgeschnitten. Vorstand-Karten bekommen eine
   quadratische Foto-Box (gemischte Quell-Ratios 1.42/1.0/0.75 sitzen so sauber). */
.hitop-uu-vorstand__card .hitop-referent-card__photo {
	padding-bottom: 100% !important;
}
/* Annotation 2026-06-03: Team-Karussell-Portraits (Außendienst + Kundenbetreuung,
   Wrapper .hitop-expertenteam) wurden in der globalen 1.40-Querformat-Foto-Box brutal
   auf das Gesicht beschnitten — der Kopf füllte randlos die Box (Stirn oben, Kinn unten).
   Quell-Porträts sind Hochformat (5:6). Quadratische Foto-Box wie bei den Vorstand-Karten
   und wie auf der Live-Seite → voller Kopf + Schultern + Headroom. Fotos = 1:1 (500x500,
   oben verankert). Greift auf Homepage, /produkt/ und /ueber-uns/ (synced). */
.hitop-expertenteam .hitop-referent-card__photo {
	padding-bottom: 100% !important;
}
/* Annotation 2026-06-03 (mpy22sgl + mpy247gd, /produkt/): rechte Karte im 3er-Carousel
   rechts abgeschnitten (auch mobil). Ursache: der Loop-Gap-Fix in slider-base.scss setzt
   global `.hitop-slider__container { margin-right: -1.5rem }`, um den trailing-margin der
   letzten Karte im ALL-VISIBLE-Fall (Viewport overflow:visible) zu absorbieren. Bei
   SCROLLENDEN Carousels hat der Viewport aber `overflow-x: clip` — der trailing-margin
   wird ohnehin geclippt. Dort bläht die negative Margin nur die 33.333%-Slide-Basis auf
   (Container wird 24px breiter) → 3 Slides überlaufen die Content-Box um ~24px → die
   3. Karte wird am rechten Content-Rand beschnitten. Auf inset-Sektionen (/produkt/,
   größerer Slider-Inset) sichtbar. Fix: negative Margin nur für --all-visible behalten,
   bei scrollenden Carousels auf 0 → Slide-Basis korrekt, Karten passen exakt. */
.hitop-slider:not(.hitop-slider--all-visible) .hitop-slider__container {
	margin-right: 0;
}
@media (max-width: 781px) {
	.hitop-uu-logo--cert img { height: 104px; }
	.hitop-uu-logo img { height: 40px; }
	/* Annotation 2026-06-03 (Team mobil "passt nicht"): die Team-Karte hatte auf Mobile
	   eine DOPPELTE Gutter (Section 16px + Viewport 16px = 32px je Seite) plus einen 16px-
	   Sliver der nächsten Karte rechts → wirkte gequetscht/abgeschnitten, asymmetrisch.
	   Ursache: theme.css `.hitop-carousel-3v2 .hitop-slider__viewport { padding: 0 16px }`
	   überschreibt slider-base's Mobile-`padding-inline:0`. Für die Team-Karusselle den
	   Viewport-Inset auf 0 → Karte voll-breit (nur die 16px-Section-Gutter), kein Sliver,
	   zentriert (wie live). Verifiziert per Hit-Test: Foto belegt 16–362 (volle Breite). */
	.hitop-expertenteam .hitop-slider__viewport {
		padding-inline: 0 !important;
	}
}

/* ---------- Annotations Zubehör-Cards (Webshop, mp3qd9f7-mp3qh7ht) ----------
 * SCSS hardcoded eigene Werte — überschreibe mit Theme-Tokens. */
.hitop-zubehor-cards__card {
	box-shadow: var(--wp--preset--shadow--card) !important;
	border-radius: var(--wp--custom--radius--card) !important;
}
.hitop-zubehor-cards__card:hover {
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.10) !important;
}

.hitop-zubehor-cards__heading {
	font-weight: 300 !important;
	color: var(--wp--preset--color--dark-anthrazit) !important;
	font-size: var(--wp--preset--font-size--xl) !important;
	line-height: 1.5 !important;
	letter-spacing: -0.03em !important;
}

.hitop-zubehor-cards__title {
	font-weight: 900 !important;
	font-size: 1.375rem !important;
	line-height: 1.5 !important;
	letter-spacing: -0.03em !important;
	color: var(--wp--preset--color--dark-anthrazit) !important;
}
/* "weitere Informationen" — Figma: weight 500 / 16 / KEIN Underline */
.hitop-zubehor-cards__more-link {
	font-weight: 500 !important;
	text-decoration: none !important;
}
/* "In den Warenkorb"-Button — Figma: shadow */
.hitop-zubehor-cards__cart-button,
.hitop-zubehor-cards__modal-cart {
	box-shadow: var(--wp--preset--shadow--button) !important;
	font-weight: 400 !important;
}
/* "Mehr Zubehör"-Button — #44b: nutzt jetzt is-style-hitop-tertiary (SSOT), das
 * frühere Custom-Override (border:0!important + Hover-Fill) wurde entfernt, weil es
 * den tertiary-Stil (1px dark Outline, Hover→orange Stroke, kein Fill) zerschlug. */
/* Card-Body Layout — Title oben, Footer unten (margin-top:auto auf footer ist schon),
 * "Weitere Informationen" mittig, alle gut verteilt */
.hitop-zubehor-cards__body {
	gap: 0;
}
/* Lieferzeit-Modal — Figma weight 900 */
.hitop-zubehor-cards__modal-delivery {
	font-weight: 900 !important;
}
.hitop-zubehor-cards__modal-delivery::before {
	content: "Lieferzeit: ";
	font-weight: 700;
}
.hitop-zubehor-cards__delivery::before {
	content: "Lieferzeit: ";
	font-weight: 700;
}

/* Modal-Layout: Price soll UNTER dem Bild stehen, nicht daneben (laut Annotation #26).
 * Mobile-First: column. Auf Desktop bleibt das modal-grid 335px + 1fr, aber
 * der MODAL-FOOTER (Price + Cart) wird in Footer einer separaten Column. */
@media (min-width: 1024px) {
	.hitop-zubehor-cards__modal-grid {
		grid-template-columns: 335px 1fr;
	}
}

/* ---------- Home "Was ist HiToP PNP" — Video (Figma 1104:3158) ----------
 * MP4-Player gerendert ueber Core wp:video Block. Wir clippen das Video
 * + Wrapper auf radius 34px (Brand-Pill-Radius) und stellen sicher,
 * dass die Figur 100% Container-Breite einnimmt (Default ist max-content).
 */
.hitop-home-was-ist-pnp .hitop-home-pnp-video {
	width: 100%;
	max-width: 750px; /* Figma 1104:3158 */
	margin: 24px auto 0;
	border-radius: 34px;
	overflow: hidden;
}
.hitop-home-was-ist-pnp .hitop-home-pnp-video video {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 34px;
}
/* Anwendungs-Video in section-text-video (Figma 1104:3180, 750x422, r=30).
   Annotation mpvc1xxt: Standbild -> echtes wp:video. */
.hitop-section-text-video__video {
	width: 100%;
	max-width: 750px;
	margin: 0 auto;
	border-radius: 30px;
	overflow: hidden;
}
.hitop-section-text-video__video video {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 30px;
}

/* ============================================================
 * core/columns is-style-reversed (Bild ↔ Text Toggle)
 * Pin mpcf0idi (2026-05-19): erlaubt Redakteur-Toggle der Spalten-
 * Reihenfolge in text-media-cta-left/right Patterns via Block-Style.
 * Mobile: stack-Order bleibt unveraendert (column-reverse waere
 * unerwartet wenn nur Desktop-Reihenfolge umgekehrt werden soll).
 * ============================================================ */
.wp-block-columns.is-style-reversed {
	flex-direction: row-reverse;
}
@media ( max-width: 781px ) {
	.wp-block-columns.is-style-reversed {
		flex-direction: column;
	}
}

/* ============================================================
 * 50/50 Text/Bild — "Bild immer oben" auf Mobil (User 2026-06-09,
 * Folge aus Pastel #50). Konsistenz: variant-1 (#50) + die -right-
 * Module zeigen das Bild auf Mobil bereits oben; die -left-Module
 * hatten Text oben. Statt column-reverse (kollidiert mit dem
 * is-style-reversed-Toggle oben + dessen Spezifitaet) holen wir die
 * BILD-Spalte per :has() + order:-1 nach oben — funktioniert
 * unabhaengig von flex-direction (row/column/column-reverse) und vom
 * is-style-reversed-Block-Style. -right ist bereits Bild-zuerst
 * (order:-1 schadet nicht), -left wird umgedreht. Der Block-Gap
 * zwischen Bild und Text bleibt (Content-Modul, kein flush wie #50).
 * ============================================================ */
@media (max-width: 781px) {
	.hitop-text-media-cta-left .wp-block-columns > .wp-block-column:has(figure.wp-block-image),
	.hitop-text-media-cta-right .wp-block-columns > .wp-block-column:has(figure.wp-block-image) {
		order: -1;
	}
}

/* ==========================================================================
   MOBILE BURGER OVERLAY — Figma 3149-1792 (Burger Menu - mobile Dropdown)
   2026-05-19: 1:1 Anpassung an Figma-Soll. Diese Section ueberschreibt die
   vorherigen Mobile-Overlay-Rules (1467+, 5031+, 5073+, 6486+) und ist die
   verbindliche Wahrheit fuer Mobile-Menue.
   Spec: 440px Frame, Header sichtbar (80px), Overlay startet darunter,
   Top-Level 26px Inter Light, Submenu 20px eingerueckt 42px, X-Close + Chevron
   in brand-primary, Sticky-CTA + Trustedshops ausgeblendet, ZUM WEBSHOP Pill
   am unteren Overlay-Rand.
   ========================================================================== */

/* Top-Level (kein @media!): Close-Proxy IMMER versteckt auf Desktop. JS klont
   den Proxy in den Header unabhaengig vom Viewport — auf Desktop wuerde er als
   unstylter Default-Browser-Button erscheinen. Nur innerhalb @media (max-width:
   1024px) wird der Display auf inline-flex (im Open-State) ueberschrieben.
   Annotation mpcs4kyv 2026-05-19. */
.hitop-header-close-proxy {
	display: none !important;
}

@media (max-width: 1024px) {

	/* 1. Header bleibt sichtbar UEBER dem Overlay — Overlay startet UNTER
	      dem kompletten Header-Block (Info-Bar + Header). Wir messen das
	      live via JS und setzen --hitop-header-total-h als CSS-Variable;
	      Fallback 144px (= 71px Info-Bar + 73px Header gemessen Mobile 393px).
	      z-index muss ueber dem Dialog (.is-menu-open hat WP-Default 100000)
	      und braucht eine non-static Position um zu greifen — daher relative.
	      DOM hat 2 separate header.wp-block-template-part Wrapper (Info-Bar
	      + hitop-header) — beide muessen ueber Dialog liegen. */
	body > .wp-site-blocks > header.wp-block-template-part {
		position: relative !important;
		z-index: 100001 !important;
		background: var(--wp--preset--color--white);
	}
	/* Pflichthinweis auch mobil dauerhaft sichtbar (User 03.07.): Info-Bar-Wrapper
	   analog Desktop (Z.803) sticky pinnen. Spezifitaet (0,3,2) schlaegt den
	   relative-Override oben (0,2,2). z-index UEBER dem Nav-Wrapper (100001),
	   damit der Headroom-Header beim Wegfahren HINTER der Info-Bar verschwindet. */
	body > .wp-site-blocks > header.wp-block-template-part:has( .hitop-info-bar ) {
		position: sticky !important;
		top: 0;
		z-index: 100002 !important;
		background: var(--wp--preset--color--grey);
	}
	/* Menu-Overlay offen: Nav-Header hart an den Viewport-Top pinnen.
	   (a) position:fixed statt sticky: Der Scroll-Lock (body overflow:hidden,
	       Z.~11100) macht body zum Scroll-Container -> sticky verliert seinen
	       Anker und der Header scrollt optisch weg (vorbestehender Bug).
	   (b) transform/will-change neutralisieren: Der Headroom-Block (Z.~3444)
	       setzt will-change:transform auf den Wrapper — dadurch wird das
	       position:fixed-Overlay IM Wrapper relativ zum Wrapper verankert
	       statt zum Viewport -> Menu war unsichtbar, wenn mid-scroll geoeffnet
	       (vorbestehend, verifiziert am Pre-Change-Stand 03.07.).
	   Info-Bar ist im Open-State display:none (Figma) -> top:0 korrekt. */
	body:has( .wp-block-navigation__responsive-container.is-menu-open ) > .wp-site-blocks > header.wp-block-template-part:has( .hitop-header ) {
		position: fixed !important;
		top: 0 !important;
		left: 0;
		right: 0;
		transform: none !important;
		transition: none !important;
		will-change: auto !important;
	}
	.hitop-nav .wp-block-navigation__responsive-container.is-menu-open {
		top: var(--hitop-header-total-h, 144px) !important;
		height: calc(100vh - var(--hitop-header-total-h, 144px)) !important;
		max-height: calc(100vh - var(--hitop-header-total-h, 144px)) !important;
		padding: 0 !important;
		/* Scrollbar visuell verstecken (Scroll-Funktion bleibt). User-Feedback
		   2026-05-19 'die linien auch bis zum Rand' — vorher hat der Scrollbar
		   ~14px rechts abgeschnitten und die border-bottom-Linien endeten dort. */
		scrollbar-width: none;
		-ms-overflow-style: none;
	}
	.hitop-nav .wp-block-navigation__responsive-container.is-menu-open::-webkit-scrollbar {
		display: none;
		width: 0;
		height: 0;
	}

	/* 2. X-Close-Icon in brand-primary (rot) + im Header-Slot positionieren
	      (statt im Overlay-Inner). Hamburger wird im Open-State versteckt,
	      X liegt visuell an gleicher Position. */
	.hitop-nav .wp-block-navigation__responsive-container-close,
	.hitop-nav .wp-block-navigation__responsive-container-close svg {
		color: var(--wp--preset--color--brand-primary) !important;
		fill: currentColor !important;
	}
	/* Original Close-Button im Overlay verstecken — JS klont einen Proxy in den
	   Header (.hitop-header-close-proxy), der visuell sichtbar ist (Header liegt
	   ueber Overlay-Stacking-Context). */
	.hitop-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
		position: absolute !important;
		top: 0 !important;
		left: -9999px !important;
		opacity: 0 !important;
		pointer-events: none !important;
	}
	/* Close-Proxy im Header — POSITION ABSOLUTE rechts (statt im Flex-Flow),
	   damit Logo/Search/Cart nicht nach links verdrängt werden.
	   User-Feedback 2026-05-19 'X verdrängt andere Elemente'. */
	.hitop-header-close-proxy {
		display: none;
		position: absolute;
		top: 14px;
		right: 16px;
		z-index: 10;
		background: transparent;
		border: 0;
		padding: 0;
		width: 44px;
		height: 44px;
		align-items: center;
		justify-content: center;
		color: var(--wp--preset--color--brand-primary);
		cursor: pointer;
	}
	/* Header-Inner braucht position:relative damit absoluter Proxy sich verortet */
	.hitop-header__inner {
		position: relative;
	}
	body:has(.wp-block-navigation__responsive-container.is-menu-open) .hitop-header-close-proxy {
		display: inline-flex !important;
	}
	.hitop-header-close-proxy svg {
		width: 32px;
		height: 32px;
		fill: currentColor;
	}
	/* Hamburger COMPLETELY DISPLAY:NONE im Open-State — kein Platzhalter mehr.
	   War vorher visibility:hidden, hat Layout-Platz behalten. PLUS Search + Cart
	   im Open-State auch verstecken — User-Feedback 'X verdrängt'.
	   Header zeigt im Open-State nur: Logo links + X rechts (sauber, kein Overlap). */
	body:has(.wp-block-navigation__responsive-container.is-menu-open) .hitop-nav .wp-block-navigation__responsive-container-open,
	body:has(.wp-block-navigation__responsive-container.is-menu-open) .hitop-header__icon--search,
	body:has(.wp-block-navigation__responsive-container.is-menu-open) .hitop-header__icon--cart {
		display: none !important;
		visibility: hidden !important;
	}
	/* Pill-BG MUSS schwarz bleiben — Spezifität durch class-chaining hoeher
	   als der generische catch-all in Sektion 7b. */
	.hitop-nav .wp-block-navigation__responsive-container.is-menu-open .hitop-mobile-overlay-cta .wp-block-button__link,
	.wp-block-navigation__responsive-container.is-menu-open .hitop-mobile-overlay-cta .wp-block-button__link {
		background-color: var(--wp--preset--color--dark-anthrazit) !important;
		background-image: none !important;
		color: var(--wp--preset--color--white) !important;
	}
	/* Hamburger-Button im Header verstecken wenn Overlay offen — X im
	   Header-Slot uebernimmt den Platz. Info-Bar (oberhalb) ist im Figma
	   nicht enthalten — im Open-State ausblenden. Logo bleibt sichtbar
	   (Figma zeigt Logo im Header-Bar). */
	body:has(.wp-block-navigation__responsive-container.is-menu-open) .hitop-nav .wp-block-navigation__responsive-container-open {
		visibility: hidden !important;
	}
	body:has(.wp-block-navigation__responsive-container.is-menu-open) .hitop-info-bar {
		display: none !important;
	}
	/* Reduziere Top-Padding des Overlay-Inner (kein Spacer fuer Close-Button noetig
	   wenn der via position:fixed in den Header gehoert). */
	.hitop-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
		padding-top: 0 !important;
	}

	/* 3. Search-Icon bleibt im Mobile-Header sichtbar (bestehende Z.5060-5062 reicht),
	      Cart bleibt sichtbar (Z.5068-5070), Webshop-Pill bleibt im Header verborgen
	      (Z.5064-5066) — der Klon der Pill landet im Overlay (siehe Sektion 11). */

	/* 4. Top-Level-Items: 26px Inter Light, padding 17px 22px, lineHeight 1.3.
	      Hoehere Specificity als 6510 (4 Klassen + 1 Element = 0,5,1) durch
	      .hitop-nav.wp-block-navigation Prefix + Override.
	      FIX 2026-05-19: Direct-Child-Operator > entfernt — DOM hat 2 Extra-
	      Wrapper (.responsive-close + .responsive-dialog) zwischen
	      .is-menu-open und .responsive-container-content. Descendant matched. */
	.hitop-nav.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .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__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__container > .wp-block-navigation-item > button.wp-block-navigation-submenu__toggle {
		padding: 17px 22px !important;
		font-size: 26px !important;
		font-weight: 300 !important;
		line-height: 1.3 !important;
		letter-spacing: -0.78px !important;
		color: var(--wp--preset--color--dark-anthrazit) !important;
		text-transform: none !important;
		min-height: 70px !important;
		/* FIX 2026-05-19: border NUR auf dem LI (siehe alte Rule Z.1567-1569) —
		   nicht zusaetzlich auf dem A-Content (sonst sichtbar als doppelter Strich). */
		border-bottom: 0 !important;
		background: var(--wp--preset--color--white) !important;
	}
	/* Logo-Pseudo (Z.5142-5156) deaktivieren: der echte Header ist sichtbar
	   ueber dem Overlay, ein zweites Pseudo-Logo waere doppelt. */
	.hitop-nav .wp-block-navigation__responsive-container.is-menu-open::before {
		content: none !important;
		background-image: none !important;
		display: none !important;
	}

	/* 5. Submenu-Items eingerueckt links 42px, Font 20px Inter Light.
	      FIX 2026-05-19 part 3: padding vertikal von 21px auf 15px reduziert —
	      Figma 3149-1792 zeigt kompaktere Items (~52px Hoehe pro Item statt ~94px). */
	.hitop-nav.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content,
	.hitop-nav.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container a.wp-block-navigation-item__content {
		padding: 15px 22px 15px 42px !important;
		font-size: 20px !important;
		font-weight: 300 !important;
		line-height: 1.3 !important;
		letter-spacing: -0.6px !important;
		color: var(--wp--preset--color--dark-anthrazit) !important;
		text-transform: none !important;
		min-height: auto !important;
	}

	/* 6. Mega-Menu-Headings (z.B. "DIE HAEUFIGSTEN SYMPTOME") auf Mobile WEG. */
	.hitop-nav.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .hitop-megamenu-heading,
	.hitop-nav.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .hitop-megamenu-heading > .wp-block-navigation-item__content {
		display: none !important;
	}
	/* 6b. Pastel #74 (Figma 1755:507): ZUBEHÖR-Gruppenlabel bleibt mobil sichtbar —
	      sonst haengt "→ zur Übersicht" kontextlos unter HiToP® PNP. Figma-Typo
	      (14/900/grau/UPPER) hier explizit, da der Mobile-Typo-Block (oben, Punkt 5)
	      alle Item-Contents mit !important auf 26px/Light/dark restylt. */
	.hitop-nav.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .hitop-megamenu-heading--zubehoer,
	.hitop-nav.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .hitop-megamenu-heading--zubehoer > .wp-block-navigation-item__content {
		display: block !important;
	}

	/* 7. Submenu-Items border-bottom auf den TATSAECHLICHEN Item-LIs.
	      FIX 2026-05-19 part 3: vorheriger Selektor `submenu-container > .item`
	      matched nur .hitop-megamenu-col (Wrapper-LI), nicht die echten Items in
	      .hitop-megamenu-col__list. User-Feedback 'Unterstriche wie bei Wissen
	      auch fuer die anderen'.
	      FIX part 4: :last-child der LETZTEN col bekommt keine Linie — parent
	      Symptome-LI hat seine eigene border-bottom als Separator zur naechsten
	      Top-Level. Doppelte Linien vermeiden. User-Feedback 'last child im
	      submenü aber keine linie'. */
	.hitop-nav.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .hitop-megamenu-col__list > .wp-block-navigation-item {
		border-bottom: 1px solid var(--wp--preset--color--grey) !important;
	}
	/* Last item in last col: no border (Symptome-LI's eigene border-bottom reicht) */
	.hitop-nav.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .hitop-megamenu-col:last-child .hitop-megamenu-col__list > .wp-block-navigation-item:last-child {
		border-bottom: 0 !important;
	}
	/* 7b. Pastel #74 (Figma 1755:507): ZUBEHÖR-Label-Typo + keine Trennlinie.
	      Selektoren bewusst mit a.…__content + col__list, um Regel 5 (Element-
	      Selector) und Regel 7 (Border auf col__list-Items) zu schlagen. */
	.hitop-nav.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .hitop-megamenu-col__list > .hitop-megamenu-heading--zubehoer {
		border-bottom: 0 !important;
	}
	.hitop-nav.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .hitop-megamenu-heading--zubehoer > a.wp-block-navigation-item__content {
		font-size: 14px !important;
		font-weight: 900 !important;
		line-height: 21px !important;
		letter-spacing: 0.05em !important;
		text-transform: uppercase !important;
		color: var(--wp--preset--color--light-anthrazit) !important;
		padding: 16px 22px 4px 42px !important;
		min-height: auto !important;
		pointer-events: none;
	}
	.hitop-nav.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
		border-bottom: 0 !important;
	}

	/* 7-spacing. Submenu-Container: Desktop-Mega-Menu Reste killen.
	      .hitop-megamenu-columnized hat Desktop-Style `gap: 60px; padding: 0 30px`
	      (Z.822-825). Auf Mobile MUSS das auf 0. User-Feedback 'einheitlicher Abstand,
	      bei manchen ist Mobil ein zu großer Abstand'. */
	.hitop-nav.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
		gap: 0 !important;
		padding: 0 !important;
	}
	/* col--2 margin-top:8px (eingefuehrt in Section A retained block) auf 0,
	      damit cols seamless stacken — Border zwischen Items reicht als Separator. */
	.hitop-nav .wp-block-navigation__responsive-container.is-menu-open .hitop-megamenu-col + .hitop-megamenu-col {
		margin-top: 0 !important;
	}

	/* 7b. CATCH-ALL: Im Mobile-Overlay ALLE Linien-Quellen auf A-Content
	       eliminieren. EXCLUDE den ZUM WEBSHOP Pill-Button (.wp-block-button__link
	       braucht seinen schwarzen Hintergrund). User-Feedback 2026-05-19. */
	.hitop-nav.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open a:not(.wp-block-button__link),
	.hitop-nav.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open a:not(.wp-block-button__link):hover,
	.hitop-nav.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open a:not(.wp-block-button__link):focus,
	.hitop-nav.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open a:not(.wp-block-button__link):active,
	.hitop-nav.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open a:not(.wp-block-button__link):focus-visible,
	.hitop-nav.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open a:not(.wp-block-button__link):visited,
	.hitop-nav.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open a:not(.wp-block-button__link):link,
	.hitop-nav.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__label {
		border: 0 !important;
		border-bottom: 0 !important;
		border-bottom-color: transparent !important;
		border-bottom-width: 0 !important;
		text-decoration: none !important;
		text-decoration-line: none !important;
		text-decoration-thickness: 0 !important;
		-webkit-tap-highlight-color: transparent !important;
		background-color: transparent !important;
		background-image: none !important;
		/* HINWEIS: outline/box-shadow bewusst NICHT mehr genullt — das hat den
		   Tastatur-Fokus-Indikator entfernt (BFSG 2.4.7-Verstoss). Die "Striche"
		   kommen aus border/text-decoration (oben), NICHT aus outline. Fokus-Ring
		   siehe 7d weiter unten. */
	}
	/* Pseudo ::after/::before mit border content auch killen — Chevron-Pseudo
	   bleibt durch Spezifität in der Chevron-Rule erhalten. */
	.hitop-nav.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content::before,
	.hitop-nav.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__label::before,
	.hitop-nav.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__label::after {
		display: none !important;
		content: none !important;
		border: 0 !important;
	}

	/* Maus/Touch-Fokus (NICHT Tastatur) im Mobile-Overlay: keine Linie + kein Tap-Highlight.
	   `:not(:focus-visible)` laesst den Tastatur-Fokus (= :focus-visible) unberuehrt → 7d greift. */
	.hitop-nav.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open *:focus:not(:focus-visible),
	.hitop-nav.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open *:active {
		outline: none !important;
		box-shadow: none !important;
		-webkit-tap-highlight-color: transparent !important;
	}

	/* 7d. BFSG 2.4.7: Tastatur-Fokus im Mobile-Overlay sichtbar machen. Oranger Ring
	   funktioniert auf hellem Menue-Hintergrund (~4:1) UND auf dem dunklen WEBSHOP-Pill (~5:1). */
	.hitop-nav.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open a:focus-visible,
	.hitop-nav.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open button:focus-visible,
	.hitop-nav.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open [tabindex]:focus-visible {
		outline: 3px solid var(--wp--preset--color--brand-primary) !important;
		outline-offset: -3px !important;
	}

	/* 7c. Submenu-Liste hitop-megamenu-col__list: gap 20px aus Desktop-Mega-
	       Menue ausschalten — Submenu-Items sollen direkt aneinander stehen
	       (Border-Bottom-separator). User-Feedback 2026-05-19 'padding zu gross'. */
	.hitop-nav.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .hitop-megamenu-col__list {
		gap: 0 !important;
	}

	/* 7d. Expanded Submenu: NATUERLICHE Hoehe, KEIN eigenes scroll.
	       FIX 2026-05-19 part 2: vorher max-height 55vh + overflow-y:auto fuer
	       internal-scroll — das gab 2 nested Scrollbars (Overlay-scroll + Submenu-
	       scroll) UND verkleinerte den Chevron-Anchor weil submenu container hatte
	       eigene max-height. Jetzt expanded submenu = volle natuerliche Hoehe.
	       Overlay-Container hat overflow-y:auto (WP-Default), scrollt das gesamte
	       Menue. body{overflow:hidden} (Z.9430) sperrt page-scroll.
	       max-height braucht aber expliziten Wert > 0 fuer Akkordeon-Transition. */
	.hitop-nav.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu.is-expanded > .wp-block-navigation__submenu-container {
		max-height: 2000px !important;
		overflow: visible !important;
	}
	/* Submenu-Container BG zurueck auf weiss (Z.6538 hat #f9f9f9 — Figma will weiss). */
	.hitop-nav.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
		background: var(--wp--preset--color--white) !important;
	}

	/* 8a. Page-Scroll sperren wenn Overlay offen — sonst sind 2 Scrollbars parallel
	       (Page-Scroll am Viewport-Rand + Submenu-internes-Scroll). User-Feedback
	       2026-05-19. position:fixed am body ist zu invasiv (springt auf 0). overflow:hidden
	       reicht weil das Overlay full-height ist. */
	body:has(.wp-block-navigation__responsive-container.is-menu-open) {
		overflow: hidden !important;
		touch-action: none;
	}
	html:has(.wp-block-navigation__responsive-container.is-menu-open) {
		overflow: hidden !important;
	}

	/* 8b. Sticky-CTA-Buttons, Trustedshops UND Cookie-Banner ausblenden im Open-State.
	      Cookie-Banner-Selektoren breit: Borlabs, Complianz, Cookie Notice,
	      Custom-Banner, etracker, OneTrust, CookieYes, etc. User-Feedback
	      2026-05-19 'Cookie-Banner verschiebt die View'. */
	body:has(.wp-block-navigation__responsive-container.is-menu-open) .hitop-sticky-buttons,
	body:has(.wp-block-navigation__responsive-container.is-menu-open) .hitop-sticky-cta,
	body:has(.wp-block-navigation__responsive-container.is-menu-open) .hitop-sticky-phone,
	body:has(.wp-block-navigation__responsive-container.is-menu-open) [id^="minimized-trustbadge-"],
	body:has(.wp-block-navigation__responsive-container.is-menu-open) [id^="trustbadge-container-"],
	body:has(.wp-block-navigation__responsive-container.is-menu-open) #trustbadge-iframe,
	body:has(.wp-block-navigation__responsive-container.is-menu-open) .etrusted-trustbadge,
	body:has(.wp-block-navigation__responsive-container.is-menu-open) [class*="trusted-shops"],
	body:has(.wp-block-navigation__responsive-container.is-menu-open) [id*="trusted-shops"],

	body:has(.wp-block-navigation__responsive-container.is-menu-open) [id*="borlabs-cookie"],
	body:has(.wp-block-navigation__responsive-container.is-menu-open) [class*="BorlabsCookie"],
	body:has(.wp-block-navigation__responsive-container.is-menu-open) [id*="cmplz-cookiebanner"],
	body:has(.wp-block-navigation__responsive-container.is-menu-open) [class*="cmplz-cookiebanner"],
	body:has(.wp-block-navigation__responsive-container.is-menu-open) #cookie-notice,
	body:has(.wp-block-navigation__responsive-container.is-menu-open) .cookie-notice,
	body:has(.wp-block-navigation__responsive-container.is-menu-open) #cookieNotice,
	body:has(.wp-block-navigation__responsive-container.is-menu-open) .cookie-consent,
	body:has(.wp-block-navigation__responsive-container.is-menu-open) .cookie-bar,
	body:has(.wp-block-navigation__responsive-container.is-menu-open) [class*="cookie-banner"],
	body:has(.wp-block-navigation__responsive-container.is-menu-open) [id*="cookie-banner"],
	body:has(.wp-block-navigation__responsive-container.is-menu-open) [class*="consent-banner"],
	body:has(.wp-block-navigation__responsive-container.is-menu-open) [id*="consent-banner"],
	body:has(.wp-block-navigation__responsive-container.is-menu-open) [class*="cookieconsent"],
	body:has(.wp-block-navigation__responsive-container.is-menu-open) #onetrust-banner-sdk,
	body:has(.wp-block-navigation__responsive-container.is-menu-open) #cky-consent,
	body:has(.wp-block-navigation__responsive-container.is-menu-open) .cky-consent-bar,
	body:has(.wp-block-navigation__responsive-container.is-menu-open) .cli-modal,
	body:has(.wp-block-navigation__responsive-container.is-menu-open) #cookie-law-info-bar,

	body:has(.wp-block-navigation__responsive-container.is-menu-open) [id^="_etLoaderOptOut"],
	body:has(.wp-block-navigation__responsive-container.is-menu-open) [class^="_etLoaderOptOut"],
	body:has(.wp-block-navigation__responsive-container.is-menu-open) #_etLoaderInfo,
	/* Catch-all: alle position:fixed Elemente die NICHT das Overlay/Header selbst sind */
	body:has(.wp-block-navigation__responsive-container.is-menu-open) iframe[src*="cookie"],
	body:has(.wp-block-navigation__responsive-container.is-menu-open) iframe[src*="consent"] {
		display: none !important;
		visibility: hidden !important;
	}

	/* 9. Chevron ROT als ::after-Pseudo, ABSOLUT positioniert rechts (statt
	      flex-justify-content) — garantiert IM viewport unabhaengig von
	      A-content-width oder Page-Scroll-State. User-Feedback 2026-05-19:
	      'Pfeile sind außerhalb des viewports'.
	      FIX 2026-05-19 part 2: position:relative MUSS auf .item__content selbst
	      (nicht auf LI), sonst ist ::after relativ zu LI-Hoehe — und LI-Hoehe
	      waechst mit expanded submenu auf 600+ px, Chevron landete in der Mitte
	      der Sub-Items. content-Element ist immer 70px hoch (item-row). */
	.hitop-nav.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-submenu > .wp-block-navigation-item__content {
		position: relative !important;
		/* Padding-right erhoehen damit Text nicht unter Chevron rutscht */
		padding-right: 56px !important;
	}
	.hitop-nav.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-submenu > .wp-block-navigation-item__content::after {
		content: '' !important;
		display: block !important;
		position: absolute !important;
		top: 50% !important;
		right: 22px !important;
		transform: translateY(-50%) !important;
		width: 18px !important;
		height: 18px !important;
		margin: 0 !important;
		/* Chevron-Down (rotiert bei .is-expanded zu Chevron-Up) in brand-primary #D83F27 */
		background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23D83F27' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>") !important;
		background-repeat: no-repeat !important;
		background-position: center !important;
		background-size: 18px 18px !important;
		transition: transform 0.2s ease-out !important;
		pointer-events: none !important;
	}
	/* WP-Core submenu-icon Button im Overlay komplett verstecken — Pseudo macht den Pfeil. */
	.hitop-nav.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-submenu > .wp-block-navigation__submenu-icon {
		display: none !important;
	}
	.hitop-nav.wp-block-navigation .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: translateY(-50%) rotate(180deg) !important;
	}

	.hitop-nav.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-submenu.is-expanded > .wp-block-navigation__submenu-icon {
		transform: translateY(-50%) rotate(180deg) !important;
	}

	/* 11. "ZUM WEBSHOP" Pill am unteren Overlay-Rand. JS klont
	       .hitop-header__cta-wrap → .hitop-mobile-overlay-cta in den
	       responsive-container-content (siehe theme.js Z. ~58 ensureOverlayCta).
	       Fix 2026-05-19: border-bottom entfernt — ungewollter Strich UNTER dem Pill,
	       Figma hat keinen separator dort. */
	.hitop-mobile-overlay-cta {
		display: flex !important;
		justify-content: flex-start !important;
		padding: 24px 22px 28px !important;
		margin: 0 !important;
		background: var(--wp--preset--color--white) !important;
	}
	.hitop-mobile-overlay-cta .wp-block-button {
		margin: 0;
	}
	.hitop-mobile-overlay-cta .wp-block-button__link {
		background: var(--wp--preset--color--dark-anthrazit) !important;
		color: var(--wp--preset--color--white) !important;
		font-family: 'Inter', sans-serif !important;
		font-weight: 700 !important;
		font-size: 16px !important;
		line-height: 1.2 !important;
		text-transform: uppercase !important;
		padding: 10px 30px !important;
		border-radius: 34px !important;
		box-shadow: 0 4px 4px rgba(0, 0, 0, 0.35) !important;
		display: inline-block !important;
		white-space: nowrap;
	}
}

/* ==========================================================================
   Card-Section-Inset (2026-05-21)
   ==========================================================================
   Problem: Slider haben 4.5rem (72px) padding-inline auf .hitop-slider__viewport
   damit Arrows + Card-Shadow Platz haben. Static Card-Sections nutzten nur
   var(--wp--preset--spacing--gutter) = clamp(1rem, 3vw, 2.5rem) = max 40px.
   Visueller Mismatch: Cards in Slidern eingerueckt, statische Cards kleben am
   Rand.

   Loesung: Ein zentrales Token --hitop-card-section-inset, das skaliert wie
   das spacing--2xl Token (Mobile 32px → Desktop 72px) und damit exakt der
   Slider-Inset trifft. Wird ausschliesslich auf Pattern-Klassen gemappt, die
   Cards enthalten. Reine Text-Sections + Hero/Video-Sections bleiben auf
   gutter (das ist korrekt, sonst wird Text-Reading-Column gequetscht).

   Wenn ein Pattern hier falsch eingerueckt wird → Klasse aus der Liste
   entfernen und stattdessen die Section auf 'gutter' lassen.
*/
:root {
	/* Gemeinsame Content-Breite (2026-05-21 v5): gilt für Reading-Column
	   (Blog/Wissen) UND Card-Section-Layouts. Einzeln anpassbar falls nötig. */
	--hitop-content-width: 1100px;
	/* Inset-Token bleibt als Fallback für Slider-Kalibrierung */
	--hitop-card-section-inset: clamp(2rem, 12vw, 12rem);
	/* Sticky-Clearance (2026-06-09 Pastel #15/16/18/19/20): rechter Schutzabstand,
	   damit Text nicht unter eTrusted-Badge (~93px) + Telefon-Pill (~107px,
	   rechtsbündig) läuft = ~113px Sticky-Breite + ~17px Luft. NICHT der rote
	   CTA (184px) — User-Vorgabe, sonst zu viel Textbreite verloren.
	   ► EINE Stelle ändern → wirkt auf Fakten-Slider + Hero + alle künftigen
	   Sektionen, die diese Reserve referenzieren. */
	--hitop-sticky-clearance: 130px;
}

/* ==========================================================================
   Card-Grid-Inset (2026-05-21 v6)
   Headings + Sublines bleiben an der natürlichen contentSize (1328px).
   NUR die Card-Grids / Slider werden auf --hitop-content-width (1100px)
   zentriert — max-width sitzt auf dem INNER-Container, nicht dem Wrapper.
   ========================================================================== */

.hitop-template-produkt-vorteile .hitop-vorteile-grid,

.hitop-template-produkt-nutzung > .wp-block-columns,
/* Nutzung: Standalone-Copy unter dem 3er-Grid (Pin mpfdqatk 2026-05-21:
   "das hier müsste doch auch 1100 sein, aber copy über die gesamte Breite"
   → p auf 1100 zentriert, Text fliesst full-width im Container) */
.hitop-template-produkt-nutzung > p,

.hitop-home-produkt-teaser > .wp-block-columns,

.hitop-home-was-ist-pnp > .wp-block-columns,

.hitop-template-produkt-wissenschaft .hitop-wissenschaft-block,
/* Wissenschaft: Ergebnis-Box unter dem 2-Col-Block (Pin mpfdr80n+mpfdr0jw
   2026-05-21: Box war auf 1328px constrained → jetzt 1100 wie der Rest) */
.hitop-template-produkt-wissenschaft .hitop-ergebnis-box,
/* Erfahrungsberichte: 3-Card Static-Slider (Pin mpfdqo3o 2026-05-21:
   3v1 --all-visible Mode = static grid, keine Pfeile → wie Card-Grid auf 1100.
   Expertenteam (3v2 mit Pfeilen) bleibt full-width damit Pfeile am Rand sitzen.)
   2026-06-09 User „erfahrungsberichte muss auch 1100 sein": das aktuelle
   Video-Modul (#28/#161) rendert als `.hitop-erfahrungsberichte__grid`
   (wp:columns), NICHT als .hitop-slider → die alte Regel griff nicht, Modul
   stand bei 1328. Grid-Variante hier ergänzt. */
.hitop-erfahrungsberichte .hitop-slider,
.hitop-erfahrungsberichte__grid,

.hitop-usage-cards-with-text > .wp-block-columns,
.hitop-webshop-zubehor-section > .wp-block-columns,

.hitop-template-symptom-grid > .wp-block-columns,
.hitop-template-symptom-behandlung > .wp-block-columns,
.hitop-template-symptom-blog > .wp-block-columns,
.hitop-template-symptom-produkt-teaser > .wp-block-columns {
	max-width: var(--hitop-content-width, 1100px) !important;
	margin-left: auto !important;
	margin-right: auto !important;
}

/* ==========================================================================
   Wissen-CPT: NUR Card-Grids/Carousel auf 1100px einrücken (2026-05-29 v2)
   User-Korrektur 2026-05-29: "headings sollen bei 13xx sein, text/Bild auch
   volle Breite". Die v1 dieser Regel war zu breit — sie zog Headings,
   Text-Intro UND 50/50-Media-Sections auf 1100, was gegen das dokumentierte
   v6-Intent (Z.10267: "Headings + Sublines bleiben bei 1328, NUR Card-Grids
   auf 1100") verstieß. Korrigiert: contentSize ist 83rem=1328px (theme.json),
   text-media-cta ist layout:constrained → rendert natürlich bei 1328 ("volle
   Breite"). Headings + 50/50-Media bleiben jetzt bei 1328. NUR die Symptom-
   Card-Carousel wird inset auf 1100 (das war die ursprüngliche Annotation
   mpqe1rmd "die karten sind nicht eingerückt mit 1100"). */
body.single-wissen .wp-block-post-content .hitop-symptom-carousel .hitop-slider {
	max-width: var(--hitop-content-width, 1100px) !important;
	margin-left: auto !important;
	margin-right: auto !important;
}

@media (max-width: 768px) {
	.hitop-template-produkt-vorteile .hitop-vorteile-grid,
	.hitop-template-produkt-nutzung > .wp-block-columns,
	.hitop-template-produkt-nutzung > p,
	.hitop-home-produkt-teaser > .wp-block-columns,
	.hitop-home-was-ist-pnp > .wp-block-columns,
	.hitop-template-produkt-wissenschaft .hitop-wissenschaft-block,
	.hitop-template-produkt-wissenschaft .hitop-ergebnis-box,
	.hitop-erfahrungsberichte .hitop-slider,
	.hitop-usage-cards-with-text > .wp-block-columns,
	.hitop-webshop-zubehor-section > .wp-block-columns,
	.hitop-template-symptom-grid > .wp-block-columns,
	.hitop-template-symptom-behandlung > .wp-block-columns,
	.hitop-template-symptom-blog > .wp-block-columns,
	.hitop-template-symptom-produkt-teaser > .wp-block-columns {
		max-width: none !important;
	}
}

/* Mobile (<=600px): Token klemmt sich runter auf 2rem (32px), das ist
   visuell konsistent mit Slider-Mobile + reicht fuer Card-Shadow */
@media (max-width: 600px) {
	:root {
		--hitop-card-section-inset: var(--wp--preset--spacing--gutter, 1rem);
	}
}

/* ==========================================================================
   Wissen-TOC (hitop/wissen-toc Pattern, v2 2026-05-26)
   Editorial: Plain Text-Links, dezente Border-Lines. Auf Mobile als
   <details>-Accordion (collapsed). Kein Card, kein Shadow, keine Badges.
   ========================================================================== */
.hitop-wissen-toc {
	margin-block: clamp(1.5rem, 3vw, 2.5rem);
}

.hitop-wissen-toc__details {
	border-top: 1px solid rgba(149, 149, 149, 0.3);
	border-bottom: 1px solid rgba(149, 149, 149, 0.3);
	padding: 8px 0;
}

.hitop-wissen-toc__summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 12px 0;
	cursor: pointer;
	list-style: none;
	user-select: none;
}

.hitop-wissen-toc__summary::-webkit-details-marker {
	display: none;
}

.hitop-wissen-toc__label {
	font-family: var(--wp--preset--font-family--inter, Inter, sans-serif);
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--light-anthrazit, #959595);
}

.hitop-wissen-toc__indicator {
	width: 12px;
	height: 12px;
	border-right: 1.5px solid var(--wp--preset--color--light-anthrazit, #959595);
	border-bottom: 1.5px solid var(--wp--preset--color--light-anthrazit, #959595);
	transform: rotate(45deg);
	transition: transform 0.18s ease;
	margin-top: -4px;
}

.hitop-wissen-toc__details[open] .hitop-wissen-toc__indicator {
	transform: rotate(-135deg);
	margin-top: 4px;
}

.hitop-wissen-toc__list {
	list-style: none !important;
	margin: 8px 0 16px !important;
	padding: 0 !important;
	display: flex;
	flex-direction: column;
}

.hitop-wissen-toc__list > li {
	margin: 0 !important;
	padding: 0 !important;
}

.hitop-wissen-toc__list > li > a {
	display: block;
	padding: 10px 0;
	color: var(--wp--preset--color--dark-anthrazit, #2C2C2C);
	text-decoration: none !important;
	font-size: 18px;
	font-weight: 400;
	line-height: 1.4;
	letter-spacing: -0.01em;
	border-bottom: 1px solid transparent;
	transition: color 0.15s ease, border-color 0.15s ease;
}

.hitop-wissen-toc__list > li:not(:last-child) > a {
	border-bottom-color: rgba(149, 149, 149, 0.15);
}

.hitop-wissen-toc__list > li > a:hover,
.hitop-wissen-toc__list > li > a:focus-visible {
	color: var(--wp--preset--color--brand-primary, #D83F27);
	text-decoration: underline !important;
	text-underline-offset: 4px;
	text-decoration-thickness: 1px;
}

html {
	scroll-behavior: smooth;
}

/* 2026-06-10 Pastel #66 (/engegefuehl/ u.a.): Seite liess sich auf iOS horizontal
 * verschieben. html/body standen auf overflow-x:visible — die (per overflow:clip
 * am Slider-Viewport gecliptenen, aber physisch rechts stehenden) Embla-Slides
 * deutet iOS Safari als pan-baren Inhalt. clip statt hidden: erzeugt KEINEN
 * Scroll-Container -> position:sticky bleibt intakt. */
html {
	overflow-x: clip;
	overscroll-behavior-x: none;
}
body {
	overflow-x: clip;
	overscroll-behavior-x: none;
}
@supports not (overflow: clip) {
	html, body {
		overflow-x: hidden;
	}
}

/* Scroll-Margin damit Anker nicht unter Sticky-Header verschwinden */
[id^="was-ist-"], [id^="typ"], [id="folgen"], [id="diabetischer-fuss"],
[id="medikamente"], [id="ernaehrung"], [id="behandlung-hitop"], [id="typen"],
[id="hitop-terminkalender"] {
	scroll-margin-top: 96px;
}

/* Pastel #76: FAQ-Inline-Videos ohne Card-Chrome — das Accordion-Panel ist
   bereits ein Card-Container, also kein Card-in-Card. Nur der Player bleibt. */
.hitop-faq__panel-inner .hitop-video-card {
	background: transparent !important;
	box-shadow: none !important;
	border-radius: 0 !important;
	padding: 0 !important;
	margin-top: 20px;
}
.hitop-faq__panel-inner .hitop-video-card .hitop-video-card__body {
	display: none !important;
}
.hitop-faq__panel-inner .hitop-video-card .hitop-video-card__media {
	margin: 0;
	border-radius: 16px;
	overflow: hidden;
}

@media (max-width: 600px) {
	.hitop-wissen-toc__list > li > a {
		font-size: 16px;
		padding: 12px 0;
	}
}

/* 2026-05-21 Annotation mpf8b1ol "icon rot":
   ✓-Char ist jetzt in eigenem <span.hitop-check-icon> getrennt vom <strong>.
   Span = rot (brand-primary), strong "Ergebnis:" bleibt dark-anthrazit/700
   (Figma-Spec). Pattern organism-science-quote.php Z.42 entsprechend gesplittet. */
.hitop-ergebnis-box .hitop-check-icon {
	color: var(--wp--preset--color--brand-primary, #D83F27);
	font-weight: 700;
	margin-right: 4px;
}

/* ==========================================================================
   hitop/text-image-center — Image-Width-Constraint (2026-05-21)
   ==========================================================================
   Bild in text-image-center-Section soll max 750px breit sein —
   unabhängig von Source-Image-Dimensionen. Konvention wurde bisher
   nur über Source-WebP-Width (750px) implizit durchgesetzt (Wissen-Pages
   2300, 2384). Diese explizite Regel macht den Constraint robust:
   manuell hochgeladene Bilder mit größerem Source rendern trotzdem 750px.
   H2 + Paragraph bleiben unbeschränkt (= Section-contentSize 1248/1328). */
.hitop-text-image-center .wp-block-image.aligncenter {
	max-width: 750px;
	margin-inline: auto;
}

.hitop-text-image-center .wp-block-image.aligncenter img {
	width: 100%;
	height: auto;
}

@media (max-width: 768px) {
	.hitop-text-image-center .wp-block-image.aligncenter {
		max-width: 100%;
	}
}

/* ─────────────────────────────────────────────────────────────
 * MEGA-MENU OVERFLOW-FIX (2026-06-01)
 * Problem: .hitop-megamenu-columnized war width:921px + left:50% +
 * translateX(-50%), zentriert auf dem Trigger-<li>. Da Symptome/Produkt
 * links sitzen, lief das Panel bei <~1520px links aus dem Viewport (Cutoff).
 * Fix: Panel relativ zur Nav-Zeile (.hitop-nav) verankern statt zum <li>,
 * linksbuendig + Breite auf Viewport geclampt. Gilt fuer beide Mega-Trigger.
 * ───────────────────────────────────────────────────────────── */
.hitop-nav.wp-block-navigation { position: relative; }
.hitop-nav.wp-block-navigation .wp-block-navigation-item:has(> .wp-block-navigation__submenu-container.hitop-megamenu-columnized) { position: static; }
@media (min-width: 782px) {
  .hitop-nav.wp-block-navigation .wp-block-navigation__submenu-container.hitop-megamenu-columnized {
    left: 0 !important;
    right: auto !important;
    transform: none !important;
    width: min(921px, calc(100vw - 264px)) !important;
    max-width: min(921px, calc(100vw - 264px)) !important;
  }
}

/* ─────────────────────────────────────────────────────────────
 * KONTAKTFORMULAR (Contact Form 7) — Styling (2026-06-01)
 * Scoped auf .hitop-kontakt-section, damit andere CF7-Formulare unberührt
 * bleiben. Brand: Inter, grey-Border, brand-primary Fokus + Pill-Submit.
 * ───────────────────────────────────────────────────────────── */
.hitop-kontakt-section .wpcf7 { margin-top: 8px; }
.hitop-kontakt-section .wpcf7-form p { margin: 0 0 18px; }
.hitop-kontakt-section .hitop-kontaktformular__row { display: flex; gap: 18px; flex-wrap: wrap; }
.hitop-kontakt-section .hitop-kontaktformular__row .wpcf7-form-control-wrap { flex: 1 1 200px; }
.hitop-kontakt-section .wpcf7-form-control-wrap { display: block; }

.hitop-kontakt-section input.wpcf7-form-control[type="text"],
.hitop-kontakt-section input.wpcf7-form-control[type="tel"],
.hitop-kontakt-section input.wpcf7-form-control[type="email"],
.hitop-kontakt-section textarea.wpcf7-form-control {
	width: 100%;
	box-sizing: border-box;
	padding: 14px 20px;
	border: 1px solid var(--wp--preset--color--grey, #D9D9D9);
	border-radius: 14px;
	background: #fff;
	color: var(--wp--preset--color--dark-anthrazit, #2C2C2C);
	font-family: inherit;
	font-size: 18px;
	line-height: 1.4;
	transition: border-color .15s ease;
}
.hitop-kontakt-section input.wpcf7-form-control:focus,
.hitop-kontakt-section textarea.wpcf7-form-control:focus {
	outline: none;
	border-color: var(--wp--preset--color--brand-primary, #D83F27);
}
.hitop-kontakt-section input.wpcf7-form-control::placeholder,
.hitop-kontakt-section textarea.wpcf7-form-control::placeholder { color: #959595; opacity: 1; }
.hitop-kontakt-section textarea.wpcf7-form-control { min-height: 150px; resize: vertical; }

.hitop-kontakt-section .hitop-kontaktformular__consent label {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	font-size: 15px;
	line-height: 1.5;
	font-weight: 300;
	color: var(--wp--preset--color--dark-anthrazit, #2C2C2C);
	cursor: pointer;
}
.hitop-kontakt-section .hitop-kontaktformular__consent input[type="checkbox"] {
	margin-top: 3px;
	width: 18px;
	height: 18px;
	flex: 0 0 auto;
	accent-color: var(--wp--preset--color--brand-primary, #D83F27);
}
.hitop-kontakt-section .hitop-kontaktformular__consent .wpcf7-list-item { margin: 0; }
.hitop-kontakt-section .hitop-kontaktformular__consent a {
	color: var(--wp--preset--color--brand-primary, #D83F27);
	text-decoration: underline;
}

.hitop-kontakt-section input.wpcf7-submit {
	-webkit-appearance: none;
	appearance: none;
	display: inline-block;
	background: var(--wp--preset--color--brand-primary, #D83F27);
	color: #fff;
	border: 0;
	border-radius: 34px;
	padding: 15px 40px;
	font-family: inherit;
	font-size: 18px;
	font-weight: 700;
	cursor: pointer;
	transition: background .15s ease;
}
.hitop-kontakt-section input.wpcf7-submit:hover { background: #AB1700; }
.hitop-kontakt-section .wpcf7-spinner { margin: 0 0 0 12px; }

/* Validierung / Response */
.hitop-kontakt-section .wpcf7-not-valid-tip { color: #AB1700; font-size: 14px; margin-top: 6px; }
.hitop-kontakt-section .wpcf7 form .wpcf7-response-output {
	border-radius: 12px;
	margin: 18px 0 0;
	padding: 14px 18px;
	font-size: 15px;
}

/* Honeypot-Feld (Spamschutz) — unsichtbar fuer Menschen, von Bots gefuellt */
.hitop-kontakt-section .hitop-hp-field {
	position: absolute !important;
	left: -9999px !important;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ─────────────────────────────────────────────────────────────
 * WIDERRUFSFORMULAR (Widerrufsbutton § 312k BGB) — Ergaenzung 2026-06-01
 * Date-Feld + Feld-Label. Reused die Kontakt-Form-Styles oben; nur das
 * type="date"-Input + ein sichtbares Label brauchen Zusatz-Regeln.
 * Scope .hitop-kontakt-section gilt auch auf der Widerruf-Seite (Section
 * traegt beide Klassen: hitop-kontakt-section hitop-widerruf-section).
 * ───────────────────────────────────────────────────────────── */
.hitop-kontakt-section input.wpcf7-form-control[type="date"] {
	width: 100%;
	box-sizing: border-box;
	padding: 14px 20px;
	border: 1px solid var(--wp--preset--color--grey, #D9D9D9);
	border-radius: 14px;
	background: #fff;
	color: var(--wp--preset--color--dark-anthrazit, #2C2C2C);
	font-family: inherit;
	font-size: 18px;
	line-height: 1.4;
	transition: border-color .15s ease;
}
.hitop-kontakt-section input.wpcf7-form-control[type="date"]:focus {
	outline: none;
	border-color: var(--wp--preset--color--brand-primary, #D83F27);
}
.hitop-kontakt-section .hitop-kontaktformular__label {
	display: block;
	font-size: 15px;
	font-weight: 300;
	line-height: 1.5;
	color: var(--wp--preset--color--dark-anthrazit, #2C2C2C);
}
.hitop-kontakt-section .hitop-kontaktformular__label .wpcf7-form-control-wrap {
	display: block;
	margin-top: 6px;
}

/* ============================================================ *
 * Presse-Liste (2026-06-02)                                     *
 * Pattern hitop/presse-liste – gestapeltes Presse-Archiv.       *
 * Weisse Cards (.hitop-card) auf Light-Grey-Section, Lesebreite *
 * ~960px zentriert. Meta-Zeile (Quelle/Datum) klein + grau,     *
 * H3-Titel, Clipping-Bilder gerundet, Sekundaer-Buttons.        *
 * ============================================================ */

.hitop-presse {

	--hitop-presse-card-gap: 24px;
}

.hitop-presse-item {
	/* Baut auf .hitop-card auf (radius 30px + shadow). overflow:hidden
	   aus .hitop-card wuerde die card-internen Radien clippen – hier
	   bewusst sichtbar lassen, damit Buttons/Bilder atmen. */
	overflow: visible;
	margin-bottom: var(--hitop-presse-card-gap, 24px);
	box-sizing: border-box;
}

/* Die Card-Group traegt durch das constrained-Inner-Layout WP-Core
   .has-global-padding (left/right via Root-Padding-Var, !important).
   Das wuerde unsere Card-Innenabstaende verfaelschen — neutralisieren,
   damit ausschliesslich die explizite Card-Padding gilt. */
.hitop-presse .hitop-presse-item.has-global-padding {
	padding-right: 40px;
	padding-left: 40px;
}

.hitop-presse-item:last-child {
	margin-bottom: 0;
}

.hitop-presse-item__meta {
	color: var(--wp--preset--color--light-anthrazit, #959595);
	font-size: 14px;
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: 0.01em;
	margin-bottom: 8px;
	margin-top: 0;
}

.hitop-presse-item__title {
	margin-top: 0;
	margin-bottom: 16px;
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.3;
}

.hitop-presse-item__subtitle {
	margin-top: 8px;
	margin-bottom: 12px;
	font-weight: 700;
	line-height: 1.4;
}

.hitop-presse-item p {
	line-height: 1.6;
}

.hitop-presse-item img {
	border-radius: var(--wp--custom--radius--card, 30px);
	height: auto;
}

.hitop-presse-item__clips {
	gap: 16px;
}

.hitop-presse-item__clips .wp-block-image {
	margin: 0;
}

.hitop-presse-item__clips img {
	width: 100%;
	object-fit: cover;
}

/* Award-Logo klein halten + linksbuendig (kein Full-width-Banner). */
.hitop-presse-item--logo .hitop-presse-item__logo {
	margin: 0 0 16px 0;
}

.hitop-presse-item--logo .hitop-presse-item__logo img {
	max-width: 260px;
	width: auto;
	height: auto;
	border-radius: 0;
}

.hitop-presse-item .wp-block-buttons {
	justify-content: flex-start;
}

@media (max-width: 781px) {
	.hitop-presse-item,
	.hitop-presse .hitop-presse-item.has-global-padding {
		padding: 24px !important;
	}

	.hitop-presse-item__clips {
		flex-wrap: wrap;
		gap: 12px;
	}

	.hitop-presse-item__clips .wp-block-column {
		flex-basis: 100% !important;
	}

	.hitop-presse-item--logo .hitop-presse-item__logo img {
		max-width: 200px;
	}
}

/* ============================================================================
 * etracker Consent-Banner — HiToP Brand-Theming  (Pastel #13, Yanick, 2026-06-08)
 * ----------------------------------------------------------------------------
 * Der Banner wird von etrackers //code.etracker.com/code/e.js (Account KS9Ens)
 * gerendert, NICHT vom Theme. Er liegt aber im LIGHT-DOM (#et-consent-overlay)
 * mit stabilen Hooks [data-editor=*] / [data-page=*] / .et-consent-* — daher ist
 * Branding per Theme-CSS dokumentiertes etracker-Theming, kein Hack.
 * etracker setzt Button-Hintergruende als INLINE-Style (Dashboard-Design-Config)
 * -> Overrides brauchen #id + [attr] Specificity UND !important.
 *
 * Button-Mapping (User-Entscheidung 2026-06-08):
 *   [data-editor=buttonDeny]   "Alles ablehnen"  -> SSOT TERTIARY  (theme.css Z.9574)
 *   [data-editor=buttonAccept] "Alles erlauben"  -> SSOT SECONDARY (theme.css Z.9548)
 *   [data-editor=buttonDetails]"Einstellungen"   -> Text-Link (quartiery)
 * Padding banner-kontextuell reduziert (Page-CTA-Spec 22/25px ist fuer den
 * 446px-Banner zu gross). Visual identitaet (Outline/Pill/Uppercase/Hover) = SSOT.
 *
 * TEXT/LABELS (Headline-Wording, Button-Beschriftung, Logo, Datenschutz-Link-Ziel)
 * liegen im etracker-Cloud-Account und sind NICHT per CSS aenderbar -> Kunde (gbo).
 * ============================================================================ */

/* Font: Arial -> Inter (Brand) im gesamten Banner */
#et-consent-overlay,
#et-consent-overlay * {
	font-family: var(--wp--preset--font-family--inter, "Inter", sans-serif) !important;
}

/* Box: Brand-Card-Radius */
#et-consent-overlay {
	border-radius: 30px !important;
}

/* Headlines [data-editor=title] + kleine Titel: Brand dark-anthrazit, Light 300 */
#et-consent-overlay [data-editor="title"],
#et-consent-overlay .et-consent-title,
#et-consent-overlay .et-consent-small-title {
	color: var(--wp--preset--color--dark-anthrazit) !important;
	font-weight: 300 !important;
	letter-spacing: -0.02em !important;
}

/* Body-/Beschreibungstexte: Brand dark-anthrazit */
#et-consent-overlay [data-editor="content"],
#et-consent-overlay .et-consent-content,
#et-consent-overlay .et-consent-desc,
#et-consent-overlay [data-editor="name"],
#et-consent-overlay [data-editor="markdown"] {
	color: var(--wp--preset--color--dark-anthrazit) !important;
}

/* deny + accept nebeneinander, gleich breit */
#et-consent-overlay .et-consent-button-container > div {
	display: flex !important;
	gap: 12px !important;
}
#et-consent-overlay [data-editor="buttonDeny"],
#et-consent-overlay [data-editor="buttonAccept"] {
	flex: 1 1 0 !important;
	min-width: 0 !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 14px 18px !important;
	border-radius: 100px !important;
	box-shadow: var(--wp--preset--shadow--button) !important;
	font-size: 15px !important;
	line-height: 1 !important;
	letter-spacing: 0 !important;
	text-transform: uppercase !important;
	white-space: nowrap !important;
	transition: background .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease !important;
}

/* DENY = TERTIARY (weiss / anthrazit 1px / weight 400 / Hover -> orange) */
#et-consent-overlay [data-editor="buttonDeny"] {
	background: var(--wp--preset--color--white) !important;
	color: var(--wp--preset--color--dark-anthrazit) !important;
	border: 1px solid var(--wp--preset--color--dark-anthrazit) !important;
	font-weight: 400 !important;
}
#et-consent-overlay [data-editor="buttonDeny"]:hover {
	color: var(--wp--preset--color--brand-primary) !important;
	border-color: var(--wp--preset--color--brand-primary) !important;
}
#et-consent-overlay [data-editor="buttonDeny"] span {
	color: inherit !important;
	font-weight: inherit !important;
}

/* ACCEPT = SECONDARY (weiss / orange 2px / weight 700 / Hover -> brand-hover) */
#et-consent-overlay [data-editor="buttonAccept"] {
	background: var(--wp--preset--color--white) !important;
	color: var(--wp--preset--color--brand-primary) !important;
	border: 2px solid var(--wp--preset--color--brand-primary) !important;
	font-weight: 700 !important;
}
#et-consent-overlay [data-editor="buttonAccept"]:hover {
	color: var(--wp--preset--color--brand-hover) !important;
	border-color: var(--wp--preset--color--brand-hover) !important;
}
#et-consent-overlay [data-editor="buttonAccept"] span {
	color: inherit !important;
	font-weight: inherit !important;
}

/* Chevron-Icons in deny/accept ausblenden (Brand-Pills = text-only) */
#et-consent-overlay [data-editor="buttonDeny"] svg,
#et-consent-overlay [data-editor="buttonAccept"] svg {
	display: none !important;
}

/* EINSTELLUNGEN + ZURUECK = Brand Text-Link (anthrazit -> Hover orange) */
#et-consent-overlay [data-editor="buttonDetails"],
#et-consent-overlay [data-editor="buttonDetailsBack"],
#et-consent-overlay [data-editor="buttonCategoryBack"] {
	background: transparent !important;
	color: var(--wp--preset--color--dark-anthrazit) !important;
	border: 0 !important;
	box-shadow: none !important;
	font-weight: 500 !important;
	text-transform: uppercase !important;
	letter-spacing: 0 !important;
}
#et-consent-overlay [data-editor="buttonDetails"]:hover,
#et-consent-overlay [data-editor="buttonDetailsBack"]:hover,
#et-consent-overlay [data-editor="buttonCategoryBack"]:hover {
	color: var(--wp--preset--color--brand-primary) !important;
}
#et-consent-overlay [data-editor="buttonDetails"] span,
#et-consent-overlay [data-editor="buttonDetailsBack"] span {
	color: inherit !important;
}
#et-consent-overlay [data-editor="buttonDetails"] svg,
#et-consent-overlay [data-editor="buttonDetailsBack"] svg,
#et-consent-overlay [data-editor="buttonCategoryBack"] svg {
	fill: currentColor !important;
	stroke: currentColor !important;
}

/* Footer-Links Datenschutz / Impressum: Brand */
#et-consent-overlay .et-consent-links a {
	color: var(--wp--preset--color--dark-anthrazit) !important;
	text-decoration: underline !important;
}
#et-consent-overlay .et-consent-links a:hover {
	color: var(--wp--preset--color--brand-primary) !important;
}

/* Toggle-Slider aktiv = Brand-Orange */
#et-consent-overlay input:checked + .et-consent-slider {
	background: var(--wp--preset--color--brand-primary) !important;
}

/* "Zurück"-Pfeil: in der Einstellungen-View ist [data-editor=buttonDetails]
 * derselbe Button wie "Einstellungen" auf der Hauptansicht — etracker tauscht
 * nur das Label (-> "Zurück"), NICHT den nach-rechts zeigenden Chevron.
 * Im Category-Zustand wird [data-page=main] inline auf display:none gesetzt;
 * darauf triggern wir und drehen den Chevron nach links (scaleX(-1)) + setzen
 * ihn per order:-1 VOR den Text -> "‹ Zurück". Hauptansicht bleibt "Einstellungen ›". */
#et-consent-overlay [data-editor="buttonDetails"] {
	display: inline-flex !important;
	align-items: center !important;
	gap: 6px !important;
}
#et-consent-overlay [data-page="main"][style*="display: none"] ~ .et-consent-button-container [data-editor="buttonDetails"] svg {
	transform: scaleX(-1) !important;
	order: -1 !important;
}

/* Sprach-Globus + Service-Chevrons: Brand-Anthrazit */
#et-consent-overlay .et-consent-lang-container svg,
#et-consent-overlay .et-consent-service-toggle svg {
	fill: var(--wp--preset--color--dark-anthrazit) !important;
}

/* ── Kontakt-Sektion: Content-Breite auf Standard 1328 (Pastel #45, Yanick) ──
   Sektion-contentSize ist jetzt 1328 → Headings, Copy, Address-Card und
   Formular sitzen linksbündig auf der gleichen Kante (352) wie "Ihr
   Expertenteam". Card + Formular bekommen die 1328-Content-Breite automatisch
   (kein eigener max-width-Override). Eingabefelder werden auf lesbare Breite
   begrenzt, damit einzelne Felder nicht über die volle Breite laufen. */
.hitop-kontakt-section .wpcf7 input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
.hitop-kontakt-section .wpcf7 textarea,
.hitop-kontakt-section .wpcf7 select {
	max-width: 640px;
}

/* ==========================================================================
   PASTEL SPRINT R2 (2026-06-10) — #16 Hero/Sticky, #53 Home-Mobil-Abstände,
   #51 Newsletter-Gerät mobil sichtbar
   ========================================================================== */

/* Pastel #16/#18/#19: KEIN neuer Fix hier — bereits 09.06. gelöst über
   --hitop-sticky-clearance 130px (Z.~409ff + ~424ff) mit User-Vorgabe:
   nur eTrusted-Badge+Telefon clearen, NICHT den 184px-CTA. Der Sweep-FAIL
   vom 09.06. war eine Messung gegen das falsche Element (False-FAIL). */

/* Pastel #53 (Yanick, Figma 1012:238 „Hitop-PNP_Home Mobile"): Abstände der
   Blog-Sektion + Lecture-Modul mobil exakt nach Figma.
   Soll: Lecture->H2 50 (war ok) / H2->Subline 15 (war 7) / Subline->Karte 41
   (war 20) / Lecture-Copy-Padding 30/22/50 statt 80px-Quadrat (Figma 1104:1900). */
@media (max-width: 781px) {
	.hitop-blog-grid h2 {
		margin-bottom: 16px !important;
	}
	/* Subline-marginBottom(40) und Slider-marginTop KOLLABIEREN; sichtbarer
	   Gap = collapsed - 20 (Slider-Innenoffset). Ziel 41 -> 61px. */
	.hitop-blog-grid .hitop-slider {
		margin-top: 61px !important;
	}
	.hitop-home-lecture__copy {
		padding: 30px 22px 50px !important;
	}
	/* Bild OBEN (Site-Standard 50/50-Mobil + Figma 1104:1900: vortrag-Bild zuerst) */
	.hitop-home-lecture > .wp-block-column.hitop-home-lecture__media {
		order: -1;
	}
	/* Figma: Lecture-Bild 333px hoch bei 440er-Frame = 75.7vw (!important
	   gegen globale img-height-auto-Regeln) */
	.hitop-home-lecture__media img {
		width: 100% !important;
		height: 75.7vw !important;
		max-height: 333px;
		object-fit: cover;
	}
}

/* Pastel #23 (User 10.06., Figma 1104:1871 Fill „onlinevortrag 1"): Lecture-
   Bild = onlinevortrag-hero-frau-laptop.webp (3:2, selbes Motiv wie Figma,
   bereits Site-Asset). Center-Crop passt — keine object-position nötig. */

/* Pastel #55 (Yanick): Produktpreis auf WC-Single brauchte Luft — größerer
   Abstand zur H1 drüber und zum Copy-Text drunter. */
.single-product .wc-block-components-product-price {
	margin-top: 16px !important;
	margin-bottom: 24px !important;
}

/* Pastel #51 (Yanick + User „mobil linksbündig"): newsletter-device.webp ist
   ein 2.4:1-Panorama mit dem Gerät LINKS — object-position center zeigte mobil
   nur leere Fläche. Links ausrichten -> Gerät + Manschetten sichtbar (Figma-
   Soll: Produkt deutlich erkennbar). Desktop (breiter Ausschnitt) unberührt. */
@media (max-width: 781px) {
	.hitop-newsletter > .wp-block-cover__image-background {
		object-position: left center !important;
	}
}

/* ==================== BACKEND-AUDIT 2026-06-11: Inline-Style -> CSS ====================
 * Block-Validierungs-Fixes: scroll-margin und video-radius standen als inline-Styles
 * im Block-Markup, die core/group bzw. core/video per Attribut nicht abbilden koennen
 * (Editor zeigte "Wiederherstellung versuchen"). Visuell identisch, jetzt SSOT hier. */
.hitop-webshop-zubehor-section {
	scroll-margin-top: 120px;
}
.hitop-video-frame video {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 30px;
}

/* ============================================================================
   Globale Focus-Visible-Baseline (BFSG / WCAG 2.4.7 Focus Visible, AA)
   Sichtbarer Tastatur-Fokus fuer alle interaktiven Elemente, die KEINEN
   eigenen Fokus-Stil mitbringen (Prosa-Links, Footer, Brotkrumen, Karten,
   Pagination, Buttons etc.). `:where()` = 0 Spezifitaet → komponenten-eigene
   :focus-/:focus-visible-Stile (Formularfelder mit orangem Border, Galerie-
   Nav, Mobile-Menu 7d) gewinnen weiterhin und werden NICHT ueberschrieben.
   ========================================================================= */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--wp--preset--color--brand-primary, #D83F27);
	outline-offset: 2px;
}

/* =========================================================================
   EXPERTEN-PRUEFBLOCK (E-E-A-T / reviewedBy) — Figma 1830:367–370
   Synced Patterns hitop-pruefblock-small / hitop-pruefblock-medium.
   Zwei Groessen (small | medium), je Desktop + Mobile (<=781px Reflow).
   Personendaten zentral im Synced Pattern; Pruefdatum pro Seite via
   Pattern-Override (metadata.name=pruefdatum). Buttons via Button-SSOT
   (is-style-hitop-secondary); WDGZ-Button = dunkler 1px-Outline-Modifier.
   ========================================================================= */
.hitop-pruefblock {
	box-sizing: border-box;
	max-width: 1100px;
	margin-inline: auto;
	/* Modul-Abstand-Konvention: eigener Anteil am Theme-Section-Gap (zusammen mit
	   dem padding-block des Folge-Moduls = 100/50px Figma-Rhythmus). !important
	   schlaegt den WP-Flow-:last-child margin-reset (.is-layout-flow > :last-child). */
	margin-block-end: var(--wp--preset--spacing--section) !important;
	background: var(--wp--preset--color--light-grey, #F5F5F5);
	border: 1px solid #E6E6E6;
	border-radius: 30px;
	box-shadow: 0 6px 28px rgba(0, 0, 0, .06);
	padding: clamp(1.5rem, 2.6vw, 2.5rem) clamp(1.5rem, 2.8vw, 2.625rem);
	color: var(--wp--preset--color--dark-anthrazit, #2C2C2C);
}
.hitop-pruefblock,
.hitop-pruefblock * { box-sizing: border-box; }

/* Foto (Kreis) */
.hitop-pruefblock__photo { grid-area: photo; align-self: center; margin: 0; }
.hitop-pruefblock__photo img {
	display: block;
	border-radius: 50%;
	object-fit: cover;
	object-position: center 22%;
	box-shadow: 0 4px 4px rgba(0, 0, 0, .25);
}

/* Identitaets-Texte */
.hitop-pruefblock__eyebrow {
	grid-area: eyebrow; align-self: end; margin: 0;
	font-weight: 500; font-size: 1.25rem; line-height: 1.5;
	color: var(--wp--preset--color--brand-primary, #D83F27);
}
.hitop-pruefblock__name {
	grid-area: name; margin: 0;
	font-weight: 900; font-size: 1.5rem; line-height: 1.3; letter-spacing: -.03em;
	color: var(--wp--preset--color--dark-anthrazit, #2C2C2C);
}
.hitop-pruefblock__credentials {
	grid-area: creds; align-self: start; margin: 0;
	font-weight: 300; font-size: 1.25rem; line-height: 1.5;
	color: var(--wp--preset--color--dark-anthrazit, #2C2C2C);
}

/* Kopfbereich: Foto + Identitaet als Grid (Credentials reflowt mobil) */
.hitop-pruefblock__head {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	grid-template-areas: "photo eyebrow" "photo name" "photo creds";
	column-gap: clamp(1.25rem, 2.2vw, 2.6rem);
	row-gap: 6px;
	align-items: start;
	margin: 0;
}

/* Trennlinie (core wp-block-separator erzwingt width:100px via :not()-Kette → !important) */
.hitop-pruefblock__divider {
	border: 0; border-top: 1px solid #DCDCDC; height: 0; margin: 0; opacity: 1;
	width: 100% !important; max-width: none !important;
}

/* Beschreibung (nur Medium) */
.hitop-pruefblock__desc {
	margin: 0;
	font-weight: 300; font-size: 1.25rem; line-height: 1.5; letter-spacing: -.03em;
	color: var(--wp--preset--color--dark-anthrazit, #2C2C2C);
}

/* Datum mit Kalender-Icon */
.hitop-pruefblock__date {
	margin: 0; display: inline-flex; align-items: center; gap: 10px;
	font-weight: 500; font-size: 1.25rem; line-height: 1.5;
	color: var(--wp--preset--color--light-anthrazit, #959595);
}
.hitop-pruefblock__date::before {
	content: ""; flex: 0 0 auto; width: 21px; height: 22px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='21' height='22' viewBox='0 0 24 24' fill='none' stroke='%23959595' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* Buttons */
.hitop-pruefblock__actions { margin: 0; gap: 16px; flex-wrap: wrap; }
.hitop-pruefblock__actions .wp-block-button { margin: 0; }
.hitop-pruefblock .wp-block-button.hitop-pruefblock__btn--wdgz > .wp-block-button__link {
	border-color: var(--wp--preset--color--dark-anthrazit, #2C2C2C) !important;
	border-width: 1px !important;
	color: var(--wp--preset--color--dark-anthrazit, #2C2C2C) !important;
}
.hitop-pruefblock .wp-block-button.hitop-pruefblock__btn--wdgz > .wp-block-button__link:hover,
.hitop-pruefblock .wp-block-button.hitop-pruefblock__btn--wdgz > .wp-block-button__link:focus-visible {
	background: var(--wp--preset--color--dark-anthrazit, #2C2C2C) !important;
	color: #fff !important;
}

/* ===== MEDIUM ===== */
.hitop-pruefblock--medium .hitop-pruefblock__photo img { width: 151px; height: 151px; }
.hitop-pruefblock--medium .hitop-pruefblock__head { margin-bottom: 24px; }
.hitop-pruefblock--medium .hitop-pruefblock__divider { margin-bottom: 24px; }
.hitop-pruefblock--medium .hitop-pruefblock__desc { margin-bottom: 28px; }
.hitop-pruefblock--medium .hitop-pruefblock__foot {
	display: flex; align-items: center; justify-content: space-between;
	gap: 20px; flex-wrap: wrap; margin: 0;
}

/* ===== SMALL ===== */
.hitop-pruefblock--small { display: flex; align-items: center; gap: clamp(1.5rem, 3vw, 3rem); }
.hitop-pruefblock--small .hitop-pruefblock__head { flex: 1 1 auto; }
.hitop-pruefblock--small .hitop-pruefblock__photo img { width: 100px; height: 100px; }
.hitop-pruefblock--small > .hitop-pruefblock__divider { display: none; }
.hitop-pruefblock--small .hitop-pruefblock__foot {
	flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end;
	gap: 16px; margin: 0;
}

/* ===== MOBILE (<=781px) ===== */
@media (max-width: 781px) {
	/* Mobil: post-content/main der Wissen-Pages hat kein Seiten-Padding, und der
	   Pruefblock ist als hitop-Klasse von der Reading-Column-Regel ausgenommen
	   -> sonst klebt die Karte am Viewport-Rand. Eigener Inset. */
	.hitop-pruefblock { padding: clamp(1.25rem, 5vw, 1.75rem); border-radius: 24px; margin-inline: 16px; }
	.hitop-pruefblock__head {
		grid-template-areas: "photo eyebrow" "photo name" "creds creds";
		column-gap: 1rem; row-gap: 4px;
	}
	.hitop-pruefblock__photo img { width: 72px !important; height: 72px !important; }
	.hitop-pruefblock__eyebrow { font-size: 1.0625rem; }
	.hitop-pruefblock__name { font-size: 1.25rem; }
	.hitop-pruefblock__credentials { font-size: 1.0625rem; margin-top: 8px; }
	.hitop-pruefblock__desc { font-size: 1.0625rem; }
	.hitop-pruefblock__date { font-size: 1rem; }

	.hitop-pruefblock--small { display: block; }
	.hitop-pruefblock--small .hitop-pruefblock__head { margin-bottom: 18px; }
	.hitop-pruefblock--small > .hitop-pruefblock__divider { display: block; margin-bottom: 18px; }
	.hitop-pruefblock--small .hitop-pruefblock__foot {
		flex-direction: row; align-items: center; justify-content: space-between;
		flex-wrap: wrap; gap: 14px;
	}

	.hitop-pruefblock--medium .hitop-pruefblock__foot { align-items: flex-start; gap: 18px; }
	/* Buttons bleiben nebeneinander (Figma 1830:369), umbrechen nur bei Platznot */
	.hitop-pruefblock--medium .hitop-pruefblock__actions { width: 100%; gap: 12px; }
}

/* =====================================================================
   EXPERTENPROFIL-SEITE (Figma 1830:648 / 1830:846)
   Vita-Quellen-Karten + Alltag-Hinweisbox.
   Hero/USP/Pruefung/Schwerpunkt/Checklisten teilen CSS mit bestehenden
   Patterns (hero-image-heading-subline, wissen-usp-row,
   text-bild-cta--variant-1, wissen-checklist).
   ===================================================================== */

/* --- Vita & Quellen: 2 light-grey Karten (Figma 1864:323) ------------ */
.hitop-vita-cards .wp-block-columns { align-items: stretch; }
.hitop-vita-cards .wp-block-column { display: flex; }

.hitop-vita-cards__card {
	width: 100%;
	background-color: var(--wp--preset--color--light-grey, #F5F5F5);
	border-radius: 30px;
	padding: clamp(28px, 3vw, 48px);
}

/* Listen in den Karten: Pfeil-Icon-Bullets wie Wissen-Checklist */
.hitop-vita-cards__list { list-style: none; padding-left: 0; margin: 0; }
.hitop-vita-cards__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-vita-cards__list li:last-child { margin-bottom: 0; }
.hitop-vita-cards__list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 6px;
	width: 22px;
	height: 18px;
	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 22 18' fill='none'%3E%3Cpath d='M2 9h17M12 2l8 7-8 7' 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 22 18' fill='none'%3E%3Cpath d='M2 9h17M12 2l8 7-8 7' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
}
/* Quellen-Karte: Links unterstrichen, Markenfarbe beim Hover */
.hitop-vita-cards__list--links li { font-weight: 500; }
.hitop-vita-cards__list--links a {
	color: var(--wp--preset--color--dark-anthrazit);
	text-decoration: underline;
	text-underline-offset: 2px;
}
.hitop-vita-cards__list--links a:hover,
.hitop-vita-cards__list--links a:focus-visible {
	color: var(--wp--preset--color--brand-primary);
}

@media (max-width: 781px) {
	.hitop-vita-cards .wp-block-columns { gap: 24px; }
	.hitop-vita-cards .wp-block-column:not(:last-child) { margin-bottom: 0; }
}

/* --- Alltag-Hinweisbox (Figma 1830:796 — orange-tint r=30) ------------ */
.hitop-expertenprofil-alltag__callout {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: 16px;
	background-color: rgba(216, 63, 39, 0.1);
	border-radius: 30px;
	padding: 24px 30px;
}
.hitop-expertenprofil-alltag__callout-icon { flex-shrink: 0; line-height: 0; }
.hitop-expertenprofil-alltag__callout p { margin: 0; }

/* --- Reading-Column-System (Figma 1830:648) --------------------------------
   Diese Seite ist ein `page` — die `body.single-wissen`-Reading-Column-Regeln
   (theme.css ~Z.5387) greifen hier NICHT. Breiten daher self-contained pro
   Pattern: Headline + Subline = 1328 (natuerliche Section-contentSize,
   linksbuendig, x=200 in Figma), Copy/Liste/Callout = 1100 zentriert (x=314),
   Bild im Content = 750 zentriert (x=488). */
.hitop-ep-reading { max-width: var(--hitop-content-width, 1100px); margin-inline: auto; }
.hitop-ep-reading > :last-child { margin-bottom: 0; }
.hitop-ep-reading .hitop-ep-media { max-width: 750px; margin-left: auto; margin-right: auto; }
.hitop-ep-reading .hitop-ep-media img { border-radius: 30px; display: block; }

/* === Expertenprofil — Detail-Fixes (Figma 2026-06-23) ====================== */
/* Pruef-Datum fett: die variant-1 `p {font-weight:300 !important}` (Z.5557) schlaegt
   das Inline-700 des Datums — daher hier ein KLASSEN-gescoptes !important (Spezifitaet
   0,2,0 > variant-1 0,1,1). Bewusst NICHT page-id-gebunden: ueberlebt Live-Migration
   (ID-Wechsel) + Pattern-Reuse. USP-Labels: Pattern-Inline ist jetzt selbst 700
   (Source-of-Truth im Pattern); diese Zeile bleibt nur als Fallback gegen ein evtl.
   globales h3-!important. */
.hitop-expertenprofil-pruefung .hitop-expertenprofil-pruefung__date,
.hitop-expertenprofil-usps .hitop-wissen-usp-row__title {
	font-weight: 700 !important;
}
/* Pruefblock-Video: ohne abgerundete Ecken + ohne Schatten (User-Wunsch 02.07.).
   !important schlaegt den Inline-border-radius:30px aus render.php. */
.hitop-expertenprofil-pruefung .hitop-video-card {
	border-radius: 0 !important;
	box-shadow: none !important;
}
.hitop-expertenprofil-pruefung .hitop-video-card__media {
	border-top-left-radius: 0;
	border-top-right-radius: 0;
}
/* Selbstcheck-CTA: Text vertikal in der (vollhohen) Orange-Spalte zentrieren. */
.hitop-expertenprofil-selbstcheck .wp-block-column.has-brand-primary-background-color {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

/* === Wissen/Blog Content-Breiten-Normalisierung (GLOBAL) ====================
   Standard (User 2026-06-22): Headline = 1328 (zentrierte Content-Spalte),
   Copy/Listen/H3 = 1100, Content-Bild = 750, Inhaltsverzeichnis = 1100.
   Viele Prosa-Sektionen wurden per-Seite mit contentSize ~800 in .hitop-section
   authored -> CSS-Override statt 14 Seiten neu bauen. 50/50-Module
   (text-media/text-bild), TOC und Karten bleiben unberuehrt (via :not()-Filter).
   Global freigegeben 2026-06-22 nach Pilot /wissen/polyneuropathie/ (postid-2620). */
body.single-wissen .wp-block-post-content > .hitop-section:not(.hitop-wissen-toc):not([class*="text-media"]):not([class*="text-bild"]) > h2,
body.single-post .wp-block-post-content > .hitop-section:not(.hitop-wissen-toc):not([class*="text-media"]):not([class*="text-bild"]) > h2 {
	max-width: 1328px;
	margin-inline: auto;
}
/* Blog (single-post): main ist auf contentSize 1328 constrained UND die .hitop-section
   traegt 40px Inline-Padding (Global-Padding) -> Section-Inner-Box = 1248, die Headline
   wuerde auf 1248 clippen (40px zu schmal + 40px nach rechts versetzt vs Figma x=200).
   Damit die HL wie bei Wissen + Figma buendig an der 1328-Spalte sitzt, faengt der H2
   die 40px Section-Inline-Padding per negativem Margin wieder ab (-40 kompensiert nur
   die Section, nie das main-Padding -> auf Mobil bleibt die HL voll im Content, kein
   Overflow). Nur single-post — die Wissen-main ist full-bleed, HL sitzt dort schon 1328.
   !important schlaegt WP-Cores `.is-layout-constrained > :where() { margin:auto !important }`
   (das den H2 sonst zentriert) — nur via hoehere Spezifitaet + !important uebersteuerbar.
   Nur >=782px (Desktop): der 1328-Cap greift ohnehin erst ab ~1408px Viewport; auf Mobil
   (<=781px) bleibt die HL normal in der Section (kein negativer Margin -> kein Overflow,
   die Section-Padding-Werte koennen mobil abweichen). */
@media (min-width: 782px) {
	body.single-post .wp-block-post-content > .hitop-section:not(.hitop-wissen-toc):not([class*="text-media"]):not([class*="text-bild"]) > h2 {
		margin-inline: -40px !important;
	}
}
body.single-wissen .wp-block-post-content > .hitop-section:not(.hitop-wissen-toc):not([class*="text-media"]):not([class*="text-bild"]) > :is(h3, h4, p, ul, ol),
body.single-post .wp-block-post-content > .hitop-section:not(.hitop-wissen-toc):not([class*="text-media"]):not([class*="text-bild"]) > :is(h3, h4, p, ul, ol) {
	max-width: var(--hitop-content-width, 1100px);
	margin-inline: auto;
}
body.single-wissen .wp-block-post-content > .hitop-section:not(.hitop-wissen-toc):not([class*="text-media"]):not([class*="text-bild"]) > figure,
body.single-post .wp-block-post-content > .hitop-section:not(.hitop-wissen-toc):not([class*="text-media"]):not([class*="text-bild"]) > figure {
	max-width: 750px;
	margin-inline: auto;
}
/* Inhaltsverzeichnis (hitop-wissen-toc) hat global max-width:800 auf __details -> auf Copy-Breite (1100). */
body.single-wissen .hitop-wissen-toc__details,
body.single-post .hitop-wissen-toc__details {
	max-width: var(--hitop-content-width, 1100px);
}
/* Naked Headline (direkter post-content-Child, nicht in .hitop-section) = 1328.
   Die Reading-Column-Regel Z.5368/5387 klammert H2 auf 1100; hier auf 1328
   hochgezogen damit HL ueberall der Spec entspricht. H3-H6/Copy bleiben 1100. */
body.single-wissen .wp-block-post-content > h2,
body.single-post .wp-block-post-content > h2 {
	max-width: 1328px;
	margin-inline: auto;
}

.hitop-newsletter-inline-form{scroll-margin-top:8rem}

/* ==========================================================================
   Expertenteam-Redesign 2026-07-15 (Figma GBO-intern 1954:1902)
   Kontakt-Karten-Grid + Karte + Full-bleed-Gruppenfotos.
   ========================================================================== */

/* 2-spaltiges Karten-Grid (Desktop), 1 Spalte mobil. Karten einer Reihe
   gleich hoch (User 2026-07-15 "erste Karte hoeher als die daneben"). */
.hitop-team-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	align-items: stretch;
	gap: 32px;
}

.hitop-team-grid > .hitop-kontakt-card {
	height: 100%;
	box-sizing: border-box;
	/* WP-Flow-Layout gibt Kindern ab dem zweiten margin-block-start –
	   im Grid verschiebt das die Nachbarkarte nach unten (Pin 2026-07-15
	   "die beiden sind aber noch versetzt"). Abstand macht allein gap. */
	margin-block-start: 0 !important;
}

@media (max-width: 900px) {
	.hitop-team-grid {
		grid-template-columns: 1fr;
		gap: 20px;
	}
}

/* Kontakt-Karte: weiss, Radius 24 (Figma-Abweichung vom 30er Card-Standard),
   zarter brand-light-Border + weicher Schatten. */
.hitop-kontakt-card {
	border: 1px solid var(--wp--preset--color--brand-light, rgba(216, 63, 39, 0.1));
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.06);
}

/* Foto fix 140px rund; blockGap uebernimmt den 32px-Abstand zur Info-Spalte. */
.hitop-kontakt-card__photo {
	flex: 0 0 140px;
	width: 140px;
	margin: 0;
}

.hitop-kontakt-card__photo img {
	width: 140px;
	height: 140px;
}

.hitop-kontakt-card__info {
	min-width: 0;
}

/* Kontakt-Zeilen: Icon in Brand-Orange (contact-line liefert anthrazit),
   E-Mails duerfen umbrechen statt die Karte zu sprengen. */
.hitop-kontakt-card .hitop-referent-card__contact {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0;
	font-weight: 300;
	font-size: 1rem;
	line-height: 1.5625;
}

.hitop-kontakt-card .hitop-referent-card__contact + .hitop-referent-card__contact {
	margin-top: 8px;
}

.hitop-kontakt-card .hitop-referent-card__icon {
	flex: 0 0 auto;
	stroke: var(--wp--preset--color--brand-primary, #d83f27);
}

.hitop-kontakt-card .hitop-referent-card__contact a {
	color: var(--wp--preset--color--dark-anthrazit, #2c2c2c);
	text-decoration: none;
	overflow-wrap: anywhere;
}

.hitop-kontakt-card .hitop-referent-card__contact a:hover {
	color: var(--wp--preset--color--brand-primary, #d83f27);
}

/* Full-bleed-Gruppenfoto: randlos, ohne Radius, kein Extra-Margin. */
.hitop-team-gruppenfoto {
	margin-top: 0;
	margin-bottom: 0;
}

.hitop-team-gruppenfoto img {
	width: 100%;
	height: auto;
	display: block;
}

/* Mobil: kompakte Karte (Figma mobile 1992:16073 — Avatar 64px). */
@media (max-width: 600px) {
	.hitop-kontakt-card {
		padding: 16px !important;
		gap: 16px;
	}
	.hitop-kontakt-card__photo,
	.hitop-kontakt-card__photo img {
		flex-basis: 64px;
		width: 64px;
		height: 64px;
	}
}

/* ==========================================================================
   Studien-Karten + Studien-Liste (Figma GBO-intern 1954:826, 2026-07-15)
   /klinische-studien/: Karten mit rotem Titel-Balken + Quellen-Box,
   Filter via hitop/tabs (zentrierte Pills).
   ========================================================================== */

.hitop-studien-karte {
	overflow: hidden;
	border: 1px solid var(--wp--preset--color--brand-light, rgba(216, 63, 39, 0.1));
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.06);
}

/* Abstand zwischen den Karten eines Panels: 64px (Designer-Pin 15.07.).
   blockGap wird durch die WP-:where()-Layoutregel + diesen Reset auf 0 gedrueckt,
   daher den Karten-Abstand deterministisch ueber adjacent-sibling setzen. */
.hitop-studien-liste__panel > .hitop-studien-karte {
	margin-top: 0;
	margin-bottom: 0;
}

.hitop-studien-liste__panel > .hitop-studien-karte + .hitop-studien-karte {
	margin-top: 64px;
}

/* Filter-Pills zentriert wie im Figma. */
.hitop-studien-liste .hitop-tabs__nav {
	justify-content: center;
}

@media (max-width: 600px) {
	.hitop-studien-karte__header,
	.hitop-studien-karte__body {
		padding-left: 20px !important;
		padding-right: 20px !important;
	}
}

/* ==========================================================================
   Kampagnen-LP2 Hero (2026-07-21) — Geraete-Bild-Crop Mobile/Tablet
   Die generische Mobile-Crop-Regel (object-position 20% 25%) ist auf das
   Home-Panorama hero-couple.webp kalibriert. LP2 nutzt newsletter-device.webp
   (Geraet mittig-links, Elektroden unten links) — der 20%/25%-Crop schneidet
   das Geraet ab. --device-Modifier rueckt das Crop-Fenster auf das Geraet.
   ========================================================================== */
@media (max-width: 781px) {
	.hitop-hero-split-card--device .wp-block-cover__image-background,
	.hitop-hero-split-card--device img[data-object-fit="cover"] {
		object-position: 30% 60% !important;
	}
}
@media (min-width: 782px) and (max-width: 1024px) {
	.hitop-hero-split-card--device .wp-block-cover__image-background,
	.hitop-hero-split-card--device img[data-object-fit="cover"] {
		object-position: 30% 60% !important;
	}
}