.cmplz-video.cmplz-iframe-styles{background-color:transparent}.cmplz-video.cmplz-hidden{visibility:hidden !important}.cmplz-blocked-content-notice{display:none}.cmplz-placeholder-parent{height:inherit}.cmplz-optin .cmplz-blocked-content-container .cmplz-blocked-content-notice,.cmplz-optin .cmplz-wp-video .cmplz-blocked-content-notice,.cmplz-optout .cmplz-blocked-content-container .cmplz-blocked-content-notice,.cmplz-optout .cmplz-wp-video .cmplz-blocked-content-notice{display:block}.cmplz-blocked-content-container,.cmplz-wp-video{animation-name:cmplz-fadein;animation-duration:600ms;background:#FFF;border:0;border-radius:3px;box-shadow:0 0 1px 0 rgba(0,0,0,0.5),0 1px 10px 0 rgba(0,0,0,0.15);display:flex;justify-content:center;align-items:center;background-repeat:no-repeat !important;background-size:cover !important;height:inherit;position:relative}.cmplz-blocked-content-container.gmw-map-cover,.cmplz-wp-video.gmw-map-cover{max-height:100%;position:absolute}.cmplz-blocked-content-container.cmplz-video-placeholder,.cmplz-wp-video.cmplz-video-placeholder{padding-bottom:initial}.cmplz-blocked-content-container iframe,.cmplz-wp-video iframe{visibility:hidden;max-height:100%;border:0 !important}.cmplz-blocked-content-container .cmplz-custom-accept-btn,.cmplz-wp-video .cmplz-custom-accept-btn{white-space:normal;text-transform:initial;cursor:pointer;position:absolute !important;width:100%;top:50%;left:50%;transform:translate(-50%,-50%);max-width:200px;font-size:14px;padding:10px;background-color:rgba(0,0,0,0.5);color:#fff;text-align:center;z-index:98;line-height:23px}.cmplz-blocked-content-container .cmplz-custom-accept-btn:focus,.cmplz-wp-video .cmplz-custom-accept-btn:focus{border:1px dotted #cecece}.cmplz-blocked-content-container .cmplz-blocked-content-notice,.cmplz-wp-video .cmplz-blocked-content-notice{white-space:normal;text-transform:initial;position:absolute !important;width:100%;top:50%;left:50%;transform:translate(-50%,-50%);max-width:300px;font-size:14px;padding:10px;background-color:rgba(0,0,0,0.5);color:#fff;text-align:center;z-index:98;line-height:23px}.cmplz-blocked-content-container .cmplz-blocked-content-notice .cmplz-links,.cmplz-wp-video .cmplz-blocked-content-notice .cmplz-links{display:block;margin-bottom:10px}.cmplz-blocked-content-container .cmplz-blocked-content-notice .cmplz-links a,.cmplz-wp-video .cmplz-blocked-content-notice .cmplz-links a{color:#fff}.cmplz-blocked-content-container .cmplz-blocked-content-notice .cmplz-blocked-content-notice-body,.cmplz-wp-video .cmplz-blocked-content-notice .cmplz-blocked-content-notice-body{display:block}.cmplz-blocked-content-container div div{display:none}.cmplz-wp-video .cmplz-placeholder-element{width:100%;height:inherit}@keyframes cmplz-fadein{from{opacity:0}to{opacity:1}}/*
Theme Name: Socialvantix
Theme URI: https://socialvantix.de
Description: Individuelles WooCommerce-Theme für Socialvantix – Social-Media-Reichweite (Follower, Likes, Views).
Author: Özgür / Mavilab
Version: 0.2.53
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: hypeflow
*/

:root {
	--hf-bg: #f6f7fb;
	--hf-bg-2: #ffffff;
	--hf-bg-3: #f1f2f7;
	--hf-line: rgba(20,18,28,0.10);
	--hf-line-2: rgba(20,18,28,0.18);
	--hf-ink: #14121c;
	--hf-muted: #6b6878;
	--hf-soft: #3a3744;
	--hf-accent: #704BE8;
	--hf-accent-soft: rgba(124,92,255,0.10);
	--hf-accent-2: #f5a623;
	--hf-accent-grad: linear-gradient(135deg,#7C5CFF 0%,#8B5CF6 54%,#B84CFF 100%);
	--hf-success: #177a50;
	--hf-icon-bg: rgba(20,18,28,0.05);
	--hf-shadow: 0 10px 30px rgba(20,18,28,0.08);
	--hf-font: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
	--hf-radius: 12px;
}

* { box-sizing: border-box; }

body {
	margin: 0;
	background: var(--hf-bg);
	color: var(--hf-soft);
	font-family: var(--hf-font);
	font-size: 16px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

a { color: var(--hf-accent); text-decoration: none; }
a:hover { color: #9b82ff; }
h1, h2, h3, h4 { color: var(--hf-ink); font-weight: 600; line-height: 1.2; }
img { max-width: 100%; height: auto; }

.hf-container { max-width: 1140px; margin: 0 auto; padding: 0 24px; }

/* Header */
.hf-header {
	position: sticky; top: 0; z-index: 500;
	background: rgba(10, 6, 18, 0.9);
	backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--hf-line);
}
.hf-header-inner { display: flex; align-items: center; justify-content: space-between; height: 70px; }
.hf-logo { display: inline-flex; align-items: center; gap: 12px; font-size: 21px; font-weight: 700; color: var(--hf-ink); margin-right: 34px; }
.hf-logo .hf-mark { width: 30px; height: 30px; border-radius: 9px; background: var(--hf-accent); display: inline-flex; align-items: center; justify-content: center; color: #fff; }
.hf-logo span { color: var(--hf-accent); }
.hf-nav { display: flex; align-items: center; gap: 22px; }
.hf-nav a { display: inline-flex; align-items: center; gap: 7px; color: var(--hf-muted); font-size: 14px; }
.hf-nav a:hover { color: var(--hf-ink); }
.hf-nav-status-ico { display: inline-flex; width: 15px; height: 15px; }
.hf-nav-status-ico svg { width: 100%; height: 100%; }
/* Mit „Bestellstatus“ war die deutsche Leiste 1170 px breit genug nur ohne
   Umbruch und mit engerem Abstand (28.09.2026, gemessen de/en/it/tr). Darunter
   steht der Eintrag nur im aufgeklappten Menue (Burger), wie bei 390 px. */
@media (min-width: 1200px) {
	.hf-nav { gap: 16px; }
	/* Nur die Leiste selbst, nicht die Kacheln in den Menues (die sind auch
	   Links in .hf-nav und brachen sonst nicht mehr um, 29.09.2026). */
	.hf-nav > a, .hf-mega-trigger { white-space: nowrap; }
	.hf-header .hf-logo { margin-right: 26px; }
}
@media (max-width: 1199px) { .hf-nav .hf-nav-status { display: none; } }
/* Chip als Link auf die Statusseite: bleibt optisch die Pille, der Link deckt sie ganz ab. */
.hf-chip-status { position: relative; transition: border-color .15s, color .15s; }
.hf-chip-status a { color: inherit; text-decoration: none; }
.hf-chip-status a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.hf-chip-status:hover, .hf-chip-status:focus-within { border-color: var(--hf-line-2); color: var(--hf-ink); }
.hf-chip-status a:focus-visible { outline: none; }
.hf-chip-status:focus-within { outline: 2px solid var(--hf-accent, #704be8); outline-offset: 2px; }
.hf-nav-ico { display: inline-flex; }
.hf-nav-ico svg { width: 17px; height: 17px; }
/* Mega-Menü (Desktop, bayigram-inspiriert) */
.hf-mega-wrap { position: relative; }
.hf-mega-trigger { display: inline-flex; align-items: center; gap: 7px; background: transparent; border: 0; font-family: inherit; font-size: 14px; color: var(--hf-muted); cursor: pointer; padding: 0; }
.hf-mega-wrap:hover .hf-mega-trigger, .hf-mega-trigger:focus-visible { color: var(--hf-ink); }
.hf-mega-chev { width: 14px; height: 14px; transition: transform .18s ease; }
.hf-mega-wrap:hover .hf-mega-chev { transform: rotate(180deg); }
.hf-mega-panel {
	position: absolute; top: calc(100% + 18px); left: 50%; transform: translateX(-50%) translateY(8px);
	width: 720px; max-width: 86vw;
	background: var(--hf-bg-2);
	border: 1px solid var(--hf-line);
	border-radius: 20px;
	box-shadow: 0 24px 60px rgba(20,18,28,0.16);
	padding: 20px;
	opacity: 0; visibility: hidden; pointer-events: none;
	transition: opacity .18s ease, transform .18s ease, visibility .18s;
	z-index: 510;
}
.hf-mega-panel::before { content: ''; position: absolute; top: -18px; left: 0; right: 0; height: 18px; }
.hf-mega-wrap:hover .hf-mega-panel,
.hf-mega-wrap:focus-within .hf-mega-panel {
	opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0);
}
.hf-mega-head { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.hf-mega-search { position: relative; flex: 1; display: flex; align-items: center; }
.hf-mega-search svg { position: absolute; left: 14px; width: 17px; height: 17px; color: var(--hf-muted); pointer-events: none; }
.hf-mega-search input { width: 100%; padding: 11px 14px 11px 40px; border-radius: 12px; border: 1px solid var(--hf-line); background: var(--hf-bg-3); font-family: inherit; font-size: 14px; color: var(--hf-ink); }
.hf-mega-search input:focus { outline: none; border-color: var(--hf-accent); box-shadow: 0 0 0 3px var(--hf-accent-soft); }
.hf-nav .hf-mega-all { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; font-size: 13px; font-weight: 700; color: var(--hf-accent); }
.hf-mega-all svg { width: 15px; height: 15px; }
.hf-nav .hf-mega-all:hover { color: #9b82ff; }
.hf-mega-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
/* Kachelhoehe folgt dem Text (29.09.2026): vorher aspect-ratio 1 / 0.82 mit
   overflow hidden, Platz fuer zwei Zeilen; „Instagram Followers USA“ zeigte nur
   das U der dritten Zeile. Das Raster gleicht die Hoehe je Reihe an. */
.hf-nav .hf-mega-tile {
	position: relative; overflow: hidden;
	display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: 8px;
	min-height: 104px; height: auto; container-type: inline-size;
	padding: 12px; border-radius: 14px;
	background: var(--tile-bg, var(--hf-accent-grad));
	color: #fff;
	transition: transform .15s ease, box-shadow .15s ease;
}
.hf-nav .hf-mega-tile:hover { transform: translateY(-3px); box-shadow: 0 10px 22px rgba(20,18,28,0.18); color: #fff; }
.hf-mega-tile-ico { flex: none; width: 26px; height: 26px; margin-bottom: auto; filter: drop-shadow(0 1px 3px rgba(0,0,0,0.25)); }
.hf-mega-tile-ico svg { width: 100%; height: 100%; }
.hf-mega-tile-txt { max-width: 100%; font-size: 13px; font-weight: 700; line-height: 1.15; overflow-wrap: anywhere; hyphens: auto; text-shadow: 0 1px 3px rgba(0,0,0,0.2); }
@container (max-width: 86px) { .hf-mega-tile-txt { font-size: 12px; } } /* Kachel unter 110 px (Innenbreite ohne 2 x 12 px Rand) */

/* Laender-Hub-Zeile unter den Kacheln im Panel "Beliebte Services" (24.08.2026).
   Bewusst eine Zeile und keine sechste Kachel: das Raster zeigt Produkte, diese
   Zeile fuehrt auf eine Uebersichtsseite. Erscheint nur auf DE und EN. */
.hf-mega-foot {
	display: flex; align-items: center; gap: 12px;
	margin-top: 12px; padding: 12px 14px;
	border: 1px solid var(--hf-line); border-radius: 12px;
	background: var(--hf-accent-soft);
	color: inherit; text-decoration: none;
	transition: border-color .15s ease, transform .15s ease;
}
.hf-mega-foot:hover { color: inherit; border-color: var(--hf-accent); transform: translateY(-1px); }
.hf-mega-foot-ico { flex: none; font-size: 22px; line-height: 1; }
.hf-mega-foot-txt { display: grid; gap: 2px; min-width: 0; }
.hf-mega-foot-txt strong { font-size: 14px; font-weight: 800; color: var(--hf-ink); }
.hf-mega-foot-txt span { font-size: 12px; line-height: 1.45; color: var(--hf-muted); }
.hf-mega-foot-go { flex: none; margin-left: auto; font-size: 15px; color: var(--hf-accent); transition: transform .15s ease; }
.hf-mega-foot:hover .hf-mega-foot-go { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) {
	.hf-mega-foot, .hf-mega-foot-go { transition: none; }
	.hf-mega-foot:hover { transform: none; }
	.hf-mega-foot:hover .hf-mega-foot-go { transform: none; }
}

/* Live-Suchergebnisse im Plattformen-Panel (ersetzt das Grid während der Eingabe) */
.hf-mega-search-results { display: flex; flex-direction: column; gap: 2px; max-height: 340px; overflow-y: auto; }
.hf-nav .hf-mega-result-row {
	display: flex; align-items: center; gap: 12px;
	padding: 9px 10px; border-radius: 12px;
	color: var(--hf-ink); font-size: 14px; font-weight: 600;
	transition: background .15s ease;
}
.hf-nav .hf-mega-result-row:hover { background: var(--hf-bg-3); color: var(--hf-ink); }
.hf-mega-result-ico { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0; background: color-mix(in srgb, var(--hf-ink) 6%, transparent); color: var(--hf-soft); }
.hf-mega-result-ico svg { width: 19px; height: 19px; }
.hf-mega-result-sub { display: block; font-size: 11px; font-weight: 600; color: var(--hf-muted); margin-top: 1px; }
.hf-mega-noresults { padding: 18px 10px; color: var(--hf-muted); font-size: 14px; text-align: center; }

/* Zusätzliche Nav-Trigger neben "Plattformen": Beliebte Services + Tools nutzen dieselben
   .hf-mega-tile-Kacheln wie das Plattform-Grid, nur Tools in einem schmalen Dropdown. */
.hf-mega-badge { display: inline-flex; align-items: center; font-size: 10px; font-weight: 800; letter-spacing: .03em; color: #fff; background: var(--hf-accent); border-radius: 20px; padding: 1px 7px; margin-left: 2px; }
.hf-mega-panel-title { font-size: 15px; font-weight: 800; color: var(--hf-ink); }

.hf-mega-panel-narrow { width: max-content; min-width: 0; padding: 10px; left: 0; transform: translateY(8px); }
.hf-mega-wrap:hover .hf-mega-panel-narrow,
.hf-mega-wrap:focus-within .hf-mega-panel-narrow { transform: translateY(0); }
.hf-mega-grid-tools { grid-template-columns: repeat(2, 132px); }

.hf-header-cta { display: flex; align-items: center; gap: 14px; margin-left: 12px; }
.hf-cart { color: var(--hf-soft); font-size: 14px; position: relative; }
.hf-cart .hf-badge { background: var(--hf-accent); color: #fff; font-size: 11px; border-radius: 20px; padding: 1px 7px; margin-left: 4px; }

/* Sprach-Dropdown im Header */
.hf-lang-switch { position: relative; }
.hf-lang-btn { display: inline-flex; align-items: center; gap: 5px; background: none; border: 1px solid var(--hf-line); border-radius: 20px; padding: 6px 10px; font-size: 13px; font-weight: 700; color: var(--hf-ink); cursor: pointer; line-height: 1; }
.hf-lang-btn:hover { border-color: var(--hf-accent); }
.hf-lang-code { letter-spacing: 0.3px; }
.hf-lang-menu { position: absolute; top: calc(100% + 8px); right: 0; background: #fff; border: 1px solid var(--hf-line); border-radius: 12px; box-shadow: 0 12px 30px rgba(20,20,20,.12); padding: 6px; min-width: 150px; opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .15s ease, transform .15s ease, visibility .15s; z-index: 510; }
.hf-lang-switch.is-open .hf-lang-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.hf-lang-item { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 8px; color: var(--hf-ink); font-size: 14px; cursor: pointer; }
.hf-lang-item:hover { background: var(--hf-soft, #f5f6f7); }
.hf-lang-item.is-active { font-weight: 700; color: var(--hf-accent); }

/* Buttons */
.hf-btn {
	display: inline-flex; align-items: center; gap: 8px;
	background: var(--hf-accent); color: #fff;
	font-size: 15px; font-weight: 600;
	padding: 12px 22px; border-radius: 10px; border: 0; cursor: pointer;
	transition: background .15s ease, transform .1s ease;
}
.hf-btn:hover { background: #6b4bff; color: #fff; }
.hf-btn:active { transform: scale(0.98); }
.hf-btn-ghost { background: transparent; border: 1px solid var(--hf-line); color: var(--hf-soft); }
.hf-btn-ghost:hover { background: var(--hf-bg-2); color: var(--hf-ink); }

/* Hero */
.hf-hero { padding: 70px 0 50px; text-align: center; }
.hf-hero .hf-pill { display: inline-flex; align-items: center; gap: 7px; background: #170d28; border: 1px solid var(--hf-line); color: var(--hf-soft); font-size: 13px; padding: 6px 14px; border-radius: 20px; margin-bottom: 22px; }
.hf-hero h1 { font-size: 44px; margin: 0 0 16px; }
.hf-hero h1 em { color: var(--hf-accent); font-style: normal; }
.hf-hero p { font-size: 17px; color: var(--hf-muted); max-width: 540px; margin: 0 auto 30px; }

/* Trust strip */
.hf-trust { display: flex; flex-wrap: wrap; justify-content: center; gap: 28px; padding: 22px 0; border-top: 1px solid var(--hf-line); border-bottom: 1px solid var(--hf-line); background: var(--hf-bg-3); }
.hf-trust span { font-size: 13px; color: var(--hf-muted); }
.hf-trust b { color: var(--hf-accent); }

/* Section */
.hf-section { padding: 56px 0; }
.hf-section h2 { font-size: 28px; text-align: center; margin: 0 0 8px; }
.hf-section .hf-sub { text-align: center; color: var(--hf-muted); margin: 0 0 36px; }

/* Card grid */
.hf-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; }
.hf-card { background: var(--hf-bg-2); border: 1px solid var(--hf-line); border-radius: var(--hf-radius); padding: 22px; transition: border-color .15s ease, transform .1s ease; }
.hf-card:hover { border-color: var(--hf-accent); transform: translateY(-2px); }
.hf-card .hf-ico {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 12px;
	background: var(--hf-accent-soft);
	color: var(--hf-accent);
	font-size: 24px;
	line-height: 1;
	box-sizing: border-box;
}
.hf-card .hf-ico svg { width: 24px; height: 24px; display: block; }
.hf-card h3 { font-size: 17px; margin: 12px 0 4px; }
.hf-card p { font-size: 13px; color: var(--hf-muted); margin: 0; }

/* WooCommerce overrides */
.woocommerce-products-header__title, .woocommerce h1, .woocommerce h2 { color: var(--hf-ink); }
ul.products { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; list-style: none; margin: 0; padding: 0; }
ul.products li.product { background: var(--hf-bg-2); border: 1px solid var(--hf-line); border-radius: var(--hf-radius); padding: 20px; text-align: left; }
ul.products li.product:hover { border-color: var(--hf-accent); }
ul.products li.product .woocommerce-loop-product__title { font-size: 16px; color: var(--hf-ink); padding: 0; margin: 0 0 6px; }
ul.products li.product .price { color: var(--hf-accent) !important; font-weight: 600; }
ul.products li.product .price .amount { color: var(--hf-accent); }
ul.products li.product a.button, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce #respond input#submit {
	background: var(--hf-accent); color: #fff; border-radius: 9px; font-weight: 600; padding: 10px 16px; border: 0;
}
.woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce button.button.alt:hover { background: #6b4bff; color: #fff; }
.woocommerce span.price, .woocommerce div.product p.price, .woocommerce div.product span.price { color: var(--hf-accent); font-weight: 600; }
.woocommerce div.product .product_title { color: var(--hf-ink); }
.woocommerce .woocommerce-message, .woocommerce-info, .woocommerce .cart-collaterals .cart_totals,
.woocommerce table.shop_table, .woocommerce-checkout #payment {
	background: var(--hf-bg-2); border: 1px solid var(--hf-line); color: var(--hf-soft); border-radius: var(--hf-radius);
}
.woocommerce table.shop_table th, .woocommerce table.shop_table td { color: var(--hf-soft); border-color: var(--hf-line); }
.woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea, .select2-container--default .select2-selection--single {
	background: var(--hf-bg-3); border: 1px solid var(--hf-line); color: var(--hf-ink); border-radius: 9px; padding: 10px;
}
.woocommerce-breadcrumb { color: var(--hf-muted); }

/* Footer */
.hf-footer { border-top: 1px solid var(--hf-line); background: var(--hf-bg-3); padding: 44px 0 30px; margin-top: 60px; }
.hf-footer .hf-cols { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 28px; }
.hf-footer h4 { font-size: 14px; margin: 0 0 14px; }
.hf-footer a { display: block; color: var(--hf-muted); font-size: 13px; margin-bottom: 8px; }
.hf-footer a:hover { color: var(--hf-ink); }
.hf-footer .hf-copy { text-align: center; color: var(--hf-muted); font-size: 12px; margin-top: 34px; padding-top: 20px; border-top: 1px solid var(--hf-line); }
/* Footer-Logo: identisch zum Header (die generische .hf-footer a Regel würde sonst display:block + 13px erzwingen) */
.hf-copy .hf-logo { display: inline-flex !important; align-items: center; gap: 12px; font-size: 21px !important; margin-bottom: 0; }
.hf-copy .hf-logo .hf-word { color: var(--hf-ink); }
.hf-copy .hf-logo .hf-word span { color: var(--hf-accent); }

@media (max-width: 782px) {
	.hf-nav { display: none; }
	.hf-hero h1 { font-size: 32px; }
	.hf-footer .hf-cols { grid-template-columns: 1fr 1fr; }
}

/* ---- Konfigurator-Landingpage ---- */
.hf-cfg-wrap { padding-top: 30px; }
.hf-cfg-top { text-align: center; margin-bottom: 34px; }
.hf-cfg-top h1 { font-size: 36px; margin: 10px 0 12px; }
.hf-stars { color: var(--hf-accent-2); font-size: 15px; }
.hf-stars span { color: var(--hf-muted); font-size: 13px; }
.hf-cfg-intro { color: var(--hf-muted); max-width: 640px; margin: 0 auto; font-size: 16px; }

.hf-cfg-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.hf-cfg-card { background: var(--hf-bg-2); border: 1px solid var(--hf-line); border-radius: 16px; padding: 24px; }
.hf-cfg-card.is-featured { border-color: var(--hf-accent); box-shadow: 0 0 0 1px var(--hf-accent); }
.hf-cfg-head { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
.hf-cfg-flag { font-size: 24px; }
.hf-cfg-head h2,
.hf-cfg-head h3 { font-size: 20px; margin: 0; }
.hf-cfg-label { font-size: 12px; color: var(--hf-muted); margin: 16px 0 8px; }

.hf-steps { display: flex; flex-direction: column; gap: 6px; }
.hf-step { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border: 1px solid var(--hf-line); border-radius: 10px; cursor: pointer; background: var(--hf-bg-3); transition: border-color .12s ease; }
.hf-step:hover { border-color: var(--hf-accent); }
.hf-step.selected { border-color: var(--hf-accent); background: rgba(124,92,255,0.12); }
.hf-step input { accent-color: var(--hf-accent); }
.hf-step-qty { font-weight: 600; color: var(--hf-ink); }
.hf-step-badge { background: var(--hf-accent); color: #fff; font-size: 10px; font-weight: 600; padding: 2px 7px; border-radius: 20px; }
.hf-step-price { margin-left: auto; color: var(--hf-accent); font-weight: 600; }

.hf-cfg-input { width: 100%; padding: 12px 14px; background: var(--hf-bg-3); color: var(--hf-ink); border: 1px solid var(--hf-line); border-radius: 10px; font-size: 15px; box-sizing: border-box; }
.hf-cfg-input::placeholder { color: rgba(255,255,255,0.35); }
select.hf-cfg-input { appearance: none; }
textarea.hf-cfg-input { resize: vertical; min-height: 96px; font-family: inherit; line-height: 1.5; }
.hf-cfg-hint { font-size: 12px; color: var(--hf-muted); margin: 6px 0 0; }

.hf-cfg-benefits { list-style: none; padding: 0; margin: 18px 0; }
.hf-cfg-benefits li { font-size: 13px; color: var(--hf-soft); padding: 5px 0 5px 24px; position: relative; }
.hf-cfg-benefits li::before { content: "✓"; position: absolute; left: 0; color: var(--hf-success); font-weight: 700; }

.hf-cfg-btn { width: 100%; justify-content: center; font-size: 16px; padding: 15px; }
/*
 * Tempo-Zeile unter dem Bestellknopf (17.09.2026). Steht UNTER dem Knopf, und
 * die Hoehe ist reserviert: beim Wechsel der Herkunft kann der Text wegfallen,
 * und ein Knopf, der dabei springt, kostet am Handy den Klick.
 */
.hf-eck-zeile { min-height: 18px; margin: 8px 0 0; font-size: 12px; line-height: 1.5; color: var(--hf-muted); text-align: center; }
/* Tageswahl (Einheit 2, 28.09.2026): Sticker im Stil der Herkunfts-Sticker,
   Zahlenfeld erst nach „Tage selbst wählen“, Schalter „Natürlicher Verlauf“. */
.hf-tagewahl { margin: 0 0 4px; }
/* Sticker 28.09.2026 etwa 12 % kleiner als vorher (Spalte x 0,88, hoechstens
   61 statt 70 px), damit fuenf auch bei 320 px in eine Zeile passen, Schrift
   nie unter 11 px. Unter 300 px Reihenbreite (Handys) zeigt „Sofort“ nur den
   Blitz (Wort im title), weil „Hemen“/„Subito“ sonst den Ring beruehren. */
.hf-tw-sticker { container-type: inline-size; display: flex; justify-content: space-between; gap: 6px; padding: 8px 2px 4px; }
.hf-tw-knopf { --hf-tw-dreh: 0deg; position: relative; display: grid; place-content: center; justify-items: center; gap: 1px; width: max(35px, min(61px, calc((100% - 24px) / 5 * .88))); aspect-ratio: 1; padding: 0; border-radius: 50%; border: 1px solid var(--hf-line); background: #fff; box-shadow: 0 8px 18px rgba(20,18,28,.08); color: var(--hf-ink); font: inherit; cursor: pointer; transform: rotate(var(--hf-tw-dreh)); transition: transform .2s cubic-bezier(.2,.7,.2,1), box-shadow .2s, border-color .2s; }
.hf-tw-knopf:nth-child(1) { --hf-tw-dreh: -3deg; } .hf-tw-knopf:nth-child(2) { --hf-tw-dreh: 2deg; } .hf-tw-knopf:nth-child(3) { --hf-tw-dreh: -1deg; } .hf-tw-knopf:nth-child(4) { --hf-tw-dreh: 3deg; } .hf-tw-knopf:nth-child(5) { --hf-tw-dreh: -2deg; }
.hf-tw-knopf:hover { transform: rotate(0) translateY(-2px); }
.hf-tw-gross { font-size: clamp(14px, 4vw, 17px); font-weight: 800; line-height: 1; }
.hf-tw-klein { font-size: 11px; font-weight: 700; line-height: 1.05; color: var(--hf-muted); }
@container (max-width: 300px) {
	.hf-tw-sofort .hf-tw-klein { display: none; }
	.hf-tw-sofort .hf-tw-gross { font-size: 17px; }
}
@container (max-width: 250px) {
	.hf-tw-gross { font-size: 13px; }
	.hf-tw-klein { letter-spacing: -.4px; }
}
.hf-tw-knopf.is-gewaehlt { border: 2px solid var(--hf-accent, #704be8); box-shadow: 0 10px 22px rgba(112,75,232,.22); }
.hf-tw-knopf.is-gedaempft { opacity: .4; box-shadow: none; cursor: help; }
.hf-tw-verlauf.is-gesperrt .hf-tw-schalter { opacity: .45; cursor: help; }
.hf-tw-verlauf.is-gesperrt .hf-tw-verlauf-text strong, .hf-tw-verlauf.is-gesperrt .hf-tw-plusbetrag { color: var(--hf-muted); }
/* Sprechblase mit dem Grund (blasser Sticker, gesperrter Schalter). */
.hf-tagewahl { position: relative; }
.hf-tw-blase { position: absolute; z-index: 5; max-width: min(260px, 100%); padding: 7px 11px; border: 1px solid var(--hf-line); border-radius: 12px; background: #fff; box-shadow: 0 8px 22px rgba(20,18,28,.12); color: var(--hf-ink); font-size: 12.5px; font-weight: 600; line-height: 1.35; pointer-events: none; }
.hf-tw-blase::after { content: ""; position: absolute; top: 100%; left: var(--hf-tw-spitze, 50%); width: 10px; height: 10px; margin: -5px 0 0 -5px; border: solid var(--hf-line); border-width: 0 1px 1px 0; background: #fff; transform: rotate(45deg); }
.hf-tw-blase[hidden] { display: none; }
.hf-tw-link { display: inline-block; margin: 6px 0 0; padding: 0; border: 0; background: none; color: var(--hf-accent, #704be8); font: inherit; font-size: 13px; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.hf-tw-feld { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 8px; }
.hf-tw-feld[hidden], .hf-tw-link[hidden], .hf-tw-verlauf[hidden], .hf-tw-balken[hidden] { display: none; }
.hf-tw-zahl { display: inline-flex; align-items: center; border: 1px solid var(--hf-line); border-radius: 999px; background: #fff; }
.hf-tw-zahl button { width: 36px; height: 36px; border: 0; background: none; color: var(--hf-accent, #704be8); font-size: 18px; font-weight: 700; cursor: pointer; }
.hf-tw-zahl button:disabled { color: var(--hf-line-2); cursor: default; }
.hf-tw-eingabe { width: 42px; border: 0; background: none; text-align: right; font: 800 16px var(--hf-font, inherit); color: var(--hf-ink); -moz-appearance: textfield; }
.hf-tw-eingabe::-webkit-outer-spin-button, .hf-tw-eingabe::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.hf-tw-einheit { padding: 0 2px 0 4px; font-weight: 700; color: var(--hf-ink); font-size: 14px; }
.hf-tw-hinweis { font-size: 12.5px; color: var(--hf-muted); }
.hf-tw-hinweis.is-gekappt { color: #9a6212; font-weight: 700; }
.hf-tw-pro-tag { margin: 8px 0 0; font-size: 13.5px; color: var(--hf-soft); }
.hf-tw-verlauf { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; padding: 10px 12px 10px 14px; border-radius: 18px; background: var(--hf-accent-soft); }
.hf-tw-verlauf-text strong { display: block; font-size: 13.5px; color: var(--hf-ink); }
.hf-tw-verlauf-text small { display: block; font-size: 12px; color: var(--hf-muted); }
.hf-tw-plusbetrag { font-weight: 700; color: var(--hf-accent, #704be8); margin-left: 4px; }
.hf-tw-plusbetrag .woocommerce-Price-amount { color: inherit; }
.hf-tw-schalter { position: relative; flex: 0 0 auto; width: 44px; height: 26px; border: 0; border-radius: 999px; background: var(--hf-line-2); cursor: pointer; transition: background .2s; }
.hf-tw-schalter::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.2); transition: transform .2s; }
.hf-tw-schalter[aria-checked="true"] { background: var(--hf-accent, #704be8); }
.hf-tw-schalter[aria-checked="true"]::after { transform: translateX(18px); }
.hf-tw-balken { margin-top: 10px; color: var(--hf-accent, #704be8); }
.hf-tw-saeulen { display: flex; align-items: flex-end; gap: 3px; height: 64px; padding-top: 2px; border-bottom: 1px solid var(--hf-line); }
.hf-tw-saeule { display: flex; flex: 1 1 0; flex-direction: column; justify-content: flex-end; align-items: center; min-width: 6px; height: 100%; }
.hf-tw-saeule i { display: block; width: 100%; border-radius: 3px 3px 0 0; background: currentColor; }
.hf-tw-saeule b { margin-bottom: 3px; font-size: 11px; font-weight: 700; line-height: 1; color: var(--hf-ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
.hf-tw-saeule.is-erst b { align-self: flex-start; }
.hf-tw-saeule.is-letzt b { align-self: flex-end; }
.hf-tw-achse { display: flex; justify-content: space-between; margin-top: 4px; font-size: 11px; font-weight: 600; color: var(--hf-muted); }
@media (max-width: 480px) { .hf-tw-saeulen { gap: 2px; } .hf-tw-saeule b, .hf-tw-achse { font-size: 10px; } }
@media (prefers-reduced-motion: reduce) { .hf-tw-knopf, .hf-tw-schalter, .hf-tw-schalter::after { transition: none; } }

/* Vertrauenszeile unter dem Warenkorb-Knopf (28.09.2026): Schloss, „Sichere
   Zahlung“ und die Zeichen der einen Sammlung in klein. Kein Rahmen. */
.hf-cfg-zahlung { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 10px; margin: 12px 0 0; font-size: 12.5px; color: var(--hf-muted); }
.hf-cfg-zahlung-text { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; white-space: nowrap; }
.hf-cfg-zahlung-text svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
/* ProvenExpert-Sticker (08.10.2026): helles Schild wie „Kurz gesagt“, fünf kleine Sterne. */
.hf-pe-sticker { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; padding: 6px 12px 6px 10px; border-radius: 999px; background: var(--hf-accent-soft); color: var(--hf-ink); font-size: 13px; font-weight: 650; line-height: 1.3; text-decoration: none; }
.hf-pe-sticker:hover { color: var(--hf-accent); }
.hf-pe-sterne { position: relative; display: inline-block; flex: none; height: 14px; line-height: 0; }
.hf-pe-sterne > span { display: inline-flex; gap: 1px; white-space: nowrap; }
.hf-pe-sterne svg { width: 14px; height: 14px; flex: none; }
.hf-pe-sterne-leer svg { fill: #d9d2f5; }
.hf-pe-sterne-voll { position: absolute; inset: 0 auto 0 0; overflow: hidden; }
.hf-pe-sterne-voll svg { fill: #f5a623; }
.hf-pe-sticker-produkt { margin: 4px 0 10px; }
.hf-pe-sticker-start { margin-top: 16px; }
/* Vorkauf-Fragen unter dem Kaufknopf (08.10.2026): hell, ohne Kasten, eine Zeile je Frage. */
.hf-cfg-vorfragen { margin: 14px 0 0; display: grid; gap: 2px; }
.hf-cfg-vorfragen details { border-top: 1px solid var(--hf-line); }
.hf-cfg-vorfragen details:last-child { border-bottom: 1px solid var(--hf-line); }
.hf-cfg-vorfragen summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 2px; font-size: 13.5px; font-weight: 650; color: var(--hf-ink); }
.hf-cfg-vorfragen summary::-webkit-details-marker { display: none; }
.hf-cfg-vorfragen summary::after { content: "+"; flex: none; width: 20px; height: 20px; border-radius: 999px; background: var(--hf-accent-soft); color: var(--hf-accent); display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 14px; line-height: 1; }
.hf-cfg-vorfragen details[open] summary::after { content: "–"; }
.hf-cfg-vorfragen p { margin: 0 2px 10px; font-size: 13px; line-height: 1.6; color: var(--hf-soft); }
.hf-pay.hf-pay-sm { --hf-pay-h: 20px; gap: 4px; margin: 0; flex-wrap: wrap; justify-content: center; }
.hf-eck-zeile[data-leer="1"] { visibility: hidden; }

.hf-cfg-section { margin: 56px 0; }
.hf-cfg-section h2 { font-size: 26px; text-align: center; margin: 0 0 28px; }
.hf-prose { max-width: 760px; margin: 0 auto; color: var(--hf-soft); }
.hf-prose p { margin: 0 0 16px; line-height: 1.75; }

.hf-faq { max-width: 760px; margin: 0 auto; }
.hf-faq details { border: 1px solid var(--hf-line); border-radius: 10px; background: var(--hf-bg-2); margin-bottom: 10px; padding: 4px 18px; }
.hf-faq summary { cursor: pointer; padding: 14px 0; font-weight: 600; color: var(--hf-ink); list-style: none; }
.hf-faq summary::-webkit-details-marker { display: none; }
.hf-faq summary::after { content: "+"; float: right; color: var(--hf-accent); font-size: 20px; line-height: 1; }
.hf-faq details[open] summary::after { content: "–"; }
.hf-faq-a { padding: 0 0 16px; color: var(--hf-muted); line-height: 1.7; }

@media (max-width: 782px) {
	.hf-cfg-grid { grid-template-columns: 1fr; }
	.hf-cfg-top h1 { font-size: 28px; }
}

/* ---- Vergleichstabelle ---- */
.hf-compare { max-width: 760px; margin: 0 auto; overflow-x: auto; }
.hf-compare table { width: 100%; border-collapse: collapse; background: var(--hf-bg-2); border: 1px solid var(--hf-line); border-radius: var(--hf-radius); overflow: hidden; }
.hf-compare th, .hf-compare td { padding: 14px 16px; text-align: left; border-bottom: 1px solid var(--hf-line); font-size: 14px; }
.hf-compare thead th { color: var(--hf-muted); font-weight: 500; }
.hf-compare th.hf-us, .hf-compare td.hf-us { color: var(--hf-ink); background: rgba(124,92,255,0.08); }
.hf-compare thead th.hf-us { color: var(--hf-accent); font-weight: 700; }
.hf-compare td:first-child { color: var(--hf-muted); }
.hf-compare tr:last-child td { border-bottom: 0; }

/* ---- Produkt-Kacheln (Shop & Kategorie) ---- */
.woocommerce ul.products,
ul.products { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 20px; list-style: none; margin: 0 !important; padding: 0; }
.woocommerce ul.products li.product,
ul.products li.product {
	width: auto !important; float: none !important; margin: 0 !important; padding: 0 !important;
	background: var(--hf-bg-2); border: 1px solid var(--hf-line); border-radius: 16px; overflow: hidden;
	text-align: left; display: flex; flex-direction: column;
	transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.woocommerce ul.products li.product:hover,
ul.products li.product:hover { transform: translateY(-5px); border-color: var(--hf-accent); box-shadow: 0 10px 30px rgba(124,92,255,0.18); }
.hf-pc-link { display: block; color: inherit; }
.hf-pc-link:hover { color: inherit; }
.hf-pc-tile { height: 140px; display: flex; align-items: center; justify-content: center; position: relative; }
.hf-pc-tile::after { content: ""; position: absolute; inset: 0; background: rgba(10,6,18,0.12); }
.hf-pc-tile svg { width: 56px; height: 56px; position: relative; z-index: 1; filter: drop-shadow(0 2px 6px rgba(0,0,0,.3)); transition: transform .25s ease; }
.woocommerce ul.products li.product:hover .hf-pc-tile svg { transform: scale(1.12); }
.hf-pc-body { padding: 16px 18px 4px; }
.hf-pc-cat { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--hf-muted); }
.hf-pc-title { font-size: 16px; margin: 6px 0 8px; color: var(--hf-ink); }
.hf-pc-price { color: var(--hf-accent); font-weight: 600; font-size: 15px; }
.hf-pc-btn { margin: 14px 18px 18px; display: flex; justify-content: center; }

/* Sortier-Dropdown dunkel */
.woocommerce-ordering select, .woocommerce .woocommerce-result-count {
	background: var(--hf-bg-2); color: var(--hf-soft); border: 1px solid var(--hf-line); border-radius: 9px; padding: 8px 12px;
}
.woocommerce .woocommerce-result-count { background: transparent; border: 0; padding: 0; }

/* Plattform-Kachel auf Startseite */
.hf-cat { padding: 0 !important; overflow: hidden; }
.hf-cat .hf-cat-tile { height: 120px; display: flex; align-items: center; justify-content: center; }
.hf-cat .hf-cat-tile svg { width: 48px; height: 48px; filter: drop-shadow(0 2px 6px rgba(0,0,0,.3)); }
.hf-cat .hf-cat-body { padding: 16px 18px 20px; }
.hf-cat h3 { margin: 0 0 4px; }

/* ---- Einblend-Animation ---- */
.hf-reveal { opacity: 0; transform: translate3d(0, 16px, 0); transition: opacity .5s ease, transform .5s ease; backface-visibility: hidden; }
.hf-reveal:not(.is-visible) { will-change: opacity, transform; }
.hf-reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .hf-reveal { opacity: 1; transform: none; transition: none; will-change: auto; } }

/* ---- Hero zweispaltig + Visual ---- */
.hf-hero { position: relative; overflow: hidden; text-align: left; }
.hf-hero-glow { position: absolute; top: -120px; right: -80px; width: 460px; height: 460px; background: radial-gradient(circle, rgba(124,92,255,0.28), transparent 60%); filter: blur(20px); pointer-events: none; z-index: 0; }
.hf-hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1.05fr .95fr; gap: 40px; align-items: center; }
.hf-hero-text h1 { font-size: 48px; margin: 0 0 16px; }
.hf-hero-text p { margin: 0 0 26px; max-width: 480px; }
.hf-hero-proof { display: flex; align-items: center; gap: 12px; margin-top: 26px; font-size: 13px; color: var(--hf-muted); }
.hf-avatars { display: flex; }
.hf-avatars span { width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--hf-bg); margin-left: -8px; }
.hf-avatars span:first-child { margin-left: 0; background: #7C5CFF; }
.hf-avatars span:nth-child(2) { background: #C6FF4F; }
.hf-avatars span:nth-child(3) { background: #ff6bd5; }
.hf-avatars span:nth-child(4) { background: #34d6ff; }

.hf-hero-visual { position: relative; }
.hf-hero-card { background: var(--hf-bg-2); border: 1px solid var(--hf-line); border-radius: 18px; padding: 22px; box-shadow: 0 20px 50px rgba(0,0,0,0.4); animation: hfFloat 6s ease-in-out infinite; }
.hf-hc-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.hf-hc-avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--hf-accent); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; }
.hf-hc-name { color: var(--hf-ink); font-weight: 600; font-size: 14px; }
.hf-hc-sub { color: var(--hf-muted); font-size: 12px; }
.hf-hc-badge { margin-left: auto; background: rgba(95,211,154,0.15); color: var(--hf-success); font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 8px; }
.hf-hc-big { font-size: 30px; font-weight: 700; color: var(--hf-ink); margin-bottom: 8px; }
.hf-hc-chart { width: 100%; height: 110px; display: block; }
.hf-hc-line { stroke-dasharray: 600; stroke-dashoffset: 600; animation: hfDraw 2.2s ease forwards .3s; }
.hf-hc-dot { animation: hfPulse 1.8s ease-in-out infinite 2.4s; }
.hf-hc-stats { display: flex; gap: 10px; margin-top: 14px; }
.hf-hc-stats div { flex: 1; background: var(--hf-bg-3); border: 1px solid var(--hf-line); border-radius: 10px; padding: 10px 12px; }
.hf-hc-stats span { display: block; font-size: 11px; color: var(--hf-muted); }
.hf-hc-stats strong { font-size: 15px; color: var(--hf-ink); }

.hf-bubble { position: absolute; width: 54px; height: 54px; border-radius: 16px; display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 24px rgba(0,0,0,0.35); }
.hf-bubble svg { width: 28px; height: 28px; }
.hf-bubble-1 { top: -22px; left: -18px; animation: hfFloat 5s ease-in-out infinite; }
.hf-bubble-2 { bottom: 30px; left: -26px; animation: hfFloat 7s ease-in-out infinite .6s; }
.hf-bubble-3 { top: 40px; right: -20px; animation: hfFloat 6.2s ease-in-out infinite .3s; }
@media (max-width: 520px) {
	.hf-bubble-2 { bottom: 90px; left: -10px; }
	.hf-bubble-3 { right: -10px; }
}

@keyframes hfFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes hfDraw { to { stroke-dashoffset: 0; } }
@keyframes hfPulse { 0%,100% { r: 5; opacity: 1; } 50% { r: 8; opacity: .6; } }
@media (prefers-reduced-motion: reduce) { .hf-hero-card, .hf-bubble, .hf-hc-line, .hf-hc-dot { animation: none; } .hf-hc-line { stroke-dashoffset: 0; } }

/* ---- Feature-Kacheln (Beliebte Services) ---- */
.hf-feat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; }
.hf-feat { display: block; background: var(--hf-bg-2); border: 1px solid var(--hf-line); border-radius: 16px; overflow: hidden; color: inherit; transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.hf-feat:hover { transform: translateY(-5px); border-color: var(--hf-accent); box-shadow: 0 14px 36px rgba(124,92,255,0.2); color: inherit; }
.hf-feat-top { position: relative; height: 92px; display: flex; align-items: center; justify-content: center; }
.hf-feat-top::after { content: ""; position: absolute; inset: 0; background: rgba(10,6,18,0.1); }
.hf-feat-top svg { width: 40px; height: 40px; position: relative; z-index: 1; filter: drop-shadow(0 2px 6px rgba(0,0,0,.3)); transition: transform .25s ease; }
.hf-feat:hover .hf-feat-top svg { transform: scale(1.15) rotate(-4deg); }
.hf-feat-badge { position: absolute; top: 10px; right: 10px; z-index: 2; background: rgba(10,6,18,0.55); color: #fff; font-size: 11px; font-weight: 600; padding: 4px 10px; border-radius: 20px; backdrop-filter: blur(4px); }
.hf-feat-body { padding: 16px 18px 18px; }
.hf-feat-body h3 { font-size: 17px; margin: 4px 0 12px; }
.hf-feat-row { display: flex; align-items: center; justify-content: space-between; }
.hf-feat-cta { color: var(--hf-accent); font-size: 13px; font-weight: 600; }

@media (max-width: 860px) {
	.hf-hero-grid { grid-template-columns: 1fr; }
	.hf-hero-visual { margin-top: 30px; max-width: 420px; }
	.hf-hero-text h1 { font-size: 34px; }
}

/* ================= REDESIGN v2 (premium, ruhig, conversion) ================= */

/* Plattform-Chips im Hero */
.hf-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.hf-chip { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border: 1px solid var(--hf-line); border-radius: 30px; color: var(--hf-soft); font-size: 13px; background: var(--hf-bg-2); transition: border-color .15s ease, color .15s ease; }
.hf-chip:hover { border-color: var(--hf-line-2); color: var(--hf-ink); }
.hf-chip-ico { display: inline-flex; }
.hf-chip-ico svg { width: 16px; height: 16px; }

/* Hero-Preview-Card (konkret statt abstrakt) */
.hf-preview { background: var(--hf-bg-2); border: 1px solid var(--hf-line); border-radius: 18px; padding: 22px; max-width: 380px; margin-left: auto; }
.hf-preview-head { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.hf-preview-head strong { display: block; color: var(--hf-ink); font-size: 15px; }
.hf-preview-head span { color: var(--hf-muted); font-size: 12px; }
.hf-preview-label { font-size: 12px; color: var(--hf-muted); margin-bottom: 8px; }
.hf-qty-chips { display: flex; gap: 8px; margin-bottom: 18px; }
.hf-qchip { flex: 1; padding: 10px 0; border: 1px solid var(--hf-line); background: var(--hf-bg-3); color: var(--hf-soft); border-radius: 10px; font-size: 14px; font-weight: 600; cursor: pointer; transition: all .15s ease; }
.hf-qchip:hover { border-color: var(--hf-line-2); }
.hf-qchip.active { border-color: var(--hf-accent); background: var(--hf-accent-soft); color: var(--hf-ink); }
.hf-preview-foot { display: flex; align-items: center; justify-content: space-between; padding-top: 16px; border-top: 1px solid var(--hf-line); }
.hf-preview-foot span { display: block; font-size: 12px; color: var(--hf-muted); }
.hf-prev-price { font-size: 24px; font-weight: 700; color: var(--hf-ink); }
.hf-preview-status { margin-top: 14px; font-size: 12px; color: var(--hf-muted); }

/* Kleines Plattform-Icon (ruhig, neutral) */
.hf-pc-icon { width: 42px; height: 42px; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.04); border: 1px solid var(--hf-line); flex: none; }
.hf-pc-icon svg { width: 22px; height: 22px; }

/* Produktkarte ruhig */
.woocommerce ul.products li.product, ul.products li.product { background: var(--hf-bg-2); border: 1px solid var(--hf-line); }
.woocommerce ul.products li.product:hover, ul.products li.product:hover { border-color: var(--hf-line-2); box-shadow: none; transform: translateY(-3px); }
.hf-pc { display: block; color: inherit; padding: 18px 18px 6px; }
.hf-pc:hover { color: inherit; }
.hf-pc-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.hf-pc-cat { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--hf-muted); }
.hf-pc-title { font-size: 16px; margin: 0 0 8px; color: var(--hf-ink); }
.hf-pc-flag {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 24px;
	height: 18px;
	margin-right: 7px;
	border-radius: 5px;
	border: 1px solid color-mix(in srgb, var(--hf-accent) 24%, var(--hf-line));
	background: color-mix(in srgb, var(--hf-accent) 8%, transparent);
	color: color-mix(in srgb, var(--hf-accent) 72%, var(--hf-ink));
	font-size: 10px;
	font-weight: 800;
	letter-spacing: .03em;
	vertical-align: 1px;
}
.hf-pc-price { color: var(--hf-ink); font-weight: 700; font-size: 17px; margin-bottom: 12px; }
.hf-pc-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.hf-pc-tags span { font-size: 11px; color: var(--hf-muted); background: var(--hf-bg-3); border: 1px solid var(--hf-line); border-radius: 6px; padding: 3px 8px; }
.hf-pc-btn { margin: 14px 18px 18px; display: flex; justify-content: center; }

/* Kategorie-Karte ruhig */
.hf-cat { display: block; }
.hf-cat-ico { width: 46px; height: 46px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.04); border: 1px solid var(--hf-line); margin-bottom: 14px; }
.hf-cat-ico svg { width: 24px; height: 24px; }
.hf-cat h3 { margin: 0 0 4px; }
.hf-cat p { color: var(--hf-muted); font-size: 13px; margin: 0; }

/* Feature-Karte ruhig */
.hf-feat { display: block; background: var(--hf-bg-2); border: 1px solid var(--hf-line); border-radius: 16px; padding: 18px; color: inherit; transition: transform .18s ease, border-color .18s ease; }
.hf-feat:hover { transform: translateY(-4px); border-color: var(--hf-line-2); color: inherit; box-shadow: none; }
.hf-feat-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.hf-feat-badge { background: var(--hf-accent-soft); color: #b9a9ff; font-size: 11px; font-weight: 600; padding: 4px 10px; border-radius: 20px; }
.hf-feat h3 { font-size: 16px; margin: 4px 0 10px; }
.hf-feat .hf-pc-tags { margin-bottom: 14px; }
.hf-feat-row { display: flex; align-items: center; justify-content: space-between; padding-top: 12px; border-top: 1px solid var(--hf-line); }
.hf-feat-cta { color: var(--hf-accent); font-size: 13px; font-weight: 600; }

/* Schritte */
.hf-steps3 { grid-template-columns: repeat(3, 1fr); }
.hf-step-num { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: var(--hf-accent-soft); color: var(--hf-accent); font-weight: 700; margin-bottom: 12px; }

/* Trust-Strip ruhiger */
.hf-trust { gap: 22px; }
.hf-trust span { color: var(--hf-soft); }

/* Mobile-Menü */
.hf-burger { display: flex; flex-direction: column; gap: 5px; width: 40px; height: 40px; align-items: center; justify-content: center; background: transparent; border: 1px solid var(--hf-line); border-radius: 10px; cursor: pointer; }
.hf-burger span { width: 18px; height: 2px; background: var(--hf-ink); transition: transform .2s ease, opacity .2s ease; }
.hf-burger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hf-burger.is-open span:nth-child(2) { opacity: 0; }
.hf-burger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.hf-cart-ico { display: none; }
/* Mobiles Slide-in-Panel (fixiert, eigener Scroll, Body-Scroll-Sperre) */
.hf-nav-backdrop { position: fixed; inset: 0; background: rgba(12,10,22,0.45); opacity: 0; visibility: hidden; transition: opacity .26s ease, visibility .26s ease; z-index: 1100; }
.hf-nav-backdrop.is-open { opacity: 1; visibility: visible; }

.hf-mobile-nav { display: flex; flex-direction: column; position: fixed; top: 0; right: 0; bottom: 0; width: min(86vw, 340px); background: var(--hf-bg-2); border-left: 1px solid var(--hf-line); box-shadow: -10px 0 34px rgba(0,0,0,0.18); transform: translateX(100%); transition: transform .28s ease; z-index: 1200; overflow-y: auto; -webkit-overflow-scrolling: touch; padding-bottom: 30px; }
.hf-mobile-nav.is-open { transform: translateX(0); }

/* WP Admin-Bar verschiebt das Panel nach unten, sonst wird der Kopf abgeschnitten */
body.admin-bar .hf-mobile-nav,
body.admin-bar .hf-nav-backdrop { top: 32px; }
@media screen and (max-width: 782px) {
	body.admin-bar .hf-mobile-nav,
	body.admin-bar .hf-nav-backdrop { top: 46px; }
}

.hf-mnav-head { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--hf-line); position: sticky; top: 0; background: var(--hf-bg-2); z-index: 2; }
.hf-mnav-close { width: 36px; height: 36px; margin-left: auto; display: inline-flex; align-items: center; justify-content: center; font-size: 26px; line-height: 1; color: var(--hf-muted); background: transparent; border: 1px solid var(--hf-line); border-radius: 9px; cursor: pointer; flex-shrink: 0; }
.hf-mnav-close:hover { color: var(--hf-ink); background: var(--hf-bg-3); }

/* Zurück-Button in Unterebene */
.hf-mnav-back { display: inline-flex; align-items: center; gap: 10px; padding: 0; background: transparent; border: 0; font-family: inherit; font-size: 16px; font-weight: 700; color: var(--hf-ink); cursor: pointer; }
.hf-mnav-back > svg:first-child { width: 22px; height: 22px; color: var(--hf-muted); }
.hf-mnav-back .hf-mnav-ico svg { width: 20px; height: 20px; }

/* Drill-down-Ebenen */
.hf-mnav-level { display: none; }
.hf-mnav-level.is-active { display: block; animation: hfMnavSlide .22s ease; }
@keyframes hfMnavSlide { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }
.hf-mnav-more .hf-mnav-row-txt { color: var(--hf-accent); font-weight: 600; }
.hf-mnav-sico { color: var(--hf-muted); }
.hf-mnav-sico svg { width: 20px; height: 20px; }

/* Suchfeld oben im Panel */
.hf-mnav-search { position: relative; margin: 16px 18px; }
.hf-mnav-search-ico { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--hf-muted); pointer-events: none; }
.hf-mnav-search input { width: 100%; padding: 13px 14px 13px 42px; background: var(--hf-bg-3); border: 1px solid var(--hf-line); border-radius: 12px; font-size: 14px; color: var(--hf-ink); }
.hf-mnav-search input:focus { outline: none; border-color: var(--hf-accent); }

/* Beliebte Suchanfragen */
.hf-mnav-label { padding: 8px 22px; font-size: 13px; font-weight: 700; color: var(--hf-ink); }
.hf-mnav-pop { padding-bottom: 10px; border-bottom: 1px solid var(--hf-line); }

/* Zeilen (beliebt + Plattformen): Icon + Text + Chevron */
.hf-mnav-row { display: flex; align-items: center; gap: 13px; width: 100%; padding: 13px 22px; color: var(--hf-ink); font-size: 15px; background: transparent; border: 0; font-family: inherit; text-align: left; cursor: pointer; }
.hf-mnav-row:hover { background: var(--hf-bg-3); }
.hf-mnav-ico { display: inline-flex; flex-shrink: 0; }
.hf-mnav-ico svg { width: 20px; height: 20px; }
.hf-mnav-row-txt { flex: 1; }
.hf-mnav-chev { width: 18px; height: 18px; color: var(--hf-muted); flex-shrink: 0; }
.hf-mnav-plats { padding-top: 6px; }

body.hf-nav-open { overflow: hidden; }

@media (max-width: 860px) {
	.hf-nav { display: none; }
	.hf-burger { display: flex; }
	.hf-hide-mobile { display: none; }
	.hf-cart-ico { display: inline; font-size: 18px; }
	.hf-hero-grid { grid-template-columns: 1fr; }
	.hf-hero-text h1 { font-size: 32px; }
	.hf-preview { margin: 24px auto 0; }
	.hf-steps3 { grid-template-columns: 1fr; }
	.hf-trust { gap: 12px 18px; padding: 16px 0; }
	.hf-trust span { font-size: 12px; }
	.hf-section { padding: 40px 0; }
}

/* Konfigurator: einzelne Karte zentrieren (Produkte ohne Deutsch-Variante) */
.hf-cfg-grid--single { grid-template-columns: minmax(0, 460px); justify-content: center; }

/* ---- Hero Schnellkauf-Widget ---- */
.hf-quickbuy { position: relative; z-index: 2; background: var(--hf-bg-2); border: 1px solid var(--hf-line); border-radius: 18px; padding: 22px; max-width: 400px; margin-left: auto; box-shadow: 0 24px 60px rgba(0,0,0,0.45); }
.hf-qb-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.hf-qb-head strong { display: block; color: var(--hf-ink); font-size: 15px; }
.hf-qb-head > div span { color: var(--hf-muted); font-size: 12px; }
.hf-qb-tag { margin-left: auto; background: var(--hf-accent-soft); color: #b9a9ff; font-size: 11px; font-weight: 600; padding: 4px 10px; border-radius: 20px; }
.hf-qb-products { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 16px; }
.hf-qprod {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	min-height: 42px;
	padding: 9px 10px;
	border: 1px solid var(--hf-line);
	border-radius: 11px;
	background: #fff;
	color: var(--hf-soft);
	font: inherit;
	font-size: 13px;
	font-weight: 750;
	cursor: pointer;
}
.hf-qprod span { display: inline-flex; }
.hf-qprod svg { width: 17px; height: 17px; }
.hf-qprod:hover,
.hf-qprod.active {
	border-color: var(--hf-accent);
	background: var(--hf-accent-soft);
	color: var(--hf-ink);
}
.hf-qb-spark { width: 100%; height: 48px; display: block; margin-bottom: 14px; opacity: .9; }
.hf-qb-input { width: 100%; padding: 12px 14px; background: var(--hf-bg-3); color: var(--hf-ink); border: 1px solid var(--hf-line); border-radius: 10px; font-size: 15px; box-sizing: border-box; margin-bottom: 16px; }
.hf-qb-input::placeholder { color: rgba(255,255,255,0.3); }
.hf-qb-input:focus { outline: none; border-color: var(--hf-accent); }
.hf-qb-btn { width: 100%; justify-content: center; font-size: 15px; padding: 14px; }
.hf-quickbuy .hf-preview-label { font-size: 12px; color: var(--hf-muted); margin-bottom: 8px; }
.hf-quickbuy .hf-qty-chips { margin-bottom: 16px; }
.hf-quickbuy .hf-preview-status { margin-top: 12px; font-size: 12px; color: var(--hf-muted); text-align: center; }

/* ---- Schnellkauf-Modul (eigener Abschnitt) ---- */
.hf-quickbuy-module { display: grid; grid-template-columns: 1fr 400px; gap: 40px; align-items: center; }
.hf-quickbuy-module .hf-quickbuy { margin: 0; max-width: none; }
.hf-qbm-text h2 { font-size: 28px; margin: 14px 0 14px; }
.hf-qbm-text p { color: var(--hf-muted); margin: 0 0 18px; max-width: 460px; }
.hf-qbm-list { list-style: none; padding: 0; margin: 0; }
.hf-qbm-list li { position: relative; padding: 6px 0 6px 26px; color: var(--hf-soft); font-size: 14px; }
.hf-qbm-list li::before { content: "✓"; position: absolute; left: 0; color: var(--hf-success); font-weight: 700; }
@media (max-width: 860px) {
	.hf-quickbuy-module { grid-template-columns: 1fr; gap: 26px; }
	.hf-quickbuy-module .hf-quickbuy { max-width: 100%; }
}

/* ---- Plattform-Übersicht (gruppiert) ---- */
.hf-archive .hf-arch-title { font-size: 32px; text-align: center; margin: 0 0 6px; }
.hf-archive .hf-sub { text-align: center; }
.hf-arch-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0 0 40px; }
.hf-fchip { padding: 8px 16px; border: 1px solid var(--hf-line); background: var(--hf-bg-2); color: var(--hf-soft); border-radius: 30px; font-size: 13px; font-weight: 500; cursor: pointer; transition: all .15s ease; }
.hf-fchip:hover { border-color: var(--hf-line-2); }
.hf-fchip.active { background: var(--hf-accent); border-color: var(--hf-accent); color: #fff; }

.hf-plat-group { margin-bottom: 40px; }

/* ================= LIGHT THEME OVERRIDES ================= */
.hf-header { background: rgba(255,255,255,0.85); }
.hf-logo .hf-mark { color: #fff; }
.hf-pill { background: var(--hf-accent-soft); border-color: rgba(124,92,255,0.25); color: #5a45c2; }

/* kleine Icon-Flächen auf Hell */
.hf-pc-icon, .hf-cat-ico { background: var(--hf-icon-bg); }

/* Inputs / Platzhalter */
.hf-cfg-input::placeholder, .hf-qb-input::placeholder, .hf-config input::placeholder { color: rgba(20,18,28,0.4); }
.hf-qb-input, .smm-config input[type="number"], .smm-config input[type="url"] { background: var(--hf-bg-3); color: var(--hf-ink); border-color: var(--hf-line); }

/* Badges/Tags Akzenttext dunkler */
.hf-feat-badge, .hf-qb-tag { color: #5a45c2; }
.hf-hc-badge { background: rgba(31,175,106,0.12); color: #1faf6a; }

/* Schatten weicher */
.hf-hero-card, .hf-quickbuy { box-shadow: var(--hf-shadow); }
.woocommerce ul.products li.product:hover, ul.products li.product:hover,
.hf-feat:hover { box-shadow: var(--hf-shadow); }

/* Bubbles: Icons weiß auf Farbverlauf */
.hf-bubble { color: #fff; }

/* Glow dezenter auf Weiß */
.hf-hero-glow { opacity: .5; }

/* Sterne in Gold statt Lime */
.hf-stars { color: #f5a623; }

/* Hero/Buttons: Akzent-Button-Text bleibt weiß (ok). Ghost-Button auf Hell */
.hf-btn-ghost { color: var(--hf-soft); border-color: var(--hf-line-2); }
.hf-btn-ghost:hover { background: var(--hf-bg-3); color: var(--hf-ink); }

/* Konfigurator-Karte (Produktseite) Inputs hell */
.hf-cfg-input { background: var(--hf-bg-3); color: var(--hf-ink); border-color: var(--hf-line); }
.hf-cfg-card { background: var(--hf-bg-2); box-shadow: var(--hf-shadow); }
.hf-cfg-card.is-featured { box-shadow: 0 0 0 1px var(--hf-accent), var(--hf-shadow); }

/* FAQ/Prose Lesefarbe */
.hf-faq summary { color: var(--hf-ink); }
.hf-prose p { color: var(--hf-soft); }
.hf-hero .hf-pill { background: var(--hf-accent-soft); border-color: rgba(124,92,255,0.25); color: #5a45c2; }

/* Plattform-Kacheln zentriert + luftiger */
.hf-cat { text-align: center; padding: 30px 20px; }
.hf-cat .hf-cat-ico { display: flex; margin: 0 auto 16px; }
.hf-cat h3 { margin: 0 0 6px; }
.hf-cat p { margin: 0; }

/* Plattform-Kacheln: mehr Luft, größere Icon-Fläche */
.hf-cat { padding: 36px 24px 32px; }
.hf-cat .hf-cat-ico { width: 56px; height: 56px; border-radius: 14px; margin: 0 auto 18px; }
.hf-cat .hf-cat-ico svg { width: 28px; height: 28px; }
.hf-section .hf-grid { gap: 18px; }

/* Plattform-Kacheln: Inhalt vertikal mittig (nicht oben kleben) */
.hf-cat { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 190px; }
.hf-cat .hf-cat-ico { margin: 0 0 18px; }

/* ---- Produktseite: SEO-Inhalt ---- */
.hf-prose h3 { font-size: 19px; margin: 26px 0 8px; color: var(--hf-ink); }
.hf-tips-wrap { display: grid; grid-template-columns: 1.3fr .7fr; gap: 32px; align-items: center; max-width: 900px; margin: 0 auto; }
.hf-tips { list-style: none; padding: 0; margin: 0; }
.hf-tips li { position: relative; padding: 9px 0 9px 30px; color: var(--hf-soft); border-bottom: 1px solid var(--hf-line); }
.hf-tips li:last-child { border-bottom: 0; }
.hf-tips li::before { content: "✓"; position: absolute; left: 0; top: 9px; color: var(--hf-accent); font-weight: 700; }
.hf-tips-vis { background: var(--hf-bg-2); border: 1px solid var(--hf-line); border-radius: 16px; padding: 16px; }
@media (max-width: 700px) { .hf-tips-wrap { grid-template-columns: 1fr; } .hf-tips-vis { display: none; } }

/* ---- Tipps-Grafik: Herkunft und Zielgruppen-Passung ---- */
.hf-origin-vis { padding: 14px 14px 10px; }
.hf-origin-vis > svg { display: block; width: 100%; height: auto; }
/* ---- Sicherheits-Block: Herkunfts-Hinweis mit Laender-Chips ---- */
.hf-safe-origin { margin: 0 0 16px; padding: 14px 16px 13px; border-radius: 14px; background: var(--hf-bg-2); border: 1px solid var(--hf-line); }
.hf-safe-origin strong { display: block; font-size: 14px; font-weight: 700; color: var(--hf-ink); margin: 0 0 4px; }
.hf-safe-origin p { margin: 0 0 10px; font-size: 14px; line-height: 1.5; color: var(--hf-soft); }
.hf-safe-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.hf-herkunft-fazit {
	max-width: 780px;
	margin: 26px auto 0;
	font-size: 15px;
	line-height: 1.6;
	color: var(--hf-soft);
	text-align: center;
}
@media (max-width: 700px) { .hf-herkunft-fazit { text-align: left; font-size: 14px; } }
.hf-safe-chips span { font-size: 12px; font-weight: 600; line-height: 1; padding: 6px 10px; border-radius: 999px; background: var(--hf-icon-bg); color: var(--hf-soft); }
/* Einleitung und Liste auf dieselbe Textfarbe: ein einfuehrender Satz darf
   nicht blasser sein als das, was er einleitet. */
.hf-tips-wrap .hf-cfg-intro { color: var(--hf-soft); }
.hf-origin-cap { margin: 8px 2px 2px; font-size: 12px; line-height: 1.45; color: var(--hf-muted); text-align: center; }
/* Diese Grafik traegt eine Aussage und keinen Zierbalken mehr, deshalb bleibt
   sie unter 700px sichtbar — bewusst nur fuer dieses Motiv. Der
   Sicherheits-Check-Block behaelt sein display:none aus der Regel darueber. */
@media (max-width: 700px) {
	.hf-tips-vis.hf-origin-vis { display: block; max-width: 320px; margin: 6px auto 0; }
}

/* ---- Plattformen-Übersicht: SEO-Inhalt unten ---- */
.hf-arch-seo { margin-top: 50px; padding-top: 20px; border-top: 1px solid var(--hf-line); }
.hf-arch-split { display: grid; grid-template-columns: 1.2fr .8fr; gap: 36px; align-items: center; }
.hf-arch-split p { color: var(--hf-soft); margin: 0 0 14px; }
.hf-constellation { background: var(--hf-bg-2); border: 1px solid var(--hf-line); border-radius: 16px; padding: 18px; }
@media (max-width: 760px) { .hf-arch-split { grid-template-columns: 1fr; } }

/* ---- Kategorie-Visual (Plattform-Card) ---- */
.hf-platcard { background: var(--hf-bg-2); border: 1px solid var(--hf-line); border-radius: 16px; padding: 24px; text-align: center; }
.hf-platcard-ico { display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 16px; background: var(--hf-icon-bg); margin-bottom: 14px; }
.hf-platcard-ico svg { width: 34px; height: 34px; }
.hf-platcard-stat strong { display: block; font-size: 28px; color: var(--hf-ink); font-weight: 700; }
.hf-platcard-stat span { color: var(--hf-muted); font-size: 13px; }
.hf-platcard-tiles { display: flex; flex-direction: column; gap: 8px; margin-top: 18px; }
.hf-platcard-tiles div { display: flex; align-items: center; gap: 8px; justify-content: center; font-size: 13px; color: var(--hf-soft); background: var(--hf-bg-3); border: 1px solid var(--hf-line); border-radius: 9px; padding: 9px; }

/* ---- Footer v2 ---- */
.hf-footer { padding: 50px 0 26px; }
.hf-foot-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; margin-bottom: 36px; }
/* 24.08.2026: Diese drei Regeln sprachen h2 an, der Fussbereich benutzt aber
   seit jeher ausschliesslich h4 — 33 Stueck, kein einziges h2. Sie trafen also
   nichts. Folge: die 15 Plattform-Icons in den Spaltenueberschriften hatten
   keine Groesse. Ein inline-SVG mit viewBox, aber ohne width/height faellt auf
   die Ersatzgroesse 300x150 zurueck und fuellte damit auf dem Telefon die
   ganze Spaltenbreite. flex:none haelt das Icon auch dann klein, wenn die
   Ueberschrift daneben umbricht. */
.hf-foot-grid-2 { grid-template-columns: 1fr 1fr 1.4fr; border-top: 1px solid var(--hf-line); padding-top: 32px; }
.hf-foot-col h4 { display: flex; align-items: center; gap: 8px; font-size: 14px; margin: 0 0 14px; color: var(--hf-ink); }
.hf-foot-col h4 svg { width: 16px; height: 16px; flex: none; }
.hf-foot-ico { font-style: normal; }
.hf-foot-col a { display: block; color: var(--hf-muted); font-size: 13px; margin-bottom: 9px; }
.hf-foot-col a:hover { color: var(--hf-ink); }
.hf-foot-note { color: var(--hf-muted); font-size: 13px; margin: 0 0 12px; }
.hf-pay { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
/* Zahlungszeichen (28.09.2026): offizielle Zeichen aus assets/pay/, eine
   Hoehe fuer alle (--hf-pay-h). Zeichen mit eigenem Rahmen stehen, wie sie
   geliefert werden; PayPal und Pay by Bank bekommen den hellen Rahmen hier. */
.hf-pay { --hf-pay-h: 28px; align-items: center; }
.hf-pay-badge { display: inline-flex; align-items: center; justify-content: center; height: var(--hf-pay-h); flex: 0 0 auto; }
.hf-pay-badge img { height: 100%; width: auto; display: block; }
.hf-pay-badge.is-gerahmt { box-sizing: border-box; padding: 0 calc(var(--hf-pay-h) * .26); background: #fff; border: 1px solid rgba(0,0,0,.14); border-radius: calc(var(--hf-pay-h) * .13); }
.hf-pay-badge.is-gerahmt img { height: 52%; }
.hf-pay-bank { gap: calc(var(--hf-pay-h) * .14); color: #3c4043; font: 700 calc(var(--hf-pay-h) * .38)/1 system-ui, -apple-system, 'Segoe UI', Arial, sans-serif; letter-spacing: .01em; }
.hf-pay-bank svg { width: calc(var(--hf-pay-h) * .56); height: calc(var(--hf-pay-h) * .56); fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.hf-pay-methods { text-align: center; }
.hf-pay-lg { justify-content: center; gap: 12px; margin: 4px 0 18px; }
/* Seite „Zahlungsmöglichkeiten": je Zahlungsart Zeichen, Name, kurze Zeile. */
.hf-pay-liste { list-style: none; margin: 8px auto 20px; padding: 0; max-width: 980px; display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 12px; text-align: left; }
.hf-pay-art { display: flex; flex-direction: column; gap: 4px; padding: 16px 18px; background: #fff; border-radius: 16px; box-shadow: 0 1px 2px rgba(20,18,28,.05), 0 6px 18px rgba(20,18,28,.06); }
.hf-pay-art > .hf-pay { --hf-pay-h: 32px; margin: 0 0 8px; gap: 6px; }
.hf-pay-art > strong { font-size: 15px; line-height: 1.25; color: var(--hf-ink, #14121c); }
.hf-pay-art .hf-pay-zeile { font-size: 13.5px; line-height: 1.45; color: var(--hf-muted, #5d5a6b); }
@media (max-width: 560px) { .hf-pay-liste { grid-template-columns: 1fr; } .hf-pay-art { padding: 12px 14px; } }
.hf-pay-methods .hf-foot-note { max-width: 620px; margin: 0 auto; }
.hf-news { display: flex; flex-wrap: wrap; gap: 8px; }
.hf-news input[type="email"] { flex: 1; min-width: 0; padding: 11px 13px; background: var(--hf-bg-2); border: 1px solid var(--hf-line); border-radius: 10px; color: var(--hf-ink); font-size: 14px; }
.hf-news .hf-btn { padding: 11px 18px; flex-shrink: 0; }
.hf-mailpoet-wrap a { display: inline; font-size: inherit; margin: 0; line-height: inherit; }
.hf-news-consent { display: flex; align-items: flex-start; gap: 9px; width: 100%; margin-top: 4px; cursor: pointer; }
.hf-news-consent input[type="checkbox"] { margin-top: 3px; flex-shrink: 0; accent-color: var(--hf-accent); width: 15px; height: 15px; }
.hf-news-consent span { font-size: 11.5px; color: var(--hf-muted); line-height: 1.5; }
.hf-news-consent a { display: inline !important; color: var(--hf-accent); text-decoration: underline; font-size: 11.5px !important; margin: 0 !important; }
.hf-about p { color: var(--hf-muted); font-size: 12.5px; line-height: 1.7; margin: 0 0 10px; }
.hf-copy { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; color: var(--hf-muted); font-size: 12px; padding-top: 26px; border-top: 1px solid var(--hf-line); }
.hf-copy a { color: var(--hf-muted); }
.hf-copy a:hover { color: var(--hf-ink); }
@media (max-width: 860px) {
	.hf-foot-grid, .hf-foot-grid-2 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px) {
	.hf-foot-grid, .hf-foot-grid-2 { grid-template-columns: 1fr; }
	.hf-news input[type="email"], .hf-news .hf-btn { width: 100%; }
}

/* Footer: kompakte Link-Navigation oben */
.hf-foot-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 20px; }
.hf-foot-grid > .hf-foot-col:nth-child(5) { margin-left: -10px; }
.hf-foot-grid-2 { grid-template-columns: 1fr 1fr 1.4fr; }
@media (max-width: 980px) {
	.hf-foot-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.hf-foot-grid > .hf-foot-col:nth-child(5) { margin-left: 0; }
}
@media (max-width: 640px) { .hf-foot-grid, .hf-foot-grid-2 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 460px) {
	.hf-foot-grid, .hf-foot-grid-2 { grid-template-columns: 1fr; }
	.hf-foot-grid > .hf-foot-col:nth-child(5) { margin-left: 0; }
}

/* Logo-Mark Icon — einheitliche Größe überall (Header + Footer) */
.hf-mark svg { width: 20px; height: 20px; }

/* Wortmarke als ein Element (kein Flex-Abstand zwischen social/vantix) */
.hf-logo .hf-word { color: var(--hf-ink); }
.hf-logo .hf-word span { color: var(--hf-accent); }

/* ---- SEO-Landingpages: Trust, interne Links, Entscheidungshilfen ---- */
.hf-seo-proof {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 14px;
	margin: 26px 0 18px;
}
.hf-seo-proof > div,
.hf-seo-link-grid a,
.hf-seo-combos a {
	background: var(--hf-bg-2);
	border: 1px solid var(--hf-line);
	border-radius: 14px;
	box-shadow: var(--hf-shadow);
}
.hf-seo-proof > div { padding: 16px; }
.hf-seo-proof strong,
.hf-seo-link-grid strong,
.hf-seo-combos strong {
	display: block;
	color: var(--hf-ink);
	font-size: 14px;
	margin-bottom: 5px;
}
.hf-seo-proof span,
.hf-seo-link-grid span,
.hf-seo-combos span {
	display: block;
	color: var(--hf-muted);
	font-size: 13px;
	line-height: 1.55;
}
.hf-seo-split {
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
	gap: 18px;
	align-items: stretch;
}
.hf-seo-split h2 {
	font-size: 22px;
	margin: 0 0 14px;
}
.hf-seo-list {
	margin: 14px 0 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 10px;
}
.hf-seo-list li {
	position: relative;
	padding-left: 24px;
	color: var(--hf-muted);
	font-size: 14px;
	line-height: 1.6;
}
.hf-seo-list li::before {
	content: "✓";
	position: absolute;
	left: 0;
	top: 0;
	color: var(--hf-accent);
	font-weight: 700;
}
.hf-seo-combos,
.hf-seo-link-grid {
	display: grid;
	gap: 12px;
}
.hf-seo-combos a,
.hf-seo-link-grid a {
	display: block;
	padding: 15px;
	text-decoration: none;
	transition: transform .12s ease, border-color .12s ease;
}
.hf-seo-combos a:hover,
.hf-seo-link-grid a:hover {
	border-color: rgba(124, 92, 255, .35);
	transform: translateY(-1px);
}

/* Linked cards on the main purchase guides. */
.hf-link-card-links .hf-grid .hf-card,
.hf-link-card-links .hf-seo-combos a,
.hf-link-card-links .hf-seo-link-grid a {
	position: relative;
	border-color: rgba(124, 92, 255, .22);
	box-shadow: 0 10px 24px rgba(38, 28, 72, .075);
}
.hf-link-card-links .hf-grid .hf-card {
	display: flex;
	flex-direction: column;
}
.hf-link-card-links .hf-card-action {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	width: fit-content;
	margin-top: auto;
	padding-top: 18px;
	color: var(--hf-accent);
	font-size: 12px;
	font-weight: 750;
}
.hf-link-card-links .hf-card-action > span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 25px;
	height: 25px;
	border-radius: 50%;
	background: var(--hf-accent-soft);
	transition: transform .15s ease, background-color .15s ease;
}
.hf-link-card-links .hf-seo-combos a,
.hf-link-card-links .hf-seo-link-grid a {
	position: relative;
	padding-right: 62px;
}
.hf-link-card-links .hf-seo-combos a::after,
.hf-link-card-links .hf-seo-link-grid a::after {
	content: "→";
	position: absolute;
	right: 16px;
	top: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--hf-accent-soft);
	color: var(--hf-accent);
	font-size: 18px;
	font-weight: 750;
	transform: translateY(-50%);
	transition: transform .15s ease, background-color .15s ease;
}
.hf-link-card-links .hf-grid .hf-card:hover .hf-card-action > span,
.hf-link-card-links .hf-grid .hf-card:focus-visible .hf-card-action > span {
	background: var(--hf-accent);
	color: #fff;
	transform: translateX(3px);
}
.hf-link-card-links .hf-seo-combos a:hover::after,
.hf-link-card-links .hf-seo-combos a:focus-visible::after,
.hf-link-card-links .hf-seo-link-grid a:hover::after,
.hf-link-card-links .hf-seo-link-grid a:focus-visible::after {
	background: var(--hf-accent);
	color: #fff;
	transform: translate(3px, -50%);
}
.hf-link-card-links .hf-grid .hf-card:focus-visible,
.hf-link-card-links .hf-seo-combos a:focus-visible,
.hf-link-card-links .hf-seo-link-grid a:focus-visible {
	outline: 3px solid rgba(124, 92, 255, .24);
	outline-offset: 3px;
}
.hf-link-card-links .hf-grid .hf-card:active,
.hf-link-card-links .hf-seo-combos a:active,
.hf-link-card-links .hf-seo-link-grid a:active { transform: translateY(1px); }
.hf-seo-link-grid { grid-template-columns: repeat(auto-fit, minmax(205px, 1fr)); }
.hf-product-guides .hf-cfg-intro {
	text-align: center;
	margin-left: auto;
	margin-right: auto;
}
.hf-product-guides .hf-seo-link-grid {
	grid-template-columns: repeat(auto-fit, minmax(205px, 250px));
	justify-content: center;
}
@media (max-width: 980px) {
	.hf-seo-proof,
	.hf-seo-link-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.hf-seo-split { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
	.hf-seo-proof,
	.hf-seo-link-grid {
		grid-template-columns: 1fr;
	}
}

/* ---- Startseite: Profil-Wachstums-Grafik ---- */
.hf-growthcard { background: var(--hf-bg-2); border: 1px solid var(--hf-line); border-radius: 18px; padding: 22px; box-shadow: var(--hf-shadow); }
.hf-gc-head { display: flex; align-items: center; gap: 11px; margin-bottom: 16px; }
.hf-gc-av { width: 40px; height: 40px; border-radius: 50%; background: var(--hf-accent); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; }
.hf-gc-head strong { display: block; color: var(--hf-ink); font-size: 14px; }
.hf-gc-head > div span { color: var(--hf-muted); font-size: 12px; }
.hf-gc-badge { margin-left: auto; background: rgba(31,175,106,0.12); color: var(--hf-success); font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 8px; }
.hf-gc-num { font-size: 30px; font-weight: 700; color: var(--hf-ink); margin-bottom: 8px; }
.hf-gc-num small { font-size: 14px; font-weight: 500; color: var(--hf-muted); }
.hf-gc-stats { display: flex; gap: 10px; margin-top: 14px; }
.hf-gc-stats div { flex: 1; background: var(--hf-bg-3); border: 1px solid var(--hf-line); border-radius: 10px; padding: 10px; text-align: center; }
.hf-gc-stats strong { display: block; color: var(--hf-ink); font-size: 15px; }
.hf-gc-stats span { color: var(--hf-muted); font-size: 11px; }

/* ---- Startseite: Trust-Benefit-Karten ---- */
.hf-promise-section { padding-top: 64px; }
.hf-section-head { max-width: 760px; margin: 0 auto 34px; text-align: center; }
.hf-section-head h2 { margin-bottom: 12px; }
.hf-promise-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; align-items: stretch; }
.hf-promise-card {
	min-height: 430px;
	border-radius: 20px;
	padding: 34px 30px;
	position: relative;
	overflow: hidden;
	box-shadow: 0 18px 42px rgba(20,18,28,0.10);
}
.hf-promise-card::after {
	content: "";
	position: absolute;
	inset: auto -40px -72px auto;
	width: 170px;
	height: 170px;
	border-radius: 50%;
	background: rgba(255,255,255,0.16);
	pointer-events: none;
}
.hf-promise-card h3 { font-size: 23px; margin: 22px 0 16px; }
.hf-promise-card p { font-size: 15px; line-height: 1.72; margin: 0 0 18px; }
.hf-promise-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border-radius: 15px;
	background: rgba(255,255,255,0.18);
	color: currentColor;
	animation: hfIconVibe 3.6s ease-in-out infinite;
	transform-origin: 50% 55%;
}
.hf-promise-icon svg { width: 32px; height: 32px; }
.hf-promise-card-primary {
	background: linear-gradient(145deg,#7C5CFF 0%,#6D47D8 100%);
	color: #fff;
}
.hf-promise-card-primary h3,
.hf-promise-card-primary p { color: #fff; }
.hf-promise-card-soft {
	background: #eadcff;
	color: #7C5CFF;
}
.hf-promise-card-soft h3 { color: #7C5CFF; }
.hf-promise-card-soft p { color: #7159b8; }
.hf-promise-card-warm {
	background: linear-gradient(145deg,#ff7b2f 0%,#f15a18 100%);
	color: #fff;
}
.hf-promise-card-warm h3,
.hf-promise-card-warm p { color: #fff; }
.hf-promise-card:nth-child(2) .hf-promise-icon { animation-delay: .35s; }
.hf-promise-card:nth-child(3) .hf-promise-icon { animation-delay: .7s; }
@keyframes hfIconVibe {
	0%, 82%, 100% { transform: translate3d(0,0,0) rotate(0deg); }
	86% { transform: translate3d(-1px,0,0) rotate(-2deg); }
	90% { transform: translate3d(1px,-1px,0) rotate(2deg); }
	94% { transform: translate3d(-1px,1px,0) rotate(-1deg); }
	98% { transform: translate3d(1px,0,0) rotate(1deg); }
}
@media (max-width: 920px) {
	.hf-promise-grid { grid-template-columns: 1fr; }
	.hf-promise-card { min-height: 0; }
}
@media (max-width: 520px) {
	.hf-promise-section { padding-top: 44px; }
	.hf-promise-card { border-radius: 16px; padding: 26px 22px; }
	.hf-promise-card h3 { font-size: 20px; }
}
@media (prefers-reduced-motion: reduce) {
	.hf-promise-icon { animation: none; }
}
/* ---- Startseite: Beliebte Pakete v3 ---- */
.hf-feat-grid { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; }
.hf-feat-premium {
	position: relative;
	min-height: 238px;
	padding: 20px;
	border-radius: 18px;
	overflow: hidden;
	background:
		linear-gradient(180deg, rgba(255,255,255,0.96) 0%, rgba(255,255,255,0.90) 100%),
		var(--hf-feat-grad);
	border: 1px solid color-mix(in srgb, var(--hf-feat-solid) 24%, var(--hf-line));
	box-shadow: 0 10px 28px rgba(20,18,28,0.07);
}
.hf-feat-premium::before {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	height: 5px;
	background: var(--hf-feat-grad);
}
.hf-feat-premium:hover {
	transform: translateY(-5px);
	border-color: color-mix(in srgb, var(--hf-feat-solid) 58%, var(--hf-line));
	box-shadow: 0 18px 42px color-mix(in srgb, var(--hf-feat-solid) 20%, transparent);
}
.hf-feat-glow {
	position: absolute;
	right: -42px;
	top: -42px;
	width: 132px;
	height: 132px;
	border-radius: 50%;
	background: var(--hf-feat-grad);
	opacity: .12;
	pointer-events: none;
}
.hf-feat-premium .hf-feat-head {
	position: relative;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	gap: 12px;
	align-items: start;
	margin-bottom: 16px;
}
.hf-brand-tile {
	width: 54px;
	height: 54px;
	border-radius: 15px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	background: var(--hf-feat-grad);
	box-shadow: 0 12px 26px color-mix(in srgb, var(--hf-feat-solid) 28%, transparent);
	transition: transform .18s ease;
}
.hf-brand-tile svg { width: 28px; height: 28px; filter: drop-shadow(0 2px 5px rgba(0,0,0,.24)); }
.hf-feat-premium:hover .hf-brand-tile { transform: translateY(-2px) rotate(-3deg) scale(1.04); }
.hf-feat-titleblock { min-width: 0; padding-top: 3px; }
.hf-feat-premium .hf-pc-cat {
	display: block;
	color: color-mix(in srgb, var(--hf-feat-solid) 78%, var(--hf-muted));
	font-weight: 800;
	letter-spacing: .08em;
	margin-bottom: 5px;
}
.hf-feat-premium h3 {
	font-size: 18px;
	line-height: 1.25;
	margin: 0;
}
.hf-feat-premium .hf-feat-badge {
	position: relative;
	top: auto;
	right: auto;
	align-self: start;
	white-space: nowrap;
	background: color-mix(in srgb, var(--hf-feat-solid) 13%, #fff);
	color: color-mix(in srgb, var(--hf-feat-solid) 78%, #24202d);
	border: 1px solid color-mix(in srgb, var(--hf-feat-solid) 18%, transparent);
	padding: 6px 10px;
	border-radius: 999px;
}
.hf-feat-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 14px;
}
.hf-feat-meta span {
	font-size: 12px;
	font-weight: 650;
	color: var(--hf-soft);
	background: rgba(255,255,255,0.72);
	border: 1px solid var(--hf-line);
	border-radius: 999px;
	padding: 6px 9px;
}
.hf-feat-premium .hf-pc-tags { margin-bottom: 16px; }
.hf-feat-premium .hf-pc-tags span {
	background: color-mix(in srgb, var(--hf-feat-solid) 8%, #fff);
	border-color: color-mix(in srgb, var(--hf-feat-solid) 14%, var(--hf-line));
	color: var(--hf-soft);
	border-radius: 999px;
	padding: 5px 9px;
}
.hf-feat-premium .hf-feat-row {
	position: relative;
	margin-top: auto;
	padding-top: 15px;
	border-top: 1px solid color-mix(in srgb, var(--hf-feat-solid) 14%, var(--hf-line));
}
.hf-feat-premium .hf-pc-price {
	color: var(--hf-ink);
	font-size: 21px;
	line-height: 1;
}
.hf-feat-premium .hf-pc-price small {
	font-size: 12px;
	color: var(--hf-muted);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .06em;
}
.hf-feat-premium .hf-feat-cta {
	color: #fff;
	background: var(--hf-feat-grad);
	border-radius: 999px;
	padding: 9px 12px;
	box-shadow: 0 10px 20px color-mix(in srgb, var(--hf-feat-solid) 18%, transparent);
}

/* Farbige Icon-Tiles in Chips, Plattform-Karten und Schnellkauf */
.hf-chip-ico,
.hf-cat-ico,
.hf-pc-icon {
	background: color-mix(in srgb, currentColor 11%, #fff);
	border-color: color-mix(in srgb, currentColor 22%, var(--hf-line));
	box-shadow: 0 8px 18px color-mix(in srgb, currentColor 10%, transparent);
}
.hf-chip-ico {
	width: 24px;
	height: 24px;
	border-radius: 8px;
	align-items: center;
	justify-content: center;
}
.hf-chip-ico svg { width: 14px; height: 14px; }
.hf-cat:hover .hf-cat-ico,
.hf-chip:hover .hf-chip-ico,
.hf-qb-head .hf-pc-icon:hover {
	transform: translateY(-1px);
}
@media (max-width: 620px) {
	.hf-feat-premium .hf-feat-head { grid-template-columns: auto minmax(0, 1fr); }
	.hf-feat-premium .hf-feat-badge { grid-column: 1 / -1; justify-self: start; }
	.hf-feat-premium .hf-feat-row { align-items: flex-start; gap: 12px; flex-direction: column; }
	.hf-feat-premium .hf-feat-cta { width: 100%; text-align: center; }
}
/* Beliebte Pakete: Kartenhöhe angleichen */
.hf-feat-premium { display: flex; flex-direction: column; min-height: 276px; }
.hf-feat-premium .hf-feat-row { margin-top: auto; }
/* ---- Produktseiten v3 ---- */
.hf-product-hero {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) 320px;
	gap: 34px;
	align-items: center;
	margin: 0 0 34px;
	padding: 34px;
	border: 1px solid color-mix(in srgb, var(--hf-prod-solid) 22%, var(--hf-line));
	border-radius: 24px;
	overflow: hidden;
	background:
		linear-gradient(135deg, rgba(255,255,255,0.96) 0%, rgba(255,255,255,0.82) 100%),
		var(--hf-prod-grad);
	box-shadow: 0 18px 46px rgba(20,18,28,0.09);
}
.hf-product-hero::before {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	height: 6px;
	background: var(--hf-prod-grad);
}
.hf-product-hero::after {
	content: "";
	position: absolute;
	right: -80px;
	top: -110px;
	width: 280px;
	height: 280px;
	border-radius: 50%;
	background: var(--hf-prod-grad);
	opacity: .12;
	pointer-events: none;
}
.hf-product-hero-copy { position: relative; z-index: 1; }
.hf-product-kicker {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	color: color-mix(in srgb, var(--hf-prod-solid) 78%, var(--hf-ink));
	font-size: 13px;
	font-weight: 800;
	letter-spacing: .04em;
	text-transform: uppercase;
	margin-bottom: 14px;
}
.hf-product-brand {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 11px;
	color: #fff;
	background: var(--hf-prod-grad);
	box-shadow: 0 10px 22px color-mix(in srgb, var(--hf-prod-solid) 24%, transparent);
}
.hf-product-brand svg { width: 19px; height: 19px; }
.hf-product-hero h1 {
	font-size: clamp(34px, 4.4vw, 56px);
	line-height: 1.05;
	margin: 10px 0 16px;
	letter-spacing: 0;
}
.hf-product-hero .hf-cfg-intro {
	max-width: 680px;
	margin: 0;
	font-size: 17px;
}
.hf-product-hero-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 9px;
	margin-top: 22px;
}
.hf-product-hero-tags span {
	background: #fff;
	border: 1px solid color-mix(in srgb, var(--hf-prod-solid) 16%, var(--hf-line));
	border-radius: 999px;
	color: var(--hf-soft);
	font-size: 13px;
	font-weight: 650;
	padding: 8px 11px;
}
.hf-product-hero-card {
	position: relative;
	z-index: 1;
	background: rgba(255,255,255,0.82);
	border: 1px solid rgba(255,255,255,0.72);
	border-radius: 20px;
	padding: 24px;
	box-shadow: 0 18px 44px rgba(20,18,28,0.10);
}
.hf-product-brand-large { width: 62px; height: 62px; border-radius: 18px; margin-bottom: 18px; }
.hf-product-brand-large svg { width: 32px; height: 32px; }
.hf-product-hero-card strong { display: block; color: var(--hf-ink); font-size: 21px; line-height: 1.2; margin-bottom: 6px; }
.hf-product-hero-card > span:not(.hf-product-brand) { color: var(--hf-muted); font-size: 13px; }
.hf-product-mini-bars { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; align-items: end; height: 70px; margin-top: 24px; }
.hf-product-mini-bars i { display: block; border-radius: 8px 8px 5px 5px; background: var(--hf-prod-grad); opacity: .78; }
.hf-product-mini-bars i:nth-child(1) { height: 24px; opacity: .28; }
.hf-product-mini-bars i:nth-child(2) { height: 34px; opacity: .40; }
.hf-product-mini-bars i:nth-child(3) { height: 46px; opacity: .55; }
.hf-product-mini-bars i:nth-child(4) { height: 58px; opacity: .72; }
.hf-product-mini-bars i:nth-child(5) { height: 68px; }

.hf-cfg-card-premium {
	position: relative;
	overflow: hidden;
	border-radius: 20px;
	border-color: color-mix(in srgb, var(--hf-prod-solid) 18%, var(--hf-line));
	box-shadow: 0 16px 42px rgba(20,18,28,0.09);
}
.hf-cfg-card-premium::before {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	height: 5px;
	background: var(--hf-prod-grad);
}
.hf-cfg-card-premium::after {
	content: "";
	position: absolute;
	right: -46px;
	top: -50px;
	width: 140px;
	height: 140px;
	border-radius: 50%;
	background: var(--hf-prod-grad);
	opacity: .10;
	pointer-events: none;
}
.hf-cfg-card-premium.is-featured {
	border-color: color-mix(in srgb, var(--hf-prod-solid) 36%, var(--hf-accent));
	box-shadow: 0 16px 46px color-mix(in srgb, var(--hf-prod-solid) 15%, rgba(20,18,28,0.08));
}
.hf-cfg-card-premium .hf-cfg-head { position: relative; z-index: 1; }
.hf-cfg-card-premium .hf-cfg-flag {
	width: 50px;
	height: 50px;
	border-radius: 15px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--hf-prod-grad);
	box-shadow: 0 10px 22px color-mix(in srgb, var(--hf-prod-solid) 22%, transparent);
}
.hf-cfg-card-premium .hf-cfg-head h2,
.hf-cfg-card-premium .hf-cfg-head h3 { font-size: 21px; }
.hf-buyfacts {
	position: relative;
	z-index: 1;
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
	margin: -6px 0 16px;
}
.hf-buyfacts span {
	background: color-mix(in srgb, var(--hf-prod-solid) 7%, #fff);
	border: 1px solid color-mix(in srgb, var(--hf-prod-solid) 14%, var(--hf-line));
	border-radius: 999px;
	color: var(--hf-muted);
	font-size: 12px;
	font-weight: 700;
	padding: 6px 9px;
}
.hf-cfg-card-premium .hf-cfg-label {
	font-weight: 750;
	color: color-mix(in srgb, var(--hf-prod-solid) 62%, var(--hf-muted));
}
.hf-cfg-card-premium .hf-cfg-input {
	background: #fff;
	border-color: color-mix(in srgb, var(--hf-prod-solid) 14%, var(--hf-line));
	box-shadow: 0 1px 0 rgba(20,18,28,0.03);
}
.hf-cfg-card-premium .hf-cfg-input:focus {
	outline: none;
	border-color: color-mix(in srgb, var(--hf-prod-solid) 58%, var(--hf-accent));
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--hf-prod-solid) 10%, transparent);
}
.hf-cfg-card-premium .hf-cfg-benefits {
	background: color-mix(in srgb, var(--hf-prod-solid) 6%, #fff);
	border: 1px solid color-mix(in srgb, var(--hf-prod-solid) 12%, var(--hf-line));
	border-radius: 14px;
	padding: 12px 14px;
}
.hf-cfg-card-premium .hf-cfg-benefits li { padding-left: 24px; }
.hf-cfg-card-premium .hf-cfg-benefits li::before { color: color-mix(in srgb, var(--hf-prod-solid) 78%, var(--hf-success)); }
.hf-cfg-card-premium .hf-cfg-btn {
	background: var(--hf-prod-grad);
	box-shadow: 0 12px 24px color-mix(in srgb, var(--hf-prod-solid) 20%, transparent);
}
.hf-cfg-card-premium .hf-cfg-btn:hover { filter: saturate(1.04) brightness(.98); }

.hf-cfg-wrap > .hf-trust {
	background: #fff;
	border: 1px solid var(--hf-line);
	box-shadow: var(--hf-shadow);
}
.hf-mobile-buybar {
	display: none;
	position: fixed;
	left: 14px;
	right: 14px;
	bottom: 14px;
	z-index: 45;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 12px 14px;
	border-radius: 14px;
	background: rgba(20,18,28,0.94);
	color: #fff;
	box-shadow: 0 18px 42px rgba(20,18,28,0.28);
	backdrop-filter: blur(10px);
}
.hf-mobile-buybar:hover { color: #fff; }
.hf-mobile-buybar span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: rgba(255,255,255,0.74); font-size: 12px; }
.hf-mobile-buybar strong {
	flex: none;
	background: var(--hf-prod-grad);
	border-radius: 10px;
	padding: 8px 11px;
	font-size: 13px;
}
@media (max-width: 880px) {
	.hf-product-hero { grid-template-columns: 1fr; padding: 28px 22px; }
	.hf-product-hero-card { display: none; }
}
@media (max-width: 520px) {
	.hf-cfg-wrap,
	.hf-product-hero,
	.hf-product-hero-copy,
	.hf-cfg-card-premium {
		min-width: 0;
		max-width: 100%;
	}
	.hf-product-hero { margin-bottom: 24px; padding: 24px 22px; border-radius: 20px; }
	.hf-product-kicker { margin-bottom: 10px; }
	.hf-product-hero h1 {
		font-size: 29px;
		margin: 8px 0 12px;
		overflow-wrap: anywhere;
		hyphens: auto;
	}
	.hf-product-hero .hf-cfg-intro {
		font-size: 15px;
		overflow-wrap: anywhere;
	}
	.hf-product-hero-tags { margin-top: 16px; gap: 7px; }
	.hf-product-hero-tags span { font-size: 12px; }
	.hf-cfg-card-premium { border-radius: 16px; }
	.hf-cfg-card-premium .hf-cfg-benefits { display: none; }
	.hf-mobile-buybar { display: flex; }
	body:has(.hf-mobile-buybar) { padding-bottom: 78px; }
	body:has(.hf-mobile-buybar) .alynivo {
		bottom: calc(88px + env(safe-area-inset-bottom, 0px));
	}
	body:has(.hf-mobile-buybar) .hf-scroll-top {
		display: none;
	}
	.hf-buyfacts { overflow: visible; }
	.hf-buyfacts span {
		max-width: 100%;
		font-size: 11px;
		padding: 5px 8px;
		white-space: normal;
	}
}

/* Instagram Growth family: one clear offer with three comparable monthly tiers. */
.hf-growth-selector {
	margin: 48px 0 34px;
	padding: 42px 0;
	border-top: 1px solid var(--hf-line);
	border-bottom: 1px solid var(--hf-line);
}
.hf-growth-selector-head {
	max-width: 720px;
	margin: 0 auto 24px;
	text-align: center;
}
.hf-growth-eyebrow,
.hf-growth-config-head > span {
	display: block;
	margin-bottom: 8px;
	color: #c82972;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0;
	text-transform: uppercase;
}
.hf-growth-selector-head h2,
.hf-growth-config-head h2 {
	margin: 0 0 10px;
	font-size: 30px;
	line-height: 1.15;
}
.hf-growth-selector-head p,
.hf-growth-config-head p {
	margin: 0;
	color: var(--hf-muted);
	font-size: 15px;
	line-height: 1.65;
}
.hf-growth-platform-bar {
	display: flex;
	align-items: center;
	gap: 12px;
	max-width: 620px;
	margin: 0 auto 24px;
	padding: 12px 14px;
	border: 1px solid var(--hf-line);
	border-radius: 8px;
	background: #fff;
	box-shadow: 0 8px 24px rgba(20,18,28,.06);
}
.hf-growth-platform-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border-radius: 8px;
	color: #fff;
	background: linear-gradient(135deg,#feda75 0%,#d62976 55%,#962fbf 100%);
}
.hf-growth-platform-icon svg { width: 22px; height: 22px; }
.hf-growth-platform-bar > span:not(.hf-growth-platform-icon) { display: grid; gap: 2px; }
.hf-growth-platform-bar small { color: var(--hf-muted); font-size: 11px; }
.hf-growth-platform-bar strong { color: var(--hf-ink); font-size: 14px; }
.hf-growth-period {
	margin-left: auto;
	padding-left: 18px;
	border-left: 1px solid var(--hf-line);
}
.hf-growth-tier-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
}
.hf-growth-tier {
	display: flex;
	min-width: 0;
	min-height: 430px;
	flex-direction: column;
	padding: 22px;
	border: 1px solid var(--hf-line);
	border-radius: 8px;
	background: #fff;
	box-shadow: 0 12px 30px rgba(20,18,28,.07);
	color: var(--hf-ink);
	text-decoration: none;
	transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.hf-growth-tier:hover {
	transform: translateY(-3px);
	border-color: rgba(200,41,114,.42);
	box-shadow: 0 18px 36px rgba(20,18,28,.11);
	color: var(--hf-ink);
}
.hf-growth-tier.is-active {
	border: 2px solid #c82972;
	padding: 21px;
	box-shadow: 0 18px 40px rgba(200,41,114,.14);
}
.hf-growth-tier-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 22px;
}
.hf-growth-tier-top strong { font-size: 18px; }
.hf-growth-tier-top em {
	padding: 5px 8px;
	border-radius: 999px;
	background: #f7edf3;
	color: #a31e5d;
	font-size: 11px;
	font-style: normal;
	font-weight: 800;
}
.hf-growth-tier.is-active .hf-growth-tier-top em { background: #c82972; color: #fff; }
.hf-growth-quantity {
	display: block;
	font-size: 42px;
	font-weight: 850;
	line-height: 1;
}
.hf-growth-unit {
	display: block;
	min-height: 44px;
	margin: 8px 0 18px;
	color: var(--hf-muted);
	font-size: 13px;
	line-height: 1.5;
}
.hf-growth-tier ul {
	list-style: none;
	margin: 0 0 22px;
	padding: 0;
}
.hf-growth-tier li {
	position: relative;
	padding: 9px 0 9px 24px;
	border-top: 1px solid #f0edf2;
	color: var(--hf-soft);
	font-size: 13px;
	line-height: 1.4;
}
.hf-growth-tier li::before {
	content: "✓";
	position: absolute;
	left: 2px;
	color: #169b62;
	font-weight: 900;
}
.hf-growth-tier-action {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	margin-top: auto;
	border: 1px solid #d9d3dc;
	border-radius: 8px;
	background: #f8f6f9;
	font-size: 13px;
	font-weight: 800;
}
.hf-growth-tier.is-active .hf-growth-tier-action {
	border-color: #c82972;
	background: #c82972;
	color: #fff;
}
.hf-growth-disclaimer {
	max-width: 820px;
	margin: 20px auto 0;
	color: var(--hf-muted);
	font-size: 12px;
	line-height: 1.6;
	text-align: center;
}
.hf-growth-config-head {
	max-width: 620px;
	margin: 36px auto 18px;
	text-align: center;
}
.hf-ai-growth-form { width: 100%; }
.hf-ai-growth-form .hf-cfg-flag svg { width: 24px; height: 24px; color: #fff; }
.hf-growth-duration {
	display: grid;
	gap: 4px;
	margin-top: 18px;
	padding: 14px;
	border: 1px solid color-mix(in srgb, var(--hf-prod-solid) 14%, var(--hf-line));
	border-radius: 8px;
	background: color-mix(in srgb, var(--hf-prod-solid) 5%, #fff);
}
.hf-growth-duration strong { color: var(--hf-ink); font-size: 13px; }
.hf-growth-duration span { color: var(--hf-muted); font-size: 12px; line-height: 1.5; }

@media (max-width: 820px) {
	.hf-growth-tier-grid { grid-template-columns: 1fr; }
	.hf-growth-tier { min-height: 0; }
	.hf-growth-unit { min-height: 0; }
}

@media (max-width: 520px) {
	.hf-growth-selector { margin: 32px 0 26px; padding: 30px 0; }
	.hf-growth-selector-head { padding: 0 4px; text-align: left; }
	.hf-growth-selector-head h2,
	.hf-growth-config-head h2 { font-size: 25px; }
	.hf-growth-platform-bar { padding: 10px 12px; }
	.hf-growth-tier { padding: 18px; }
	.hf-growth-tier.is-active { padding: 17px; }
	.hf-growth-quantity { font-size: 36px; }
	.hf-growth-config-head { text-align: left; }
}
/* ---- Socialvantix Lila-System: keine orange Trust-Karte ---- */
.hf-promise-card-warm {
	background: linear-gradient(90deg,#9c7cff 0%,#cbbcff 48%,#f5f1ff 100%);
	color: #4f3f91;
}
.hf-promise-card-warm h3 { color: #3c2f78; }
.hf-promise-card-warm p { color: #5f52a0; }
.hf-promise-card-warm .hf-promise-icon {
	background: rgba(124,92,255,0.13);
	color: #6f4cff;
}
.hf-promise-card-warm::after { background: rgba(124,92,255,0.10); }

/* ---- Service-Seiten v3 ---- */
.hf-archive { padding-top: 44px; }
.hf-archive-hero {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) 250px;
	gap: 30px;
	align-items: center;
	margin: 0 0 30px;
	padding: 32px;
	border-radius: 24px;
	overflow: hidden;
	border: 1px solid color-mix(in srgb, var(--hf-arch-solid) 20%, var(--hf-line));
	background:
		linear-gradient(135deg, rgba(255,255,255,0.96) 0%, rgba(255,255,255,0.84) 100%),
		var(--hf-arch-grad);
	box-shadow: 0 18px 46px rgba(20,18,28,0.09);
}
.hf-archive-hero::before {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	height: 6px;
	background: var(--hf-arch-grad);
}
.hf-archive-hero::after {
	content: "";
	position: absolute;
	right: -78px;
	top: -96px;
	width: 250px;
	height: 250px;
	border-radius: 50%;
	background: var(--hf-arch-grad);
	opacity: .12;
	pointer-events: none;
}
.hf-archive-kicker {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: color-mix(in srgb, var(--hf-arch-solid) 78%, var(--hf-ink));
	font-size: 13px;
	font-weight: 800;
	letter-spacing: .05em;
	text-transform: uppercase;
	margin-bottom: 14px;
}
.hf-archive-brand {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	background: var(--hf-arch-grad);
	box-shadow: 0 10px 22px color-mix(in srgb, var(--hf-arch-solid) 22%, transparent);
}
.hf-archive-brand { width: 36px; height: 36px; border-radius: 12px; }
.hf-archive-brand svg { width: 20px; height: 20px; }
.hf-archive-brand-large { width: 66px; height: 66px; border-radius: 19px; margin-bottom: 16px; }
.hf-archive-brand-large svg { width: 34px; height: 34px; }
.hf-archive .hf-arch-title {
	text-align: left;
	font-size: clamp(34px, 4.2vw, 54px);
	line-height: 1.06;
	margin: 0 0 12px;
}
.hf-archive .hf-sub {
	text-align: left;
	max-width: 680px;
	margin: 0;
	font-size: 16px;
}
.hf-archive-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 9px;
	margin-top: 20px;
}
.hf-archive-tags span {
	background: #fff;
	border: 1px solid color-mix(in srgb, var(--hf-arch-solid) 14%, var(--hf-line));
	border-radius: 999px;
	color: var(--hf-soft);
	font-size: 13px;
	font-weight: 650;
	padding: 8px 11px;
}
.hf-archive-visual {
	position: relative;
	z-index: 1;
	background: rgba(255,255,255,0.82);
	border: 1px solid rgba(255,255,255,0.72);
	border-radius: 20px;
	padding: 24px;
	text-align: center;
	box-shadow: 0 18px 44px rgba(20,18,28,0.10);
}
.hf-archive-visual strong { display: block; color: var(--hf-ink); font-size: 42px; line-height: 1; }
.hf-archive-visual > span:not(.hf-archive-brand) { color: var(--hf-muted); font-size: 13px; }
.hf-arch-chips {
	justify-content: flex-start;
	margin: 0 0 34px;
	padding: 10px;
	background: #fff;
	border: 1px solid var(--hf-line);
	border-radius: 18px;
	box-shadow: 0 10px 26px rgba(20,18,28,0.05);
}
.hf-fchip { font-weight: 700; }
.hf-fchip.active { background: var(--hf-accent); border-color: var(--hf-accent); color: #fff; box-shadow: 0 8px 18px rgba(124,92,255,0.20); }

.hf-plat-group {
	position: relative;
	margin-bottom: 34px;
	padding: 22px;
	background: rgba(255,255,255,0.72);
	border: 1px solid var(--hf-line);
	border-radius: 22px;
	box-shadow: 0 12px 34px rgba(20,18,28,0.06);
}

/* Accessible contrast for third-party controls that ship inline brand colors. */
.cmplz-btn.cmplz-accept,
input.mailpoet_submit {
	background-color: #7552F6 !important;
}

.hf-pc { position: relative; }
.hf-pc-flag {
	position: absolute;
	top: 12px;
	right: 14px;
	z-index: 2;
	display: block;
	min-width: 0;
	height: auto;
	margin: 0;
	border: 0;
	background: transparent;
	color: inherit;
	font-size: 21px;
	line-height: 1;
	letter-spacing: 0;
	filter: drop-shadow(0 2px 4px rgba(20,18,28,.12));
}
@media (max-width: 760px) {
	.hf-archive-hero { grid-template-columns: 1fr; padding: 26px 22px; }
	.hf-archive-visual { display: none; }
	.hf-arch-chips { justify-content: flex-start; overflow-x: auto; flex-wrap: nowrap; }
	.hf-fchip { white-space: nowrap; }
}
@media (max-width: 520px) {
	.hf-archive .hf-arch-title { font-size: 32px; }
	.hf-plat-group { padding: 16px; border-radius: 18px; }
}
/* ---- Startseite: langer SEO-/Info-Block mit Bild ---- */
.hf-story-section { background: #fff; border-top: 1px solid var(--hf-line); }
.hf-story { max-width: 880px; margin: 0 auto; }
.hf-story-head { text-align: center; margin-bottom: 28px; }
.hf-story-head h2 { font-size: clamp(30px, 4vw, 44px); margin: 14px 0 14px; }
.hf-story-head p,
.hf-story-copy p,
.hf-story-grid p {
	color: var(--hf-soft);
	font-size: 16px;
	line-height: 1.82;
	margin: 0 0 18px;
}
.hf-story-copy { max-width: 780px; margin: 0 auto; }
.hf-story-image { max-width: 520px; margin: 30px auto 28px; }
.hf-story-image img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 692 / 757;
	border-radius: 20px;
	border: 1px solid var(--hf-line);
	box-shadow: 0 16px 38px rgba(20,18,28,0.09);
}
.hf-story-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px;
	margin: 30px 0;
}
.hf-story-grid > div {
	background:
		linear-gradient(135deg, rgba(255,255,255,0.98), rgba(246,242,255,0.86)),
		linear-gradient(90deg,#7c5cff,#f4efff);
	border: 1px solid rgba(124,92,255,0.16);
	border-radius: 18px;
	padding: 22px;
	box-shadow: 0 10px 28px rgba(20,18,28,0.06);
}
.hf-story-grid h3 { font-size: 19px; margin: 0 0 10px; }
.hf-story-grid p { font-size: 14.5px; margin-bottom: 0; }
@media (max-width: 760px) {
	.hf-story { max-width: none; }
	.hf-story-head { text-align: left; }
	.hf-story-grid { grid-template-columns: 1fr; }
	.hf-story-image img { border-radius: 16px; }
}
/* Hamburger auch auf Desktop sichtbar (zeigt alle Plattformen) */
.hf-burger { display: flex; }

/* ---- Kontaktseite ---- */
.hf-contact-form { background: var(--hf-bg-2); border: 1px solid var(--hf-line); border-radius: 16px; padding: 24px; box-shadow: var(--hf-shadow); }
.hf-contact-form label { display: block; font-size: 13px; color: var(--hf-muted); margin-bottom: 14px; }
.hf-contact-form .hf-cfg-input { margin-top: 6px; width: 100%; }
.hf-contact-form textarea.hf-cfg-input { resize: vertical; min-height: 120px; font-family: inherit; }
.hf-notice { padding: 12px 16px; border-radius: 10px; margin-bottom: 16px; font-size: 14px; }
.hf-notice-ok { background: rgba(31,175,106,0.12); color: #137a4a; border: 1px solid rgba(31,175,106,0.3); }
.hf-notice-err { background: rgba(163,57,45,0.1); color: #a3392d; border: 1px solid rgba(163,57,45,0.3); }

/* ---- Dashboard-Visuals für Produkt-/Service-Hero ---- */
.hf-product-hero-media,
.hf-archive-visual-media {
	padding: 0;
	overflow: hidden;
	background: #fff;
}
.hf-product-hero-media img,
.hf-archive-visual-media img {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 250px;
	object-fit: cover;
	object-position: center;
}
.hf-product-hero-media { min-height: 320px; }
.hf-archive-visual-media { min-height: 260px; }

/* ---- Kontaktseite v2 ---- */
.hf-contact-hero {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 300px;
	gap: 32px;
	align-items: center;
	margin-bottom: 34px;
	padding: 34px;
	border-radius: 24px;
	border: 1px solid rgba(124,92,255,0.18);
	background:
		linear-gradient(135deg, rgba(255,255,255,0.97), rgba(245,241,255,0.88)),
		linear-gradient(90deg,#7c5cff,#f4efff);
	box-shadow: 0 18px 46px rgba(20,18,28,0.09);
	overflow: hidden;
}
.hf-contact-hero h1 { font-size: clamp(34px, 4.4vw, 54px); margin: 14px 0 12px; }
.hf-contact-hero p { color: var(--hf-soft); max-width: 650px; font-size: 16px; line-height: 1.75; margin: 0; }
.hf-contact-tags { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 20px; }
.hf-contact-tags span {
	background: #fff;
	border: 1px solid rgba(124,92,255,0.16);
	border-radius: 999px;
	color: var(--hf-soft);
	font-size: 13px;
	font-weight: 650;
	padding: 8px 11px;
}
.hf-contact-visual {
	border-radius: 20px;
	overflow: hidden;
	box-shadow: 0 18px 44px rgba(20,18,28,0.10);
}
.hf-contact-visual img { display: block; width: 100%; aspect-ratio: 1 / 1.05; object-fit: cover; }
.hf-contact-layout { display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: 24px; align-items: start; }
.hf-contact-side { display: grid; gap: 14px; }
.hf-contact-card,
.hf-contact-form {
	background: var(--hf-bg-2);
	border: 1px solid var(--hf-line);
	border-radius: 18px;
	box-shadow: var(--hf-shadow);
}
.hf-contact-card { padding: 22px; }
.hf-contact-card span {
	display: inline-flex;
	width: 42px;
	height: 42px;
	border-radius: 13px;
	align-items: center;
	justify-content: center;
	background: var(--hf-accent-soft);
	color: var(--hf-accent);
	font-weight: 800;
	margin-bottom: 12px;
}
.hf-contact-card h3 { margin: 0 0 8px; font-size: 18px; }
.hf-contact-card p { margin: 0; color: var(--hf-muted); font-size: 14px; line-height: 1.65; }
.hf-contact-form { padding: 26px; }
.hf-contact-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.hf-contact-form label { display: block; font-size: 13px; color: var(--hf-muted); margin-bottom: 14px; font-weight: 650; }
.hf-contact-form .hf-cfg-input { margin-top: 7px; width: 100%; background: #fff; }
.hf-contact-form textarea.hf-cfg-input { resize: vertical; min-height: 150px; font-family: inherit; }
.hf-contact-submit { width: 100%; justify-content: center; }
.hf-contact-privacy { font-size: 12px; color: var(--hf-muted); margin: 10px 0 0; line-height: 1.6; }
.hf-hp-field { position: absolute !important; left: -9999px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; }
@media (max-width: 860px) {
	.hf-contact-hero,
	.hf-contact-layout { grid-template-columns: 1fr; }
	.hf-contact-visual { display: none; }
}
@media (max-width: 560px) {
	.hf-contact-hero { padding: 26px 22px; }
	.hf-contact-fields { grid-template-columns: 1fr; gap: 0; }
	.hf-contact-form { padding: 20px; }
}
/* ---- Service SEO Guide ---- */
.hf-guide {
	margin: 36px 0 28px;
	padding: 30px;
	border-radius: 24px;
	border: 1px solid color-mix(in srgb, var(--hf-guide-solid) 16%, var(--hf-line));
	background:
		linear-gradient(135deg, rgba(255,255,255,0.96), rgba(247,244,255,0.88)),
		var(--hf-guide-grad);
	box-shadow: 0 18px 46px rgba(20,18,28,0.08);
}
.hf-guide-head { max-width: 780px; margin-bottom: 24px; }
.hf-guide-kicker {
	display: inline-flex;
	align-items: center;
	border-radius: 999px;
	background: #fff;
	border: 1px solid color-mix(in srgb, var(--hf-guide-solid) 18%, var(--hf-line));
	color: color-mix(in srgb, var(--hf-guide-solid) 76%, var(--hf-ink));
	font-size: 12px;
	font-weight: 850;
	text-transform: uppercase;
	letter-spacing: .06em;
	padding: 8px 11px;
}
.hf-guide-head h2 { font-size: clamp(28px, 3.2vw, 42px); margin: 14px 0 10px; }
.hf-guide-head p,
.hf-guide-panel p {
	color: var(--hf-soft);
	font-size: 16px;
	line-height: 1.78;
	margin: 0;
}
.hf-guide-layout {
	display: grid;
	grid-template-columns: 230px minmax(0, 1fr);
	gap: 22px;
	align-items: start;
}
.hf-guide-nav {
	position: sticky;
	top: 96px;
	display: grid;
	gap: 9px;
	padding: 12px;
	background: rgba(255,255,255,0.72);
	border: 1px solid rgba(255,255,255,0.78);
	border-radius: 18px;
	box-shadow: 0 12px 28px rgba(20,18,28,0.06);
}
.hf-guide-nav a {
	display: block;
	border-radius: 12px;
	padding: 10px 11px;
	background: #fff;
	border: 1px solid color-mix(in srgb, var(--hf-guide-solid) 12%, var(--hf-line));
	color: var(--hf-soft);
	font-size: 13px;
	font-weight: 750;
	line-height: 1.35;
}
.hf-guide-nav a:hover { color: var(--hf-ink); border-color: color-mix(in srgb, var(--hf-guide-solid) 42%, var(--hf-line)); transform: translateX(2px); }
.hf-guide-main { display: grid; gap: 16px; }
.hf-guide-visual {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 520px) 190px;
	gap: 16px;
	align-items: stretch;
	max-width: 730px;
}
.hf-guide-image {
	overflow: hidden;
	border-radius: 20px;
	border: 1px solid rgba(255,255,255,0.82);
	background: #fff;
	box-shadow: 0 14px 34px rgba(20,18,28,0.08);
}
.hf-guide-image img {
	display: block;
	width: 100%;
	height: auto;
	max-height: 420px;
	object-fit: contain;
	object-position: center;
}
.hf-guide-metric {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 8px;
	min-height: 210px;
	padding: 18px;
	border-radius: 20px;
	color: #fff;
	background: var(--hf-guide-grad);
	box-shadow: 0 14px 30px color-mix(in srgb, var(--hf-guide-solid) 20%, transparent);
}
.hf-guide-metric span {
	width: 48px;
	height: 48px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 15px;
	background: rgba(255,255,255,0.18);
}
.hf-guide-metric svg { width: 26px; height: 26px; }
.hf-guide-metric strong { font-size: 21px; line-height: 1.18; }
.hf-guide-metric em { font-style: normal; opacity: .86; font-size: 13px; }
.hf-guide-cards {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
}
.hf-guide-card,
.hf-guide-panel,
.hf-guide-links {
	background: rgba(255,255,255,0.92);
	border: 1px solid rgba(255,255,255,0.84);
	border-radius: 18px;
	box-shadow: 0 10px 26px rgba(20,18,28,0.055);
}
.hf-guide-card { padding: 17px; }
.hf-guide-card strong { display: block; color: var(--hf-ink); font-size: 15px; margin-bottom: 7px; }
.hf-guide-card span { color: var(--hf-muted); font-size: 13px; line-height: 1.58; }
.hf-guide-panel {
	scroll-margin-top: 110px;
	padding: 24px;
}
.hf-guide-panel h3 { font-size: 22px; margin: 0 0 10px; }
.hf-guide-links { padding: 20px; }
.hf-guide-links > strong { display: block; color: var(--hf-ink); margin-bottom: 12px; }
.hf-guide-links > div { display: flex; flex-wrap: wrap; gap: 9px; }
.hf-guide-links a {
	display: inline-flex;
	border-radius: 999px;
	padding: 9px 12px;
	background: #fff;
	border: 1px solid color-mix(in srgb, var(--hf-guide-solid) 18%, var(--hf-line));
	color: color-mix(in srgb, var(--hf-guide-solid) 72%, var(--hf-ink));
	font-size: 13px;
	font-weight: 750;
}
.hf-guide-links a:hover { border-color: color-mix(in srgb, var(--hf-guide-solid) 46%, var(--hf-line)); color: var(--hf-ink); }
.hf-guide-faq { margin-top: 22px; }
@media (max-width: 900px) {
	.hf-guide { padding: 24px 18px; }
	.hf-guide-layout { grid-template-columns: 1fr; }
	.hf-guide-nav {
		position: static;
		display: flex;
		overflow-x: auto;
		scrollbar-width: none;
	}
	.hf-guide-nav a { flex: 0 0 auto; max-width: 230px; }
	.hf-guide-visual { grid-template-columns: 1fr; }
	.hf-guide-metric { min-height: 150px; }
	.hf-guide-visual { max-width: 620px; margin: 0 auto; }
}
@media (max-width: 620px) {
	.hf-guide-head h2 { font-size: 28px; }
	.hf-guide-cards { grid-template-columns: 1fr; }
	.hf-guide-visual { max-width: 420px; }
	.hf-guide-image img { max-height: none; }
	.hf-guide-panel { padding: 20px; }
}
/* ---- Produktseiten Feinschliff ---- */
.hf-product-trust {
	background:
		linear-gradient(135deg, rgba(255,255,255,0.98), rgba(246,242,255,0.84)),
		var(--hf-prod-grad);
	border: 1px solid color-mix(in srgb, var(--hf-prod-solid) 14%, var(--hf-line));
	box-shadow: 0 12px 30px rgba(20,18,28,0.055);
}
.hf-product-trust b {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 25px;
	height: 25px;
	margin-right: 7px;
	border-radius: 999px;
	background: var(--hf-accent-soft);
	color: var(--hf-accent);
	font-size: 11px;
}
/* Die Regeln des alten Produktseiten-Blocks „Passende Services" wurden am
   23.08.2026 hier entfernt (seit 28.09.2026 ist der Block ganz ersetzt durch
   das Regal .hf-recos, siehe hf_render_service_shelf()).
   Sie konkurrierten mit dem Inline-<style> in
   woocommerce/content-single-product.php (Block "Passende Services"), das
   bei gleicher Spezifitaet spaeter im Dokument steht und deshalb gewann —
   aber nur fuer die Eigenschaften, die es selbst nennt. Das hier stehende
   color:#fff blieb dadurch aktiv und zeichnete weisse Glyphen auf eine
   fast weisse Flaeche. Ausserdem waren background und border-color hier an
   var(--hf-prod-grad)/var(--hf-prod-solid) gebunden, die auf der Sektion nie
   gesetzt waren — die Deklarationen fielen ersatzlos aus. Heute gilt fuer
   Warenkorb und Produktseite dieselbe Quelle: die .hf-recos-Regeln unten. */
.hf-product-return {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	background:
		linear-gradient(135deg, rgba(255,255,255,0.98), rgba(248,245,255,0.96)),
		var(--hf-prod-grad);
	color: var(--hf-ink);
	border: 1px solid color-mix(in srgb, var(--hf-prod-solid) 16%, var(--hf-line));
	box-shadow: 0 12px 28px rgba(20,18,28,0.055);
}
.hf-product-return h2 { color: var(--hf-ink); text-align: left; margin: 0 0 6px; }

/* ---- Ratgeber-Kacheln und Abschluss-Block (24.08.2026) ----
   Vorher klebten die Kacheln am Einleitungssatz, waren flach und gaben keinen
   Hinweis darauf, dass sie Links sind — dabei sind sie die interne Verlinkung
   der Seite und sollen geklickt werden. Der Abschluss-Block wirkte fuer einen
   Kaufaufruf zu beilaeufig. */
.hf-product-guides .hf-seo-link-grid { margin-top: 26px; gap: 14px; }
.hf-product-guides .hf-seo-link-grid a {
	position: relative;
	padding: 17px 40px 16px 17px;
	border-radius: 14px;
	background: var(--hf-bg-2);
	border: 1px solid var(--hf-line);
	box-shadow: 0 6px 18px rgba(20,18,28,0.04);
	transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.hf-product-guides .hf-seo-link-grid a::after {
	content: "→";
	position: absolute;
	right: 15px;
	top: 16px;
	font-size: 15px;
	line-height: 1;
	color: var(--hf-accent);
	transition: transform .16s ease;
}
.hf-product-guides .hf-seo-link-grid a:hover {
	transform: translateY(-3px);
	border-color: color-mix(in srgb, var(--hf-accent) 42%, var(--hf-line));
	box-shadow: 0 12px 26px color-mix(in srgb, var(--hf-accent) 14%, transparent);
}
.hf-product-guides .hf-seo-link-grid a:hover::after { transform: translateX(3px); }
.hf-product-guides .hf-seo-link-grid a:hover strong { color: var(--hf-accent); }
.hf-product-guides .hf-seo-link-grid a:focus-visible {
	outline: 2px solid var(--hf-accent);
	outline-offset: 2px;
}

/* Abschluss: mehr Raum, klarere Hierarchie, praesenterer Button. */
.hf-product-return { padding: 30px 30px 28px; border-radius: 20px; }
.hf-product-return h2 { font-size: 24px; margin: 0 0 9px; }
.hf-product-return p { font-size: 15px; line-height: 1.55; max-width: 640px; }
.hf-product-return .hf-btn {
	padding: 14px 30px;
	font-size: 15px;
	font-weight: 700;
	border-radius: 12px;
	box-shadow: 0 10px 24px color-mix(in srgb, var(--hf-accent) 26%, transparent);
	transition: transform .16s ease, box-shadow .16s ease;
}
.hf-product-return .hf-btn:hover {
	transform: translateY(-2px);
	box-shadow: 0 14px 30px color-mix(in srgb, var(--hf-accent) 34%, transparent);
}
@media (prefers-reduced-motion: reduce) {
	.hf-product-guides .hf-seo-link-grid a,
	.hf-product-guides .hf-seo-link-grid a::after,
	.hf-product-return .hf-btn { transition: none; }
	.hf-product-guides .hf-seo-link-grid a:hover,
	.hf-product-return .hf-btn:hover { transform: none; }
}
.hf-product-return p { color: var(--hf-muted); margin: 0; }
.hf-product-return .hf-btn { flex: none; }
/* 23.08.2026 entfernt: ".hf-tips-vis svg polyline" und ".hf-tips-vis svg circle".
   Beide galten dem alten Wachstums-Chart und griffen als Nachfahren-Selektoren
   in JEDES SVG innerhalb von .hf-tips-vis — auch in eingebettete
   Plattform-Glyphen (Instagram, Pinterest enthalten <circle>). CSS schlaegt
   Praesentationsattribute, die Glyphen waeren stumm blasslila geworden.
   Der Sicherheits-Check-Block nutzt weder circle noch polyline. */
@media (max-width: 860px) {
	.hf-product-return { align-items: flex-start; flex-direction: column; }
}
/* ---- Service Guide CTA ---- */
.hf-guide-return {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	padding: 18px 20px;
	border-radius: 18px;
	background: var(--hf-ink);
	color: #fff;
}
.hf-guide-return span { color: rgba(255,255,255,0.62); font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.hf-guide-return strong { color: #fff; margin-right: auto; }
.hf-guide-return .hf-btn { flex: none; }
@media (max-width: 620px) {
	.hf-guide-return { align-items: flex-start; flex-direction: column; }
}
/* ---- Warenkorb Feinschliff ---- */
.woocommerce-cart .hf-main > .hf-container,
.woocommerce-cart .entry-content {
	max-width: 1180px;
	margin-left: auto;
	margin-right: auto;
}
.woocommerce-cart .entry-title,
.woocommerce-cart h1 {
	font-size: clamp(36px, 5vw, 54px);
	line-height: 1.06;
	letter-spacing: 0;
	margin-bottom: 30px;
}
.hf-cart-modern {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 390px;
	gap: 22px;
	align-items: start;
	margin-top: 20px;
}
.hf-cart-items {
	display: grid;
	gap: 14px;
}
.hf-cart-item {
	position: relative;
	display: grid;
	grid-template-columns: 46px minmax(0, 1fr) auto;
	gap: 12px;
	align-items: start;
	padding: 20px;
	border-radius: 18px;
	border: 1px solid color-mix(in srgb, var(--hf-prod-solid) 12%, var(--hf-line));
	background: rgba(255,255,255,0.96);
	box-shadow: 0 10px 26px rgba(20,18,28,0.045);
}
.hf-cart-item-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border-radius: 13px;
	color: #fff;
	background: var(--hf-prod-grad, var(--hf-accent-grad));
	box-shadow: 0 10px 20px color-mix(in srgb, var(--hf-prod-solid) 18%, transparent);
}
.hf-cart-item-icon svg { width: 22px; height: 22px; }
.hf-cart-item-main h2 {
	text-align: left;
	font-size: 24px;
	line-height: 1.18;
	margin: 0 0 12px;
}
.hf-cart-item-main h2 a { color: var(--hf-ink); }
.hf-cart-item-main h2 span { color: var(--hf-ink); font-weight: 800; }
.hf-cart-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 14px;
}
.hf-cart-chips span {
	display: inline-flex;
	align-items: center;
	min-height: 28px;
	padding: 5px 10px;
	border-radius: 9px;
	background: color-mix(in srgb, var(--hf-prod-solid) 9%, #fff);
	color: color-mix(in srgb, var(--hf-prod-solid) 82%, var(--hf-ink));
	font-size: 13px;
	font-weight: 750;
}
.hf-cart-price {
	color: var(--hf-ink);
	font-size: 21px;
	font-weight: 900;
}
.hf-cart-item .wc-item-meta,
.hf-cart-item dl.variation {
	display: grid;
	gap: 4px 8px;
	grid-template-columns: auto 1fr;
	margin: 10px 0 0;
	color: var(--hf-muted);
	font-size: 13px;
}
.hf-cart-item .wc-item-meta p,
.hf-cart-item dl.variation p { margin: 0; }
.hf-cart-item-actions { padding-top: 2px; }
.hf-cart-remove {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	overflow: hidden;
	border-radius: 10px;
	border: 1px solid var(--hf-line);
	background: #fff;
	color: transparent !important;
	font-size: 0 !important;
}
.hf-cart-remove::before {
	content: "";
	width: 16px;
	height: 16px;
	background: currentColor;
	color: var(--hf-muted);
	-webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 3h6l1 2h4v2H4V5h4l1-2Zm1 7h2v8h-2v-8Zm4 0h2v8h-2v-8ZM7 8h10l-.7 13H7.7L7 8Z' fill='black'/%3E%3C/svg%3E") center/contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 3h6l1 2h4v2H4V5h4l1-2Zm1 7h2v8h-2v-8Zm4 0h2v8h-2v-8ZM7 8h10l-.7 13H7.7L7 8Z' fill='black'/%3E%3C/svg%3E") center/contain no-repeat;
}
.hf-cart-remove:hover {
	border-color: color-mix(in srgb, #ef4444 36%, var(--hf-line));
	background: #fff5f5;
}
.hf-cart-summary {
	position: sticky;
	top: 98px;
}
.hf-cart-totals {
	float: none !important;
	width: 100% !important;
	padding: 28px 24px;
	border-radius: 22px;
	border: 1px solid var(--hf-line);
	background: rgba(255,255,255,0.96);
	box-shadow: 0 16px 38px rgba(20,18,28,0.06);
}
.hf-cart-totals h2 {
	text-align: left;
	font-size: 28px;
	margin: 0 0 22px;
}
.hf-cart-summary-sub {
	display: flex;
	justify-content: center;
	padding: 10px 0 18px;
	border-bottom: 1px solid var(--hf-line);
	color: var(--hf-muted);
	font-weight: 800;
}
.hf-cart-coupon {
	padding: 18px 0;
	border-bottom: 1px solid var(--hf-line);
}
.hf-cart-coupon label {
	display: block;
	margin-bottom: 10px;
	color: var(--hf-muted);
	font-weight: 700;
}
.hf-cart-coupon > div {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 8px;
}
.hf-cart-coupon input {
	width: 100%;
	border: 1px solid var(--hf-line);
	border-radius: 10px;
	padding: 11px 12px;
	background: #fff;
}
.hf-cart-coupon button {
	border: 0;
	border-radius: 10px;
	padding: 0 13px;
	background: var(--hf-bg-3);
	color: var(--hf-ink);
	font-weight: 800;
}
.hf-cart-total-lines { padding: 14px 0 0; }
.hf-cart-total-line {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 8px 0;
	color: var(--hf-muted);
}
.hf-cart-total-line strong {
	color: var(--hf-ink);
	font-size: 18px;
	font-weight: 900;
}
.hf-cart-total-line.order-total {
	margin-top: 6px;
	padding-top: 16px;
	border-top: 1px solid var(--hf-line);
	color: var(--hf-ink);
}
.hf-cart-total-line.order-total span,
.hf-cart-total-line.order-total strong { font-size: 21px; }
.hf-cart-tax-note {
	margin: 18px 0 18px;
	color: var(--hf-muted);
	font-size: 13px;
	line-height: 1.45;
}
.hf-cart-totals .wc-proceed-to-checkout { padding: 0; }
.hf-cart-totals .checkout-button,
.woocommerce .hf-cart-totals a.checkout-button {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 58px;
	border-radius: 10px;
	background: var(--hf-accent-grad);
	color: #fff;
	font-size: 18px;
	font-weight: 900;
	box-shadow: 0 12px 28px rgba(124,87,255,0.22);
}
.hf-cart-totals .checkout-button::after { content: ""; }
.hf-cart-update { display: none !important; }
.woocommerce-cart .cart-collaterals { display: none; }
/* Nur die klassische Warenkorb-Tabelle. Der Block-Warenkorb zeigt sein
   Produktmotiv seit dem 28.09.2026 (siehe weiter unten). */
.woocommerce-cart table.cart .product-thumbnail,
.woocommerce-cart table.shop_table .product-thumbnail {
	display: none !important;
}

.woocommerce-cart .wp-block-woocommerce-empty-cart-block > .wp-block-separator,
.woocommerce-cart .wp-block-woocommerce-empty-cart-block > .wp-block-heading:not(.wc-block-cart__empty-cart__title),
.woocommerce-cart .wp-block-woocommerce-empty-cart-block > .wp-block-product-new,
.woocommerce-cart .wp-block-woocommerce-empty-cart-block > .wp-block-woocommerce-product-new {
	display: none !important;
}
.woocommerce-cart .wc-block-cart-items__row .wc-block-cart-item__product {
	padding-left: 0 !important;
}
.woocommerce-cart .wc-block-components-product-metadata__description,
.woocommerce-cart .wc-block-cart-item__description,
.woocommerce-cart .wc-block-components-product-metadata > p {
	display: none !important;
}
.woocommerce-cart .wc-block-components-product-metadata,
.woocommerce-cart .wc-block-components-product-details {
	font-size: 13px;
	line-height: 1.45;
	color: var(--hf-muted);
}
.woocommerce-cart .wc-block-cart,
.woocommerce-cart .wc-block-components-sidebar-layout {
	max-width: 1140px;
	margin-left: auto;
	margin-right: auto;
}
@media (max-width: 860px) {
	.hf-cart-modern { grid-template-columns: 1fr; }
	.hf-cart-summary { position: static; }
}
@media (max-width: 520px) {
	.woocommerce-cart .entry-title,
	.woocommerce-cart h1 { font-size: 34px; }
	.hf-cart-item { grid-template-columns: 42px minmax(0, 1fr); padding: 16px; }
	.hf-cart-item-actions { position: absolute; top: 14px; right: 14px; }
	.hf-cart-item-main h2 { font-size: 20px; padding-right: 40px; }
	.hf-cart-coupon > div { grid-template-columns: 1fr; }
}

/* ---- Mobile Header: Warenkorb als stabiler Icon-Button ---- */
@media (max-width: 782px) {
	.hf-header-cta {
		gap: 8px;
		flex: 0 0 auto;
	}
	/* Dropdown unabhängig vom Header-Stacking-Kontext direkt am Viewport verankern —
	   vermeidet Positionierungsprobleme durch sticky/zoom auf manchen Mobilgeräten. */
	.hf-lang-menu {
		position: fixed;
		top: 64px;
		right: 12px;
		left: auto;
	}
	.hf-header .hf-cart:not(.hf-hide-mobile) {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 40px;
		height: 40px;
		flex: 0 0 40px;
		border: 1px solid var(--hf-line);
		border-radius: 10px;
		background: rgba(255,255,255,0.72);
		color: var(--hf-ink);
		line-height: 1;
	}
	.hf-header .hf-cart:not(.hf-hide-mobile) .hf-cart-ico {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		font-size: 18px;
		line-height: 1;
		transform: translateY(-1px);
	}
	.hf-header .hf-cart:not(.hf-hide-mobile) .hf-badge {
		position: absolute;
		top: -5px;
		right: -5px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-width: 18px;
		height: 18px;
		margin-left: 0;
		padding: 0 5px;
		border: 2px solid rgba(255,255,255,0.92);
		font-size: 10px;
		font-weight: 800;
		line-height: 1;
	}
	.hf-burger {
		flex: 0 0 40px;
	}
}
@media (max-width: 360px) {
	.hf-container {
		padding-left: 18px;
		padding-right: 18px;
	}
	.hf-logo {
		gap: 9px;
		font-size: 20px;
	}
	.hf-logo .hf-mark {
		width: 29px;
		height: 29px;
	}
	.hf-header-cta {
		gap: 7px;
	}
}

/* ---- Plugin-Formulare: Fluent Forms + MailPoet ---- */
.hf-contact-form .fluentform,
.hf-mailpoet-wrap .mailpoet_form {
	font-family: var(--hf-font);
}
.hf-contact-form .ff-el-group {
	margin-bottom: 16px;
}
.hf-contact-form .ff-el-input--label label,
.hf-contact-form .ff-el-form-check-label,
.hf-mailpoet-wrap label {
	color: var(--hf-ink);
	font-size: 13px;
	font-weight: 750;
}
.hf-contact-form .ff-el-form-control,
.hf-contact-form select,
.hf-contact-form textarea,
.hf-mailpoet-wrap input[type="email"],
.hf-mailpoet-wrap input[type="text"] {
	width: 100%;
	min-height: 46px;
	background: var(--hf-bg-3) !important;
	border: 1px solid var(--hf-line) !important;
	border-radius: 10px !important;
	color: var(--hf-ink) !important;
	font-family: var(--hf-font) !important;
	font-size: 15px !important;
	padding: 12px 14px !important;
	box-shadow: none !important;
}
.hf-contact-form textarea.ff-el-form-control {
	min-height: 150px;
	resize: vertical;
}
.hf-contact-form .ff-el-form-control:focus,
.hf-mailpoet-wrap input[type="email"]:focus {
	outline: none !important;
	border-color: var(--hf-accent) !important;
	box-shadow: 0 0 0 4px var(--hf-accent-soft) !important;
}
.hf-contact-form .ff-btn-submit,
.hf-mailpoet-wrap input[type="submit"],
.hf-mailpoet-wrap button[type="submit"] {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	min-height: 46px;
	background: var(--hf-accent) !important;
	border: 0 !important;
	border-radius: 10px !important;
	color: #fff !important;
	font-family: var(--hf-font) !important;
	font-size: 15px !important;
	font-weight: 750 !important;
	padding: 12px 20px !important;
	cursor: pointer;
}
.hf-contact-form .ff-btn-submit:hover,
.hf-mailpoet-wrap input[type="submit"]:hover,
.hf-mailpoet-wrap button[type="submit"]:hover {
	background: #6b4bff !important;
}
.hf-contact-form .ff-message-success,
.hf-contact-form .ff-errors-in-stack,
.hf-mailpoet-wrap .mailpoet_validate_success,
.hf-mailpoet-wrap .mailpoet_validate_error {
	border-radius: 12px !important;
	font-size: 14px !important;
}
.hf-mailpoet-wrap .mailpoet_form {
	padding: 0 !important;
	background: transparent !important;
}
.hf-mailpoet-wrap .mailpoet_paragraph,
.hf-mailpoet-wrap p.mailpoet_form_paragraph {
	margin: 0 0 10px !important;
}
.hf-mailpoet-wrap .mailpoet_paragraph.last,
.hf-mailpoet-wrap p.mailpoet_form_paragraph.last {
	margin-bottom: 0 !important;
}
.hf-mailpoet-wrap .mailpoet_form_paragraph,
.hf-mailpoet-wrap .mailpoet_form_paragraph a {
	font-size: 12px;
	line-height: 1.5;
}

/* ================= MEIN KONTO / KUNDENBEREICH ================= */
.woocommerce-account .hf-main { padding: 40px 0 70px; }
.woocommerce-account .woocommerce {
	max-width: 1140px;
	margin: 0 auto;
	padding: 0 24px;
	display: grid;
	grid-template-columns: 250px 1fr;
	gap: 28px;
	align-items: start;
}
/* WooCommerce-Clearfix-Pseudoelemente würden im Grid eigene Zellen belegen */
.woocommerce-account .woocommerce::before,
.woocommerce-account .woocommerce::after { content: none; display: none; }

/* Login/Registrierung (nicht eingeloggt): einspaltig zentriert */
.woocommerce-account:not(.logged-in) .woocommerce {
	grid-template-columns: 1fr;
	max-width: 460px;
}

/* WooCommerce-Default-Floats/Breiten neutralisieren (sonst zerbricht das Grid) */
.woocommerce-account .woocommerce-MyAccount-navigation,
.woocommerce-account .woocommerce-MyAccount-content {
	float: none !important;
	width: auto !important;
	margin: 0 !important;
}

/* ---- Seitliche Navigation ---- */
.woocommerce-MyAccount-navigation {
	background: var(--hf-bg-2);
	border: 1px solid var(--hf-line);
	border-radius: 16px;
	padding: 10px;
	position: sticky;
	top: 90px;
}
.woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; }
.woocommerce-MyAccount-navigation li { margin: 0; }
.woocommerce-MyAccount-navigation li a {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 14px;
	border-radius: 11px;
	color: var(--hf-soft);
	font-size: 14.5px;
	font-weight: 600;
	transition: background .15s ease, color .15s ease;
}
.woocommerce-MyAccount-navigation li a:hover { background: var(--hf-bg-3); color: var(--hf-ink); }
.woocommerce-MyAccount-navigation li.is-active a {
	background: var(--hf-accent);
	color: #fff;
}
.woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout a {
	color: var(--hf-muted);
	border-top: 1px solid var(--hf-line);
	border-radius: 0 0 11px 11px;
	margin-top: 6px;
}
.woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout a:hover { color: #a3392d; background: transparent; }

/* ---- Inhaltsbereich ---- */
.woocommerce-MyAccount-content {
	background: var(--hf-bg-2);
	border: 1px solid var(--hf-line);
	border-radius: 16px;
	padding: 30px 32px;
	min-width: 0;
}
.woocommerce-MyAccount-content > p:first-child:empty { display: none; }

/* ---- Dashboard-Kopf ---- */
.smm-dash-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 18px;
	flex-wrap: wrap;
	margin-bottom: 26px;
}
.smm-dash-hi { font-size: 13px; color: var(--hf-accent); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.smm-dash-head h2 { margin: 6px 0 4px; font-size: 26px; }
.smm-dash-head p { margin: 0; color: var(--hf-muted); font-size: 14px; }
.smm-dash-cta {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	background: var(--hf-accent);
	color: #fff;
	font-weight: 600;
	font-size: 14px;
	padding: 11px 18px;
	border-radius: 11px;
	white-space: nowrap;
	transition: background .15s ease, transform .1s ease;
}
.smm-dash-cta:hover { background: #6b4bff; color: #fff; transform: translateY(-1px); }

/* ---- Statistik-Karten ---- */
.smm-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 32px; }
.smm-stat {
	background: var(--hf-bg-3);
	border: 1px solid var(--hf-line);
	border-radius: 14px;
	padding: 18px 20px;
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.smm-stat-num { font-size: 28px; font-weight: 800; color: var(--hf-ink); line-height: 1; }
.smm-stat-lbl { font-size: 12.5px; color: var(--hf-muted); }

.smm-dash-sub { font-size: 16px; margin: 0 0 14px; color: var(--hf-ink); }

/* ---- Bestellpositions-Karten ---- */
.smm-campaigns { display: flex; flex-direction: column; gap: 14px; }
.smm-camp {
	border: 1px solid var(--hf-line);
	border-radius: 14px;
	padding: 18px 20px;
	background: var(--hf-bg-2);
	transition: border-color .15s ease, box-shadow .15s ease;
}
.smm-camp:hover { border-color: var(--hf-line-2); box-shadow: var(--hf-shadow); }
.smm-camp-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.smm-camp-title { font-weight: 700; color: var(--hf-ink); font-size: 16px; }
.smm-camp-meta { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; color: var(--hf-muted); margin-bottom: 14px; }
.smm-camp-meta b { color: var(--hf-ink); }

/* Fortschrittsbalken */
.smm-camp-bar { height: 8px; border-radius: 20px; background: var(--hf-bg-3); overflow: hidden; }
.smm-camp-fill { display: block; height: 100%; border-radius: 20px; background: var(--hf-accent); transition: width .6s ease; }
.smm-fill-completed { background: var(--hf-success); }
.smm-fill-canceled { background: #a3392d; }
.smm-camp-prog { font-size: 12px; color: var(--hf-muted); margin-top: 6px; }

/* Status-Badges */
.smm-badge { font-size: 12px; font-weight: 700; padding: 4px 11px; border-radius: 20px; white-space: nowrap; }
.smm-badge-completed { background: rgba(31,175,106,0.12); color: #1faf6a; }
.smm-badge-progress  { background: var(--hf-accent-soft); color: #5a45c2; }
.smm-badge-pending   { background: rgba(176,137,0,0.12); color: #b08900; }
.smm-badge-partial   { background: rgba(176,137,0,0.12); color: #b08900; }
.smm-badge-canceled  { background: rgba(163,57,45,0.12); color: #a3392d; }

/* Nachfüllen */
.smm-camp-actions { margin-top: 14px; }
.smm-refill-btn {
	background: transparent;
	color: var(--hf-accent);
	border: 1px solid var(--hf-accent);
	border-radius: 9px;
	padding: 9px 16px;
	font-weight: 600;
	font-size: 13px;
	cursor: pointer;
	transition: background .15s ease, color .15s ease;
}
.smm-refill-btn:hover { background: var(--hf-accent); color: #fff; }
.smm-refill-done { font-size: 13px; font-weight: 600; color: var(--hf-success); }

/* Leerzustand */
.smm-empty { text-align: center; padding: 40px 20px; }
.smm-empty-ico { font-size: 40px; margin-bottom: 10px; }
.smm-empty strong { display: block; font-size: 18px; color: var(--hf-ink); margin-bottom: 6px; }
.smm-empty p { color: var(--hf-muted); margin: 0 0 18px; }

/* ---- WooCommerce Tabellen (Bestellungen, Adressen) im Stil ---- */
.woocommerce-account .woocommerce-orders-table,
.woocommerce-account table.shop_table {
	border: 1px solid var(--hf-line);
	border-radius: 14px;
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
	background: var(--hf-bg-2);
}
.woocommerce-account table.shop_table th { background: var(--hf-bg-3); color: var(--hf-muted); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; padding: 14px 16px; }
.woocommerce-account table.shop_table td { padding: 16px; border-top: 1px solid var(--hf-line); color: var(--hf-soft); }
.woocommerce-account .woocommerce-orders-table__cell-order-actions a.button,
.woocommerce-account .woocommerce-MyAccount-content .button {
	background: var(--hf-accent); color: #fff; border-radius: 9px; padding: 9px 16px; font-weight: 600; font-size: 13px; border: 0;
}
.woocommerce-account .woocommerce-MyAccount-content .button:hover { background: #6b4bff; }
.woocommerce-account h2, .woocommerce-account h3 { color: var(--hf-ink); }
.woocommerce-account .woocommerce-Address { background: var(--hf-bg-3); border: 1px solid var(--hf-line); border-radius: 14px; padding: 20px; }
.woocommerce-account .woocommerce-MyAccount-content form .button[type="submit"] { margin-top: 6px; }

/* Kontaktseite: Datenschutz-Hinweis unter dem Formular */
.hf-contact-privacy { font-size: 12.5px; color: var(--hf-muted); margin: 14px 2px 0; line-height: 1.6; }
.hf-contact-privacy a { color: var(--hf-accent); text-decoration: underline; }

/* ---- Kontaktseite: Login-/Ticket-Teaser ---- */
.hf-contact-member {
	display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
	background: linear-gradient(145deg, var(--hf-accent-soft) 0%, rgba(124,92,255,0.04) 100%);
	border: 1px solid rgba(124,92,255,0.22);
	border-radius: 16px; padding: 22px 26px; margin: 0 0 30px;
}
.hf-contact-member-in { background: var(--hf-bg-2); }
.hf-contact-member-txt strong { display: block; font-size: 17px; color: var(--hf-ink); margin-bottom: 4px; }
.hf-contact-member-txt p { margin: 0; color: var(--hf-muted); font-size: 14px; max-width: 560px; }
.hf-contact-member-cta { display: flex; gap: 10px; flex-wrap: wrap; flex-shrink: 0; }
@media (max-width: 600px) {
	.hf-contact-member-cta { width: 100%; }
	.hf-contact-member-cta .hf-btn { flex: 1; justify-content: center; }
}

/* ---- Vertrauens-Zeile Warenkorb/Kasse ---- */
.hf-checkout-trust {
	display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 24px;
	background: var(--hf-bg-3); border: 1px solid var(--hf-line); border-radius: 12px;
	padding: 14px 18px; margin: 0 0 22px;
}
.hf-checkout-trust span { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: 600; color: var(--hf-soft); }
.hf-trust-ico { font-size: 15px; line-height: 1; }
@media (max-width: 520px) {
	.hf-checkout-trust { gap: 8px 16px; padding: 12px 14px; }
	.hf-checkout-trust span { font-size: 12.5px; }
}

/* ---- Warenkorb-Block: Artikel-Meta als Chips ---- */
.wc-block-components-product-details {
	display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; padding: 0; list-style: none;
}
.wc-block-components-product-details > span,
.wc-block-components-product-details > li {
	display: inline-flex; align-items: baseline; gap: 5px;
	background: var(--hf-bg-3); border: 1px solid var(--hf-line); border-radius: 8px;
	padding: 4px 10px; font-size: 12px; line-height: 1.45;
}
.wc-block-components-product-details > span,
.wc-block-components-product-details > li { max-width: 100%; }
/* Die Beschriftung bricht nie. Das Etikett ist ein Flex-Element; bei einer
   langen Ziel-URL schrumpfte Flex den Namen, bis er mitten im Wort brach —
   „Hed ef:" in der mobilen Kasse, am 28.09.2026 im Sichtnachweis gesehen.
   Der Wert darf umbrechen, aber nur an langen Zeichenketten wie URLs
   (overflow-wrap: anywhere). word-break: break-all würde auch normale
   Wörter wie „Deutschland" zerteilen. */
.wc-block-components-product-details__name { color: var(--hf-muted); font-weight: 500; flex: 0 0 auto; white-space: nowrap; }
.wc-block-components-product-details__value { color: var(--hf-ink); font-weight: 700; min-width: 0; overflow-wrap: anywhere; }
/* WooCommerce-Trennzeichen " / " ausblenden – wir trennen über die Chips */
.wc-block-components-product-details [aria-hidden="true"] { display: none; }

/* Lange Produkt-Kurzbeschreibung in Warenkorb/Kasse ausblenden (Meta-Chips bleiben sichtbar) */
.wc-block-components-product-metadata__description { display: none; }

/* Kassen-Übersicht entschlacken: doppelter Einzelpreis raus (Menge ist immer 1, Gesamtpreis rechts genügt) */
.wc-block-components-order-summary-item__individual-prices,
.wc-block-components-order-summary-item__individual-price { display: none; }
/* Nichtssagende „1"-Mengen-Badge auf dem Bild ausblenden (echte Menge steht im „Menge:"-Chip) */
.wc-block-components-order-summary-item__quantity { display: none !important; }

/* ---- Zahlungs-Badges unter „Weiter zur Kasse" ---- */
.hf-cart-pay { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--hf-line); text-align: center; }
.hf-cart-pay-note { font-size: 12.5px; color: var(--hf-muted); margin: 0 0 12px; }
.hf-cart-pay .hf-pay { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0; }

/* ---- Hilfe & Support ---- */
.smm-support-head h2 { margin: 0 0 6px; font-size: 24px; text-align: left; }
.smm-support-head p { color: var(--hf-muted); font-size: 14px; margin: 0 0 24px; text-align: left; }
.smm-support-grid { display: grid; grid-template-columns: 1fr 280px; gap: 22px; align-items: start; }
.smm-support-label { display: block; font-size: 13px; font-weight: 600; color: var(--hf-ink); margin: 0 0 6px; }
.smm-support-form .smm-support-label + .smm-support-input { margin-bottom: 16px; }
.smm-support-input {
	width: 100%; padding: 11px 13px; background: var(--hf-bg-3); border: 1px solid var(--hf-line);
	border-radius: 10px; color: var(--hf-ink); font-size: 14px; font-family: inherit;
}
.smm-support-input:focus { outline: none; border-color: var(--hf-accent); }
.smm-support-textarea { resize: vertical; min-height: 130px; line-height: 1.6; }
.smm-support-btn { margin-top: 18px; border: 0; cursor: pointer; }
.smm-support-aside { display: flex; flex-direction: column; gap: 14px; }
.smm-support-card { background: var(--hf-bg-3); border: 1px solid var(--hf-line); border-radius: 14px; padding: 18px; }
.smm-support-card strong { display: block; color: var(--hf-ink); font-size: 14px; margin-bottom: 6px; }
.smm-support-card p { color: var(--hf-muted); font-size: 13px; margin: 0 0 12px; line-height: 1.6; }
.smm-support-faq, .smm-support-mail { color: var(--hf-accent); font-weight: 600; font-size: 13.5px; word-break: break-word; }
@media (max-width: 760px) {
	.smm-support-grid { grid-template-columns: 1fr; }
}

/* ---- Konto-Formular (Kontoeinstellungen inkl. Rechnungsadresse) ---- */
.woocommerce-account .woocommerce-EditAccountForm .form-row,
.woocommerce-account .smm-address-fieldset .form-row { margin: 0 0 16px; }
.woocommerce-account .woocommerce-EditAccountForm label,
.woocommerce-account .smm-address-fieldset label {
	display: block; font-size: 13px; font-weight: 600; color: var(--hf-ink); margin-bottom: 6px;
}
.woocommerce-account .woocommerce-MyAccount-content input.input-text,
.woocommerce-account .woocommerce-MyAccount-content select,
.woocommerce-account .woocommerce-MyAccount-content .select2-selection {
	width: 100%; padding: 11px 13px; background: var(--hf-bg-3); border: 1px solid var(--hf-line);
	border-radius: 10px; color: var(--hf-ink); font-size: 14px; font-family: inherit;
}
.woocommerce-account .woocommerce-MyAccount-content input.input-text:focus,
.woocommerce-account .woocommerce-MyAccount-content select:focus { outline: none; border-color: var(--hf-accent); }
.woocommerce-account .woocommerce-EditAccountForm fieldset {
	border: 0; border-top: 1px solid var(--hf-line); margin: 26px 0 0; padding: 24px 0 0;
}
.woocommerce-account .woocommerce-EditAccountForm legend,
.woocommerce-account .smm-address-fieldset legend {
	font-size: 17px; font-weight: 700; color: var(--hf-ink); padding: 0; margin: 0 0 4px;
}
.smm-address-hint { font-size: 13px; color: var(--hf-muted); margin: 0 0 16px; }
.woocommerce-account .woocommerce-EditAccountForm .woocommerce-form-row--first,
.woocommerce-account .woocommerce-EditAccountForm .woocommerce-form-row--last { width: 48%; display: inline-block; }
.woocommerce-account .woocommerce-EditAccountForm .woocommerce-form-row--first { margin-right: 3%; }
.woocommerce-account .woocommerce-MyAccount-content em { color: var(--hf-muted); font-size: 12px; }

@media (max-width: 820px) {
	.woocommerce-account .woocommerce { grid-template-columns: 1fr; gap: 18px; }
	.woocommerce-MyAccount-navigation { position: static; }
	.woocommerce-MyAccount-navigation ul { display: flex; flex-wrap: wrap; gap: 4px; }
	.woocommerce-MyAccount-navigation li a { padding: 9px 13px; font-size: 13.5px; }
	.woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout a { border-top: 0; }
	.woocommerce-MyAccount-content { padding: 22px 20px; }
	.smm-stats { grid-template-columns: 1fr; }
	.smm-dash-head h2 { font-size: 22px; }
}

/* ---- WooCommerce Block-Warenkorb: moderne Bestellprüfung ---- */
.woocommerce-cart .wp-block-woocommerce-cart.alignwide,
.woocommerce-cart .wc-block-cart,
.woocommerce-cart .wc-block-components-sidebar-layout {
	max-width: 1180px;
	margin-left: auto;
	margin-right: auto;
}
.woocommerce-cart .wp-block-woocommerce-cart { margin-top: 18px; }
.woocommerce-cart .wc-block-components-sidebar-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 390px;
	gap: 22px;
	align-items: start;
}
.woocommerce-cart .wc-block-components-main { width: auto; padding-right: 0; }
.woocommerce-cart .wc-block-components-sidebar {
	position: sticky;
	top: 98px;
	width: auto;
	padding: 28px 24px;
	border: 1px solid var(--hf-line);
	border-radius: 22px;
	background: rgba(255,255,255,0.97);
	box-shadow: 0 16px 38px rgba(20,18,28,0.06);
}
.woocommerce-cart .wc-block-cart-items {
	border: 0;
	border-collapse: separate;
	border-spacing: 0 14px;
}
.woocommerce-cart .wc-block-cart-items thead { display: none; }
.woocommerce-cart .wc-block-cart-items__row {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 14px;
	padding: 22px;
	margin-bottom: 14px;
	border: 1px solid var(--hf-line);
	border-radius: 18px;
	background: rgba(255,255,255,0.97);
	box-shadow: 0 10px 26px rgba(20,18,28,0.045);
}
.woocommerce-cart .wc-block-cart-items__row td {
	display: block;
	border: 0 !important;
	padding: 0 !important;
}
/* Platz fuer das Produktmotiv links daneben (56 px + 16 px Abstand). */
.woocommerce-cart .wc-block-cart-item__wrap { padding-left: 72px; }
.woocommerce-cart .wc-block-components-product-name,
.woocommerce-cart .wc-block-cart-item__product .wc-block-components-product-name {
	color: var(--hf-ink);
	font-size: 24px;
	line-height: 1.18;
	font-weight: 900;
	text-decoration: none;
}
.woocommerce-cart .wc-block-components-product-metadata,
.woocommerce-cart .wc-block-components-product-details {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 12px;
	color: var(--hf-muted);
}
.woocommerce-cart .wc-block-components-product-details li {
	display: inline-flex;
	align-items: center;
	min-height: 28px;
	margin: 0;
	padding: 5px 10px;
	border-radius: 9px;
	background: color-mix(in srgb, var(--hf-accent) 9%, #fff);
	color: color-mix(in srgb, var(--hf-accent) 78%, var(--hf-ink));
	font-size: 13px;
	font-weight: 750;
}
.woocommerce-cart .wc-block-components-product-metadata__description { display: none !important; }
.woocommerce-cart .wc-block-cart-item__prices,
.woocommerce-cart .wc-block-components-product-price,
.woocommerce-cart .wc-block-cart-item__total {
	color: var(--hf-ink);
	font-size: 21px;
	font-weight: 900;
}
.woocommerce-cart .wc-block-cart-item__quantity { margin-top: 14px; }
.woocommerce-cart .wc-block-cart-item__remove-link {
	color: var(--hf-muted);
	font-size: 12px;
	font-weight: 800;
	text-decoration: none;
}
.woocommerce-cart .wc-block-components-sidebar .wc-block-cart__totals-title,
.woocommerce-cart .wc-block-components-sidebar .wp-block-woocommerce-cart-order-summary-heading-block {
	display: block;
	margin: 0 0 20px;
	color: var(--hf-ink);
	font-size: 0;
	font-weight: 900;
	text-align: left;
}
.woocommerce-cart .wc-block-components-sidebar .wc-block-cart__totals-title::before,
.woocommerce-cart .wc-block-components-sidebar .wp-block-woocommerce-cart-order-summary-heading-block::before {
	content: "Zusammenfassung";
	font-size: 28px;
}
.hf-lang-en.woocommerce-cart .wc-block-components-sidebar .wc-block-cart__totals-title::before,
.hf-lang-en.woocommerce-cart .wc-block-components-sidebar .wp-block-woocommerce-cart-order-summary-heading-block::before {
	content: "Summary";
}
.hf-lang-fr.woocommerce-cart .wc-block-components-sidebar .wc-block-cart__totals-title::before,
.hf-lang-fr.woocommerce-cart .wc-block-components-sidebar .wp-block-woocommerce-cart-order-summary-heading-block::before {
	content: "Résumé";
}
.hf-lang-tr.woocommerce-cart .wc-block-components-sidebar .wc-block-cart__totals-title::before,
.hf-lang-tr.woocommerce-cart .wc-block-components-sidebar .wp-block-woocommerce-cart-order-summary-heading-block::before {
	content: "Özet";
}
.hf-lang-it.woocommerce-cart .wc-block-components-sidebar .wc-block-cart__totals-title,
.hf-lang-it.woocommerce-cart .wc-block-components-sidebar .wp-block-woocommerce-cart-order-summary-heading-block {
	font-size: 28px;
}
.hf-lang-it.woocommerce-cart .wc-block-components-sidebar .wc-block-cart__totals-title::before,
.hf-lang-it.woocommerce-cart .wc-block-components-sidebar .wp-block-woocommerce-cart-order-summary-heading-block::before {
	content: none;
}
.hf-lang-es.woocommerce-cart .wc-block-components-sidebar .wc-block-cart__totals-title,
.hf-lang-es.woocommerce-cart .wc-block-components-sidebar .wp-block-woocommerce-cart-order-summary-heading-block {
	font-size: 28px;
}
.hf-lang-es.woocommerce-cart .wc-block-components-sidebar .wc-block-cart__totals-title::before,
.hf-lang-es.woocommerce-cart .wc-block-components-sidebar .wp-block-woocommerce-cart-order-summary-heading-block::before {
	content: none;
}
.woocommerce-cart .wc-block-components-sidebar .wc-block-components-totals-wrapper,
.woocommerce-cart .wc-block-components-sidebar .wp-block-woocommerce-cart-order-summary-block,
.woocommerce-cart .wc-block-components-sidebar .wc-block-components-totals-coupon,
.woocommerce-cart .wc-block-components-sidebar .wc-block-cart__submit-container {
	border-color: var(--hf-line);
}
.woocommerce-cart .wc-block-components-totals-item {
	padding: 8px 0;
	color: var(--hf-muted);
}
.woocommerce-cart .wc-block-components-totals-item__value,
.woocommerce-cart .wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
	color: var(--hf-ink);
	font-size: 18px;
	font-weight: 900;
}
.woocommerce-cart .wc-block-components-totals-footer-item {
	margin-top: 8px;
	padding-top: 16px;
	border-top: 1px solid var(--hf-line);
}
.woocommerce-cart .wc-block-components-totals-footer-item .wc-block-components-totals-item__label,
.woocommerce-cart .wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
	color: var(--hf-ink);
	font-size: 21px;
	font-weight: 900;
}
.woocommerce-cart .wc-block-components-totals-coupon-link,
.woocommerce-cart .wc-block-components-totals-coupon__button {
	color: var(--hf-ink);
	font-weight: 800;
}
.woocommerce-cart .wc-block-components-text-input input {
	border: 1px solid var(--hf-line);
	border-radius: 10px;
	background: #fff;
}
.woocommerce-cart .wc-block-cart__submit-button,
.woocommerce-cart .wc-block-components-button:not(.is-link) {
	min-height: 58px;
	border-radius: 10px;
	background: var(--hf-accent-grad);
	color: #fff;
	font-size: 18px;
	font-weight: 900;
	box-shadow: 0 12px 28px rgba(124,87,255,0.22);
}
.woocommerce-cart .wc-block-cart__submit-button:hover,
.woocommerce-cart .wc-block-components-button:not(.is-link):hover {
	color: #fff;
	filter: brightness(1.02);
}
.woocommerce-cart .wp-block-woocommerce-cart-express-payment-block,
.woocommerce-cart .wp-block-woocommerce-cart-accepted-payment-methods-block { display: none; }
.woocommerce-cart .wp-block-woocommerce-germanized-cart-summary-item,
.woocommerce-cart .wc-gzd-cart-info,
.woocommerce-cart .wc-gzd-small-business-info,
.woocommerce-cart .woocommerce-gzd-legal-checkbox-text {
	display: none !important;
}
/*
 * PRODUKTMOTIV STATT TEXTZEICHEN (28.09.2026)
 *
 * Bis hierher stand neben jedem Posten ein Verlaufskasten mit einem
 * Schriftzeichen darauf: Instagram "◎", TikTok "♪", YouTube "▶", Twitch "▣",
 * Facebook "f" in Arial, Spotify wieder "♪". Das Produktbild wurde dafür
 * ausgeblendet. Telegram, Pinterest, X, LinkedIn und SoundCloud hatten keine
 * eigene Regel und bekamen den violetten Haken "✓" — fünf Plattformen mit
 * demselben nichtssagenden Zeichen.
 *
 * Özgür am 28.09.: "Irgendwie sehen die Instagram-Icons nicht schön aus."
 *
 * Jetzt wird schlicht das Bild gezeigt, das WooCommerce ohnehin ausliefert —
 * dasselbe Motiv, das die Empfehlungskarten unter dem Warenkorb zeigen, und
 * auf dieselbe Art: kein Kasten, kein Schatten, `mix-blend-mode: multiply`,
 * damit der weiße Bildgrund auf der hellen Karte verschwindet.
 *
 * Der Mischmodus gehört auf die HÜLLE, nicht auf das <img>: ein `transform`
 * auf dem Elternelement macht einen eigenen Stapelkontext auf, und dann
 * mischt sich das Bild nur noch gegen seine durchsichtige Hülle statt gegen
 * die Karte. Am 27.09. schon einmal an den Empfehlungskarten gelernt.
 *
 * Die Kachel bleibt absolut gesetzt: die Zeile ist ein Raster aus zwei
 * Spalten (Posten, Summe), das Bild liegt daneben, und
 * `.wc-block-cart-item__wrap` hält mit seinem linken Innenabstand den Platz
 * frei. 42 → 56 px, Innenabstand 58 → 72 px.
 */
.woocommerce-cart .wc-block-cart-items__row .wc-block-cart-item__image,
.woocommerce-cart .wc-block-cart-items__row .wc-block-components-product-image {
	position: absolute !important;
	left: 20px;
	top: 20px;
	z-index: 2;
	display: block !important;
	width: 56px !important;
	height: 56px !important;
	min-width: 56px !important;
	border-radius: 0;
	background: none !important;
	box-shadow: none !important;
	overflow: visible;
	mix-blend-mode: multiply;
}
.woocommerce-cart .wc-block-cart-items__row .wc-block-cart-item__image img,
.woocommerce-cart .wc-block-cart-items__row .wc-block-components-product-image img {
	display: block !important;
	width: 100% !important;
	height: 100% !important;
	max-width: none;
	object-fit: contain;
	border-radius: 0;
	background: none;
}
/* Rueckfall ohne Produktbild: die Plattform-Glyphe, gesetzt vom kleinen
   Skript in functions.php. Sie ist ein Strichzeichen, kein Foto — deshalb
   ohne Mischmodus und etwas kleiner als das Motiv. */
.hf-posten-glyphe {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	mix-blend-mode: normal;
}
.hf-posten-glyphe svg {
	width: 40px;
	height: 40px;
	display: block;
}
/* Das Platzhalterbild wird ausgeblendet, nicht entfernt. Warenkorb und Kasse
   sind React-Bausteine; reisst ein Skript ein Element aus ihrem Baum, setzt
   React es beim naechsten Neuaufbau wieder ein — auf dem Handy baut die Kasse
   oft neu, und dann stand dort am 28.09.2026 wieder das graue Platzhalterbild
   neben der Glyphe. Ein CSS-Riegel ueberlebt jeden Neuaufbau. */
/* Die Selektoren tragen denselben Vorspann wie die Bildregel oben
   (`display: block !important`), sonst gewinnt die — am 28.09. so gemessen. */
.woocommerce-cart .wc-block-cart-items__row .wc-block-cart-item__image img[src*="woocommerce-placeholder"],
.woocommerce-cart .wc-block-cart-items__row .wc-block-components-product-image img[src*="woocommerce-placeholder"],
.woocommerce-checkout .wc-block-components-order-summary-item__image img[src*="woocommerce-placeholder"] {
	display: none !important;
}
.woocommerce-cart .wc-block-cart__submit-container,
.woocommerce-cart .wc-block-cart__submit {
	background: transparent !important;
}
.woocommerce-cart .wc-block-cart__submit-button,
.woocommerce-cart .wc-block-cart__submit-button.components-button,
.woocommerce-cart .wc-block-components-button.wc-block-cart__submit-button,
.woocommerce-cart a.wc-block-cart__submit-button,
.woocommerce-cart .wc-block-cart__submit-button:not(.is-link) {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 100% !important;
	min-height: 58px !important;
	border: 0 !important;
	border-radius: 10px !important;
	background-color: #7C5CFF !important;
	background-image: linear-gradient(135deg,#7C5CFF 0%,#8B5CF6 54%,#B84CFF 100%) !important;
	color: #fff !important;
	box-shadow: 0 12px 28px rgba(124,87,255,0.22) !important;
	text-decoration: none !important;
	opacity: 1 !important;
}
.woocommerce-cart .wc-block-cart__submit-button *,
.woocommerce-cart .wc-block-components-button__text {
	color: #fff !important;
	font-size: 18px !important;
	font-weight: 900 !important;
	opacity: 1 !important;
	visibility: visible !important;
}
@media (max-width: 860px) {
	.woocommerce-cart .wc-block-components-sidebar-layout { grid-template-columns: 1fr; }
	.woocommerce-cart .wc-block-components-sidebar { position: static; }
}
	@media (max-width: 520px) {
		.woocommerce-cart .hf-main > .hf-container,
		.woocommerce-cart .entry-content {
			padding-left: 16px;
			padding-right: 16px;
		}
		.woocommerce-cart .entry-title,
		.woocommerce-cart h1 {
			font-size: 34px;
			line-height: 1.08;
			letter-spacing: 0;
		}
		.woocommerce-cart .wc-block-cart-items__row {
			grid-template-columns: 56px minmax(0, 1fr) !important;
			gap: 14px;
			padding: 18px 16px 18px;
			align-items: start;
		}
		.woocommerce-cart .wc-block-cart-items__row td {
			display: block;
		}
		.woocommerce-cart .wc-block-cart-items__row .wc-block-cart-item__image,
		.woocommerce-cart .wc-block-cart-items__row .wc-block-components-product-image {
			position: relative !important;
			left: auto;
			top: auto;
			grid-column: 1;
			grid-row: 1 / span 2;
			margin-top: 2px;
		}
		.woocommerce-cart .wc-block-cart-item__product {
			grid-column: 2 !important;
			grid-row: 1 !important;
			min-width: 0;
		}
		.woocommerce-cart .wc-block-cart-item__wrap {
			padding-left: 0;
		}
		.woocommerce-cart .wc-block-components-product-name,
		.woocommerce-cart .wc-block-cart-item__product .wc-block-components-product-name {
			display: block;
			font-size: 18px;
			line-height: 1.22;
		}
		.woocommerce-cart .wc-block-cart-item__prices,
		.woocommerce-cart .wc-block-components-product-price {
			font-size: 18px;
			line-height: 1.2;
		}
		.woocommerce-cart .wc-block-cart-item__total {
			display: none !important;
		}
		.woocommerce-cart .wc-block-components-sale-badge {
			display: inline-flex;
			margin-left: 8px;
			vertical-align: middle;
			font-size: 11px;
			white-space: nowrap;
		}
		.woocommerce-cart .wc-block-components-product-metadata,
		.woocommerce-cart .wc-block-components-product-details {
			margin-top: 10px;
			gap: 6px;
			font-size: 12px;
		}
		.woocommerce-cart .wc-block-cart-item__quantity {
			margin-top: 12px;
		}
		.woocommerce-cart .wc-block-components-sidebar {
			padding: 22px 18px;
			border-radius: 18px;
		}
	}

/* Kasse: dieselbe Kachel wie im Warenkorb, siehe den Kommentar dort. */
.woocommerce-checkout .wc-block-components-order-summary-item__image {
	position: relative;
	display: block !important;
	width: 56px !important;
	height: 56px !important;
	min-width: 56px !important;
	border-radius: 0;
	background: none !important;
	box-shadow: none !important;
	overflow: visible;
	mix-blend-mode: multiply;
}
.woocommerce-checkout .wc-block-components-order-summary-item__image img {
	display: block !important;
	width: 100% !important;
	height: 100% !important;
	max-width: none;
	object-fit: contain;
	border-radius: 0;
	background: none;
}
.woocommerce-checkout .wc-block-components-order-summary-item__quantity {
	top: -7px !important;
	right: -7px !important;
	z-index: 3;
	background: var(--hf-ink) !important;
	color: #fff !important;
	border: 2px solid #fff !important;
	box-shadow: 0 4px 10px rgba(20,18,28,0.18);
}
.woocommerce-checkout .wc-block-components-order-summary-item__quantity span {
	color: #fff !important;
	font-weight: 800;
}

@media (max-width: 520px) {
	.woocommerce-checkout .hf-main > .hf-container,
	.woocommerce-checkout .entry-content {
		padding-left: 16px;
		padding-right: 16px;
	}
	.woocommerce-checkout .wp-block-woocommerce-checkout,
	.woocommerce-checkout .wc-block-checkout {
		max-width: 100%;
	}
	.woocommerce-checkout .wc-block-components-text-input input,
	.woocommerce-checkout .wc-block-components-address-form input,
	.woocommerce-checkout .wc-block-components-combobox .wc-block-components-combobox-control input,
	.woocommerce-checkout .wc-block-components-country-input input,
	.woocommerce-checkout .wc-block-components-select select {
		border-radius: 10px;
		min-height: 52px;
	}
	.woocommerce-checkout .wc-block-components-sidebar,
	.woocommerce-checkout .wc-block-checkout__sidebar {
		border-radius: 18px;
	}
}

/* Socialvantix footer/newsletter privacy link override
   Keep this at the very end of wp-content/themes/hypeflow/style.css. */
.hf-footer .hf-mailpoet-wrap .mailpoet_form_paragraph,
.hf-footer .hf-mailpoet-wrap .mailpoet_form_paragraph p,
.hf-footer .hf-mailpoet-wrap .mailpoet_form_paragraph span,
.hf-footer .hf-mailpoet-wrap .mailpoet_form_paragraph a,
.hf-footer .hf-mailpoet-wrap p.mailpoet_form_paragraph,
.hf-footer .hf-mailpoet-wrap p.mailpoet_form_paragraph a {
	color: var(--hf-muted) !important;
	font-family: var(--hf-font) !important;
	font-size: 12.5px !important;
	font-weight: 400 !important;
	line-height: 1.7 !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
}

.hf-footer .hf-mailpoet-wrap .mailpoet_form_paragraph a,
.hf-footer .hf-mailpoet-wrap p.mailpoet_form_paragraph a,
.hf-footer .hf-mailpoet-wrap a,
.hf-footer .hf-mailpoet-wrap p:not(.mailpoet_paragraph):not(.mailpoet_form_paragraph) a {
	display: inline !important;
	color: inherit !important;
	font: inherit !important;
	margin: 0 !important;
	padding: 0 !important;
	text-decoration: none !important;
	border: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
}

.hf-footer .hf-mailpoet-wrap .mailpoet_form_paragraph a:hover,
.hf-footer .hf-mailpoet-wrap p.mailpoet_form_paragraph a:hover,
.hf-footer .hf-mailpoet-wrap a:hover,
.hf-footer .hf-mailpoet-wrap p:not(.mailpoet_paragraph):not(.mailpoet_form_paragraph) a:hover {
	color: var(--hf-ink) !important;
}

.hf-form-consent {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	width: 100%;
	margin: 10px 0 12px;
	color: var(--hf-muted);
	font-family: var(--hf-font);
	font-size: 11.5px;
	font-weight: 400 !important;
	line-height: 1.55;
	cursor: pointer;
}

.hf-form-consent input[type="checkbox"] {
	width: 15px;
	height: 15px;
	margin: 3px 0 0;
	flex: 0 0 auto;
	accent-color: var(--hf-accent);
}

.hf-form-consent span {
	display: block;
	min-width: 0;
	color: var(--hf-muted) !important;
	font-family: var(--hf-font) !important;
	font-size: 11.5px !important;
	font-weight: 400 !important;
	line-height: 1.55 !important;
}

.hf-form-consent a {
	display: inline !important;
	color: inherit !important;
	font: inherit !important;
	font-weight: 400 !important;
	margin: 0 !important;
	padding: 0 !important;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.hf-form-consent a:hover {
	color: var(--hf-ink) !important;
}

.hf-footer .hf-form-consent {
	margin-top: 2px;
	margin-bottom: 10px;
	font-size: 11.5px;
	line-height: 1.55;
}

.hf-contact-form .hf-form-consent,
.hf-contact-form .hf-form-consent span,
.hf-contact-form .hf-form-consent a,
.hf-mailpoet-wrap .hf-form-consent,
.hf-mailpoet-wrap .hf-form-consent span,
.hf-mailpoet-wrap .hf-form-consent a {
	font-size: 11.5px !important;
	font-weight: 400 !important;
	line-height: 1.55 !important;
}

.hf-scroll-top {
	position: fixed;
	right: 22px;
	bottom: 22px;
	z-index: 80;
	width: 46px;
	height: 46px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 0;
	border-radius: 999px;
	background: var(--hf-accent);
	color: #fff;
	box-shadow: 0 12px 28px rgba(124,92,255,0.28);
	cursor: pointer;
	opacity: 0;
	pointer-events: none;
	transform: translateY(10px);
	transition: opacity 0.18s ease, transform 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}

.hf-scroll-top.is-visible {
	opacity: 0.92;
	pointer-events: auto;
	transform: translateY(0);
}

.hf-scroll-top:hover {
	background: #6b4bff;
	box-shadow: 0 14px 32px rgba(124,92,255,0.34);
	opacity: 1;
}

.hf-scroll-top:focus-visible {
	outline: 3px solid rgba(124,92,255,0.28);
	outline-offset: 3px;
}

.hf-scroll-top svg {
	width: 21px;
	height: 21px;
	display: block;
}

@media (max-width: 640px) {
	.hf-scroll-top {
		right: 16px;
		bottom: 16px;
		width: 42px;
		height: 42px;
	}
}

/* Mobile product-page width guard */
@media (max-width: 520px) {
	html,
	body,
	.hf-main,
	.hf-container,
	.hf-cfg-wrap {
		max-width: 100vw;
		overflow-x: clip;
	}

	.hf-cfg-wrap {
		padding-left: 20px;
		padding-right: 20px;
	}

	.hf-product-hero,
	.hf-cfg-card-premium,
	.hf-cfg-wrap > .hf-trust,
	.hf-toc,
	.hf-cfg-section {
		width: 100%;
		max-width: calc(100vw - 40px);
		box-sizing: border-box;
	}

	.hf-product-hero,
	.hf-cfg-card-premium {
		margin-left: 0;
		margin-right: 0;
	}

	.hf-product-hero h1,
	.hf-product-hero .hf-cfg-intro,
	.hf-cfg-card-premium h3,
	.hf-cfg-card-premium p,
	.hf-cfg-section h2,
	.hf-cfg-section h3,
	.hf-cfg-section p {
		max-width: 100%;
		white-space: normal;
		overflow-wrap: break-word;
		word-break: normal;
	}

	.hf-product-hero-tags,
	.hf-buyfacts {
		max-width: 100%;
		overflow: hidden;
	}

	.hf-product-hero-tags span,
	.hf-buyfacts span {
		max-width: 100%;
		white-space: normal;
	}
}

/* Mobile product-page final clipping fix */
@media (max-width: 520px) {
	.hf-product-hero h1 {
		font-size: 26px !important;
		line-height: 1.12 !important;
	}

	.hf-product-hero {
		padding-left: 20px !important;
		padding-right: 20px !important;
	}

	.hf-product-hero::after,
	.hf-cfg-card-premium::after {
		display: none;
	}

	.hf-buyfacts,
	.hf-product-hero-tags {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 7px;
	}

	.hf-buyfacts span,
	.hf-product-hero-tags span {
		display: flex;
		align-items: center;
		justify-content: center;
		min-width: 0;
		text-align: center;
	}
}

/* ── Fix Multi-Currency-Preisdarstellung in SMM-Custom-Karten (2026-07-13) ──
   wc_price() erzeugt verschachtelte <span> (Symbol + Betrag). Die Karten-Layouts
   setzen Spans auf display:block bzw. inline-flex/40px (für Titel/Icons), was diese
   Preis-Spans zerreißt (Symbol und Zahl stapeln sich untereinander). Hier wieder
   inline erzwingen, Styling (Farbe/Gewicht/Größe) der Karte bleibt erhalten. */
.hf-pc-price .woocommerce-Price-amount,
.hf-pc-price .woocommerce-Price-currencySymbol {
	display: inline;
	width: auto;
	min-width: 0;
	height: auto;
	margin: 0;
	padding: 0;
	font-size: inherit;
	font-weight: inherit;
	color: inherit;
	/* 27.09.2026: background und border-radius gehoeren in diese Gruppe. Im
	   Warenkorb trug eine Element-Regel auf Karten-Kinder den Plattform-
	   Verlauf und traf damit auch die Preis-Spans aus wc_price(); „ab 4,49
	   EUR" stand auf Pink. Diese Regel ist mit dem Umbau des Blocks weg, das
	   Zuruecksetzen bleibt fuer die uebrigen Fundstellen. */
	background: none;
	border-radius: 0;
	box-shadow: none;
}
.hf-pc-price .woocommerce-Price-amount bdi {
	display: inline;
}

/* Local homepage hero test: one shared campaign image, localized HTML copy. */
.home .hf-hero {
	padding: 54px 0 46px;
	background: #fff;
}
.home .hf-hero .hf-container {
	max-width: 1280px;
}
.home .hf-hero-grid {
	grid-template-columns: minmax(0, .9fr) minmax(480px, 1.1fr);
	gap: 34px;
}
.home .hf-hero-photo {
	position: relative;
	min-width: 0;
	height: 520px;
	margin: 0;
	overflow: hidden;
	border: 1px solid rgba(20,18,28,.08);
	border-radius: 24px;
	background: #fff;
	box-shadow: 0 22px 54px rgba(20,18,28,.13);
	isolation: isolate;
}
.home .hf-hero-photo::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	box-shadow: inset 0 0 0 1px rgba(255,255,255,.48);
	pointer-events: none;
}
.home .hf-hero-photo img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: 100% 50%;
	transform: scale(1.38);
	transform-origin: 100% 50%;
}

@media (max-width: 980px) {
	.home .hf-hero-grid {
		grid-template-columns: minmax(0, 1fr) minmax(390px, .9fr);
		gap: 26px;
	}
	.home .hf-hero-text h1 { font-size: 40px; }
	.home .hf-hero-photo { height: 470px; }
}

@media (max-width: 860px) {
	.home .hf-hero-grid { grid-template-columns: 1fr; }
	.home .hf-hero-photo {
		width: 100%;
		max-width: none;
		height: 430px;
		margin-top: 28px;
	}
}

@media (max-width: 640px) {
	.home .hf-hero { padding: 34px 0 32px; }
	.home .hf-hero-text h1 {
		font-size: 32px;
		line-height: 1.14;
	}
	.home .hf-hero-text p { font-size: 16px; }
	.home .hf-hero-photo {
		height: auto;
		min-height: 0;
		aspect-ratio: 4 / 3;
		margin-top: 22px;
		border-radius: 18px;
	}
	.home .hf-hero-photo img {
		object-position: 100% 50%;
		transform: scale(1.45);
	}
}

/* Consistent breathing room on phones across content, cart, and checkout. */
@media (max-width: 640px) {
	.hf-container,
	.hf-cfg-wrap,
	.woocommerce-cart .hf-main > .hf-container,
	.woocommerce-checkout .hf-main > .hf-container {
		padding-left: 20px !important;
		padding-right: 20px !important;
		box-sizing: border-box;
	}
}

/* Keep every mobile header control inside narrow phone viewports. */
@media (max-width: 782px) {
	.hf-header-inner {
		min-width: 0;
	}
	.hf-header .hf-logo {
		min-width: 0;
		margin-right: 0;
		flex: 0 1 auto;
	}
	.hf-header .hf-logo .hf-word {
		white-space: nowrap;
	}
}
@media (max-width: 360px) {
	.hf-header-inner.hf-container {
		padding-left: 10px !important;
		padding-right: 10px !important;
	}
	.hf-header .hf-logo {
		gap: 7px;
		font-size: 18px;
	}
	.hf-header .hf-logo .hf-mark {
		width: 27px;
		height: 27px;
	}
	.hf-header-cta {
		gap: 6px;
		margin-left: 8px;
	}
	.hf-header .hf-lang-btn {
		padding-left: 8px;
		padding-right: 8px;
		font-size: 12px;
	}
}

/* Engagement-Rate-Rechner (Tool-Widget) */
.hf-tool-page { --lo:#e0574f; --mid:#f0a92c; --good:#2fb27a; --exc:var(--hf-accent); }
.hf-tool-wrap { max-width: 620px; margin: 0 auto; }
.hf-tool-eyebrow { margin-bottom: 14px; }
.hf-tool-eyebrow svg { width: 14px; height: 14px; vertical-align: -2px; }
.hf-tool-h1 { font-size: 32px; font-weight: 800; color: var(--hf-ink); line-height: 1.15; margin-bottom: 10px; }
.hf-tool-lead { font-size: 15px; color: var(--hf-muted); line-height: 1.55; margin-bottom: 24px; }

.hf-tool-card { background: var(--hf-bg-2); border: 1px solid var(--hf-line); border-radius: 18px; padding: 22px; box-shadow: 0 12px 30px rgba(20,18,28,.05); }

.hf-tool-plats { display: flex; gap: 9px; margin-bottom: 22px; }
.hf-tool-plat { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 13px 6px; border: 1px solid var(--hf-line); border-radius: 14px; background: var(--hf-bg-2); cursor: pointer; font-family: inherit; font-size: 13px; font-weight: 700; color: var(--hf-muted); transition: .15s; }
.hf-tool-plat-ico { width: 22px; height: 22px; display: inline-flex; }
.hf-tool-plat-ico svg { width: 100%; height: 100%; }
.hf-tool-plat.on { border-color: var(--hf-accent); color: var(--hf-ink); background: var(--hf-accent-soft); }

.hf-tool-field { margin-bottom: 16px; }
.hf-tool-field label { display: block; font-size: 13px; font-weight: 700; color: var(--hf-ink); margin-bottom: 7px; }
.hf-tool-in { position: relative; }
.hf-tool-in-ico { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: var(--hf-muted); width: 18px; height: 18px; display: inline-flex; }
.hf-tool-in-ico svg { width: 100%; height: 100%; }
.hf-tool-field input { width: 100%; padding: 14px 14px 14px 44px; background: var(--hf-bg-3); border: 1px solid var(--hf-line); border-radius: 12px; font-family: inherit; font-size: 16px; font-weight: 600; color: var(--hf-ink); }
.hf-tool-field input:focus { outline: none; border-color: var(--hf-accent); background: var(--hf-bg-2); }
.hf-tool-row2 { display: flex; gap: 12px; }
.hf-tool-row2 .hf-tool-field { flex: 1; }

.hf-tool-result { margin-top: 22px; border-top: 1px solid var(--hf-line); padding-top: 22px; text-align: center; }
.hf-tool-rlabel { font-size: 13px; font-weight: 700; color: var(--hf-muted); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 4px; }
.hf-tool-rval { font-size: 52px; font-weight: 800; line-height: 1; color: var(--hf-ink); }
.hf-tool-rval span { font-size: 26px; }
.hf-tool-verdict { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 800; padding: 7px 15px; border-radius: 22px; margin-top: 14px; }

.hf-tool-bar { margin-top: 22px; height: 11px; border-radius: 20px; background: linear-gradient(90deg, var(--lo) 0%, var(--mid) 33%, var(--good) 66%, var(--exc) 100%); position: relative; }
.hf-tool-pin { position: absolute; top: 50%; width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 3px solid var(--hf-ink); transform: translate(-50%, -50%); transition: left .4s cubic-bezier(.2,.7,.3,1); box-shadow: 0 2px 8px rgba(0,0,0,.2); }
.hf-tool-scale { display: flex; justify-content: space-between; gap: 6px; margin-top: 9px; font-size: 11px; font-weight: 700; color: var(--hf-muted); line-height: 1.3; }
.hf-tool-scale span { flex: 1; min-width: 0; text-align: center; overflow-wrap: break-word; hyphens: auto; }
.hf-tool-scale span:first-child { text-align: left; }
.hf-tool-scale span:last-child { text-align: right; }
@media (max-width: 480px) {
	.hf-tool-scale { font-size: 9.5px; }
}

.hf-tool-cta { margin-top: 22px; display: flex; align-items: center; gap: 14px; background: var(--hf-accent-soft); border-radius: 14px; padding: 16px 18px; }
.hf-tool-cta-txt { flex: 1; }
.hf-tool-cta-txt b { display: block; font-size: 15px; color: var(--hf-ink); font-weight: 800; }
.hf-tool-cta-txt span { font-size: 13px; color: var(--hf-muted); }
.hf-tool-cta-btn { background: var(--hf-accent-grad); color: #fff; font-weight: 800; font-size: 14px; padding: 12px 18px; border-radius: 11px; text-decoration: none; white-space: nowrap; display: inline-flex; align-items: center; gap: 7px; }
.hf-tool-cta-btn svg { width: 16px; height: 16px; }

.hf-tool-hint { font-size: 12px; color: var(--hf-muted); margin-top: 16px; text-align: center; line-height: 1.5; }
.hf-tool-kicker { display: inline-block; font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--hf-accent); margin-bottom: 10px; }
.hf-tool-kurz { display: flex; gap: 12px; align-items: flex-start; background: var(--hf-accent-soft); border-radius: 18px; padding: 14px 16px; color: var(--hf-ink); font-size: 15px; line-height: 1.6; margin: 6px 0 10px; }
.hf-tool-kurz b { flex: none; background: #fff; color: var(--hf-accent); border-radius: 999px; padding: 3px 10px; font-size: 11.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; margin-top: 2px; }
.hf-tool-frei { font-size: 13px; font-weight: 650; color: var(--hf-muted); margin: 0 0 14px; }
.hf-tool-teilen { margin: 16px 0 6px; display: grid; gap: 12px; justify-items: start; }
.hf-tool-teilen-btn, .hf-tool-kopieren { border: 0; cursor: pointer; border-radius: 999px; background: var(--hf-accent-soft); color: var(--hf-accent); font-weight: 750; font-size: 13.5px; padding: 9px 16px; font-family: inherit; }
.hf-tool-teilen-btn:hover, .hf-tool-kopieren:hover { background: var(--hf-accent); color: #fff; }
.hf-tool-linkzeile { width: 100%; }
.hf-tool-linkzeile label { display: block; font-size: 12px; font-weight: 700; color: var(--hf-muted); margin-bottom: 6px; }
.hf-tool-linkzeile > div { display: flex; gap: 8px; }
.hf-tool-linkzeile input { flex: 1; min-width: 0; font: 12.5px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--hf-soft); background: var(--hf-bg-3); border: 1px solid var(--hf-line); border-radius: 10px; padding: 9px 11px; }
.hf-tool-abschnitt { margin-top: 30px; }
.hf-tool-abschnitt h2 { font-size: 21px; margin: 0 0 10px; color: var(--hf-ink); }
.hf-tool-abschnitt p { font-size: 15.5px; line-height: 1.7; color: var(--hf-soft); margin: 0; }
.hf-tool-shop { margin: 34px 0 0; font-size: 14px; color: var(--hf-muted); line-height: 1.6; }
.hf-tool-shop a { color: var(--hf-accent); font-weight: 700; text-decoration: none; white-space: nowrap; }
/* Rechner, Neuaufbau 08.10.2026: Kopf mit Motiv, Eingabe | Ergebnis, Rechenschritte. */
.hf-calc2 { max-width: 1080px; }
.hf-calc2-kopf { display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: 40px; align-items: center; margin: 0 auto 28px; max-width: 980px; }
.hf-calc2-kopf .hf-tool-h1 { font-size: clamp(30px, 4vw, 44px); letter-spacing: -.02em; margin: 0 0 16px; text-wrap: balance; }
.hf-calc2-motiv svg { width: 100%; height: auto; display: block; }
.hf-calc2-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 0; max-width: 980px; margin: 0 auto; background: var(--hf-bg-2); border: 1px solid var(--hf-line); border-radius: 24px; box-shadow: 0 18px 46px rgba(20,18,28,.07); overflow: hidden; }
.hf-calc2-eingabe { padding: 26px; }
.hf-calc2-ergebnis { padding: 26px; background: linear-gradient(160deg, #f7f4ff, #efe9ff); display: flex; flex-direction: column; gap: 14px; }
.hf-calc2 .hf-tool-plat { flex-direction: row; justify-content: center; gap: 8px; padding: 11px 8px; font-weight: 700; }
.hf-calc2 .hf-tool-plat-ico { width: 18px; height: 18px; }
.hf-calc2 .hf-tool-in-unit { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: var(--hf-muted); font-weight: 700; }
.hf-calc2-fehler { color: #a82132; font-size: 13px; margin: 0 0 8px; }
.hf-calc2-privat { font-size: 12.5px; color: var(--hf-muted); margin: 6px 0 0; }
.hf-calc2-ergebnis .hf-tool-rlabel { text-align: left; margin: 0; }
.hf-calc2-wert { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; font-size: clamp(40px, 6vw, 58px); font-weight: 800; line-height: 1; color: var(--hf-ink); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.hf-calc2-wert small { font-size: 15px; font-weight: 700; color: var(--hf-muted); letter-spacing: 0; }
.hf-calc2-kennzahl { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 12px 14px; background: #fff; border-radius: 14px; font-size: 13.5px; color: var(--hf-soft); }
.hf-calc2-kennzahl b { font-size: 20px; color: var(--hf-ink); font-variant-numeric: tabular-nums; }
.hf-calc2-mixlabel { font-size: 12px; font-weight: 700; color: var(--hf-muted); text-transform: uppercase; letter-spacing: .06em; margin-bottom: -6px; }
.hf-calc2-balken { display: flex; height: 12px; border-radius: 999px; overflow: hidden; background: #e6ddff; }
.hf-calc2-balken span { display: block; height: 100%; transition: width .25s ease; }
.hf-calc2-balken .a { background: #7c5cff; }
.hf-calc2-balken .b { background: #ff8aa3; }
.hf-calc2-legende { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; color: var(--hf-soft); }
.hf-calc2-legende i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.hf-calc2-legende i.a { background: #7c5cff; }
.hf-calc2-legende i.b { background: #ff8aa3; }
.hf-calc2-legende b { color: var(--hf-ink); font-variant-numeric: tabular-nums; }
.hf-calc2-ring { display: flex; align-items: center; gap: 14px; }
.hf-calc2-ring svg { width: 64px; height: 64px; flex: none; }
.hf-calc2-ring #hf-calc-ring { transition: stroke-dasharray .25s ease; }
.hf-calc2-ring b { display: block; font-size: 22px; color: var(--hf-ink); font-variant-numeric: tabular-nums; }
.hf-calc2-ring span { font-size: 13px; color: var(--hf-soft); }
.hf-calc2-weg { background: #fff; border-radius: 14px; padding: 10px 14px; }
.hf-calc2-weg span { display: block; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--hf-muted); margin-bottom: 4px; }
.hf-calc2-weg code { font: 600 13.5px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--hf-ink); overflow-wrap: anywhere; }
.hf-calc2-ergebnis .hf-tool-teilen { margin: 2px 0 0; }
.hf-calc2-ergebnis .hf-tool-linkzeile input { background: #fff; }
.hf-calc2-text { max-width: 720px; margin: 10px auto 0; }
.hf-calc2-text .hf-tool-abschnitt h2 { text-align: left; }
.hf-tool-schritte { list-style: none; counter-reset: s; margin: 16px 0 0; padding: 0; display: grid; gap: 8px; }
.hf-tool-schritte li { counter-increment: s; display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 14px; background: var(--hf-accent-soft); }
.hf-tool-schritte li::before { content: counter(s); flex: none; width: 24px; height: 24px; border-radius: 999px; background: #fff; color: var(--hf-accent); font-weight: 800; font-size: 13px; display: inline-flex; align-items: center; justify-content: center; }
.hf-tool-schritte span { flex: 1; font-size: 14.5px; color: var(--hf-soft); }
.hf-tool-schritte b { font: 700 14px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--hf-ink); white-space: nowrap; }
.hf-tool-formel { display: inline-block; margin: 0 0 12px !important; padding: 8px 14px; border-radius: 999px; background: var(--hf-accent-soft); font: 700 14px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--hf-ink) !important; }
@media (max-width: 860px) {
	.hf-calc2-kopf { grid-template-columns: 1fr; gap: 0; }
	.hf-calc2-motiv { display: none; }
	.hf-calc2-grid { grid-template-columns: 1fr; }
	.hf-calc2-eingabe, .hf-calc2-ergebnis { padding: 20px; }
	.hf-tool-schritte li { flex-wrap: wrap; }
	.hf-tool-schritte b { white-space: normal; }
}

.hf-tool-seo { max-width: 820px; margin-left: auto; margin-right: auto; }
.hf-tool-seo-p { font-size: 15px; color: var(--hf-muted); line-height: 1.6; max-width: 760px; margin: 0 auto; }

@media (max-width: 640px) {
	.hf-tool-row2 { flex-direction: column; }
	.hf-tool-h1 { font-size: 26px; }
	.hf-tool-rval { font-size: 42px; }
	.hf-tool-cta { flex-direction: column; align-items: stretch; }
	.hf-tool-cta-btn { justify-content: center; }
}

/* Gewinnspiel-Auslosung (Tool-Widget) */
.hf-give-textarea { width: 100%; padding: 14px; background: var(--hf-bg-3); border: 1px solid var(--hf-line); border-radius: 12px; font-family: inherit; font-size: 15px; font-weight: 500; color: var(--hf-ink); resize: vertical; line-height: 1.5; }
.hf-give-textarea:focus { outline: none; border-color: var(--hf-accent); background: var(--hf-bg-2); }
.hf-give-count { font-size: 12px; font-weight: 700; color: var(--hf-muted); margin-top: 7px; min-height: 16px; }

.hf-give-opts { align-items: flex-end; }
.hf-give-dedupe-field { flex: 1.4; display: flex; align-items: center; }
.hf-give-check { display: flex; align-items: flex-start; gap: 9px; cursor: pointer; font-size: 13px; font-weight: 600; color: var(--hf-ink); line-height: 1.4; }
.hf-give-check input { margin-top: 3px; width: 16px; height: 16px; accent-color: var(--hf-accent); flex-shrink: 0; }

.hf-give-btn { width: 100%; justify-content: center; padding: 14px 18px; font-size: 15px; border: none; cursor: pointer; margin-top: 4px; }
.hf-give-btn:disabled { opacity: .6; cursor: default; }
.hf-give-error { color: var(--lo); font-size: 13px; font-weight: 700; margin-top: 10px; min-height: 1px; }

.hf-give-result { margin-top: 22px; border-top: 1px solid var(--hf-line); padding-top: 22px; text-align: center; }
.hf-give-rlabel { font-size: 13px; font-weight: 700; color: var(--hf-muted); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 14px; }
.hf-give-reel { font-size: 22px; font-weight: 800; color: var(--hf-ink); min-height: 40px; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px; }
.hf-give-reel.spinning { color: var(--hf-muted); }
.hf-give-pill { display: inline-flex; align-items: center; background: var(--hf-accent-soft); color: var(--hf-accent); border-radius: 22px; padding: 9px 18px; font-size: 16px; font-weight: 800; }

@media (max-width: 640px) {
	.hf-give-opts { flex-direction: column; align-items: stretch; }
}

/* Schriftarten-Generator (Tool-Widget) */
.hf-font-textarea { width: 100%; padding: 14px; background: var(--hf-bg-3); border: 1px solid var(--hf-line); border-radius: 12px; font-family: inherit; font-size: 16px; font-weight: 500; color: var(--hf-ink); resize: vertical; line-height: 1.5; }
.hf-font-textarea:focus { outline: none; border-color: var(--hf-accent); background: var(--hf-bg-2); }

.hf-font-results { margin-top: 18px; display: flex; flex-direction: column; gap: 8px; }
.hf-font-empty { font-size: 13px; color: var(--hf-muted); text-align: center; padding: 18px 0; margin: 0; }

.hf-font-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--hf-line); border-radius: 12px; background: var(--hf-bg-3); }
.hf-font-row-label { flex: 0 0 130px; font-size: 11px; font-weight: 700; color: var(--hf-muted); text-transform: uppercase; letter-spacing: .04em; }
.hf-font-row-text { flex: 1; font-size: 16px; color: var(--hf-ink); overflow-wrap: anywhere; }
.hf-font-copy-btn { flex-shrink: 0; background: var(--hf-accent-soft); color: var(--hf-accent); border: none; border-radius: 9px; padding: 8px 14px; font-family: inherit; font-size: 12px; font-weight: 800; cursor: pointer; white-space: nowrap; }
.hf-font-copy-btn:hover { background: var(--hf-accent-grad); color: #fff; }

@media (max-width: 640px) {
	.hf-font-row { flex-wrap: wrap; }
	.hf-font-row-label { flex: 1 0 100%; }
	.hf-font-row-text { flex: 1 1 auto; }
}

/* Reichweiten-Rechner: Ergebnis ist ein Zahlen-Range statt Prozentzahl, braucht kleinere Schrift */
.hf-reach-rval { font-size: 34px; }
@media (max-width: 640px) {
	.hf-reach-rval { font-size: 26px; }
}

/* Tools-Übersichtsseite: Karten sind Links statt reiner Divs */
.hf-tools-hub-grid { margin-top: 36px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
a.hf-tools-hub-card { display: block; text-decoration: none; color: inherit; }
.hf-tools-hub-open { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; font-size: 13px; font-weight: 800; color: var(--hf-accent); }
.hf-tools-hub-open svg { width: 14px; height: 14px; }

/* "Weitere kostenlose Tools"-Querverlinkung am Ende jeder Tool-Seite */
.hf-tool-more { max-width: 980px; margin-left: auto; margin-right: auto; }
.hf-tool-more-all { text-align: center; margin-top: 28px; }
.hf-tool-more-all a { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 800; color: var(--hf-accent); text-decoration: none; }
.hf-tool-more-all a svg { width: 15px; height: 15px; }
.hf-tool-more-all a:hover { text-decoration: underline; }

/* =========================================================================
   Mobiles Menü – Redesign im App-/Overlay-Stil (bayigram-inspiriert,
   in Socialvantix-Optik: hell, Violett-Akzent, große Icon-Kacheln).
   Überschreibt die schlanken .hf-mnav-* Basisregeln weiter oben per Kaskade.
   JS (Drill-down + Live-Suche) bleibt unverändert.
   ========================================================================= */

/* Schmales Slide-in mit Rand (Backdrop bleibt links sichtbar) statt Vollbild-Overlay */
.hf-mobile-nav {
	width: min(86vw, 340px);
	max-width: 340px;
	left: auto;
	right: 0;
	border-left: 1px solid var(--hf-line);
	background: var(--hf-bg-2);
	box-shadow: -10px 0 34px rgba(0,0,0,0.18);
	transform: translateX(100%);
	opacity: 1;
	visibility: visible;
	transition: transform .28s ease;
	padding-bottom: 40px;
}
.hf-mobile-nav.is-open { transform: translateX(0); }
body.admin-bar .hf-mobile-nav { top: 32px; }
@media screen and (max-width: 782px) {
	body.admin-bar .hf-mobile-nav { top: 46px; }
}

/* Jede Ebene als zentrierte, luftige Spalte */
.hf-mobile-nav .hf-mnav-level { max-width: 640px; margin: 0 auto; padding: 0 6px 8px; }
.hf-mobile-nav .hf-mnav-level.is-active { animation: hfMnavRise .3s cubic-bezier(.2,.7,.3,1); }
@keyframes hfMnavRise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* Kopfzeile: Schließen-Pill links, Logo mittig */
.hf-mnav-head {
	position: sticky; top: 0; z-index: 3;
	display: flex; align-items: center; gap: 12px;
	padding: 16px 12px 14px;
	background: var(--hf-bg);
	border-bottom: 1px solid var(--hf-line);
}
.hf-mnav-head-main { justify-content: center; }
.hf-mnav-close {
	width: 40px; height: 40px; margin: 0 0 0 auto;
	display: inline-flex; align-items: center; justify-content: center;
	color: var(--hf-muted); background: var(--hf-bg-2);
	border: 1px solid var(--hf-line); border-radius: 50%;
	cursor: pointer; transition: color .15s, background .15s, border-color .15s;
	flex-shrink: 0;
}
/* Nur im Hauptmenü sitzt Schließen absolut links (damit das Logo mittig steht).
   In den Unterebenen bleibt Schließen rechts, damit es nicht den Zurück-Button überlagert. */
.hf-mnav-head-main .hf-mnav-close {
	position: absolute; left: 12px; top: 50%; transform: translateY(-50%); margin: 0;
}
.hf-mnav-close:hover { color: var(--hf-accent); background: var(--hf-accent-soft); border-color: transparent; }
.hf-mnav-close svg { width: 20px; height: 20px; }
.hf-mnav-logo { display: inline-flex; align-items: center; gap: 10px; font-size: 20px; font-weight: 800; color: var(--hf-ink); text-decoration: none; }
.hf-mnav-logo .hf-mark { width: 30px; height: 30px; border-radius: 9px; background: var(--hf-accent-grad); display: inline-flex; align-items: center; justify-content: center; }
.hf-mnav-logo .hf-mark svg { width: 18px; height: 18px; }
.hf-mnav-logo .hf-word span { background: var(--hf-accent-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

/* Suche */
.hf-mnav-search { margin: 20px 12px 8px; }
.hf-mnav-search input {
	padding: 15px 16px 15px 46px;
	background: var(--hf-bg-2);
	border: 1px solid var(--hf-line);
	border-radius: 15px; font-size: 15px; font-weight: 500;
	transition: border-color .15s, box-shadow .15s;
}
.hf-mnav-search input:focus { border-color: var(--hf-accent); box-shadow: 0 0 0 3px var(--hf-accent-soft); }
.hf-mnav-search-ico { left: 17px; width: 19px; height: 19px; }

/* Sektions-Überschriften */
.hf-mnav-label {
	padding: 20px 16px 8px; margin: 0;
	font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
	color: var(--hf-muted);
}
.hf-mnav-pop { border-bottom: 1px solid var(--hf-line); padding-bottom: 10px; margin-bottom: 4px; }
.hf-mnav-plats { padding-top: 4px; }
.hf-mnav-tools { border-top: 1px solid var(--hf-line); margin-top: 8px; }

/* Zeilen: große Icon-Kachel + Text + Chevron */
.hf-mobile-nav .hf-mnav-row {
	gap: 15px; padding: 11px 14px; margin: 2px 4px;
	border-radius: 16px; font-size: 16px; font-weight: 600;
	transition: background .15s, transform .12s;
}
.hf-mobile-nav .hf-mnav-row:hover,
.hf-mobile-nav .hf-mnav-row:focus-visible { background: var(--hf-bg-2); }
.hf-mobile-nav .hf-mnav-row:active { transform: scale(.99); }

.hf-mobile-nav .hf-mnav-ico {
	width: 48px; height: 48px; border-radius: 14px;
	display: inline-flex; align-items: center; justify-content: center;
	background: color-mix(in srgb, currentColor 22%, transparent);
}
.hf-mobile-nav .hf-mnav-ico svg { width: 26px; height: 26px; }
/* Plattform-Kacheln in den Haupt-Reihen etwas kräftiger als Utility-Icons */
.hf-mnav-plats .hf-mnav-ico:not(.hf-mnav-ico-util) { background: color-mix(in srgb, currentColor 30%, transparent); }
/* Icons ohne Plattform-Markenfarbe (Kontakt, Login, Tools) → Violett-Akzent */
.hf-mnav-ico-util { color: var(--hf-accent); }
/* Produkt-Icons in den Unterebenen → neutral getönt */
.hf-mnav-sico { color: var(--hf-soft); }
.hf-mobile-nav .hf-mnav-sico { background: color-mix(in srgb, var(--hf-ink) 7%, transparent); }
.hf-mobile-nav .hf-mnav-sico svg { width: 22px; height: 22px; }

.hf-mnav-chev { width: 19px; height: 19px; color: #c3c1cf; }
.hf-mnav-flag { display: inline-block; margin-left: 6px; font-size: 13px; opacity: .8; vertical-align: 2px; }

/* "Alle … Services"-Zeile hervorheben */
.hf-mobile-nav .hf-mnav-more { margin-top: 6px; }
.hf-mnav-more .hf-mnav-row-txt { color: var(--hf-accent); font-weight: 800; }

/* Zurück-Button in den Unterebenen */
.hf-mnav-back { gap: 12px; font-size: 17px; font-weight: 800; }
.hf-mnav-back > svg:first-child { width: 24px; height: 24px; color: var(--hf-muted); }
.hf-mnav-back .hf-mnav-ico { width: 34px; height: 34px; border-radius: 10px; }
.hf-mnav-back .hf-mnav-ico svg { width: 20px; height: 20px; }

/* Sanfter gestaffelter Auftritt der ersten Zeilen */
.hf-mobile-nav.is-open .hf-mnav-level.is-active .hf-mnav-row { animation: hfRowIn .34s both; }
.hf-mobile-nav.is-open .hf-mnav-level.is-active .hf-mnav-row:nth-child(1) { animation-delay: .02s; }
.hf-mobile-nav.is-open .hf-mnav-level.is-active .hf-mnav-row:nth-child(2) { animation-delay: .05s; }
.hf-mobile-nav.is-open .hf-mnav-level.is-active .hf-mnav-row:nth-child(3) { animation-delay: .08s; }
.hf-mobile-nav.is-open .hf-mnav-level.is-active .hf-mnav-row:nth-child(4) { animation-delay: .11s; }
.hf-mobile-nav.is-open .hf-mnav-level.is-active .hf-mnav-row:nth-child(5) { animation-delay: .14s; }
@keyframes hfRowIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* Campaign heroes: text-free artwork with localized HTML copy. */
.home .hf-home-campaign {
	padding: 38px 0 36px;
	background: var(--hf-bg);
}
.home .hf-home-campaign .hf-container { max-width: 1280px; }
.home .hf-home-campaign-frame {
	position: relative;
	display: block;
	min-height: 0;
	aspect-ratio: 1672 / 941;
	padding: clamp(36px, 4vw, 58px);
	overflow: hidden;
	border: 1px solid rgba(20,18,28,.08);
	border-radius: 24px;
	background: #fff;
	box-shadow: 0 22px 54px rgba(20,18,28,.11);
	isolation: isolate;
}
.home .hf-home-campaign-media,
.hf-services-campaign-media {
	position: absolute;
	inset: 0;
	z-index: 0;
	background: #fff;
}
.home .hf-home-campaign-media img,
.hf-services-campaign-media img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: contain;
	object-position: center;
}
.home .hf-home-campaign .hf-hero-text {
	position: relative;
	z-index: 1;
	width: min(47%, 560px);
}
.home .hf-home-campaign .hf-chip { background: rgba(255,255,255,.88); }
.home .hf-home-campaign .hf-btn-ghost { background: rgba(255,255,255,.82); }

.hf-archive-hero.hf-services-campaign {
	position: relative;
	display: block;
	min-height: 0;
	aspect-ratio: 1672 / 941;
	padding: clamp(36px, 4vw, 54px);
	border-color: rgba(20,18,28,.08);
	background: #fff;
	isolation: isolate;
}
.hf-services-campaign::before { z-index: 2; }
.hf-services-campaign::after { display: none; }
.hf-services-campaign-copy {
	position: relative;
	z-index: 1;
	width: min(34%, 360px);
}
.hf-services-campaign .hf-archive-tags span { background: rgba(255,255,255,.88); }

@media (max-width: 1080px) and (min-width: 861px) {
	.home .hf-home-campaign-frame { padding: 34px; }
	.home .hf-home-campaign .hf-hero-text h1 { font-size: 40px; }
	.home .hf-home-campaign .hf-hero-text p { font-size: 15px; margin-bottom: 20px; }
	.home .hf-home-campaign .hf-chip { padding: 7px 10px; }
	.hf-archive-hero.hf-services-campaign { padding: 36px; }
}

@media (max-width: 860px) {
	.home .hf-home-campaign-frame,
	.hf-archive-hero.hf-services-campaign {
		display: flex;
		flex-direction: column;
		aspect-ratio: auto;
		padding: 30px;
	}
	.home .hf-home-campaign .hf-hero-text,
	.hf-services-campaign-copy {
		order: 1;
		width: 100%;
		max-width: none;
	}
	.home .hf-home-campaign-media,
	.hf-services-campaign-media {
		position: relative;
		inset: auto;
		order: 2;
		width: 100%;
		aspect-ratio: 1672 / 941;
		margin-top: 28px;
		overflow: hidden;
		border: 1px solid rgba(20,18,28,.07);
		border-radius: 18px;
	}
}

@media (max-width: 640px) {
	.home .hf-home-campaign { padding: 24px 0 28px; }
	.home .hf-home-campaign-frame,
	.hf-archive-hero.hf-services-campaign {
		padding: 22px;
		border-radius: 20px;
	}
	.home .hf-home-campaign .hf-hero-text h1 {
		font-size: 32px;
		line-height: 1.14;
	}
	.home .hf-home-campaign .hf-hero-text p { font-size: 15px; }
	.home .hf-home-campaign-media,
	.hf-services-campaign-media {
		margin-top: 22px;
		border-radius: 14px;
	}
}

/* Editorial content imagery: shared placements with uncropped mobile layouts. */
.hf-story-image {
	max-width: 880px;
}
.hf-story-image img {
	aspect-ratio: 1672 / 941;
	object-fit: cover;
	object-position: center;
}

.hf-product-hero {
	grid-template-columns: minmax(0, 1.1fr) minmax(360px, .9fr);
}
.hf-product-hero-card.hf-product-hero-media {
	min-height: 0;
	aspect-ratio: 1672 / 941;
	padding: 0;
	background: #fff;
}
.hf-product-hero-card.hf-product-hero-media img {
	min-height: 0;
	object-fit: contain;
	object-position: center;
}

.hf-guide-image-photo {
	aspect-ratio: 1672 / 941;
}
.hf-guide-image-photo img {
	height: 100%;
	max-height: none;
	object-fit: cover;
	object-position: center;
}

/* Textspalte hat Vorrang (07.10.2026): „Zahlungsmöglichkeiten“ war bei
   1100–1200 px breiter als die Spalte und lief unter das Bild. */
.hf-trust-page .hf-contact-hero {
	grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
}
.hf-trust-page .hf-contact-hero > div:first-child { min-width: 0; }
.hf-trust-page .hf-contact-hero h1 {
	font-size: clamp(30px, 3.5vw, 50px);
	overflow-wrap: anywhere;
	hyphens: auto;
	-webkit-hyphens: auto;
	text-wrap: balance;
}
.hf-trust-page .hf-trust-visual img {
	aspect-ratio: 1672 / 941;
	object-fit: contain;
	object-position: center;
}

@media (max-width: 880px) {
	.hf-product-hero {
		grid-template-columns: 1fr;
	}
	.hf-product-hero-card.hf-product-hero-media {
		display: block;
		width: 100%;
		margin-top: 4px;
	}
}

@media (max-width: 860px) {
	.hf-trust-page .hf-contact-hero {
		grid-template-columns: 1fr;
	}
	.hf-trust-page .hf-trust-visual {
		display: block;
		width: 100%;
		margin-top: 6px;
	}
}

@media (max-width: 620px) {
	.hf-story-image {
		margin: 24px auto;
	}
	.hf-story-image img,
	.hf-product-hero-card.hf-product-hero-media,
	.hf-guide-image-photo,
	.hf-trust-page .hf-trust-visual {
		border-radius: 14px;
	}
}

/* Layered visuals: campaign photography plus the original explanatory graphics. */
.hf-story-secondary-graphic {
	max-width: 360px;
	margin: 42px auto 0;
}
.hf-story-secondary-graphic img,
.hf-product-content-graphic img,
.hf-trust-dashboard img {
	display: block;
	width: 100%;
	height: auto;
	border: 1px solid var(--hf-line);
	border-radius: 20px;
	background: #fff;
	box-shadow: 0 16px 38px rgba(20,18,28,.09);
}

.hf-product-knowledge-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
	gap: 34px;
	align-items: start;
}
.hf-product-knowledge-layout .hf-prose {
	max-width: none;
	margin: 0;
}
.hf-product-content-graphic {
	margin: 0;
}
.hf-product-content-graphic img {
	aspect-ratio: 1 / 1;
	object-fit: contain;
}

/* Wissensregister: Klappstapel links, klebende Faktenkarte rechts (24.08.2026).

   Optik streng nach der bestehenden FAQ-Sektion (.hf-faq details, Zeile 314):
   10px Radius, kein Schatten. Auf derselben Seite duerfen nicht zwei
   verschieden aussehende Akkordeons stehen. Einziger erlaubter Unterschied:
   das Plus traegt die Plattformfarbe statt des violetten Standardakzents. */
.hf-wissen-register { margin: 18px 0 0; }
.hf-wissen-block {
	/* Sprungziel ist das <details> selbst (es traegt die id), nicht das h3
	   darin — ohne eigenen Abstand landet der Block unter dem Kopfbereich. */
	scroll-margin-top: 104px;
	border: 1px solid var(--hf-line);
	border-radius: 10px;
	background: var(--hf-bg-2);
	margin-bottom: 10px;
	padding: 4px 18px;
}
.hf-wissen-block > summary {
	display: flex;
	align-items: baseline;
	gap: 14px;
	padding: 15px 0;
	cursor: pointer;
	list-style: none;
}
.hf-wissen-block > summary::-webkit-details-marker { display: none; }
.hf-wissen-block > summary::after {
	content: "+";
	margin-left: auto;
	font-size: 22px;
	line-height: 1;
	color: var(--hf-prod-solid, var(--hf-accent));
}
.hf-wissen-block[open] > summary::after { content: "–"; }
.hf-wissen-body {
	padding: 0 0 16px;
	max-width: 68ch;
	color: var(--hf-soft);
	line-height: 1.75;
}
.hf-wissen-body > *:last-child { margin-bottom: 0; }

/* Mikrorhythmus: adressiert nur Elementtypen und wirkt deshalb auch auf
   voellig unbekanntem Editor-HTML — also genau dann, wenn der Splitter
   zurueckfaellt und der Text als Wand stehen bleibt. */
#wissen .hf-prose h3 {
	position: relative;
	margin: 30px 0 8px;
	padding-top: 20px;
	border-top: 1px solid var(--hf-line);
}
#wissen .hf-prose h3::before {
	content: "";
	display: block;
	width: 26px;
	height: 3px;
	margin: 0 0 12px;
	border-radius: 2px;
	background: var(--hf-prod-solid, var(--hf-accent));
}
/* Im Summary traegt das ::after-Plus die Markierung, Linie und Strich stoeren
   dort. Die ID im Selektor schlaegt das globale .hf-prose h3 sicher. */
#wissen .hf-wissen-block > summary h3 {
	margin: 0;
	padding-top: 0;
	border-top: 0;
	font-size: 17px;
	line-height: 1.4;
	font-weight: 700;
	color: var(--hf-ink);
}
#wissen .hf-wissen-block > summary h3::before { display: none; }
/* Sonst verschwindet das Sprungziel unter dem klebenden Kopfbereich. */
.hf-prose h3 { scroll-margin-top: 104px; }

/* Rechte Spalte: die Huelle streckt sich, der Inhalt klebt. Direkt am
   Rasterkind zu kleben hat unter dem bestehenden align-items:start fast
   keinen Laufweg. Die 96px sind derselbe Wert wie bei .hf-guide-nav. */
.hf-wissen-aside { align-self: stretch; min-width: 0; }
.hf-wissen-aside-inner {
	position: sticky;
	top: 96px;
	display: grid;
	align-content: start;
	gap: 16px;
}

.hf-wissen-facts {
	border: 1px solid var(--hf-line);
	border-radius: 16px;
	background: var(--hf-bg-2);
	box-shadow: 0 12px 28px rgba(20,18,28,.06);
	padding: 18px 20px;
}
.hf-wissen-facts-kicker {
	margin: 0 0 12px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--hf-muted);
}
.hf-wissen-facts dl { margin: 0 0 16px; }
.hf-wissen-facts dl > div {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 12px;
	padding: 9px 0;
	border-bottom: 1px solid var(--hf-line);
}
.hf-wissen-facts dl > div:last-child { border-bottom: 0; }
.hf-wissen-facts dt { margin: 0; font-size: 13px; color: var(--hf-muted); }
.hf-wissen-facts dd {
	margin: 0;
	font-size: 14px;
	font-weight: 600;
	text-align: right;
	color: var(--hf-ink);
}
.hf-wissen-facts dd a { color: var(--hf-prod-solid, var(--hf-accent)); text-decoration: none; }
.hf-wissen-cta {
	width: 100%;
	justify-content: center;
	background: var(--hf-prod-solid, var(--hf-accent));
}
/* Noetig, weil .hf-btn:hover weiter oben ein festes #6b4bff setzt —
   gleiche Spezifitaet, spaeter in der Datei gewinnt. */
.hf-wissen-cta:hover {
	background: var(--hf-prod-solid, var(--hf-accent));
	filter: brightness(1.08);
}

.hf-guide-editorial {
	max-width: 920px;
	margin: 26px auto 30px;
	overflow: hidden;
	border: 1px solid rgba(255,255,255,.82);
	border-radius: 20px;
	background: #fff;
	box-shadow: 0 14px 34px rgba(20,18,28,.08);
}
.hf-guide-editorial img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1672 / 941;
	object-fit: cover;
	object-position: center;
}

.hf-guide-topic-visual {
	width: min(100%, 640px);
	margin: 38px auto 48px;
}
.hf-guide-topic-visual img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border: 1px solid var(--hf-line);
	border-radius: 20px;
	background: #fff;
	box-shadow: 0 16px 38px rgba(20,18,28,.09);
}

.hf-trust-dashboard {
	max-width: 360px;
	margin: -8px auto 56px;
}
.hf-trust-dashboard img {
	aspect-ratio: 692 / 757;
	object-fit: contain;
}

@media (max-width: 860px) {
	.hf-product-knowledge-layout {
		grid-template-columns: 1fr;
		gap: 24px;
	}
	.hf-product-content-graphic,
	.hf-trust-dashboard,
	.hf-story-secondary-graphic {
		width: min(100%, 340px);
		margin-left: auto;
		margin-right: auto;
	}
	/* Wissensregister mobil (24.08.2026): display:contents loest Huelle und
	   Sticky-Kasten auf, damit Karte und Grafik einzeln sortierbare
	   Rasterelemente werden. Reihenfolge dann: h2, Faktenkarte, Lead,
	   Klappstapel, Grafik. Vorher hing die Grafik hinter 4.976px Prosa ganz
	   am Ende und brach dort gar nichts mehr auf.
	   Der Knopf faellt weg: .hf-mobile-buybar steht unten ohnehin fest und
	   zeigt ebenfalls auf #pakete. */
	.hf-wissen-aside,
	.hf-wissen-aside-inner { display: contents; }
	.hf-wissen-foto { order: -1; }
	.hf-product-content-graphic { order: 1; }
	.hf-wissen-body { max-width: none; }
	.hf-wissen-cta { display: none; }
}

@media (max-width: 620px) {
	table.hf-compare {
		width: 100%;
		max-width: 100%;
		table-layout: fixed;
	}
	table.hf-compare th,
	table.hf-compare td {
		box-sizing: border-box;
		width: 33.333%;
		padding: 12px 6px;
		font-size: 12px;
		line-height: 1.5;
		overflow-wrap: anywhere;
		hyphens: auto;
		vertical-align: top;
	}
	.hf-guide-topic-visual {
		width: 100%;
		margin: 28px auto 38px;
	}
	.hf-guide-topic-visual img {
		border-radius: 14px;
	}
	.hf-guide-editorial {
		margin: 22px 0 24px;
		border-radius: 14px;
	}
	.hf-story-secondary-graphic {
		margin-top: 30px;
	}
	.hf-trust-dashboard {
		margin-top: 0;
		margin-bottom: 42px;
	}
	.hf-story-secondary-graphic img,
	.hf-product-content-graphic img,
	.hf-trust-dashboard img {
		border-radius: 14px;
	}
}

/* ================= KUNDENBEWERTUNGEN ==================
   Eigener Praefix hf-rating-: .hf-stars ist in dieser Datei bereits
   doppelt belegt (Z. 249 und im Light-Theme-Block) und wuerde einen
   festen Farb-Override vererben. */

.hf-rating-stars {
	display: inline-flex;
	gap: 2px;
	vertical-align: middle;
	line-height: 0;
}
.hf-rating-stars svg {
	width: var(--hf-star-size, 17px);
	height: var(--hf-star-size, 17px);
	display: block;
}
.hf-rating-stars .is-full { fill: var(--hf-accent-2); }
.hf-rating-stars .is-empty { fill: rgba(20, 18, 28, 0.16); }

/* Zeile unter dem Produkttitel */
.hf-rating-line {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 4px 0 10px;
	font-size: 14px;
	color: var(--hf-muted);
	text-decoration: none;
}
.hf-rating-line strong { color: var(--hf-ink); }
.hf-rating-line:hover { color: var(--hf-accent); }

/* Abschnitt unter der Beschreibung */
.hf-rating-summary {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	margin-bottom: 22px;
	color: var(--hf-muted);
}
.hf-rating-summary strong {
	color: var(--hf-ink);
	font-size: 20px;
}
.hf-rating-trust {
	margin-left: auto;
	font-size: 14px;
	color: var(--hf-accent);
}

.hf-rating-list {
	display: grid;
	gap: 0;
	background: var(--hf-bg-2);
	border-radius: var(--hf-radius);
	box-shadow: var(--hf-shadow);
	padding: 4px 22px;
}
.hf-rating-item { padding: 18px 0; border-top: 1px solid var(--hf-line); }
.hf-rating-item:first-child { border-top: 0; }
.hf-rating-item p { margin: 0; color: var(--hf-soft); }
.hf-rating-item-head {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	margin-bottom: 7px;
}
.hf-rating-author { font-weight: 700; color: var(--hf-ink); }
.hf-rating-item-head time { color: var(--hf-muted); font-size: 13px; }
.hf-rating-badge {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	background: rgba(23, 122, 80, 0.10);
	color: var(--hf-success);
	font-size: 12px;
	font-weight: 700;
	padding: 3px 9px;
	border-radius: 999px;
}

/* Formularbereich, per REST nachgeladen */
.hf-rating-form-slot { margin-top: 18px; }
.hf-rating-form {
	background: var(--hf-accent-soft);
	border-radius: var(--hf-radius);
	padding: 18px;
}
.hf-rating-form label {
	display: block;
	font-weight: 700;
	font-size: 14px;
	margin-bottom: 8px;
	color: var(--hf-ink);
}
.hf-rating-pick { display: inline-flex; gap: 2px; margin-bottom: 10px; }
.hf-rating-pick button {
	background: none;
	border: 0;
	padding: 2px;
	cursor: pointer;
	line-height: 0;
}
.hf-rating-pick svg { width: 26px; height: 26px; fill: rgba(20, 18, 28, 0.16); }
.hf-rating-pick button.is-on svg { fill: var(--hf-accent-2); }
.hf-rating-pick button:focus-visible { outline: 2px solid var(--hf-accent); border-radius: 4px; }
.hf-rating-form textarea {
	width: 100%;
	border: 1px solid var(--hf-line);
	border-radius: 9px;
	padding: 11px;
	font: inherit;
	font-size: 15px;
	background: var(--hf-bg-2);
	color: var(--hf-ink);
	resize: vertical;
}
.hf-rating-form button[type="submit"] {
	margin-top: 12px;
	background: var(--hf-accent-grad);
	color: #fff;
	border: 0;
	border-radius: 999px;
	padding: 11px 26px;
	font-weight: 700;
	font-size: 15px;
	cursor: pointer;
}
.hf-rating-hint {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	background: var(--hf-bg);
	border: 1px dashed var(--hf-line);
	border-radius: var(--hf-radius);
	padding: 15px;
	color: var(--hf-muted);
	font-size: 15px;
}
.hf-rating-msg { margin-top: 10px; font-size: 15px; }
.hf-rating-msg.is-ok { color: var(--hf-success); }
.hf-rating-msg.is-err { color: #b4530a; }

@media (max-width: 600px) {
	.hf-rating-trust { margin-left: 0; width: 100%; }
	.hf-rating-list { padding: 4px 16px; }
}

/* Ohne Bewertungen traegt der Abschnitt kein Section-Padding; sichtbar wird
   er erst, wenn das Formular per REST nachgeladen wurde. */
.hf-rating-section.is-empty {
	max-width: 1140px;
	margin: 0 auto;
	padding: 0 24px;
}
.hf-rating-section.is-empty .hf-rating-form-slot:not([hidden]) {
	margin: 0 0 48px;
}

/* ── Service-Abschnitte und Herkunftshinweis (23.08.2026) ──────────────────
   Zwei Beanstandungen des Betreibers: den Sammelseiten war auf der
   Kategorieseite nicht anzusehen, dass mehrere Laender dahinterstecken, und
   die Trennung zwischen Follower, Likes und Views war zu unauffaellig.
   Beides mit den vorhandenen Tokens geloest, keine neuen Farben.          */

/* Abschnittsueberschrift: Akzentbalken links, Trennlinie rechts daneben.
   Vorher war es eine schlichte Zeile, die zwischen den Kacheln unterging. */

/* Herkunftshinweis in der Kachel */

/* ProvenExpert-Block, vier Fassungen — siehe hf_provenexpert_block(). Nur DE. */

/* gemeinsam */
.hf-pe-band-media{flex:0 0 auto;align-self:flex-start;background:var(--hf-bg-2);border:1px solid var(--hf-line);border-radius:16px;padding:18px;box-shadow:var(--hf-shadow);line-height:0}
.hf-pe-siegel{display:block;line-height:0;opacity:.94;transition:opacity .18s ease}
.hf-pe-siegel:hover{opacity:1}
.hf-pe-siegel img{width:150px;height:auto;display:block}
.hf-pe-band-copy{flex:1 1 auto;min-width:0}
.hf-pe-kicker{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--hf-accent);margin-bottom:8px}
.hf-pe-band-copy h2{font-size:28px;line-height:1.2;margin:0 0 10px;color:var(--hf-ink)}
.hf-pe-band-copy p{margin:0 0 16px;font-size:15px;line-height:1.6;color:var(--hf-muted);max-width:62ch}
.hf-pe-chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 18px}
.hf-pe-chips span{padding:7px 14px;border:1px solid var(--hf-line);background:var(--hf-bg-2);color:var(--hf-soft);border-radius:30px;font-size:13px;font-weight:500}
.hf-pe-mehr{font-size:14px;font-weight:600;color:var(--hf-accent);text-decoration:none}
.hf-pe-mehr:hover{text-decoration:underline}
.hf-pe-mehr::after{content:" \2192"}

/* band — Startseite, eigener Abschnitt ueber die volle Breite */
.hf-pe-band{background:linear-gradient(180deg,var(--hf-bg-3) 0%,var(--hf-bg) 100%);border-top:1px solid var(--hf-line);border-bottom:1px solid var(--hf-line);padding:52px 24px}
/* Mittig (29.09.2026): die Huelle war 1140 px breit, der Text auf 62ch begrenzt,
   rechts blieb ein Drittel leer. Jetzt so breit wie Siegel plus Text, hoechstens 880 px. */
.hf-pe-band-inner{width:fit-content;max-width:min(880px,100%);margin:0 auto;display:flex;align-items:center;gap:40px}

/* leiste — Kategorieseite, Streifen in der Plattformfarbe */
.hf-pe-leiste{--hf-pe-akzent:var(--hf-accent);display:flex;align-items:center;gap:32px;max-width:1140px;margin:38px auto 0;padding:26px 30px 26px 26px;background:var(--hf-bg-2);border:1px solid var(--hf-line);border-left:4px solid var(--hf-pe-akzent);border-radius:var(--hf-radius);box-shadow:var(--hf-shadow)}
.hf-pe-leiste .hf-pe-kicker{color:var(--hf-pe-akzent)}
/* Der Archivbereich zentriert Ueberschriften — in der Leiste soll die Spalte
   linksbuendig bleiben, sonst steht der Kicker links und der Titel mittig. */
.hf-pe-leiste .hf-pe-band-copy,.hf-pe-leiste .hf-pe-band-copy h2,.hf-pe-leiste .hf-pe-band-copy p,
.hf-pe-produkt .hf-pe-band-copy,.hf-pe-produkt .hf-pe-band-copy h2,.hf-pe-produkt .hf-pe-band-copy p{text-align:left}
.hf-pe-leiste .hf-pe-band-copy h2{font-size:23px}
.hf-pe-leiste .hf-pe-siegel img{width:124px}
.hf-pe-leiste .hf-pe-band-media{padding:14px;border-radius:14px}

/* schluss — Shop-Uebersicht, zentrierter Schlusspunkt */
.hf-pe-schluss{border-top:1px solid var(--hf-line);margin-top:48px;padding:46px 24px 8px}
.hf-pe-schluss-inner{max-width:660px;margin:0 auto;display:flex;flex-direction:column;align-items:center;text-align:center;gap:22px}
.hf-pe-schluss .hf-pe-band-copy p{margin-left:auto;margin-right:auto}
.hf-pe-schluss .hf-pe-chips{justify-content:center}
.hf-pe-schluss .hf-pe-band-copy h2{font-size:25px}

/* kompakt — Produktseite, unter dem Bestellknopf, ueber die volle Breite */
.hf-pe-produkt{display:flex;align-items:center;gap:20px;margin:22px 0 4px;padding:20px 22px;background:linear-gradient(180deg,var(--hf-accent-soft) 0%,transparent 100%),var(--hf-bg-2);border:1px solid var(--hf-line);border-radius:var(--hf-radius)}
.hf-pe-produkt .hf-pe-band-copy h2{font-size:20px;margin-bottom:6px;line-height:1.25}
.hf-pe-produkt .hf-pe-band-copy p{font-size:13.5px;line-height:1.55;margin-bottom:12px;max-width:none}
.hf-pe-produkt .hf-pe-siegel img{width:126px}
.hf-pe-produkt .hf-pe-band-media{padding:14px;border-radius:14px}
.hf-pe-produkt .hf-pe-chips{margin-bottom:14px}

@media (max-width:860px){
.hf-pe-band{padding:40px 20px}
.hf-pe-band-inner,.hf-pe-leiste,.hf-pe-produkt{flex-direction:column;align-items:center;text-align:center;gap:22px}
.hf-pe-band-media{align-self:center}
.hf-pe-band-copy p{margin-left:auto;margin-right:auto}
.hf-pe-chips{justify-content:center}
.hf-pe-band-copy h2{font-size:23px}
.hf-pe-leiste{margin:28px 16px 0;padding:24px 20px;border-left:1px solid var(--hf-line);border-top:4px solid var(--hf-pe-akzent)}
.hf-pe-produkt{flex-direction:column;align-items:center;text-align:center;gap:20px;padding:24px 20px}
.hf-pe-produkt .hf-pe-band-copy p{margin-left:auto;margin-right:auto}
.hf-pe-produkt .hf-pe-chips{justify-content:center}
}
/* band: zwischen 700 und 860 px weiter nebeneinander. Darunter untereinander
   und zentriert wie bisher (audit-improvements.css zentriert unter 640 px mit
   !important, das kompakte Handy-Band bleibt so). */
@media (min-width:700px) and (max-width:860px){
.hf-pe-band .hf-pe-band-inner{flex-direction:row;text-align:left;gap:32px}
.hf-pe-band .hf-pe-band-copy p{margin-left:0}
.hf-pe-band .hf-pe-chips{justify-content:flex-start}
}

/* ---- Kaufbereich ueber der Falz (05.09.2026) ----

   Am 05.09.2026 zuerst nur auf /de/produkt/instagram-follower-kaufen/ erprobt,
   nach Abnahme durch den Betreiber auf alle Produktseiten ausgerollt.

   Gemessen wurde vorher auf genau dieser Seite:
     1440x900 — Kaufkarte ab 686 px, Knopf bei 1.376 px
      390x844 — Kaufkarte ab 849 px, Knopf bei 1.382 px
   Also rund anderthalb Bildschirme unter dem Seitenanfang. Bei 18 Sekunden
   mittlerer Verweildauer sieht ihn so gut wie niemand.

   Drei Hebel, kein Wort Text geaendert:
   1. Die Vorteilsliste sass zwischen dem letzten Feld und dem Knopf und schob
      ihn um 167 px nach unten. Sie steht jetzt darunter. Die Karte wird dafuer
      Flex; der Knopf bleibt in der Dokumentreihenfolge das letzte Bedienelement,
      die Liste ist reiner Text und damit nicht in der Tab-Reihenfolge.
   2. Das Foto im Kopfbereich kostete 203 px Hoehe und am Schreibtisch die halbe
      Textspalte. Es ist nicht geloescht, sondern in die Seitenspalte von
      #wissen gewandert, wo vorher die Faktenkarte "Auf einen Blick" stand.
   3. Ab 1000 px steht die Kaufkarte neben der Ueberschrift statt darunter.

   Die Kaufleiste am unteren Rand gab es bisher nur bis 520 px. Zwischen 521 und
   999 px — also auf jedem Tablet — hatte die Seite weder Leiste noch
   Seitenspalte. Hier reicht sie bis 999 px. Die vier Regeln im 520er-Block
   bleiben stehen, weil sie weiterhin fuer alle anderen Produkte gelten. */

body.single-product .hf-cfg-card-premium {
	display: flex;
	flex-direction: column;
}
body.single-product .hf-cfg-card-premium > .hf-cfg-benefits {
	order: 1;
	margin: 20px 0 0;
}

body.single-product .hf-product-hero {
	grid-template-columns: 1fr;
}

@media (max-width: 999px) {
	body.single-product .hf-mobile-buybar { display: flex; }
	body.single-product:has(.hf-mobile-buybar) { padding-bottom: 78px; }
	body.single-product:has(.hf-mobile-buybar) .alynivo {
		bottom: calc(88px + env(safe-area-inset-bottom, 0px));
	}
	body.single-product:has(.hf-mobile-buybar) .hf-scroll-top {
		display: none;
	}
}

@media (min-width: 1000px) {
	body.single-product .hf-cfg-wrap {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 400px;
		column-gap: 30px;
		align-items: start;
	}
	body.single-product .hf-cfg-wrap > * {
		grid-column: 1 / -1;
		min-width: 0;
	}
	body.single-product .hf-cfg-wrap > .hf-breadcrumb { grid-row: 1; }
	body.single-product .hf-cfg-wrap > .hf-product-hero {
		grid-column: 1;
		grid-row: 2;
		margin-bottom: 0;
	}
	body.single-product .hf-cfg-wrap > #pakete {
		grid-column: 2;
		grid-row: 2;
		margin-bottom: 0;
	}
}

/* Luft ueber dem Kaufknopf. Vorher trennte die Vorteilsliste ihn vom letzten
   Feld; seit sie darunter steht, sass er ohne Abstand direkt am Auswahlfeld
   "Geschwindigkeit". 20 px ist derselbe Abstand, den die Liste vorher hielt. */
body.single-product .hf-cfg-card-premium > .hf-cfg-btn {
	margin-top: 20px;
}

/* Das Foto in der Seitenspalte von #wissen. Es traegt bewusst dieselbe Huelle
   wie die Faktenkarte, die hier vorher stand: gleicher Rahmen, gleicher Radius,
   gleicher Schatten — damit die Spalte ihren Rhythmus behaelt. */
.hf-wissen-foto {
	margin: 0;
	overflow: hidden;
	border: 1px solid var(--hf-line);
	border-radius: 16px;
	background: #fff;
	box-shadow: 0 12px 28px rgba(20,18,28,.06);
}
.hf-wissen-foto img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1672 / 941;
	object-fit: cover;
	object-position: center;
}

/* ---- Warenkorb am Handy: Inhalte klebten am Kartenrand (05.09.2026) ----

   Gemessen auf 390 px: die Artikelzeile lief von 20 bis 370, das Produktbild
   begann bei 21 und der Text endete bei 369 — also je 1 px Abstand zur eigenen
   Kartenkante. Die Summenspalte genauso.

   Ursache: das Theme setzt seit jeher padding: 18px 16px fuer die Zeile, aber
   WooCommerce liefert in cart.css

       @container (max-width: 699px) {
         .wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row
           { padding: 16px 0; }
       }

   Das sind drei Klassen und ein Element gegen die zwei Klassen der
   Theme-Regel — WooCommerce gewinnt. Am Schreibtisch faellt es nicht auf,
   weil die Container-Abfrage dort nicht zutrifft und das Theme mit 22 px
   durchkommt. Die Handy-Regel des Themes hat also nie gegriffen.

   Antwort auf derselben Ebene: dieselbe Container-Bedingung, eine Klasse mehr.
   Kein !important — die Kaskade entscheidet, nicht die Brechstange. Browser
   ohne Container-Abfragen ignorieren beide Regeln und behalten die 22 px. */

@container (max-width: 699px) {
	.woocommerce-cart .wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row {
		padding: 18px 16px;
	}
	.woocommerce-cart .wc-block-components-sidebar-layout .wc-block-components-sidebar {
		padding: 22px 18px;
	}
}

/* ---- Seitenrand ging zwischen 641 und 1180 px verloren (05.09.2026) ----

   Gemessen auf der Warenkorbseite bei 768 px: der Inhalt lief von 0 bis 753,
   klebte also an beiden Bildschirmkanten. Bei 600 px stimmte er (20 bis 580),
   bei 1440 px auch — dazwischen nicht.

   Ursache ist eine Klassenkollision, kein Warenkorb-Problem:

       .hf-container { padding: 0 24px; }
       .hf-section   { padding: 56px 0; }   <- Kurzform, spaeter in der Datei

   Beide Klassen sitzen auf demselben Element. Gleiche Spezifitaet, also
   gewinnt die spaetere — und ihre Kurzform setzt den seitlichen Rand auf 0.
   Unterhalb von 640 px faellt es nicht auf, weil dort eine !important-Regel
   20 px zurueckholt. Genau darueber beginnt die Luecke.

   Ich fasse die beiden bestehenden Regeln nicht an, sondern beantworte den
   Fall, der sie kollidieren laesst: nur Elemente mit beiden Klassen. Zwei
   Klassen schlagen eine, die vertikalen Werte bleiben unberuehrt. */

.hf-container.hf-section {
	padding-left: 24px;
	padding-right: 24px;
}

/* ---- Ab-Preis in der Kaufleiste (05.09.2026) ----

   Die Leiste trug bisher nur Produktname und Aufforderung. Unter 1000 px ist
   sie das Einzige, was ohne Scrollen sichtbar ist; der Kaufknopf steht am
   Handy bei 1.227 px. Der Preis gehoert also hierher.

   Der Titel behaelt sein Auslassungszeichen bei zu wenig Platz, der Preis
   bricht nie um: die Zahl ist die wichtigere der beiden Zeilen. */

.hf-mobile-buybar .hf-buybar-text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
	overflow: hidden;
	line-height: 1.25;
}
.hf-mobile-buybar .hf-buybar-titel {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.hf-mobile-buybar .hf-buybar-preis {
	font-style: normal;
	font-weight: 700;
	font-size: 14px;
	color: #fff;
	white-space: nowrap;
}

/* ---- Die Chat-Huelle fing Klicks ab (05.09.2026) ----

   Gemessen auf 390 px: #alynivo-root liegt bei z-index 999998 und reicht von
   12 bis 378 px, sichtbar sind davon nur die rechten 54 px (der Knopf). Die
   uebrigen 312 px sind unsichtbar, haben aber pointer-events: auto — jeder
   Klick in diesem Streifen am unteren Rand landet dort statt auf dem Element
   darunter. Nachgewiesen mit elementFromPoint: der Knopf "Auswahl ansehen"
   des Cookie-Banners war am Handy an keiner einzigen Stelle erreichbar.

   Ursache steht in alynivo/assets/css/widget.css:

       @media (max-width: 480px) { .alynivo { right: 12px; bottom: 12px;
                                              left: 12px; } }

   left und right zusammen ziehen das fixierte Element auf volle Breite. Fuer
   das Chatfenster ist das richtig, aber dieselbe Huelle traegt auch den
   Knopf. Der eigentliche Platz fuer diese Korrektur ist deshalb das Plugin
   selbst — dort wirkt sie fuer alle Alynivo-Websites. Hier steht sie, damit
   diese Seite sofort sauber ist und ein Plugin-Update sie nicht wieder
   ueberschreibt. Das Theme laedt nach dem Plugin, die Reihenfolge genuegt.

   Die Huelle gibt Klicks durch, ihre Kinder fangen sie wieder: der Knopf und
   das Chatfenster bleiben voll bedienbar. */

.alynivo {
	pointer-events: none;
}
.alynivo > * {
	pointer-events: auto;
}

/* Der sichtbare Knopf ueberlappt zusaetzlich das rechte Ende des Banners.
   Solange der Besucher ueber Cookies entscheidet, hat die Chat-Blase dort
   nichts zu suchen — sie kommt zurueck, sobald er gewaehlt hat. */
body:has(.cmplz-cookiebanner.cmplz-show) .alynivo {
	display: none;
}

/* ---- Kaufleiste und Chat weichen der Tastatur (05.09.2026) ----

   Gemeldet vom Betreiber mit Bildschirmfoto: Wer am Handy in das Feld
   "Link zum Beitrag" tippt, bekommt die Tastatur — und direkt darueber
   klebt die Kaufleiste, daneben die Chat-Blase. Beide sind position: fixed
   (Leiste bottom: 14px, Blase bottom: 88px); iOS heftet feste Elemente an
   die Oberkante der Tastatur, statt sie mit wegzuschieben.

   In dem Moment hat der Besucher sich laengst entschieden: er ist im
   Kauffeld und traegt seinen Link ein. Die Leiste, deren einzige Aufgabe es
   ist, ihn zu den Paketen zu bringen, hat dort nichts mehr zu suchen.

   Ausloeser ist bewusst nur ein Eingabefeld INNERHALB der Kaufkarte. Kein
   select: ein Auswahlfeld oeffnet auf iOS ein Rad, keine Tastatur, und der
   Fokus bliebe danach haengen — die Leiste waere dann laenger weg als
   noetig. Und kein beliebiges Feld auf der Seite, sonst verschwaende die
   Blase auch, waehrend jemand im Chat selbst tippt.

   Das body-padding von 78px haengt an der blossen Anwesenheit der Leiste,
   nicht an ihrer Sichtbarkeit — es bleibt stehen, die Seite springt nicht. */

@media (max-width: 999px) {
	body:has(.hf-cfg-card-premium input:focus, .hf-cfg-card-premium textarea:focus) .hf-mobile-buybar,
	body:has(.hf-cfg-card-premium input:focus, .hf-cfg-card-premium textarea:focus) .alynivo {
		display: none;
	}
}

/* ---- Kaufleiste erst weiter unten (05.09.2026) ----

   Die Klasse setzt der Beobachter in footer.php: sie liegt am body, solange
   die Kaufkarte im Bild ist oder hoechstens einen Bildschirm darueber hinaus
   ausgescrollt wurde. In dieser Zone bleibt die Leiste aus.

   Gemessen auf /de/produkt/youtube-likes-kaufen/ bei 390x844: die Karte endet
   bei 1.163 px, mit dem Puffer erscheint die Leiste ab rund 2.000 px, also
   nach knapp zweieinhalb Bildschirmen. Die Seite ist 16.626 px lang — die
   Leiste deckt damit immer noch rund 88 % ab, genau den Teil, in dem es sonst
   keinen Weg zum Kauf gibt.

   Ohne JavaScript wird die Klasse nie gesetzt und die Leiste laeuft wie
   vorher auf der ganzen Seite mit. */

@media (max-width: 999px) {
	body.hf-kaufkarte-nah .hf-mobile-buybar {
		display: none;
	}
}

/* ---- Mobiler Produktkopf: Auswahl frueher zeigen (06.09.2026) ----

   Aus dem Audit vom 06.09.2026, nachgemessen auf 390x844: die erste
   Herkunftsauswahl begann bei 907 px. Der Platz davor verteilte sich auf
   70 px reinen Abstand oben, 144 px Einleitung, 120 px Chip-Reihe im Kopf
   und 101 px Chip-Reihe INNERHALB der Kaufkarte.

   Zwei Hebel, keiner davon loescht eine Aussage:

   1. Abstaende oben und die beiden Chip-Reihen verdichten. Bringt 78 px.
   2. Die Chips in der Kaufkarte ("Oeffentlicher Link reicht", "Kein Login
      noetig", "Bestellung verfolgen") wandern unter den Knopf. Sie standen
      zwischen Kartenkopf und erster Auswahl und waren damit die teuerste
      Sperre auf dem Weg zur Entscheidung. Dieselbe Technik wie am 05.09. bei
      der Vorteilsliste; die Karte ist dafuer bereits Flex.

   Ergebnis gemessen: erste Auswahl 907 -> 735 px, Kaufknopf bei 1.055,
   kein horizontaler Ueberlauf. Die Einleitung bleibt unangetastet — sie zu
   kuerzen waere eine Textentscheidung ueber 266 Seiten in vier Sprachen,
   keine Layoutfrage. */

@media (max-width: 520px) {
	body.single-product .hf-cfg-wrap { padding-top: 12px; }
	body.single-product .hf-breadcrumb { margin-bottom: 6px; }
	body.single-product .hf-product-hero {
		padding: 18px 20px;
		margin-bottom: 16px;
	}
	body.single-product .hf-product-hero-tags {
		margin-top: 12px;
		gap: 6px;
	}
	body.single-product .hf-product-hero-tags span {
		font-size: 11px;
		padding: 5px 9px;
	}
	body.single-product .hf-buyfacts { gap: 6px; }
	body.single-product .hf-buyfacts span {
		font-size: 11px;
		padding: 4px 8px;
	}
}

@media (max-width: 999px) {
	body.single-product .hf-cfg-card-premium > .hf-buyfacts {
		order: 1;
		margin: 14px 0 0;
	}
}

/*
 * Eingabefelder mobil mindestens 16 px (18.09.2026, Schritt 13).
 * iOS Safari zoomt beim Antippen in jedes Feld unter 16 px hinein und bleibt
 * vergrößert stehen — auch im Link-/Nutzernamen-Feld des Konfigurators und
 * des Schnellkaufs, also mitten im Kauf. Vorher 14–15 px.
 */
@media (max-width: 768px) {
	.hf-mega-search input,
	.hf-mnav-search input,
	.hf-cfg-input,
	.hf-qb-input,
	.hf-news input[type="email"],
	.hf-give-textarea {
		font-size: 16px;
	}
}

/* ---- Warenkorb: passende Services (27.09.2026) ----------------------------
   Ersetzt .hf-cart-reco*. Der alte Block war ein Raster aus vier weissen
   Kaesten; eine Element-Regel auf die Karten-Kinder (.hf-cart-reco span) trug
   den Plattform-Verlauf fuer das Symbol und traf damit auch die Preis-Spans
   aus wc_price() — „ab 4,49 EUR" stand auf Pink. Deshalb hier: jedes Kind hat
   eine eigene Klasse, keine Element-Selektoren.

   Die Motive bringen ein weisses Quadrat mit; sie werden als Blob beschnitten
   (Form je Position), sonst wirkt der Block wieder wie Kaesten. Alles bleibt
   hell; die einzige dunkle Flaeche ist der runde Knopf im Kopf. Preise,
   Mengen und Herkunft kommen aus SMM_Pricing und dem Produktnamen, nichts
   steht fest im Markup. */

.hf-recos {
	--hf-reco-well: #f7f5ff;
	--hf-reco-well-2: #efeaff;
	position: relative;
	max-width: 1180px;
	margin: 34px auto 0;
	/* 27.09.2026 eine Stufe kleiner, auf Özgürs Wunsch („alles minimal
	   kleiner"): Innenabstand 40 → 32 px, Bühne 88 % der Spalte. */
	padding: 36px 32px 32px;
	border-radius: 32px;
	overflow: hidden;
	background:
		radial-gradient(60% 80% at 8% 0%, rgba(124, 92, 255, .22), transparent 60%),
		radial-gradient(50% 70% at 100% 100%, rgba(225, 86, 124, .16), transparent 60%),
		linear-gradient(180deg, var(--hf-reco-well) 0%, var(--hf-reco-well-2) 100%);
}
.hf-recos::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: radial-gradient(rgba(20, 18, 28, .09) 1px, transparent 1.2px);
	background-size: 22px 22px;
	-webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, .55), transparent 70%);
	mask-image: linear-gradient(180deg, rgba(0, 0, 0, .55), transparent 70%);
	pointer-events: none;
}

.hf-recos-head {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: end;
	gap: 24px;
	margin-bottom: 30px;
}
.hf-recos-kicker {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 11.5px;
	font-weight: 800;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--hf-accent, #704be8);
}
.hf-recos-kicker::before {
	content: "";
	width: 22px;
	height: 2px;
	background: currentColor;
	border-radius: 2px;
}
.hf-recos .hf-recos-titel {
	/* Zwei Klassen, weil WooCommerce-Seiten ihre Ueberschriften mittig setzen
	   (.woocommerce h2 und Verwandte). Im Bildschirmfoto vom 27.09.2026 stand
	   die H2 mittig ueber einem linksbuendigen Kopf. */
	text-align: left;
	margin: 12px 0 8px;
	line-height: 1.12;
	font-size: 28px;
}
.hf-recos .hf-recos-head p,
.hf-recos .hf-recos-kicker { text-align: left; }
.hf-recos-akzent {
	background: var(--hf-accent-grad, linear-gradient(135deg, #7C5CFF 0%, #8B5CF6 54%, #B84CFF 100%));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
.hf-recos-head p {
	margin: 0;
	color: var(--hf-muted);
	max-width: 52ch;
}
.hf-recos-alle {
	justify-self: start;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 13px 18px;
	border-radius: 999px;
	background: var(--hf-ink);
	color: #fff;
	font-weight: 800;
	text-decoration: none;
	white-space: nowrap;
	box-shadow: 0 10px 26px rgba(20, 18, 28, .18);
	transition: transform .2s;
}
.hf-recos-alle:hover { transform: translateY(-2px); color: #fff; }
.hf-recos-alle svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.4; }

.hf-recos-raster {
	position: relative;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	/* Alle Karten gleich hoch. Die Trennlinie liegt ohnehin gleich, weil das
	   Motiv ein festes Seitenverhaeltnis hat; der Knopf wird unten
	   angeheftet. Vorher endete „Ansehen" je nach Textlaenge auf vier
	   verschiedenen Hoehen, und das war unruhig (Özgür, 27.09.2026). */
	align-items: stretch;
	gap: 26px 20px;
}

/* Weniger als vier Karten (Produktseite: drei): gleiche Kartenbreite wie bei
   vier, das Raster wird schmaler und steht mittig, statt eine leere Spalte
   zu lassen oder die Motive aufzublasen. */
.hf-recos-raster[data-anzahl="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 75%; margin-inline: auto; }
.hf-recos-raster[data-anzahl="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 50%; margin-inline: auto; }
.hf-recos-raster[data-anzahl="1"] { grid-template-columns: minmax(0, 1fr); max-width: 25%; margin-inline: auto; }

.hf-reco {
	position: relative;
	display: grid;
	/* Feste Zeilen: Motiv nach Inhalt, Text nimmt den Rest. Damit beginnen
	   Linie und Titel in allen Spalten auf derselben Hoehe. */
	grid-template-rows: auto 1fr;
	gap: 0;
	color: inherit;
	text-decoration: none;
	animation: hf-reco-rise .6s cubic-bezier(.2, .7, .2, 1) both;
	animation-delay: calc(var(--hf-reco-i, 0) * 90ms);
}
.hf-reco:hover { color: inherit; }
.hf-reco:focus-visible { outline: 3px solid var(--hf-accent, #704be8); outline-offset: 6px; border-radius: 16px; }
@keyframes hf-reco-rise {
	from { opacity: 0; transform: translateY(18px); }
	to { opacity: 1; transform: none; }
}

/* Form und Neigung je Position — vier Varianten, danach wiederholt sich das Muster. */
.hf-reco:nth-child(4n+1) { --hf-reco-blob: 46% 54% 52% 48% / 58% 44% 56% 42%; --hf-reco-tilt: -1.5deg; }
.hf-reco:nth-child(4n+2) { --hf-reco-blob: 56% 44% 48% 52% / 44% 58% 42% 56%; --hf-reco-tilt: 1.2deg; }
.hf-reco:nth-child(4n+3) { --hf-reco-blob: 50% 50% 42% 58% / 54% 46% 54% 46%; --hf-reco-tilt: -.8deg; }
.hf-reco:nth-child(4n+4) { --hf-reco-blob: 44% 56% 56% 44% / 50% 50% 50% 50%; --hf-reco-tilt: 1.6deg; }

.hf-reco-stage {
	position: relative;
	display: block;
	aspect-ratio: 1 / 1.02;
	width: 88%;
	margin: 0 auto;
}
/* Der weisse Saum um die Motive, 27.09.2026.
   Gemessen statt geraten: Der wirklich weisse Rand im Bild ist schmal —
   24 px bei 1254 px Kantenlaenge (1,8 %) beim Likes-Motiv, 4 bis 20 px bei
   512 px (0,8 %) beim Plattformbild. Das Helle, das Özgür sieht, ist also
   nicht ein Rand, sondern der helle Hintergrund des ganzen Quadrats. Ein
   blosses Vergroessern des Bildes im Beschnitt entfernt ihn deshalb nicht,
   es beschneidet nur das Motiv (bei scale 1.1 fielen 5 % je Seite weg, weit
   mehr als der weisse Rand).
   Was wirkt: `mix-blend-mode: multiply` — Weiss multipliziert mit der
   Buehne verschwindet, das Motiv bleibt. Dazu scale 1.02, das schluckt die
   ein bis zwei Prozent echten Rand. Der weisse Ring bleibt als Ring. */
.hf-reco-bild {
	position: relative;
	z-index: 2;
	display: block;
	overflow: hidden;
	border-radius: var(--hf-reco-blob, 50%);
	transform: rotate(var(--hf-reco-tilt, 0deg));
	/* Der Schatten bleibt, der weisse Ring faellt weg: er war der Rahmen um
	   genau die helle Flaeche, die verschwinden soll. */
	box-shadow: 0 20px 34px rgba(90, 60, 200, .18);
	transition: transform .45s cubic-bezier(.2, .7, .2, 1), border-radius .6s;
	/* Der Mischmodus gehoert auf die Huelle, nicht auf das Bild darin:
	   Die Huelle traegt ein transform, und ein transform macht einen eigenen
	   Stapelkontext auf. Ein `mix-blend-mode` am Bild mischt dann nur mit dem
	   durchsichtigen Inneren der Huelle — sichtbar blieb die weisse Scheibe
	   (im Browser gesehen, 27.09.2026). Auf der Huelle mischt es mit der
	   Buehne dahinter, und genau das soll es. */
	mix-blend-mode: multiply;
}
.hf-reco-bild img {
	display: block;
	width: 100%;
	height: auto;
	transform: scale(1.02);
}
.hf-reco-halo {
	position: absolute;
	inset: -4% -6% 4%;
	border-radius: 38% 62% 55% 45% / 48% 42% 58% 52%;
	background: radial-gradient(closest-side, rgba(124, 92, 255, .22), rgba(225, 86, 124, .10) 60%, transparent 75%);
	filter: blur(6px);
	transition: transform .4s;
}
.hf-reco-floor {
	position: absolute;
	left: 14%;
	right: 14%;
	bottom: 5%;
	height: 12px;
	border-radius: 50%;
	background: radial-gradient(closest-side, rgba(80, 50, 180, .28), transparent);
	transition: transform .45s, opacity .45s;
}
.hf-reco-plat {
	position: absolute;
	z-index: 3;
	left: 4%;
	top: 6%;
	width: 30px;
	height: 30px;
	border-radius: 9px;
	display: grid;
	place-items: center;
	background: var(--hf-prod-grad, linear-gradient(135deg, #7C5CFF 0%, #3a2b6b 100%));
	box-shadow: 0 6px 14px rgba(20, 18, 28, .22);
}
.hf-reco-plat svg { width: 16px; height: 16px; fill: none; stroke: #fff; stroke-width: 2.2; }
.hf-reco-sticker {
	position: absolute;
	z-index: 3;
	left: 4%;
	bottom: 12%;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	font-size: 17px;
	background: #fff;
	box-shadow: 0 8px 18px rgba(20, 18, 28, .14), 0 0 0 1px var(--hf-line);
	transform: rotate(-8deg);
}
.hf-reco-tag {
	position: absolute;
	z-index: 4;
	right: -4%;
	top: 2%;
	display: grid;
	justify-items: center;
	gap: 0;
	padding: 8px 12px;
	border-radius: 13px;
	background: #fff;
	box-shadow: 0 12px 26px rgba(20, 18, 28, .16), 0 0 0 1px var(--hf-line);
	transform: rotate(3deg);
	transition: transform .3s;
	line-height: 1.15;
	/* Das tuerkische Suffix „'den" gehoert an den Betrag, nicht auf eine
	   zweite Zeile (Özgür, Bildschirmfoto 27.09.2026). Das Schild wird
	   dadurch breiter, nicht hoeher — auch mit einem langen Lira-Betrag. */
	white-space: nowrap;
}
.hf-reco-zeile {
	display: inline-flex;
	align-items: baseline;
	gap: 1px;
	white-space: nowrap;
}
.hf-reco-suffix {
	font-size: 13px;
	font-weight: 800;
	color: var(--hf-ink);
}
.hf-reco-tag small {
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--hf-muted);
}
.hf-reco-amount {
	font-size: 18px;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	color: var(--hf-ink);
}

.hf-reco-text {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 14px 8px 0;
	margin-top: -6px;
	border-top: 1px solid var(--hf-line);
}
.hf-reco-title { font-weight: 800; font-size: 15.5px; line-height: 1.25; letter-spacing: -.01em; color: var(--hf-ink); }
.hf-reco-sub {
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--hf-accent, #704be8);
}
.hf-reco-why { color: var(--hf-muted); font-size: 13.5px; line-height: 1.45; margin-bottom: 10px; }
.hf-reco-cta {
	/* auto schiebt den Knopf an den unteren Rand der Karte, egal wie lang
	   der Satz darueber ist; align-self haelt ihn auf seiner Breite. */
	margin-top: auto;
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin-bottom: 2px;
	padding: 9px 15px;
	border: 1px solid var(--hf-line);
	border-radius: 999px;
	background: #fff;
	font-weight: 800;
	font-size: 13.5px;
	color: var(--hf-ink);
	transition: background .2s, border-color .2s, color .2s;
}
.hf-reco-cta svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.4; transition: transform .25s; }

.hf-reco:hover .hf-reco-bild { transform: translateY(-9px) rotate(0deg); border-radius: 50%; }
.hf-reco:hover .hf-reco-floor { transform: scaleX(.86); opacity: .7; }
.hf-reco:hover .hf-reco-halo { transform: scale(1.05); }
.hf-reco:hover .hf-reco-tag { transform: rotate(-2deg) translateY(-4px); }
.hf-reco:hover .hf-reco-cta { background: var(--hf-ink); border-color: var(--hf-ink); color: #fff; }
.hf-reco:hover .hf-reco-cta svg { transform: translateX(4px); }

.hf-recos-fuss {
	position: relative;
	margin: 26px 0 0;
	display: flex;
	align-items: center;
	gap: 8px;
	color: var(--hf-muted);
	font-size: 12.5px;
}
.hf-recos-fuss svg { width: 14px; height: 14px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 2; }

@media (prefers-reduced-motion: reduce) {
	.hf-reco { animation: none; }
	.hf-reco-stage img,
	.hf-reco-floor,
	.hf-reco-halo,
	.hf-reco-tag,
	.hf-reco-cta svg { transition: none; }
}

@media (max-width: 980px) {
	.hf-recos { padding: 34px 26px 30px; }
	.hf-recos-head { grid-template-columns: 1fr; margin-bottom: 18px; }
	.hf-recos-raster,
	.hf-recos-raster[data-anzahl] { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 22px; max-width: none; }
	.hf-recos-raster[data-anzahl="1"] { grid-template-columns: minmax(0, 1fr); max-width: 50%; }
}

/* Unter 560 px keine gestapelten Kaesten, sondern eine Wischleiste: das
   naechste Motiv lugt hervor und zeigt, dass es weitergeht. */
@media (max-width: 560px) {
	.hf-recos { padding: 24px 0 22px; border-radius: 22px; }
	.hf-recos .hf-recos-titel { font-size: 26px; }
	.hf-reco-amount { font-size: 17px; }
	.hf-reco-sticker { width: 30px; height: 30px; font-size: 15px; }
	.hf-reco-tag { padding: 7px 10px; }
	.hf-recos-head { padding: 0 20px; }
	.hf-recos-fuss { padding: 0 20px; }
	.hf-recos-raster {
		display: flex;
		gap: 14px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		padding: 6px 20px 14px;
		scrollbar-width: none;
	}
	.hf-recos-raster::-webkit-scrollbar { display: none; }
	/* 64 % statt 78 %: anderthalb Kacheln im Bild, die Motive fuellen den
	   Bildschirm nicht mehr aus (Özgür, 27.09.2026). */
	.hf-reco { flex: 0 0 64%; scroll-snap-align: start; }
}

/* ---- Produktseite: Buehne in der Textkarte (Auftrag D1, 28.09.2026) --------
   Rechts neben H1, Absatz und Pillen das Motiv des Service-Typs als Blob mit
   weissem Ring (−2°), oben links das Plattform-Quadrat, oben rechts das
   Preisschild „ab …" der gewaehlten Herkunft, unten links deren Flagge. Der
   Text bleibt vollstaendig stehen (SEO). Die Spaltenregel braucht den
   Koerper-Praefix, weil `body.single-product .hf-product-hero` weiter oben
   die Karte einspaltig setzt.
   Der Ring ist eine eigene weisse Flaeche hinter dem Bild und 8 px groesser:
   Das Motiv bringt ein helles Quadrat mit, das so im Ring aufgeht, statt als
   Kasten zu stehen. */
body.single-product .hf-product-hero.hf-product-hero--buehne {
	grid-template-columns: minmax(0, 1fr) 44%;
	gap: 18px;
	align-items: stretch;
}
.hf-product-hero--buehne .hf-product-hero-copy { align-self: center; min-width: 0; }
/* Stufen, wenn die Karte sonst hoeher als das Bestellfeld wuerde (gesetzt
   vom Karten-Skript in content-single-product.php). */
body.single-product .hf-product-hero.hf-product-hero--buehne.is-knapp { grid-template-columns: minmax(0, 1fr) 36%; }
body.single-product .hf-product-hero.hf-product-hero--buehne.is-knapper { grid-template-columns: minmax(0, 1fr) 28%; }
body.single-product .hf-product-hero.hf-product-hero--buehne.is-ohne-buehne { grid-template-columns: 1fr; }
.hf-product-hero--buehne.is-ohne-buehne .hf-hero-buehne { display: none; }
/* Bei 28 % reicht die Breite nicht fuer Schild und Plattform-Quadrat
   nebeneinander; die Plattform steht ohnehin im Kicker ueber der H1. */
.hf-product-hero--buehne.is-knapper .hf-hero-buehne-plat { display: none; }
.hf-product-hero--buehne.is-knapper .hf-hero-buehne-preis { padding: 7px 10px; }
.hf-product-hero--buehne.is-knapper .hf-hero-buehne-betrag { font-size: 17px; }

.hf-hero-buehne {
	--hf-buehne-blob: 46% 54% 52% 48% / 58% 44% 56% 42%;
	--hf-buehne-breite: min(84%, 290px);
	position: relative;
	z-index: 1;
	display: grid;
	place-items: center;
	/* Fast quadratisch und mittig statt auf die Texthoehe gestreckt: sonst
	   stehen Schild und Sticker in den Ecken einer hohen Spalte, weit weg vom
	   Motiv (im Bild gesehen, 28.09.2026). */
	align-self: center;
	aspect-ratio: 1 / 1.06;
}
.hf-hero-buehne-halo {
	position: absolute;
	inset: 4% 0 8%;
	border-radius: 38% 62% 55% 45% / 48% 42% 58% 52%;
	background: radial-gradient(closest-side, color-mix(in srgb, var(--hf-prod-solid, #7c5cff) 24%, transparent), rgba(225, 86, 124, .10) 60%, transparent 76%);
	filter: blur(8px);
}
.hf-hero-buehne-ring,
.hf-hero-buehne-bild {
	grid-area: 1 / 1;
	width: var(--hf-buehne-breite);
	aspect-ratio: 1 / 1;
	border-radius: var(--hf-buehne-blob);
	transform: rotate(-2deg);
	transition: border-radius .6s, transform .45s cubic-bezier(.2, .7, .2, 1), box-shadow .45s;
}
.hf-hero-buehne-ring {
	background: #fff;
	box-shadow: 0 0 0 8px #fff, 0 22px 40px rgba(90, 60, 200, .18);
}
.hf-hero-buehne-bild {
	position: relative;
	z-index: 2;
	display: block;
	overflow: hidden;
}
.hf-hero-buehne-bild img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform: scale(1.02);
}
.hf-hero-buehne:hover .hf-hero-buehne-ring,
.hf-hero-buehne:hover .hf-hero-buehne-bild {
	border-radius: 50%;
	transform: rotate(0deg) translateY(-6px);
}
.hf-hero-buehne:hover .hf-hero-buehne-ring { box-shadow: 0 0 0 8px #fff, 0 30px 46px rgba(90, 60, 200, .22); }

.hf-hero-buehne-plat {
	position: absolute;
	z-index: 3;
	left: 4%;
	top: 4%;
	width: 40px;
	height: 40px;
	border-radius: 12px;
	display: grid;
	place-items: center;
	background: var(--hf-prod-grad, linear-gradient(135deg, #7c5cff 0%, #3a2b6b 100%));
	box-shadow: 0 8px 18px rgba(20, 18, 28, .22);
}
.hf-hero-buehne-plat svg { width: 21px; height: 21px; fill: none; stroke: #fff; stroke-width: 2.2; }

.hf-hero-buehne-preis {
	position: absolute;
	z-index: 4;
	right: 0;
	top: 2%;
	display: grid;
	justify-items: center;
	padding: 9px 14px;
	border-radius: 14px;
	background: #fff;
	box-shadow: 0 12px 26px rgba(20, 18, 28, .16), 0 0 0 1px var(--hf-line);
	transform: rotate(3deg);
	line-height: 1.15;
	white-space: nowrap;
}
.hf-hero-buehne-preis small {
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--hf-muted);
}
.hf-hero-buehne-zeile { display: inline-flex; align-items: baseline; gap: 1px; }
.hf-hero-buehne-betrag {
	font-size: 21px;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	color: var(--hf-ink);
}
.hf-hero-buehne-suffix { font-size: 14px; font-weight: 800; color: var(--hf-ink); }

.hf-hero-buehne-herkunft {
	position: absolute;
	z-index: 4;
	left: 2%;
	bottom: 6%;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 5px 13px 5px 5px;
	border-radius: 999px;
	background: #fff;
	box-shadow: 0 10px 22px rgba(20, 18, 28, .14), 0 0 0 1px var(--hf-line);
	transform: rotate(-4deg);
}
.hf-hero-buehne-flagge {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	font-size: 19px;
	line-height: 1;
	background: var(--hf-bg-2, #f6f4fb);
}
.hf-hero-buehne-herkunft small {
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--hf-muted);
}

/* Unter 980 px steht die Buehne ueber dem Text, als breite Flaeche 1,4 : 1;
   der Blob fuellt rund 80 % ihrer Hoehe (0,8 / 1,4 = 57 % der Breite). */
@media (max-width: 979px) {
	body.single-product .hf-product-hero.hf-product-hero--buehne { grid-template-columns: 1fr; gap: 10px; }
	.hf-hero-buehne { order: -1; aspect-ratio: 1.4 / 1; --hf-buehne-breite: 57%; }
}
/* Unter 560 px 1,1 : 1 (0,8 / 1,1 = 73 %). */
@media (max-width: 559px) {
	.hf-hero-buehne { aspect-ratio: 1.1 / 1; --hf-buehne-breite: 72%; }
	.hf-hero-buehne-betrag { font-size: 18px; }
	.hf-hero-buehne-plat { width: 34px; height: 34px; border-radius: 10px; }
	.hf-hero-buehne-plat svg { width: 18px; height: 18px; }
}
@media (prefers-reduced-motion: reduce) {
	.hf-hero-buehne-ring,
	.hf-hero-buehne-bild { transition: none; }
	.hf-hero-buehne:hover .hf-hero-buehne-ring,
	.hf-hero-buehne:hover .hf-hero-buehne-bild { transform: rotate(-2deg); }
}

/* ---- Produktseite: Ablauf als Linie (Auftrag D4, 28.09.2026) ---------------
   Vier Stationen auf einer Verlaufslinie (Akzent -> Rosé). Die Linie laeuft
   von der Mitte des ersten zur Mitte des letzten Kreises (je Spalte ein
   Achtel Rand). Erledigte Stationen (is-erledigt, vom Karten-Skript gesetzt)
   zeigen den Haken statt der Ziffer. */
.hf-ablauf {
	--hf-ablauf-punkt: 46px;
	position: relative;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 22px;
	margin: 26px 0 0;
	padding: 0;
	list-style: none;
	counter-reset: none;
}
.hf-ablauf::before {
	content: "";
	position: absolute;
	top: calc(var(--hf-ablauf-punkt) / 2 - 2px);
	left: 12.5%;
	right: 12.5%;
	height: 4px;
	border-radius: 4px;
	background: linear-gradient(90deg, var(--hf-accent, #704be8), #e1567c);
	opacity: .85;
}
.hf-ablauf-station {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	margin: 0;
}
.hf-ablauf-punkt {
	position: relative;
	z-index: 1;
	width: var(--hf-ablauf-punkt);
	height: var(--hf-ablauf-punkt);
	border-radius: 50%;
	display: grid;
	place-items: center;
	background: #fff;
	border: 3px solid var(--hf-accent, #704be8);
	box-shadow: 0 8px 20px rgba(112, 75, 232, .18);
	color: var(--hf-accent, #704be8);
	font-weight: 800;
	font-size: 17px;
	transition: background .25s, border-color .25s, color .25s;
}
.hf-ablauf-station:nth-child(2) .hf-ablauf-punkt { border-color: #9a52d6; color: #9a52d6; }
.hf-ablauf-station:nth-child(3) .hf-ablauf-punkt { border-color: #c353a8; color: #c353a8; }
.hf-ablauf-station:nth-child(4) .hf-ablauf-punkt { border-color: #e1567c; color: #e1567c; }
.hf-ablauf-punkt svg { display: none; width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.hf-ablauf-station.is-erledigt .hf-ablauf-punkt { background: var(--hf-accent-grad, #704be8); border-color: transparent; color: #fff; }
.hf-ablauf-station.is-erledigt .hf-ablauf-zahl { display: none; }
.hf-ablauf-station.is-erledigt .hf-ablauf-punkt svg { display: block; }
.hf-ablauf-station h3 { margin: 16px 0 6px; font-size: 17px; line-height: 1.3; }
.hf-ablauf-station p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--hf-soft, var(--hf-muted)); max-width: 240px; }

/* Unter 980 px zwei Spalten ohne Linie, unter 560 px eine; dann links
   ausgerichtet, Kreis neben dem Text. */
@media (max-width: 979px) {
	.hf-ablauf { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 22px; }
	.hf-ablauf::before { display: none; }
}
@media (max-width: 559px) {
	.hf-ablauf { grid-template-columns: 1fr; gap: 18px; }
	.hf-ablauf-station { display: grid; grid-template-columns: var(--hf-ablauf-punkt) minmax(0, 1fr); column-gap: 14px; align-items: start; text-align: left; }
	.hf-ablauf-punkt { grid-row: 1 / span 2; }
	.hf-ablauf-station h3 { margin: 10px 0 4px; }
	.hf-ablauf-station p { max-width: none; }
}

/* ---- Produktseite: Herkuenfte als Sticker (Auftrag D4, 28.09.2026) ---------
   Jede Herkunft ein runder Sticker, leicht gedreht nach Position. Klick
   setzt das Dropdown im Bestellfeld (Skript in content-single-product.php). */
.hf-herkunft-sticker {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 18px 16px;
	margin: 6px 0 34px;
}
.hf-herkunft-knopf {
	--hf-herkunft-dreh: 0deg;
	position: relative;
	display: grid;
	justify-items: center;
	align-content: center;
	gap: 3px;
	width: 128px;
	aspect-ratio: 1 / 1;
	padding: 12px;
	border-radius: 50%;
	border: 1px solid var(--hf-line);
	background: #fff;
	box-shadow: 0 10px 24px rgba(20, 18, 28, .09);
	color: var(--hf-ink);
	font: inherit;
	cursor: pointer;
	transform: rotate(var(--hf-herkunft-dreh));
	transition: transform .25s cubic-bezier(.2, .7, .2, 1), box-shadow .25s, border-color .25s;
}
.hf-herkunft-knopf:nth-child(6n+1) { --hf-herkunft-dreh: -3deg; }
.hf-herkunft-knopf:nth-child(6n+2) { --hf-herkunft-dreh: 2deg; }
.hf-herkunft-knopf:nth-child(6n+3) { --hf-herkunft-dreh: -1deg; }
.hf-herkunft-knopf:nth-child(6n+4) { --hf-herkunft-dreh: 3deg; }
.hf-herkunft-knopf:nth-child(6n+5) { --hf-herkunft-dreh: -2deg; }
.hf-herkunft-knopf:nth-child(6n+6) { --hf-herkunft-dreh: 1deg; }
.hf-herkunft-knopf:hover { transform: rotate(0deg) translateY(-3px); box-shadow: 0 14px 28px rgba(112, 75, 232, .16); }
.hf-herkunft-knopf:focus-visible { outline: 3px solid var(--hf-accent, #704be8); outline-offset: 4px; }
.hf-herkunft-flagge { font-size: 30px; line-height: 1; }
.hf-herkunft-name { font-size: 13px; font-weight: 800; line-height: 1.2; text-align: center; }
.hf-herkunft-preis { font-size: 12px; font-weight: 700; color: var(--hf-muted); white-space: nowrap; }
.hf-herkunft-marke {
	position: absolute;
	top: -6px;
	left: 50%;
	display: none;
	padding: 3px 9px;
	border-radius: 999px;
	background: var(--hf-accent-grad, #704be8);
	color: #fff;
	font-size: 10px;
	font-weight: 800;
	letter-spacing: .06em;
	text-transform: uppercase;
	transform: translateX(-50%);
	white-space: nowrap;
}
.hf-herkunft-knopf.is-gewaehlt { border: 2px solid var(--hf-accent, #704be8); box-shadow: 0 12px 28px rgba(112, 75, 232, .22); }
/* Kategorie/Shop: Sticker ohne Preiszeile, deshalb etwas kleiner (04.10.2026). */
.hf-fenster-herkunft .hf-herkunft-knopf { width: 112px; }
@media (max-width: 559px) { .hf-fenster-herkunft .hf-herkunft-knopf { width: 92px; } }
.hf-herkunft-knopf.is-gewaehlt .hf-herkunft-marke { display: block; }

.hf-herkunft-texte { max-width: 780px; margin: 0 auto; }
.hf-herkunft-texte h3 { margin: 22px 0 6px; font-size: 17px; line-height: 1.3; }
.hf-herkunft-texte p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--hf-soft, var(--hf-muted)); }

@media (max-width: 559px) {
	.hf-herkunft-sticker { gap: 14px 10px; }
	.hf-herkunft-knopf { width: 104px; padding: 8px; }
	.hf-herkunft-flagge { font-size: 24px; }
	.hf-herkunft-name { font-size: 12px; }
	.hf-herkunft-preis { font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
	.hf-herkunft-knopf, .hf-ablauf-punkt { transition: none; }
	.hf-herkunft-knopf:hover { transform: rotate(var(--hf-herkunft-dreh)); }
}

/* ---- Schaufenster je Plattform (Auftrag D3, 28.09.2026) --------------------
   Shop-Uebersicht, Kategorieseiten und Suche. Links die Buehne mit dem
   Plattform-Motiv (Blob, Plattform-Quadrat 44 px, Zaehler), rechts die
   Produkte als Sticker-Zeilen: runder Flaggen- oder Typ-Sticker, Name,
   Menge, Preisschild „ab", runder Pfeil. Ersetzt die Zeilen mit eigener
   Grafikserie (hf_fenster_zeile() in functions.php). Die Plattformfarbe
   kommt als --hf-plat-solid / --hf-plat-grad von der Sektion. */
/* ---- Kategorieseiten und Shop: Streifen „Herkünfte für <Plattform>" -------
   Ueber dem Schaufenster, volle Breite, dieselben Sticker wie auf der
   Produktseite (hf-herkunft-*), nur etwas kleiner. Am Handy eine Reihe zum
   Wischen statt vier Zeilen Sticker. Auftrag 28.09.2026. */
.hf-fenster-herkunft { grid-column: 1 / -1; min-width: 0; padding-bottom: 22px; border-bottom: 1px solid rgba(20, 18, 28, .07); }
.hf-fenster-herkunft .hf-herkunft-sticker { gap: 16px 14px; margin: 10px 0 0; }
.hf-fenster-herkunft .hf-herkunft-knopf { width: 112px; padding: 10px; text-decoration: none; }
.hf-fenster-herkunft button.hf-herkunft-knopf { cursor: pointer; font-family: inherit; color: inherit; background: #fff; }
.hf-fenster-herkunft .hf-herkunft-knopf.is-gewaehlt { border-color: var(--hf-plat-solid, #704be8); box-shadow: 0 10px 26px color-mix(in srgb, var(--hf-plat-solid, #704be8) 22%, transparent); }
.hf-fenster-herkunft .hf-herkunft-flagge { font-size: 26px; }
.hf-land-scroll-hint { display: none; }
.hf-herkunft-flagge.is-mehrere { font-size: 18px; letter-spacing: -1px; }
.hf-herkunft-preis .woocommerce-Price-amount { color: inherit; }
.hf-land-panel[hidden] { display: none; }
.hf-land-panel { margin-top: 24px; padding: 24px; border: 1px solid rgba(20, 18, 28, .1); border-radius: 24px; background: #faf9ff; scroll-margin-top: 105px; }
.hf-land-kopf { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; }
.hf-land-kopf-flagge { display: grid; place-items: center; width: 54px; height: 54px; flex: none; border-radius: 17px; background: #fff; font-size: 28px; box-shadow: 0 3px 12px rgba(31, 23, 55, .08); }
.hf-land-kicker { color: #686274; font-size: 12px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.hf-land-kopf h4 { margin: 3px 0 0; font-size: clamp(19px, 2vw, 25px); line-height: 1.2; }
.hf-land-karten { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 12px; }
.hf-land-karte { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 11px; border: 1px solid rgba(20, 18, 28, .09); border-radius: 17px; background: #fff; color: inherit; text-decoration: none; transition: border-color .16s, transform .16s, box-shadow .16s; }
.hf-land-karte:hover { border-color: var(--hf-plat-solid, #704be8); transform: translateY(-2px); box-shadow: 0 7px 20px rgba(31, 23, 55, .09); }
.hf-land-karte:focus-visible { outline: 3px solid var(--hf-plat-solid, #704be8); outline-offset: 3px; }
.hf-land-bild { position: relative; display: grid; place-items: center; width: 86px; height: 86px; flex: none; overflow: hidden; border-radius: 13px; background: #f0ecff; }
.hf-land-bild img { width: 100%; height: 100%; object-fit: cover; }
.hf-land-bild-symbol { position: absolute; display: grid; place-items: center; width: 27px; height: 27px; left: 4px; bottom: 4px; border-radius: 8px; background: #fff; color: var(--hf-plat-solid, #704be8); box-shadow: 0 2px 8px rgba(20, 18, 28, .14); }
.hf-land-bild-symbol svg { width: 17px; height: 17px; }
.hf-land-bild-flagge { position: absolute; top: 2px; right: 3px; font-size: 19px; line-height: 1; }
.hf-land-karte-text { display: grid; gap: 5px; min-width: 0; line-height: 1.3; }
.hf-land-karte-text strong { font-size: 14px; font-weight: 800; }
.hf-land-karte-text > span { color: #625b70; font-size: 12px; font-weight: 700; }
.hf-land-karte-pfeil { margin-left: auto; color: var(--hf-plat-solid, #704be8); font-size: 19px; font-weight: 800; }
@media (prefers-reduced-motion: reduce) { .hf-land-karte { transition: none; } }
@media (max-width: 559px) {
	.hf-fenster-herkunft { margin: 0 -16px; padding: 0 0 16px; }
	.hf-fenster-herkunft .hf-fenster-gruppe { padding: 0 16px; }
	.hf-fenster-herkunft .hf-herkunft-sticker { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; padding: 10px 16px 14px; margin: 0; scroll-snap-type: x proximity; scrollbar-width: none; }
	.hf-fenster-herkunft .hf-herkunft-sticker::-webkit-scrollbar { display: none; }
	.hf-fenster-herkunft .hf-herkunft-knopf { flex: 0 0 auto; width: 96px; padding: 8px; scroll-snap-align: start; }
	.hf-fenster-herkunft .hf-herkunft-flagge { font-size: 22px; }
	.hf-land-scroll-hint { display: inline; order: 2; margin-left: auto; white-space: nowrap; font-size: 10px; letter-spacing: 0; text-transform: none; }
	.hf-land-panel { margin: 12px 16px 0; padding: 16px; border-radius: 19px; }
	.hf-land-karten { grid-template-columns: 1fr; }
	.hf-land-karte { min-height: 78px; }
	.hf-land-bild { width: 74px; height: 74px; }
}

.hf-fenster {
	display: grid;
	grid-template-columns: 280px minmax(0, 1fr);
	gap: 30px;
	align-items: start;
	padding: 26px;
}
.hf-fenster-buehne {
	position: sticky;
	top: 96px;
	display: grid;
	justify-items: center;
	text-align: center;
}
.hf-fenster-motiv {
	position: relative;
	width: 100%;
	max-width: 250px;
	aspect-ratio: 1 / 1;
	display: grid;
	place-items: center;
}
.hf-fenster-halo {
	position: absolute;
	inset: 2% -4% 6%;
	border-radius: 38% 62% 55% 45% / 48% 42% 58% 52%;
	background: radial-gradient(closest-side, color-mix(in srgb, var(--hf-plat-solid, #7c5cff) 24%, transparent), rgba(225, 86, 124, .10) 60%, transparent 76%);
	filter: blur(8px);
}
.hf-fenster-bild {
	position: relative;
	width: 82%;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	border-radius: 46% 54% 52% 48% / 58% 44% 56% 42%;
	background: #fff;
	box-shadow: 0 0 0 8px #fff, 0 22px 40px rgba(90, 60, 200, .16);
	transform: rotate(-2deg);
	transition: border-radius .6s, transform .45s cubic-bezier(.2, .7, .2, 1);
}
.hf-fenster-motiv:hover .hf-fenster-bild { border-radius: 50%; transform: rotate(0deg) translateY(-4px); }
.hf-fenster-bild img { display: block; width: 100%; height: 100%; object-fit: cover; transform: scale(1.02); }
.hf-fenster-plat {
	position: absolute;
	z-index: 2;
	left: 4%;
	top: 4%;
	width: 44px;
	height: 44px;
	border-radius: 13px;
	display: grid;
	place-items: center;
	background: var(--hf-plat-grad, var(--hf-accent-grad));
	box-shadow: 0 8px 18px rgba(20, 18, 28, .22);
}
.hf-fenster-plat svg { width: 22px; height: 22px; fill: none; stroke: #fff; stroke-width: 2.2; }
.hf-fenster-zaehler {
	position: absolute;
	z-index: 2;
	right: 0;
	bottom: 10%;
	padding: 7px 13px;
	border-radius: 999px;
	background: #fff;
	box-shadow: 0 10px 22px rgba(20, 18, 28, .14), 0 0 0 1px var(--hf-line);
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .02em;
	color: var(--hf-ink);
	transform: rotate(3deg);
	white-space: nowrap;
}
.hf-fenster-buehne h2 { margin: 14px 0 4px; font-size: 24px; text-align: center; }
.hf-fenster-buehne p { margin: 0; max-width: 240px; font-size: 13px; line-height: 1.5; color: var(--hf-muted); }

.hf-fenster-abschnitt + .hf-fenster-abschnitt { margin-top: 24px; }
.hf-fenster-gruppe {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 10px;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--hf-muted);
	text-align: left;
}
.hf-fenster-gruppe::after { content: ""; flex: 1 1 auto; height: 1px; background: linear-gradient(to right, var(--hf-line), transparent); }
.hf-fenster-zeilen { display: grid; gap: 10px; }

.hf-fenster-zeile {
	display: grid;
	grid-template-columns: 48px minmax(0, 1fr) auto 36px;
	align-items: center;
	gap: 14px;
	padding: 9px 10px 9px 9px;
	border-radius: 999px;
	background: #fff;
	border: 1px solid var(--hf-line);
	box-shadow: 0 6px 16px rgba(20, 18, 28, .04);
	color: inherit;
	text-decoration: none;
	transition: border-color .2s, transform .2s cubic-bezier(.2, .7, .2, 1), box-shadow .2s;
}
.hf-fenster-zeile:hover {
	color: inherit;
	transform: translateY(-2px);
	border-color: color-mix(in srgb, var(--hf-plat-solid, #7c5cff) 40%, var(--hf-line));
	box-shadow: 0 12px 26px color-mix(in srgb, var(--hf-plat-solid, #7c5cff) 14%, transparent);
}
.hf-fenster-zeile:focus-visible { outline: 3px solid var(--hf-accent, #704be8); outline-offset: 3px; }
.hf-fenster-sticker {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	font-size: 24px;
	line-height: 1;
	color: color-mix(in srgb, var(--hf-plat-solid, #7c5cff) 70%, var(--hf-ink));
	background: color-mix(in srgb, var(--hf-plat-solid, #7c5cff) 11%, #fff);
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--hf-plat-solid, #7c5cff) 18%, transparent);
}
.hf-fenster-sticker.is-mehrere { font-size: 13px; letter-spacing: -1px; }
.hf-fenster-sticker svg { width: 24px; height: 24px; }
.hf-fenster-text { min-width: 0; }
.hf-fenster-name { display: block; font-size: 15px; font-weight: 800; line-height: 1.25; color: var(--hf-ink); }
.hf-fenster-menge { display: block; margin-top: 2px; font-size: 12.5px; color: var(--hf-muted); }
.hf-fenster-herkuenfte { display: block; margin-top: 3px; color: var(--hf-plat-solid, #704be8); font-size: 11.5px; font-weight: 700; line-height: 1.3; }
.hf-origin-page-switch { padding-right: 42px; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23584c70' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; }
.hf-fenster-preis {
	display: grid;
	justify-items: end;
	padding: 6px 12px;
	border-radius: 12px;
	background: var(--hf-bg-2, #f6f4fb);
	line-height: 1.1;
	white-space: nowrap;
}
.hf-fenster-preis small { font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--hf-muted); }
.hf-fenster-zeile-betrag { font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--hf-ink); }
.hf-fenster-suffix { font-size: 12px; }
.hf-fenster-pfeil {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	background: var(--hf-plat-grad, var(--hf-accent-grad));
	transition: transform .2s;
}
.hf-fenster-pfeil svg { width: 18px; height: 18px; fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
/* Feste Spalte: Treffer ohne Produkt (Suche: Ratgeberseiten) haben kein
   Preisschild, sonst rueckte der Pfeil in dessen Spalte. */
.hf-fenster-pfeil { grid-column: 4; }
/* Dienst mit Laendern (04.10.2026): Zeile plus Chips darunter. */
.hf-fenster-dienst { display: grid; gap: 8px; }
.hf-fenster-laender { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 0 12px 4px 71px; }
.hf-fenster-land { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px 4px 7px; border-radius: 999px; border: 1px solid var(--hf-line); background: #fff; color: var(--hf-ink); font-size: 12.5px; font-weight: 650; line-height: 1.3; text-decoration: none; white-space: nowrap; transition: border-color .15s, color .15s; }
.hf-fenster-land:hover { color: var(--hf-ink); border-color: color-mix(in srgb, var(--hf-plat-solid, #7c5cff) 45%, var(--hf-line)); }
.hf-fenster-land-flagge { font-size: 15px; line-height: 1; }
.hf-fenster-land-flagge.is-mehrere { font-size: 11px; letter-spacing: -1px; }
.hf-fenster-mehr { flex: 0 0 auto; }
.hf-fenster-mehr[open] { flex-basis: 100%; }
.hf-fenster-mehr > summary { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 999px; color: var(--hf-plat-solid, #704be8); font-size: 12.5px; font-weight: 750; cursor: pointer; list-style: none; }
.hf-fenster-mehr > summary::-webkit-details-marker { display: none; }
.hf-fenster-mehr > summary::after { content: "+"; font-weight: 800; }
.hf-fenster-mehr[open] > summary::after { content: "–"; }
.hf-fenster-laender-rest { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.hf-fenster-zeile:hover .hf-fenster-pfeil { transform: translateX(3px); }

@media (max-width: 979px) {
	.hf-fenster { grid-template-columns: 200px minmax(0, 1fr); gap: 22px; padding: 20px; }
	.hf-fenster-buehne h2 { font-size: 21px; }
}
/* Unter 560 px eine Spalte: Buehne klein ueber der Liste, nicht klebend. */
@media (max-width: 559px) {
	.hf-fenster { grid-template-columns: 1fr; gap: 14px; padding: 16px; }
	.hf-fenster-buehne { position: static; }
	.hf-fenster-motiv { max-width: 190px; }
	/* Preis unter den Namen: tuerkische Namen sind lang („Instagram erişimi –
	   Almanca Takipçi Premium") und brachen neben dem Preis in fuenf Zeilen. */
	.hf-fenster-zeile { grid-template-columns: 40px minmax(0, 1fr) 28px; grid-template-areas: "st text pfeil" "st preis pfeil"; gap: 2px 10px; padding: 9px 9px 9px 8px; border-radius: 22px; }
	.hf-fenster-sticker { grid-area: st; }
	.hf-fenster-text { grid-area: text; }
	.hf-fenster-pfeil { grid-area: pfeil; }
	.hf-fenster-preis { grid-area: preis; display: flex; align-items: baseline; gap: 4px; justify-self: start; padding: 0; background: none; }
	.hf-fenster-sticker { width: 40px; height: 40px; font-size: 20px; }
	.hf-fenster-sticker svg { width: 20px; height: 20px; }
	.hf-fenster-pfeil { width: 28px; height: 28px; }
	.hf-fenster-pfeil svg { width: 15px; height: 15px; }
	.hf-fenster-name { font-size: 14px; }
	.hf-fenster-zeile-betrag { font-size: 14px; }
	.hf-fenster-laender { padding: 0 6px 2px 58px; }
	.hf-fenster-land { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
	.hf-fenster-zeile, .hf-fenster-bild, .hf-fenster-pfeil { transition: none; }
	.hf-fenster-zeile:hover { transform: none; }
}/*
 * Manrope, lokal ausgeliefert (01.09.2026).
 *
 * ANLASS. Vorher laedt das Theme diese Schrift von fonts.googleapis.com. Dabei
 * geht die IP-Adresse jedes Besuchers an Google, bevor irgendjemand dem
 * Einwilligungsbanner zustimmen kann. Lokal ausgeliefert entfaellt das.
 *
 * EINE DATEI JE SUBSET, nicht eine je Schnitt. Manrope ist eine Variable Font:
 * Google liefert fuer 400, 500, 600 und 700 dieselbe Datei und laesst den
 * Browser das Gewicht auf der Achse einstellen. Vier Dateinamen fuer dieselben
 * Bytes waeren vier Downloads statt einem. Deshalb steht hier eine
 * Gewichtsspanne (400 700) statt vier Einzelwerte.
 *
 * Nur latin und latin-ext. latin-ext wird gebraucht: es traegt die tuerkischen
 * Zeichen (s-Cedille, g-Breve, punktloses i). Kyrillisch, Griechisch und
 * Vietnamesisch sind weggelassen - keine dieser Sprachen kommt im Shop vor.
 *
 * font-display: optional ist aus der Google-Einbindung uebernommen. Nicht auf
 * swap aendern, ohne den Umbruch zu pruefen: optional war die bewusste Wahl
 * gegen Layoutspruenge.
 */

/* latin */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400 700;
  font-display: optional;
  src: url(//socialvantix.com/wp-content/themes/hypeflow/assets/fonts/manrope-variable-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400 700;
  font-display: optional;
  src: url(//socialvantix.com/wp-content/themes/hypeflow/assets/fonts/manrope-variable-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}/* Audit 08.09.2026: clear hierarchy and short paths to the working controls. */
.hf-mobile-nav[aria-hidden="true"]{visibility:hidden;pointer-events:none}
.hf-footer .hf-footer-heading{display:flex;align-items:center;gap:8px;font-size:14px;line-height:1.5;text-align:left;margin:0 0 14px;font-weight:700}
.hf-footer-heading svg{width:20px;height:20px}
.hf-wissen-cta.hf-wissen-cta--solo{background:#5939bd!important;color:#fff!important}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid #5939bd;outline-offset:3px}

.hf-empty-shop{text-align:center;margin:20px 0 40px}
.wp-block-woocommerce-empty-cart-block .wc-block-cart__empty-cart__title:before{display:none!important}
.hf-home-quickbuy{padding-top:20px;padding-bottom:36px}
.hf-qbm-list{display:none}
.hf-home-platforms .hf-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.hf-home-platforms .hf-card{padding:18px 12px;box-shadow:none}
.hf-home-platforms .hf-card p{display:none}
.hf-home-platforms .hf-card h3{font-size:16px;margin-bottom:0}
.hf-home-guides .hf-card{box-shadow:none;padding:16px}
.hf-home-guides .hf-cat-ico{display:none}
.hf-home-guides .hf-card h3{font-size:17px}
.home .hf-home-campaign-frame{min-height:460px}
.hf-archive-hero{box-shadow:none!important}
.hf-card,.hf-feat-card,.hf-cfg-card-premium{box-shadow:0 2px 8px #23134408}
@media(max-width:999px){
 .home .hf-home-campaign-media{display:none}
 .home .hf-home-campaign-frame{min-height:0;padding:26px 24px;background:#f6f4fb}
 .home .hf-home-campaign .hf-hero-text{max-width:none;padding:0}
 .home .hf-home-campaign .hf-hero-text h1{font-size:34px;line-height:1.15}
 .home .hf-home-campaign{padding:20px 0 8px}
 .home .hf-home-campaign .hf-chips{display:none}
 .hf-home-quickbuy .hf-quickbuy-module{gap:18px}
 .hf-home-quickbuy .hf-qbm-text h2{font-size:25px;margin:0 0 10px}
 .hf-home-quickbuy .hf-qbm-text p{font-size:14px;line-height:1.55;margin-bottom:0}
 .hf-home-quickbuy .hf-qbm-text .hf-pill{display:none}
 .hf-home-platforms .hf-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .hf-home-platforms .hf-cat-ico{width:32px;height:32px;margin-bottom:8px}
 .hf-home-guides .hf-grid{grid-template-columns:1fr;gap:8px}
 .hf-home-guides .hf-card p{margin-bottom:0;font-size:13px}
 body.single-product .hf-product-hero{padding:16px 0;border:0;background:none;box-shadow:none;margin-bottom:12px}
 body.single-product .hf-product-hero:after{display:none}
 body.single-product .hf-product-hero h1{font-size:29px;line-height:1.2;margin:8px 0 12px}
 body.single-product .hf-product-kicker{font-size:11px}
 body.single-product .hf-product-hero .hf-cfg-intro{font-size:14px;line-height:1.55;margin:0}
 body.single-product .hf-product-hero-tags{display:none}
 body.single-product .hf-cfg-card-premium{padding:20px 18px}
 body.single-product .hf-cfg-head{display:none}
 .hf-archive-hero .hf-archive-visual,.hf-services-campaign-media{display:none}
 .hf-archive-hero,.hf-archive-hero-all.hf-services-campaign{min-height:0!important;padding:24px!important;display:block}
 .hf-services-campaign-copy{padding:0!important}
 .hf-archive-tags{display:none}
}
@media(prefers-reduced-motion:reduce){.hf-reveal,.hf-card{opacity:1!important;transform:none!important;transition:none!important;animation:none!important}}
.hf-origin-fixed{font-weight:600;margin:0 0 12px}
.hf-pe-band-inner,.hf-pe-schluss-inner{padding:24px!important;max-width:1000px;min-height:0!important;box-shadow:none!important}
.hf-pe-band-media{max-width:none!important;min-width:0!important;padding:8px!important}
.hf-pe-band-media img{width:180px!important;height:auto!important;max-width:100%;object-fit:contain}
.hf-pe-band-copy h2{font-size:22px!important}
.hf-pe-band-copy p{font-size:14px!important}
.hf-pe-band{padding:18px 20px!important}
@media(max-width:640px){.hf-pe-band-inner,.hf-pe-schluss-inner,.hf-pe-produkt,.hf-pe-leiste{display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:18px!important;padding:18px!important}.hf-pe-band-media{justify-self:center}.hf-pe-band-copy{text-align:center!important}.hf-pe-band-copy h2{font-size:19px!important}.hf-pe-band-copy p{font-size:12px!important}.hf-pe-kicker{display:none}.hf-pe-band-copy .hf-pe-mehr{font-size:12px!important}}
#kontaktformular{scroll-margin-top:95px}
@media(max-width:999px){.hf-contact-hero{padding:20px;display:block;min-height:0}.hf-contact-visual{display:none}.hf-contact-hero h1{font-size:30px}.hf-contact-tags{gap:6px}.hf-contact-tags span{font-size:11px}}

body.single-product .hf-cfg-card-premium,body.single-product .hf-product-hero{background:#fff;box-shadow:none}
body.single-product .hf-cfg-card-premium:after,body.single-product .hf-product-hero:after{display:none}
body.single-product .hf-cfg-label{color:#494153}
body.single-product .hf-cfg-btn{background:#6142c8!important;color:#fff!important;box-shadow:none!important}
body.single-product .hf-cfg-btn:hover{background:#5031b0!important}
@media(min-width:1000px){body.single-product .hf-cfg-wrap{padding-top:38px}body.single-product .hf-product-hero h1{font-size:42px;line-height:1.15}}
/* Keep the floating launcher off product controls; an already opened chat stays usable. */
@media(max-width:999px){body.single-product.hf-kaufkarte-nah .alynivo__launcher[aria-expanded="false"]{visibility:hidden;pointer-events:none}}input[type="checkbox"].cmplz-category { width: initial; -webkit-appearance: checkbox;}input[type="checkbox"].cmplz-category:checked::before { content: '';}.cmplz-cookiebanner { box-sizing: border-box;}:root { --cmplz_banner_width: 526px; --cmplz_banner_background_color: #ffffff; --cmplz_banner_border_color: #f2f2f2; --cmplz_banner_border_width: 0px 0px 0px 0px ; --cmplz_banner_border_radius: 12px 12px 12px 12px; --cmplz_banner_margin: 10px; --cmplz_categories-height: 163px; --cmplz_title_font_size: 15px; --cmplz_text_line_height: calc(var(--cmplz_text_font_size) * 1.5); --cmplz_text_color: #222222; --cmplz_hyperlink_color: #704be8; --cmplz_text_font_size: 12px; --cmplz_link_font_size: 12px; --cmplz_category_body_font_size: 12px; --cmplz_button_accept_background_color: #704be8; --cmplz_button_accept_border_color: #9b82ff; --cmplz_button_accept_text_color: #ffffff; --cmplz_button_deny_background_color: #f9f9f9; --cmplz_button_deny_border_color: #f2f2f2; --cmplz_button_deny_text_color: #222222; --cmplz_button_settings_background_color: #f9f9f9; --cmplz_button_settings_border_color: #f2f2f2; --cmplz_button_settings_text_color: #333333; --cmplz_button_border_radius: 6px 6px 6px 6px; --cmplz_button_font_size: 15px; --cmplz_category_header_always_active_color: green; --cmplz_category_header_title_font_size: 14px; --cmplz_category_header_active_font_size: 12px; --cmplz-manage-consent-height: 50px; --cmplz-manage-consent-offset: -35px; --cmplz_slider_active_color: #704be8; --cmplz_slider_inactive_color: #555; --cmplz_slider_bullet_color: #ffffff;}body.cmplz-banner-active *:not(.cmplz-cookiebanner):not(.cmplz-cookiebanner *) { pointer-events: none !important; user-select: none !important;}.cmplz-cookiebanner * { pointer-events: auto !important; user-select: auto !important;}#cmplz-manage-consent .cmplz-manage-consent { margin: unset; z-index: 9998; color: var(--cmplz_text_color); background-color: var(--cmplz_banner_background_color); border-style: solid; border-color: var(--cmplz_banner_border_color); border-width: var(--cmplz_banner_border_width); border-radius: var(--cmplz_banner_border_radius); border-bottom-left-radius: 0; border-bottom-right-radius: 0; line-height: initial; position: fixed; bottom: var(--cmplz-manage-consent-offset); min-width: 100px; height: var(--cmplz-manage-consent-height); right: 40px; padding: 15px; cursor: pointer; animation: mc_slideOut 0.5s forwards;}#cmplz-manage-consent .cmplz-manage-consent:active { outline: none; border: none;}#cmplz-manage-consent .cmplz-manage-consent.cmplz-dismissed { display: none;}#cmplz-manage-consent .cmplz-manage-consent:hover,#cmplz-manage-consent .cmplz-manage-consent:focus { animation: mc_slideIn 0.5s forwards; animation-delay: 0;}@-webkit-keyframes mc_slideIn { 100% { bottom: 0; }}@keyframes mc_slideIn { 100% { bottom: 0; }}@-webkit-keyframes mc_slideOut { 100% { bottom: var(--cmplz-manage-consent-offset); }}@keyframes mc_slideOut { 100% { bottom: var(--cmplz-manage-consent-offset); }}@media (max-width: 425px) { .cmplz-cookiebanner .cmplz-header .cmplz-title { display: none; }}.cmplz-cookiebanner { max-height: calc(100vh - 20px); overflow-y: auto; position: fixed; height: auto; left: 50%; top: 50%; -ms-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); grid-template-rows: minmax(0, 1fr); z-index: 99999; background: var(--cmplz_banner_background_color);}.cmplz-cookiebanner a { transition: initial;}.cmplz-cookiebanner .cmplz-buttons a.cmplz-btn.tcf { display: none;}.cmplz-cookiebanner.cmplz-dismissed { display: none;}.cmplz-cookiebanner .cmplz-body { width: 100%; grid-column: span 3; overflow-y: auto; overflow-x: hidden; max-height: 55vh;}.cmplz-cookiebanner .cmplz-body::-webkit-scrollbar-track { border-radius: 10px; -webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0); background-color: transparent;}.cmplz-cookiebanner .cmplz-body::-webkit-scrollbar { width: 5px; background-color: transparent;}.cmplz-cookiebanner .cmplz-body::-webkit-scrollbar-thumb { background-color: var(--cmplz_button_accept_background_color); border-radius: 10px;}@media (min-width: 350px) { .cmplz-cookiebanner .cmplz-body { min-width: 300px; }}@media (max-height: 400px) { .cmplz-cookiebanner { height: calc(100vh - 20px); display: flex; flex-direction: column; overflow: hidden; gap: 1px; grid-row-gap: 1px; padding: 7px 12px !important; zoom: 0.6; } .cmplz-cookiebanner .cmplz-body { flex: 1; min-height: 0; overflow-y: auto; max-height: none; margin-top: 15px !important; } .cmplz-cookiebanner .cmplz-header, .cmplz-cookiebanner .cmplz-divider, .cmplz-cookiebanner .cmplz-links, .cmplz-cookiebanner .cmplz-buttons, .cmplz-cookiebanner .cmplz-documents { flex-shrink: 0; } .cmplz-cookiebanner .cmplz-header { margin-bottom: 15px !important; max-height: 10px; } .cmplz-close { zoom: 0.6 !important; } .cmplz-cookiebanner .cmplz-buttons { gap: 1px !important; } .cmplz-cookiebanner .cmplz-buttons .cmplz-btn { height: 15vh !important; min-height: unset !important; padding: 0 !important; white-space: nowrap !important; font-size: 1.1rem !important; line-height: 14px !important; zoom: 0.5 !important; } .cmplz-cookiebanner .cmplz-documents, .cmplz-cookiebanner .cmplz-information { zoom: 0.5 !important; }}@media (max-height: 400px) and (max-width: 768px) { .cmplz-cookiebanner { gap: 1px; }}.cmplz-cookiebanner { border-style: solid; border-color: var(--cmplz_banner_border_color); border-width: var(--cmplz_banner_border_width); border-radius: var(--cmplz_banner_border_radius); padding: 15px 20px; display: grid; grid-gap: 10px;}.cmplz-cookiebanner .cmplz-divider { margin-left: -20px; margin-right: -20px;}.cmplz-cookiebanner .cmplz-header { grid-template-columns: 100px 1fr 100px; align-items: center; display: grid; grid-column: span 3;}@media (max-width: 399px) { .cmplz-cookiebanner .cmplz-header { grid-template-columns: auto 1fr auto; }}.cmplz-cookiebanner .cmplz-logo svg { max-height: 35px; width: inherit;}.cmplz-cookiebanner .cmplz-logo img { max-height: 40px; width: inherit;}.cmplz-cookiebanner .cmplz-title { justify-self: center; grid-column-start: 2; font-size: var(--cmplz_title_font_size); color: var(--cmplz_text_color); font-weight: 500;}.cmplz-cookiebanner .cmplz-close { line-height: 20px; justify-self: end; grid-column-start: 3; font-size: 20px; cursor: pointer; width: 20px; height: 20px; color: var(--cmplz_text_color);}.cmplz-cookiebanner .cmplz-close svg { width: 20px; height: 20px;}.cmplz-cookiebanner .cmplz-close:hover { text-decoration: none; line-height: initial; font-size: 18px;}.cmplz-cookiebanner .cmplz-message { word-wrap: break-word; font-size: var(--cmplz_text_font_size); line-height: var(--cmplz_text_line_height); color: var(--cmplz_text_color); margin-bottom: 5px;}.cmplz-cookiebanner .cmplz-message a { color: var(--cmplz_hyperlink_color);}.cmplz-cookiebanner .cmplz-message,.cmplz-cookiebanner .cmplz-categories,.cmplz-cookiebanner .cmplz-links,.cmplz-cookiebanner .cmplz-buttons,.cmplz-cookiebanner .cmplz-divider { grid-column: span 3;}.cmplz-cookiebanner .cmplz-categories.cmplz-tcf .cmplz-category .cmplz-category-header { grid-template-columns: 1fr auto;}.cmplz-cookiebanner .cmplz-categories .cmplz-category { background-color: rgba(239, 239, 239, 0.5);}.cmplz-cookiebanner .cmplz-categories .cmplz-category:not(:last-child) { margin-bottom: 10px;}.cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-category-header { display: grid; grid-template-columns: 1fr auto 15px; grid-template-rows: minmax(0, 1fr); align-items: center; grid-gap: 10px; padding: 10px;}.cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-category-header .cmplz-category-title { font-weight: 500; grid-column-start: 1; justify-self: start; font-size: var(--cmplz_category_header_title_font_size); color: var(--cmplz_text_color); margin: 0;}.cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-category-header .cmplz-always-active { font-size: var(--cmplz_category_header_active_font_size); font-weight: 500; color: var(--cmplz_category_header_always_active_color);}.cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-category-header .cmplz-always-active label { display: none;}.cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-category-header .cmplz-banner-checkbox { display: flex; align-items: center; margin: 0;}.cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-category-header .cmplz-banner-checkbox input[data-category=cmplz_functional] { display: none;}.cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-category-header .cmplz-category-toggle { background: none; border: none; padding: 0; margin: 0; cursor: pointer; grid-column-start: 3; display: flex; align-items: center; justify-content: center; color: inherit;}.cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-category-header .cmplz-icon.cmplz-open { cursor: pointer; content: ''; transform: rotate(0deg); -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; background-size: cover; height: 18px; width: 18px;}.cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-description { font-size: var(--cmplz_category_body_font_size); color: var(--cmplz_text_color); margin: 0; max-width: 100%; padding: 10px;}@media (max-width: 425px) { .cmplz-cookiebanner .cmplz-category .cmplz-category-header { grid-template-columns: 1fr!important; }}@media (max-width: 425px) { .cmplz-cookiebanner .cmplz-message { margin-right: 5px; }}.cmplz-cookiebanner .cmplz-buttons { display: flex; gap: var(--cmplz_banner_margin);}.cmplz-cookiebanner .cmplz-buttons .cmplz-btn { min-height: 45px; padding: 10px; margin: initial; width: 100%; white-space: nowrap; border-radius: var(--cmplz_button_border_radius); cursor: pointer; font-size: var(--cmplz_button_font_size); font-weight: 500; text-decoration: none; line-height: 20px; text-align: center; flex: initial;}.cmplz-cookiebanner .cmplz-buttons .cmplz-btn:hover { text-decoration: none;}.cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-accept { background-color: var(--cmplz_button_accept_background_color); border: 1px solid var(--cmplz_button_accept_border_color); color: var(--cmplz_button_accept_text_color);}.cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-deny { background-color: var(--cmplz_button_deny_background_color); border: 1px solid var(--cmplz_button_deny_border_color); color: var(--cmplz_button_deny_text_color);}.cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-view-preferences { background-color: var(--cmplz_button_settings_background_color); border: 1px solid var(--cmplz_button_settings_border_color); color: var(--cmplz_button_settings_text_color);}.cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-save-preferences { background-color: var(--cmplz_button_settings_background_color); border: 1px solid var(--cmplz_button_settings_border_color); color: var(--cmplz_button_settings_text_color);}.cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-manage-options { background-color: var(--cmplz_button_settings_background_color); border: 1px solid var(--cmplz_button_settings_border_color); color: var(--cmplz_button_settings_text_color);}.cmplz-cookiebanner .cmplz-buttons a.cmplz-btn { display: flex; align-items: center; justify-content: center; padding: initial;}@media (max-width: 425px) { .cmplz-cookiebanner .cmplz-links.cmplz-information { display: initial; text-align: center; }}.cmplz-cookiebanner .cmplz-links { display: flex; gap: var(--cmplz_banner_margin);}.cmplz-cookiebanner .cmplz-links.cmplz-information { justify-content: space-between;}.cmplz-cookiebanner .cmplz-links.cmplz-documents { justify-content: center;}.cmplz-cookiebanner .cmplz-links .cmplz-link { color: var(--cmplz_hyperlink_color); font-size: var(--cmplz_link_font_size); text-decoration: underline; margin: 0;}.cmplz-cookiebanner .cmplz-links .cmplz-link.cmplz-read-more-purposes { display: none;}.cmplz-cookiebanner .cmplz-links ul { margin: 0; padding: 0; list-style: none; display: flex; gap: var(--cmplz_banner_margin); justify-content: center;}.cmplz-categories .cmplz-category .cmplz-description-statistics-anonymous { display: none;}.cmplz-categories .cmplz-category .cmplz-description-statistics { display: block;}.cmplz-categories .cmplz-category .cmplz-category-header .cmplz-category-toggle { background: none; border: none; padding: 0; margin: 0; cursor: pointer; grid-column-start: 3; display: flex; align-items: center; justify-content: center; color: inherit;}.cmplz-categories .cmplz-category .cmplz-category-toggle[aria-expanded="true"] .cmplz-icon.cmplz-open { transform: rotate(180deg);}.cmplz-cookiebanner { top: initial; left: initial; right: 10px; bottom: 10px; transform: initial;}@media (min-width: 768px) { .cmplz-cookiebanner { min-width: var(--cmplz_banner_width); max-width: 100%; display: grid; grid-row-gap: 10px; }}@media (max-width: 768px) { .cmplz-cookiebanner { left: initial; right: initial; bottom: 0; width: 100%; } .cmplz-cookiebanner .cmplz-buttons { flex-direction: column; }}@media (min-width: 768px) { .cmplz-message, .cmplz-categories { width: calc(var(--cmplz_banner_width) - 42px); }}.cmplz-cookiebanner .cmplz-categories,.cmplz-cookiebanner .cmplz-save-preferences,.cmplz-cookiebanner .cmplz-link.cmplz-manage-options,.cmplz-cookiebanner .cmplz-manage-vendors,.cmplz-cookiebanner .cmplz-read-more,.cmplz-cookiebanner .cmplz-btn.cmplz-manage-options { display: none;}.cmplz-cookiebanner .cmplz-categories.cmplz-fade-in { animation: fadeIn 1s; -webkit-animation: fadeIn 1s; -moz-animation: fadeIn 1s; -o-animation: fadeIn 1s; -ms-animation: fadeIn 1s; display: block;}@keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; }}@-moz-keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; }}@-webkit-keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; }}@-o-keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; }}@-ms-keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; }}.cmplz-cookiebanner .cmplz-links.cmplz-information { display: none;}.cmplz-cookiebanner .cmplz-marketing:not(.cmplz-tcf),.cmplz-manage-consent-container .cmplz-marketing:not(.cmplz-tcf) { display: none;}@media (max-width: 768px) { #cmplz-manage-consent .cmplz-manage-consent { display: none; }}.cmplz-logo { display: none !important;}.cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-banner-checkbox { position: relative;}.cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-banner-checkbox input.cmplz-consent-checkbox { opacity: 0; margin: 0; margin-top: -10px; cursor: pointer; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -moz-opacity: 0; -khtml-opacity: 0; position: absolute; z-index: 1; top: 0px; left: 0px; width: 40px; height: 20px;}.cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-banner-checkbox input.cmplz-consent-checkbox:focus + .cmplz-label:before { box-shadow: 0 0 0 2px #245fcc;}.cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-banner-checkbox input.cmplz-consent-checkbox:checked + .cmplz-label::before { display: block; background-color: var(--cmplz_slider_active_color); content: ""; padding-left: 6px;}.cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-banner-checkbox input.cmplz-consent-checkbox:checked + .cmplz-label:after { left: 14px;}.cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-banner-checkbox .cmplz-label { position: relative; padding-left: 30px; margin: 0;}.cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-banner-checkbox .cmplz-label:before,.cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-banner-checkbox .cmplz-label:after { box-sizing: border-box; position: absolute; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; transition: background-color 0.3s, left 0.3s;}.cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-banner-checkbox .cmplz-label:before { display: block; content: ""; color: #fff; box-sizing: border-box; font-family: 'FontAwesome', sans-serif; padding-left: 23px; font-size: 12px; line-height: 20px; background-color: var(--cmplz_slider_inactive_color); left: 0px; top: -7px; height: 15px; width: 28px; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;}.cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-banner-checkbox .cmplz-label:after { display: block; content: ""; letter-spacing: 20px; background: var(--cmplz_slider_bullet_color); left: 4px; top: -5px; height: 11px; width: 11px;}.cmplz-cookiebanner { box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;}#cmplz-manage-consent .cmplz-manage-consent { box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;}.cmplz-cookiebanner.cmplz-show { box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;}.cmplz-cookiebanner.cmplz-show:hover { transition-duration: 1s; box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px;}.cmplz-categories .cmplz-category .cmplz-description-statistics-anonymous { display: block;}.cmplz-categories .cmplz-category .cmplz-description-statistics { display: none;}