.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}}.alynivo {
	--alynivo-color: #7257ff;
	--alynivo-ink: #17151f;
	--alynivo-muted: #716d7d;
	--alynivo-line: #e9e6ef;
	--alynivo-soft: #f7f6fa;
	position: fixed;
	bottom: 22px;
	z-index: 999998;
	font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	font-size: 14px;
	line-height: 1.45;
	letter-spacing: 0;
}

/* Die Huelle gibt Klicks durch, ihre Kinder fangen sie wieder.
 *
 * ANLASS: Auf socialvantix.com war der Knopf „Auswahl ansehen" des
 * Cookie-Banners am Telefon an keiner Stelle erreichbar — links, Mitte und
 * rechts landete jeder Klick im Chat. Dem Besucher blieb nur alles annehmen
 * oder alles ablehnen; die abgestufte Einwilligung liess sich nicht oeffnen.
 *
 * URSACHE: Unter 480px setzt die Regel weiter unten `left` UND `right` auf
 * 12px. Fuer das Panel ist das richtig — es soll die volle Breite haben.
 * Dieselbe Huelle traegt aber auch den Launcher: Auf einem 390px breiten
 * Schirm reicht sie dann von 12 bis 378px, sichtbar sind davon nur die
 * rechten 54px. Die uebrigen 312px sind eine unsichtbare Klickfalle — und
 * bei z-index 999998 liegt sie ueber praktisch allem.
 *
 * Betroffen war nie nur das Cookie-Banner, sondern alles am unteren
 * Seitenrand: Zurueck-nach-oben-Knoepfe, Kaufleisten, Hinweisbalken.
 *
 * Bewusst hier und nicht in der 480px-Regel: Auch auf breiten Schirmen
 * kostet es nichts, und eine Regel, die nur unterhalb einer Breite gilt,
 * wird beim naechsten Umbau des Panels leicht uebersehen. */
.alynivo { pointer-events: none; }
.alynivo > * { pointer-events: auto; }

/* Bei geoeffnetem Chat faengt die Huelle wieder — und muss es auch.
 *
 * Der freie Streifen ueber dem Blatt ist ein ::before am Wurzelelement
 * (.alynivo.is-open::before). Ein Tippen darauf schliesst den Chat, und
 * genau dafuer muss das Wurzelelement Treffer annehmen. Ohne diese Zeile
 * reagierte der Streifen nicht mehr — ein bestehender Test hat das sofort
 * gemeldet.
 *
 * Ein Fanggebiet ist das nicht: Bei offenem Chat deckt das Blatt den Schirm
 * fast vollstaendig ab, und was daneben bleibt, ist der Streifen selbst. Die
 * unsichtbare Falle entstand nur im geschlossenen Zustand, wo ausser dem
 * kleinen Knopf nichts zu sehen war. */
.alynivo.is-open { pointer-events: auto; }

.alynivo--right { right: 22px; }
.alynivo--left { left: 22px; }
.alynivo *, .alynivo *::before, .alynivo *::after { box-sizing: border-box; }
.alynivo button, .alynivo input, .alynivo a { font: inherit; letter-spacing: 0; }

.alynivo__launcher {
	position: relative;
	display: grid;
	width: 60px;
	height: 60px;
	margin-left: auto;
	padding: 0;
	border: 0;
	border-radius: 15px;
	place-items: center;
	/* Ohne eigene Einstellung bleibt es bei Weiß — genau wie bisher. */
	background: var(--alynivo-launcher-bg, #fff);
	box-shadow: 0 15px 38px rgba(61, 44, 148, .3);
	color: #fff;
	cursor: pointer;
	transition: transform .2s ease, box-shadow .2s ease;
}

.alynivo__launcher:hover { transform: translateY(-2px); box-shadow: 0 18px 42px rgba(61, 44, 148, .36); }
.alynivo__launcher.is-open { transform: scale(.94); }
.alynivo__launcher-mark { display: block; width: 66%; height: 66%; overflow: hidden; border-radius: 10px; }
.alynivo__brand-mark { display: block; width: 100%; height: 100%; object-fit: contain; }

.alynivo__launcher--generic { background: var(--alynivo-launcher-bg, var(--alynivo-color)); }

/* Logo formatfüllend: Der Knopf und die Logokachel werden ein Körper. Ohne das
   sitzt ein Logo mit eigener Hintergrundfarbe als zweites, kleineres Quadrat im
   weißen Knopf — zwei verschachtelte Ecken, die wie ein Fehler aussehen. */
.alynivo__launcher--fill .alynivo__launcher-mark { width: 100%; height: 100%; border-radius: inherit; }
.alynivo__launcher--fill .alynivo__brand-mark { object-fit: cover; border-radius: inherit; }

/* Auf dunklem Grund trägt ein weicher violetter Schatten nicht — er verschwindet
   einfach. Dort grenzt eine dezente helle Kante den Knopf ab. Ob dunkel oder
   hell, entscheidet widget.js anhand der tatsächlichen Helligkeit der Farbe. */
.alynivo__launcher--dark {
	box-shadow: 0 0 0 1px rgba(255, 255, 255, .22), 0 12px 30px rgba(0, 0, 0, .45);
}
.alynivo__launcher--dark:hover {
	box-shadow: 0 0 0 1px rgba(255, 255, 255, .34), 0 10px 24px rgba(0, 0, 0, .5);
}
.alynivo__launcher:focus-visible { outline: 2px solid var(--alynivo-color); outline-offset: 3px; }
.alynivo__launcher--dark:focus-visible { outline-color: #fff; }
.alynivo__launcher-mark--generic { display: grid; width: 100%; height: 100%; place-items: center; }

/* Der Fokusrahmen muss sich vom Untergrund abheben — vorgeschrieben sind 3:1.
   Vorher stand hier `rgba(114, 87, 255, .3)`: 30 Prozent Deckkraft auf weiss
   ergibt rund 1,5:1, also die Haelfte. Wer mit der Tastatur bedient, sah kaum,
   wo er gerade steht. Deckend statt durchscheinend bringt dieselbe Farbe auf
   ueber 4:1, ohne dass sich das Aussehen sonst aendert. */
.alynivo__launcher:focus-visible,
.alynivo button:focus-visible,
.alynivo input:focus-visible,
.alynivo textarea:focus-visible,
.alynivo a:focus-visible { outline: 2px solid var(--alynivo-color); outline-offset: 2px; }

.alynivo__teaser {
	position: absolute;
	bottom: 70px;
	display: flex;
	align-items: center;
	gap: 8px;
	max-width: min(240px, calc(100vw - 48px));
	padding: 10px 10px 10px 14px;
	border-radius: 14px;
	background: #fff;
	color: var(--alynivo-ink);
	font-size: 13px;
	line-height: 1.35;
	box-shadow: 0 14px 32px rgba(23, 21, 31, .18);
	animation: alynivo-teaser-in .25s ease;
}

.alynivo--right .alynivo__teaser { right: 0; }
.alynivo--left .alynivo__teaser { left: 0; }

.alynivo__teaser span { cursor: pointer; }

.alynivo__teaser-close {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	border: 0;
	border-radius: 50%;
	background: var(--alynivo-soft);
	color: var(--alynivo-muted);
	font-size: 13px;
	line-height: 1;
	cursor: pointer;
	display: grid;
	place-items: center;
}

@keyframes alynivo-teaser-in {
	from { opacity: 0; transform: translateY(6px); }
	to { opacity: 1; transform: translateY(0); }
}

.alynivo__panel {
	position: absolute;
	right: 0;
	bottom: 72px;
	display: grid;
	/* Das Panel ist ein <section>. Themes, die alle Abschnitte einer Seite mit
	   Innenabstand versehen, treffen damit auch unser Chatfenster — auf
	   mavilab.de waren es 64px oben und unten, sichtbar als weißer Block über
	   der Kopfzeile. Der Wert gehört uns, nicht dem Theme. */
	margin: 0;
	padding: 0;
	width: min(410px, calc(100vw - 32px));
	height: min(720px, calc(100dvh - 96px));
	min-height: 470px;
	grid-template-rows: auto minmax(0, 1fr) auto auto;
	overflow: hidden;
	border: 1px solid rgba(34, 28, 48, .1);
	border-radius: 8px;
	background: #fff;
	box-shadow: 0 28px 80px rgba(25, 19, 43, .24);
	color: var(--alynivo-ink);
}

.alynivo--left .alynivo__panel { right: auto; left: 0; }
.alynivo__panel[hidden] { display: none; }

/* Der Ziehgriff. Auf dem Rechner gibt es nichts zu ziehen, dort bleibt er
   ausgeblendet; die Regel für Telefone steht in der 480px-Abfrage. */
.alynivo__grabber { display: none; }

.alynivo__header {
	display: flex;
	min-height: 74px;
	align-items: center;
	justify-content: space-between;
	padding: 13px 14px 13px 16px;
	border-bottom: 1px solid var(--alynivo-line);
	background: rgba(255, 255, 255, .97);
}

.alynivo__identity { display: flex; min-width: 0; align-items: center; gap: 11px; }
.alynivo__identity > div { display: flex; min-width: 0; flex-direction: column; }
.alynivo__identity strong { overflow: hidden; color: var(--alynivo-ink); font-size: 15px; font-weight: 720; text-overflow: ellipsis; white-space: nowrap; }
.alynivo__identity > div > span { display: flex; align-items: center; gap: 5px; color: var(--alynivo-muted); font-size: 11px; }
/* Green means a person is attending, and nothing else. Without Live Chat
   there is no person, so the dot carries the brand colour instead of
   borrowing the signal every other chat widget uses to fake presence. */
.alynivo__identity > div > span i { width: 7px; height: 7px; border-radius: 50%; background: var(--alynivo-color); }
.alynivo--live .alynivo__identity > div > span i { background: #9b96a3; }
.alynivo--live.is-live-connected .alynivo__identity > div > span i { background: #20b778; }

.alynivo__avatar,
.alynivo__mini-avatar {
	position: relative;
	display: grid;
	flex: 0 0 auto;
	place-items: center;
	background: transparent;
}

.alynivo__avatar { width: 42px; height: 42px; border-radius: 10px; box-shadow: 0 7px 18px rgba(114, 87, 255, .22); }
.alynivo__mini-avatar { width: 27px; height: 27px; border-radius: 7px; }

/* Zurückhaltend, nicht unsichtbar: kein grauer Kreis mehr, aber die
   Trefferfläche bleibt 36px, sonst trifft niemand mit dem Daumen. */
.alynivo__close {
	display: grid;
	width: 36px;
	height: 36px;
	border: 0;
	border-radius: 50%;
	place-items: center;
	background: transparent;
	color: #9b96a3;
	cursor: pointer;
	font-size: 20px;
	line-height: 1;
	transition: background .16s ease, color .16s ease;
}

.alynivo__close:hover,
.alynivo__close:focus-visible { background: #f4f2f7; color: var(--alynivo-ink); }

.alynivo__messages {
	overflow-x: hidden;
	overflow-y: auto;
	padding: 20px 16px 18px;
	background: var(--alynivo-soft);
	overscroll-behavior: contain;
	scroll-behavior: smooth;
}

.alynivo__message-row { display: flex; max-width: 90%; align-items: flex-end; gap: 8px; margin-bottom: 10px; }
.alynivo__message-row--user { margin-left: auto; justify-content: flex-end; }
/* white-space: pre-wrap, weil die Antworten der KI in Absaetzen gesetzt sind.
   Ohne die Regel fielen alle Zeilenumbrueche zu Leerzeichen zusammen, und eine
   Aufzaehlung von Zusagen stand als ein Fliesstext da - der Posteingang zeigte
   dieselbe Nachricht dagegen umgebrochen. */
.alynivo__bubble { padding: 10px 12px; border: 1px solid var(--alynivo-line); border-radius: 8px 8px 8px 2px; background: #fff; box-shadow: 0 3px 12px rgba(28, 23, 40, .04); color: var(--alynivo-ink); white-space: pre-wrap; overflow-wrap: anywhere; }
/* Die echte Domain steht neben dem Link, nicht darin: als Text im Link waere
   sie faelschbar. Eigene Farbe und Schriftgroesse machen sie unterscheidbar. */
.alynivo__link-real { color: #b4232c; font-size: .85em; font-weight: 700; white-space: nowrap; }
.alynivo__message-row--user .alynivo__bubble { border-color: var(--alynivo-color); border-radius: 8px 8px 2px 8px; background: var(--alynivo-color); box-shadow: 0 5px 15px rgba(114, 87, 255, .17); color: #fff; }

/* Überschrift des Fragenmenüs. Sitzt im Knopfblock statt in einer eigenen
   Sprechblase: als Sprechblase wäre sie eine Assistentenantwort, die nichts
   beantwortet — und würde als ungespiegelt gemeldet. */
.alynivo__quick-caption {
	width: 100%;
	margin: 0 0 6px;
	font-size: 12px;
	font-weight: 600;
	opacity: .75;
}

.alynivo__quick-replies { display: flex; align-items: stretch; flex-wrap: wrap; gap: 7px; margin: 4px 0 16px 35px; }
.alynivo__quick-replies--grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.alynivo__quick-reply { display: flex; min-height: 38px; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 11px; border: 1px solid rgba(114, 87, 255, .27); border-radius: 7px; background: #fff; color: var(--alynivo-color); cursor: pointer; font-size: 12px; font-weight: 670; text-align: left; transition: border-color .18s ease, background .18s ease, transform .18s ease; }
.alynivo__quick-reply:hover { border-color: var(--alynivo-color); background: #f2efff; transform: translateY(-1px); }
.alynivo__quick-reply small { display: grid; min-width: 23px; height: 23px; border-radius: 50%; place-items: center; background: #f1eefe; color: #7160d5; font-size: 10px; }
.alynivo__quick-replies.is-previous { margin-bottom: 8px; opacity: .48; }
.alynivo__quick-replies.is-previous button { cursor: default; transform: none; }

.alynivo__typing { display: flex; min-height: 38px; align-items: center; gap: 4px; }
.alynivo__typing i { width: 6px; height: 6px; border-radius: 50%; background: #a7a2ae; animation: alynivo-typing 1.1s infinite ease-in-out; }
.alynivo__typing i:nth-child(2) { animation-delay: .14s; }
.alynivo__typing i:nth-child(3) { animation-delay: .28s; }
.alynivo__typing span { margin-left: 6px; color: var(--alynivo-muted); font-size: 11px; }

.alynivo__product-list { display: grid; gap: 9px; margin: 3px 0 14px 35px; }
.alynivo__product { display: grid; grid-template-columns: 62px minmax(0, 1fr); gap: 11px; padding: 10px; border: 1px solid var(--alynivo-line); border-radius: 8px; background: #fff; box-shadow: 0 4px 15px rgba(28, 23, 40, .04); }
.alynivo__product img { width: 62px; height: 62px; border-radius: 6px; background: #f0eef4; object-fit: cover; }
.alynivo__product-copy { min-width: 0; }
.alynivo__product h3 { margin: 0 0 3px; overflow-wrap: anywhere; color: var(--alynivo-ink); font-size: 13px; font-weight: 700; line-height: 1.3; }
.alynivo__price { margin-bottom: 7px; color: #383440; font-size: 12px; font-weight: 720; }
.alynivo__actions { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.alynivo__actions a,
.alynivo__actions button { min-height: 30px; padding: 5px 8px; border: 1px solid rgba(114, 87, 255, .35); border-radius: 5px; background: #fff; color: var(--alynivo-color); cursor: pointer; font-size: 11px; font-weight: 680; text-decoration: none; }
.alynivo__actions button { border-color: var(--alynivo-color); background: var(--alynivo-color); color: #fff; }
.alynivo__actions button.is-added { border-color: #16845c; background: #16845c; }
.alynivo__actions button:disabled { cursor: wait; opacity: .7; }
.alynivo__cart-link { border: 0 !important; padding-inline: 2px !important; }

.alynivo__plan-list { display: grid; gap: 10px; margin: 3px 0 14px 35px; }
.alynivo__plan { padding: 13px; border: 1px solid var(--alynivo-line); border-radius: 8px; background: #fff; box-shadow: 0 4px 15px rgba(28, 23, 40, .04); }
.alynivo__plan h3 { margin: 0 0 10px; color: var(--alynivo-ink); font-size: 14px; font-weight: 740; }
.alynivo__plan ul { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.alynivo__plan li { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding-bottom: 8px; border-bottom: 1px solid var(--alynivo-line); font-size: 11px; }
.alynivo__plan li > span:first-child { display: grid; min-width: 0; }
.alynivo__plan li strong { overflow-wrap: anywhere; font-size: 11px; }
.alynivo__plan li small { color: var(--alynivo-muted); font-size: 10px; }
.alynivo__plan li > span:last-child { flex: 0 0 auto; font-weight: 700; }
.alynivo__plan-total { margin: 10px 0; color: var(--alynivo-ink); font-size: 16px; font-weight: 760; text-align: right; }
.alynivo__plan-choose { width: 100%; min-height: 36px; padding: 7px 10px; border: 0; border-radius: 6px; background: var(--alynivo-color); color: #fff; cursor: pointer; font-size: 12px; font-weight: 700; }
.alynivo__plan-choose:hover { filter: brightness(.95); }
.alynivo__messages > .alynivo__cart-link { display: block; margin: 4px 0 14px 35px; color: var(--alynivo-color); font-weight: 700; text-decoration: none; }

.alynivo__leave-fields {
	display: grid;
	gap: 8px;
	padding: 0 12px 8px;
	border-top: 1px solid var(--alynivo-line);
	background: #fff;
}
.alynivo__leave-fields[hidden] { display: none; }
.alynivo__leave-fields input {
	width: 100%;
	height: 38px;
	min-width: 0;
	padding: 0 12px;
	border: 1px solid #dedbe5;
	border-radius: 7px;
	background: #faf9fc;
	color: var(--alynivo-ink);
	font-size: 13px;
}
.alynivo__leave-fields input:focus {
	border-color: var(--alynivo-color);
	background: #fff;
	outline: 0;
	box-shadow: 0 0 0 3px rgba(114, 87, 255, .1);
}
.alynivo__composer { display: grid; grid-template-columns: minmax(0, 1fr) 42px; gap: 8px; padding: 11px 12px 8px; border-top: 1px solid var(--alynivo-line); background: #fff; }
.alynivo__composer--live { grid-template-columns: 42px minmax(0, 1fr) 42px; }
.alynivo__composer-hint {
	margin: 0;
	padding: 8px 14px 0;
	color: #6b6575;
	font-size: 12px;
	line-height: 1.4;
}
.alynivo__composer-hint[hidden] { display: none; }
.alynivo__composer input[name="message"] { width: 100%; height: 42px; min-width: 0; padding: 0 13px; border: 1px solid #dedbe5; border-radius: 7px; background: #faf9fc; color: var(--alynivo-ink); font-size: 13px; }
.alynivo__composer input[name="message"]::placeholder { color: #9893a2; }
/* `outline: 0` bleibt fuer den Mausklick richtig — der farbige Rand reicht
   dort. Beim Tastaturfokus muss der Rahmen aber stehen bleiben. */
.alynivo__composer input[name="message"]:focus { border-color: var(--alynivo-color); background: #fff; outline: 0; box-shadow: 0 0 0 3px rgba(114, 87, 255, .1); }
.alynivo__composer input[name="message"]:focus-visible { outline: 2px solid var(--alynivo-color); outline-offset: 2px; }
.alynivo__composer button[type="submit"] { display: grid; width: 42px; height: 42px; border: 0; border-radius: 7px; place-items: center; background: var(--alynivo-color); color: #fff; cursor: pointer; font-size: 20px; font-weight: 700; }
.alynivo__composer button[type="submit"]:hover { filter: brightness(.95); }
.alynivo__attach { display: grid; width: 42px; height: 42px; border: 1px solid #dedbe5; border-radius: 7px; place-items: center; background: #faf9fc; color: var(--alynivo-ink); cursor: pointer; font-size: 20px; font-weight: 600; line-height: 1; }
.alynivo__attach:hover:not(:disabled) { border-color: var(--alynivo-color); }
.alynivo__attach:disabled { opacity: .45; cursor: default; }
.alynivo__bubble--attachment { padding: 8px; }
.alynivo__attachment-image { display: block; max-width: min(220px, 70vw); max-height: 180px; border-radius: 6px; }
.alynivo__attachment-chip { color: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.alynivo__powered {
	padding: 0 12px 8px;
	background: #fff;
	color: #8a8592;
	font-size: 9px;
	line-height: 1.35;
	text-align: center;
	text-transform: uppercase;
}
.alynivo__powered--ai {
	padding-top: 7px;
	font-size: 10.5px;
	text-transform: none;
	border-top: 1px solid #f1eef4;
}
.alynivo__powered a {
	color: inherit;
	font-weight: 650;
	text-decoration: underline;
	text-underline-offset: 2px;
}
.alynivo__powered a:hover { color: var(--alynivo-color); }

@keyframes alynivo-typing {
	0%, 60%, 100% { transform: translateY(0); opacity: .45; }
	30% { transform: translateY(-3px); opacity: 1; }
}

/* Keep the desktop browser widget focused and compact. A 720px fixed panel
   leaves too much empty conversation space on tall screens and at higher
   browser zoom levels. The message area remains scrollable as threads grow.
   Phones keep their dedicated near-full-screen sheet below. */
@media (min-width: 481px) {
	.alynivo__panel {
		height: min(620px, calc(100dvh - 112px));
		min-height: 430px;
	}
}

@media (max-width: 480px) {
	.alynivo { right: 12px; bottom: 12px; left: 12px; }
	.alynivo--left { left: 12px; }
	/* Near-full-screen sheet on phones, with a visible gap at the top so the
	   page stays reachable behind it rather than a full takeover. The two
	   custom properties are only set by widget.js WHILE the composer input
	   is focused (keyboard open): they pin the panel to the Visual
	   Viewport's live top/height so the keyboard cannot expose the page
	   around the panel on iOS. At rest they are unset and the fallbacks
	   below (resting top gap, dvh height) apply. Android/Chrome resizes the
	   layout viewport natively via interactive-widget=resizes-content. */
	.alynivo__panel,
	.alynivo--left .alynivo__panel {
		position: fixed;
		right: 0;
		left: 0;
		top: var(--alynivo-vv-top, 104px);
		bottom: auto;
		width: auto;
		height: var(--alynivo-vv-height, calc(100dvh - 104px));
		min-height: 0;
		border-radius: 18px 18px 0 0;
		border-width: 1px 0 0;
		touch-action: none;
	}
	/* Folgt dem Daumen beim Herunterziehen. Ohne Übergang, solange gezogen
	   wird — sonst hinkt das Blatt dem Finger hinterher. */
	.alynivo__panel { transition: transform .22s ease; }
	.alynivo.is-dragging .alynivo__panel { transition: none; }

	/* Der Ziehgriff: die Geste, die jeder vom Handy kennt. Er ist auch die
	   Fläche, die den Zug entgegennimmt, deshalb ist er höher als der Strich
	   aussieht. */
	/* Der Griff ist ein zusätzliches Kind im Raster des Panels. Ohne eigene
	   Zeile rutschen alle folgenden Zeilen um eins weiter — die Kopfzeile
	   bekäme dann die große Zeile der Nachrichten und würde riesig. Genau das
	   ist beim ersten Aufspielen auf mavilab.de passiert. */
	.alynivo__panel { grid-template-rows: auto auto minmax(0, 1fr) auto auto; }
	.alynivo__grabber {
		display: block;
		flex: 0 0 auto;
		padding: 9px 0 3px;
		cursor: grab;
		touch-action: none;
	}
	.alynivo__grabber::after {
		content: '';
		display: block;
		width: 38px;
		height: 4px;
		margin: 0 auto;
		border-radius: 2px;
		background: #d8d4e0;
	}
	/* Die Kopfzeile zieht mit — der Griff allein ist ein schmales Ziel. */
	.alynivo__header { touch-action: none; }
	/* Nur die Nachrichten und die Eingabe scrollen wieder normal, sonst
	   ließe sich das Gespräch nicht mehr durchblättern. */
	.alynivo__messages,
	.alynivo__composer,
	.alynivo__leave-fields { touch-action: auto; }
	/* iOS freezes `position: fixed` boxes while the keyboard is open, so no
	   amount of repositioning can guarantee the panel covers every pixel the
	   keyboard scroll exposes. Instead, make what slips through harmless: a
	   neutral curtain three screens tall sits behind the panel while the
	   chat is open, so any exposed strip shows this backdrop — never the
	   page. Painted before the panel in tree order, so it stays behind it. */
	.alynivo.is-open::before {
		content: '';
		position: fixed;
		left: 0;
		right: 0;
		top: -100dvh;
		height: 300dvh;
		/* In Ruhe nur abgedunkelt: der Besucher sieht seine Seite hinter dem
		   Blatt liegen, statt vor einer grauen Wand zu stehen. Ein Tippen auf
		   den freien Streifen schließt den Chat (Behandlung in widget.js).
		   Sobald die Tastatur offen ist, wird daraus wieder eine deckende
		   Fläche — siehe .is-typing weiter unten. */
		background: rgba(26, 22, 36, .38);
		transition: background .2s ease;
	}
	/* Solange getippt wird, friert iOS `position: fixed` ein und legt Streifen
	   der Seite frei. Genau dann muss der Vorhang wieder decken, sonst springt
	   und zuckt sichtbarer Seiteninhalt neben dem Blatt. */
	.alynivo.is-open.is-typing::before { background: var(--alynivo-soft); }
	.alynivo__launcher { width: 54px; height: 54px; }
	.alynivo__messages { padding: 16px 12px; }
	/* iOS Safari auto-zooms the whole page when a focused input's font-size
	   is below 16px. That zoom makes the layout viewport wider than the
	   screen, so the right edge of the fixed panel — including the send
	   button — lands outside the visible area and everything looks shifted.
	   16px on phones prevents the zoom entirely. */
	.alynivo__composer input[name="message"],
	.alynivo__leave-fields input { font-size: 16px; }
	.alynivo__quick-replies,
	.alynivo__product-list,
	.alynivo__plan-list { margin-left: 34px; }
	.alynivo__quick-replies--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 350px) {
	.alynivo__quick-replies--grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
	.alynivo *, .alynivo *::before, .alynivo *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}

/* Enquiry form (free tier): shown inside the message list when the assistant
   cannot help. Deliberately plain — it inherits the panel's own spacing. */
.alynivo__lead {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 4px 0 8px;
	padding: 12px;
	border: 1px solid rgba(0, 0, 0, 0.08);
	border-radius: 12px;
	background: rgba(0, 0, 0, 0.02);
}

.alynivo__lead-intro {
	margin: 0;
	font-size: 13px;
	line-height: 1.45;
	opacity: 0.85;
}

.alynivo__lead input,
.alynivo__lead textarea {
	width: 100%;
	box-sizing: border-box;
	/* 16px keeps iOS Safari from zooming the page when the field is focused. */
	font: inherit;
	font-size: 16px;
	padding: 9px 10px;
	border: 1px solid rgba(0, 0, 0, 0.16);
	border-radius: 8px;
	background: #fff;
	color: inherit;
}

.alynivo__lead textarea {
	resize: vertical;
	min-height: 68px;
}

.alynivo__lead button[type="submit"] {
	align-self: flex-start;
	font: inherit;
	font-weight: 600;
	padding: 9px 16px;
	border: 0;
	border-radius: 8px;
	background: var(--alynivo-primary, #7257ff);
	color: #fff;
	cursor: pointer;
}

.alynivo__lead button[type="submit"][disabled] {
	opacity: 0.6;
	cursor: default;
}

/* Senden und Abbrechen nebeneinander. Ohne den zweiten Knopf war das Formular
   eine Sackgasse — der einzige Ausweg war, seine Kontaktdaten abzuschicken. */
.alynivo__lead-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}

.alynivo__lead-cancel {
	font: inherit;
	font-weight: 600;
	padding: 9px 14px;
	border: 1px solid var(--alynivo-line, #e7e4ea);
	border-radius: 8px;
	background: transparent;
	color: var(--alynivo-muted, #6f6878);
	cursor: pointer;
}

.alynivo__lead-cancel:hover {
	border-color: var(--alynivo-primary, #7257ff);
	color: var(--alynivo-primary, #7257ff);
}

.alynivo__lead-error {
	margin: 0;
	font-size: 13px;
	color: #b3261e;
}

/* ---- Motion polish -------------------------------------------------------
   Small, fast movements in the 200ms range: messages slide in, the panel
   scales up from the launcher corner, buttons lift on hover. The
   prefers-reduced-motion block above disables all of it. */
.alynivo__panel { animation: alynivo-panel-in .22s cubic-bezier(.21,.86,.38,1); transform-origin: bottom right; }
.alynivo--left .alynivo__panel { transform-origin: bottom left; }
.alynivo__message-row { animation: alynivo-message-in .22s ease both; }
.alynivo__quick-replies { animation: alynivo-message-in .25s ease both; }
.alynivo__quick-reply { transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
.alynivo__quick-reply:hover { transform: translateY(-1px); box-shadow: 0 3px 10px rgba(20, 15, 45, .10); }
.alynivo__launcher { transition: transform .18s ease, box-shadow .18s ease; }
.alynivo__launcher:hover { transform: scale(1.06); box-shadow: 0 10px 28px rgba(20, 15, 45, .28); }

@keyframes alynivo-panel-in {
	from { opacity: 0; transform: translateY(10px) scale(.97); }
	to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes alynivo-message-in {
	from { opacity: 0; transform: translateY(6px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* Links inside a message: readable on both the assistant's light bubble and
   the visitor's colored one, where the text is already white. */
.alynivo__link { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.alynivo__link:hover,
.alynivo__link:focus { text-decoration-thickness: 2px; }
.alynivo__message-row--assistant .alynivo__link { color: var(--alynivo-primary, #7257ff); }

/* Beschriftung über dem Feld. Der Platzhalter verschwindet beim ersten
   Zeichen; ohne Beschriftung weiß der Besucher dann nicht mehr, welches
   Feld welches ist. */
.alynivo__lead label.alynivo__lead-label { display: block; margin: 8px 0 3px; color: var(--alynivo-muted); font-size: 11.5px; font-weight: 600; }
.alynivo__lead label.alynivo__lead-label:first-of-type { margin-top: 4px; }
/*
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-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; }
.hf-nav .hf-mega-tile {
	position: relative; overflow: hidden;
	display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: 8px;
	aspect-ratio: 1 / 0.82;
	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 { width: 26px; height: 26px; 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 { font-size: 13px; font-weight: 700; line-height: 1.15; text-shadow: 0 1px 3px rgba(0,0,0,0.2); }

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

.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; }
.hf-plat-head { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.hf-plat-head h2 { font-size: 20px; margin: 0; text-align: left; }
.hf-svc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.hf-svc-row { display: flex; align-items: center; gap: 14px; padding: 16px 18px; background: var(--hf-bg-2); border: 1px solid var(--hf-line); border-radius: 14px; color: inherit; transition: border-color .15s ease, transform .12s ease; }
.hf-svc-row:hover { border-color: var(--hf-accent); transform: translateX(3px); color: inherit; }
.hf-svc-ico { width: 40px; height: 40px; 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-svc-ico svg { width: 22px; height: 22px; }
.hf-svc-info { flex: 1; min-width: 0; }
.hf-svc-info strong { display: block; color: var(--hf-ink); font-size: 15px; font-weight: 600; }
.hf-svc-info span { color: var(--hf-muted); font-size: 13px; }
.hf-svc-arrow { color: var(--hf-muted); font-size: 24px; line-height: 1; flex: none; }
.hf-svc-row:hover .hf-svc-arrow { color: var(--hf-accent); }

/* ================= 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, .hf-svc-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-hk-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-hk-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; }
.hf-pay-badge { display: inline-flex; border-radius: 6px; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,0.12); transition: transform 0.15s, box-shadow 0.15s; }
.hf-pay-badge:hover { transform: translateY(-1px); box-shadow: 0 3px 8px rgba(0,0,0,0.18); }
.hf-pay-badge svg { width: 52px; height: 33px; display: block; }
.hf-pay-methods { text-align: center; }
.hf-pay-lg { justify-content: center; gap: 12px; margin: 4px 0 18px; }
.hf-pay-lg .hf-pay-badge svg { width: 74px; height: 47px; }
.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,
.hf-svc-brand,
.hf-svc-ico {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	background: var(--hf-arch-grad, var(--hf-svc-grad));
	box-shadow: 0 10px 22px color-mix(in srgb, var(--hf-arch-solid, var(--hf-svc-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);
}
.hf-plat-head { margin-bottom: 18px; }
.hf-svc-brand { width: 52px; height: 52px; border-radius: 15px; background: var(--hf-svc-grad); }
.hf-svc-brand svg { width: 28px; height: 28px; }
.hf-plat-head h2 { font-size: 23px; }
.hf-plat-head p { margin: 3px 0 0; color: var(--hf-muted); font-size: 13px; }
.hf-svc-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.hf-svc-row {
	position: relative;
	flex-direction: column;
	align-items: stretch;
	gap: 0;
	padding: 18px;
	border-radius: 16px;
	background: var(--hf-bg-2);
	border: 1px solid var(--hf-line);
	box-shadow: 0 4px 14px rgba(20,18,28,0.04);
}
.hf-svc-row:hover {
	border-color: color-mix(in srgb, var(--hf-svc-solid) 42%, var(--hf-line));
	transform: translateY(-3px);
	box-shadow: 0 14px 30px color-mix(in srgb, var(--hf-svc-solid) 12%, transparent);
}
.hf-svc-info { flex: 1; }
.hf-svc-head { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.hf-svc-ico {
	width: 40px;
	height: 40px;
	border-radius: 12px;
	background: var(--hf-svc-grad);
	border: 0;
	flex: none;
}
.hf-svc-ico svg { width: 21px; height: 21px; filter: drop-shadow(0 2px 5px rgba(0,0,0,.22)); }
.hf-svc-info strong { display: block; font-size: 16px; font-weight: 750; line-height: 1.3; }
.hf-svc-tier {
	display: inline-flex;
	align-items: center;
	font-size: 10.5px;
	font-weight: 800;
	letter-spacing: .04em;
	text-transform: uppercase;
	padding: 4px 10px;
	border-radius: 20px;
	background: var(--hf-bg-3);
	color: var(--hf-muted);
	flex: none;
	margin-left: auto;
}
.hf-svc-tier-premium {
	background: color-mix(in srgb, var(--hf-svc-solid) 14%, transparent);
	color: color-mix(in srgb, var(--hf-svc-solid) 65%, var(--hf-ink));
}

/* Accessible contrast for third-party controls that ship inline brand colors. */
.cmplz-btn.cmplz-accept,
input.mailpoet_submit {
	background-color: #7552F6 !important;
}
.hf-svc-flag {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 17px;
	line-height: 1;
	flex: none;
}
.hf-svc-info span { display: block; color: color-mix(in srgb, var(--hf-svc-solid) 80%, var(--hf-ink)); font-size: 19px; font-weight: 850; margin-top: 10px; letter-spacing: -.01em; }
.hf-svc-info em { display: block; color: var(--hf-muted); font-style: normal; font-size: 12px; margin-top: 6px; }
.hf-svc-cta {
	display: block;
	text-align: center;
	color: #fff;
	background: var(--hf-svc-grad);
	border-radius: 10px;
	padding: 10px 12px;
	margin-top: 16px;
	font-size: 13px;
	font-weight: 800;
	box-shadow: 0 9px 18px color-mix(in srgb, var(--hf-svc-solid) 16%, transparent);
}
.hf-svc-section { margin-top: 20px; }
.hf-svc-section:first-of-type { margin-top: 4px; }
.hf-svc-section-title {
	margin: 0 0 10px;
	text-align: center;
	font-size: 16px;
	font-weight: 850;
	color: var(--hf-ink);
}
.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; }
	.hf-svc-grid { grid-template-columns: 1fr; }
}
@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;
}
/* .hf-product-next / .hf-next-* wurden am 23.08.2026 hierher entfernt.
   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. Der Block hat jetzt
   genau EINE Quelle: das Inline-<style> im Template. */
.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; }
.woocommerce-cart .wc-block-cart-items__row .wc-block-cart-item__image,
.woocommerce-cart .wc-block-cart-items__row .wc-block-components-product-image,
.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;
}
.hf-cart-recos {
	max-width: 1140px;
	margin: 34px auto 0;
	padding: 26px;
	border-radius: 22px;
	border: 1px solid var(--hf-line);
	background: linear-gradient(135deg, rgba(255,255,255,0.98), rgba(246,242,255,0.86));
	box-shadow: 0 12px 34px rgba(20,18,28,0.06);
}
.hf-cart-recos-head { margin-bottom: 18px; }
.hf-cart-recos-head h2 { text-align: left; margin: 12px 0 8px; }
.hf-cart-recos-head p { margin: 0; color: var(--hf-muted); }
.hf-cart-reco-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 12px;
}
.hf-cart-reco {
	display: grid;
	gap: 8px;
	min-height: 142px;
	padding: 16px;
	border-radius: 18px;
	background: #fff;
	border: 1px solid var(--hf-line);
	color: inherit;
	box-shadow: 0 8px 22px rgba(20,18,28,0.045);
}
.hf-cart-reco:hover {
	color: inherit;
	transform: translateY(-2px);
	border-color: color-mix(in srgb, var(--hf-prod-solid) 36%, var(--hf-line));
}
.hf-cart-reco span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 13px;
	color: #fff;
	background: var(--hf-prod-grad);
}
.hf-cart-reco svg { width: 21px; height: 21px; }
.hf-cart-reco strong { color: var(--hf-ink); font-size: 14px; line-height: 1.35; }
.hf-cart-reco em { color: color-mix(in srgb, var(--hf-prod-solid) 72%, var(--hf-ink)); font-style: normal; font-size: 13px; font-weight: 800; }
@media (max-width: 860px) {
	.hf-cart-modern { grid-template-columns: 1fr; }
	.hf-cart-summary { position: static; }
	.hf-cart-reco-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@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; }
	.hf-cart-recos { padding: 20px; }
	.hf-cart-reco-grid { grid-template-columns: 1fr; }
	.hf-cart-reco { min-height: auto; }
}

/* ---- 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__name { color: var(--hf-muted); font-weight: 500; }
.wc-block-components-product-details__value { color: var(--hf-ink); font-weight: 700; }
/* 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;
}
.woocommerce-cart .wc-block-cart-item__wrap { padding-left: 58px; }
.woocommerce-cart .wc-block-cart-item__wrap::before {
	content: "✓";
	position: absolute;
	left: 22px;
	top: 24px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border-radius: 13px;
	background: var(--hf-accent-grad);
	color: #fff;
	font-size: 18px;
	font-weight: 900;
	box-shadow: 0 10px 20px rgba(124,87,255,0.18);
}
.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;
}
.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: 22px;
	top: 24px;
	z-index: 2;
	display: flex !important;
	align-items: center;
	justify-content: center;
	width: 42px !important;
	height: 42px !important;
	border-radius: 13px;
	background: linear-gradient(135deg,#7C5CFF 0%,#8B5CF6 54%,#B84CFF 100%) !important;
	box-shadow: 0 10px 20px rgba(124,87,255,0.18);
	overflow: hidden;
}
.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: none !important;
}
.woocommerce-cart .wc-block-cart-items__row .wc-block-cart-item__image::before,
.woocommerce-cart .wc-block-cart-items__row .wc-block-components-product-image::before {
	content: "✓";
	color: #fff;
	font-size: 19px;
	font-weight: 900;
	line-height: 1;
}
.woocommerce-cart .wc-block-cart-items__row:has(a[href*="instagram"]) .wc-block-cart-item__image,
.woocommerce-cart .wc-block-cart-items__row:has(a[href*="instagram"]) .wc-block-components-product-image {
	background: linear-gradient(135deg,#FFB86B 0%,#F2337B 52%,#8B5CF6 100%) !important;
}
.woocommerce-cart .wc-block-cart-items__row:has(a[href*="instagram"]) .wc-block-cart-item__image::before,
.woocommerce-cart .wc-block-cart-items__row:has(a[href*="instagram"]) .wc-block-components-product-image::before { content: "◎"; }
.woocommerce-cart .wc-block-cart-items__row:has(a[href*="tiktok"]) .wc-block-cart-item__image,
.woocommerce-cart .wc-block-cart-items__row:has(a[href*="tiktok"]) .wc-block-components-product-image { background: linear-gradient(135deg,#25F4EE 0%,#111 54%,#FE2C55 100%) !important; }
.woocommerce-cart .wc-block-cart-items__row:has(a[href*="tiktok"]) .wc-block-cart-item__image::before,
.woocommerce-cart .wc-block-cart-items__row:has(a[href*="tiktok"]) .wc-block-components-product-image::before { content: "♪"; }
.woocommerce-cart .wc-block-cart-items__row:has(a[href*="youtube"]) .wc-block-cart-item__image,
.woocommerce-cart .wc-block-cart-items__row:has(a[href*="youtube"]) .wc-block-components-product-image { background: linear-gradient(135deg,#FF5147 0%,#FF0000 100%) !important; }
.woocommerce-cart .wc-block-cart-items__row:has(a[href*="youtube"]) .wc-block-cart-item__image::before,
.woocommerce-cart .wc-block-cart-items__row:has(a[href*="youtube"]) .wc-block-components-product-image::before { content: "▶"; font-size: 17px; }
.woocommerce-cart .wc-block-cart-items__row:has(a[href*="twitch"]) .wc-block-cart-item__image,
.woocommerce-cart .wc-block-cart-items__row:has(a[href*="twitch"]) .wc-block-components-product-image { background: linear-gradient(135deg,#9146FF 0%,#5f35d8 100%) !important; }
.woocommerce-cart .wc-block-cart-items__row:has(a[href*="twitch"]) .wc-block-cart-item__image::before,
.woocommerce-cart .wc-block-cart-items__row:has(a[href*="twitch"]) .wc-block-components-product-image::before { content: "▣"; }
.woocommerce-cart .wc-block-cart-items__row:has(a[href*="facebook"]) .wc-block-cart-item__image,
.woocommerce-cart .wc-block-cart-items__row:has(a[href*="facebook"]) .wc-block-components-product-image { background: linear-gradient(135deg,#1877F2 0%,#0a3f8a 100%) !important; }
.woocommerce-cart .wc-block-cart-items__row:has(a[href*="facebook"]) .wc-block-cart-item__image::before,
.woocommerce-cart .wc-block-cart-items__row:has(a[href*="facebook"]) .wc-block-components-product-image::before { content: "f"; font-family: Arial, sans-serif; font-size: 23px; }
.woocommerce-cart .wc-block-cart-items__row:has(a[href*="spotify"]) .wc-block-cart-item__image,
.woocommerce-cart .wc-block-cart-items__row:has(a[href*="spotify"]) .wc-block-components-product-image { background: linear-gradient(135deg,#1DB954 0%,#0c6b30 100%) !important; }
.woocommerce-cart .wc-block-cart-items__row:has(a[href*="spotify"]) .wc-block-cart-item__image::before,
.woocommerce-cart .wc-block-cart-items__row:has(a[href*="spotify"]) .wc-block-components-product-image::before { content: "♪"; }
.woocommerce-cart .wc-block-cart-item__wrap::before {
	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: 54px 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-cart-item__wrap::before {
			left: 18px;
			top: 20px;
		}
		.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;
		}
	}

.woocommerce-cart .wc-block-cart-items__row:has(a[href*="instagram"]) .wc-block-cart-item__image,
.woocommerce-cart .wc-block-cart-items__row:has(a[href*="instagram"]) .wc-block-components-product-image {
	background: linear-gradient(135deg,#FFB86B 0%,#F2337B 52%,#8B5CF6 100%) !important;
}
.woocommerce-cart .wc-block-cart-items__row:has(a[href*="instagram"]) .wc-block-cart-item__image::before,
.woocommerce-cart .wc-block-cart-items__row:has(a[href*="instagram"]) .wc-block-components-product-image::before { content: "◎" !important; }
.woocommerce-cart .wc-block-cart-items__row:has(a[href*="tiktok"]) .wc-block-cart-item__image,
.woocommerce-cart .wc-block-cart-items__row:has(a[href*="tiktok"]) .wc-block-components-product-image {
	background: linear-gradient(135deg,#25F4EE 0%,#111 54%,#FE2C55 100%) !important;
}
.woocommerce-cart .wc-block-cart-items__row:has(a[href*="tiktok"]) .wc-block-cart-item__image::before,
.woocommerce-cart .wc-block-cart-items__row:has(a[href*="tiktok"]) .wc-block-components-product-image::before { content: "♪" !important; }
.woocommerce-cart .wc-block-cart-items__row:has(a[href*="youtube"]) .wc-block-cart-item__image,
.woocommerce-cart .wc-block-cart-items__row:has(a[href*="youtube"]) .wc-block-components-product-image {
	background: linear-gradient(135deg,#FF5147 0%,#FF0000 100%) !important;
}
.woocommerce-cart .wc-block-cart-items__row:has(a[href*="youtube"]) .wc-block-cart-item__image::before,
.woocommerce-cart .wc-block-cart-items__row:has(a[href*="youtube"]) .wc-block-components-product-image::before { content: "▶" !important; font-size: 17px; }
.woocommerce-cart .wc-block-cart-items__row:has(a[href*="twitch"]) .wc-block-cart-item__image,
.woocommerce-cart .wc-block-cart-items__row:has(a[href*="twitch"]) .wc-block-components-product-image {
	background: linear-gradient(135deg,#9146FF 0%,#5f35d8 100%) !important;
}
.woocommerce-cart .wc-block-cart-items__row:has(a[href*="twitch"]) .wc-block-cart-item__image::before,
.woocommerce-cart .wc-block-cart-items__row:has(a[href*="twitch"]) .wc-block-components-product-image::before { content: "▣" !important; }
.woocommerce-cart .wc-block-cart-items__row:has(a[href*="facebook"]) .wc-block-cart-item__image,
.woocommerce-cart .wc-block-cart-items__row:has(a[href*="facebook"]) .wc-block-components-product-image {
	background: linear-gradient(135deg,#1877F2 0%,#0a3f8a 100%) !important;
}
.woocommerce-cart .wc-block-cart-items__row:has(a[href*="facebook"]) .wc-block-cart-item__image::before,
.woocommerce-cart .wc-block-cart-items__row:has(a[href*="facebook"]) .wc-block-components-product-image::before { content: "f" !important; font-family: Arial, sans-serif; font-size: 23px; }
.woocommerce-cart .wc-block-cart-items__row:has(a[href*="spotify"]) .wc-block-cart-item__image,
.woocommerce-cart .wc-block-cart-items__row:has(a[href*="spotify"]) .wc-block-components-product-image {
	background: linear-gradient(135deg,#1DB954 0%,#0c6b30 100%) !important;
}
.woocommerce-cart .wc-block-cart-items__row:has(a[href*="spotify"]) .wc-block-cart-item__image::before,
.woocommerce-cart .wc-block-cart-items__row:has(a[href*="spotify"]) .wc-block-components-product-image::before { content: "♪" !important; }

.woocommerce-checkout .wc-block-components-order-summary-item__image {
	position: relative;
	display: flex !important;
	align-items: center;
	justify-content: center;
	width: 42px !important;
	height: 42px !important;
	min-width: 42px !important;
	border-radius: 13px;
	background: linear-gradient(135deg,#7C5CFF 0%,#8B5CF6 54%,#B84CFF 100%) !important;
	box-shadow: 0 10px 20px rgba(124,87,255,0.18);
	overflow: visible;
}
.woocommerce-checkout .wc-block-components-order-summary-item__image img {
	display: none !important;
}
.woocommerce-checkout .wc-block-components-order-summary-item__image::before {
	content: "✓";
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	color: #fff;
	font-size: 19px;
	font-weight: 900;
	line-height: 1;
}
.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;
}
.woocommerce-checkout .hf-checkout-instagram .wc-block-components-order-summary-item__image {
	background: linear-gradient(135deg,#FFB86B 0%,#F2337B 52%,#8B5CF6 100%) !important;
}
.woocommerce-checkout .hf-checkout-instagram .wc-block-components-order-summary-item__image::before { content: "◎"; }
.woocommerce-checkout .hf-checkout-tiktok .wc-block-components-order-summary-item__image {
	background: linear-gradient(135deg,#25F4EE 0%,#111 54%,#FE2C55 100%) !important;
}
.woocommerce-checkout .hf-checkout-tiktok .wc-block-components-order-summary-item__image::before { content: "♪"; }
.woocommerce-checkout .hf-checkout-youtube .wc-block-components-order-summary-item__image {
	background: linear-gradient(135deg,#FF5147 0%,#FF0000 100%) !important;
}
.woocommerce-checkout .hf-checkout-youtube .wc-block-components-order-summary-item__image::before { content: "▶"; font-size: 17px; }
.woocommerce-checkout .hf-checkout-twitch .wc-block-components-order-summary-item__image {
	background: linear-gradient(135deg,#9146FF 0%,#5f35d8 100%) !important;
}
.woocommerce-checkout .hf-checkout-twitch .wc-block-components-order-summary-item__image::before { content: "▣"; }
.woocommerce-checkout .hf-checkout-facebook .wc-block-components-order-summary-item__image {
	background: linear-gradient(135deg,#1877F2 0%,#0a3f8a 100%) !important;
}
.woocommerce-checkout .hf-checkout-facebook .wc-block-components-order-summary-item__image::before {
	content: "f";
	font-family: Arial, sans-serif;
	font-size: 23px;
}
.woocommerce-checkout .hf-checkout-spotify .wc-block-components-order-summary-item__image {
	background: linear-gradient(135deg,#1DB954 0%,#0c6b30 100%) !important;
}
.woocommerce-checkout .hf-checkout-spotify .wc-block-components-order-summary-item__image::before { content: "♪"; }

@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-svc-info .woocommerce-Price-amount,
.hf-svc-info .woocommerce-Price-currencySymbol,
.hf-cart-reco em .woocommerce-Price-amount,
.hf-cart-reco em .woocommerce-Price-currencySymbol,
.hf-pc-price .woocommerce-Price-amount,
.hf-pc-price .woocommerce-Price-currencySymbol {
	display: inline;
	width: auto;
	min-width: 0;
	margin: 0;
	padding: 0;
	font-size: inherit;
	font-weight: inherit;
	color: inherit;
}
.hf-svc-info .woocommerce-Price-amount bdi,
.hf-cart-reco em .woocommerce-Price-amount bdi,
.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-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;
}

.hf-trust-page .hf-contact-hero {
	grid-template-columns: minmax(0, 1fr) minmax(360px, 46%);
}
.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.          */

.hf-svc-section { margin-top: 34px; }
.hf-svc-section:first-of-type { margin-top: 8px; }

/* Abschnittsueberschrift: Akzentbalken links, Trennlinie rechts daneben.
   Vorher war es eine schlichte Zeile, die zwischen den Kacheln unterging. */
.hf-svc-section-title {
	display: flex; align-items: center; gap: 12px;
	margin: 0 0 16px; padding: 0;
	font-size: 15px; font-weight: 700; letter-spacing: .01em;
	color: var(--hf-ink); text-transform: none;
}
.hf-svc-section-title::before {
	content: ""; flex: 0 0 auto;
	width: 4px; height: 18px; border-radius: 3px;
	background: var(--hf-svc-grad, var(--hf-accent-grad));
}
.hf-svc-section-title::after {
	content: ""; flex: 1 1 auto; height: 1px;
	background: var(--hf-line);
}

/* Herkunftshinweis in der Kachel */
.hf-svc-laender {
	display: flex; align-items: center; gap: 8px;
	margin: 4px 0 2px; flex-wrap: wrap;
}
.hf-svc-laender-flaggen { font-size: 14px; line-height: 1; letter-spacing: 1px; }
.hf-svc-laender-text {
	font-size: 11.5px; font-weight: 600; color: var(--hf-accent);
	background: var(--hf-accent-soft); border-radius: 20px; padding: 2px 9px;
	white-space: nowrap;
}
@media (max-width: 560px) {
	.hf-svc-laender-flaggen { font-size: 13px; }
	.hf-svc-laender-text { font-size: 11px; }
}



/* 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}
.hf-pe-band-inner{max-width:1140px;margin:0 auto;display:flex;align-items:center;gap:44px}

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

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

/* ---- Preise in den Empfehlungskacheln waren nicht zu lesen (05.09.2026) ----

   Gemessen in derselben Kachel: der Titel steht mit Kontrast 18,5 zu 1 auf
   Weiss, der Preis darunter nur mit 5,78 zu 1 — und eine Stufe kleiner.
   Formal besteht das die AA-Schwelle, im Alltag verschwindet die Zahl neben
   dem schwarzen Titel. Der Preis ist aber das, wonach der Besucher sucht.

   50 % statt 72 % Markenfarbe heben den Kontrast auf 8,64 zu 1, der Farbton
   bleibt erkennbar dieselbe Marke. Dazu 14 px statt 13 px, also gleiche
   Groesse wie der Titel. */

.hf-cart-reco {
	padding: 18px;
}
.hf-cart-reco em {
	color: color-mix(in srgb, var(--hf-prod-solid) 50%, var(--hf-ink));
	font-size: 14px;
}

/* ---- 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;
	}
}
/*
 * 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;
}
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: 110px; --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-preferences,.cmplz-manage-consent-container .cmplz-preferences { 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;}