/* ============================================================
   Hausundtier – Komponenten („Sticker & Sonne")
   Alle Klassen mit ht--Präfix; nutzbar in Patterns, Blöcken
   und später in den ACF-Blöcken der Plugins.
   ============================================================ */

/* ---------- Chips ---------- */
.ht-chip,
.ht-chip-row a {
	display: inline-block;
	background: var(--ht-yellow);
	border: var(--ht-border);
	color: var(--ht-ink);
	font-size: 12px;
	font-weight: 700;
	padding: 3px 14px;
	border-radius: 999px;
	transform: rotate(-1.5deg);
	text-decoration: none;
}
.ht-chip-blue { background: var(--ht-blue); transform: rotate(1deg); }
.ht-chip-orange { background: var(--ht-orange); color: #fff; transform: rotate(-1deg); }
.ht-chip-plain { background: var(--ht-white); transform: none; }

/* ---------- Buttons (Varianten zum Core-Button) ---------- */
.ht-btn-orange .wp-block-button__link { background: var(--ht-orange); color: #fff; }
.ht-btn-blue .wp-block-button__link { background: var(--ht-blue); color: var(--ht-ink); }
.ht-btn-white .wp-block-button__link { background: var(--ht-white); color: var(--ht-ink); }
.wp-block-button__link:hover { transform: translate(1px, 1px); box-shadow: var(--ht-hard-sm); }

/* ---------- Bild-Kacheln ---------- */
.ht-tile-img {
	border: var(--ht-border);
	border-radius: var(--ht-radius);
	position: relative;
	overflow: hidden;
}
.ht-tile-img::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--ht-grid-paper);
	background-size: 26px 26px;
	pointer-events: none;
}
.ht-tile-orange { background: var(--ht-orange); }
.ht-tile-yellow { background: var(--ht-yellow); }
.ht-tile-blue { background: var(--ht-blue); }

/* ---------- Widgets / Sidebar ---------- */
.ht-widget {
	background: var(--ht-white);
	border: var(--ht-border);
	border-radius: var(--ht-radius);
	box-shadow: var(--ht-hard);
	padding: 22px 24px;
}
/* Widget-Kopf: semantisch neutraler <p>/<span>, optisch wie H3
 * (kein Heading – gehört nicht in die Dokument-Hierarchie). */
.ht-widget-head {
	font-family: var(--wp--preset--font-family--display);
	font-size: 17px !important;
	line-height: 1.25;
	letter-spacing: 0.02em;
	color: var(--ht-ink);
	margin: 0 0 10px !important;
}
.ht-widget.ht-panel-yellow { background: var(--ht-yellow); }

/* ToC-Liste (JS-generiert) */
.ht-toc-list { list-style: none; margin: 0; padding: 0; counter-reset: httoc; }
.ht-toc-list li { counter-increment: httoc; padding: 7px 0; font-size: 14px; font-weight: 500; }
.ht-toc-list li::before {
	content: counter(httoc);
	display: inline-block;
	background: var(--ht-yellow);
	border: 1.5px solid var(--ht-ink);
	font-weight: 800;
	border-radius: 8px;
	padding: 0 7px;
	margin-right: 10px;
	font-size: 12px;
	transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease;
}
.ht-toc-list a { text-decoration: none; color: var(--ht-ink); transition: opacity 0.2s ease; }
/* Scroll-Spy: aktueller Abschnitt (Klasse via JS) */
.ht-toc-list li { opacity: 0.75; transition: opacity 0.2s ease; }
.ht-toc-list li.aktiv { opacity: 1; }
.ht-toc-list li.aktiv::before {
	background: var(--ht-orange);
	color: #fff;
	transform: rotate(-6deg) scale(1.12);
}
.ht-toc-list li.aktiv a { font-weight: 800; border-bottom: 2px solid var(--ht-orange); }

/* ---------- Anzeigen-Platzhalter ---------- */
.ht-ad {
	background: var(--ht-white);
	border: 2px dashed var(--ht-ink-soft);
	border-radius: var(--ht-radius-sm);
	color: var(--ht-ink-soft);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 250px;
}
.ht-ad-banner { min-height: 120px; }
/* Gefüllter Slot: echter Ad-Code statt Platzhalter-Optik */
.ht-ad-gefuellt {
	border: none;
	background: none;
	min-height: 0;
	text-transform: none;
	letter-spacing: 0;
	display: block;
}

/* ---------- Info-/Panel-Boxen ---------- */
.ht-panel {
	border: var(--ht-border);
	border-radius: var(--ht-radius);
	box-shadow: var(--ht-hard);
	padding: 20px 26px;
	margin: 20px 0;
}
.ht-panel > h4, .ht-panel > h3 { font-size: 15px !important; margin: 0 0 8px; }
.ht-panel-yellow { background: var(--ht-yellow); }
.ht-panel-orange { background: var(--ht-orange-soft); }
.ht-panel-blue { background: var(--ht-blue-soft); }
.ht-panel-green { background: var(--ht-green-soft); }
.ht-panel-red { background: var(--ht-red-soft); }
.ht-panel-white { background: var(--ht-white); }

/* „Das Wichtigste in Kürze" */
.ht-infobox {
	background: var(--ht-yellow);
	border: var(--ht-border);
	border-radius: var(--ht-radius);
	box-shadow: var(--ht-hard);
	padding: 22px 28px;
	margin: 26px 0;
}
.ht-infobox ul { list-style: none; margin: 0; padding: 0; }
.ht-infobox li { padding: 5px 0 5px 28px; position: relative; }
.ht-infobox li::before { content: "★"; position: absolute; left: 0; }

/* ---------- Zitate ---------- */
.ht-quote {
	background: var(--ht-white);
	border: var(--ht-border);
	border-radius: var(--ht-radius);
	box-shadow: var(--ht-hard);
	padding: 26px 32px 22px 76px;
	margin: 24px 0;
	position: relative;
	font-size: 17px;
}
.ht-quote::before {
	content: "\201C";
	position: absolute;
	left: 22px;
	top: 28px;
	font-family: var(--wp--preset--font-family--display);
	font-size: 56px;
	line-height: 1;
	color: var(--ht-orange);
}
.ht-quote cite, .ht-quote footer { display: block; margin-top: 12px; font-size: 13px; font-style: normal; }
.ht-quote-yellow { background: var(--ht-yellow); }
.ht-quote-yellow::before { color: var(--ht-ink); }

/* ---------- Listen ---------- */
ol.ht-list-ordered { list-style: none; counter-reset: htol; margin: 16px 0; padding: 0; }
ol.ht-list-ordered li { counter-increment: htol; padding: 8px 0 8px 46px; position: relative; }
ol.ht-list-ordered li::before {
	content: counter(htol);
	position: absolute;
	left: 0; top: 6px;
	width: 30px; height: 30px;
	background: var(--ht-yellow);
	border: var(--ht-border);
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--wp--preset--font-family--display);
	font-size: 15px;
	padding-top: 3px;
	box-shadow: var(--ht-hard-sm);
	transform: rotate(-3deg);
}
ul.ht-list-paw { list-style: none; margin: 16px 0; padding: 0; }
ul.ht-list-paw li { padding: 6px 0 6px 32px; position: relative; }
ul.ht-list-paw li::before { content: "🐾"; position: absolute; left: 0; }
ul.ht-list-icons { list-style: none; margin: 16px 0; padding: 0; }
ul.ht-list-icons li { display: flex; gap: 14px; align-items: flex-start; padding: 9px 0; }
ul.ht-list-icons .ht-list-ic {
	width: 38px; height: 38px;
	flex-shrink: 0;
	background: var(--ht-white);
	border: var(--ht-border);
	border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
	box-shadow: var(--ht-hard-sm);
	transform: rotate(-3deg);
}
ul.ht-list-icons li:nth-child(even) .ht-list-ic { transform: rotate(3deg); }

/* ---------- Tabellen ---------- */
.ht-table table, table.ht-table {
	border-collapse: separate;
	border-spacing: 0;
	width: 100%;
	background: var(--ht-white);
	border: var(--ht-border);
	border-radius: var(--ht-radius);
	overflow: hidden;
	box-shadow: var(--ht-hard);
	font-size: 14px;
}
.ht-table th {
	background: var(--ht-yellow);
	border-bottom: var(--ht-border);
	font-family: var(--wp--preset--font-family--display);
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	padding: 12px 18px;
	text-align: left;
}
.ht-table td { padding: 12px 18px; border-bottom: 1.5px solid #EDE4D3; }
.ht-table tr:last-child td { border-bottom: none; }
.ht-table tr:nth-child(even) td { background: #FBF5E8; }

/* ---------- Testnoten-Badge ---------- */
.ht-note-badge {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	background: var(--ht-yellow);
	border: var(--ht-border);
	border-radius: 14px;
	padding: 8px 14px;
	line-height: 1;
	transform: rotate(-3deg);
	box-shadow: var(--ht-hard);
}
.ht-note-badge b { font-size: 22px; font-family: var(--wp--preset--font-family--display); }
.ht-note-badge small { font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; }
.ht-note-badge-plain { background: var(--ht-white); transform: none; box-shadow: var(--ht-hard-sm); }

/* ---------- Rund-Stempel ---------- */
.ht-roundstamp {
	width: 92px; height: 92px;
	border-radius: 50%;
	background: var(--ht-yellow);
	border: var(--ht-border);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 11px;
	font-weight: 800;
	text-align: center;
	text-transform: uppercase;
	line-height: 1.25;
	transform: rotate(8deg);
	box-shadow: var(--ht-hard);
	padding: 10px;
}

/* ---------- Gutschein-Briefmarke ---------- */
.ht-stamp {
	display: inline-block;
	background: var(--ht-orange);
	color: #fff;
	border: var(--ht-border);
	border-radius: 8px;
	padding: 10px 18px;
	font-weight: 800;
	font-size: 14px;
	letter-spacing: 0.05em;
	position: relative;
	transform: rotate(-2deg);
	box-shadow: var(--ht-hard);
}
.ht-stamp::before {
	content: "";
	position: absolute;
	inset: 4px;
	border: 2px dashed rgba(255, 255, 255, 0.7);
	border-radius: 5px;
	pointer-events: none;
}
.ht-stamp small { display: block; font-weight: 600; font-size: 11px; letter-spacing: 0; }
.ht-stamp-mini { padding: 5px 10px; font-size: 12px; }

/* ---------- Produktboxen ---------- */
.ht-produktbox {
	border: var(--ht-border);
	border-radius: var(--ht-radius);
	overflow: hidden;
	margin: 26px 0;
	box-shadow: var(--ht-hard);
	background: var(--ht-white);
}
.ht-produktbox-head {
	background: var(--ht-yellow);
	border-bottom: var(--ht-border);
	padding: 12px 24px;
	font-family: var(--wp--preset--font-family--display);
	font-size: 16px;
	text-transform: uppercase;
}
.ht-produktbox-body {
	display: grid;
	grid-template-columns: 160px 1fr auto;
	gap: 24px;
	align-items: center;
	padding: 22px 24px;
}
.ht-specs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 24px; font-size: 14px; }
.ht-specs span { color: var(--ht-ink-soft); }
.ht-price { font-size: 26px; font-family: var(--wp--preset--font-family--display); }
.ht-price small { font-size: 13px; color: var(--ht-ink-soft); font-family: var(--wp--preset--font-family--sans); display: block; }

/* Schlanke Alternativen-Box */
.ht-altbox {
	display: grid;
	grid-template-columns: 84px 1fr auto auto;
	gap: 18px;
	align-items: center;
	background: var(--ht-white);
	border: var(--ht-border);
	border-radius: var(--ht-radius-sm);
	box-shadow: var(--ht-hard-sm);
	padding: 14px 18px;
	margin-bottom: 14px;
}
.ht-altbox .ht-tile-img { width: 84px; height: 64px; border-radius: 10px; display: flex; align-items: center; justify-content: center; }
.ht-altbox h4 { margin: 0; font-family: var(--wp--preset--font-family--sans); font-size: 15px; text-transform: none; }
.ht-altbox .ht-altbox-sub { font-size: 13px; color: var(--ht-ink-soft); }

/* ---------- Test-Hero ---------- */
.ht-hero-test {
	background: var(--ht-white);
	border: var(--ht-border);
	border-radius: 22px;
	box-shadow: var(--ht-hard);
	padding: 36px;
	margin-top: 24px;
}
.ht-usps { list-style: none; margin: 16px 0; padding: 0; }
.ht-usps li { padding: 5px 0 5px 30px; position: relative; }
.ht-usps li::before {
	content: "✓";
	position: absolute;
	left: 0; top: 5px;
	width: 20px; height: 20px;
	background: var(--ht-green);
	border: 1.5px solid var(--ht-ink);
	color: #fff;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	font-weight: 800;
}

/* ---------- Vergleich ---------- */
.ht-vgtable-wrap { overflow-x: auto; }
.ht-vgtable-wrap .ht-table table, .ht-vgtable-wrap table.ht-table { min-width: 860px; }
.ht-vg-winner-col { background: var(--ht-yellow-soft); }
.ht-winflag {
	background: var(--ht-ink);
	color: var(--ht-yellow);
	font-size: 11px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	padding: 4px 14px;
	border-radius: 999px;
	display: inline-block;
	transform: rotate(-1.5deg);
}
.ht-winflag-red { background: var(--ht-red); color: #fff; }
.ht-winflag-blue { background: var(--ht-blue); color: var(--ht-ink); }

/* ---------- Art-Cards (Listen/Archive) ---------- */
.ht-art-grid { gap: 24px; }
.ht-art-card {
	background: var(--ht-white);
	border: var(--ht-border);
	border-radius: var(--ht-radius);
	box-shadow: var(--ht-hard);
	overflow: hidden;
	transition: transform 0.12s;
}
.ht-art-card:hover { transform: translate(-2px, -2px); }
.ht-art-card-img img { width: 100%; height: 170px; object-fit: cover; border-bottom: var(--ht-border); }
.ht-art-card-body { padding: 16px 20px 20px; }
.ht-art-card-body h3 { font-size: 14px !important; margin: 10px 0 6px; }
.ht-art-card-body h3 a { text-decoration: none; color: var(--ht-ink); }

/* ---------- FAQ (core/details) ---------- */
.ht-faq {
	background: var(--ht-white);
	border: var(--ht-border);
	border-radius: var(--ht-radius-sm);
	box-shadow: var(--ht-hard-sm);
	margin-bottom: 12px;
	padding: 0 22px;
}
.ht-faq summary { padding: 15px 0; font-weight: 700; cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; }
.ht-faq summary::after { content: "+"; font-family: var(--wp--preset--font-family--display); font-size: 20px; color: var(--ht-orange); }
.ht-faq[open] summary::after { content: "–"; }
.ht-faq > :not(summary) { padding-bottom: 16px; font-size: 14px; }

/* ---------- 404 ---------- */
.ht-404 { text-align: center; padding: 64px 0 80px; }
.ht-404-badge {
	font-family: var(--wp--preset--font-family--display);
	font-size: 72px;
	background: var(--ht-yellow);
	border: var(--ht-border);
	border-radius: 24px;
	padding: 18px 40px 6px;
	transform: rotate(-3deg);
	box-shadow: var(--ht-hard);
	display: inline-block;
	position: relative;
	line-height: 1;
}
.ht-404-paw { position: absolute; right: -22px; top: -22px; font-size: 40px; transform: rotate(15deg); }
.ht-404-search { max-width: 420px; margin: 20px auto 26px; }

/* ---------- Charts (CSS/SVG, keine Library) ---------- */
.ht-chart-card {
	background: var(--ht-white);
	border: var(--ht-border);
	border-radius: var(--ht-radius);
	box-shadow: var(--ht-hard);
	padding: 24px;
	margin: 20px 0;
}
.ht-donut {
	width: 170px; height: 170px;
	border-radius: 50%;
	border: var(--ht-border);
	position: relative;
	flex-shrink: 0;
	/* conic-gradient wird inline pro Instanz gesetzt */
}
.ht-donut::after {
	content: "";
	position: absolute;
	inset: 38px;
	background: var(--ht-white);
	border: var(--ht-border);
	border-radius: 50%;
}
.ht-donut-center {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	z-index: 1;
	font-family: var(--wp--preset--font-family--display);
	font-size: 26px;
	line-height: 1;
}
.ht-legend { list-style: none; margin: 0; padding: 0; font-size: 14px; }
.ht-legend li { display: flex; align-items: center; gap: 10px; padding: 4px 0; }
.ht-legend i { width: 16px; height: 16px; border-radius: 5px; border: 1.5px solid var(--ht-ink); flex-shrink: 0; }
.ht-legend b { margin-left: auto; }
.ht-linechart svg { width: 100%; height: auto; display: block; }

/* ---------- Blockstile: Core-Blöcke im Sticker-Look ---------- */

/* Tabelle (is-style-ht-sticker, Standard) */
.wp-block-table.is-style-ht-sticker table {
	border-collapse: separate; border-spacing: 0;
	background: var(--ht-white);
	border: var(--ht-border);
	border-radius: var(--ht-radius);
	overflow: hidden;
	box-shadow: var(--ht-hard);
	font-size: 14px;
}
.wp-block-table.is-style-ht-sticker th {
	background: var(--ht-yellow);
	border: none; border-bottom: var(--ht-border);
	font-family: var(--wp--preset--font-family--display);
	font-weight: 400; text-transform: uppercase; letter-spacing: 0.03em;
	padding: 12px 18px; text-align: left;
}
.wp-block-table.is-style-ht-sticker td { border: none; border-bottom: 1.5px solid #EDE4D3; padding: 12px 18px; }
.wp-block-table.is-style-ht-sticker tr:last-child td { border-bottom: none; }
.wp-block-table.is-style-ht-sticker tbody tr:nth-child(even) td { background: #FBF5E8; }

/* Zitat (Experte = Standard, Fazit = gelb) */
.wp-block-quote.is-style-ht-experte,
.wp-block-quote.is-style-ht-fazit {
	position: relative;
	padding: 26px 32px 22px 76px;
	font-size: 17px;
	border-radius: var(--ht-radius);
}
.wp-block-quote.is-style-ht-experte::before,
.wp-block-quote.is-style-ht-fazit::before {
	content: "\201C";
	position: absolute; left: 22px; top: 28px;
	font-family: var(--wp--preset--font-family--display);
	font-size: 56px; line-height: 1;
	color: var(--ht-orange);
}
.wp-block-quote.is-style-ht-fazit { background: var(--ht-yellow) !important; }
.wp-block-quote.is-style-ht-fazit::before { color: var(--ht-ink); }
.wp-block-quote cite { display: block; margin-top: 12px; font-size: 13px; font-style: normal; }

/* Listen: Sticker-Look ist der STANDARD im Fließtext (ohne Klassenzwang).
 * "is-style-ht-schlicht" schaltet auf Browser-Standard zurück. */
.wp-block-post-content ol:not(.is-style-ht-schlicht):not([class*="ht-"]) {
	list-style: none; counter-reset: htol; padding: 0;
}
.wp-block-post-content ol:not(.is-style-ht-schlicht):not([class*="ht-"]) > li {
	counter-increment: htol; padding: 8px 0 8px 46px; position: relative;
}
.wp-block-post-content ol:not(.is-style-ht-schlicht):not([class*="ht-"]) > li::before {
	content: counter(htol);
	position: absolute; left: 0; top: 6px;
	width: 30px; height: 30px;
	background: var(--ht-yellow);
	border: var(--ht-border);
	border-radius: 10px;
	display: flex; align-items: center; justify-content: center;
	font-family: var(--wp--preset--font-family--display);
	font-size: 15px; padding-top: 3px;
	box-shadow: var(--ht-hard-sm);
	transform: rotate(-3deg);
}
.wp-block-post-content ul:not(.is-style-ht-schlicht):not([class*="ht-"]) {
	list-style: none; padding: 0;
}
.wp-block-post-content ul:not(.is-style-ht-schlicht):not([class*="ht-"]) > li {
	padding: 6px 0 6px 32px; position: relative;
}
.wp-block-post-content ul:not(.is-style-ht-schlicht):not([class*="ht-"]) > li::before {
	content: "🐾"; position: absolute; left: 0;
}
/* Verschachtelte Listen: eingerückt, ohne doppelte Sticker-Optik */
.wp-block-post-content ol li ol, .wp-block-post-content ul li ul { margin-top: 6px; }

/* Plugin-Markup (ToC-/Breadcrumb-Plugins, Rank Math & Co.) NIE bestickern:
 * deren Listen zurück auf neutrale Darstellung setzen. */
.wp-block-post-content :is(nav, [class*="toc"], [class*="breadcrumb"], [class*="rank-math"], [id*="toc"]) :is(ol, ul) {
	list-style: none; counter-reset: none; padding: 0; margin: 0;
}
.wp-block-post-content :is(nav, [class*="toc"], [class*="breadcrumb"], [class*="rank-math"], [id*="toc"]) li {
	padding: 2px 0; position: static;
}
.wp-block-post-content :is(nav, [class*="toc"], [class*="breadcrumb"], [class*="rank-math"], [id*="toc"]) li::before {
	content: none;
}

/* Bilderbox: Bild mit ausfahrbarem Copyright-Badge.
 * Der Media-Wrapper schrumpft EXAKT aufs Bild (inline-block) –
 * nur so sitzt das Badge garantiert in der Bildecke, auch wenn
 * das Bild schmaler ist als die Spalte. */
.ht-bilderbox { margin: 20px 0; }
.ht-bilderbox-media { position: relative; display: inline-block; max-width: 100%; line-height: 0; }
.ht-bilderbox-media img {
	display: block; width: 100%; height: auto;
	border: var(--ht-border);
	border-radius: var(--ht-radius);
	box-shadow: var(--ht-hard);
}
.ht-bilderbox figcaption { font-size: 13px; color: var(--ht-ink-soft); margin-top: 10px; }
/* Badge unten rechts, bündig in der Bildecke (Best Practice Finanzwissen):
 * dunkle, halbtransparente Fläche, © + Quelle/Urheber fahren beim Hovern aus. */
.ht-bilderbox-copy {
	position: absolute; right: 2px; bottom: 2px;
	display: flex; align-items: center; gap: 8px;
	height: 40px; max-width: 40px;
	padding: 0 11px;
	line-height: normal;
	background: rgba(30, 27, 24, 0.55);
	-webkit-backdrop-filter: blur(3px);
	backdrop-filter: blur(3px);
	border-radius: 12px 0 calc(var(--ht-radius) - 3px) 0;
	overflow: hidden;
	white-space: nowrap;
	transition: max-width 0.35s ease;
	cursor: help;
}
.ht-bilderbox-copy-icon {
	flex: 0 0 auto;
	font-size: 17px;
	line-height: 1;
	color: rgba(255, 255, 255, 0.92);
}
.ht-bilderbox-copy-text {
	font-size: 14px;
	color: rgba(255, 255, 255, 0.88);
	opacity: 0;
	transition: opacity 0.25s ease 0.1s;
}
.ht-bilderbox-copy:hover,
.ht-bilderbox-copy:focus-visible {
	max-width: calc(100% - 20px);
}
.ht-bilderbox-copy:hover .ht-bilderbox-copy-text,
.ht-bilderbox-copy:focus-visible .ht-bilderbox-copy-text { opacity: 1; }

/* Bild (Sticker-Rahmen, Standard) */
.wp-block-image.is-style-ht-sticker img {
	border: var(--ht-border);
	border-radius: var(--ht-radius);
	box-shadow: var(--ht-hard);
}
.wp-block-image.is-style-ht-sticker figcaption { font-size: 13px; color: var(--ht-ink-soft); }

/* Cards: core/group mit Panel-Farben */
.wp-block-group[class*="is-style-ht-panel-"] {
	border: var(--ht-border);
	border-radius: var(--ht-radius);
	box-shadow: var(--ht-hard);
	padding: 20px 26px;
	margin-top: 20px; margin-bottom: 20px;
}
.wp-block-group.is-style-ht-panel-gelb { background: var(--ht-yellow); }
.wp-block-group.is-style-ht-panel-blau { background: var(--ht-blue-soft); }
.wp-block-group.is-style-ht-panel-gruen { background: var(--ht-green-soft); }
.wp-block-group.is-style-ht-panel-rot { background: var(--ht-red-soft); }
.wp-block-group.is-style-ht-panel-orange { background: var(--ht-orange-soft); }
.wp-block-group.is-style-ht-panel-weiss { background: var(--ht-white); }

/* ---------- Block: Akkordeon ---------- */
.ht-akkordeon-body { padding: 4px 0 18px; }
.ht-akkordeon-body > *:first-child { margin-top: 0; }
.ht-akkordeon-body .ht-produktbox { margin: 12px 0; box-shadow: var(--ht-hard-sm); }

/* ---------- Startseite ---------- */
.ht-home-hero {
	position: relative;
	padding: 56px 24px 48px;
	margin: 8px 0 12px;
	text-align: center;
}
.ht-home-hero::before {
	content: "";
	position: absolute; inset: 0;
	background: var(--ht-grid-paper);
	background-size: 30px 30px;
	mask-image: radial-gradient(ellipse at center, black 35%, transparent 75%);
	pointer-events: none;
}
.ht-home-hero-txt { position: relative; max-width: 720px; margin: 0 auto; }
.ht-home-titel { font-size: clamp(2.2rem, 5vw, 3.4rem) !important; margin: 18px 0 16px !important; }
.ht-home-hl {
	display: inline-block;
	background: var(--ht-orange); color: #fff;
	border: var(--ht-border); border-radius: 14px;
	/* Metriken kommen jetzt korrigiert aus dem @font-face – Padding symmetrisch */
	padding: 0.05em 0.4em 0;
	line-height: 1.1;
	transform: rotate(-2deg);
	box-shadow: var(--ht-hard);
}
.ht-home-intro { font-size: 17px; color: var(--ht-ink-soft); margin-bottom: 22px; }
.ht-home-search { max-width: 460px; margin: 0 auto; }
.ht-home-sektion { margin: 44px 0 18px !important; }
.ht-home-sektion-kopf { align-items: baseline; margin-top: 24px; }
.ht-home-sektion-kopf .ht-home-sektion { margin: 0 !important; }
.ht-home-sektion-kopf a { font-weight: 700; border-bottom: 2px solid var(--ht-yellow); }
.ht-welt-grid { gap: 20px; }
.ht-welt-karte {
	background: var(--ht-white);
	border: var(--ht-border);
	border-radius: var(--ht-radius);
	box-shadow: var(--ht-hard);
	padding: 28px 24px;
	text-align: center;
	transition: transform 0.12s;
	height: 100%;
}
.ht-welt-karte:hover { transform: translate(-2px, -2px); }
.ht-welt-icon { font-size: 44px; margin: 0 0 6px !important; }
.ht-welt-karte h3 { margin: 0 0 4px !important; }
.ht-welt-sub { color: var(--ht-ink-soft); font-size: 14px; margin: 0 0 14px !important; }
.ht-welt-karte .wp-block-buttons { justify-content: center; }
.ht-home-trust {
	background: var(--ht-white);
	border: var(--ht-border);
	border-radius: var(--ht-radius);
	box-shadow: var(--ht-hard);
	padding: 10px 32px 24px;
	margin: 44px 0 0;
}
.ht-home-trust .ht-home-sektion { margin-top: 18px !important; }
.ht-newsletter-band {
	background: var(--ht-blue);
	border: var(--ht-border);
	border-radius: 22px;
	box-shadow: var(--ht-hard);
	padding: 32px 40px;
	margin: 44px 0 56px;
	align-items: center;
	position: relative;
	overflow: hidden;
}
.ht-newsletter-band::after {
	content: "";
	position: absolute; inset: 0;
	background: var(--ht-grid-paper);
	background-size: 26px 26px;
	pointer-events: none;
}
.ht-newsletter-band > * { position: relative; z-index: 1; }
.ht-newsletter-titel { margin: 0 0 4px !important; }

/* Startseite: Hero-Stats, Welt-Sticker, Vergleichs-Karten, Trust-Stempel */
.ht-hero-stats {
	display: flex; justify-content: center; gap: 28px; flex-wrap: wrap;
	margin-top: 26px !important;
	font-size: 13px; font-weight: 700; color: var(--ht-ink-soft);
}
.ht-hero-stats b {
	color: var(--ht-ink);
	font-family: var(--wp--preset--font-family--display);
	font-size: 18px; font-weight: 400; margin-right: 5px;
}
.ht-welt-karte { position: relative; }
.ht-welt-zahl {
	position: absolute; top: -12px; right: -10px;
	background: var(--ht-yellow);
	border: var(--ht-border);
	border-radius: 999px;
	font-size: 11px; font-weight: 800;
	padding: 3px 10px;
	transform: rotate(4deg);
	box-shadow: var(--ht-hard-sm);
	margin: 0 !important;
}
.ht-chip-plain { background: var(--ht-white) !important; transform: none !important; font-size: 11px !important; }
.ht-note-mini {
	display: inline-flex; flex-direction: column; align-items: center;
	background: var(--ht-yellow);
	border: var(--ht-border);
	border-radius: 10px;
	padding: 3px 9px; line-height: 1;
	transform: rotate(-3deg);
	box-shadow: var(--ht-hard-sm);
	float: right;
}
.ht-note-mini b { font-size: 15px; font-family: var(--wp--preset--font-family--display); }
.ht-note-mini small { font-size: 8px; text-transform: uppercase; font-weight: 700; }
.ht-vgl-karten { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 24px; }
.ht-vgl-karte-img, .ht-vgl-karte-ph {
	width: 100%; height: 160px;
	object-fit: cover;
	border-bottom: var(--ht-border);
	display: flex; align-items: center; justify-content: center; font-size: 48px;
	border-radius: 0; border-left: none; border-right: none; border-top: none;
}
.ht-vgl-karte-meta { font-size: 12px; color: var(--ht-ink-soft); margin-top: 8px; }
.ht-home-trust-inner { display: grid; grid-template-columns: auto 1fr; gap: 36px; align-items: center; }
.ht-trust-stamp { width: 110px; height: 110px; font-size: 12px; margin: 0 !important; }
.ht-trust-titel { margin: 0 0 14px !important; font-size: 22px !important; }
.ht-home-trust .ht-list-icons { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin: 0; }
@media (max-width: 900px) {
	.ht-home-trust-inner { grid-template-columns: 1fr; text-align: center; }
	.ht-trust-stamp { margin: 0 auto !important; }
	.ht-home-trust .ht-list-icons { grid-template-columns: 1fr; text-align: left; }
}

/* ---------- Blöcke: Test-Hero + Rasseprofil-Hero ---------- */
.ht-hero-test-block, .ht-hero-rasse {
	background: var(--ht-white);
	border: var(--ht-border);
	border-radius: 22px;
	box-shadow: var(--ht-hard);
	padding: 32px 36px;
	margin: 20px 0 28px;
	display: grid;
	grid-template-columns: 340px 1fr;
	gap: 36px;
	align-items: center;
}
.ht-hero-img, .ht-hero-img-fallback {
	width: 100%; height: 280px;
	object-fit: contain;
	border: var(--ht-border);
	border-radius: var(--ht-radius);
	background: var(--ht-white);
	display: flex; align-items: center; justify-content: center; font-size: 64px;
}
.ht-hero-titel { margin: 12px 0 10px !important; font-size: var(--wp--preset--font-size--xx-large) !important; }
.ht-hero-intro { color: var(--ht-ink-soft); font-size: 15px; margin: 0 0 14px; }
.ht-hero-noten { display: flex; align-items: center; gap: 16px; margin: 10px 0 6px; }
.ht-hero-punkte { font-size: 13px; font-weight: 700; color: var(--ht-ink-soft); }
.ht-hero-pricebar { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 14px; }
.ht-rasse-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px; margin: 16px 0 6px; }
.ht-rasse-fact {
	background: var(--ht-cream);
	border: 1.5px solid var(--ht-ink);
	border-radius: var(--ht-radius-sm);
	padding: 10px 12px;
	text-align: center;
}
.ht-rasse-fact b { display: block; font-size: 14px; }
.ht-rasse-fact small { color: var(--ht-ink-soft); font-size: 11px; }
.ht-rasse-fact-icon { font-size: 18px; }
.ht-rasse-traits { margin-top: 14px; }
.ht-rasse-trait { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 4px 0; font-size: 14px; font-weight: 600; }
.ht-bones i { font-style: normal; filter: grayscale(1); opacity: 0.25; font-size: 15px; }
.ht-bones i.on { filter: none; opacity: 1; }
@media (max-width: 820px) {
	.ht-hero-test-block, .ht-hero-rasse { grid-template-columns: 1fr; padding: 22px; }
}

/* ---------- Block: Verdict (Testfazit) ---------- */
.ht-verdict {
	background: var(--ht-white);
	border: var(--ht-border);
	border-radius: var(--ht-radius);
	box-shadow: var(--ht-hard);
	padding: 28px 32px;
	margin: 32px 0;
}
.ht-verdict-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.ht-verdict-titel { margin: 0 !important; }
.ht-verdict-noten { display: flex; align-items: center; gap: 18px; }
.ht-verdict-punkte { text-align: center; line-height: 1.1; }
.ht-verdict-punkte b { font-family: var(--wp--preset--font-family--display); font-size: 26px; display: block; }
.ht-verdict-punkte small { font-size: 11px; color: var(--ht-ink-soft); text-transform: uppercase; letter-spacing: 0.05em; }
.ht-verdict-kriterien { margin: 6px 0 20px; }
.ht-verdict-kriterium { display: grid; grid-template-columns: 220px 1fr 44px; gap: 14px; align-items: center; padding: 7px 0; }
.ht-verdict-k-name { font-size: 14px; font-weight: 700; }
.ht-verdict-k-name small { color: var(--ht-ink-soft); font-weight: 600; }
.ht-verdict-bar { height: 12px; background: var(--ht-cream); border: 1.5px solid var(--ht-ink); border-radius: 999px; overflow: hidden; }
.ht-verdict-bar i { display: block; height: 100%; background: var(--ht-yellow); border-radius: 999px; }
.ht-verdict-k-punkte { font-family: var(--wp--preset--font-family--display); font-size: 16px; text-align: right; }
.ht-verdict-fazit { font-size: 17px; font-weight: 600; margin: 0 0 18px; }
.ht-verdict-fit { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 18px; }
.ht-verdict-fit .ht-panel { margin: 0; }
.ht-verdict-fit h4 { margin: 0 0 8px; font-size: 15px !important; }
.ht-verdict-fit ul { list-style: none; margin: 0; padding: 0; font-size: 14px; }
.ht-verdict-fit li { padding: 3px 0; }
.ht-verdict-cta { display: flex; justify-content: flex-end; align-items: center; gap: 20px; border-top: 1.5px solid #EDE4D3; padding-top: 16px; }
@media (max-width: 720px) {
	.ht-verdict-kriterium { grid-template-columns: 1fr 44px; }
	.ht-verdict-kriterium .ht-verdict-bar { grid-column: 1 / -1; order: 3; }
	.ht-verdict-fit { grid-template-columns: 1fr; }
}

/* ---------- Block: Produktbox (Variantenwahl) ---------- */
.ht-produktbox-block .ht-produktbox-body { grid-template-columns: 200px 1fr 200px; align-items: start; }
.ht-pb-img, .ht-pb-img-fallback {
	width: 100%; height: 180px;
	object-fit: contain;
	border: var(--ht-border);
	border-radius: var(--ht-radius-sm);
	background: var(--ht-white);
	display: flex; align-items: center; justify-content: center; font-size: 48px;
}
.ht-pb-name { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 16px; margin-bottom: 10px; }
.ht-pb-select-label { display: block; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; margin: 12px 0 4px; color: var(--ht-ink-soft); }
.ht-pb-select {
	width: 100%;
	border: var(--ht-border);
	border-radius: var(--ht-radius-sm);
	background: var(--ht-white);
	padding: 9px 12px;
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	box-shadow: var(--ht-hard-sm);
}
.ht-pb-buy { text-align: center; }
.ht-pb-cta { display: block; margin: 10px 0 8px; }
.ht-pb-cta.ht-cta-aus { opacity: 0.45; pointer-events: none; }
.ht-pb-testlink, .ht-vg-testlink { font-size: 13px; font-weight: 700; border-bottom: 2px solid var(--ht-yellow); }

/* ---------- Block: Vergleichstabelle ---------- */
.ht-toggle-group {
	display: inline-flex;
	background: var(--ht-white);
	border: var(--ht-border);
	border-radius: 999px;
	padding: 3px;
	box-shadow: var(--ht-hard-sm);
	margin-bottom: 16px;
}
.ht-toggle-group button {
	border: none; background: transparent;
	padding: 7px 18px; border-radius: 999px;
	font-size: 14px; font-weight: 700;
	color: var(--ht-ink-soft); cursor: pointer; font-family: inherit;
}
.ht-toggle-group button.on { background: var(--ht-ink); color: var(--ht-yellow); }
.ht-vg-block .ht-vgtable-wrap {
	background: var(--ht-white);
	border: var(--ht-border);
	border-radius: var(--ht-radius);
	box-shadow: var(--ht-hard);
	overflow-x: auto;
}
table.ht-vg-table { border-collapse: collapse; width: 100%; min-width: 780px; font-size: 14px; }
table.ht-vg-table td { padding: 13px 16px; text-align: center; border-bottom: 1.5px solid #EDE4D3; vertical-align: middle; }
table.ht-vg-table tr:last-child td { border-bottom: none; }
table.ht-vg-table td:first-child {
	text-align: left; font-weight: 700; color: var(--ht-ink-soft);
	font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase;
	width: 140px; background: #FBF5E8;
}
.ht-vg-img { border: var(--ht-border); border-radius: 10px; margin: 6px auto; display: block; max-height: 90px; width: auto; }
.ht-vg-pname { font-weight: 800; font-size: 15px; display: block; }
.ht-vg-cta { display: inline-block; margin-bottom: 6px; }
.ht-vg-platzhalter { visibility: hidden; }
.ht-vg-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 20px; }
.ht-vg-card {
	background: var(--ht-white);
	border: var(--ht-border);
	border-radius: var(--ht-radius);
	box-shadow: var(--ht-hard);
	padding: 20px;
	text-align: center;
}
.ht-vg-card-winner { background: var(--ht-yellow-soft); transform: rotate(-0.5deg); }
.ht-vg-card h3 { font-size: 15px; margin: 8px 0 6px; }
.ht-vg-card .ht-vg-img { max-height: 120px; }
.ht-vg-card-pro { list-style: none; text-align: left; font-size: 13px; margin: 10px 0; padding: 0; }
.ht-vg-card-pro li { padding: 3px 0 3px 20px; position: relative; }
.ht-vg-card-pro li::before { content: "✓"; position: absolute; left: 0; color: var(--ht-green); font-weight: 800; }

@media (max-width: 720px) {
	.ht-produktbox-body, .ht-produktbox-block .ht-produktbox-body { grid-template-columns: 1fr; text-align: center; }
	.ht-pb-buy { text-align: center; }
	.ht-altbox { grid-template-columns: 64px 1fr; }
	.ht-altbox > :nth-child(3), .ht-altbox > :nth-child(4) { grid-column: 2; justify-self: start; }
}