).
3. Heading direkt vor mit CTA-Anker brauchen mehr Top-Abstand,
unabhängig davon ob :only-child oder nicht.
*/
/* Plugin-CTAs: jedes
das eine CTA-Klasse enthält bekommt vertikale Luft */
.sav-prose p:has(a.abus-cta),
.sav-prose p:has(a.bks-cta),
.sav-prose p:has(a.dom-cta),
.sav-prose p:has(a.ikon-cta),
.sav-prose p:has(a.winkhaus-cta),
.sav-prose p:has(a.keso-cta),
.sav-prose p:has(a.sav-cta) {
margin-top: 2rem;
margin-bottom: 2.5rem;
}
/* Nach Heading: noch etwas mehr Top-Abstand */
.sav-prose h1 + p:has(a.abus-cta),
.sav-prose h2 + p:has(a.abus-cta),
.sav-prose h3 + p:has(a.abus-cta),
.sav-prose h1 + p:has(a.bks-cta),
.sav-prose h2 + p:has(a.bks-cta),
.sav-prose h3 + p:has(a.bks-cta),
.sav-prose h1 + p:has(a.dom-cta),
.sav-prose h2 + p:has(a.dom-cta),
.sav-prose h3 + p:has(a.dom-cta),
.sav-prose h1 + p:has(a.ikon-cta),
.sav-prose h2 + p:has(a.ikon-cta),
.sav-prose h3 + p:has(a.ikon-cta),
.sav-prose h1 + p:has(a.winkhaus-cta),
.sav-prose h2 + p:has(a.winkhaus-cta),
.sav-prose h3 + p:has(a.winkhaus-cta),
.sav-prose h1 + p:has(a.keso-cta),
.sav-prose h2 + p:has(a.keso-cta),
.sav-prose h3 + p:has(a.keso-cta),
.sav-prose h1 + p:has(a.sav-cta),
.sav-prose h2 + p:has(a.sav-cta),
.sav-prose h3 + p:has(a.sav-cta) {
margin-top: 2.5rem;
}
/* Ratgeber-Hub: .rg-cta Box (Highlight-Box mit eingebettetem Anker) */
.sav-prose .rg-cta,
.rg-cta {
margin-top: 2.5rem !important;
margin-bottom: 2.5rem !important;
}
.sav-prose h1 + .rg-cta,
.sav-prose h2 + .rg-cta,
.sav-prose h3 + .rg-cta,
.sav-prose p + .rg-cta {
margin-top: 2.5rem !important;
}
/* Anker innerhalb .rg-cta: 12px Luft zum Text darüber */
.rg-cta a {
margin-top: 0.75rem !important;
}
/* Haussicherheit-Hub nutzt generisches .btn (nicht .sav-btn).
Wenn direkt nach Heading/Paragraph kommt, Abstand wahren. */
.sav-prose h1 + a.btn,
.sav-prose h2 + a.btn,
.sav-prose h3 + a.btn,
.sav-prose h4 + a.btn {
display: inline-block;
margin-top: 1.5rem;
}
.sav-prose p + a.btn {
display: inline-block;
margin-top: 1.25rem;
}
/* Mobile: nicht reduzieren (User-Vorgabe) */
@media (max-width: 768px) {
.sav-prose .wp-block-buttons,
.sav-prose .wp-block-button,
.sav-prose p:has(> a.abus-cta:only-child),
.sav-prose p:has(> a.bks-cta:only-child),
.sav-prose p:has(> a.dom-cta:only-child),
.sav-prose p:has(> a.ikon-cta:only-child),
.sav-prose p:has(> a.winkhaus-cta:only-child),
.sav-prose p:has(> a.keso-cta:only-child),
.sav-prose p:has(> a.sav-cta:only-child),
.sav-prose p:has(a.abus-cta),
.sav-prose p:has(a.bks-cta),
.sav-prose p:has(a.dom-cta),
.sav-prose p:has(a.ikon-cta),
.sav-prose p:has(a.winkhaus-cta),
.sav-prose p:has(a.keso-cta),
.sav-prose p:has(a.sav-cta) {
margin-top: 2rem;
margin-bottom: 2.5rem;
}
.sav-prose .rg-cta,
.rg-cta {
margin-top: 2.5rem !important;
margin-bottom: 2.5rem !important;
}
}
/* ---------- Pills & Badges ---------- */
.sav-pill {
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding: 0.3em 0.9em;
background: var(--neutral-100);
color: var(--neutral-700);
border-radius: var(--radius-full);
font-size: var(--text-xs);
font-weight: var(--font-weight-medium);
line-height: 1.4;
}
.sav-pill--brand { background: var(--brand-orange-soft); color: var(--brand-orange); }
.sav-pill--success { background: rgba(16,185,129,0.1); color: var(--success); }
.sav-pill--dark { background: var(--brand-anthracite-dark); color: var(--white); }
.sav-badge {
display: inline-block;
padding: 0.2em 0.6em;
font-size: 0.7em;
font-weight: var(--font-weight-bold);
text-transform: uppercase;
letter-spacing: 0.05em;
border-radius: var(--radius-sm);
background: var(--brand-orange);
color: var(--white);
}
.sav-badge--dark { background: var(--brand-anthracite-dark); }
.sav-badge--success { background: var(--success); }
/* ---------- Cards ---------- */
.sav-card {
background: var(--white);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
padding: var(--space-5);
transition: transform var(--duration-base) var(--ease-out),
box-shadow var(--duration-base) var(--ease-out);
border: 1px solid var(--neutral-200);
}
.sav-card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-lg);
}
.sav-card--flat { box-shadow: none; }
.sav-card--brand {
background: var(--brand-orange-soft);
border-color: var(--brand-orange-soft);
}
.sav-card-title {
font-size: var(--text-lg);
font-weight: var(--font-weight-bold);
margin-bottom: var(--space-3);
color: var(--neutral-900);
}
.sav-card-text {
color: var(--neutral-600);
font-size: var(--text-sm);
line-height: var(--leading-relaxed);
}
/* Pillar-Card (3 Hauptbereiche auf Homepage) */
.sav-pillar-card {
background: var(--white);
border-radius: var(--radius-lg);
padding: var(--space-6);
border: 1px solid var(--neutral-200);
position: relative;
overflow: hidden;
transition: all var(--duration-base) var(--ease-out);
}
.sav-pillar-card::before {
content: '';
position: absolute;
top: 0; left: 0;
width: 100%; height: 4px;
background: var(--brand-orange);
transform: scaleX(0);
transform-origin: left;
transition: transform var(--duration-slow) var(--ease-out);
}
.sav-pillar-card:hover {
transform: translateY(-6px);
box-shadow: var(--shadow-xl);
border-color: var(--brand-orange-soft);
}
.sav-pillar-card:hover::before { transform: scaleX(1); }
.sav-pillar-card__icon {
width: 56px; height: 56px;
background: var(--brand-orange-soft);
color: var(--brand-orange);
border-radius: var(--radius-md);
display: inline-flex;
align-items: center;
justify-content: center;
margin-bottom: var(--space-4);
transition: transform var(--duration-base) var(--ease-spring);
}
.sav-pillar-card:hover .sav-pillar-card__icon {
transform: scale(1.1) rotate(-3deg);
}
.sav-pillar-card__icon svg { width: 28px; height: 28px; }
/* Pillar-Card-Heading: auf Mobile kompakter, damit lange Überschriften wie
* "Schließanlage konfigurieren" + "Schließzylinder kaufen" nicht abgeschnitten werden. */
.sav-pillar-card h3 {
hyphens: auto;
word-break: break-word;
overflow-wrap: anywhere;
line-height: 1.25;
}
@media (max-width: 720px) {
.sav-pillar-card { padding: var(--space-5); }
.sav-pillar-card h3 {
font-size: clamp(1.1rem, 5vw, 1.35rem);
margin-top: 0;
margin-bottom: var(--space-2);
}
}
/* Marken-Card (Grid auf Homepage + Pillars) */
.sav-marken-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--space-3);
}
@media (min-width: 768px) { .sav-marken-grid { grid-template-columns: repeat(6, 1fr); } }
.sav-marken-card {
background: var(--white);
border: 1px solid var(--neutral-200);
border-radius: var(--radius-md);
padding: var(--space-5) var(--space-3);
display: flex;
align-items: center;
justify-content: center;
min-height: 100px;
transition: all var(--duration-base) var(--ease-out);
text-decoration: none;
color: inherit;
}
.sav-marken-card:hover {
border-color: var(--brand-orange);
background: var(--brand-orange-soft);
transform: scale(1.05);
}
.sav-marken-card img {
max-height: 50px;
max-width: 120px;
object-fit: contain;
filter: none;
transition: filter var(--duration-base) var(--ease-out);
}
.sav-marken-card:hover img { filter: none; }
.sav-marken-card__label {
font-weight: var(--font-weight-bold);
font-size: var(--text-base);
color: var(--neutral-700);
}
.sav-marken-card:hover .sav-marken-card__label { color: var(--brand-orange); }
.sav-brand-card__logo {
display: block;
width: auto;
max-width: 180px;
max-height: 58px;
object-fit: contain;
margin: 0 auto var(--space-4);
filter: none;
opacity: 1;
transition: filter var(--duration-base) var(--ease-out), opacity var(--duration-base) var(--ease-out);
}
.sav-brand-card:hover .sav-brand-card__logo {
filter: none;
opacity: 1;
}
.sav-pz-brands .sav-brand-card__logo {
max-width: 170px;
max-height: 54px;
margin-bottom: 14px;
}
/* ---------- Trust-Bar ---------- */
.sav-trust-bar {
display: flex;
flex-wrap: wrap;
gap: var(--space-4) var(--space-8);
align-items: center;
justify-content: center;
padding: var(--space-4) var(--space-5);
background: var(--neutral-50);
border-radius: var(--radius-md);
font-size: var(--text-sm);
color: var(--neutral-600);
}
.sav-trust-bar__item {
display: inline-flex;
align-items: center;
gap: var(--space-2);
white-space: nowrap;
}
.sav-trust-bar__item svg { color: var(--brand-orange); width: 18px; height: 18px; }
.sav-trust-bar__item strong { color: var(--neutral-900); font-weight: var(--font-weight-semibold); }
/* ---------- Forms ---------- */
.sav-form-field { margin-bottom: var(--space-4); }
.sav-form-field label {
display: block;
margin-bottom: var(--space-2);
font-weight: var(--font-weight-medium);
color: var(--neutral-700);
font-size: var(--text-sm);
}
input[type="text"], input[type="email"], input[type="tel"], input[type="number"],
input[type="search"], input[type="url"], input[type="password"],
select, textarea,
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
width: 100%;
padding: 0.75em 1em;
border: 1.5px solid var(--neutral-300);
border-radius: var(--radius-md);
font-family: var(--font-sans);
font-size: var(--text-base);
color: var(--neutral-900);
background: var(--white);
transition: border-color var(--duration-fast) var(--ease-out),
box-shadow var(--duration-fast) var(--ease-out);
}
input:focus, select:focus, textarea:focus {
outline: none;
border-color: var(--brand-orange);
box-shadow: 0 0 0 3px var(--brand-orange-shadow);
}
/* ---------- Accordion (FAQ) ---------- */
.sav-accordion { border-top: 1px solid var(--neutral-200); }
.sav-accordion__item {
border-bottom: 1px solid var(--neutral-200);
}
.sav-accordion__trigger {
width: 100%;
background: none;
border: none;
padding: var(--space-5) 0;
text-align: left;
font-family: var(--font-sans);
font-size: var(--text-lg);
font-weight: var(--font-weight-semibold);
color: var(--neutral-900);
cursor: pointer;
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-4);
transition: color var(--duration-fast) var(--ease-out);
}
.sav-accordion__trigger:hover { color: var(--brand-orange); }
.sav-accordion__icon {
flex-shrink: 0;
width: 28px; height: 28px;
background: var(--neutral-100);
color: var(--brand-orange);
border-radius: var(--radius-full);
display: inline-flex; align-items: center; justify-content: center;
transition: transform var(--duration-base) var(--ease-spring),
background var(--duration-fast) var(--ease-out);
font-weight: var(--font-weight-bold);
font-size: var(--text-base);
}
.sav-accordion__item.is-open .sav-accordion__icon {
transform: rotate(45deg);
background: var(--brand-orange);
color: var(--white);
}
.sav-accordion__panel {
max-height: 0;
overflow: hidden;
transition: max-height var(--duration-slow) var(--ease-out);
color: var(--neutral-600);
}
.sav-accordion__panel-inner { padding: 0 0 var(--space-5) 0; }
/* ---------- Toast ---------- */
.sav-toast {
position: fixed;
bottom: var(--space-6);
right: var(--space-6);
max-width: 360px;
background: var(--white);
border-left: 4px solid var(--brand-orange);
padding: var(--space-4) var(--space-5);
border-radius: var(--radius-md);
box-shadow: var(--shadow-xl);
z-index: var(--z-toast);
display: flex;
align-items: flex-start;
gap: var(--space-3);
animation: sav-toast-in 0.3s var(--ease-out);
}
.sav-toast--success { border-color: var(--success); }
.sav-toast--warning { border-color: var(--warning); }
.sav-toast--error { border-color: var(--error); }
/* ---------- Hero (default 2-column) ---------- */
.sav-hero {
position: relative;
padding-block: var(--space-10) var(--space-12);
background:
radial-gradient(ellipse 1200px 480px at 20% 0%, rgba(255,102,0,0.06), transparent 60%),
radial-gradient(ellipse 800px 400px at 90% 100%, rgba(61,61,61,0.04), transparent 60%),
var(--white);
overflow: hidden;
}
/* Subtiles Grid-Pattern für etwas Tiefe */
.sav-hero::before {
content: '';
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(0,0,0,0.025) 1px, transparent 1px),
linear-gradient(90deg, rgba(0,0,0,0.025) 1px, transparent 1px);
background-size: 56px 56px;
background-position: center center;
-webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
pointer-events: none;
z-index: 0;
opacity: 1;
}
.sav-hero > * { position: relative; z-index: 1; }
.sav-hero__inner {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-6);
align-items: center;
}
@media (min-width: 1024px) {
.sav-hero__inner { grid-template-columns: 1.1fr 1fr; gap: var(--space-10); }
}
.sav-hero__title {
font-size: var(--text-4xl);
font-weight: var(--font-weight-extra);
line-height: 1.2;
letter-spacing: -0.02em;
color: var(--neutral-900);
margin-bottom: var(--space-4);
}
.sav-hero__subtitle {
font-size: var(--text-lg);
color: var(--neutral-600);
margin-bottom: var(--space-6);
max-width: 56ch;
}
.sav-hero__cta-row {
display: flex;
flex-wrap: wrap;
gap: var(--space-3);
}
.sav-hero__image {
border-radius: var(--radius-xl);
overflow: hidden;
box-shadow: var(--shadow-xl);
background: var(--neutral-100);
}
.sav-hero__image img { display: block; width: 100%; height: auto; }
/* ---------- Hero Compact (Startseite, text-only — Banner kommt darunter) ---------- */
.sav-hero--compact {
padding-block: var(--space-10) var(--space-8);
}
.sav-hero--compact .sav-hero__compact-inner {
max-width: 1024px;
margin: 0 auto;
text-align: center;
}
.sav-hero--compact .sav-hero__title {
margin-inline: auto;
max-width: 22ch;
}
.sav-hero--compact .sav-hero__subtitle {
margin-inline: auto;
max-width: 62ch;
}
.sav-hero--compact .sav-hero__cta-row {
justify-content: center;
}
.sav-hero__trust-inline {
margin-top: var(--space-6);
display: flex;
flex-wrap: wrap;
gap: var(--space-5);
justify-content: center;
color: var(--neutral-600);
font-size: var(--text-sm);
}
/* ---------- Hero mit Banner als Background (kombiniert) ---------- */
.sav-hero--banner {
position: relative;
width: 100vw;
left: 50%;
margin-left: -50vw;
margin-right: -50vw;
max-width: 100vw;
min-height: clamp(420px, 56vh, 640px);
padding: var(--space-10) 0;
background-color: #6E6E6E;
background-size: cover;
background-position: center right;
background-repeat: no-repeat;
display: flex;
align-items: center;
overflow: hidden;
isolation: isolate;
}
/* Dunkler Gradient links — sorgt für Text-Lesbarkeit über dem Banner-Hintergrund */
.sav-hero--banner__overlay {
position: absolute;
inset: 0;
background: linear-gradient(90deg,
rgba(26, 26, 26, 0.82) 0%,
rgba(26, 26, 26, 0.65) 32%,
rgba(26, 26, 26, 0.25) 55%,
rgba(26, 26, 26, 0) 75%
);
z-index: 1;
}
.sav-hero--banner .sav-container--wide { position: relative; z-index: 2; }
.sav-hero--banner__grid {
display: grid;
grid-template-columns: minmax(0, 1fr);
align-items: center;
}
.sav-hero--banner__content { max-width: 600px; }
@media (max-width: 900px) {
.sav-hero--banner {
min-height: auto;
padding: var(--space-8) 0;
background-position: center;
}
.sav-hero--banner__overlay {
background: linear-gradient(180deg,
rgba(26, 26, 26, 0.82) 0%,
rgba(26, 26, 26, 0.7) 55%,
rgba(26, 26, 26, 0.85) 100%
);
}
}
/* Sanfter floating Orange-Akzent oben rechts (statt der harten Blasen vorher) */
.sav-hero::after {
content: '';
position: absolute;
width: 520px; height: 520px;
top: -260px; right: -180px;
border-radius: 50%;
background: radial-gradient(circle, rgba(255,102,0,0.12) 0%, transparent 70%);
pointer-events: none;
z-index: 0;
animation: sav-pulse-soft 12s ease-in-out infinite;
}
@keyframes sav-pulse-soft {
0%, 100% { transform: scale(1) translate(0,0); opacity: 1; }
50% { transform: scale(1.1) translate(-20px, 20px); opacity: 0.7; }
}
/* ---------- Such-Overlay ---------- */
.sav-search-overlay {
position: fixed;
inset: 0;
z-index: var(--z-modal);
display: flex;
align-items: flex-start;
justify-content: center;
padding-top: 12vh;
}
.sav-search-overlay[hidden] { display: none; }
.sav-search-overlay__backdrop {
position: absolute;
inset: 0;
background: rgba(26, 26, 26, 0.65);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
animation: sav-fade-in 0.2s ease-out;
}
.sav-search-overlay__panel {
position: relative;
width: 100%;
max-width: 680px;
margin: 0 var(--space-5);
background: var(--white);
border-radius: var(--radius-xl);
padding: var(--space-8) var(--space-6) var(--space-6);
box-shadow: var(--shadow-xl);
animation: sav-pop-in 0.25s var(--ease-spring);
}
.sav-search-overlay__close {
position: absolute;
top: var(--space-4);
right: var(--space-4);
width: 40px; height: 40px;
border: none;
background: var(--neutral-100);
color: var(--neutral-700);
border-radius: var(--radius-md);
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
transition: all var(--duration-fast) var(--ease-out);
}
.sav-search-overlay__close:hover {
background: var(--brand-orange);
color: var(--white);
transform: rotate(90deg);
}
.sav-search-overlay__close svg { width: 20px; height: 20px; }
.sav-search-overlay__label {
display: block;
font-size: var(--text-sm);
font-weight: var(--font-weight-bold);
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--brand-orange);
margin-bottom: var(--space-3);
}
.sav-search-overlay__inputwrap {
position: relative;
display: flex;
align-items: center;
border: 2px solid var(--neutral-200);
border-radius: var(--radius-md);
transition: border-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);
}
.sav-search-overlay__inputwrap:focus-within {
border-color: var(--brand-orange);
box-shadow: 0 0 0 4px var(--brand-orange-shadow);
}
.sav-search-overlay__icon {
width: 22px; height: 22px;
color: var(--neutral-500);
margin-left: var(--space-4);
flex-shrink: 0;
}
.sav-search-overlay__inputwrap input[type="search"] {
flex: 1;
border: none !important;
padding: var(--space-4) var(--space-4) !important;
font-size: var(--text-lg) !important;
background: transparent;
color: var(--neutral-900);
outline: none;
box-shadow: none !important;
}
.sav-search-overlay__inputwrap input[type="search"]::-webkit-search-cancel-button { display: none; }
.sav-search-overlay__submit {
margin-top: var(--space-4);
width: 100%;
padding: var(--space-4) var(--space-5);
background: var(--brand-orange);
color: var(--white);
border: none;
border-radius: var(--radius-md);
font-weight: var(--font-weight-bold);
font-size: var(--text-base);
cursor: pointer;
box-shadow: var(--shadow-brand);
transition: all var(--duration-fast) var(--ease-out);
}
.sav-search-overlay__submit:hover {
background: var(--brand-orange-hover);
transform: translateY(-1px);
}
.sav-search-overlay__hints {
margin-top: var(--space-5);
padding-top: var(--space-4);
border-top: 1px solid var(--neutral-200);
font-size: var(--text-sm);
color: var(--neutral-500);
display: flex;
flex-wrap: wrap;
gap: var(--space-2) var(--space-3);
align-items: center;
}
.sav-search-overlay__hints a {
display: inline-flex;
padding: 0.3em 0.8em;
background: var(--neutral-100);
color: var(--neutral-700);
border-radius: var(--radius-full);
text-decoration: none;
font-weight: var(--font-weight-medium);
transition: all var(--duration-fast) var(--ease-out);
}
.sav-search-overlay__hints a:hover {
background: var(--brand-orange-soft);
color: var(--brand-orange);
}
@keyframes sav-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes sav-pop-in {
from { opacity: 0; transform: scale(0.95) translateY(-10px); }
to { opacity: 1; transform: scale(1) translateY(0); }
}
/* ---------- TOC (Table of Contents) ---------- */
.sav-toc {
background: var(--neutral-50);
border-radius: var(--radius-md);
padding: var(--space-5);
margin-bottom: var(--space-8);
}
.sav-toc__title {
font-size: var(--text-sm);
font-weight: var(--font-weight-bold);
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--neutral-500);
margin-bottom: var(--space-3);
}
.sav-toc ol { padding-left: 1.4em; margin: 0; }
.sav-toc li { margin-bottom: var(--space-2); }
.sav-toc a {
color: var(--neutral-700);
font-weight: var(--font-weight-medium);
}
.sav-toc a:hover { color: var(--brand-orange); }
/* ====== Hero Personenfotos (Trust) ====== */
.sav-hero__faces {
margin-top: var(--space-6);
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-4);
flex-wrap: wrap;
}
.sav-hero__faces-imgs { display: inline-flex; }
.sav-hero__face {
width: 124px;
height: 124px;
border-radius: 50%;
display: inline-block;
background-size: cover;
background-position: center 20%;
background-repeat: no-repeat;
background-color: #ffffff;
border: 5px solid #ffffff;
outline: 4px solid var(--brand-orange);
box-shadow: 0 12px 30px rgba(15,23,42,.20), 0 0 0 10px rgba(255,102,0,.12);
}
.sav-hero__face + .sav-hero__face { margin-left: -34px; }
.sav-hero__faces-caption {
font-size: var(--text-base);
color: var(--neutral-600);
text-align: left;
line-height: 1.35;
}
@media (max-width: 600px) {
.sav-hero__faces { gap: var(--space-2); }
.sav-hero__face {
width: 104px;
height: 104px;
}
.sav-hero__face + .sav-hero__face { margin-left: -30px; }
.sav-hero__faces-caption { text-align: center; }
}
/* ====== Marken-Karten: Logo + Wortmarke gestapelt ====== */
.sav-marken-card { flex-direction: column; gap: var(--space-2); }
.sav-marken-card__logo {
max-height: 36px;
max-width: 120px;
object-fit: contain;
filter: none;
opacity: 1;
transition: filter var(--duration-base) var(--ease-out), opacity var(--duration-base) var(--ease-out);
}
.sav-marken-card:hover .sav-marken-card__logo { filter: none; opacity: 1; }
.sav-marken-card__label { font-size: var(--text-sm); }
/* Free-shipping USP highlight in the single-product trust bar */
.sav-trust-bar__item--usp strong { color: var(--sav-accent, #1f6feb); }
/* round 2: higher-contrast single-product trust bar + brand-colored free-shipping USP */
.sav-trust-bar__item { color: #2b2f38; font-weight: 500; }
.sav-trust-bar__item--usp strong { color: #ff6600; }