/* ============================================================
Hausundtier 2 – Komponenten („Salbei & Terrakotta")
Gleiche Klassen wie Theme v1 (Blöcke rendern unverändert),
neuer Look: ruhige Flächen, 1px-Linien, weiche Radien,
kein Hard-Shadow, keine Rotation, keine Emojis als Pseudo-Content.
============================================================ */
/* ---------- Buttons (Varianten zum Core-Button) ---------- */
.wp-block-button__link { transition: background 0.15s var(--ht-ease), opacity 0.15s var(--ht-ease), transform 0.15s var(--ht-ease); }
.wp-block-button__link:hover { transform: translateY(-1px); }
.ht-btn-orange .wp-block-button__link { background: var(--ht-accent-2); color: var(--ht-accent-2-fg); border-color: var(--ht-accent-2); }
.ht-btn-blue .wp-block-button__link { background: var(--ht-accent); color: var(--ht-accent-fg); border-color: var(--ht-accent); }
.ht-btn-white .wp-block-button__link,
.ht-btn-outline .wp-block-button__link,
.wp-block-button.is-style-outline .wp-block-button__link {
background: transparent; color: var(--ht-fg); border: 1px solid var(--ht-line);
}
.ht-btn-white .wp-block-button__link:hover,
.ht-btn-outline .wp-block-button__link:hover,
.wp-block-button.is-style-outline .wp-block-button__link:hover { background: var(--ht-surface-2); border-color: var(--ht-muted); }
/* ---------- Bild-Kacheln (Platzhalter) ---------- */
.ht-tile-img {
border: var(--ht-border);
border-radius: var(--ht-radius-sm);
position: relative;
overflow: hidden;
background: var(--ht-surface-2);
color: var(--ht-muted);
}
.ht-tile-img::after { content: none; }
.ht-tile-orange, .ht-tile-yellow, .ht-tile-blue { background: var(--ht-surface-2); }
/* ---------- Widgets / Sidebar ---------- */
.ht-widget {
background: var(--ht-surface);
border: var(--ht-border);
border-radius: var(--ht-radius-sm);
padding: 22px 24px;
}
.ht-widget-head { font-size: 17px !important; margin: 0 0 12px !important; letter-spacing: -0.01em; }
.ht-widget.ht-panel-yellow, .ht-widget-newsletter { background: var(--ht-inv-bg); color: var(--ht-inv-fg); border-color: var(--ht-inv-bg); }
.ht-widget-newsletter .ht-widget-head { color: var(--ht-inv-fg); }
.ht-widget-newsletter p { color: var(--ht-inv-muted); }
.ht-widget-newsletter .ht-label { color: var(--ht-accent); }
/* ToC-Liste (JS-generiert) */
.ht-toc-list { list-style: none; margin: 0; padding: 0; counter-reset: httoc; }
.ht-toc-list li { counter-increment: httoc; display: flex; gap: 12px; align-items: baseline; padding: 7px 0; font-size: 14px; font-weight: 500; border-top: 1px solid var(--ht-line); }
.ht-toc-list li:first-child { border-top: 0; }
.ht-toc-list li::before {
content: counter(httoc, decimal-leading-zero);
font-family: var(--ht-font-mono);
font-size: 11px;
color: var(--ht-accent-text);
flex-shrink: 0;
}
.ht-toc-list a { text-decoration: none; color: var(--ht-fg); transition: color .15s ease; }
.ht-toc-list a:hover { color: var(--ht-accent-text); }
/* Aktives Kapitel: Marker links, Nummer gefüllt, Text in Akzentfarbe */
.ht-toc-list li { position: relative; padding-left: 12px; margin-left: -12px; border-radius: 6px; transition: background-color .2s ease; }
.ht-toc-list li::after {
content: '';
position: absolute; left: 0; top: 9px; bottom: 9px;
width: 3px; border-radius: 3px;
background: var(--ht-accent);
opacity: 0; transform: scaleY(.4);
transition: opacity .2s ease, transform .2s ease;
}
.ht-toc-list li.is-active { background: color-mix(in srgb, var(--ht-accent) 12%, transparent); }
.ht-toc-list li.is-active::after { opacity: 1; transform: scaleY(1); }
.ht-toc-list li.is-active::before { color: var(--ht-accent-text); font-weight: 700; }
.ht-toc-list li.is-active a { color: var(--ht-accent-text); font-weight: 700; }
/* ---------- Anzeigen-Platzhalter ---------- */
.ht-ad {
background: transparent;
border: 1px dashed var(--ht-line);
border-radius: var(--ht-radius-sm);
color: var(--ht-muted);
font-family: var(--ht-font-mono);
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.1em;
display: flex; align-items: center; justify-content: center;
min-height: 250px;
}
.ht-ad-banner { min-height: 120px; }
/* Leere Widgets/Anzeigen: kein Rahmen, kein Platz */
.ht-ad.ht-is-empty, .ht-widget.ht-is-empty { display: none; }
.ht-sidebar.ht-is-empty, .ht-sidebar-col.ht-is-empty { display: none; }
/* Ohne Sidebar: Inhalt zentriert in Lesebreite */
.wp-block-columns.ht-no-sidebar { justify-content: center; }
.wp-block-columns.ht-no-sidebar > .ht-content-col { flex-basis: 100% !important; max-width: 780px; }
/* ---------- Cards / Panels (Block hausundtier/card + Core-Group-Stile) ---------- */
.ht-panel,
.wp-block-group[class*="is-style-ht-panel-"] {
border: 1px solid transparent;
border-radius: var(--ht-radius-sm);
padding: 22px 26px;
margin: 24px 0;
background: var(--ht-surface-2);
}
.ht-panel > h4, .ht-panel > h3, .ht-panel > h2 {
font-size: 17px !important;
margin: 0 0 8px !important;
font-family: var(--ht-font-display);
font-weight: 700;
letter-spacing: -0.01em;
}
.ht-panel > p:last-child, .ht-panel > ul:last-child, .ht-panel > ol:last-child { margin-bottom: 0; }
.ht-panel p { font-size: 16px !important; line-height: 1.6; }
/* Farben: yellow=Tipp, blue=Hinweis, green=Vorteil, red=Achtung, orange=Beliebt, white=Neutral */
.ht-panel-yellow, .wp-block-group.is-style-ht-panel-gelb { background: var(--ht-tint-honey); }
.ht-panel-yellow > h4, .ht-panel-yellow > h3, .ht-panel-yellow > h2 { color: var(--ht-tint-honey-fg); }
.ht-panel-orange, .wp-block-group.is-style-ht-panel-orange { background: var(--ht-tint-clay); }
.ht-panel-orange > h4, .ht-panel-orange > h3 { color: var(--ht-tint-clay-fg); }
.ht-panel-blue, .wp-block-group.is-style-ht-panel-blau { background: var(--ht-tint-sky); }
.ht-panel-blue > h4, .ht-panel-blue > h3 { color: var(--ht-tint-sky-fg); }
.ht-panel-green, .wp-block-group.is-style-ht-panel-gruen { background: var(--ht-tint-sage); }
.ht-panel-green > h4, .ht-panel-green > h3 { color: var(--ht-tint-sage-fg); }
.ht-panel-red, .wp-block-group.is-style-ht-panel-rot { background: color-mix(in srgb, var(--ht-bad) 12%, var(--ht-surface)); }
.ht-panel-red > h4, .ht-panel-red > h3 { color: var(--ht-bad); }
.ht-panel-white, .wp-block-group.is-style-ht-panel-weiss { background: var(--ht-surface); border-color: var(--ht-line); }
/* „Das Wichtigste in Kürze" */
.ht-infobox {
background: var(--ht-tint-honey);
border-radius: var(--ht-radius-sm);
padding: 22px 28px;
margin: 26px 0;
}
.ht-infobox ul { list-style: none; margin: 0; padding: 0; }
.ht-infobox li { padding: 5px 0 5px 24px; position: relative; }
.ht-infobox li::before { content: ""; position: absolute; left: 0; top: 0.85em; width: 10px; height: 10px; border-radius: 50%; background: var(--ht-tint-honey-fg); }
/* ---------- Zitate ---------- */
.ht-quote,
.wp-block-quote.is-style-ht-experte,
.wp-block-quote.is-style-ht-fazit {
position: relative;
background: transparent;
border: 0;
border-left: 3px solid var(--ht-accent);
border-radius: 0;
padding: 4px 0 4px 28px;
margin: 28px 0;
font-family: var(--ht-font-display);
font-size: 26px;
line-height: 1.3;
font-weight: 600;
letter-spacing: -0.01em;
box-shadow: none;
}
.ht-quote::before,
.wp-block-quote.is-style-ht-experte::before,
.wp-block-quote.is-style-ht-fazit::before { content: none; }
.ht-quote cite, .ht-quote footer, .wp-block-quote cite {
display: block; margin-top: 12px;
font-family: var(--ht-font-mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase;
font-style: normal; font-weight: 500; color: var(--ht-muted);
}
.ht-quote-yellow, .wp-block-quote.is-style-ht-fazit {
background: var(--ht-tint-sage) !important;
border-left: 0;
border-radius: var(--ht-radius-sm);
padding: 24px 28px;
font-size: 22px;
}
.wp-block-quote.is-style-ht-fazit cite { color: var(--ht-tint-sage-fg); }
/* ---------- Listen ---------- */
ol.ht-list-ordered,
.wp-block-post-content ol:not(.is-style-ht-schlicht):not([class*="ht-"]) { list-style: none; counter-reset: htol; margin: 16px 0; padding: 0; }
ol.ht-list-ordered li,
.wp-block-post-content ol:not(.is-style-ht-schlicht):not([class*="ht-"]) > li { counter-increment: htol; padding: 8px 0 8px 46px; position: relative; }
ol.ht-list-ordered li::before,
.wp-block-post-content ol:not(.is-style-ht-schlicht):not([class*="ht-"]) > li::before {
content: counter(htol);
position: absolute; left: 0; top: 7px;
width: 30px; height: 30px;
background: var(--ht-accent);
color: var(--ht-accent-fg);
border-radius: 10px;
display: flex; align-items: center; justify-content: center;
font-family: var(--ht-font-display);
font-size: 15px; font-weight: 800;
}
ul.ht-list-paw,
.wp-block-post-content ul:not(.is-style-ht-schlicht):not([class*="ht-"]) { list-style: none; margin: 16px 0; padding: 0; }
ul.ht-list-paw li,
.wp-block-post-content ul:not(.is-style-ht-schlicht):not([class*="ht-"]) > li { padding: 6px 0 6px 28px; position: relative; }
ul.ht-list-paw li::before,
.wp-block-post-content ul:not(.is-style-ht-schlicht):not([class*="ht-"]) > li::before {
content: ""; position: absolute; left: 4px; top: 0.95em;
width: 8px; height: 8px; border-radius: 50%;
background: var(--ht-accent);
}
.wp-block-post-content ol li ol, .wp-block-post-content ul li ul { margin-top: 6px; }
/* Icon-Liste (Block) */
ul.ht-list-icons {
list-style: none;
margin: 24px 0;
padding: 20px 24px;
display: flex; flex-direction: column; gap: 16px;
border-radius: var(--ht-radius-sm);
background: var(--ht-surface);
border: var(--ht-border);
}
ul.ht-list-icons li { display: flex; gap: 16px; align-items: flex-start; padding: 0; }
ul.ht-list-icons li::before { content: none; }
ul.ht-list-icons .ht-list-ic { margin-top: 2px; }
ul.ht-list-icons strong { display: block; font-size: 17px; font-weight: 600; line-height: 1.3; }
ul.ht-list-icons small { display: block; font-size: 15px; line-height: 1.5; color: var(--ht-muted); margin-top: 2px; }
ul.ht-list-icons li:nth-child(even) .ht-list-ic { transform: none; }
/* ---------- Tabellen ---------- */
.ht-table table, table.ht-table,
.wp-block-table.is-style-ht-sticker table {
border-collapse: separate; border-spacing: 0; width: 100%;
background: var(--ht-surface);
border: var(--ht-border);
border-radius: var(--ht-radius-sm);
overflow: hidden;
font-size: 15px;
box-shadow: none;
}
.ht-table th, .wp-block-table.is-style-ht-sticker th {
background: var(--ht-surface-2);
border: 0; border-bottom: var(--ht-border);
font-family: var(--ht-font-mono);
font-weight: 500; font-size: 12px;
text-transform: uppercase; letter-spacing: 0.08em;
color: var(--ht-muted);
padding: 12px 18px; text-align: left;
}
.ht-table td, .wp-block-table.is-style-ht-sticker td { padding: 12px 18px; border: 0; border-bottom: 1px solid var(--ht-line); }
.ht-table tr:last-child td, .wp-block-table.is-style-ht-sticker tr:last-child td { border-bottom: none; }
.ht-table tr:nth-child(even) td, .wp-block-table.is-style-ht-sticker tbody tr:nth-child(even) td { background: transparent; }
/* ---------- Testnoten-Badge ---------- */
.ht-note-badge {
display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
background: var(--ht-accent);
color: var(--ht-accent-fg);
border: 0;
border-radius: 14px;
padding: 8px 14px;
line-height: 1;
min-width: 64px;
transform: none; box-shadow: none;
}
.ht-note-badge b { font-size: 24px; font-family: var(--ht-font-display); font-weight: 800; letter-spacing: -0.02em; }
.ht-note-badge small { font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; margin-top: 3px; opacity: 0.8; }
.ht-note-badge-plain { background: var(--ht-surface-2); color: var(--ht-fg); }
/* ---------- Rund-Stempel / Gutschein ---------- */
.ht-roundstamp {
width: 92px; height: 92px; border-radius: 50%;
background: var(--ht-tint-honey); color: var(--ht-tint-honey-fg);
display: flex; align-items: center; justify-content: center;
font-family: var(--ht-font-mono); font-size: 10px; font-weight: 500; text-align: center;
text-transform: uppercase; letter-spacing: 0.06em; line-height: 1.3; padding: 10px;
transform: none; box-shadow: none; border: 0;
}
.ht-stamp {
display: inline-block;
background: var(--ht-tint-clay); color: var(--ht-tint-clay-fg);
border: 1px dashed var(--ht-tint-clay-fg);
border-radius: 10px;
padding: 8px 14px;
font-family: var(--ht-font-mono); font-weight: 500; font-size: 13px; letter-spacing: 0.04em;
position: relative; transform: none; box-shadow: none;
}
.ht-stamp::before { content: none; }
.ht-stamp small { display: block; font-weight: 500; font-size: 11px; letter-spacing: 0; opacity: 0.85; font-family: var(--ht-font-sans); }
.ht-stamp-mini { padding: 4px 9px; font-size: 11px; }
/* ---------- Produktbox ---------- */
.ht-produktbox {
border: var(--ht-border);
border-radius: var(--ht-radius);
overflow: hidden;
margin: 28px 0;
background: var(--ht-surface);
box-shadow: none;
}
.ht-produktbox-head {
background: transparent;
border-bottom: var(--ht-border);
padding: 12px 24px;
font-family: var(--ht-font-mono);
font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase;
color: var(--ht-accent-text);
}
.ht-produktbox-body {
display: grid;
grid-template-columns: 160px 1fr auto;
gap: 24px;
align-items: center;
padding: 24px;
}
.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: #FFFFFF;
display: flex; align-items: center; justify-content: center;
padding: 8px;
}
[data-theme="dark"] .ht-pb-img, [data-theme="dark"] .ht-pb-img-fallback { background: var(--ht-surface-2); }
.ht-pb-name { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 18px; font-weight: 600; margin-bottom: 10px; font-family: var(--ht-font-display); }
.ht-specs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 24px; font-size: 14px; }
.ht-specs span { color: var(--ht-muted); }
.ht-price { font-size: 28px; font-family: var(--ht-font-display); font-weight: 800; letter-spacing: -0.02em; }
.ht-price small { font-size: 12px; color: var(--ht-muted); font-family: var(--ht-font-mono); font-weight: 400; display: block; letter-spacing: 0.04em; margin-top: 2px; }
.ht-pb-select-label { display: block; font-family: var(--ht-font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; margin: 12px 0 6px; color: var(--ht-muted); }
.ht-pb-select {
width: 100%;
border: var(--ht-border);
border-radius: var(--ht-radius-xs);
background: var(--ht-surface);
color: var(--ht-fg);
padding: 10px 12px;
font-family: inherit; font-size: 14px; font-weight: 500;
box-shadow: none;
}
.ht-pb-buy { text-align: center; display: flex; flex-direction: column; align-items: stretch; gap: 8px; }
.ht-pb-cta { display: block; margin: 8px 0 4px; }
.ht-pb-cta.ht-cta-aus { opacity: 0.45; pointer-events: none; }
.ht-pb-testlink, .ht-vg-testlink { font-size: 14px; font-weight: 600; color: var(--ht-accent-text); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, var(--ht-accent) 60%, transparent); border: 0; }
/* Schlanke Alternativen-Box */
.ht-altbox {
display: grid;
grid-template-columns: 84px 1fr auto auto;
gap: 18px; align-items: center;
background: var(--ht-surface);
border: var(--ht-border);
border-radius: var(--ht-radius-sm);
padding: 14px 18px;
margin-bottom: 12px;
box-shadow: none;
}
.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(--ht-font-sans); font-size: 15px; font-weight: 600; }
.ht-altbox .ht-altbox-sub { font-size: 13px; color: var(--ht-muted); }
/* ---------- Test-Hero / Rasse-Hero ---------- */
.ht-hero-test, .ht-hero-test-block, .ht-hero-rasse {
background: var(--ht-surface);
border: var(--ht-border);
border-radius: var(--ht-radius);
padding: 32px 36px;
margin: 20px 0 32px;
display: grid;
grid-template-columns: 360px 1fr;
gap: 40px;
align-items: center;
box-shadow: none;
}
.ht-hero-img, .ht-hero-img-fallback {
width: 100%; height: 300px;
object-fit: contain;
border: var(--ht-border);
border-radius: var(--ht-radius-sm);
background: #FFFFFF;
display: flex; align-items: center; justify-content: center;
padding: 12px;
}
[data-theme="dark"] .ht-hero-img, [data-theme="dark"] .ht-hero-img-fallback { background: var(--ht-surface-2); }
.ht-hero-titel { margin: 12px 0 10px !important; font-size: clamp(28px, 3.4vw, 42px) !important; line-height: 1.08 !important; letter-spacing: -0.03em; }
.ht-hero-intro { color: var(--ht-muted); font-size: 16px; margin: 0 0 14px; }
.ht-hero-noten { display: flex; align-items: center; gap: 16px; margin: 12px 0 8px; }
.ht-hero-punkte { font-family: var(--ht-font-mono); font-size: 12px; letter-spacing: 0.04em; color: var(--ht-muted); }
.ht-hero-pricebar { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 16px; padding-top: 16px; border-top: var(--ht-border); }
.ht-usps { list-style: none; margin: 14px 0; padding: 0; }
.ht-usps li { padding: 5px 0 5px 30px; position: relative; font-size: 15px; }
.ht-usps li::before {
content: "";
position: absolute; left: 0; top: 7px;
width: 18px; height: 18px; border-radius: 50%;
background: var(--ht-tint-sage);
mask: url("data:image/svg+xml;utf8,") center / 12px no-repeat, linear-gradient(#000 0 0);
-webkit-mask: url("data:image/svg+xml;utf8,") center / 12px no-repeat, linear-gradient(#000 0 0);
mask-composite: exclude; -webkit-mask-composite: xor;
background: var(--ht-good);
}
.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-surface-2); border: 0; border-radius: var(--ht-radius-xs); padding: 12px; text-align: center; }
.ht-rasse-fact b { display: block; font-size: 15px; font-family: var(--ht-font-display); }
.ht-rasse-fact small { color: var(--ht-muted); font-size: 11px; font-family: var(--ht-font-mono); letter-spacing: 0.04em; text-transform: uppercase; }
.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: 6px 0; font-size: 14px; font-weight: 600; border-top: 1px solid var(--ht-line); }
.ht-bones i { font-style: normal; filter: grayscale(1); opacity: 0.25; font-size: 15px; }
.ht-bones i.on { filter: none; opacity: 1; }
/* ---------- Verdict (Testfazit) ---------- */
.ht-verdict {
background: var(--ht-surface);
border: var(--ht-border);
border-radius: var(--ht-radius);
padding: 32px;
margin: 36px 0;
box-shadow: none;
}
.ht-verdict-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.ht-verdict-titel { margin: 0 !important; font-size: 26px !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(--ht-font-display); font-size: 26px; font-weight: 800; display: block; }
.ht-verdict-punkte small { font-family: var(--ht-font-mono); font-size: 10px; color: var(--ht-muted); text-transform: uppercase; letter-spacing: 0.06em; }
.ht-verdict-kriterien { margin: 6px 0 22px; }
.ht-verdict-kriterium { display: grid; grid-template-columns: 220px 1fr 44px; gap: 14px; align-items: center; padding: 8px 0; }
.ht-verdict-k-name { font-size: 14px; font-weight: 600; }
.ht-verdict-k-name small { color: var(--ht-muted); font-weight: 500; }
.ht-verdict-bar { height: 8px; background: var(--ht-surface-2); border: 0; border-radius: 999px; overflow: hidden; }
.ht-verdict-bar i { display: block; height: 100%; background: var(--ht-accent); border-radius: 999px; }
.ht-verdict-k-punkte { font-family: var(--ht-font-mono); font-size: 13px; text-align: right; color: var(--ht-muted); }
.ht-verdict-fazit { font-size: 20px; font-weight: 600; margin: 0 0 20px; font-family: var(--ht-font-display); line-height: 1.35; }
.ht-verdict-fit { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 20px; }
.ht-verdict-fit .ht-panel { margin: 0; }
.ht-verdict-fit h4 { margin: 0 0 8px !important; 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: var(--ht-border); padding-top: 18px; }
/* ---------- 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-tint-sage); }
.ht-winflag {
background: var(--ht-accent); color: var(--ht-accent-fg);
font-family: var(--ht-font-mono); font-size: 11px; font-weight: 500;
text-transform: uppercase; letter-spacing: 0.06em;
padding: 4px 10px; border-radius: 999px; display: inline-block; transform: none;
}
.ht-winflag-red { background: var(--ht-accent-2); color: var(--ht-accent-2-fg); }
.ht-winflag-blue { background: var(--ht-tint-sky); color: var(--ht-tint-sky-fg); }
.ht-toggle-group {
display: inline-flex;
background: var(--ht-surface);
border: var(--ht-border);
border-radius: 999px;
padding: 3px;
margin-bottom: 16px;
box-shadow: none;
}
.ht-toggle-group button {
border: none; background: transparent;
padding: 8px 18px; border-radius: 999px;
font-size: 14px; font-weight: 600;
color: var(--ht-muted); cursor: pointer; font-family: inherit;
}
.ht-toggle-group button.on { background: var(--ht-fg); color: var(--ht-bg); }
.ht-vg-block .ht-vgtable-wrap {
background: var(--ht-surface);
border: var(--ht-border);
border-radius: var(--ht-radius);
overflow-x: auto;
box-shadow: none;
}
table.ht-vg-table { border-collapse: collapse; width: 100%; min-width: 780px; font-size: 14px; }
table.ht-vg-table td { padding: 14px 16px; text-align: center; border-bottom: 1px solid var(--ht-line); 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-family: var(--ht-font-mono); font-weight: 500; color: var(--ht-muted);
font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
width: 150px; background: var(--ht-surface-2);
}
.ht-vg-img { border: var(--ht-border); border-radius: 10px; margin: 6px auto; display: block; max-height: 90px; width: auto; background: #FFFFFF; }
.ht-vg-pname { font-weight: 700; font-size: 15px; display: block; font-family: var(--ht-font-display); }
.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-surface);
border: var(--ht-border);
border-radius: var(--ht-radius);
padding: 20px;
text-align: center;
box-shadow: none;
}
.ht-vg-card-winner { border-color: var(--ht-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ht-accent) 25%, transparent); transform: none; }
.ht-vg-card h3 { font-size: 16px; 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-good); font-weight: 800; }
/* ---------- Art-Cards (Archive, neueste-vergleiche) ---------- */
.ht-art-grid { gap: 24px; }
.ht-art-card {
background: var(--ht-surface);
border: var(--ht-border);
border-radius: 20px;
overflow: hidden;
transition: transform 0.25s var(--ht-ease), box-shadow 0.25s var(--ht-ease), border-color 0.25s var(--ht-ease);
box-shadow: none;
}
.ht-art-card:hover { transform: translateY(-3px); box-shadow: var(--ht-shadow-hover); border-color: var(--ht-accent); }
.ht-art-card-img img { width: 100%; height: 180px; object-fit: cover; border-bottom: var(--ht-border); }
.ht-art-card-body { padding: 18px 20px 20px; }
.ht-art-card-body h3 { font-size: 18px !important; margin: 10px 0 6px; line-height: 1.25; }
.ht-art-card-body h3 a { text-decoration: none; color: var(--ht-fg); }
.ht-art-card-body h3 a:hover { color: var(--ht-accent-text); }
.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: 0; border-bottom: var(--ht-border); border-radius: 0;
display: flex; align-items: center; justify-content: center; font-size: 40px; color: var(--ht-muted);
}
.ht-vgl-karte-meta { font-family: var(--ht-font-mono); font-size: 12px; color: var(--ht-muted); margin-top: 8px; }
.ht-note-mini { float: none; transform: none; border: 0; box-shadow: none; }
.ht-note-mini small { display: none; }
/* ---------- FAQ / Akkordeon ---------- */
.ht-faq, .ht-akkordeon {
background: var(--ht-surface);
border: var(--ht-border);
border-radius: var(--ht-radius-sm);
margin-bottom: 10px;
padding: 0 22px;
box-shadow: none;
}
.ht-faq summary, .ht-akkordeon summary { padding: 16px 0; font-weight: 600; font-size: 17px; cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.ht-faq summary::-webkit-details-marker, .ht-akkordeon summary::-webkit-details-marker { display: none; }
.ht-faq summary::after, .ht-akkordeon summary::after {
content: "";
flex-shrink: 0;
width: 28px; height: 28px; border-radius: 50%;
border: var(--ht-border);
background: url("data:image/svg+xml;utf8,") center / 16px no-repeat;
transition: transform 0.25s var(--ht-ease);
}
.ht-faq[open] summary::after, .ht-akkordeon[open] summary::after { transform: rotate(180deg); }
.ht-faq > :not(summary) { padding-bottom: 18px; font-size: 16px; color: var(--ht-muted); }
.ht-akkordeon-body { padding: 0 0 18px; }
.ht-akkordeon-body > *:first-child { margin-top: 0; }
.ht-akkordeon-body .ht-produktbox { margin: 12px 0; }
/* ---------- Bild ---------- */
.wp-block-image.is-style-ht-sticker img { border: var(--ht-border); border-radius: var(--ht-radius); box-shadow: none; }
.wp-block-image.is-style-ht-sticker figcaption, .wp-block-image figcaption { font-size: 13px; color: var(--ht-muted); margin-top: 8px; }
/* ---------- 404 ---------- */
.ht-404-hero {
display: grid;
grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
gap: 64px;
align-items: center;
padding: clamp(40px, 6vw, 80px) 0 0;
text-align: left;
}
.ht-404-txt { display: flex; flex-direction: column; gap: 22px; align-items: flex-start; max-width: 560px; }
.ht-404-txt > * { margin: 0 !important; }
.ht-404-titel { font-size: clamp(2.5rem, 5.5vw, 4.75rem) !important; line-height: 0.98 !important; font-weight: 800; letter-spacing: -0.04em; }
.ht-404-intro { font-size: 19px; line-height: 1.55; color: var(--ht-muted); }
.ht-404-search { width: 100%; max-width: 460px; margin: 0; }
.ht-404-buttons { gap: 12px; }
.ht-404-buttons .wp-block-button__link { min-height: 48px; padding: 0 22px; display: inline-flex; align-items: center; font-size: 15px; }
.ht-404-visual {
position: relative;
aspect-ratio: 1;
width: 100%;
max-width: 460px;
justify-self: end;
border-radius: 40px;
background: var(--ht-tint-sage);
color: var(--ht-tint-sage-fg);
overflow: hidden;
}
.ht-404-code {
position: absolute; right: 28px; bottom: 12px;
font-family: var(--ht-font-display); font-weight: 800; font-size: clamp(88px, 12vw, 160px); line-height: 1; letter-spacing: -0.06em;
color: var(--ht-surface); opacity: 0.9;
}
[data-theme="dark"] .ht-404-code { color: var(--ht-bg); }
.ht-404-paw { position: absolute; width: 84px; height: 84px; opacity: 0.9; }
.ht-404-paw svg { width: 100%; height: 100%; display: block; }
.ht-404-paw-1 { left: 10%; top: 10%; transform: rotate(-20deg); }
.ht-404-paw-2 { left: 34%; top: 28%; transform: rotate(-12deg); width: 72px; height: 72px; }
.ht-404-paw-3 { left: 22%; top: 52%; transform: rotate(-24deg); width: 64px; height: 64px; opacity: 0.6; }
.ht-404-paw-4 { left: 46%; top: 66%; transform: rotate(-10deg); width: 52px; height: 52px; opacity: 0.35; }
.ht-404-badge, .ht-404-badge-wrap { display: none; }
@media (max-width: 960px) {
.ht-404-hero { grid-template-columns: 1fr; gap: 32px; }
.ht-404-visual { max-width: 320px; margin: 0; }
}
/* ---------- Charts (CSS/SVG) ---------- */
.ht-chart-card { background: var(--ht-surface); border: var(--ht-border); border-radius: var(--ht-radius-sm); padding: 24px; margin: 20px 0; box-shadow: none; }
.ht-donut { width: 170px; height: 170px; border-radius: 50%; border: 0; position: relative; flex-shrink: 0; }
.ht-donut::after { content: ""; position: absolute; inset: 38px; background: var(--ht-surface); border: 0; 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(--ht-font-display); font-size: 26px; font-weight: 800; 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: 14px; height: 14px; border-radius: 4px; border: 0; flex-shrink: 0; }
.ht-legend b { margin-left: auto; font-family: var(--ht-font-mono); font-weight: 500; }
.ht-linechart svg { width: 100%; height: auto; display: block; }
/* ---------- Startseite (Hero neu, alte Pattern-Klassen weich abgefangen) ---------- */
.ht-home-hero {
display: grid;
grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
gap: 64px;
align-items: center;
padding: clamp(40px, 6vw, 72px) 0 0;
text-align: left;
}
.ht-home-hero::before { content: none; }
.ht-home-hero-txt { max-width: 560px; margin: 0; display: flex; flex-direction: column; gap: 24px; align-items: flex-start; }
.ht-home-hero-txt > * { margin: 0 !important; }
.ht-home-titel { font-size: clamp(2.75rem, 6vw, 5.25rem) !important; line-height: 0.98 !important; font-weight: 800; letter-spacing: -0.04em; }
.ht-home-hl { display: inline; background: transparent; color: var(--ht-accent-text); border: 0; box-shadow: none; transform: none; padding: 0; }
.ht-home-intro { font-size: 20px; line-height: 1.55; color: var(--ht-muted); }
.ht-home-buttons { gap: 12px; }
.ht-home-buttons .wp-block-button__link { min-height: 48px; padding: 0 22px; display: inline-flex; align-items: center; font-size: 15px; }
.ht-home-hero-card { min-width: 0; }
.ht-teaser-hero .ht-teaser { padding: 20px; border-radius: 32px; background: var(--ht-surface); border: var(--ht-border); }
.ht-teaser-hero .ht-teaser-media { aspect-ratio: 4 / 3; border-radius: 20px; }
.ht-teaser-hero .ht-teaser-titel { font-size: 28px !important; }
.ht-teaser-hero .ht-teaser-body { padding: 0 8px 8px; }
.ht-home-search { max-width: 460px; margin: 0; }
.ht-hero-stats { display: flex; gap: 12px; flex-wrap: wrap; font-size: 13px; color: var(--ht-muted); }
.ht-hero-stats span { padding: 12px 16px; border-radius: 14px; background: var(--ht-surface); border: var(--ht-border); }
.ht-hero-stats b { display: block; font-family: var(--ht-font-display); font-size: 24px; font-weight: 800; color: var(--ht-fg); letter-spacing: -0.02em; }
.ht-home-sektion { margin: 56px 0 24px !important; font-size: clamp(28px, 3.2vw, 40px) !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: 600; color: var(--ht-accent-text); border: 0; }
/* Alte „Tierwelt"-Karten aus dem v1-Pattern: sauber, aber ohne Sticker */
.ht-welt-grid { gap: 20px; }
.ht-welt-karte { background: var(--ht-surface); border: var(--ht-border); border-radius: 28px; padding: 28px 24px; text-align: center; transition: transform 0.25s var(--ht-ease), box-shadow 0.25s var(--ht-ease); height: 100%; position: relative; box-shadow: none; }
.ht-welt-karte:hover { transform: translateY(-3px); box-shadow: var(--ht-shadow-hover); }
.ht-welt-icon { font-size: 40px; margin: 0 0 6px !important; }
.ht-welt-karte h3 { margin: 0 0 4px !important; }
.ht-welt-sub { color: var(--ht-muted); font-size: 14px; margin: 0 0 14px !important; }
.ht-welt-karte .wp-block-buttons { justify-content: center; }
.ht-welt-zahl { position: static; display: inline-flex; background: transparent; border: var(--ht-border); border-radius: 999px; font-family: var(--ht-font-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ht-muted); padding: 4px 10px; transform: none; box-shadow: none; margin: 0 0 10px !important; font-weight: 500; }
.ht-home-trust { background: var(--ht-surface); border: var(--ht-border); border-radius: var(--ht-radius); padding: 10px 32px 24px; margin: 56px 0 0; box-shadow: none; }
.ht-home-trust .ht-home-sektion { margin-top: 18px !important; }
.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: 11px; 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; padding: 0; border: 0; background: transparent; }
/* Newsletter-Band aus v1-Pattern (blau) → dunkles Band */
.ht-newsletter-band::after { content: none; }
.ht-newsletter-band > * { position: relative; z-index: 1; }
/* ---------- Hub-Hero (Tier- und Themen-Hub) ---------- */
.ht-hub-hero { padding: 24px 0 0; max-width: 820px; }
.ht-hub-hero .ht-chip { margin: 0 0 16px !important; }
.ht-hub-titel { font-size: clamp(40px, 6vw, 84px) !important; line-height: 0.98 !important; letter-spacing: -0.04em; margin: 0 !important; }
.ht-hub-intro { font-size: 20px; line-height: 1.55; color: var(--ht-muted); margin: 20px 0 0 !important; max-width: 620px; }
.ht-hub-intro .wp-block-post-excerpt__more-text { display: none; }
.ht-hub-content .wp-block-post-content > * + * { margin-top: 1.25em; }
.ht-hub-content .wp-block-post-content p { font-size: 18px; line-height: 1.7; }
.ht-hub-content .wp-block-post-content h2 { font-size: clamp(26px, 2.6vw, 34px); margin-top: 1.6em; }
@media (max-width: 960px) {
.ht-home-hero { grid-template-columns: 1fr; gap: 32px; }
.ht-home-hero-txt { max-width: none; }
.ht-hero-test, .ht-hero-test-block, .ht-hero-rasse { grid-template-columns: 1fr; padding: 22px; }
.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; }
}
@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; }
.ht-verdict { padding: 22px; }
.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; }
.ht-panel, .wp-block-group[class*="is-style-ht-panel-"] { padding: 18px 20px; }
ul.ht-list-icons { padding: 16px; }
}
/* ---------- Sterne-Bewertung (1–5) ---------- */
.ht-stars { display: inline-flex; align-items: center; gap: 2px; vertical-align: middle; line-height: 1; }
.ht-stars svg { display: block; flex-shrink: 0; }
.ht-star-fg { fill: var(--ht-accent); }
.ht-star-bg { fill: color-mix(in srgb, var(--ht-accent) 22%, transparent); }
.ht-stars-value { margin-left: 6px; font-family: var(--ht-font-display); font-weight: 800; font-size: 1.05em; letter-spacing: -0.02em; }
.ht-stars-wort { margin-left: 6px; font-family: var(--ht-font-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ht-muted); }
.ht-stars-badge {
display: inline-flex; align-items: center; gap: 12px;
padding: 10px 14px; border-radius: 14px;
background: var(--ht-tint-sage); color: var(--ht-tint-sage-fg);
}
.ht-stars-badge .ht-star-fg { fill: var(--ht-tint-sage-fg); }
.ht-stars-badge .ht-star-bg { fill: color-mix(in srgb, var(--ht-tint-sage-fg) 22%, transparent); }
.ht-stars-badge-plain { background: var(--ht-surface-2); color: var(--ht-fg); padding: 6px 10px; gap: 8px; }
.ht-stars-badge-plain .ht-star-fg { fill: var(--ht-accent); }
.ht-stars-badge-plain .ht-star-bg { fill: color-mix(in srgb, var(--ht-accent) 22%, transparent); }
.ht-stars-badge-txt { display: inline-flex; flex-direction: column; line-height: 1.05; }
.ht-stars-badge-txt b { font-family: var(--ht-font-display); font-weight: 800; font-size: 20px; letter-spacing: -0.02em; }
.ht-stars-badge-txt small { font-family: var(--ht-font-mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.8; margin-top: 2px; }
.ht-stars-badge-plain .ht-stars-badge-txt b { font-size: 15px; }
.ht-stars-badge-plain .ht-stars-badge-txt small { display: none; }
.ht-note-mini.ht-stars { background: transparent; color: var(--ht-fg); padding: 0; }
.ht-note-mini.ht-stars .ht-stars-value { font-size: 14px; color: var(--ht-fg); }
.ht-verdict-k-punkte { white-space: nowrap; }
/* Produktbox: Streichpreis, Status, Bildwechsel */
.ht-price-streich { display: block; font-size: 15px; font-weight: 500; color: var(--ht-muted); text-decoration: line-through; font-family: var(--ht-font-sans); letter-spacing: 0; margin-top: 2px; }
.ht-price-streich[hidden] { display: none; }
.ht-pb-status { margin: 0 0 6px !important; font-size: 13px; color: var(--ht-bad); }
.ht-pb-status[hidden] { display: none; }
.ht-pb-opt-aus { color: var(--ht-muted); }
.ht-pb-img { transition: opacity 0.2s var(--ht-ease); }
.ht-pb-img.is-switching { opacity: 0.4; }
.ht-vg-img { object-fit: contain; max-width: 120px; }
/* Collage: Produktbilder als Ersatz für fehlende Vergleichs-Bilder */
.ht-collage { display: flex; width: 100%; height: 100%; align-items: center; justify-content: center; gap: 8px; padding: 12px; box-sizing: border-box; background: #FFFFFF; }
[data-theme="dark"] .ht-collage { background: var(--ht-surface-2); }
.ht-collage-item { flex: 1 1 0; min-width: 0; height: 100%; display: flex; align-items: center; justify-content: center; }
.ht-collage-img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.ht-collage-1 .ht-collage-item { flex: 0 1 60%; }
.ht-vgl-karte-collage { height: 160px; border-bottom: var(--ht-border); }
.ht-teaser-media .ht-collage { border-radius: inherit; }
/* Platzhalter ohne Bild: ruhig statt „kaputt" */
.ht-teaser-ph { display: flex; width: 100%; height: 100%; align-items: center; justify-content: center; color: var(--ht-muted); background: var(--ht-surface-2); }
.ht-vgl-karte-ph { color: var(--ht-muted); background: var(--ht-surface-2); }
/* ---------- Card: Highlight (auffälliger Rahmen) und Rahmen ---------- */
.ht-panel-highlight {
background: var(--ht-surface);
border: 2px solid var(--ht-accent);
box-shadow: 10px 12px 28px -6px color-mix(in srgb, var(--ht-accent) 38%, transparent), 4px 6px 10px -4px color-mix(in srgb, var(--ht-accent) 22%, transparent);
border-radius: var(--ht-radius-sm);
margin: 32px 12px 40px 0;
padding: 24px 28px;
}
[data-theme="dark"] .ht-panel-highlight { box-shadow: 10px 12px 28px -6px rgba(0, 0, 0, 0.55), 4px 6px 10px -4px color-mix(in srgb, var(--ht-accent) 25%, transparent); }
.ht-panel-highlight > h2, .ht-panel-highlight > h3, .ht-panel-highlight > h4 { color: var(--ht-accent-text); }
.ht-panel-highlight > h2 { font-size: 22px !important; }
.ht-panel-highlight ul:not(.is-style-ht-schlicht) > li::before { background: var(--ht-accent); }
.ht-panel-rahmen { background: transparent; border: 1px solid var(--ht-line); }
/* ---------- Tipp (Praxistipp mit auffälligem Icon) ---------- */
.ht-tipp {
position: relative;
display: flex;
gap: 20px;
align-items: flex-start;
margin: 40px 0 32px;
padding: 26px 28px 26px 26px;
border-radius: 20px;
border: 2px solid var(--ht-accent-2);
background: var(--ht-surface);
box-shadow: 10px 12px 28px -6px color-mix(in srgb, var(--ht-accent-2) 32%, transparent), 4px 6px 10px -4px color-mix(in srgb, var(--ht-accent-2) 18%, transparent);
margin-right: 12px;
}
.ht-tipp-icon {
display: inline-flex; align-items: center; justify-content: center;
width: 60px; height: 60px; flex-shrink: 0;
border-radius: 18px;
background: var(--ht-accent-2);
color: var(--ht-accent-2-fg);
margin-top: -42px;
box-shadow: 0 0 0 5px var(--ht-bg);
transform: rotate(-6deg);
}
.ht-tipp-body { min-width: 0; flex: 1; }
.ht-tipp-label {
margin: 0 0 4px !important;
font-family: var(--ht-font-mono); font-size: 11px !important; letter-spacing: 0.1em; text-transform: uppercase;
color: var(--ht-accent-2);
}
[data-theme="dark"] .ht-tipp-label { color: var(--ht-tint-clay-fg); }
[data-theme="dark"] .ht-tipp { box-shadow: 10px 12px 28px -6px rgba(0, 0, 0, 0.55), 4px 6px 10px -4px color-mix(in srgb, var(--ht-accent-2) 22%, transparent); }
.ht-tipp-titel { margin: 0 0 10px !important; font-size: 22px !important; letter-spacing: -0.01em; line-height: 1.2; }
.ht-tipp-inhalt > * + * { margin-top: 0.8em; }
.ht-tipp-inhalt p { font-size: 16px !important; line-height: 1.6; margin: 0; }
.ht-tipp-inhalt > :last-child { margin-bottom: 0; }
@media (max-width: 640px) {
.ht-tipp { flex-direction: column; gap: 10px; padding: 22px 20px; margin-top: 48px; }
.ht-tipp-icon { margin-top: -50px; width: 52px; height: 52px; }
}