/* ============================================================
mybidet v13 — Bold Edition
yfood-orientierte Conversion-Auffrischung (ADDITIV).
Alle Klassen mit yf- Prefix → keine Kollision mit Bestand.
Nutzt vorhandene Design-Tokens aus tokens.css.
============================================================ */
/* ============================================================
AUDIT v14 — Headline-Schrift: Archivo (selbst gehostet, DSGVO-konform).
Variable Font 100–900; ersetzt Bricolage als Display-Schrift.
DM Sans bleibt Fließtext.
============================================================ */
@font-face {
font-family: "Archivo";
font-style: normal;
font-weight: 100 900;
font-display: swap;
src: url("/assets/fonts/archivo-latin.woff2") format("woff2");
}
/* ============================================================
REBRAND: Verpackungs-Identität (Beige + Olivgrün + Wasser)
Farben direkt aus den neuen Verpackungen gezogen:
Creme #F5EDDF Navy #14224A
Oliv/Sage#7E9C85 tief #56703F
Wasser (Mint/Teal) bleibt erhalten = "in Kombination mit Wasser"
============================================================ */
:root {
/* Neue Marken-Variablen */
--yf-cream: #f5eddf;
--yf-cream-soft: #fbf4ea;
--yf-cream-card: #fffdf8;
--yf-olive: #7e9c85;
--yf-olive-deep: #56703f;
--yf-olive-pale: #e7ede0;
--yf-navy: #14224a;
--yf-water: #3bb4c4;
/* Headline-Schrift auf Archivo umstellen (Body bleibt DM Sans) */
--font-display: "Archivo", "Bricolage Grotesque", "Mona Sans", system-ui, sans-serif;
/* Bestehende Tokens auf die neue Palette umbiegen */
--color-bg: var(--yf-cream);
--color-bg-soft: var(--yf-cream);
--bg: var(--yf-cream);
--color-surface-warm: var(--yf-cream-soft);
--surface-warm: var(--yf-cream-soft);
/* Akzent Orange -> Olivgrün (deckt --accent / --accent-strong ab) */
--color-accent: var(--yf-olive);
--color-accent-strong: var(--yf-olive-deep);
--accent: var(--yf-olive);
--accent-strong: var(--yf-olive-deep);
/* AUDIT v14 — Farb-Disziplin: alte yfood-Türkis-/Cyan-Akzent-Tokens
auf Marken-Grün umbiegen (nur Text-Akzente; --aqua=Wasser & --berry=Navy
bleiben unangetastet). Deckt Eyebrows, h1/h2 em & Kategorie-Labels auf
allen Seiten ab. */
--mint-deep: #56703f !important;
--aqua-bright: #56703f !important;
--mint-ink: #56703f !important;
/* Tote Tokens vereindeutigen (Hygiene) */
--gold: #a8bf94;
--color-warning: #a8bf94;
/* Token-basierte Buttons (z. B. yf-Blöcke) -> Olivgrün */
--btn-primary-bg: linear-gradient(160deg, #88a276 0%, #56703f 100%);
--btn-primary-bg-hover: linear-gradient(160deg, #7c9669 0%, #49612f 100%);
--btn-primary-color: #ffffff;
}
/* Seiten-Hintergrund: überschreibt das harte html,body{...!important} */
html,
body {
background: var(--yf-cream) !important;
}
/* Orange Buttons -> Olivgrün (Haupt- & Händler-CTAs).
!important, weil die Originale teils selbst !important nutzen. */
.btn-primary,
.store-cta,
.retailer-btn {
background: linear-gradient(160deg, #88a276 0%, #56703f 100%) !important;
color: #ffffff !important;
box-shadow: 0 14px 32px -16px rgba(86, 112, 63, 0.65) !important;
}
.btn-primary:hover,
.store-cta:hover,
.retailer-btn:hover {
background: linear-gradient(160deg, #7c9669 0%, #49612f 100%) !important;
}
/* Händler-Karten-CTA: die Basis nutzt background:var(--berry) und --berry ist als
Teal (#0e7a75) definiert → Button wurde teal statt oliv. Gleiche Spezifität wie
die Basisregel + !important, lädt zuletzt → erzwingt Marken-Oliv. */
.retailer-card-canonical .store-cta,
.retailer-card .store-cta {
background: linear-gradient(160deg, #88a276 0%, #56703f 100%) !important;
color: #ffffff !important;
}
.retailer-card-canonical .store-cta:hover,
.retailer-card .store-cta:hover {
background: linear-gradient(160deg, #7c9669 0%, #49612f 100%) !important;
}
/* ---------- 1) SOCIAL-PROOF-BAR direkt unter dem Hero ---------- */
.yf-proofbar {
background: linear-gradient(135deg, var(--color-primary, #0a2540) 0%, var(--color-primary-800, #082038) 100%);
color: #fff;
padding: clamp(1.1rem, 3vw, 1.65rem) 0;
position: relative;
z-index: 1;
overflow: hidden;
}
.yf-proofbar::before {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(60% 120% at 12% 50%, rgba(168, 191, 148, 0.18) 0%, transparent 60%),
radial-gradient(60% 120% at 88% 50%, rgba(86, 112, 63, 0.14) 0%, transparent 60%);
pointer-events: none;
}
.yf-proofbar-inner {
display: flex;
align-items: center;
justify-content: center;
gap: clamp(0.75rem, 2.5vw, 1.75rem);
flex-wrap: wrap;
text-align: center;
position: relative;
z-index: 1;
}
.yf-proofbar-stars {
color: #ffc02e;
font-size: clamp(1.05rem, 2.6vw, 1.4rem);
letter-spacing: 0.12em;
line-height: 1;
white-space: nowrap;
}
/* Hohe Spezifität (.yf-proofbar Prefix), damit die weiße Schrift NICHT von
bestehenden .container p / --ink-soft Regeln überschrieben wird. */
.yf-proofbar .yf-proofbar-text {
margin: 0;
font-family: var(--font-body, "DM Sans", system-ui, sans-serif);
font-size: clamp(1rem, 2.4vw, 1.28rem);
font-weight: 600;
color: #ffffff;
line-height: 1.35;
}
.yf-proofbar .yf-proofbar-text strong {
color: #b6cda2; /* helles Marken-Grün – lesbar auf dunklem Navy-Band */
font-weight: 800;
}
.yf-proofbar .yf-proofbar-cta-text {
display: inline-block;
color: #ffffff;
opacity: 0.95;
}
.yf-proofbar-btn {
display: inline-flex;
align-items: center;
gap: 0.45rem;
background: var(--btn-primary-bg, linear-gradient(160deg, #88a276 0%, #56703f 100%));
color: #fff;
font-weight: 800;
font-family: var(--font-body, system-ui, sans-serif);
text-decoration: none;
padding: 0.72rem 1.55rem;
border-radius: var(--radius-full, 999px);
font-size: 1rem;
white-space: nowrap;
transition: transform 0.2s var(--ease-standard, ease), box-shadow 0.2s ease;
box-shadow: 0 10px 30px -12px rgba(86, 112, 63, 0.6);
}
.yf-proofbar-btn:hover,
.yf-proofbar-btn:focus-visible {
transform: translateY(-2px);
box-shadow: 0 16px 42px -14px rgba(86, 112, 63, 0.75);
}
/* ---------- 2) COMMUNITY-„Team Wasser"-Band ---------- */
.yf-community {
background:
linear-gradient(180deg, var(--yf-olive-pale, #e7ede0) 0%, var(--yf-cream, #f5eddf) 100%);
padding: clamp(3rem, 8vw, 5.5rem) 0;
text-align: center;
}
.yf-community-inner {
max-width: 760px;
margin: 0 auto;
}
.yf-community .yf-community-eyebrow {
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-family: var(--font-body, system-ui, sans-serif);
font-weight: 700;
font-size: 0.82rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--mint-deep, #17a39a);
margin-bottom: 1rem;
}
.yf-community .yf-community-title {
font-family: var(--font-display, "Bricolage Grotesque", sans-serif);
font-weight: 800;
font-size: clamp(2rem, 5.4vw, 3.4rem);
line-height: 1.05;
letter-spacing: var(--tracking-tight, -0.025em);
color: var(--color-primary, #0a2540);
margin: 0 0 1rem;
}
.yf-community .yf-community-title em {
font-style: normal;
color: var(--mint-deep, #17a39a);
}
.yf-community .yf-community-sub {
font-family: var(--font-body, system-ui, sans-serif);
font-size: clamp(1.02rem, 2.4vw, 1.22rem);
color: var(--color-text-soft, #334155);
margin: 0 auto 1.9rem;
max-width: 560px;
line-height: 1.55;
}
.yf-community-btn {
display: inline-flex;
align-items: center;
gap: 0.5rem;
background: var(--btn-primary-bg, linear-gradient(160deg, #88a276 0%, #56703f 100%));
color: #fff;
font-weight: 800;
font-family: var(--font-body, system-ui, sans-serif);
text-decoration: none;
padding: 1rem 2rem;
border-radius: var(--radius-full, 999px);
font-size: 1.05rem;
min-height: var(--btn-min-height, 56px);
transition: transform 0.2s var(--ease-standard, ease), box-shadow 0.2s ease;
box-shadow: 0 14px 36px -14px rgba(86, 112, 63, 0.6);
}
.yf-community-btn:hover,
.yf-community-btn:focus-visible {
transform: translateY(-2px);
box-shadow: 0 20px 50px -16px rgba(86, 112, 63, 0.72);
}
.yf-community-stats {
display: flex;
align-items: stretch;
justify-content: center;
gap: clamp(1rem, 4vw, 3rem);
flex-wrap: wrap;
margin-top: 2.6rem;
}
.yf-stat {
min-width: 140px;
}
.yf-community .yf-stat-num {
display: block;
font-family: var(--font-display, "Bricolage Grotesque", sans-serif);
font-weight: 800;
font-size: clamp(1.9rem, 4.6vw, 2.9rem);
line-height: 1;
color: var(--color-accent, #56703f);
letter-spacing: var(--tracking-tight, -0.025em);
}
.yf-community .yf-stat-label {
display: block;
margin-top: 0.45rem;
font-family: var(--font-body, system-ui, sans-serif);
font-size: 0.92rem;
font-weight: 600;
color: var(--color-muted, #64748b);
}
@media (max-width: 700px) {
.yf-proofbar-inner {
flex-direction: column;
gap: 0.65rem;
}
.yf-proofbar-btn {
width: 100%;
max-width: 320px;
justify-content: center;
}
.yf-community-stats {
gap: 1.4rem 2rem;
}
}
@media (prefers-reduced-motion: reduce) {
.yf-proofbar-btn,
.yf-community-btn {
transition: none;
}
}
/* ============================================================
FARBEN / VARIANTEN (6 Flaschen) – v13 Bold
============================================================ */
.yf-colors {
background: var(--yf-cream, #f5eddf);
padding: clamp(3rem, 7vw, 5rem) 0;
}
.yf-colors .yf-colors-head {
text-align: center;
max-width: 640px;
margin: 0 auto clamp(2rem, 5vw, 3rem);
}
.yf-colors .yf-colors-eyebrow {
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-family: var(--font-body, system-ui, sans-serif);
font-weight: 700;
font-size: 0.82rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--mint-deep, #17a39a);
margin-bottom: 0.9rem;
}
.yf-colors .yf-colors-eyebrow .icon { width: 1.1em; height: 1.1em; }
.yf-colors .yf-colors-head h2 {
font-family: var(--font-display, "Bricolage Grotesque", sans-serif);
font-weight: 800;
font-size: clamp(2rem, 5vw, 3.2rem);
color: var(--yf-navy, #14224a);
margin: 0 0 0.6rem;
letter-spacing: -0.02em;
}
.yf-colors .yf-colors-head h2 em { font-style: normal; color: var(--yf-olive-deep, #56703f); }
.yf-colors .yf-colors-head p {
color: var(--color-text-soft, #334155);
font-size: clamp(1rem, 2.2vw, 1.15rem);
margin: 0;
}
.yf-colors-sub {
display: block;
margin-top: 0.35rem;
font-size: 0.92em;
color: var(--yf-olive-deep, #56703f);
font-weight: 600;
}
/* AQUA Mobile Carousel (only ≤820px) */
.yf-aqua-mobile { display: none; }
.yf-aqua-carousel {
width: 100%;
max-width: 380px;
border-radius: var(--radius-xl, 2rem);
background: #fff;
box-shadow: var(--shadow-md, 0 18px 54px -36px rgba(10,37,64,.36));
overflow: hidden;
position: relative;
user-select: none;
}
.yf-aqua-slides {
display: flex;
transition: transform 0.35s ease;
will-change: transform;
touch-action: pan-y;
}
.yf-aqua-slide { flex: 0 0 100%; min-width: 100%; }
.yf-aqua-slide img { width: 100%; height: auto; display: block; }
.yf-aqua-dots {
display: flex;
justify-content: center;
align-items: center;
gap: 0.45rem;
padding: 0.55rem 0 0.65rem;
background: #fff;
}
.yf-aqua-dot {
display: block !important;
width: 7px !important; height: 7px !important;
min-width: 7px !important; min-height: 7px !important;
max-width: 7px !important; max-height: 7px !important;
flex: 0 0 7px !important;
border-radius: 50% !important;
background: #d1d5db;
border: none !important; padding: 0 !important; cursor: pointer;
transition: background 0.2s, transform 0.2s;
}
.yf-aqua-dot.active {
background: var(--yf-olive-deep, #56703f);
transform: scale(1.35);
}
/* Full-width Amazon logo button used inside product sections on mobile */
.yf-section-amz-btn {
display: none; /* hidden on desktop; shown via media query */
}
@media (max-width: 820px) {
.yf-aqua-mobile {
display: flex;
flex-direction: column;
align-items: center;
gap: 1rem;
margin-bottom: 1.75rem;
width: 100%;
}
.yf-colors-carousel { display: none !important; }
/* Amazon buttons in product sections: full-width, same height */
.yf-section-amz-btn {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
max-width: 380px;
min-height: 64px;
padding: 12px 20px;
border-radius: 999px;
background: #fff;
box-shadow: var(--shadow-sm, 0 1px 4px rgba(10,37,64,.10));
text-decoration: none;
transition: transform 0.18s, box-shadow 0.18s;
}
.yf-section-amz-btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-md, 0 18px 54px -36px rgba(10,37,64,.36)); }
.yf-section-amz-btn img { max-height: 44px; width: auto; object-fit: contain; }
/* KIDS: make retailer button same full-width as Mehr-erfahren */
.yf-kids-retailers { width: 100%; max-width: 380px; }
.yf-kids-retailers .yf-comm-retailer {
width: 100%;
min-width: unset;
min-height: 64px;
justify-content: center;
}
.yf-kids-retailers .yf-comm-retailer img { max-height: 44px !important; }
}
.yf-colors-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: clamp(0.8rem, 2vw, 1.6rem);
}
a.yf-color {
margin: 0;
display: flex;
flex-direction: column;
align-items: center;
gap: 0.6rem;
background: var(--yf-cream-card, #fffdf8);
border-radius: var(--radius-lg, 1.5rem);
padding: 1rem 1rem 1.2rem;
box-shadow: var(--shadow-sm, 0 8px 24px -18px rgba(10,37,64,.2));
text-decoration: none;
transition: transform 0.25s var(--ease-standard, ease), box-shadow 0.25s ease;
}
a.yf-color:hover,
a.yf-color:focus-visible {
transform: translateY(-6px);
box-shadow: var(--shadow-md, 0 18px 54px -36px rgba(10,37,64,.36));
}
a.yf-color img {
width: 100%;
height: auto;
object-fit: contain;
border-radius: var(--radius-md, 1rem);
}
.yf-color-label {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.25rem;
font-family: var(--font-body, system-ui, sans-serif);
font-weight: 700;
font-size: 1.05rem;
color: var(--yf-navy, #14224a);
}
.yf-color-cta {
font-weight: 700;
font-size: 0.84rem;
color: var(--yf-olive-deep, #56703f);
opacity: 0;
transform: translateY(-2px);
transition: opacity 0.2s ease, transform 0.2s ease;
}
a.yf-color:hover .yf-color-cta,
a.yf-color:focus-visible .yf-color-cta { opacity: 1; transform: translateY(0); }
@media (max-width: 760px) {
.yf-colors-grid { grid-template-columns: repeat(2, 1fr); gap: 0.8rem; }
.yf-color-cta { opacity: 1; transform: none; }
}
@media (max-width: 380px) {
.yf-colors-grid { grid-template-columns: 1fr; }
}
/* ============================================================
KIDS-SEKTION – v13 Bold
============================================================ */
.yf-kids {
background: linear-gradient(160deg, var(--sky-pale, #eaf5fc) 0%, var(--yf-cream, #f5eddf) 100%);
padding: clamp(3rem, 8vw, 5.5rem) 0;
}
.yf-kids-inner {
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(1.5rem, 5vw, 4rem);
align-items: center;
}
.yf-kids-media { display: flex; justify-content: center; }
.yf-kids-media img {
width: 100%;
max-width: 520px;
height: auto;
border-radius: var(--radius-xl, 2rem);
background: #fff;
box-shadow: var(--shadow-md, 0 18px 54px -36px rgba(10,37,64,.36));
}
/* KIDS Carousel */
.yf-kids-carousel {
width: 100%;
max-width: 520px;
background: #fff;
box-shadow: var(--shadow-md, 0 18px 54px -36px rgba(10,37,64,.36));
border-radius: var(--radius-xl, 2rem);
overflow: hidden;
position: relative;
user-select: none;
}
.yf-kids-slides {
display: flex;
width: 100%;
transition: transform 0.35s ease;
will-change: transform;
touch-action: pan-y;
border-radius: var(--radius-xl, 2rem) var(--radius-xl, 2rem) 0 0;
}
.yf-kids-slide { flex: 0 0 100%; min-width: 100%; }
.yf-kids-slide img {
width: 100%;
height: auto;
display: block;
border-radius: 0;
background: transparent;
box-shadow: none;
max-width: none;
}
.yf-kids-dots {
display: flex;
justify-content: center;
align-items: center;
gap: 0.45rem;
padding: 0.55rem 0 0.65rem;
background: #fff;
}
.yf-kids-dot {
display: block !important;
width: 7px !important;
height: 7px !important;
min-width: 7px !important;
min-height: 7px !important;
max-width: 7px !important;
max-height: 7px !important;
flex: 0 0 7px !important;
padding: 0 !important;
border: none !important;
border-radius: 50% !important;
background: #d1d5db;
cursor: pointer;
transition: background 0.2s, transform 0.2s;
}
.yf-kids-dot.active {
background: var(--sky-bright, #56703f);
transform: scale(1.35);
}
/* ===== KIDS Startseite-Karussell: Pfeile = runde weiße Bubbles mit grünem Chevron ===== */
/* Hohe Spezifität + !important schlägt JEGLICHE Theme-Button-Defaults (sonst blau/grüne Rechtecke). */
.yf-kids-carousel .yf-kids-arrow-prev,
.yf-kids-carousel .yf-kids-arrow-next {
position: absolute !important;
top: 50% !important;
transform: translateY(-50%) !important;
width: 42px !important;
height: 42px !important;
min-width: 42px !important;
min-height: 42px !important;
max-width: 42px !important;
max-height: 42px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
padding: 0 !important;
margin: 0 !important;
border: none !important;
border-radius: 50% !important;
background: rgba(255, 255, 255, 0.96) !important;
box-shadow: 0 6px 18px -6px rgba(10, 37, 64, 0.55) !important;
color: #56703f !important;
cursor: pointer !important;
opacity: 1 !important; /* immer sichtbar */
z-index: 5 !important;
transition: background 0.2s, color 0.2s, transform 0.2s !important;
}
.yf-kids-carousel .yf-kids-arrow-prev { left: 12px !important; right: auto !important; }
.yf-kids-carousel .yf-kids-arrow-next { right: 12px !important; left: auto !important; }
.yf-kids-carousel .yf-kids-arrow-prev:hover,
.yf-kids-carousel .yf-kids-arrow-next:hover {
background: #56703f !important;
color: #ffffff !important;
transform: translateY(-50%) scale(1.06) !important;
}
/* Chevron im Kreis: Eck aus zwei Rändern, rotiert, optisch mittig ausgeglichen. */
.yf-kids-carousel .yf-kids-arrow-prev .pcard-chevron,
.yf-kids-carousel .yf-kids-arrow-next .pcard-chevron {
display: inline-block !important;
width: 10px !important;
height: 10px !important;
border-right: 2.6px solid currentColor !important;
border-bottom: 2.6px solid currentColor !important;
border-top: none !important;
border-left: none !important;
background: none !important;
box-shadow: none !important;
margin: 0 !important;
}
.yf-kids-carousel .yf-kids-arrow-prev .pcard-chevron { transform: translateX(3px) rotate(135deg) !important; }
.yf-kids-carousel .yf-kids-arrow-next .pcard-chevron { transform: translateX(-3px) rotate(-45deg) !important; }
@media (max-width: 820px) {
.yf-kids-carousel { max-width: 380px; }
.yf-kids-carousel .yf-kids-arrow-prev,
.yf-kids-carousel .yf-kids-arrow-next { display: none !important; }
}
.yf-eyebrow-brand { text-transform: none; }
.yf-kids .yf-kids-eyebrow {
display: inline-block;
font-family: var(--font-body, system-ui, sans-serif);
font-weight: 800;
font-size: 0.8rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--sky-bright, #56703f);
background: #fff;
border-radius: 999px;
padding: 0.45rem 0.9rem;
margin-bottom: 1rem;
box-shadow: var(--shadow-xs, 0 1px 2px rgba(10,37,64,.06));
}
.yf-kids .yf-kids-copy h2 {
font-family: var(--font-display, "Bricolage Grotesque", sans-serif);
font-weight: 800;
font-size: clamp(1.9rem, 4.6vw, 3rem);
color: var(--yf-navy, #14224a);
margin: 0 0 1rem;
letter-spacing: -0.02em;
line-height: 1.08;
}
.yf-kids .yf-kids-copy h2 em { font-style: normal; color: var(--sky-bright, #56703f); }
.yf-kids .yf-kids-lede {
color: var(--color-text-soft, #334155);
font-size: clamp(1.02rem, 2.2vw, 1.18rem);
line-height: 1.55;
margin: 0 0 1.3rem;
}
.yf-kids-feats {
list-style: none;
padding: 0;
margin: 0 0 1.7rem;
display: flex;
flex-direction: column;
gap: 0.7rem;
width: fit-content;
max-width: 100%;
}
.yf-kids-feats li {
display: flex;
align-items: center;
justify-content: flex-start;
width: auto;
gap: 0.7rem;
font-family: var(--font-body, system-ui, sans-serif);
font-weight: 600;
color: var(--yf-navy, #14224a);
font-size: 1.02rem;
text-align: left;
}
.yf-kids-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
background: var(--btn-primary-bg, linear-gradient(160deg, #88a276, #56703f));
color: #fff;
font-family: var(--font-body, system-ui, sans-serif);
font-weight: 800;
text-decoration: none;
padding: 0.95rem 2.4rem;
border-radius: 999px;
min-height: var(--btn-min-height, 56px);
min-width: 340px !important;
box-shadow: 0 14px 34px -16px rgba(86, 112, 63, 0.6);
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.yf-kids-btn:hover { transform: translateY(-2px); box-shadow: 0 20px 46px -18px rgba(86, 112, 63, 0.72); }
.yf-kids-retailers { display: flex; justify-content: center; gap: 0.75rem; margin-top: 1.5rem; flex-wrap: wrap; }
@media (max-width: 820px) {
/* overflow-x: clip statt hidden — hidden erzwingt overflow-y:auto und macht das
Element auf iOS zu einem eigenen Scroll-Container, der den Seiten-Scroll einfängt.
clip kappt nur horizontal, ohne Scroll-Container/auto-Zwang. */
.yf-kids { overflow-x: clip; }
.yf-kids-inner { grid-template-columns: 1fr; gap: 2rem; overflow-x: clip; }
.yf-kids-media { order: -1; }
.yf-kids-media img { max-width: 360px; }
body.home .yf-kids-copy {
text-align: center;
max-width: 100%;
box-sizing: border-box;
overflow-x: clip;
}
body.home .yf-kids-lede {
max-width: 100%;
overflow-wrap: break-word;
}
body.home .yf-kids-feats {
width: auto;
max-width: 100%;
margin-left: auto;
margin-right: auto;
overflow-wrap: break-word;
align-items: center;
}
body.home .yf-kids-feats li { justify-content: flex-start; }
body.home .yf-kids-actions { width: 100%; max-width: 100%; box-sizing: border-box; }
/* Mehr-erfahren: min-width:340px (Desktop) aufheben + auf Amazon-Button-Breite deckeln, zentriert */
body.home .yf-kids-btn {
min-width: unset !important;
width: calc(100% - 2rem);
max-width: 348px !important;
margin-left: auto;
margin-right: auto;
box-sizing: border-box;
}
}
@media (prefers-reduced-motion: reduce) {
.yf-color, .yf-kids-btn { transition: none; }
}
/* ============================================================
BENEFITS-Leiste (gerettet aus „Frische ohne Zusatzstoffe") – v13 Bold
============================================================ */
.yf-benefits { background: var(--yf-cream, #f5eddf); padding: clamp(2rem, 5vw, 3.5rem) 0; }
.yf-benefits-inner {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: clamp(0.9rem, 2.5vw, 1.6rem);
max-width: 1120px;
margin: 0 auto;
}
.yf-benefit {
display: flex;
align-items: center;
gap: 1rem;
flex: 1 1 300px;
max-width: 350px;
background: var(--yf-cream-card, #fffdf8);
border-radius: var(--radius-lg, 1.5rem);
padding: 1.15rem 1.35rem;
box-shadow: var(--shadow-sm, 0 8px 24px -18px rgba(10,37,64,.2));
}
.yf-benefit-ic {
flex: 0 0 auto;
width: 48px; height: 48px;
border-radius: 50%;
display: grid; place-items: center;
background: var(--yf-olive-pale, #e7ede0);
color: var(--yf-olive-deep, #56703f);
}
.yf-benefit-ic .icon { width: 24px; height: 24px; }
.yf-benefit strong {
display: block;
font-family: var(--font-display, "Bricolage Grotesque", sans-serif);
color: var(--yf-navy, #14224a);
font-size: 1.05rem;
line-height: 1.15;
margin-bottom: 0.15rem;
}
.yf-benefit span { color: var(--color-text-soft, #334155); font-size: 0.92rem; line-height: 1.4; }
@media (max-width: 760px) {
.yf-benefits-inner { grid-template-columns: 1fr; gap: 0.8rem; }
}
/* ============================================================
DERMATEST-BADGE only – v13 Bold (Rest der Doctors-Sektion entfernt)
============================================================ */
.yf-dermatest-only { background: var(--yf-cream, #f5eddf); padding: clamp(2.5rem, 6vw, 4.5rem) 0; }
.yf-dermatest-only .dermatest-proof { max-width: 720px; margin: 0 auto; }
/* ---------- Community: Händler-Logos-Reihe ---------- */
.yf-community-retailers {
display: flex;
justify-content: center;
align-items: center;
gap: clamp(0.6rem, 2vw, 1rem);
flex-wrap: wrap;
margin: 1.6rem auto 0;
max-width: 620px;
}
.yf-comm-retailer {
display: flex;
align-items: center;
justify-content: center;
background: #ffffff;
border-radius: var(--radius-md, 1rem);
padding: 0.6rem 1rem;
box-shadow: var(--shadow-sm, 0 8px 24px -18px rgba(10,37,64,.2));
height: 54px;
width: 132px;
transition: transform 0.2s var(--ease-standard, ease), box-shadow 0.2s ease;
}
.yf-comm-retailer:hover { transform: translateY(-3px); box-shadow: var(--shadow-md, 0 18px 54px -36px rgba(10,37,64,.36)); }
.yf-comm-retailer img { max-height: 26px; max-width: 100%; width: auto; height: auto; object-fit: contain; }
@media (max-width: 560px) {
.yf-comm-retailer { width: calc(50% - 0.5rem); }
}
/* yf-section-amz-btn overrides yf-comm-retailer base (cascade fix) */
@media (max-width: 820px) {
.yf-section-amz-btn {
width: 100%;
max-width: 380px;
height: auto;
min-height: 64px;
border-radius: 999px;
padding: 12px 20px;
}
.yf-section-amz-btn img { max-height: 44px; }
}
/* ============================================================
HERO: neues Bild als Vollflächen-Hintergrund – v13 Bold
============================================================ */
/* Bild auf VOLLE HÖHE einpassen (auto 100%) → Flasche nie oben/unten
abgeschnitten. Auf breiten Screens füllt Navy die linke Seite (Text). */
body.home .hero-fullbleed,
body.about-page .hero-fullbleed {
background-color: #061627;
background-image:
linear-gradient(90deg, rgba(6,22,39,0.93) 0%, rgba(6,22,39,0.88) 24%, rgba(6,22,39,0.68) 43%, rgba(6,22,39,0.22) 52%, rgba(6,22,39,0.06) 60%, rgba(6,22,39,0) 72%),
url(../images/hero-desktop-grau-wasserschwall-2x-v9.webp);
background-size: cover, cover;
background-position: center, center center;
background-repeat: no-repeat;
color: #fff;
padding-top: clamp(2.5rem, 5vw, 3.5rem);
min-height: 56.25vw;
}
/* Bild-Band/altes Bild entfernen – Bild ist jetzt Vollflächen-Hintergrund (auch Über-uns) */
body.home .hero-stage,
body.about-page .hero-stage,
body.about-page .about-hero .hero-bg,
body.about-page .about-hero .hero-overlay { display: none !important; }
@media (max-width: 760px) {
/* Mobil: Bild als Vollflächen-Hintergrund, Text DARAUF (wie Desktop / yfood.com) */
body.home .hero-fullbleed,
body.about-page .hero-fullbleed {
background-image:
linear-gradient(180deg, rgba(6,22,39,0.55) 0%, rgba(6,22,39,0.35) 30%, rgba(6,22,39,0.09) 50%, rgba(6,22,39,0) 64%, rgba(6,22,39,0.12) 100%),
url(../images/hero-mobile-grau-wasserschwall-2x-v8.webp);
background-size: cover, cover;
background-position: center, 60% 60%;
padding-bottom: 0;
min-height: min(93vh, 760px);
}
/* Lede auf Mobil anzeigen */
body.home .hero-fullbleed .hero-lede { display: block !important; }
}
/* ── Guide-Hero Artikel-Foto (editorial split layout) ────────────────── */
.guide-hero-photo {
float: right;
width: min(360px, 42%);
aspect-ratio: 4 / 3;
object-fit: cover;
object-position: center top;
border-radius: 14px;
margin: 0 0 1.5rem 2.25rem;
box-shadow: 0 8px 32px rgba(0,0,0,0.13);
}
@media (max-width: 720px) {
.guide-hero-photo {
float: none;
display: block;
width: 100%;
margin: 0 0 1.5rem 0;
border-radius: 10px;
}
}
/* Clearfix damit guide-hero seine Höhe aus dem Float berechnet */
.guide-hero .inner::after {
content: "";
display: table;
clear: both;
}
/* ── Produktseite: Hero-Bild rechts ─────────────────────────────────── */
.product-hero-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(2rem, 5vw, 4rem);
align-items: center;
}
.product-hero-media {
margin: 0;
}
.product-hero-media img {
width: 100%;
height: auto;
border-radius: var(--radius-xl, 2rem);
box-shadow: 0 24px 64px -24px rgba(10,37,64,.25);
display: block;
}
@media (max-width: 760px) {
.product-hero-grid {
grid-template-columns: 1fr;
}
.product-hero-media {
order: -1;
max-width: 320px;
margin: 0 auto;
}
}
/* ── Produktseite: Action-Strip (alle 6 Farben) ─────────────────────── */
.yf-action-strip {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: clamp(0.6rem, 1.5vw, 1.2rem);
margin-top: clamp(2rem, 5vw, 3.5rem);
}
.yf-action-strip figure {
margin: 0;
display: flex;
flex-direction: column;
gap: 0.5rem;
text-align: center;
}
.yf-action-strip img {
width: 100%;
aspect-ratio: 1 / 1;
object-fit: cover;
border-radius: var(--radius-lg, 1.5rem);
box-shadow: 0 8px 24px -10px rgba(10,37,64,.18);
transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.yf-action-strip figure:hover img {
transform: translateY(-4px);
box-shadow: 0 16px 40px -14px rgba(10,37,64,.28);
}
.yf-action-strip figcaption {
font-family: var(--font-body, system-ui, sans-serif);
font-weight: 700;
font-size: 0.82rem;
color: var(--yf-navy, #14224a);
letter-spacing: 0.04em;
}
@media (max-width: 600px) {
.yf-action-strip {
grid-template-columns: repeat(3, 1fr);
}
}
/* bold-edition lädt nach style.min.css → gleiche !important Spez. reicht zum Override */
body.product-page .product-hero {
display: block !important;
}
/* Die alte .product-hero-visual wird nicht mehr verwendet (wir nutzen .product-hero-media) */
body.product-page .product-hero-grid {
grid-template-columns: 1fr 1fr !important;
justify-items: start !important;
text-align: left !important;
min-height: unset !important;
}
body.product-page .product-hero-copy {
max-width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
body.product-page .product-hero-copy h1 {
font-size: clamp(2.4rem, 4.8vw, 4rem) !important;
}
body.product-page .product-hero-actions {
justify-content: flex-start !important;
}
@media (max-width: 760px) {
body.product-page .product-hero-grid {
grid-template-columns: 1fr !important;
text-align: center !important;
}
body.product-page .product-hero-actions {
justify-content: center !important;
}
}
.product-group-card-badge {
right: auto !important;
left: 1.05rem !important;
background: var(--gold, #ffd166) !important;
color: var(--ink, #0a2540) !important;
font-weight: 800 !important;
letter-spacing: 0.14em !important;
padding: 0.42rem 0.9rem !important;
border: 1px solid rgba(10, 37, 64, 0.08) !important;
box-shadow: 0 6px 16px -6px rgba(10, 37, 64, 0.4) !important;
}
/* KIDS-Karte: NEU-Badge oben rechts */
.product-group-card-new:not(.product-group-card-main) .product-group-card-badge {
left: auto !important;
right: 1.05rem !important;
}
/* Produkte-Seite: Beige-Hintergrund auf allen Viewports */
.product-groups { background: var(--yf-cream, #f5eddf) !important; }
/* Mehr erfahren Button in KIDS-Produktkarte: gleiche Maße wie Amazon-Button + grüner Hover */
.product-card-learn {
text-align: center !important;
justify-content: center !important;
width: 100% !important;
height: 46px !important;
min-height: 46px !important;
max-height: 46px !important;
display: inline-flex !important;
align-items: center !important;
padding: 0 1rem !important;
box-sizing: border-box !important;
}
.product-card-learn:hover,
.product-card-learn:focus-visible {
background: var(--yf-olive-deep, #56703f) !important;
color: #fff !important;
border-color: var(--yf-olive-deep, #56703f) !important;
}
/* Buttons auf gleiche Höhe — flex + push to bottom */
body.product-page .product-group-card {
display: flex !important;
flex-direction: column !important;
}
/* Amazon-Button immer ans Karten-Ende (auch Karten ohne grünen CTA) */
body.product-page .product-group-card .product-card-cta-amazon {
margin-top: auto !important;
}
/* Karten mit grünem CTA: grüner CTA ans Ende, Amazon direkt darunter */
body.product-page .product-group-card .product-card-cta:not(.product-card-cta-amazon) {
margin-top: auto !important;
}
body.product-page .product-group-card .product-card-cta:not(.product-card-cta-amazon) ~ .product-card-cta-amazon {
margin-top: .5rem !important;
}
/* KIDS Amazon button — same size as Aqua Home */
.kids-launch .variant-retailer-buttons a {
display: flex;
align-items: center;
justify-content: center;
min-height: 64px;
min-width: 240px;
padding: 14px 28px;
background: #fff;
border: 1px solid rgba(10,37,64,0.1);
border-radius: 999px;
box-shadow: 0 4px 16px -6px rgba(10,37,64,0.15);
transition: box-shadow .2s, transform .2s;
}
.kids-launch .variant-retailer-buttons a:hover {
transform: translateY(-2px);
box-shadow: 0 6px 22px -6px rgba(10,37,64,0.22);
}
.kids-launch .variant-retailer-buttons a img {
max-height: 32px;
max-width: 140px;
height: auto;
width: auto;
}
/* KIDS section */
.kids-launch {
padding: clamp(3rem, 7vw, 5rem) 0;
background: linear-gradient(180deg, #f7faf9 0%, #eef7f4 100%);
}
.kids-launch .variant-gallery {
background: #fff;
border-radius: clamp(16px, 2.4vw, 24px);
overflow: hidden;
box-shadow: 0 20px 60px -30px rgba(10, 37, 64, 0.15);
}
.kids-launch .variant-shop {
background: rgba(255,255,255,0.6);
border: 1px solid rgba(10,37,64,0.07);
border-radius: clamp(20px, 3vw, 32px);
padding: clamp(1.4rem, 3vw, 2.4rem);
}
.kids-launch .variant-benefits li::before {
background: var(--accent);
}
/* Anker-Ziele (z. B. #im-handel bei „Jetzt kaufen") nicht unter den Sticky-Header scrollen */
main section[id] {
scroll-margin-top: clamp(72px, 8vw, 96px);
}
/* KIDS-Karte: NEU-Badge nach rechts (die Wandhalterung-Karte hat kein Badge) */
.product-group-card-amazon .product-group-card-badge {
left: auto !important;
right: 1.05rem !important;
}
/* Mobile: Produkt-Detail-Sektionen (Aqua Home / Aqua Mobile / KIDS) sauber in EINER Spalte,
Bild + Text vollständig in der Box, nichts läuft über den Rand. */
@media (max-width: 760px) {
.aquahome-launch .variant-shop,
.product-colors .variant-shop,
.kids-launch .variant-shop {
display: grid !important;
grid-template-columns: 1fr !important;
gap: clamp(1.2rem, 4vw, 1.8rem) !important;
}
.aquahome-launch .variant-gallery,
.product-colors .variant-gallery,
.kids-launch .variant-gallery,
.aquahome-launch .variant-info,
.product-colors .variant-info,
.kids-launch .variant-info {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
}
.aquahome-launch .variant-gallery,
.product-colors .variant-gallery,
.kids-launch .variant-gallery {
overflow: hidden !important;
}
.aquahome-launch .variant-gallery img,
.product-colors .variant-gallery img,
.kids-launch .variant-gallery img {
width: 100% !important;
height: auto !important;
object-fit: contain !important;
}
/* KIDS Amazon-Button auf Mobile zentrieren — Grid auf Flex umstellen,
sonst landet der einzelne Button in der ersten Grid-Zelle (links). */
.kids-launch .variant-retailer-buttons {
display: flex !important;
justify-content: center !important;
}
}
/* NEU-Badge in den Detail-Sektionen (auf dem Galerie-Bild) — gleiches Design wie auf den Karten */
.aquahome-launch .variant-gallery,
.kids-launch .variant-gallery {
position: relative;
}
.variant-new-badge {
position: absolute;
top: 1rem;
z-index: 3;
display: inline-flex;
align-items: center;
padding: 0.42rem 0.9rem;
border-radius: 999px;
background: var(--gold, #ffd166);
color: var(--ink, #0a2540);
font-family: var(--font-display, inherit);
font-size: 0.74rem;
font-weight: 800;
letter-spacing: 0.14em;
text-transform: uppercase;
border: 1px solid rgba(10, 37, 64, 0.08);
box-shadow: 0 6px 16px -6px rgba(10, 37, 64, 0.4);
}
.aquahome-launch .variant-new-badge {
left: 1rem;
}
.kids-launch .variant-new-badge {
right: 1rem;
}
/* XXL-Verfügbarkeits-Badge: im Detailbild bewusst kompakter halten. */
.aquahome-xxl-launch .variant-new-badge {
top: 0.7rem;
left: 0.7rem;
padding: 0.3rem 0.62rem;
font-size: 0.6rem;
letter-spacing: 0.09em;
white-space: nowrap;
}
@media (max-width: 760px) {
/* Auf kleinen Displays mittig am oberen Bildrand, damit Produkt und Verpackung frei bleiben. */
.aquahome-xxl-launch .variant-new-badge {
top: 0.55rem;
left: 0;
right: 0;
width: max-content;
margin-inline: auto;
transform: none;
padding: 0.28rem 0.55rem;
font-size: 0.55rem;
letter-spacing: 0.075em;
}
}
/* „Jetzt kaufen" soll direkt auf den Händler-Logos landen (auch mobil) */
.yf-community-retailers,
#im-handel .stores-grid,
#im-handel [data-retailer-grid] {
scroll-margin-top: clamp(84px, 10vw, 120px);
}
/* Mobile: Header versteckt sich beim Runterscrollen -> kleinerer Offset,
damit weiter runtergescrollt wird und die Logos direkt oben sitzen */
@media (max-width: 760px) {
.yf-community-retailers,
#im-handel .stores-grid,
#im-handel [data-retailer-grid] {
scroll-margin-top: 20px;
}
}
/* „So geht's" und „Fachärzt:innen" aus Navigation entfernen (Desktop-Nav + Mobile-Drawer).
header.site-Präfix nötig, um die spezifischere display:inline-flex-Regel zu schlagen. */
header.site .nav-menu a[href*="so-gehts"],
header.site .nav-menu a[href*="fachaerzte"],
.nav-menu a[href*="so-gehts"],
.nav-menu a[href*="fachaerzte"],
.drawer nav a[href*="so-gehts"],
.drawer nav a[href*="fachaerzte"],
.drawer a[href*="so-gehts"],
.drawer a[href*="fachaerzte"] {
display: none !important;
}
/* =====================================================================
AUDIT v14 — Desktop-Nav verschlankt (yfood-Reduktion auf 5 Items):
FAQ + Amazon Shop NUR aus dem Desktop-Header ausblenden.
FAQ bleibt über Seitenabschnitt + Drawer erreichbar, Amazon Shop wandert
in die Utility-Bar (verlinktes „online bei Amazon") + Drawer behält beide.
===================================================================== */
header.site .nav-menu a[href*="#faq"],
header.site .nav-menu a[href*="amazon.de/stores"] {
display: none !important;
}
/* Amazon-Link in der Top-/Utility-Bar */
.announce .announce-amz {
color: #56703f;
font-weight: 700;
text-decoration: underline;
text-underline-offset: 2px;
}
.announce .announce-amz:hover { color: #455e30; }
/* Nav nach rechts neben die Buttons gruppieren — sonst wirkt sie nach dem Entfernen
der zwei Punkte mittig „verloren" mit großer Lücke links. */
@media (min-width: 1025px) {
header.site .container.nav { position: relative; }
header.site .container.nav .nav-menu {
position: absolute;
left: 50%;
transform: translateX(-50%);
margin: 0 !important;
gap: clamp(1.6rem, 2.6vw, 2.8rem) !important; /* mehr Luft zwischen den Items */
}
}
/* ============================================================
Aqua-Home-Detailsektion: heller/beiger Hintergrund statt dunkel
(Text + Karten entsprechend auf dunkle Schrift umgestellt)
============================================================ */
body.product-page .aquahome-launch {
background: linear-gradient(180deg, #fdf7ee 0%, #f4e9d6 100%) !important;
color: var(--ink) !important;
}
body.product-page .aquahome-launch h2,
body.product-page .aquahome-launch h3,
body.product-page .aquahome-launch .variant-info h3 {
color: var(--ink) !important;
}
body.product-page .aquahome-launch p,
body.product-page .aquahome-launch .variant-info > p,
body.product-page .aquahome-launch .variant-info > p[data-variant-copy] {
color: var(--ink-soft) !important;
}
body.product-page .aquahome-launch .variant-shop {
background: rgba(255, 255, 255, 0.55) !important;
border: 1px solid rgba(10, 37, 64, 0.08) !important;
-webkit-backdrop-filter: none !important;
backdrop-filter: none !important;
}
body.product-page .aquahome-launch .variant-option {
background: #fff !important;
border-color: rgba(10, 37, 64, 0.12) !important;
}
/* Aqua Home h3 same size as Aqua Mobile (base variant-info h3) */
body.product-page .aquahome-launch .variant-info h3 {
font-size: clamp(2.05rem, 4vw, 3.5rem) !important;
min-height: 0 !important;
}
/* "Blau" swatch: replace teal #67c5d0 with actual blue */
.variant-option-blau > span {
background: #2B7CD4 !important;
}
.product-color-blau {
background: rgba(43, 124, 212, 0.22) !important;
}
.aquahome-launch .product-color-blau {
background: rgba(43, 124, 212, 0.24) !important;
}
body.product-page .aquahome-launch .variant-option:hover,
body.product-page .aquahome-launch .variant-option.is-active {
background: #fff !important;
border-color: #14b8a6 !important;
box-shadow: 0 0 0 2px rgba(20, 184, 166, 0.28), 0 8px 22px -12px rgba(10, 37, 64, 0.3) !important;
}
body.product-page .aquahome-launch .variant-option strong {
color: var(--ink) !important;
}
body.product-page .aquahome-launch .variant-option small {
color: var(--ink-soft) !important;
}
body.product-page .aquahome-launch .variant-benefits li {
color: var(--ink) !important;
}
body.product-page .aquahome-launch .variant-benefits li::before {
background: #14b8a6 !important;
box-shadow: 0 0 0 5px rgba(20, 184, 166, 0.16) !important;
}
/* ============================================================
Über-uns: helle/beige Sektion statt Navy (an Startseiten-Design angepasst)
============================================================ */
body.about-page .about-story-shell {
background: linear-gradient(180deg, #fdf7ee 0%, #f4e9d6 100%) !important;
}
body.about-page .about-card,
body.about-page .about-teaser.prose-teaser {
background: #fff !important;
border: 1px solid rgba(10, 37, 64, 0.08) !important;
-webkit-backdrop-filter: none !important;
backdrop-filter: none !important;
box-shadow: 0 20px 50px -34px rgba(10, 37, 64, 0.22) !important;
}
body.about-page .about-card-kicker {
color: #b06a2c !important;
}
body.about-page .about-card h2,
body.about-page .about-teaser.prose-teaser h3,
body.about-page .about-milestones strong {
color: var(--ink) !important;
}
body.about-page .about-card p,
body.about-page .about-teaser.prose-teaser p,
body.about-page .about-milestones span {
color: var(--ink-soft) !important;
}
body.about-page .about-milestones li {
border-bottom-color: rgba(10, 37, 64, 0.12) !important;
}
/* ============================================================
Ratgeber-Seite: unterstes CTA-Band hell/beige statt dunkelblau
(scoped auf guide-page, damit andere .final-Bänder unberührt bleiben)
============================================================ */
body.guide-page .final.guide-retail-band {
background: linear-gradient(180deg, #fdf7ee 0%, #f4e9d6 100%) !important;
color: var(--ink) !important;
}
body.guide-page .final.guide-retail-band::before,
body.guide-page .final.guide-retail-band::after,
body.guide-page .final.guide-retail-band .final-card::before,
body.guide-page .final.guide-retail-band .final-card::after {
display: none !important;
}
/* innere Karte hatte eigenen dunklen Navy-Verlauf -> transparent, beige scheint durch */
body.guide-page .final.guide-retail-band .final-card {
background: none !important;
}
body.guide-page .final.guide-retail-band h2,
body.guide-page .final.guide-retail-band strong,
body.guide-page .final.guide-retail-band li,
body.guide-page .final.guide-retail-band .final-trust,
body.guide-page .final.guide-retail-band .final-trust * {
color: var(--ink) !important;
}
body.guide-page .final.guide-retail-band .final-copy,
body.guide-page .final.guide-retail-band p,
body.guide-page .final.guide-retail-band .guide-final-proof p {
color: var(--ink-soft) !important;
}
body.guide-page .final.guide-retail-band h2 em,
body.guide-page .final.guide-retail-band h2 i {
background: none !important;
-webkit-text-fill-color: #0e7a75 !important;
color: #0e7a75 !important;
}
body.guide-page .final.guide-retail-band .final-price {
color: #0e7a75 !important;
}
body.guide-page .final.guide-retail-band .eyebrow,
body.guide-page .final.guide-retail-band .guide-final-eyebrow {
background: rgba(20, 184, 166, 0.12) !important;
border: 1px solid rgba(20, 184, 166, 0.28) !important;
color: #0e7a75 !important;
}
body.guide-page .final.guide-retail-band .guide-final-proof,
body.guide-page .final.guide-retail-band .final-trust > * {
background: rgba(255, 255, 255, 0.7) !important;
border-color: rgba(10, 37, 64, 0.1) !important;
}
/* ============================================================
Farben-Karussell: "Deine Farbe. Dein Stil."
Desktop: große Bilder + Pfeile (auf Hover) + Autoplay (JS)
Mobile: wischbar, nächstes Bild lugt hervor; Klick -> Amazon
============================================================ */
.yf-colors-carousel {
position: relative;
}
/* Nativer Scroll-Snap: Touch nutzt das geschmeidige Browser-Scrolling (mit Schwung,
GPU-beschleunigt). Pfeile/Autoplay scrollen per scrollBy/scrollTo. Kein JS pro Frame. */
.yf-colors-viewport {
overflow-x: auto;
overflow-y: hidden;
padding: 0.4rem 0 1rem;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch; /* iOS-Momentum */
overscroll-behavior-x: contain;
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none; /* alte Edge */
}
.yf-colors-viewport::-webkit-scrollbar { width: 0; height: 0; display: none; }
.yf-colors-grid.yf-colors-track {
display: flex !important;
grid-template-columns: none !important;
gap: clamp(0.8rem, 2vw, 1.4rem);
cursor: grab;
}
.yf-colors-grid.yf-colors-track:active { cursor: grabbing; }
.yf-colors-track .yf-color {
flex: 0 0 auto;
width: clamp(240px, 31%, 360px); /* Desktop: ~3 große Bilder */
scroll-snap-align: center;
}
@media (max-width: 760px) {
.yf-colors-viewport {
margin-inline: calc(50% - 50vw);
padding-inline: max(1rem, calc(50vw - 50%));
}
.yf-colors-track .yf-color { width: 78%; } /* nächstes Bild lugt hervor */
}
/* Pfeile */
/* Hohe Spezifität + !important, damit kein Theme-Button-Style (grün/blau, Gradient)
durchschlägt. Chevron per CSS gezeichnet (kein SVG nötig). */
.yf-colors-carousel button.yf-colors-arrow {
position: absolute;
top: 44%;
transform: translateY(-50%);
z-index: 6;
width: 42px;
height: 42px;
display: flex;
align-items: center;
justify-content: center;
-webkit-appearance: none;
appearance: none;
padding: 0;
margin: 0;
border: 1px solid rgba(10, 37, 64, 0.12) !important;
border-radius: 50% !important;
background: #ffffff !important;
background-image: none !important;
color: #56703f !important;
cursor: pointer;
box-shadow: 0 14px 30px -10px rgba(10, 37, 64, 0.5);
opacity: 1 !important;
transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.yf-colors-carousel button.yf-colors-arrow .yf-colors-arrow-chevron {
display: inline-block;
width: 10px;
height: 10px;
border-right: 2.6px solid currentColor;
border-bottom: 2.6px solid currentColor;
border-radius: 1px;
}
.yf-colors-carousel button.yf-colors-arrow-prev { left: -6px; }
.yf-colors-carousel button.yf-colors-arrow-next { right: -6px; }
/* Chevron = Eck aus 2 Rändern -> optische Masse liegt außerhalb der Box-Mitte.
translateX gleicht die durch die Rotation entstehende Seitwärts-Verschiebung aus,
damit das Zeichen exakt im Kreis sitzt. */
.yf-colors-carousel button.yf-colors-arrow-prev .yf-colors-arrow-chevron { transform: translateX(3px) rotate(135deg); margin: 0; }
.yf-colors-carousel button.yf-colors-arrow-next .yf-colors-arrow-chevron { transform: translateX(-3px) rotate(-45deg); margin: 0; }
.yf-colors-carousel button.yf-colors-arrow:hover {
background: #56703f !important;
color: #fff !important;
transform: translateY(-50%) scale(1.08);
box-shadow: 0 16px 34px -10px rgba(10, 37, 64, 0.55);
}
.yf-colors-carousel button.yf-colors-arrow:focus-visible { outline: 2px solid #56703f; outline-offset: 2px; }
@media (max-width: 1024px) {
.yf-colors-track .yf-color { width: clamp(220px, 46%, 340px); }
}
@media (max-width: 760px) {
.yf-colors-track .yf-color { width: 78%; } /* nächstes Bild lugt hervor -> wischbar */
.yf-colors-carousel button.yf-colors-arrow { display: none !important; } /* mobil: wischen statt Pfeile */
}
/* ============================================================
Footer: hell/beige statt Navy (ans neue Design angepasst)
============================================================ */
footer.site {
background: #56703f !important; /* dunkles Button-Grün */
color: rgba(255, 255, 255, 0.82) !important;
border-top: 1px solid rgba(255, 255, 255, 0.12);
}
footer.site a {
color: #ffffff !important;
}
footer.site a:hover {
color: #e7ede0 !important;
}
footer.site .footer-heading {
color: rgba(255, 255, 255, 0.6) !important;
}
footer.site .foot-bottom {
border-top-color: rgba(255, 255, 255, 0.18) !important;
}
footer.site .foot-bottom div,
footer.site .foot-legal a {
color: rgba(255, 255, 255, 0.82) !important;
}
/* weißes Logo (auf dunkelgrünem Footer) */
footer.site .brand img,
footer.site .foot-grid .brand img,
footer.site .brand a img {
filter: brightness(0) invert(1) !important;
}
/* =====================================================================
AUDIT v14 — FARB-DISZIPLIN: eine Marken-Akzentfarbe (Grün #56703f).
Alle Akzent-Headlines einheitlich einfarbig Marken-Grün (statt der
alten yfood-Türkis-/Blau-Akzente). Hohe Spezifität + Source-Order,
um die !important-Regeln der Basis sicher zu schlagen.
===================================================================== */
html body.home .hero-copy h1#hero-h.hero-title-accent,
.hero-title-accent,
.hero-display-accent,
.hero-display-line-accent,
.about-hero .hero-display-line-accent,
#yf-colors-h em,
.section-title em,
.section-head h2 em,
.promise h2 em,
.inline-savings-copy h2 em,
.product-hero-copy h1 em,
.calculator-hero-copy h1 em,
.subhero h1 em,
.guide-hero h1 em,
.guide-title em,
.yf-community .yf-community-title em,
.yf-kids .yf-kids-copy h2 em {
background: none !important;
-webkit-text-fill-color: #56703f !important;
color: #56703f !important;
}
.yf-kids .yf-kids-eyebrow,
.yf-community .yf-community-eyebrow,
.yf-colors .yf-colors-eyebrow { color: #56703f !important; }
/* =====================================================================
AUDIT v14 — Farbkarten auf zarten, zur Variante passenden Farbflächen
(yfood-Prinzip: Produkt-Freisteller auf eigener Farbfläche statt Reinweiß)
Reihenfolge: Grau · Rosé · Mint · Lila · Blau · Aprikose
===================================================================== */
.yf-colors-track .yf-color:nth-child(1) { background: #f0efec; } /* Grau */
.yf-colors-track .yf-color:nth-child(2) { background: #fbeef1; } /* Rosé */
.yf-colors-track .yf-color:nth-child(3) { background: #e9f5f0; } /* Mint */
.yf-colors-track .yf-color:nth-child(4) { background: #f1edf8; } /* Lila */
.yf-colors-track .yf-color:nth-child(5) { background: #eaf1f9; } /* Blau */
.yf-colors-track .yf-color:nth-child(6) { background: #fbf1e7; } /* Aprikose */
/* =====================================================================
AUDIT v14 — Ratgeber-Themenwelten: Sprung-Nav (Chips) + Theme-Headings.
153 Artikel jetzt in 8 Cluster gegliedert, je mit Anker + Überschrift.
===================================================================== */
.ratgeber-themennav {
display: flex;
flex-wrap: wrap;
gap: 0.6rem;
margin: 0 0 2.5rem;
}
.ratgeber-themennav a {
display: inline-flex;
align-items: center;
gap: 0.45rem;
padding: 0.55rem 1.05rem;
background: #fffdf8;
border: 1px solid rgba(86, 112, 63, 0.22);
border-radius: 999px;
font-family: var(--font-body, system-ui, sans-serif);
font-weight: 700;
font-size: 0.92rem;
color: #2d3a22;
text-decoration: none;
transition: background 0.2s, color 0.2s, transform 0.2s, box-shadow 0.2s;
}
.ratgeber-themennav a span {
font-size: 0.76rem;
font-weight: 700;
color: #56703f;
background: #e7ede0;
border-radius: 999px;
padding: 0.06rem 0.5rem;
}
.ratgeber-themennav a:hover {
background: #56703f;
color: #ffffff;
transform: translateY(-2px);
box-shadow: 0 12px 26px -14px rgba(86, 112, 63, 0.6);
}
.ratgeber-themennav a:hover span { background: rgba(255, 255, 255, 0.22); color: #ffffff; }
.ratgeber-theme { margin-top: 3.2rem; scroll-margin-top: 92px; }
.ratgeber-theme-title {
font-family: var(--font-display, "Bricolage Grotesque", sans-serif);
font-weight: 800;
font-size: clamp(1.5rem, 3.2vw, 2.1rem);
color: var(--color-primary, #0a2540);
letter-spacing: -0.02em;
margin: 0 0 1.6rem;
padding-bottom: 0.6rem;
border-bottom: 2px solid rgba(86, 112, 63, 0.18);
display: flex;
align-items: baseline;
gap: 0.75rem;
flex-wrap: wrap;
}
.ratgeber-theme-title span {
font-family: var(--font-body, system-ui, sans-serif);
font-size: 0.82rem;
font-weight: 600;
color: #6b7280;
letter-spacing: 0;
}
/* =====================================================================
AUDIT v14 — Archivo-Wucht: große Headlines schwer setzen.
Hero = 900 (maximale Plakat-Wucht), Sektions-Headlines = 800.
===================================================================== */
html body.home .hero-copy h1#hero-h.hero-title-accent,
.hero-title-accent,
.hero-display,
.hero-display-line,
.hero-display-line-accent {
font-weight: 900 !important;
}
.yf-community-title,
#yf-colors-h,
.yf-kids .yf-kids-copy h2,
.guide-hero h1,
.ratgeber-theme-title,
.section-title,
.section-head h2 {
font-weight: 800 !important;
}
/* =====================================================================
AUDIT v14 — MOBILE-OPTIMIERUNG (mobile-first, „nicht überladen")
===================================================================== */
@media (max-width: 760px) {
/* 1) Hero-Headline auf Mobile etwas kleiner: weniger Wucht-Wand, mehr Luft.
(Desktop bleibt 900/voll groß.) */
html body.home .hero-copy h1#hero-h.hero-title-accent,
.hero-title-accent,
.hero-display,
.hero-display-line {
font-size: 3.8rem !important;
line-height: 1.0 !important;
}
/* 2) Ratgeber-Themennav: statt 8 gestapelter Zeilen (≈400px) eine kompakte
horizontale Wisch-Leiste (eine Zeile, swipebar). */
.ratgeber-themennav {
flex-wrap: nowrap;
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
scroll-snap-type: x proximity;
margin-bottom: 1.8rem;
padding-bottom: 0.5rem;
scrollbar-width: thin;
}
.ratgeber-themennav a {
flex: 0 0 auto;
scroll-snap-align: start;
font-size: 0.86rem;
padding: 0.5rem 0.9rem;
}
}
/* =====================================================================
AUDIT v14 — Produkte-Seite: Verfügbarkeits-Hinweis + Mobile entlasten.
===================================================================== */
.product-card-avail {
display: block;
font-family: var(--font-body, system-ui, sans-serif);
font-size: 0.8rem;
font-weight: 700;
color: #6b7280;
margin: 0.15rem 0 0.6rem;
letter-spacing: 0.01em;
}
.product-card-avail-retail { color: #56703f; }
/* Mobile: doppelte Produkt-Detail-Sektionen ausblenden – Übersichts-Karten
reichen, kein Überladen. Desktop behält die Detailansicht (Progressive Disclosure). */
@media (max-width: 760px) {
.aquahome-launch,
.product-colors,
.kids-launch { display: none !important; }
}
/* Mobile: Text-CTAs der Produktkarten ausblenden (verlinkten auf mobil
versteckte Detail-Sektionen). Amazon-Button + Verfügbarkeits-Hinweis bleiben. */
@media (max-width: 760px) {
.product-group-card .product-card-cta:not(.product-card-cta-amazon) {
display: none !important;
}
}
/* =====================================================================
AUDIT v14 — Produktkarten: swipebare Farb-Galerie (Touch + Pfeile + Punkte)
===================================================================== */
.pcard-gallery { position: relative; }
.pcard-gallery-viewport { overflow: hidden; touch-action: pan-y; cursor: grab; border-radius: inherit; }
.pcard-gallery-viewport:active { cursor: grabbing; }
.pcard-gallery-track { display: flex; will-change: transform; }
.pcard-slide { position: relative; flex: 0 0 100%; }
.pcard-slide img { width: 100%; height: auto; display: block; }
.pcard-slide-label {
position: absolute; left: 0.6rem; bottom: 0.6rem;
background: rgba(255,255,255,0.94); color: #14224a;
font-family: var(--font-body, system-ui, sans-serif);
font-size: 0.72rem; font-weight: 700; letter-spacing: 0.02em;
padding: 0.26rem 0.7rem; border-radius: 999px;
box-shadow: 0 4px 12px -6px rgba(10, 37, 64, 0.35);
}
.pcard-arrow {
position: absolute; top: 42%; transform: translateY(-50%);
width: 42px; height: 42px; display: flex; align-items: center; justify-content: center;
border: none; border-radius: 50%; background: rgba(255, 255, 255, 0.95);
box-shadow: 0 6px 18px -8px rgba(10, 37, 64, 0.5); cursor: pointer;
color: #56703f; opacity: 0; transition: opacity 0.2s, background 0.2s, color 0.2s; z-index: 3; padding: 0;
}
.pcard-gallery:hover .pcard-arrow { opacity: 1; }
.pcard-arrow:hover { background: #56703f; color: #ffffff; }
.pcard-arrow-prev { left: 8px; }
.pcard-arrow-next { right: 8px; }
.pcard-chevron { display: inline-block; width: 10px; height: 10px; border-right: 2.6px solid currentColor; border-bottom: 2.6px solid currentColor; }
/* Chevron = Eck aus 2 Rändern -> optische Masse außerhalb der Box-Mitte.
translateX gleicht die Rotations-Verschiebung aus, damit es mittig im Kreis sitzt. */
.pcard-arrow-prev .pcard-chevron { transform: translateX(2.5px) rotate(135deg); margin: 0; }
.pcard-arrow-next .pcard-chevron { transform: translateX(-2.5px) rotate(-45deg); margin: 0; }
.pcard-dots { display: flex; gap: 0.35rem; justify-content: center; align-items: center; margin-top: 0.55rem; }
.pcard-dot { display: block !important; width: 7px !important; height: 7px !important; min-width: 7px !important; min-height: 7px !important; max-width: 7px !important; max-height: 7px !important; flex: 0 0 7px !important; padding: 0 !important; border: none !important; border-radius: 50% !important; background: rgba(20, 34, 74, 0.22); cursor: pointer; transition: background 0.2s, transform 0.2s; }
.pcard-dot.is-active { background: #56703f; transform: scale(1.25); }
@media (max-width: 760px) { .pcard-arrow { display: none; } }
/* =====================================================================
AUDIT v14 — Produktkarte Aqua Mobile: Retailer-Logo-Karten (wie Hero).
===================================================================== */
.product-card-retailers {
display: flex;
flex-wrap: wrap;
gap: 0.4rem;
margin-top: 0.15rem;
}
.product-card-retailer {
flex: 1 1 64px;
min-width: 60px;
display: flex;
align-items: center;
justify-content: center;
background: #ffffff;
border: 1px solid rgba(10, 37, 64, 0.1);
border-radius: 12px;
padding: 0.5rem 0.4rem;
min-height: 46px;
transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
}
.product-card-retailer:hover,
.product-card-retailer:focus-visible {
border-color: #56703f;
transform: translateY(-2px);
box-shadow: 0 8px 18px -10px rgba(10, 37, 64, 0.3);
}
.product-card-retailer img {
max-width: 62px;
max-height: 22px;
width: auto;
height: auto;
object-fit: contain;
}
/* =====================================================================
AUDIT v14 — Announce-Bar global entfernen (Infos stehen mehrfach sonst).
===================================================================== */
.announce { display: none !important; }
/* AUDIT v14 — Stores-Buttons: Text lief auf Mobile aus dem grünen Button.
Volle Kartenbreite + Umbruch erlaubt statt Clipping. */
@media (max-width: 760px) {
.product-stores .stores-grid .store-cta,
.stores-grid .store-cta,
[data-retailer-grid] .store-cta {
width: 100% !important;
box-sizing: border-box !important;
justify-content: center !important;
text-align: center !important;
white-space: normal !important;
hyphens: none !important;
overflow-wrap: normal !important;
font-size: 0.8rem !important;
padding: 0.62rem 0.7rem !important;
gap: 0.3rem !important;
line-height: 1.15 !important;
}
}
/* =====================================================================
AUDIT v14 — Hero-Schrift bulletproof: Archivo 900 hart erzwingen,
damit sie nicht (durch Flackern/Cache) auf die alte Schrift zurückfällt.
===================================================================== */
html body.home .hero-copy h1#hero-h.hero-title-accent,
html body.home .hero-copy .hero-display,
html body.home .hero-copy .hero-display-line,
html body.home .hero-copy .hero-display-line-accent {
font-family: "Archivo", "Bricolage Grotesque", "Mona Sans", system-ui, sans-serif !important;
font-weight: 900 !important;
}
/* Dermatest-Siegel frei positioniert im Hero (oben rechts) */
body.home .hero-seal-float {
position: absolute;
top: 3rem;
right: 0.8rem;
width: 82px;
height: auto;
z-index: 10;
pointer-events: none;
}
/* Eigener kompakter CTA nur für die Handyansicht. */
body.home .hero-cta-mobile {
display: none;
}
@media (min-width: 761px) {
body.home .hero-seal-float {
width: 100px;
top: 1.5rem;
right: 2rem;
}
}
/* Mobile-Hero: Retailer-Leiste ganz unten */
@media (max-width: 760px) {
/* Hero-Textbox füllt die Hero-Höhe */
body.home .hero-fullbleed .hero-copy {
display: flex !important;
flex-direction: column;
height: min(89vh, 730px) !important;
min-height: min(89vh, 730px);
padding-top: 2.5rem !important;
}
/* Lede direkt unter „frisch.", Retailerbar ganz unten */
body.home .hero-fullbleed .hero-lede { margin-top: 0.4rem !important; }
body.home .hero-copy .hero-shelf-block { margin-top: auto !important; padding-bottom: 0.4rem !important; }
}
/* =====================================================================
AUDIT v14 — Retailer-Logos „zittern" dezent (Klickbarkeits-Hinweis).
Kurzer Wackler alle ~4,5s, versetzt pro Logo. Respektiert reduced-motion.
===================================================================== */
@keyframes mybidet-logo-wiggle {
0%, 86%, 100% { transform: translateY(0) rotate(0deg); }
88% { transform: translateY(-2px) rotate(-3deg); }
90% { transform: translateY(-1px) rotate(3deg); }
92% { transform: rotate(-2.5deg); }
94% { transform: rotate(1.8deg); }
96% { transform: rotate(-1deg); }
98% { transform: rotate(0deg); }
}
.hero-retailer,
.yf-comm-retailer,
.product-card-retailer {
animation: mybidet-logo-wiggle 4.5s ease-in-out infinite;
will-change: transform;
}
.hero-retailer:nth-child(2),
.yf-comm-retailer:nth-child(2),
.product-card-retailer:nth-child(2) { animation-delay: 0.45s; }
.hero-retailer:nth-child(3),
.yf-comm-retailer:nth-child(3),
.product-card-retailer:nth-child(3) { animation-delay: 0.9s; }
.hero-retailer:nth-child(4),
.yf-comm-retailer:nth-child(4),
.product-card-retailer:nth-child(4) { animation-delay: 1.35s; }
/* Beim Hover/Tap ruhig stellen */
.hero-retailer:hover,
.yf-comm-retailer:hover,
.product-card-retailer:hover { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
.hero-retailer,
.yf-comm-retailer,
.product-card-retailer { animation: none; }
}
/* =====================================================================
AUDIT v14 — Produktkarten: Buy-Bereich (Verfügbarkeit + Buttons/Logos)
unten bündig, damit alle Karten gleich „enden" trotz unterschiedlicher
Inhaltshöhe. Karten sind via align-items:stretch eh gleich hoch.
===================================================================== */
body.product-page .product-group-card .product-card-avail {
margin-top: auto !important;
padding-top: 0.4rem;
}
/* =====================================================================
AUDIT v14 — Amazon-Buttons in den Produktkarten auch „zittern".
Breite Buttons -> dezentes horizontales Zittern (statt Drehen), versetzt.
===================================================================== */
@keyframes mybidet-btn-shake {
0%, 84%, 100% { transform: translateX(0); }
86% { transform: translateX(-3px); }
88% { transform: translateX(3px); }
90% { transform: translateX(-2px); }
92% { transform: translateX(2px); }
94% { transform: translateX(-1px); }
96% { transform: translateX(0); }
}
.product-card-cta-amazon {
animation: mybidet-btn-shake 4.5s ease-in-out infinite;
will-change: transform;
}
.product-group-card:nth-child(2) .product-card-cta-amazon { animation-delay: 0.5s; }
.product-group-card:nth-child(3) .product-card-cta-amazon { animation-delay: 1s; }
.product-group-card:nth-child(4) .product-card-cta-amazon { animation-delay: 1.5s; }
.product-card-cta-amazon:hover,
.product-card-cta-amazon:focus-visible { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
.product-card-cta-amazon { animation: none; }
}
/* AUDIT v14 — „mybidet KIDS bei Amazon"-Button (KIDS-Sektion) auch zittern */
.yf-kids-btn {
animation: mybidet-btn-shake 4.5s ease-in-out infinite;
animation-delay: 0.7s;
will-change: transform;
}
.yf-kids-btn:hover,
.yf-kids-btn:focus-visible { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
.yf-kids-btn { animation: none; }
}
/* =====================================================================
AUDIT v14 — Hero-Slogan-Farben: „Endlich" = sehr dunkelblau,
„frisch." = Türkis. (Überschreibt das bisherige Grün/Weiß.)
===================================================================== */
html body.home .hero-copy h1#hero-h.hero-title-accent {
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
background: none !important;
text-transform: none !important;
}
html body.home .hero-copy .hero-display,
html body.home .hero-copy .hero-display-line,
html body.home .hero-copy .hero-display-line-accent {
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
background: none !important;
text-transform: lowercase !important;
}
/* „frisch." in Mint */
html body.home .hero-copy .hero-display .hero-display-line {
color: #1bb6c6 !important;
-webkit-text-fill-color: #1bb6c6 !important;
}
/* Lede: statisch, keine Animation */
body.home .hero-fullbleed .hero-lede {
animation: none !important;
opacity: 1 !important;
transform: none !important;
transition: none !important;
}
/* =====================================================================
ANIMATIONS — Hero-Entrance + Scroll-Reveal
Nur transform + opacity (GPU-composited, kein Layout-Reflow).
Respektiert prefers-reduced-motion.
===================================================================== */
@media (prefers-reduced-motion: no-preference) {
/* ── 1. Scroll-Reveal reaktivieren (main.min.js beobachtet .reveal → .in) ── */
.reveal {
opacity: 0 !important;
transform: translateY(22px) !important;
transition: opacity 0.65s cubic-bezier(0.16,1,0.3,1),
transform 0.65s cubic-bezier(0.16,1,0.3,1) !important;
}
.reveal.in {
opacity: 1 !important;
transform: none !important;
}
/* ── 2. Stagger-Delays für Geschwister-Elemente ── */
/* Reviews */
.reviews-grid .review.reveal:nth-child(2) { transition-delay: 0.12s !important; }
.reviews-grid .review.reveal:nth-child(3) { transition-delay: 0.24s !important; }
/* Stages */
.stages-grid .stage.reveal:nth-child(2) { transition-delay: 0.10s !important; }
.stages-grid .stage.reveal:nth-child(3) { transition-delay: 0.20s !important; }
.stages-grid .stage.reveal:nth-child(4) { transition-delay: 0.30s !important; }
/* Ratgeber Artikel */
.ratgeber-grid .article.reveal:nth-child(2) { transition-delay: 0.12s !important; }
.ratgeber-grid .article.reveal:nth-child(3) { transition-delay: 0.24s !important; }
/* Extra: mb-reveal Klasse für JS-erweiterte Elemente */
.mb-reveal {
opacity: 0 !important;
transform: translateY(22px) !important;
transition: opacity 0.65s cubic-bezier(0.16,1,0.3,1),
transform 0.65s cubic-bezier(0.16,1,0.3,1) !important;
}
.mb-reveal.in {
opacity: 1 !important;
transform: none !important;
}
.mb-reveal[data-d="1"] { transition-delay: 0.10s !important; }
.mb-reveal[data-d="2"] { transition-delay: 0.20s !important; }
.mb-reveal[data-d="3"] { transition-delay: 0.30s !important; }
.mb-reveal[data-d="4"] { transition-delay: 0.40s !important; }
/* ── 3. Hero-Entrance (CSS-Animation, kein Observer nötig) ── */
@keyframes mb-hero-up {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: none; }
}
body.home .hero-title-accent {
animation: mb-hero-up 0.8s 0.08s cubic-bezier(0.16,1,0.3,1) both;
}
body.home .hero-display {
animation: mb-hero-up 0.8s 0.24s cubic-bezier(0.16,1,0.3,1) both;
}
body.home .hero-shelf-block {
animation: mb-hero-up 0.7s 0.56s cubic-bezier(0.16,1,0.3,1) both;
}
/* Proofbar glides in after hero */
.yf-proofbar-inner {
animation: mb-hero-up 0.7s 0.65s cubic-bezier(0.16,1,0.3,1) both;
}
/* ── 4. Retailer-Logos: Scale+Fade beim ersten Einblenden ── */
@keyframes mb-logo-pop {
from { opacity: 0; transform: scale(0.88) translateY(12px); }
to { opacity: 1; transform: none; }
}
.mb-logo-in .yf-comm-retailer:nth-child(1) { animation: mb-logo-pop 0.5s 0.00s cubic-bezier(0.16,1,0.3,1) both; }
.mb-logo-in .yf-comm-retailer:nth-child(2) { animation: mb-logo-pop 0.5s 0.10s cubic-bezier(0.16,1,0.3,1) both; }
.mb-logo-in .yf-comm-retailer:nth-child(3) { animation: mb-logo-pop 0.5s 0.20s cubic-bezier(0.16,1,0.3,1) both; }
.mb-logo-in .yf-comm-retailer:nth-child(4) { animation: mb-logo-pop 0.5s 0.30s cubic-bezier(0.16,1,0.3,1) both; }
}
/* =====================================================================
STICKY MOBILE BAR — weißes Design passend zur aktuellen Designsprache
===================================================================== */
body.home .mobile-sticky-cta {
background: rgba(255, 255, 255, 0.97) !important;
border: 1px solid rgba(0, 0, 0, 0.08) !important;
box-shadow: 0 -4px 24px -8px rgba(10, 37, 64, 0.12), 0 -1px 0 rgba(0,0,0,0.06) !important;
backdrop-filter: blur(20px) saturate(160%) !important;
-webkit-backdrop-filter: blur(20px) saturate(160%) !important;
}
body.home .mobile-sticky-cta::before {
background: linear-gradient(90deg, #1bb6c6 0%, #56703f 60%, #1bb6c6 100%) !important;
}
body.home .mobile-sticky-cta .sticky-retailer-label,
body.home .mobile-sticky-cta .price {
color: #0a2540 !important;
text-shadow: none !important;
}
body.home .mobile-sticky-cta .price small,
body.home .mobile-sticky-cta .sticky-retailer-label small {
color: #64748b !important;
}
/* Bewertungssterne: gold (UX-Konvention) – nicht von --gold Rebrand betroffen */
.review .stars,
.reviews-grid .stars,
.yf-proofbar-stars { color: #ffc02e !important; }
/* =====================================================================
RATGEBER HERO — hell/beige (hub + artikel, konsistent zur Designsprache)
Überschreibt das ursprüngliche dunkle Navy-Design vollständig.
===================================================================== */
body.guide-page .subhero.guide-hero {
background:
radial-gradient(ellipse 55% 70% at 88% 25%, rgba(86, 112, 63, 0.07) 0%, transparent 55%),
radial-gradient(ellipse 40% 40% at 10% 85%, rgba(27, 182, 198, 0.05) 0%, transparent 50%),
linear-gradient(160deg, #fdf7ee 0%, #f5eddf 55%, #f0e6d2 100%) !important;
border-bottom: 1px solid rgba(86, 112, 63, 0.10) !important;
}
/* Overlay-Gradienten entfernen */
body.guide-page .subhero.guide-hero::before { background: none !important; }
/* Dekorativer Dark-Card-Platzhalter rechts → weg */
body.guide-page .subhero.guide-hero::after { display: none !important; }
/* Innere Textbox: volle Breite ohne Platz für ::after */
body.guide-page .subhero .inner,
body.guide-page.guide-hub .subhero .inner {
max-width: 800px !important;
}
/* Breadcrumbs-Pill → hell */
body.guide-page .subhero .crumbs {
background: rgba(255, 255, 255, 0.88) !important;
border: 1px solid rgba(86, 112, 63, 0.20) !important;
color: #2d3a22 !important;
box-shadow: 0 2px 8px -4px rgba(10, 37, 64, 0.08) !important;
}
body.guide-page .subhero .crumbs a,
body.guide-page .subhero .crumbs span { color: #2d3a22 !important; }
body.guide-page .subhero .crumbs a:hover { color: #56703f !important; }
/* Eyebrow-Pill → olivgrün auf weiß */
body.guide-page .subhero .eyebrow {
background: rgba(255, 255, 255, 0.88) !important;
border: 1px solid rgba(86, 112, 63, 0.22) !important;
color: #56703f !important;
letter-spacing: 0.16em !important;
}
/* Headline: Navy + Olivgrün-Akzent (kein Verlauf) */
body.guide-page .subhero h1 { color: #14224a !important; }
body.guide-page .subhero h1 em {
background: none !important;
-webkit-background-clip: unset !important;
background-clip: unset !important;
-webkit-text-fill-color: #56703f !important;
color: #56703f !important;
}
/* Fließtext */
body.guide-page .subhero .lede { color: #334155 !important; }
body.guide-page .subhero .guide-hero-note { color: #64748b !important; }
/* Trust-Chips (waren weiß-transparent auf Navy) → jetzt weiße Karten */
body.guide-page .guide-trust span {
background: rgba(255, 255, 255, 0.88) !important;
border: 1px solid rgba(86, 112, 63, 0.18) !important;
color: #2d3a22 !important;
}
/* Meta-Leiste (Lesezeit, Datum) — bleiben weiße Karten, Schrift dunkel */
body.guide-page .subhero .meta span { color: var(--ink-soft, #334155) !important; }
body.guide-page .subhero .meta strong { color: var(--ink, #14224a) !important; }
/* Secondary/Ghost-Button im Hero — war weiß-transparent (für Navy-BG), jetzt Outline-Grün */
body.guide-page .guide-hero-actions .btn-secondary,
body.guide-page .guide-hero-actions .btn-ghost {
background: transparent !important;
color: #56703f !important;
border: 2px solid rgba(86, 112, 63, 0.4) !important;
}
body.guide-page .guide-hero-actions .btn-secondary:hover,
body.guide-page .guide-hero-actions .btn-ghost:hover {
background: rgba(86, 112, 63, 0.08) !important;
border-color: #56703f !important;
}
body.kids-page .guide-hero-actions {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 1rem;
}
/* Desktop: Text in allen KIDS-Sektionen zentriert */
body.kids-page .yf-kids-copy { text-align: center; }
body.kids-page .yf-kids-copy .yf-kids-feats { margin-left: auto; margin-right: auto; }
/* Desktop: Amazon-Button gleiche Höhe + gleicher Rahmen wie So-funktioniert's (btn-secondary) */
body.kids-page .guide-hero-actions .yf-section-amz-btn {
display: inline-flex;
align-items: center;
justify-content: center;
height: 56px !important; /* exakt gleiche Höhe wie So-funktioniert's */
min-height: 56px;
width: auto !important;
padding: 0 2rem; /* nur horizontal; Höhe fix → Logo drückt nicht mehr auf */
border: 1px solid var(--ink, #0a2540);
border-radius: 999px !important;
background: transparent !important;
box-shadow: none !important;
transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
body.kids-page .guide-hero-actions .yf-section-amz-btn img { height: 26px !important; width: auto; max-width: none; max-height: none; }
/* Hover/Tap: dezenter olivgrüner Tint + grüner Rahmen + leichtes Anheben (Logo bleibt lesbar) */
body.kids-page .guide-hero-actions .yf-section-amz-btn:hover,
body.kids-page .guide-hero-actions .yf-section-amz-btn:active,
body.kids-page .guide-hero-actions .yf-section-amz-btn:focus-visible {
background: rgba(86, 112, 63, 0.08) !important;
border-color: #56703f !important;
transform: translateY(-2px);
box-shadow: 0 12px 26px -14px rgba(10, 37, 64, 0.4) !important;
}
/* So funktioniert's Button: grüner Hover auf Desktop + Mobile */
body.kids-page .guide-hero-actions .btn-secondary:hover,
body.kids-page .guide-hero-actions .btn-secondary:active,
body.kids-page .guide-hero-actions .btn-secondary:focus-visible {
background: var(--yf-olive-deep, #56703f) !important;
color: #fff !important;
border-color: var(--yf-olive-deep, #56703f) !important;
}
@media (max-width: 820px) {
body.kids-page .guide-hero-actions {
flex-direction: column !important;
align-items: center;
width: 100%;
gap: 0 !important;
}
body.kids-page .guide-hero-actions .btn {
width: 100%;
max-width: 320px;
text-align: center;
justify-content: center;
}
/* Amazon-Button mobil: volle Breite wie So-funktioniert's (!important schlägt die Desktop-Regel width:auto/height:56px, die sonst hier durchschlägt) */
body.kids-page .guide-hero-actions .yf-section-amz-btn {
width: 100% !important;
max-width: 320px !important;
height: 56px !important;
min-height: 56px !important;
padding: 0 1.25rem !important;
margin: 0 auto 1.6rem !important;
border: 1px solid var(--ink, #0a2540) !important;
background: transparent !important;
box-shadow: none !important;
}
body.kids-page .guide-hero-actions .yf-section-amz-btn img {
max-height: 26px;
}
/* So funktioniert's: grüner Hover/Active */
body.kids-page .guide-hero-actions .btn-secondary:hover,
body.kids-page .guide-hero-actions .btn-secondary:active,
body.kids-page .guide-hero-actions .btn-secondary:focus-visible {
background: var(--yf-olive-deep, #56703f) !important;
color: #fff !important;
border-color: var(--yf-olive-deep, #56703f) !important;
}
}
/* =====================================================================
KIDS-RATGEBER SECTION — Übersicht auf mybidet-kids/
===================================================================== */
.kids-ratgeber {
background: var(--yf-cream-soft, #fbf4ea);
padding: 4rem 0;
}
.kids-ratgeber .section-head {
text-align: center;
margin-bottom: 2.5rem;
}
.kids-ratgeber .section-head h2 {
font-size: clamp(1.6rem, 3.5vw, 2.2rem);
color: var(--yf-navy, #14224a);
margin: 0.4rem 0 0.6rem;
}
.kids-ratgeber .section-head p {
color: var(--muted, #64748b);
font-size: 1rem;
max-width: 520px;
margin: 0 auto;
}
.kids-ratgeber-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.5rem 2rem;
list-style: none;
padding: 0;
margin: 0 0 1.5rem;
}
.kids-ratgeber-grid li a {
display: flex;
align-items: flex-start;
gap: 0.45rem;
font-size: 0.95rem;
font-weight: 600;
color: var(--yf-navy, #14224a);
text-decoration: none;
line-height: 1.35;
transition: color 0.16s;
}
.kids-ratgeber-grid li a::before {
content: "→";
flex-shrink: 0;
color: var(--yf-olive, #7e9c85);
font-weight: 700;
margin-top: 0.05em;
}
.kids-ratgeber-grid li a:hover { color: var(--yf-olive-deep, #56703f); }
.kids-ratgeber-all {
text-align: center;
margin-top: 1.8rem;
}
.kids-ratgeber-all a {
display: inline-flex;
align-items: center;
gap: 0.4rem;
padding: 0.7rem 1.6rem;
border-radius: 999px;
border: 2px solid var(--yf-olive, #7e9c85);
color: var(--yf-olive-deep, #56703f);
font-weight: 700;
font-size: 0.95rem;
text-decoration: none;
transition: background 0.18s, color 0.18s;
}
.kids-ratgeber-all a:hover {
background: var(--yf-olive-deep, #56703f);
color: #fff;
}
@media (max-width: 820px) {
.kids-ratgeber-grid {
grid-template-columns: repeat(2, 1fr);
gap: 1rem 1.2rem;
}
}
@media (max-width: 500px) {
.kids-ratgeber-grid {
grid-template-columns: 1fr;
}
}
/* =====================================================================
GLOBALE MICRO-INTERACTIONS — yfood-Niveau
Ergänzt fehlende Hover-States; überschreibt keine bestehenden.
===================================================================== */
/* Inline-Links: sanfter Farbwechsel statt hartem Sprung */
a { transition: color 0.18s ease, opacity 0.18s ease; }
/* Review-Karten: lift + Schatten (bisher statisch) */
.review {
transition: transform 0.28s cubic-bezier(0.16,1,0.3,1),
box-shadow 0.28s cubic-bezier(0.16,1,0.3,1) !important;
}
.review:hover {
transform: translateY(-4px) !important;
box-shadow: 0 16px 40px -12px rgba(10, 37, 64, 0.13) !important;
}
/* Doktor/Experten-Karten: lift + Schatten */
.doctor {
transition: transform 0.28s cubic-bezier(0.16,1,0.3,1),
box-shadow 0.28s cubic-bezier(0.16,1,0.3,1) !important;
}
.doctor:hover {
transform: translateY(-4px) !important;
box-shadow: 0 20px 48px -14px rgba(10, 37, 64, 0.14) !important;
}
/* Bild-Zoom beim Hovern über Karten — "atmet" mit der Karte mit */
.article .cover { overflow: hidden; }
.article .cover img {
transition: transform 0.55s cubic-bezier(0.16,1,0.3,1) !important;
}
.article:hover .cover img { transform: scale(1.045) !important; }
.stage img {
transition: transform 0.55s cubic-bezier(0.16,1,0.3,1) !important;
}
.stage:hover img { transform: scale(1.04) !important; }
.product-card picture { overflow: hidden; }
.product-card picture img {
transition: transform 0.55s cubic-bezier(0.16,1,0.3,1) !important;
}
.product-card:hover picture img { transform: scale(1.04) !important; }
/* Reduced-motion: alle Hover-Transforms deaktivieren */
@media (prefers-reduced-motion: reduce) {
.review:hover,
.doctor:hover,
.article:hover .cover img,
.stage:hover img,
.product-card:hover picture img { transform: none !important; }
}
/* =====================================================================
DESKTOP-SKALIERUNG — nur ab 1024 px
Schriften, Logos, Cards alles größer; Mobile bleibt unverändert.
===================================================================== */
@media (min-width: 1024px) {
/* Headline „endlich frisch." — groß wie Referenzbild */
body.home .hero-display {
font-size: clamp(4.5rem, 6.5vw, 9rem) !important;
line-height: 0.88 !important;
}
/* Textblock breiter → mehr Platz für die große Schrift */
body.home .hero-copy {
max-width: 48rem !important;
}
/* Subtext / Lede */
body.home .hero-fullbleed .hero-lede {
font-size: clamp(1.15rem, 1.65vw, 1.4rem) !important;
max-width: 38ch !important;
line-height: 1.52 !important;
}
/* CTA-Button größer */
body.home .hero-cta .btn {
min-height: 68px !important;
font-size: 1.1rem !important;
padding-left: 2.2rem !important;
padding-right: 2.2rem !important;
}
/* Retailer-Logos (dm · Rossmann · budni · Amazon) */
body.home .hero-retailer {
min-height: 72px !important;
padding: 1rem 1.1rem !important;
border-radius: 18px !important;
}
body.home .hero-retailer img {
max-height: 34px !important;
}
/* Hinweis-Zeile „Im Regal bei …" */
body.home .hero-shelf-note {
font-size: 1rem !important;
}
}
/* Align h3 across all 4 product cards.
Step 1: equal column widths so 4:3 images land at the same height
(default grid uses 1.05fr/0.95fr which makes gallery cards wider).
Scoped to desktop only — mobile/tablet breakpoints keep their 2-col and 1-col layouts. */
@media (min-width: 1181px) {
body.product-page .product-group-grid.product-group-grid-4 {
grid-template-columns: repeat(4, 1fr) !important;
}
}
/* Step 2: .pcard-dots is a sibling flex item (inserted after gallery via JS).
Picture cards are missing: dots.margin-top (0.55rem) + dots.height (7px) + one flex gap (0.85rem).
Add all three as bottom margin on picture to bring span/h3 to the same Y. */
body.product-page .product-group-card picture {
margin-bottom: calc(1.4rem + 7px) !important;
}
/* Step 3: Aqua Home's color-label wraps to 2 lines; reserve 2-line height
on all classless color-label spans so h3 lands at the same Y. */
body.product-page .product-group-card > span:not([class]) {
min-height: 2.4rem !important;
display: block !important;
}
/* ===== mybidet KIDS — Rainbow-Button: Verpackungsfarben + Animationen ===== */
@keyframes kids-rainbow {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
@keyframes kids-wiggle {
0%, 82%, 100% { transform: rotate(0deg) scale(1); }
84% { transform: rotate(-5deg) scale(1.08); }
86% { transform: rotate(5deg) scale(1.10); }
88% { transform: rotate(-3deg) scale(1.07); }
90% { transform: rotate(2deg) scale(1.04); }
92% { transform: rotate(0deg) scale(1); }
}
@keyframes kids-pulse {
0%, 74%, 100% { transform: scale(1); box-shadow: 0 4px 14px -4px rgba(0,184,148,.45); }
76% { transform: scale(1.07); box-shadow: 0 6px 22px -4px rgba(0,184,148,.70); }
78% { transform: scale(0.97); }
80% { transform: scale(1.05); }
82% { transform: scale(1); }
}
.nav-menu a.nav-savings:before { display: none !important; }
/* Drawer (mobile burger): "mybidet" schwarz, KiDS-Buchstaben behalten ihre Farben */
.drawer a[href$="/mybidet-kids/"] { color: var(--ink, #0a2540); font-weight: 700; }
/* KIDS-Chip im Mobile-Header */
/* KIDS-Chip: Desktop + Mobile */
.nav-kids-chip {
display: none;
align-items: center;
gap: 0.05em;
padding: 0.42rem 0.9rem;
border-radius: 999px;
background: rgba(255,255,255,0.93);
border: 1.5px solid rgba(46,167,19,0.4);
font-size: 1.1rem;
font-weight: 800;
text-decoration: none;
box-shadow: 0 2px 10px rgba(0,0,0,0.09);
line-height: 1;
margin-right: 0.7rem;
animation: kids-pulse 4.5s ease-in-out infinite;
will-change: transform, box-shadow;
}
.nav-kids-chip:hover,
.nav-kids-chip:focus-visible {
animation-play-state: paused;
transform: translateY(-1px);
box-shadow: 0 4px 16px rgba(0,0,0,0.14);
}
@media (max-width: 820px) {
.nav-kids-chip {
display: inline-flex;
font-size: 1rem;
padding: 0.38rem 0.65rem;
margin-right: 0.55rem;
}
}
/* Jetzt-kaufen-Button pulsiert auf der KIDS-Seite */
.kids-page .nav-buy {
animation: kids-pulse 4.5s ease-in-out infinite;
animation-delay: 1.5s;
will-change: transform, box-shadow;
}
.kids-page .nav-buy:hover,
.kids-page .nav-buy:focus-visible { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
.kids-page .nav-buy { animation: none; }
}
/* === mybidet KIDS — bunte Buchstaben exakt wie auf der Verpackung === */
.kl-k { color: #2b7fff; }
.kl-i {
color: #2ea713;
display: inline-block;
position: relative;
}
.kl-i::before {
content: "\2665";
position: absolute;
top: -0.25em;
left: 50%;
transform: translateX(-50%) scale(0.65);
font-size: 0.72em;
line-height: 1;
color: #2ea713;
pointer-events: none;
}
.kl-d { color: #e8001d; }
.kl-s { color: #ff6b0b; }
/* Buntes „KIDS" als Produkt-Überschrift: Buchstaben erben die h3-Größe
(statt der kleinen Nav-Chip-Größe) — Karte 28.8px, Detailsektion 48px.
Marken-Farben mit !important, da Karten-h3 sonst die Buchstaben einfärbt. */
h3.kids-wordmark { font-weight: 700; line-height: 1.1; letter-spacing: -0.01em; }
h3.kids-wordmark .kl-k,
h3.kids-wordmark .kl-i,
h3.kids-wordmark .kl-d,
h3.kids-wordmark .kl-s { font-size: 1em !important; font-weight: inherit; }
h3.kids-wordmark .kl-k { color: #2b7fff !important; }
h3.kids-wordmark .kl-i,
h3.kids-wordmark .kl-i::before { color: #2ea713 !important; }
h3.kids-wordmark .kl-d { color: #e8001d !important; }
h3.kids-wordmark .kl-s { color: #ff6b0b !important; }
/* Startseite KIDS-Sektion: Aktions-Row (Button + Amazon) */
.yf-kids-actions {
display: flex;
flex-direction: column;
align-items: center;
gap: 1.1rem;
margin-top: 0.25rem;
}
/* Startseite Desktop: Amazon-Button — gleiche Pille-Form, aber Amazon-Logo-Stil (weißes Tile mit Shadow) */
.yf-kids-retailers .yf-comm-retailer {
min-height: 52px;
padding: 0.75rem 2.4rem;
min-width: 340px !important;
display: inline-flex;
align-items: center;
justify-content: center;
border: none;
border-radius: 999px;
box-shadow: 0 2px 12px -4px rgba(10,37,64,.18), 0 1px 4px rgba(10,37,64,.10);
transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.yf-kids-retailers .yf-comm-retailer:hover {
transform: translateY(-3px);
box-shadow: 0 10px 32px -8px rgba(10,37,64,.28), 0 2px 8px rgba(10,37,64,.12);
}
.yf-kids-retailers .yf-comm-retailer img { max-height: 36px !important; width: auto; }
@media (max-width: 820px) {
.yf-kids-actions { align-items: center; }
.yf-kids-actions .yf-kids-btn { width: calc(100% - 2rem); max-width: 380px; justify-content: center; }
.yf-kids-retailers .yf-comm-retailer img { max-height: 44px !important; }
.yf-kids-retailers .yf-comm-retailer {
min-width: unset !important;
width: calc(100% - 2rem);
max-width: 380px;
min-height: 64px;
padding: 12px 20px;
box-sizing: border-box;
}
}
.yf-kids-learn {
font-size: 1rem;
letter-spacing: 0.01em;
}
/* ===== KIDS Feuchttücher-Problem: Heading + Subtext zentriert ===== */
.kids-problem .section-head { text-align: center; }
.kids-problem .section-head .eyebrow { margin-left: auto; margin-right: auto; }
.kids-problem .section-head p { max-width: 640px; margin-left: auto; margin-right: auto; }
/* ===== KIDS Schritte-Sektion: Abstand + abgerundete Ecken am Anleitungsbild ===== */
.kids-steps-figure,
.kids-problem-figure {
margin-top: 2.5rem;
}
.kids-steps-figure img,
.kids-problem-figure img {
border-radius: 1.5rem;
display: block;
width: 100%;
height: auto;
box-shadow: 0 8px 32px -8px rgba(0,0,0,.12);
}
/* ===== mybidet Aqua Home — Produktstreifen unter dem AQUA-Karussell ===== */
.yf-aquahome-strip {
padding: 2.5rem 0 0.5rem;
border-top: 1px solid rgba(0,0,0,.07);
margin-top: 1.5rem;
}
.yf-aquahome-head {
text-align: center;
margin-bottom: 1.5rem;
}
.yf-aquahome-head h3 {
font-size: clamp(1.4rem, 3vw, 2rem);
font-weight: 800;
color: var(--color-ink, #16213e);
margin: 0 0 0.35rem;
line-height: 1.15;
}
.yf-aquahome-head h3 em {
font-style: normal;
color: #00b894;
}
.yf-aquahome-head p {
font-size: 1rem;
color: #6b7280;
margin: 0;
}
.yf-aquahome-scroll {
display: flex;
gap: 1rem;
overflow-x: auto;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
padding-bottom: 0.75rem;
scrollbar-width: none;
}
.yf-aquahome-scroll::-webkit-scrollbar { display: none; }
.yf-aquahome-scroll .yf-color {
scroll-snap-align: start;
flex: 0 0 calc(33.333% - 0.67rem);
min-width: 220px;
max-width: 320px;
}
/* ---- Community stats Amazon CTA ---- */
.yf-community-reviews-cta {
text-align: center;
margin-top: 1.75rem;
}
/* ---- Reviews Amazon CTA ---- */
.reviews-cta-wrap {
text-align: center;
margin: 1.5rem 0 2rem;
}
.reviews-cta {
display: inline-flex;
align-items: center;
gap: 0.4em;
padding: 0.75rem 1.75rem;
border-radius: 999px;
border: 2px solid var(--yf-olive, #7e9c85);
color: var(--yf-olive-deep, #56703f);
background: transparent;
font-weight: 700;
font-size: 1rem;
text-decoration: none;
transition: background 0.18s, color 0.18s;
}
.reviews-cta:hover {
background: var(--yf-olive-deep, #56703f);
color: #fff;
}
/* ===== KIDS-Seite: Vorteile + So-geht's Sektionen zentriert ===== */
body.kids-page .yf-benefits .section-head,
body.kids-page .stages .section-head { text-align: center; }
body.kids-page .yf-benefits .section-head .eyebrow,
body.kids-page .stages .section-head .eyebrow { margin-left: auto; margin-right: auto; }
body.kids-page .stages .section-head p { max-width: 640px; margin-left: auto; margin-right: auto; }
/* ===== KIDS-Karte Produkte-Seite: Mehr erfahren oben, Amazon unten ===== */
body.product-page .product-group-card .product-card-learn ~ .product-card-cta-amazon {
margin-top: 0.5rem !important;
}
/* ===== Mobile: Kids-Hero Text kein Overflow ===== */
@media (max-width: 820px) {
body.kids-page .yf-kids-copy { max-width: 100%; box-sizing: border-box; overflow-x: clip; }
body.kids-page .yf-kids-lede,
body.kids-page .yf-kids-feats { max-width: 100%; overflow-wrap: break-word; }
}
/* ===== Produkte KIDS-Launch: Mehr-erfahren gleiche Breite/Höhe wie Amazon + grüner Hover ===== */
.kids-launch .variant-info .btn-secondary {
display: flex !important;
align-items: center !important;
justify-content: center !important;
min-height: 64px !important;
width: 100% !important;
padding: 14px 28px !important;
border-radius: 999px !important;
margin-top: 1rem !important;
box-sizing: border-box !important;
}
.kids-launch .variant-info .btn-secondary:hover,
.kids-launch .variant-info .btn-secondary:focus-visible {
background: var(--yf-olive-deep, #56703f) !important;
color: #fff !important;
border-color: var(--yf-olive-deep, #56703f) !important;
}
/* =====================================================================
SICHERHEITSNETZ: Ratgeber-Artikel-Body auf Mobile IMMER sichtbar.
Der Body ist EIN hohes .reveal-Element; auf schmalen Viewports kann der
Scroll-Reveal-Schwellwert (IntersectionObserver) unerreichbar sein und
den Inhalt dauerhaft auf opacity:0 lassen. Höhere Spezifität als die
generische .reveal-Regel → Inhalt wird auf Mobile nie verborgen.
(Desktop behält die Einblende-Animation; dort tritt der Bug nicht auf.)
===================================================================== */
@media (max-width: 820px) {
.guide-article .prose.reveal,
.guide-article .prose.reveal.in {
opacity: 1 !important;
transform: none !important;
}
}
/* =====================================================================
AUDIT-FIX · BUTTON-KONSISTENZ (site-weit)
Sekundär-Buttons (.btn-secondary) auf EINE Höhe/Schrift/Rahmen-Behandlung.
Kanonisch 56px = bereits getuntes mybidet-kids-Hero-Paar → minimale Störung;
Startseite (57→56) und Produkte (52→56) ziehen nach. Weicher Navy-Rahmen
vereinheitlicht blass↔solid. Grüne Outline-CTAs (.reviews-cta, .kids-ratgeber-all)
bleiben als zweiter, bewusster Token bestehen.
===================================================================== */
.btn-secondary {
min-height: 56px !important;
font-size: 1rem !important;
border: 1px solid var(--ink, #0a2540) !important;
border-radius: 999px !important;
}
.btn-primary { font-size: 1rem !important; }
/* =====================================================================
AUDIT-FIX · SPARRECHNER: Euro-Zeichen NEBEN die Zahl (nicht darunter)
Ursache: .calc-result span { display:block!important } macht auch die innere
Zahl-Span [data-calc-output] zum Block → das nachfolgende " €" bricht um.
Fix: innere Zahl-Span wieder inline + Zeile zusammenhalten.
===================================================================== */
.calc-result-money > span { white-space: nowrap !important; }
.calc-result-money [data-calc-output] {
display: inline !important;
width: auto !important;
min-width: 0 !important;
}
/* Sparrechner: "mybidet kaufen"-Button im Ergebnis-Panel zentrieren */
.calculator-results > .btn-primary {
display: flex;
width: fit-content;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
/* =====================================================================
iOS-SWIPE-FIX (Karussell-Bilder)
Auf iOS startet ein Swipe auf einem ![]()
die native Bild-Drag-/Callout-Geste
und bricht die Touch-Sequenz ab (touchcancel statt touchend) → das Karussell
hängt nach 1–2 Slides. Native Bild-Geste unterbinden.
===================================================================== */
.yf-aqua-slide img,
.yf-kids-slide img,
.pcard-slide img,
.yf-color img {
-webkit-user-drag: none;
-webkit-touch-callout: none;
-webkit-user-select: none;
user-select: none;
}
/* =====================================================================
FOOTER-NEWSLETTER (Brevo) — markenkonform überschrieben.
Brevos sib-styles.css lädt im Footer (nach bold-edition) → kritische
Optik mit !important + .footer-newsletter-Scope absichern.
===================================================================== */
.footer-newsletter {
background: linear-gradient(150deg, #0a2540 0%, #0e2d4e 100%);
color: #fff;
padding: clamp(2.5rem, 6vw, 4rem) 0;
overflow-x: clip;
}
/* Grünen Streifen über dem Newsletter entfernen: footer.site hatte padding-top (grün)
über dem ersten Kind. Newsletter startet jetzt bündig; die Spalten bekommen ihren
eigenen oberen Abstand zurück. */
footer.site { padding-top: 0 !important; }
footer.site > .container { padding-top: clamp(2rem, 5vw, 3.5rem); }
.footer-newsletter-inner {
display: grid;
grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
gap: clamp(1.5rem, 4vw, 3.5rem);
align-items: center;
}
.footer-newsletter .fn-copy,
.footer-newsletter .fn-form { min-width: 0; }
.footer-newsletter .fn-eyebrow {
font-size: 0.8rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
color: #9db88a; margin: 0 0 0.6rem;
}
.footer-newsletter .fn-title {
font-family: var(--font-display, var(--font-body, system-ui, sans-serif));
font-size: clamp(1.6rem, 3.4vw, 2.4rem); line-height: 1.12; font-weight: 800;
color: #fff; margin: 0 0 0.7rem;
}
.footer-newsletter .fn-title em {
font-style: normal !important;
color: #1bb6c6 !important; /* Hero-„frisch."-Cyan */
background: none !important;
-webkit-text-fill-color: #1bb6c6 !important;
}
.footer-newsletter .fn-sub {
color: rgba(255,255,255,0.82); font-size: 1rem; line-height: 1.55; margin: 0; max-width: 46ch;
}
/* Brevo-Wrapper neutralisieren (Grau-Box, Rahmen, Zentrierung weg) */
.footer-newsletter .sib-form,
.footer-newsletter .sib-form-container,
.footer-newsletter #sib-container {
background: transparent !important; border: 0 !important; padding: 0 !important;
max-width: none !important; margin: 0 !important; text-align: left !important; direction: ltr;
}
.footer-newsletter .fn-field,
.footer-newsletter .form__entry,
.footer-newsletter .form__label-row { margin: 0 !important; padding: 0 !important; border: 0 !important; }
.footer-newsletter .input--hidden { display: none !important; }
.footer-newsletter .fn-label {
display: block; font-family: inherit !important; font-size: 0.85rem !important; font-weight: 700 !important;
color: rgba(255,255,255,0.9) !important; margin: 0 0 0.5rem !important; text-align: left;
}
.footer-newsletter .fn-input-row { display: flex; gap: 0.6rem; align-items: stretch; }
.footer-newsletter .fn-input-row .entry__field {
flex: 1 1 auto; min-width: 0; margin: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important;
}
.footer-newsletter .fn-input {
width: 100%; box-sizing: border-box; height: 54px;
padding: 0 1.1rem !important; margin: 0 !important;
font-family: inherit !important; font-size: 1rem !important; color: #0a2540 !important;
background: #ffffff !important; border: 1px solid rgba(255,255,255,0.25) !important;
border-radius: 999px !important; box-shadow: none !important;
}
.footer-newsletter .fn-input::placeholder { color: #8390a4 !important; opacity: 1; }
.footer-newsletter .fn-button {
flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem;
min-height: 54px; max-width: 100%; min-width: 0; padding: 0 1.6rem !important; margin: 0 !important;
font-family: inherit !important; font-size: 1rem !important; line-height: 1.2; font-weight: 800 !important; color: #ffffff !important;
background: linear-gradient(160deg, #88a276 0%, #56703f 100%) !important;
border: 0 !important; border-radius: 999px !important; cursor: pointer; white-space: normal;
transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.footer-newsletter .fn-button:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -14px rgba(0,0,0,0.5); }
.footer-newsletter .fn-button .icon { width: 16px; height: 16px; }
.footer-newsletter .fn-legal { font-size: 0.78rem; line-height: 1.5; color: rgba(255,255,255,0.6); margin: 0.85rem 0 0; }
.footer-newsletter .fn-legal a { color: #9db88a; text-decoration: underline; }
.footer-newsletter .fn-field-error {
display: block; color: #ffd2d2 !important; font-size: 0.8rem; margin-top: 0.4rem;
background: transparent !important; border: 0 !important;
}
/* Erfolg/Fehler-Panels (von Brevos JS ein-/ausgeblendet) */
.footer-newsletter .sib-form-message-panel { display: none; max-width: none !important; margin: 0 0 1rem !important; padding: 0.75rem 1rem !important; border-radius: 10px !important; font-family: inherit !important; font-size: 0.95rem !important; align-items: center; gap: 0.5rem; }
.footer-newsletter .fn-msg--error { color: #fff !important; background: rgba(255,73,73,0.18) !important; border: 1px solid rgba(255,73,73,0.55) !important; }
.footer-newsletter .fn-msg--success { color: #fff !important; background: rgba(19,206,102,0.18) !important; border: 1px solid rgba(19,206,102,0.6) !important; }
.footer-newsletter .sib-notification__icon { width: 20px; height: 20px; flex: 0 0 20px; }
@media (max-width: 820px) {
.footer-newsletter-inner { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; text-align: center; }
.footer-newsletter .fn-sub { margin-left: auto; margin-right: auto; }
.footer-newsletter .fn-label { text-align: center; }
.footer-newsletter .fn-input-row { flex-direction: column; }
.footer-newsletter .fn-button { width: 100%; }
.footer-newsletter .fn-legal { text-align: center; }
}
/* ═══════════════════════════════════════════════════════════════════════
RATGEBER — BILDFREIER MODUS + LIVE-SUCHE (v2026-07-01)
Text-first Hub & Artikel-Heros · Kategorie-Farbcodierung · Suche.
Scoped auf body.guide-hub (Übersicht) und body.guide-article (Artikel).
═══════════════════════════════════════════════════════════════════════ */
/* Sicherheitsnetz: keine Ratgeber-Bilder mehr rendern, falls Reste bleiben */
.cover-image,
.guide-hero-photo,
body.guide-hub .cover,
body.guide-article .guide-hero-photo { display: none !important; }
/* ───────── SUCHE ───────── */
.ratgeber-search-section {
--rs-accent: #17a39a;
padding: clamp(1.4rem, 3.5vw, 2.2rem) 0 0.2rem;
}
body.guide-hub .ratgeber-search {
position: relative;
display: flex;
align-items: center;
gap: 0.7rem;
max-width: 640px;
margin: 0 auto;
background: #fff;
border: 1.5px solid rgba(10, 37, 64, 0.12);
border-radius: 999px;
padding: 0.9rem 1.2rem;
box-shadow: 0 12px 34px -20px rgba(10, 37, 64, 0.4);
transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
body.guide-hub .ratgeber-search:focus-within {
border-color: var(--rs-accent);
box-shadow: 0 14px 38px -18px rgba(23, 163, 154, 0.55);
}
.ratgeber-search-ic { color: #94a3b8; flex: 0 0 auto; transition: color 0.2s; }
body.guide-hub .ratgeber-search:focus-within .ratgeber-search-ic { color: var(--rs-accent); }
.ratgeber-search-in {
flex: 1 1 auto;
min-width: 0;
border: 0;
outline: 0;
background: transparent;
font-family: var(--font-body);
font-size: 1.02rem;
color: var(--ink);
-webkit-appearance: none;
appearance: none;
}
.ratgeber-search-in::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.ratgeber-search-in::placeholder { color: #9aa6b1; }
.ratgeber-search-clear {
flex: 0 0 auto;
border: 0;
cursor: pointer;
width: 28px;
height: 28px;
border-radius: 50%;
background: #eef2f4;
color: #64748b;
font-size: 1.25rem;
line-height: 1;
display: grid;
place-items: center;
transition: background 0.15s, color 0.15s;
}
.ratgeber-search-clear:hover { background: var(--rs-accent); color: #fff; }
.ratgeber-search-status {
max-width: 640px;
margin: 0.85rem auto 0;
text-align: center;
font-family: var(--font-body);
font-size: 0.92rem;
font-weight: 500;
color: var(--muted);
min-height: 1.3em;
}
/* Filter-Zustände */
.article.is-hidden { display: none !important; }
.ratgeber-theme.is-empty,
.guide-hub-featured.is-empty,
.guide-hub-grid.is-empty { display: none !important; }
.ratgeber-themennav.is-dim { display: none; }
/* Aufgeräumte Ergebnisansicht während der Suche */
body.ratgeber-searching .guide-hub-featured .guide-section-eyebrow,
body.ratgeber-searching .guide-hub-grid > .container > .ratgeber-head,
body.ratgeber-searching .guide-topic-links > .container > .ratgeber-head { display: none; }
/* Gesamt-Zählung („21 Artikel") beim Filtern ausblenden — sie stimmt dann nicht */
body.ratgeber-searching .ratgeber-theme-title span { display: none; }
/* ───────── KATEGORIE-FARBCODIERUNG (per Themen-Sektion) ───────── */
/* Default-Akzent auf Body-Ebene, damit Themen-Container ihn vererbend
überschreiben können (Karten dürfen --accent NICHT selbst setzen). */
body.guide-hub { --accent: #17a39a; }
#thema-familie { --accent: #e0846b; } /* Koralle */
#thema-pflege { --accent: #5b8fb0; } /* Blau */
#thema-beschwerden { --accent: #cf8a4a; } /* Terrakotta */
#thema-maennerfrauen { --accent: #17a39a; } /* Mint */
#thema-anwendung { --accent: #56703f; } /* Salbei */
#thema-reise { --accent: #3ba0c4; } /* Himmelblau */
#thema-wissen { --accent: #7e9c85; } /* Blattgrün */
#thema-kauf { --accent: #c19a3e; } /* Ocker */
#seo-haemorrhoiden_salben { --accent: #cf8a4a; }
#seo-afterhaut_symptome { --accent: #e0846b; }
#seo-darm_stuhl { --accent: #5b8fb0; }
#seo-schwangerschaft_wochenbett { --accent: #e0846b; }
#seo-frauen_intimhygiene { --accent: #17a39a; }
#seo-maenner_intimhygiene { --accent: #56703f; }
#seo-pflege_senioren { --accent: #5b8fb0; }
#seo-kinder_familie { --accent: #e0846b; }
#seo-reise_alltag_sport { --accent: #3ba0c4; }
#seo-nachhaltigkeit_feuchttuecher { --accent: #7e9c85; }
#seo-anwendung_kauf_pflege { --accent: #c19a3e; }
/* ───────── TEXT-CARDS (bildfrei) ───────── */
body.guide-hub .article {
position: relative;
border: 1px solid rgba(10, 37, 64, 0.1);
border-radius: 18px;
background: #fff;
overflow: hidden;
isolation: isolate;
min-height: 0;
}
/* farbiger Kopfstreifen als visueller Kategorie-Anker */
body.guide-hub .article::before {
content: "";
position: absolute;
left: 0;
right: 0;
top: 0;
height: 4px;
background: var(--accent);
opacity: 0.92;
}
body.guide-hub .article .article-body {
min-height: 100%;
display: flex;
flex-direction: column;
padding: 1.55rem 1.5rem 1.4rem;
}
body.guide-hub .article .cat {
color: var(--accent) !important;
font-weight: 700;
}
body.guide-hub .article h2,
body.guide-hub .article h3 { color: var(--ink); }
body.guide-hub .article p {
color: var(--ink-soft);
font-size: 0.95rem;
line-height: 1.5;
margin-bottom: 1.1rem;
}
body.guide-hub .article .meta {
margin-top: auto;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding-top: 0.9rem;
border-top: 1px solid rgba(10, 37, 64, 0.07);
font-size: 0.82rem;
color: var(--muted);
}
body.guide-hub .article .read {
color: var(--accent) !important;
font-weight: 700;
}
body.guide-hub .article:hover {
transform: translateY(-4px);
border-color: var(--accent);
box-shadow: 0 26px 46px -30px rgba(10, 37, 64, 0.45);
}
/* Featured-Card: großes redaktionelles Aushängeschild mit Seitenakzent */
body.guide-hub .feature-card { --accent: #e0846b; }
body.guide-hub .feature-card::before {
height: auto;
right: auto;
bottom: 0;
width: 6px;
}
body.guide-hub .feature-card .article-body { padding: clamp(1.8rem, 3.5vw, 2.6rem) clamp(1.6rem, 3vw, 2.4rem); }
body.guide-hub .feature-card .feature-title { color: var(--ink); }
body.guide-hub .feature-card .feature-excerpt { color: var(--ink-soft); }
/* Grid: bildlose Karten dürfen etwas kompakter stehen */
@media (min-width: 981px) {
body.guide-hub .ratgeber-grid { gap: 1.4rem; }
}
/* ───────── ARTIKEL-HERO ohne Foto ───────── */
/*
* Einheitliche redaktionelle Ausrichtung für alle Ratgeber:
* Der Artikelkopf steht ruhig und zentriert, während die langen Inhalte
* linksbündig bleiben und dadurch leichter überflogen werden können.
*/
body.guide-article .guide-hero .inner {
max-width: 760px;
margin-inline: auto;
text-align: center;
}
body.guide-article .guide-hero .crumbs {
justify-content: center;
}
body.guide-article .guide-hero h1 {
max-width: 18ch;
margin-inline: auto;
text-align: center;
text-wrap: balance;
}
body.guide-article .guide-hero .lede {
max-width: 62ch;
margin-inline: auto;
text-align: center;
text-wrap: pretty;
}
body.guide-article .guide-content-section .prose h2,
body.guide-article .guide-content-section .prose h3 {
text-align: left;
text-wrap: balance;
}
body.guide-article .guide-content-section .prose .callout h2 {
font-size: clamp(1.15rem, 2.2vw, 1.45rem);
line-height: 1.2;
letter-spacing: 0.12em;
overflow-wrap: normal;
word-break: normal;
hyphens: none;
}
body.guide-article .guide-content-section .prose .callout h3 {
font-size: clamp(0.95rem, 1.6vw, 1.08rem);
line-height: 1.3;
letter-spacing: 0.1em;
overflow-wrap: normal;
word-break: normal;
hyphens: none;
}
/* dezenter Akzent-Strich unter der Eyebrow statt Foto-Fläche */
body.guide-article .guide-hero .eyebrow {
position: relative;
display: inline-block;
padding-bottom: 0.5rem;
}
body.guide-article .guide-hero .eyebrow::after {
content: "";
position: absolute;
left: 50%;
bottom: 0;
width: 44px;
height: 3px;
border-radius: 3px;
background: var(--accent, #17a39a);
transform: translateX(-50%);
}
/* Artikel-Hero-Akzent je Themenwelt */
body.topic-women, body.topic-pregnancy, body.topic-postpartum { --accent: #e0846b; }
body.topic-family { --accent: #e0846b; }
body.topic-men { --accent: #17a39a; }
body.topic-medical, body.topic-health, body.topic-proktologie, body.topic-procto, body.topic-ibs { --accent: #cf8a4a; }
body.topic-care, body.topic-pflege { --accent: #5b8fb0; }
body.topic-travel { --accent: #3ba0c4; }
body.topic-tutorial { --accent: #56703f; }
body.topic-sustainability, body.topic-environment, body.topic-culture { --accent: #7e9c85; }
body.topic-comparison, body.topic-lifestyle { --accent: #c19a3e; }
/* Mobile-Feinschliff */
@media (max-width: 720px) {
body.guide-hub .ratgeber-search { padding: 0.8rem 1rem; }
.ratgeber-search-in { font-size: 1rem; }
body.guide-hub .article .article-body { padding: 1.35rem 1.25rem 1.2rem; }
}
/* ═══════════════════════════════════════════════════════════════════════
STARTSEITE — unterer Teil: angleichen & entschlacken (v2026-07-01)
Ruhigerer vertikaler Rhythmus, Cream-Trust-Zone, bildfreie Ratgeber-
Teaser (stimmig zum neuen Ratgeber). Alles gescoped auf body.home.
═══════════════════════════════════════════════════════════════════════ */
/* 1) Vertikalen Rhythmus beruhigen: 115px → ~48-72px, halbiert die Leerräume */
body.home .doctors.yf-dermatest-only,
body.home .yf-benefits,
body.home .reviews,
body.home .stages,
body.home .ratgeber,
body.home .faq { padding-block: clamp(2.6rem, 5.5vw, 4.25rem) !important; }
/* 2) Dermatest-Siegel + Benefits + Reviews = EINE ruhige Cream-Trust-Zone */
body.home .doctors.yf-dermatest-only {
background: var(--yf-cream, #f5eddf) !important;
padding-bottom: clamp(1.1rem, 2.5vw, 1.7rem) !important;
}
body.home .yf-benefits { padding-top: clamp(1.1rem, 2.5vw, 1.7rem) !important; }
body.home .reviews { padding-top: clamp(1.6rem, 3vw, 2.4rem) !important; }
/* Siegel-Karte klar fassen, damit sie nicht im Leerraum schwebt */
body.home .dermatest-proof {
background: #fff;
border: 1px solid rgba(10, 37, 64, 0.08);
border-radius: 20px;
padding: clamp(1.4rem, 3vw, 2.1rem) clamp(1.5rem, 3.5vw, 2.4rem);
box-shadow: 0 18px 40px -30px rgba(10, 37, 64, 0.3);
}
/* 3) Ratgeber-Vorschau: bildfreie Text-Cards (stimmig zum neuen Ratgeber) */
body.home .ratgeber .article-teaser {
--accent: #17a39a;
position: relative;
display: flex;
flex-direction: column;
border: 1px solid rgba(10, 37, 64, 0.09);
border-radius: 18px;
background: #fff;
overflow: hidden;
isolation: isolate;
}
body.home .ratgeber .article-teaser::before {
content: "";
position: absolute;
left: 0;
right: 0;
top: 0;
height: 4px;
background: var(--accent);
opacity: 0.92;
}
body.home .ratgeber .article-teaser:nth-child(1) { --accent: #e0846b; } /* Schwangerschaft */
body.home .ratgeber .article-teaser:nth-child(2) { --accent: #cf8a4a; } /* Reizdarm */
body.home .ratgeber .article-teaser:nth-child(3) { --accent: #e0846b; } /* Familie */
body.home .ratgeber .article-teaser .article-body {
display: flex;
flex-direction: column;
flex: 1;
padding: 1.5rem 1.5rem 1.4rem;
}
body.home .ratgeber .article-teaser .cat { color: var(--accent) !important; font-weight: 700; }
body.home .ratgeber .article-teaser h3 { color: var(--ink); }
body.home .ratgeber .article-teaser .article-body p {
min-height: 0;
color: var(--ink-soft);
margin-bottom: 1.1rem;
}
body.home .ratgeber .article-teaser .meta {
margin-top: auto;
padding-top: 0.9rem;
border-top: 1px solid rgba(10, 37, 64, 0.07);
}
body.home .ratgeber .article-teaser .read { color: var(--accent) !important; font-weight: 700; }
body.home .ratgeber .article-teaser:hover {
transform: translateY(-4px);
border-color: var(--accent);
box-shadow: 0 26px 46px -30px rgba(10, 37, 64, 0.45);
}
/* 4) Section-Header etwas dezenter — beruhigt den wiederholten großen Rhythmus */
body.home .reviews-head,
body.home .stages-head,
body.home .ratgeber .ratgeber-head { margin-bottom: clamp(1.5rem, 3vw, 2.2rem) !important; }
/* ═══════════════════════════════════════════════════════════════════════
SANFTE SECTION-ÜBERGÄNGE — global (v2026-07-01)
Getönte Sektionen werden cream-verankert: oben & unten Cream (nahtlos zu
den Nachbarn), Farbtönung nur als dezenter Bloom in der Mitte. Dadurch
werden alle Section-Kanten weich statt harter Farbkanten.
═══════════════════════════════════════════════════════════════════════ */
/* Homepage: blaue/olive Tönungen als sanfte, cream-verankerte Wäsche */
.yf-kids {
background: linear-gradient(180deg,
var(--yf-cream, #f5eddf) 0%,
#e9eff1 50%,
var(--yf-cream, #f5eddf) 100%) !important;
}
.yf-community {
background: linear-gradient(180deg,
var(--yf-cream, #f5eddf) 0%,
#e9ede3 52%,
var(--yf-cream, #f5eddf) 100%) !important;
}
body.home .stages {
background: linear-gradient(180deg,
var(--yf-cream, #f5eddf) 0%,
#eaf1f3 50%,
var(--yf-cream, #f5eddf) 100%) !important;
}
body.home .ratgeber {
background: linear-gradient(180deg,
var(--yf-cream, #f5eddf) 0%,
#eaf1f3 50%,
var(--yf-cream, #f5eddf) 100%) !important;
}
/* Helle Cream-Bänder (Produkt-/About-/Ratgeber-Seiten) etwas ruhiger,
damit auch dort die Kanten weicher in die Nachbar-Cream laufen */
body.product-page .aquahome-launch,
body.about-page .about-story-shell,
body.guide-page .final.guide-retail-band {
background: linear-gradient(180deg,
#faf3e8 0%,
#f3e8d5 100%) !important;
}
/* ═══════════════════════════════════════════════════════════════════════
NEWSLETTER-POPUP — global (v2026-07-01)
Erscheint einmal pro Besuch (localStorage-Cooldown), gleiches Dark-Navy-
Design & gleiche Brevo-Mechanik wie der Footer-Newsletter. Schließbar
per ×, Overlay-Klick oder ESC. Desktop + Handy.
═══════════════════════════════════════════════════════════════════════ */
.nl-popup {
position: fixed;
inset: 0;
z-index: 2147483000;
display: none;
align-items: center;
justify-content: center;
padding: clamp(1rem, 4vw, 2rem);
}
.nl-popup.is-open { display: flex; }
.nl-popup-overlay {
position: absolute;
inset: 0;
background: rgba(6, 16, 30, 0.62);
-webkit-backdrop-filter: blur(4px);
backdrop-filter: blur(4px);
animation: nlpFade 0.25s ease both;
}
.nl-popup-card {
position: relative;
width: 100%;
max-width: 540px;
max-height: calc(100dvh - 2rem);
overflow-y: auto;
background: linear-gradient(150deg, #0a2540, #0e2d4e);
color: #fff;
border-radius: 24px;
padding: clamp(2rem, 4.2vw, 3rem) clamp(1.6rem, 4vw, 2.8rem) clamp(1.8rem, 4vw, 2.4rem);
box-shadow: 0 30px 80px -24px rgba(0, 0, 0, 0.6);
animation: nlpPop 0.32s cubic-bezier(0.2, 0.8, 0.2, 1) both;
font-family: var(--font-body, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif);
}
@media (min-width: 700px) {
.nl-popup-card { max-width: 540px; padding: 3rem 2.8rem 2.4rem; }
}
.nl-popup-card:focus { outline: none; }
@keyframes nlpFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes nlpPop { from { opacity: 0; transform: translateY(14px) scale(0.97); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
.nl-popup-overlay, .nl-popup-card { animation: none; }
}
/* Schließen-Button — robust gegen globale Button-Styles (!important) */
.nl-popup .nl-popup-close {
position: absolute;
top: 0.95rem;
right: 0.95rem;
width: 40px !important;
height: 40px !important;
min-width: 0 !important;
min-height: 0 !important;
padding: 0 !important;
margin: 0 !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
border: 0 !important;
border-radius: 50% !important;
background: rgba(255, 255, 255, 0.1) !important;
color: rgba(255, 255, 255, 0.85) !important;
cursor: pointer;
-webkit-appearance: none !important;
appearance: none !important;
box-shadow: none !important;
-webkit-tap-highlight-color: transparent !important;
transition: background 0.18s ease, color 0.18s ease, transform 0.12s ease;
}
.nl-popup .nl-popup-close svg { width: 15px; height: 15px; display: block; pointer-events: none; }
/* Hover-Effekt NUR auf echten Zeigegeräten — auf Touch kein Hängenbleiben/Drehen */
@media (hover: hover) {
.nl-popup .nl-popup-close:hover { background: rgba(255, 255, 255, 0.2) !important; color: #fff !important; }
}
/* Kurzes, ruhiges Press-Feedback (kein Drehen) */
.nl-popup .nl-popup-close:active { background: rgba(255, 255, 255, 0.26) !important; transform: scale(0.9); }
.nl-popup .nl-popup-close:focus-visible { outline: 2px solid #1bb6c6; outline-offset: 2px; }
/* Sauberer Fokus-Rahmen fürs E-Mail-Feld (statt Browser-Default) */
.nl-popup .fn-input:focus,
.nl-popup .fn-input:focus-visible {
outline: none;
border-color: #1bb6c6 !important;
box-shadow: 0 0 0 3px rgba(27, 182, 198, 0.35);
}
.nl-popup .nl-popup-logo {
display: block;
height: 26px;
width: auto;
margin: 0 0 1.3rem;
filter: brightness(0) invert(1); /* offizielles Logo (schwarzes SVG) → weiß */
}
.nl-popup .nl-popup-eyebrow {
font-size: 0.8rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
color: #9db88a; margin: 0 0 0.55rem;
}
.nl-popup .nl-popup-title {
font-size: clamp(1.45rem, 4.5vw, 1.95rem); line-height: 1.14; font-weight: 800;
color: #fff; margin: 0 0 0.6rem; padding-right: 2rem;
}
.nl-popup .nl-popup-title em { font-style: normal; color: #1bb6c6; }
.nl-popup .nl-popup-sub { color: rgba(255, 255, 255, 0.82); font-size: 0.98rem; line-height: 1.5; margin: 0 0 1.25rem; }
/* Formularfelder — identische Optik zum Footer-Newsletter */
.nl-popup .fn-label { display: block; font-size: 0.85rem; font-weight: 700; color: rgba(255, 255, 255, 0.9); margin: 0 0 0.5rem; }
.nl-popup .fn-input-row { display: flex; flex-direction: column; gap: 0.7rem; }
.nl-popup .fn-input {
width: 100%; box-sizing: border-box; height: 54px; padding: 0 1.15rem; font-size: 1rem;
color: #0a2540; background: #fff; border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 999px;
}
.nl-popup .fn-button {
width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem;
min-height: 54px; padding: 0 1.6rem; font-size: 1rem; font-weight: 800; color: #fff;
background: linear-gradient(160deg, #88a276, #56703f); border: 0; border-radius: 999px; cursor: pointer;
}
.nl-popup .fn-button:hover { background: linear-gradient(160deg, #7c9669, #49612f); }
.nl-popup .fn-legal { font-size: 0.76rem; line-height: 1.5; color: rgba(255, 255, 255, 0.6); margin: 0.9rem 0 0; }
.nl-popup .fn-legal a { color: #9db88a; text-decoration: underline; }
.nl-popup .input--hidden { display: none; }
.nl-popup .sib-form-message-panel { display: none; margin: 0 0 0.9rem; padding: 0.7rem 0.95rem; border-radius: 12px; font-size: 0.9rem; }
.nl-popup .fn-msg--success { background: rgba(19, 206, 102, 0.16); color: #b7f3cf; }
.nl-popup .fn-msg--error { background: rgba(232, 0, 29, 0.16); color: #ffc7cd; }
/* Hintergrund-Scroll zuverlässig sperren (iOS-fest): body wird per JS an der
aktuellen Scroll-Position fixiert; beim Schließen wird die Position zurückgesetzt */
body.nl-popup-lock {
position: fixed !important;
left: 0 !important;
right: 0 !important;
width: 100% !important;
overflow: hidden !important;
overscroll-behavior: none;
}
.nl-popup-overlay { overscroll-behavior: contain; touch-action: none; }
.nl-popup-card { overscroll-behavior: contain; }
/* ================================================================
SPRACH-UMSCHALTER (v13.2) — Flaggen-Dropdown + Google-Übersetzer
Global im Header (Desktop + Mobil).
WICHTIG: Das Bundle nutzt viele "header.site …!important"-Regeln
(Spezifität bis 0,3,1). Overrides hier daher mit passender Spezifität
("header.site …") + Ladereihenfolge (bold-edition lädt NACH dem Bundle).
================================================================ */
/* --- Verstecktes Google-Element + Google-Oberfläche unterdrücken ---
WICHTIG: Google hat die Banner-Leiste umgestellt. Sie ist jetzt ein