/* ===== from index.html ===== */
/* ================================================================
REMIGEN+ COSMETICS — PREMIUM REDESIGN
Design System: Kanva-inspired Editorial Minimalism
Brand: #00AB68 | Swiss Made | Vegan | Parfümfrei
================================================================ */
:root {
/* Brand */
--g: #00AB68;
--g-hover: #008F57;
--g-50: #E8F7F1;
--g-100: #C8EDE0;
--g-deep: #064E3B;
/* Neutrals */
--ink: #14201B;
--ink-70: #3A453F;
--ink-50: #6B746F;
--cream: #FAFAF7;
--cream-2: #f2f2ee;
--cream-3: #EDE9DF;
--white: #FFFFFF;
--line: #E4E2DA;
/* Warmth */
--sand: #D6CFC2;
--mineral: #CFE3DC;
/* System */
--err: #C2453B;
--warn: #B8842B;
--star: #D4A017;
/* Fonts */
--serif: 'Lora', Georgia, 'Times New Roman', serif;
--sans: 'Gothic A1', 'Inter', system-ui, -apple-system, sans-serif;
/* Fluid type */
--fs-display: clamp(3.2rem, 2rem + 5.5vw, 6.2rem);
--fs-h1: clamp(2.4rem, 1.4rem + 4vw, 4.8rem);
--fs-h2: clamp(2rem, 1.2rem + 3vw, 3.6rem);
--fs-h3: clamp(1.4rem, 1.1rem + 1vw, 2rem);
--fs-lead: clamp(1rem, 0.9rem + 0.4vw, 1.25rem);
--fs-body: clamp(0.9375rem, 0.9rem + 0.13vw, 1.0625rem);
--fs-sm: 0.875rem;
--fs-xs: 0.8125rem;
/* Layout */
--wrap: 1280px;
--wrap-md: 900px;
--wrap-sm: 680px;
--gut: clamp(1.25rem, 4vw, 2.5rem);
--sec: clamp(5rem, 3rem + 8vw, 10rem);
/* Radius */
--r-sm: 6px;
--r: 12px;
--r-lg: 20px;
--r-xl: 32px;
--r-pill: 999px;
/* Shadows */
--sh-sm: 0 2px 8px rgba(20,32,27,.06);
--sh: 0 8px 32px rgba(20,32,27,.09);
--sh-lg: 0 24px 64px rgba(20,32,27,.12);
--sh-xl: 0 40px 100px rgba(20,32,27,.14);
/* Motion */
--ease: cubic-bezier(0.16, 1, 0.3, 1);
--ease-in: cubic-bezier(0.4, 0, 1, 1);
--dur: 600ms;
--dur-fast: 220ms;
--dur-slow: 900ms;
}
/* ── Reset & Base ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
font-family: var(--sans);
font-size: var(--fs-body);
line-height: 1.65;
color: var(--ink);
background: var(--cream-2);
-webkit-font-smoothing: antialiased;
overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
ul { list-style: none; }
input { font-family: inherit; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
/* ── Layout ───────────────────────────────────────────────────── */
.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gut); }
.wrap--md { max-width: var(--wrap-md); margin-inline: auto; padding-inline: var(--gut); }
.wrap--sm { max-width: var(--wrap-sm); margin-inline: auto; padding-inline: var(--gut); }
.sec { padding-block: var(--sec); }
.sec--sm { padding-block: calc(var(--sec) * 0.6); }
/* ── Typography ───────────────────────────────────────────────── */
.display { font-family: var(--serif); font-size: var(--fs-display); font-weight: 400; line-height: 1.02; letter-spacing: -0.01em; }
h1, .h1 { font-family: var(--serif); font-size: var(--fs-h1); font-weight: 400; line-height: 1.06; letter-spacing: -0.01em; }
h2, .h2 { font-family: var(--serif); font-size: var(--fs-h2); font-weight: 400; line-height: 1.1; letter-spacing: -0.008em; }
h3, .h3 { font-family: var(--serif); font-size: var(--fs-h3); font-weight: 500; line-height: 1.2; }
.lead { font-size: var(--fs-lead); line-height: 1.6; color: var(--ink-70); }
.overline { font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--g-hover); }
em { font-style: italic; }
.serif { font-family: var(--serif); }
.muted { color: var(--ink-50); }
/* ── Buttons ──────────────────────────────────────────────────── */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 0.5em;
min-height: 52px; padding: 0 32px;
font-family: var(--sans); font-size: 0.9375rem; font-weight: 500; letter-spacing: 0.01em;
border: 1.5px solid transparent; border-radius: var(--r-pill);
transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease),
box-shadow var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
white-space: nowrap;
}
.btn:focus-visible { outline: 2px solid var(--g); outline-offset: 3px; }
.btn--p { background: var(--ink); color: var(--white); }
.btn--p:hover { background: var(--ink-70); box-shadow: var(--sh); transform: translateY(-2px); }
.btn--g { background: var(--g); color: var(--white); }
.btn--g:hover { background: var(--g-hover); box-shadow: 0 12px 30px rgba(0,171,104,0.28); transform: translateY(-2px); }
.btn--o { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn--o:hover { background: var(--ink); color: var(--white); }
.btn--ghost { background: transparent; color: rgba(255,255,255,0.9); border-color: rgba(255,255,255,0.45); }
.btn--ghost:hover { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.7); }
.btn--sm { min-height: 42px; padding: 0 22px; font-size: var(--fs-sm); }
.link-arrow {
display: inline-flex; align-items: center; gap: 0.4em;
font-weight: 500; font-size: var(--fs-sm);
border-bottom: 1px solid currentColor; padding-bottom: 2px;
transition: gap var(--dur-fast) var(--ease), opacity var(--dur-fast);
}
.link-arrow:hover { gap: 0.7em; }
.link-arrow .ar { transition: transform var(--dur-fast) var(--ease); }
.link-arrow:hover .ar { transform: translateX(4px); }
/* ── Reveal Animations ────────────────────────────────────────── */
.rv {
opacity: 0;
transform: translateY(28px);
transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.rv.visible { opacity: 1; transform: none; }
.rv-right {
opacity: 0;
transform: translateX(-24px);
transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.rv-right.visible { opacity: 1; transform: none; }
.rv-left {
opacity: 0;
transform: translateX(24px);
transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.rv-left.visible { opacity: 1; transform: none; }
.rv-scale {
opacity: 0;
transform: scale(0.96);
transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.rv-scale.visible { opacity: 1; transform: scale(1); }
/* Stagger delays */
[data-delay="1"] { transition-delay: 80ms; }
[data-delay="2"] { transition-delay: 160ms; }
[data-delay="3"] { transition-delay: 240ms; }
[data-delay="4"] { transition-delay: 320ms; }
[data-delay="5"] { transition-delay: 400ms; }
[data-delay="6"] { transition-delay: 480ms; }
/* ================================================================
NAVIGATION — Kanva Style: FLOATING PILL over hero
================================================================ */
.nav {
position: fixed;
top: 1.5rem;
left: clamp(1rem, 3vw, 3rem);
right: clamp(1rem, 3vw, 3rem);
z-index: 100;
background: var(--white);
border-radius: 14px;
height: 58px;
display: flex;
align-items: center;
box-shadow: 0 2px 20px rgba(20,32,27,0.10), 0 0 0 1px rgba(20,32,27,0.05);
transition: box-shadow var(--dur-fast) var(--ease);
}
.nav.scrolled {
box-shadow: 0 4px 30px rgba(20,32,27,0.13), 0 0 0 1px rgba(20,32,27,0.06);
}
.nav-in {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: 0;
width: 100%;
}
.nav-logo {
text-align: center;
}
.nav-logo img {
height: 30px;
width: auto;
display: block;
margin: 0 auto;
}
.nav-left {
display: flex;
align-items: center;
gap: 1.6rem;
}
.nav-left a {
font-size: 0.8125rem;
font-weight: 400;
color: var(--ink);
letter-spacing: 0.01em;
position: relative;
padding: 2px 0;
transition: color var(--dur-fast);
white-space: nowrap;
}
.nav-left a::after {
content: "";
position: absolute; bottom: -1px; left: 0;
width: 0; height: 1px;
background: var(--ink);
transition: width 0.28s var(--ease);
}
.nav-left a:hover::after { width: 100%; }
.nav-right {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 0;
}
.nav-icon {
width: 38px; height: 38px;
display: grid; place-items: center;
border-radius: 50%;
color: var(--ink);
position: relative;
transition: background var(--dur-fast);
}
.nav-icon:hover { background: var(--cream-2); }
.nav-cart-dot_old {
position: absolute; top: 7px; right: 6px;
width: 7px; height: 7px; border-radius: 50%;
background: var(--g);
border: 1.5px solid var(--white);
}
.nav-burger { display: none; }
/* ── Mobile nav overlay ────────────────────────────────────────── */
.mobile-nav {
position: fixed; inset: 0; z-index: 200;
background: var(--white);
display: flex; flex-direction: column;
padding: 1.5rem var(--gut);
transform: translateX(100%);
transition: transform 0.4s var(--ease);
}
.mobile-nav.open { transform: none; }
.mobile-nav-close {
align-self: flex-end;
width: 44px; height: 44px;
display: grid; place-items: center;
border-radius: 50%;
color: var(--ink);
transition: background var(--dur-fast);
}
.mobile-nav-close:hover { background: var(--cream-2); }
.mobile-nav-logo { margin-bottom: 2rem; }
.mobile-nav-logo img { height: 20px; width: auto; }
.mobile-nav-links {
display: flex; flex-direction: column; gap: 0;
}
.mobile-nav-links a {
font-family: var(--serif);
font-size: clamp(1.8rem, 5vw, 2.8rem);
font-weight: 400;
color: var(--ink);
padding: 0.7rem 0;
border-bottom: 1px solid var(--line);
transition: color var(--dur-fast), padding-left 0.25s var(--ease);
}
.mobile-nav-links a:hover { color: var(--g); padding-left: 0.4rem; }
.mobile-nav-links a.mobile-nav-sublink {
font-family: var(--sans);
font-size: clamp(1.3rem, 4vw, 1.8rem);
color: var(--ink-50);
padding: 0.5rem 0;
}
.mobile-nav-cta { margin-top: auto; padding-top: 2rem; }
/* ================================================================
HERO SLIDER — Kanva Style
- Full 100vh, floating pill nav overlays top
- Large serif text bottom-left: normal / italic line
- Animated text on slide change
- Bottom pill-dots, side arrow, scroll down indicator
================================================================ */
.hero {
position: relative;
height: 100svh;
min-height: 600px;
overflow: hidden;
background: #18140f;
user-select: none;
}
/* Each slide — absolutely stacked */
.hero-slide {
position: absolute;
inset: 0;
opacity: 0;
z-index: 0;
/* no transition here — we handle it by class */
transition: opacity 1s cubic-bezier(0.4,0,0.2,1);
}
.hero-slide.is-active {
opacity: 1;
z-index: 2;
}
.hero-slide.is-leaving {
opacity: 0;
z-index: 1;
transition: opacity 1s cubic-bezier(0.4,0,0.2,1);
}
/* Slide background image — Ken Burns */
.hero-slide-img {
position: absolute; inset: 0;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
transform: scale(1.05);
transition: transform 7s linear;
}
.hero-slide.is-active .hero-slide-img {
transform: scale(1);
}
/* Gradient overlay */
.hero-slide-grad {
position: absolute; inset: 0;
background:
linear-gradient(110deg,
rgba(10,8,6,0.76) 0%,
rgba(10,8,6,0.35) 46%,
rgba(10,8,6,0.04) 70%),
linear-gradient(0deg,
rgba(6,4,2,0.80) 0%,
rgba(6,4,2,0.0) 40%);
}
/* ── Hero text content — bottom-left ─────────────────────────── */
.hero-content {
position: absolute;
inset: 0;
z-index: 10;
display: flex;
align-items: flex-end;
pointer-events: none;
}
.hero-content-inner {
width: 100%;
padding-inline: clamp(1.5rem, 4vw, 3rem);
max-width: var(--wrap);
margin-inline: auto;
padding-bottom: clamp(3rem, 6vw, 5.5rem);
}
/* Slide text block — animates per transition */
.hero-text {
pointer-events: auto;
}
.hero-text .hero-h1 {
overflow: hidden;
}
.hero-text .line1,
.hero-text .line2 {
display: block;
transform: translateY(110%);
opacity: 0;
transition:
transform 0.9s cubic-bezier(0.16,1,0.3,1),
opacity 0.7s cubic-bezier(0.16,1,0.3,1);
}
.hero-text .line2 {
transition-delay: 0.08s;
}
.hero-text .hero-sub {
transform: translateY(18px);
opacity: 0;
transition:
transform 0.8s 0.18s cubic-bezier(0.16,1,0.3,1),
opacity 0.7s 0.18s cubic-bezier(0.16,1,0.3,1);
}
.hero-text .hero-cta-link {
transform: translateY(14px);
opacity: 0;
display: inline-flex;
transition:
transform 0.75s 0.28s cubic-bezier(0.16,1,0.3,1),
opacity 0.65s 0.28s cubic-bezier(0.16,1,0.3,1);
}
/* Active slide — text flies in */
.hero-slide.is-active .hero-text .line1,
.hero-slide.is-active .hero-text .line2 {
transform: translateY(0);
opacity: 1;
}
.hero-slide.is-active .hero-text .hero-sub,
.hero-slide.is-active .hero-text .hero-cta-link {
transform: translateY(0);
opacity: 1;
}
/* ── Typography ──────────────────────────────────────────────── */
.hero-h1 {
font-family: var(--serif);
font-size: clamp(4rem, 2.4rem + 6.8vw, 8.5rem);
font-weight: 300;
line-height: 0.95;
letter-spacing: -0.015em;
color: var(--white);
margin-bottom: 1rem;
}
.hero-h1 .line1 {
font-style: normal;
font-weight: 300;
}
.hero-h1 .line2 {
font-style: italic;
font-weight: 300;
color: rgba(255,255,255,0.85);
}
.hero-sub {
font-size: clamp(0.875rem, 0.84rem + 0.2vw, 1rem);
color: rgba(255,255,255,0.62);
line-height: 1.6;
max-width: 38ch;
margin-bottom: 1.8rem;
font-weight: 400;
}
.hero-cta-link {
font-size: 0.875rem;
font-weight: 500;
color: var(--white);
letter-spacing: 0.025em;
text-decoration: underline;
text-underline-offset: 5px;
text-decoration-thickness: 1px;
transition: opacity 0.22s;
pointer-events: auto;
cursor: pointer;
}
.hero-cta-link:hover { opacity: 0.65; }
/* ── Navigation arrows ───────────────────────────────────────── */
.hero-arrow {
position: absolute;
top: 50%;
right: clamp(1rem, 2.5vw, 2rem);
transform: translateY(-50%);
z-index: 20;
width: 42px; height: 42px;
border-radius: 50%;
border: 1px solid rgba(255,255,255,0.45);
background: rgba(255,255,255,0.07);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
color: var(--white);
display: grid; place-items: center;
cursor: pointer;
transition: background 0.2s, border-color 0.2s, transform 0.2s;
}
.hero-arrow:hover {
background: rgba(255,255,255,0.18);
border-color: rgba(255,255,255,0.8);
transform: translateY(-50%) scale(1.08);
}
.hero-arrow-prev {
right: auto;
left: clamp(1rem, 2.5vw, 2rem);
}
.hero-arrow-prev:hover { transform: translateY(-50%) scale(1.08); }
/* ── Dot indicators ──────────────────────────────────────────── */
.hero-dots {
position: absolute;
bottom: clamp(1.4rem, 2.8vw, 2.4rem);
left: 50%;
transform: translateX(-50%);
z-index: 20;
display: flex;
gap: 7px;
align-items: center;
}
.hero-dot {
height: 7px;
width: 7px;
border-radius: 4px;
background: rgba(255,255,255,0.32);
border: none;
cursor: pointer;
padding: 0;
transition: width 0.4s cubic-bezier(0.16,1,0.3,1), background 0.3s;
}
.hero-dot.is-active {
width: 26px;
background: var(--white);
}
/* ── Slide counter ───────────────────────────────────────────── */
.hero-counter {
position: absolute;
top: clamp(5rem, 8vw, 7rem); /* below floating nav */
right: clamp(1rem, 2.5vw, 2rem);
z-index: 20;
font-family: var(--serif);
font-size: 0.85rem;
color: rgba(255,255,255,0.4);
letter-spacing: 0.06em;
pointer-events: none;
}
.hero-counter .current {
color: rgba(255,255,255,0.88);
font-size: 1rem;
}
/* ── Scroll Down indicator — Kanva style (bottom-right, text + arrow) ─── */
.hero-scroll-hint {
position: absolute;
/* align with bottom of hero content block */
bottom: clamp(3rem, 6vw, 5.5rem);
right: clamp(1.5rem, 4vw, 3rem);
z-index: 20;
display: flex;
align-items: center;
gap: 0.55rem;
pointer-events: auto;
cursor: pointer;
text-decoration: none;
transition: opacity 0.22s;
}
.hero-scroll-hint:hover { opacity: 0.65; }
.hero-scroll-label {
font-family: var(--serif);
font-style: italic;
font-size: clamp(0.85rem, 0.8rem + 0.2vw, 1rem);
font-weight: 400;
color: rgba(255,255,255,0.7);
letter-spacing: 0.02em;
line-height: 1;
}
.hero-scroll-arrow {
color: rgba(255,255,255,0.7);
font-size: 0.9rem;
line-height: 1;
display: inline-block;
animation: arrowBounce 2s 1.5s ease-in-out infinite;
}
@keyframes arrowBounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(3px); }
}
/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 768px) {
.nav { top: 1.2rem; left: clamp(1rem, 2vw, 2rem); right: clamp(1rem, 2vw, 2rem); border-radius: 12px; height: 52px; }
.hero-h1 { font-size: clamp(3.2rem, 2.4rem + 5vw, 5.5rem); }
.hero-arrow-prev { display: none; }
.hero-counter { display: none; }
.hero-scroll-hint { display: none; }
}
@media (max-width: 480px) {
.nav { top: 1rem; left: 1.2rem; right: 1.2rem; border-radius: 10px; height: 48px; }
.hero-h1 { font-size: clamp(2.8rem, 2rem + 4.5vw, 4.2rem); }
.hero-sub { font-size: 0.84rem; max-width: 26ch; }
.hero-dots { bottom: 1.2rem; }
}
/* ================================================================
SECTION 1: FEATURE CARDS (4-Column, Kanva Style)
================================================================ */
.features {
padding-block: clamp(5rem, 8vw, 9.5rem) 0;
background: var(--cream-2);
}
.features-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1.2rem;
}
.feat-card {
background: var(--white);
border-radius: var(--r-xl);
padding: clamp(1.6rem, 3vw, 2.4rem) clamp(1.4rem, 2.5vw, 2rem);
display: flex;
flex-direction: column;
gap: 1rem;
border: 1px solid rgba(20,32,27,0.05);
transition: box-shadow var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.feat-card:hover {
box-shadow: 0 12px 40px rgba(20,32,27,0.09);
transform: translateY(-3px);
}
.feat-icon {
width: 42px; height: 42px;
color: var(--ink-50);
flex-shrink: 0;
}
.feat-title {
font-family: var(--sans);
font-size: 1rem;
font-weight: 500;
color: var(--ink);
letter-spacing: 0.005em;
}
.feat-desc {
font-size: var(--fs-sm);
color: var(--ink-50);
line-height: 1.55;
max-width: 22ch;
}
@media (max-width: 900px) {
.features-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
.features-grid { grid-template-columns: 1fr; }
}
/* ================================================================
SECTION 2: EDITORIAL STATEMENT (Kanva big-quote with inline images)
================================================================ */
.editorial {
padding-block: clamp(3.5rem, 5vw, 6rem) clamp(4rem, 6vw, 7.5rem);
background: var(--cream-2);
overflow: hidden;
}
.editorial-inner {
max-width: 1100px;
margin-inline: auto;
padding-inline: var(--gut);
}
.editorial-quote {
font-family: var(--serif);
font-style: italic;
font-size: clamp(2.2rem, 1.4rem + 3.5vw, 4.6rem);
font-weight: 400;
line-height: 1.22;
color: var(--ink);
letter-spacing: -0.01em;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
text-align: center;
gap: 0.35em 0.45em;
row-gap: 0.2em;
}
.editorial-quote .word { display: inline; white-space: nowrap; }
/* Inline image chips — Polaroid style */
.eq-img {
display: inline-block;
width: clamp(58px, 5.5vw, 80px);
height: clamp(58px, 5.5vw, 80px);
border-radius: 6px;
overflow: hidden;
vertical-align: middle;
position: relative;
top: -0.06em;
flex-shrink: 0;
/* Polaroid white border */
border: 4px solid #fff;
box-shadow: 0 6px 20px rgba(20,32,27,0.18);
transition: transform 0.3s ease;
}
.eq-img img {
width: 100%; height: 100%;
object-fit: cover;
object-position: center 15%;
}
/* First image: tilted left */
.eq-img-a {
transform: rotate(-6deg);
}
.eq-img-a:hover { transform: rotate(-2deg) scale(1.05); }
/* Second image: tilted right */
.eq-img-b {
transform: rotate(5deg);
}
.eq-img-b:hover { transform: rotate(2deg) scale(1.05); }
.eq-emoji {
display: inline-block;
font-size: 0.8em;
line-height: 1;
vertical-align: middle;
flex-shrink: 0;
}
/* Stats row below editorial */
.editorial-stats {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1.5rem;
margin-top: clamp(3rem, 5vw, 5rem);
padding-top: clamp(2.5rem, 4vw, 4rem);
border-top: 1px solid var(--line);
}
.estat-box { text-align: left; }
.estat-num {
font-family: var(--serif);
font-size: clamp(2rem, 1.3rem + 2.2vw, 3.2rem);
font-weight: 400;
color: var(--ink);
line-height: 1;
margin-bottom: 0.3rem;
}
.estat-num span { color: var(--g); }
.estat-desc {
font-size: var(--fs-sm);
color: var(--ink-50);
font-weight: 400;
line-height: 1.4;
}
@media (max-width: 768px) {
.editorial-stats { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
.editorial-stats { grid-template-columns: 1fr 1fr; gap: 1rem; }
}
/* ================================================================
PRODUCT SECTION
================================================================ */
.products {
background: var(--cream-2);
padding-block: clamp(3.5rem, 5vw, 6rem) 0;
}
.sec-header {
text-align: center;
margin-bottom: clamp(3rem, 5vw, 5rem);
}
.sec-header .overline { margin-bottom: 0.8rem; display: block; }
.sec-header h2 { margin-bottom: 1rem; }
.sec-header .lead { max-width: 50ch; margin-inline: auto; }
.product-filter {
display: flex;
justify-content: center;
gap: 0.5rem;
flex-wrap: wrap;
margin-bottom: 2.5rem;
}
.pf-pill {
padding: 8px 20px;
border-radius: var(--r-pill);
font-size: var(--fs-sm);
font-weight: 500;
border: 1.5px solid var(--line);
background: transparent;
color: var(--ink-70);
cursor: pointer;
transition: all var(--dur-fast) var(--ease);
}
.pf-pill:hover, .pf-pill.active {
background: var(--ink);
color: var(--white);
border-color: var(--ink);
}
.product-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.5rem;
}
.pc {
background: var(--white);
border-radius: var(--r-xl);
overflow: hidden;
position: relative;
transition: box-shadow var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
border: 1px solid var(--line);
cursor: pointer;
}
.pc:hover {
box-shadow: var(--sh-lg);
transform: translateY(-6px);
}
.pc-badge {
position: absolute; top: 16px; left: 16px; z-index: 2;
font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.06em;
padding: 4px 12px;
border-radius: var(--r-pill);
background: var(--ink);
color: var(--white);
text-transform: uppercase;
}
.pc-badge.green { background: var(--g); }
.pc-fav {
position: absolute; top: 16px; right: 16px; z-index: 2;
width: 38px; height: 38px;
border-radius: 50%;
background: rgba(255,255,255,0.85);
backdrop-filter: blur(8px);
display: grid; place-items: center;
color: var(--ink-50);
transition: color var(--dur-fast), background var(--dur-fast);
}
.pc-fav:hover { color: var(--err); background: var(--white); }
.pc-img {
aspect-ratio: 4/4.2;
display: flex;
align-items: center;
justify-content: center;
background: var(--cream-3);
padding: 2rem;
overflow: hidden;
}
.pc-img img {
max-height: 280px;
width: auto;
transition: transform 0.6s var(--ease);
object-fit: contain;
}
.pc:hover .pc-img img { transform: scale(1.05); }
.pc-body {
padding: 1.5rem 1.6rem 1.8rem;
}
.pc-cat { font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-50); margin-bottom: 0.3rem; }
.pc-name { font-family: var(--serif); font-size: 1.5rem; font-weight: 400; margin-bottom: 0.2rem; }
.pc-desc { font-size: var(--fs-sm); color: var(--ink-50); margin-bottom: 0.8rem; line-height: 1.4; }
.pc-stars { display: flex; align-items: center; gap: 0.35rem; margin-bottom: 1rem; }
.pc-stars span { font-size: var(--fs-xs); color: var(--star); letter-spacing: 0.05em; }
.pc-stars small { font-size: var(--fs-xs); color: var(--ink-50); }
.pc-foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
}
.pc-price { font-family: var(--serif); font-size: 1.5rem; font-weight: 400; }
.pc-price .orig { font-size: 0.9rem; color: var(--ink-50); text-decoration: line-through; margin-right: 0.2em; font-family: var(--sans); }
.pc-add {
display: flex; align-items: center; gap: 0.5rem;
background: var(--ink);
color: var(--white);
border: none; border-radius: var(--r-pill);
padding: 10px 20px;
font-size: var(--fs-sm); font-weight: 600;
transition: background var(--dur-fast) var(--ease), box-shadow var(--dur-fast);
}
.pc-add:hover { background: var(--g); box-shadow: 0 8px 20px rgba(0,171,104,0.28); }
.pc-add.loading { opacity: 0.7; pointer-events: none; }
.pc-add.added { background: var(--g); }
.pc-name a { color: inherit; text-decoration: none; }
.pc-name a:hover { color: var(--g); }
.pc-img { text-decoration: none; }
/* Preisformat aus WooCommerce in den Karten-Look bringen */
.pc-price del { font-size: 0.9rem; color: var(--ink-50); font-family: var(--sans); margin-right: 0.3em; font-weight: 400; }
.pc-price ins { text-decoration: none; }
.pc-price .woocommerce-Price-amount { font-family: var(--serif); }
/* ================================================================
PRODUKT-KARUSSELL (echte WooCommerce-Produkte)
================================================================ */
.pc-carousel { position: relative; }
.pc-viewport { overflow: hidden; }
.pc-track {
display: flex;
gap: 1.5rem;
transition: transform 0.5s var(--ease);
will-change: transform;
}
.pc-carousel .pc {
flex: 0 0 calc((100% - 3rem) / 3); /* 3 sichtbar auf Desktop */
max-width: calc((100% - 3rem) / 3);
}
.pc-nav {
position: absolute;
top: 38%;
transform: translateY(-50%);
z-index: 4;
width: 46px; height: 46px;
border-radius: 50%;
background: var(--white);
border: 1px solid var(--line);
color: var(--ink);
display: grid; place-items: center;
cursor: pointer;
box-shadow: var(--sh-md);
transition: background var(--dur-fast), color var(--dur-fast), opacity var(--dur-fast);
}
.pc-nav:hover { background: var(--ink); color: var(--white); }
.pc-prev { left: -22px; }
.pc-next { right: -22px; }
.pc-nav[disabled] { opacity: 0.35; cursor: default; pointer-events: none; }
.pc-dots {
display: flex; justify-content: center; gap: 0.5rem;
margin-top: 1.8rem;
}
.pc-dots button {
width: 8px; height: 8px; border-radius: 50%;
border: none; padding: 0; cursor: pointer;
background: var(--line);
transition: background var(--dur-fast), width var(--dur-fast);
}
.pc-dots button.is-active { background: var(--g); width: 22px; border-radius: 4px; }
@media (max-width: 900px) {
.pc-carousel .pc { flex-basis: calc((100% - 1.5rem) / 2); max-width: calc((100% - 1.5rem) / 2); }
.pc-prev { left: -8px; }
.pc-next { right: -8px; }
}
@media (max-width: 600px) {
.pc-carousel .pc { flex-basis: 100%; max-width: 100%; }
.pc-nav { top: 34%; }
.pc-prev { left: 4px; }
.pc-next { right: 4px; }
}
/* ================================================================
BOXED BANNER — Kanva Section 3
Full-width rounded card, image right, text left over dark overlay
================================================================ */
.boxed-banner-wrap {
padding-block: clamp(5rem, 7.5vw, 9.5rem) 0;
background: var(--cream-2);
}
.boxed-banner {
position: relative;
border-radius: clamp(16px, 2.5vw, 28px);
overflow: hidden;
min-height: clamp(380px, 45vw, 600px);
display: flex;
align-items: stretch;
width: 100%;
}
.boxed-banner-img {
position: absolute;
inset: 0;
background-size: cover;
background-position: center right;
background-repeat: no-repeat;
}
/* Dark gradient overlay — strong left, transparent right */
.boxed-banner-overlay {
position: absolute;
inset: 0;
background:
linear-gradient(100deg,
rgba(14,12,10,0.88) 0%,
rgba(14,12,10,0.60) 38%,
rgba(14,12,10,0.10) 65%,
rgba(14,12,10,0.0) 82%);
}
.boxed-banner-content {
position: relative;
z-index: 2;
padding: clamp(2.5rem, 5vw, 5rem) clamp(2rem, 5vw, 5rem);
max-width: 540px;
display: flex;
flex-direction: column;
justify-content: center;
gap: 1.4rem;
}
.boxed-banner-label {
font-size: 0.75rem;
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;
color: rgba(255,255,255,0.55);
}
.boxed-banner-h2 {
font-family: var(--serif);
font-size: clamp(2.4rem, 1.6rem + 3.5vw, 4.8rem);
font-weight: 400;
line-height: 1.0;
letter-spacing: -0.015em;
color: var(--white);
margin: 0;
}
.boxed-banner-h2 em {
font-style: italic;
color: rgba(255,255,255,0.75);
font-weight: 300;
}
.boxed-banner-sub {
font-size: clamp(0.875rem, 0.84rem + 0.15vw, 1rem);
color: rgba(255,255,255,0.58);
line-height: 1.6;
max-width: 38ch;
}
.boxed-banner-bullets {
display: flex;
flex-direction: column;
gap: 0.7rem;
margin-top: 0.4rem;
}
.boxed-banner-bullet {
display: flex;
align-items: center;
gap: 0.7rem;
color: rgba(255,255,255,0.78);
font-size: 0.9rem;
font-weight: 400;
}
.boxed-banner-bullet svg {
flex-shrink: 0;
color: rgba(255,255,255,0.5);
}
.boxed-banner-cta {
margin-top: 0.5rem;
display: flex;
gap: 1rem;
flex-wrap: wrap;
align-items: center;
}
.boxed-banner-btn {
display: inline-flex;
align-items: center;
gap: 0.4em;
padding: 0.85em 2em;
border-radius: var(--r-pill);
font-size: 0.875rem;
font-weight: 500;
background: var(--white);
color: var(--ink);
letter-spacing: 0.01em;
transition: background 0.2s, transform 0.2s;
border: none;
cursor: pointer;
}
.boxed-banner-btn:hover { background: var(--cream-2); transform: translateY(-1px); }
.boxed-banner-link {
font-size: 0.875rem;
font-weight: 500;
color: rgba(255,255,255,0.6);
text-decoration: underline;
text-underline-offset: 4px;
transition: color 0.2s;
}
.boxed-banner-link:hover { color: var(--white); }
@media (max-width: 600px) {
.boxed-banner { margin-inline: 1rem; min-height: 460px; }
.boxed-banner-img { background-position: 70% center; }
.boxed-banner-overlay {
background: linear-gradient(180deg,
rgba(14,12,10,0.80) 0%,
rgba(14,12,10,0.65) 60%,
rgba(14,12,10,0.50) 100%);
}
.boxed-banner-content { max-width: 100%; }
}
/* ================================================================
WHY YOUR SKIN — Kanva Bento
================================================================ */
.why-sec { background: var(--cream-2); padding-block: clamp(5rem, 7.5vw, 10rem) 0; }
.why-top {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 2rem;
flex-wrap: wrap;
margin-bottom: clamp(2rem, 4vw, 3.5rem);
}
.why-top-left h2 { font-size: clamp(2rem, 1.3rem + 3vw, 3.8rem); margin: 0; }
.why-top-right {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 0.5rem;
padding-top: 0.4rem;
}
.why-stars { color: var(--star); font-size: 1.1rem; letter-spacing: 0.1em; }
.why-rating-text { font-size: var(--fs-sm); color: var(--ink-50); }
.why-avatars { margin-top: 0.5rem; display: flex; align-items: center; }
/* Polaroid review images */
.why-review-pile {
display: flex;
align-items: center;
position: relative;
height: 70px;
width: 160px;
}
.why-review-img {
position: absolute;
width: clamp(54px, 6vw, 68px);
height: clamp(62px, 7vw, 78px);
border-radius: 8px;
overflow: hidden;
border: 3px solid #fff;
box-shadow: 0 4px 14px rgba(10,14,10,0.18);
background: var(--cream-3);
}
.why-review-img img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.why-review-img:nth-child(1) { transform: rotate(-7deg); left: 0; z-index: 1; }
.why-review-img:nth-child(2) { transform: rotate(0deg); left: 38px; z-index: 2; }
.why-review-img:nth-child(3) { transform: rotate(6deg); left: 76px; z-index: 3; }
/* Bento grid */
.why-bento {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.4rem;
align-items: stretch;
}
.why-bento-photo {
position: relative;
border-radius: var(--r-xl);
overflow: hidden;
min-height: clamp(380px, 50vw, 580px);
}
.why-bento-photo img {
width: 100%; height: 100%;
object-fit: cover;
object-position: center 15%;
display: block;
}
/* Floating badge over photo — Glassmorphism */
.why-badge {
position: absolute;
bottom: 2rem; left: 2rem;
background: rgba(255, 255, 255, 0.18);
backdrop-filter: blur(18px) saturate(160%);
-webkit-backdrop-filter: blur(18px) saturate(160%);
border: 1px solid rgba(255, 255, 255, 0.35);
border-radius: var(--r-lg);
padding: 1.2rem 1.4rem;
display: flex;
align-items: flex-start;
gap: 0.8rem;
max-width: 260px;
box-shadow:
0 8px 32px rgba(10,14,10,0.22),
inset 0 1px 0 rgba(255,255,255,0.45);
}
.why-badge svg { color: var(--g); flex-shrink: 0; margin-top: 2px; filter: drop-shadow(0 0 6px rgba(0,171,104,0.5)); }
.why-badge strong { font-size: 0.95rem; display: block; margin-bottom: 0.15rem; color: var(--white); }
.why-badge em { font-family: var(--serif); font-style: italic; font-size: 0.9rem; color: rgba(255,255,255,0.75); display: block; margin-bottom: 0.3rem; }
.why-badge p { font-size: var(--fs-xs); color: rgba(255,255,255,0.60); line-height: 1.4; margin: 0; }
/* Right column: THREE stacked cards */
.why-bento-right { display: flex; flex-direction: column; gap: 1.4rem; }
.why-card {
border-radius: var(--r-xl);
overflow: hidden;
flex: 1;
min-height: 180px;
}
/* Banner card — background image with text overlay */
.why-card-banner {
position: relative;
overflow: hidden;
}
.why-card-banner-bg {
position: absolute;
inset: 0;
background-size: cover;
background-position: center 25%;
background-repeat: no-repeat;
transition: transform 0.5s ease;
}
.why-card-banner:hover .why-card-banner-bg { transform: scale(1.03); }
.why-card-banner-overlay {
display: none;
}
.why-card-banner-text {
position: relative;
z-index: 2;
padding: clamp(1.5rem, 3vw, 2.2rem);
display: flex;
flex-direction: column;
gap: 0.6rem;
height: 100%;
justify-content: flex-end;
/* subtle light gradient so dark text stays readable */
background: linear-gradient(160deg,
rgba(255,255,255,0.52) 0%,
rgba(255,255,255,0.28) 50%,
rgba(255,255,255,0.0) 100%);
}
.why-card-banner-text h3 {
font-size: clamp(1.3rem, 1rem + 1vw, 1.9rem);
font-weight: 400;
color: var(--ink);
line-height: 1.15;
margin: 0;
}
.why-card-banner-text h3 em { font-style: italic; color: var(--ink-70); }
.why-card-banner-text p {
font-size: var(--fs-sm);
color: var(--ink-70);
line-height: 1.5;
margin: 0;
max-width: 30ch;
}
/* Light card */
.why-card-light {
background: var(--white);
display: flex;
align-items: stretch;
gap: 0;
border: 1px solid var(--line);
}
.why-card-light .why-card-text {
padding: clamp(1.5rem, 3vw, 2.2rem);
flex: 1;
display: flex;
flex-direction: column;
gap: 0.7rem;
}
.why-card-icon { color: var(--ink-50); }
.why-card-light h3 { font-size: clamp(1.2rem, 0.9rem + 1vw, 1.7rem); font-weight: 400; margin: 0; line-height: 1.15; }
.why-card-light h3 em { font-style: italic; color: var(--ink-70); }
.why-card-light p { font-size: var(--fs-sm); color: var(--ink-50); line-height: 1.5; margin: 0; }
.why-card-img {
width: 38%;
display: flex;
align-items: flex-end;
justify-content: center;
padding: 1rem 1rem 0;
background: var(--cream-2);
}
.why-card-img img { width: 100%; height: auto; object-fit: contain; max-height: 200px; }
/* Third card — background image */
.why-card-img-bg {
position: relative;
overflow: hidden;
min-height: 180px;
}
.why-card-img-bg-inner {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.why-card-img-bg::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(160deg, rgba(10,14,10,0.45) 0%, rgba(10,14,10,0.15) 60%, transparent 100%);
}
/* Dark card — with plant background image */
.why-card-dark {
background: #1E2E1C;
position: relative;
overflow: hidden;
}
.why-dark-bg {
position: absolute;
inset: 0;
background-size: cover;
background-position: center 30%;
background-repeat: no-repeat;
opacity: 0.45;
transition: transform 0.5s ease, opacity 0.3s;
}
.why-card-dark:hover .why-dark-bg { transform: scale(1.04); opacity: 0.55; }
.why-card-nature {
padding: clamp(1.5rem, 3vw, 2.5rem);
height: 100%;
display: flex;
flex-direction: column;
justify-content: flex-end;
position: relative;
z-index: 2;
background: linear-gradient(135deg, rgba(30,46,28,0.95) 0%, rgba(30,46,28,0.70) 60%, transparent 100%);
}
.why-card-text-dark h3 {
font-size: clamp(1.4rem, 1rem + 1.5vw, 2.2rem);
font-weight: 400;
color: var(--white);
line-height: 1.1;
margin-bottom: 1rem;
}
.why-card-text-dark h3 em { font-style: italic; color: rgba(255,255,255,0.65); }
.why-dark-bullets { display: flex; flex-direction: column; gap: 0.55rem; }
.why-dark-bullets span {
display: flex; align-items: center; gap: 0.5rem;
font-size: var(--fs-sm);
color: rgba(255,255,255,0.75);
}
.why-dark-bullets svg { color: rgba(255,255,255,0.5); flex-shrink: 0; }
@media (max-width: 768px) {
.why-bento { grid-template-columns: 1fr; }
.why-card-light { flex-direction: column; }
.why-card-img { width: 100%; padding: 0; max-height: 160px; overflow: hidden; }
}
/* ================================================================
CUSTOMER REVIEWS — Carousel Grid Layout
================================================================ */
.review-grid-sec {
background: var(--cream-2); /* beige, same as page background */
padding-block: clamp(5rem, 7.5vw, 10rem) 0;
}
/* Header row: left title + right score */
.review-grid-header {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 2rem;
margin-bottom: clamp(2.5rem, 4vw, 4rem);
flex-wrap: wrap;
}
.review-grid-title h2 {
font-size: clamp(2.2rem, 1.2rem + 3.5vw, 4rem);
font-weight: 400;
line-height: 1.12;
margin: 0.3rem 0 0;
}
.review-grid-title h2 em { font-style: italic; font-weight: 400; }
.review-grid-score {
display: flex;
align-items: center;
gap: 1.2rem;
flex-shrink: 0;
}
.review-grid-score-num {
font-size: clamp(2.8rem, 2rem + 2vw, 4.4rem);
font-weight: 300;
letter-spacing: -0.03em;
color: var(--ink);
line-height: 1;
}
.review-grid-score-meta { display: flex; flex-direction: column; gap: 0.2rem; }
.review-grid-score-stars { color: var(--star); font-size: 1rem; letter-spacing: 0.1em; }
.review-grid-score-count { font-size: var(--fs-xs); color: var(--ink-50); }
/* Carousel outer (overflow hidden) */
.rg-outer {
overflow: hidden;
cursor: grab;
user-select: none;
}
.rg-outer:active { cursor: grabbing; }
.rg-track {
display: flex;
gap: 1.4rem;
transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1);
will-change: transform;
}
/* Card */
.rg-card {
flex-shrink: 0;
/* show 3 cards on desktop, slightly peeking 4th */
width: calc((100% - 2 * 1.4rem) / 3);
background: var(--white);
border: 1px solid var(--line);
border-radius: var(--r-xl);
padding: clamp(1.4rem, 2.5vw, 2rem);
display: flex;
flex-direction: column;
gap: 0.8rem;
transition: box-shadow 0.3s, transform 0.3s;
}
.rg-card:hover {
box-shadow: 0 8px 30px rgba(10,14,10,0.09);
transform: translateY(-2px);
}
.rg-card-stars { color: var(--star); font-size: 0.95rem; letter-spacing: 0.08em; }
.rg-card-quote {
font-size: var(--fs-sm);
color: var(--ink);
line-height: 1.6;
margin: 0;
flex: 1;
}
.rg-card-quote em { font-style: italic; }
.rg-card-footer {
display: flex;
align-items: flex-end;
justify-content: space-between;
margin-top: 0.4rem;
}
.rg-card-author strong { display: block; font-size: 0.88rem; font-weight: 600; color: var(--ink); }
.rg-card-author span { font-size: var(--fs-xs); color: var(--ink-50); }
.rg-card-verified {
display: flex;
align-items: center;
gap: 0.3rem;
font-size: var(--fs-xs);
color: var(--g);
font-weight: 500;
white-space: nowrap;
}
.rg-card-verified svg { flex-shrink: 0; }
/* Nav row: arrows + dots */
.rg-nav {
display: flex;
align-items: center;
justify-content: center;
gap: 1rem;
margin-top: 2.5rem;
}
.rg-arrow {
width: 44px; height: 44px;
border-radius: 50%;
border: 1px solid var(--line);
background: var(--white);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: background 0.2s, border-color 0.2s;
color: var(--ink);
flex-shrink: 0;
}
.rg-arrow:hover { background: var(--ink); color: var(--white); border-color: var(--ink); }
.rg-dots {
display: flex;
gap: 0.45rem;
align-items: center;
}
.rg-dot {
width: 8px; height: 8px;
border-radius: 50%;
background: var(--line);
border: none;
cursor: pointer;
transition: background 0.3s, transform 0.3s;
flex-shrink: 0;
padding: 0;
}
.rg-dot.is-active { background: var(--ink); transform: scale(1.3); }
/* Bottom CTA */
.review-grid-cta {
text-align: center;
margin-top: 2.5rem;
}
/* Mobile */
@media (max-width: 860px) {
.rg-card { width: calc(100vw - 4rem); }
.review-grid-header { flex-direction: column; align-items: flex-start; }
}
/* ================================================================
FEATURED PRODUCT HIGHLIGHT (legacy — hidden)
================================================================ */
.feature-band {
background: var(--ink);
color: var(--white);
padding-block: var(--sec);
position: relative;
overflow: hidden;
}
.feature-band::before {
content: "";
position: absolute; top: -20%; right: -10%;
width: 50%; height: 140%;
background: radial-gradient(ellipse at 60% 40%, rgba(0,171,104,0.12), transparent 65%);
pointer-events: none;
}
.feature-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(3rem, 6vw, 8rem);
align-items: center;
}
.feature-left .overline { color: rgba(0,171,104,0.85); margin-bottom: 1.2rem; display: block; }
.feature-left h2 { color: var(--white); font-size: clamp(2rem, 1.2rem + 3.5vw, 4rem); margin-bottom: 1.4rem; }
.feature-left h2 em { color: rgba(255,255,255,0.55); }
.feature-left p { color: rgba(255,255,255,0.65); max-width: 42ch; margin-bottom: 2.5rem; line-height: 1.7; }
.feature-bullets {
display: grid; gap: 0.85rem;
margin-bottom: 2.5rem;
}
.feature-bullet {
display: flex; align-items: flex-start; gap: 0.75rem;
font-size: var(--fs-sm);
color: rgba(255,255,255,0.75);
}
.feature-bullet svg { color: var(--g); flex-shrink: 0; margin-top: 2px; }
.feature-bullet strong { color: var(--white); }
.feature-img {
position: relative;
}
.feature-img-frame {
border-radius: var(--r-xl);
overflow: hidden;
aspect-ratio: 3/4;
background: #1c2418;
}
.feature-img-frame img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; }
.feature-prod-badge {
position: absolute;
bottom: 2rem; left: 50%; transform: translateX(-50%);
background: rgba(255,255,255,0.1);
backdrop-filter: blur(20px);
border: 1px solid rgba(255,255,255,0.2);
border-radius: var(--r-xl);
padding: 1rem 1.5rem;
display: flex; align-items: center; gap: 1rem;
white-space: nowrap;
}
.feature-prod-badge img { height: 50px; width: auto; filter: brightness(1.1); }
.feature-prod-badge-text strong { display: block; font-size: 0.9rem; font-weight: 600; color: var(--white); }
.feature-prod-badge-text span { font-size: var(--fs-xs); color: rgba(255,255,255,0.55); }
.feature-price-tag {
position: absolute;
top: 2rem; right: -1rem;
background: var(--g);
color: var(--white);
border-radius: 999px 0 0 999px;
padding: 0.6rem 1.2rem 0.6rem 1rem;
font-family: var(--serif); font-size: 1.4rem; font-weight: 400;
}
/* ================================================================
BENEFITS BENTO GRID
================================================================ */
.benefits {
background: var(--white);
padding-block: var(--sec);
}
.bento-grid {
display: grid;
grid-template-columns: 1.3fr 1fr 1fr;
grid-template-rows: auto auto;
gap: 1.4rem;
}
.bento-cell {
border-radius: var(--r-xl);
overflow: hidden;
position: relative;
}
.bento-tall { grid-row: span 2; }
.bento-photo {
height: 100%;
min-height: 500px;
object-fit: cover;
width: 100%;
display: block;
}
.bento-overlay {
position: absolute; inset: 0;
background: linear-gradient(0deg, rgba(10,14,10,0.7) 0%, transparent 55%);
}
.bento-tag {
position: absolute; bottom: 2rem; left: 2rem; right: 2rem;
color: var(--white);
}
.bento-tag .bento-t { font-family: var(--serif); font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2rem); font-weight: 400; line-height: 1.2; margin-bottom: 0.4rem; }
.bento-tag .bento-d { font-size: var(--fs-sm); color: rgba(255,255,255,0.7); }
.bento-card {
background: var(--cream-2);
padding: 2rem;
display: flex; flex-direction: column; justify-content: space-between;
min-height: 220px;
}
.bento-card-alt { background: var(--ink); color: var(--white); }
.bento-card-green { background: var(--g); color: var(--white); }
.bento-icon { width: 44px; height: 44px; color: var(--g); margin-bottom: 1rem; }
.bento-card-alt .bento-icon { color: rgba(255,255,255,0.5); }
.bento-card-green .bento-icon { color: rgba(255,255,255,0.7); }
.bento-card h3 { font-size: clamp(1.2rem, 0.9rem + 1vw, 1.7rem); font-weight: 400; margin-bottom: 0.4rem; }
.bento-card p { font-size: var(--fs-sm); color: var(--ink-50); line-height: 1.5; }
.bento-card-alt p { color: rgba(255,255,255,0.55); }
.bento-card-green p { color: rgba(255,255,255,0.8); }
.bento-card-number {
font-family: var(--serif);
font-size: clamp(3rem, 2rem + 3vw, 5rem);
font-weight: 300;
line-height: 1;
color: var(--g);
margin-top: auto;
padding-top: 1rem;
}
.bento-card-alt .bento-card-number { color: rgba(255,255,255,0.2); }
/* ================================================================
BENEFITS SECTION — Mehr als nur Pflege
================================================================ */
.benefits-bullets-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1.2rem 2rem;
max-width: 680px;
margin-top: 0.5rem;
}
@media (max-width: 640px) {
.benefits-bullets-grid {
grid-template-columns: 1fr;
gap: 0.9rem;
}
}
/* ================================================================
ANWENDUNGSBEREICHE (Applications) — Minimalist Grid
================================================================ */
.anwendungen {
background: var(--cream-2);
padding-block: clamp(4rem, 6.5vw, 8rem) 0;
}
.app-header {
text-align: center;
margin-bottom: clamp(3rem, 5vw, 4.5rem);
}
.app-header .overline {
display: block;
margin-bottom: 0.8rem;
}
.app-header h2 {
font-family: var(--serif);
font-size: clamp(2.2rem, 1.2rem + 3.5vw, 4rem);
font-weight: 400;
line-height: 1.12;
margin: 0;
}
.app-header h2 em {
font-style: italic;
font-weight: 400;
}
.app-header p {
font-size: var(--fs-sm);
color: var(--ink-50);
margin-top: 1rem;
}
.app-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 3.5rem 2.8rem;
}
.app-item {
display: flex;
flex-direction: column;
}
.app-item-top {
display: flex;
justify-content: space-between;
align-items: flex-end;
padding-bottom: 0.8rem;
border-bottom: 1px solid var(--line);
margin-bottom: 1.2rem;
}
.app-item-title {
font-family: var(--sans);
font-size: 1.15rem;
font-weight: 600;
color: var(--ink);
letter-spacing: -0.01em;
}
.app-item-num {
font-family: var(--sans);
font-size: 1.15rem;
font-weight: 500;
color: var(--ink-40);
}
.app-item-desc {
font-family: var(--sans);
font-size: var(--fs-sm);
color: var(--ink-70);
line-height: 1.7;
}
.app-item-desc em {
font-style: normal;
color: var(--g-hover);
font-weight: 600;
}
.app-cta {
text-align: center;
margin-top: 4.5rem;
}
/* Mobile & Tablet */
@media (max-width: 900px) {
.app-grid {
grid-template-columns: repeat(2, 1fr);
gap: 3rem 2rem;
}
}
@media (max-width: 600px) {
.app-grid {
grid-template-columns: 1fr;
gap: 2.5rem;
}
.app-item-top {
margin-bottom: 0.8rem;
}
}
/* ================================================================
INGREDIENTS SECTION
================================================================ */
.ingredients {
background: var(--cream-2);
padding-block: clamp(5rem, 7.5vw, 10rem) 0;
}
.ingredients-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(3rem, 6vw, 8rem);
align-items: start;
}
.ingredients-sticky { position: sticky; top: 140px; }
.ingredients-sticky .overline { display: block; margin-bottom: 1rem; }
.ingredients-sticky h2 { margin-bottom: 1.2rem; }
.ingredients-sticky p { color: var(--ink-70); max-width: 38ch; margin-bottom: 2rem; }
.ingredient-list { display: grid; gap: 0; }
.ingredient-item {
padding: 1.6rem 0;
border-bottom: 1px solid var(--line);
cursor: pointer;
}
.ingredient-item:first-child { border-top: 1px solid var(--line); }
.ingredient-header {
display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.ingredient-name { font-family: var(--serif); font-size: 1.35rem; font-weight: 400; }
.ingredient-icon { width: 36px; height: 36px; border-radius: 50%; background: var(--g-50); display: grid; place-items: center; color: var(--g-hover); flex-shrink: 0; transition: background var(--dur-fast), color var(--dur-fast); }
.ingredient-item.open .ingredient-icon { background: var(--ink); color: var(--white); }
.ingredient-body {
max-height: 0; overflow: hidden;
transition: max-height 0.4s var(--ease), padding 0.3s;
font-size: var(--fs-sm); color: var(--ink-70); line-height: 1.6;
}
.ingredient-item.open .ingredient-body { max-height: 200px; padding-top: 0.8rem; }
.ingredient-plus { font-size: 1.2rem; line-height: 1; transition: transform 0.3s var(--ease); }
.ingredient-item.open .ingredient-plus { transform: rotate(45deg); }
/* ================================================================
ROUTINE STEPS — Essentia Sticky Scroll
================================================================ */
.routine {
background: var(--cream-2);
/* section must be tall: sticky panel height × number of steps */
min-height: 300vh;
position: relative;
}
/* ONE sticky wrapper that fills the viewport */
.routine-sticky {
position: sticky;
top: 0;
height: 100vh;
display: grid;
grid-template-columns: 1fr 1fr;
overflow: hidden;
max-width: var(--wrap);
margin-inline: auto;
}
/* LEFT column: title + step list */
.routine-left {
display: flex;
flex-direction: column;
justify-content: center;
padding: clamp(2rem, 5vw, 6rem) clamp(2rem, 4vw, 5rem);
}
.routine-left-title { margin-bottom: 3rem; }
.routine-left-title h2 {
font-size: clamp(1.8rem, 1rem + 3vw, 3.4rem);
font-weight: 400;
line-height: 1.18;
margin: 0;
}
.routine-left-title h2 em { font-style: italic; }
/* Step list */
.routine-step-list { display: flex; flex-direction: column; }
.routine-step-item {
padding: 1.6rem 0;
border-top: 1px solid var(--line);
display: flex;
align-items: flex-start;
gap: 1.2rem;
cursor: pointer;
opacity: 0.32;
transition: opacity 0.4s ease;
}
.routine-step-item:last-child { border-bottom: 1px solid var(--line); }
.routine-step-item.is-active { opacity: 1; }
.routine-step-num {
font-family: var(--serif);
font-size: 0.8rem;
color: var(--ink-50);
min-width: 52px;
padding-top: 3px;
letter-spacing: 0.05em;
transition: color 0.4s;
}
.routine-step-item.is-active .routine-step-num { color: var(--g); }
.routine-step-body h3 {
font-size: clamp(1.05rem, 0.9rem + 0.6vw, 1.35rem);
font-weight: 400;
margin: 0 0 0.3rem;
color: var(--ink);
}
.routine-step-body p {
font-size: var(--fs-sm);
color: var(--ink-50);
line-height: 1.55;
margin: 0;
}
.routine-step-progress {
height: 2px;
background: var(--g);
margin-top: 0.75rem;
width: 0;
transition: width 0.55s ease;
border-radius: 2px;
}
.routine-step-item.is-active .routine-step-progress { width: 100%; }
/* RIGHT column: stacked image cards */
.routine-right {
display: flex;
align-items: center;
justify-content: center;
padding: clamp(1.5rem, 3vw, 4rem);
position: relative;
}
/* Card stack container */
.routine-card-stack {
position: relative;
width: 100%;
max-width: 400px;
aspect-ratio: 3 / 4;
}
/* Each card */
.routine-card {
position: absolute;
inset: 0;
border-radius: clamp(16px, 2vw, 26px);
overflow: hidden;
background: var(--cream-3);
/* default: hidden behind, scaled down & shifted */
transform: scale(0.92) translateY(5%);
opacity: 0;
transition:
transform 0.65s cubic-bezier(0.34, 1.10, 0.64, 1),
opacity 0.55s ease;
z-index: 0;
box-shadow: 0 24px 64px rgba(10,14,10,0.20);
}
.routine-card img {
width: 100%; height: 100%;
object-fit: cover;
object-position: center 15%;
display: block;
}
/* Active card: front, full size */
.routine-card.is-active {
transform: scale(1) translateY(0);
opacity: 1;
z-index: 2;
}
/* Previous card: peeking behind at scale */
.routine-card.was-active {
transform: scale(0.95) translateY(2%);
opacity: 0.45;
z-index: 1;
}
/* Glass label inside card */
.routine-card-label {
position: absolute;
bottom: 1.6rem;
left: 1.2rem;
right: 1.2rem;
background: rgba(255,255,255,0.13);
backdrop-filter: blur(18px) saturate(160%);
-webkit-backdrop-filter: blur(18px) saturate(160%);
border: 1px solid rgba(255,255,255,0.30);
border-radius: 14px;
padding: 1rem 1.2rem;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.35), 0 8px 24px rgba(10,14,10,0.20);
}
.routine-card-label-step {
font-size: var(--fs-xs);
letter-spacing: 0.09em;
text-transform: uppercase;
color: rgba(255,255,255,0.60);
display: block;
margin-bottom: 0.3rem;
}
.routine-card-label h4 {
font-size: 1.15rem;
font-weight: 400;
color: var(--white);
margin: 0 0 0.25rem;
}
.routine-card-label p {
font-size: var(--fs-xs);
color: rgba(255,255,255,0.65);
line-height: 1.4;
margin: 0;
}
/* Mobile */
@media (max-width: 860px) {
.routine-sticky {
grid-template-columns: 1fr;
height: auto;
position: static;
}
.routine { min-height: unset; }
.routine-right { display: none; }
.routine-step-item { opacity: 1; }
}
/* testimonial-hero & reviews sections CSS removed */
/* ================================================================
BRAND STORY
================================================================ */
/* ================================================================
FAQ SECTION
================================================================ */
.faq-section { background: var(--cream-2); padding-block: clamp(5rem, 7.5vw, 10rem) 0; }
.faq-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.5rem;
width: 100%;
max-width: 1000px;
margin-inline: auto;
}
.faq-left .overline { display: block; margin-bottom: 1rem; }
.faq-left h2 { margin-bottom: 1.2rem; }
.faq-left p { color: var(--ink-70); max-width: 36ch; margin-bottom: 2rem; }
.faq-list { display: grid; gap: 0; }
.faq-item {
padding: 1.6rem 0;
border-bottom: 1px solid var(--line);
cursor: pointer;
}
.faq-item:first-child { border-top: 1px solid var(--line); }
.faq-q {
display: flex; align-items: center; justify-content: space-between; gap: 1rem;
font-family: var(--serif); font-size: 1.35rem; font-weight: 400;
color: var(--ink);
line-height: 1.4;
}
.faq-icon {
width: 36px; height: 36px; border-radius: 50%;
background: var(--g-50);
display: grid; place-items: center;
color: var(--g-hover);
flex-shrink: 0;
transition: background var(--dur-fast), color var(--dur-fast);
}
.faq-item.open .faq-icon { background: var(--ink); color: var(--white); }
.faq-plus { font-size: 1.2rem; line-height: 1; transition: transform 0.3s var(--ease); }
.faq-item.open .faq-plus { transform: rotate(45deg); }
.faq-a {
max-height: 0; overflow: hidden;
transition: max-height 0.4s var(--ease), padding 0.3s;
font-size: var(--fs-sm); color: var(--ink-70); line-height: 1.65;
}
.faq-item.open .faq-a { max-height: 300px; padding-top: 0.8rem; }
/* ================================================================
NEWSLETTER — Boxed image layout
================================================================ */
.newsletter { background: var(--cream-2); padding-block: clamp(5rem, 7vw, 9rem) 0; }
.nl-boxed {
position: relative;
border-radius: clamp(16px, 2.5vw, 28px);
overflow: hidden;
min-height: clamp(400px, 45vw, 580px);
display: flex;
align-items: center;
justify-content: flex-start;
}
.nl-bg {
position: absolute;
inset: 0;
background-size: cover;
background-position: left center;
background-repeat: no-repeat;
}
.nl-bg-overlay {
position: absolute;
inset: 0;
background: linear-gradient(260deg,
rgba(14,12,10,0.05) 0%,
rgba(14,12,10,0.30) 40%,
rgba(14,12,10,0.82) 65%,
rgba(14,12,10,0.92) 100%);
}
.nl-content {
position: relative;
z-index: 2;
width: min(480px, 70%);
padding: clamp(2.5rem, 5vw, 5rem) clamp(2rem, 4vw, 4rem);
display: flex;
flex-direction: column;
gap: 1.2rem;
}
.nl-content h2 { margin: 0; }
.nl-content h2 em { font-style: italic; color: rgba(255,255,255,0.65); }
.nl-content p { margin: 0; line-height: 1.6; }
@media (max-width: 700px) {
.nl-boxed { flex-direction: column; justify-content: flex-end; align-items: stretch; min-height: 560px; }
.nl-bg { background-position: center 20%; }
.nl-bg-overlay { background: linear-gradient(180deg, rgba(14,12,10,0.2) 0%, rgba(14,12,10,0.88) 55%); }
.nl-content { width: 100%; padding: 2rem 1.5rem; }
}
/* old newsletter-inner (unused but keep for safety) */
.newsletter-inner {
position: relative; z-index: 1;
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(3rem, 6vw, 8rem);
align-items: center;
}
.nl-left .overline { color: rgba(0,171,104,0.75); margin-bottom: 1rem; display: block; }
.nl-left h2 { color: var(--white); margin-bottom: 1rem; }
.nl-left p { color: rgba(255,255,255,0.55); max-width: 42ch; line-height: 1.7; }
.nl-form { display: flex; flex-direction: column; gap: 0.9rem; }
.nl-input-wrap { position: relative; }
.nl-input {
width: 100%; height: 58px;
padding: 0 1.4rem;
background: rgba(255,255,255,0.07);
border: 1px solid rgba(255,255,255,0.15);
border-radius: var(--r-pill);
color: var(--white);
font-size: 0.9375rem; font-family: var(--sans);
transition: border-color var(--dur-fast), background var(--dur-fast);
}
.nl-input::placeholder { color: rgba(255,255,255,0.35); }
.nl-input:focus { outline: none; border-color: var(--g); background: rgba(255,255,255,0.1); }
.nl-hint { font-size: var(--fs-xs); color: rgba(255,255,255,0.35); text-align: center; }
.nl-guarantee {
display: flex; align-items: center; gap: 0.8rem;
padding: 1rem 1.4rem;
background: rgba(255,255,255,0.05);
border-radius: var(--r-lg);
border: 1px solid rgba(255,255,255,0.08);
}
.nl-guarantee svg { color: var(--g); flex-shrink: 0; }
.nl-guarantee span { font-size: var(--fs-xs); color: rgba(255,255,255,0.5); line-height: 1.5; }
/* ================================================================
FINAL CTA SECTION
================================================================ */
.final-cta {
background: var(--g-50);
padding-block: calc(var(--sec) * 1.1);
text-align: center;
position: relative;
overflow: hidden;
}
.final-cta::before,
.final-cta::after {
content: "";
position: absolute;
border-radius: 50%;
border: 1px solid rgba(0,171,104,0.15);
}
.final-cta::before { width: 600px; height: 600px; top: -200px; left: -100px; }
.final-cta::after { width: 400px; height: 400px; bottom: -150px; right: -50px; }
.final-cta-inner { position: relative; z-index: 1; }
.final-cta .overline { display: block; margin-bottom: 1.2rem; }
.final-cta h2 { font-size: clamp(2.4rem, 1.4rem + 4vw, 5rem); max-width: 22ch; margin: 0 auto 1.4rem; }
.final-cta p { color: var(--ink-70); max-width: 46ch; margin: 0 auto 2.5rem; }
.final-cta-btns { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
.final-cta-rating {
margin-top: 3rem;
display: flex; align-items: center; justify-content: center; gap: 0.75rem;
font-size: var(--fs-sm); color: var(--ink-50);
}
.final-cta-rating .stars { color: var(--star); font-size: 1rem; letter-spacing: 0.1em; }
/* ================================================================
INSTAGRAM CAROUSEL SECTION
================================================================ */
.insta-sec {
background: var(--cream-2);
padding-block: clamp(3rem, 5vw, 5rem) 0;
overflow: hidden;
}
.insta-heading {
display: flex;
align-items: center;
justify-content: center;
gap: 0.6rem;
font-family: var(--serif);
font-size: clamp(1.8rem, 1.2rem + 2.5vw, 3rem);
font-weight: 400;
margin-bottom: clamp(2rem, 3vw, 3rem);
letter-spacing: -0.01em;
color: var(--ink);
flex-wrap: wrap;
}
.insta-heading em { font-style: italic; }
/* Inline polaroid images in the heading */
.insta-heading-pics {
display: inline-flex;
align-items: center;
gap: 0.3rem;
position: relative;
width: 80px;
height: 50px;
flex-shrink: 0;
}
.insta-heading-pic {
position: absolute;
width: 46px;
height: 52px;
border-radius: 8px;
overflow: hidden;
border: 3px solid var(--white);
box-shadow: 0 4px 12px rgba(10,14,10,0.16);
}
.insta-heading-pic img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.insta-heading-pic:nth-child(1) { transform: rotate(-8deg); left: 0; z-index: 1; }
.insta-heading-pic:nth-child(2) { transform: rotate(5deg); left: 28px; z-index: 2; }
/* Marquee track */
.insta-marquee {
display: flex;
overflow: hidden;
gap: 1.2rem;
mask-image: linear-gradient(90deg, transparent 0%, black 8%, black 92%, transparent 100%);
-webkit-mask-image: linear-gradient(90deg, transparent 0%, black 8%, black 92%, transparent 100%);
}
.insta-track {
display: flex;
gap: 1.2rem;
flex-shrink: 0;
animation: instaScroll 30s linear infinite;
}
.insta-track:nth-child(2) { animation-delay: -15s; }
@keyframes instaScroll {
0% { transform: translateX(0); }
100% { transform: translateX(calc(-100% - 1.2rem)); }
}
.insta-marquee:hover .insta-track { animation-play-state: paused; }
.insta-item {
flex-shrink: 0;
width: clamp(180px, 22vw, 280px);
height: clamp(200px, 26vw, 320px);
border-radius: clamp(12px, 1.5vw, 20px);
overflow: hidden;
position: relative;
cursor: pointer;
}
.insta-item img {
width: 100%; height: 100%;
object-fit: cover;
object-position: center 20%;
display: block;
transition: transform 0.5s ease;
}
.insta-item:hover img { transform: scale(1.06); }
/* Instagram hover overlay */
.insta-item-overlay {
position: absolute;
inset: 0;
background: rgba(10,14,10,0);
display: flex;
align-items: center;
justify-content: center;
transition: background 0.3s;
}
.insta-item:hover .insta-item-overlay { background: rgba(10,14,10,0.25); }
.insta-ig-icon {
opacity: 0;
transform: scale(0.8);
transition: opacity 0.3s, transform 0.3s;
color: var(--white);
}
.insta-item:hover .insta-ig-icon { opacity: 1; transform: scale(1); }
/* ================================================================
FOOTER — Sticky Reveal Style
================================================================ */
@media (min-width: 768px) {
.footer {
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 1;
width: 100%;
}
.page-wrapper {
position: relative;
z-index: 2;
background: var(--cream-2);
box-shadow: 0 15px 30px rgba(10, 15, 12, 0.12);
}
}
@media (max-width: 767px) {
.footer {
position: relative;
z-index: 2;
}
.page-wrapper {
position: relative;
z-index: 3;
background: var(--cream-2);
}
}
.footer {
background: var(--white);
color: var(--ink-50);
padding-block: clamp(4rem, 6vw, 6rem) 2rem;
}
.footer-grid {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr;
gap: 3rem;
margin-bottom: 4rem;
}
.footer-brand img { height: 22px; width: auto; filter: none; margin-bottom: 1rem; }
.footer-brand p { font-size: var(--fs-sm); line-height: 1.7; max-width: 30ch; }
.footer-col .footer-heading {
font-family: var(--sans); font-weight: 700; font-size: var(--fs-xs);
letter-spacing: 0.15em; text-transform: uppercase;
color: var(--ink);
margin-bottom: 1.4rem;
}
.footer-col ul li { margin-bottom: 0.7rem; }
.footer-col ul a { font-size: var(--fs-sm); color: var(--ink-70); transition: color var(--dur-fast); }
.footer-col ul a:hover { color: var(--g); }
.footer-trust {
display: flex; gap: 1.5rem; flex-wrap: wrap;
margin-top: 1.8rem;
}
.footer-trust-item {
display: flex; align-items: center; gap: 0.5rem;
font-size: var(--fs-xs); font-weight: 600;
color: var(--ink-50);
}
.footer-trust-item svg { color: var(--g); opacity: 0.8; }
.footer-bar {
border-top: 1px solid var(--line);
padding-top: 2rem;
display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
}
.footer-bar span { font-size: var(--fs-xs); }
.footer-legal { display: flex; gap: 1.5rem; flex-wrap: wrap; }
.footer-legal a { font-size: var(--fs-xs); color: var(--ink-50); transition: color var(--dur-fast); }
.footer-legal a:hover { color: var(--g); }
.footer-social { display: flex; gap: 0.6rem; }
.social-icon {
width: 36px; height: 36px; border-radius: 50%;
border: 1px solid var(--line);
display: grid; place-items: center;
color: var(--ink-50);
transition: border-color var(--dur-fast), color var(--dur-fast);
}
.social-icon:hover { border-color: var(--g); color: var(--g); }
/* ================================================================
CART DRAWER
================================================================ */
.drawer-scrim {
position: fixed; inset: 0; z-index: 300;
background: rgba(10,14,10,0.5);
backdrop-filter: blur(4px);
opacity: 0; pointer-events: none;
transition: opacity 0.3s;
}
.drawer-scrim.open { opacity: 1; pointer-events: all; }
.cart-drawer {
position: fixed; top: 0; right: 0; bottom: 0; z-index: 400;
width: min(420px, 100vw);
background: var(--white);
display: flex; flex-direction: column;
transform: translateX(100%);
transition: transform 0.35s var(--ease);
box-shadow: var(--sh-xl);
}
.cart-drawer.open { transform: none; }
.drawer-head {
display: flex; align-items: center; justify-content: space-between;
padding: 1.4rem 1.6rem;
border-bottom: 1px solid var(--line);
}
.drawer-head h4 { font-family: var(--serif); font-size: 1.3rem; font-weight: 400; }
.drawer-close { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; color: var(--ink-50); transition: background var(--dur-fast), color var(--dur-fast); }
.drawer-close:hover { background: var(--cream); color: var(--ink); }
.drawer-body { flex: 1; overflow-y: auto; padding: 1.4rem 1.6rem; }
.cart-shipping-bar { margin-bottom: 1.4rem; }
.shipping-progress-text { font-size: var(--fs-xs); font-weight: 600; color: var(--ink-70); margin-bottom: 0.5rem; }
.shipping-progress-text span { color: var(--g-hover); }
.progress-track { height: 4px; background: var(--cream-3); border-radius: var(--r-pill); overflow: hidden; }
.progress-fill { height: 100%; background: var(--g); border-radius: var(--r-pill); width: 60%; transition: width 0.6s var(--ease); }
.cart-item { display: flex; gap: 1.2rem; padding: 1.5rem 0; border-bottom: 1px solid var(--line); }
.cart-item-img { width: 85px; height: 95px; border-radius: var(--r); overflow: hidden; background: var(--cream-3); flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.cart-item-img img { max-height: 80px; width: auto; object-fit: contain; }
.cart-item-info { flex: 1; }
.cart-item-name { font-weight: 600; font-size: var(--fs-sm); margin-bottom: 0.2rem; }
.cart-item-sub { font-size: var(--fs-xs); color: var(--ink-50); margin-bottom: 0.6rem; }
.cart-item-foot { display: flex; align-items: center; justify-content: space-between; }
.qty-stepper { display: flex; align-items: center; gap: 0; border: 1px solid var(--line); border-radius: var(--r-pill); overflow: hidden; }
.qty-btn { width: 30px; height: 30px; display: grid; place-items: center; font-size: 1rem; color: var(--ink-70); transition: background var(--dur-fast); }
.qty-btn:hover { background: var(--cream); }
.qty-val { width: 32px; text-align: center; font-size: var(--fs-sm); font-weight: 600; }
.cart-item-price { font-family: var(--serif); font-size: 1.25rem; font-weight: 500; text-align: right; }
.cart-item-remove { display: inline-block; margin-top: 0.6rem; font-size: var(--fs-xs); color: var(--ink-50); border-bottom: 1px solid currentColor; cursor: pointer; background: none; transition: color var(--dur-fast); }
.cart-item-remove:hover { color: var(--err); }
.drawer-foot {
padding: 1.4rem 1.6rem;
border-top: 1px solid var(--line);
background: var(--white);
}
.drawer-subtotal { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.2rem; }
.drawer-subtotal span { font-size: var(--fs-sm); font-weight: 600; }
.drawer-subtotal strong { font-family: var(--serif); font-size: 1.3rem; }
.drawer-checkout { width: 100%; justify-content: center; border-radius: var(--r-lg); }
.drawer-continue { display: block; text-align: center; font-size: var(--fs-sm); color: var(--ink-50); margin-top: 0.8rem; border-bottom: 1px solid transparent; cursor: pointer; background: none; width: 100%; transition: color var(--dur-fast); }
.drawer-continue:hover { color: var(--ink); }
/* ── WooCommerce Mini-Cart im Drawer ─────────────────────────── */
.drawer-body .woocommerce-mini-cart,
.drawer-body ul.cart_list { list-style: none; margin: 0; padding: 0; }
.drawer-body .woocommerce-mini-cart__empty-message { color: var(--ink-50); padding: 2rem 0; text-align: center; }
.drawer-body li.mini_cart_item,
.drawer-body ul.cart_list li {
display: flex;
align-items: flex-start;
gap: 1rem;
padding: 1rem 0;
border-bottom: 1px solid var(--line);
position: relative;
font-size: var(--fs-sm);
}
.drawer-body li.mini_cart_item a:not(.remove) { color: var(--ink); font-weight: 600; display: block; }
.drawer-body li.mini_cart_item img {
width: 64px; height: 72px;
order: -1;
border-radius: var(--r);
object-fit: contain;
background: var(--cream-3);
float: none !important;
margin: 0 !important;
}
.drawer-body li.mini_cart_item .quantity { color: var(--ink-50); font-size: var(--fs-xs); display: block; margin-top: 0.2rem; }
.drawer-body li.mini_cart_item .quantity .woocommerce-Price-amount,
.drawer-body li.mini_cart_item .amount { font-family: var(--serif); color: var(--ink); }
.drawer-body a.remove {
position: absolute; top: 1rem; right: 0;
width: 22px; height: 22px; line-height: 20px;
text-align: center;
border-radius: 50%;
color: var(--ink-50) !important;
border: 1px solid var(--line);
font-size: 14px;
text-decoration: none;
}
.drawer-body a.remove:hover { background: var(--err) !important; color: var(--white) !important; border-color: var(--err); }
.drawer-body .woocommerce-mini-cart__total {
display: flex; justify-content: space-between; align-items: center;
padding: 1rem 0 0;
font-weight: 600;
border-bottom: none;
}
.drawer-body .woocommerce-mini-cart__total strong { font-weight: 600; }
.drawer-body .woocommerce-mini-cart__total .woocommerce-Price-amount { font-family: var(--serif); font-size: 1.3rem; }
/* Die Buttons aus dem Mini-Cart verstecken – wir nutzen die Drawer-Buttons. */
.drawer-body .woocommerce-mini-cart__buttons { display: none; }
/* ================================================================
RESPONSIVE
================================================================ */
@media (max-width: 1100px) {
.feature-grid { grid-template-columns: 1fr; gap: 4rem; }
.feature-img { max-width: 500px; margin: 0 auto; }
.bento-grid { grid-template-columns: 1fr 1fr; }
.bento-tall { grid-row: span 1; }
.bento-photo { min-height: 300px; }
.footer-grid { grid-template-columns: 1fr 1fr; gap: 2.5rem; }
}
@media (max-width: 900px) {
.intro-grid { grid-template-columns: 1fr; gap: 3rem; }
.product-grid { grid-template-columns: repeat(2, 1fr); }
.ingredients-grid { grid-template-columns: 1fr; }
.ingredients-sticky { position: static; }
.newsletter-inner { grid-template-columns: 1fr; gap: 3rem; }
.faq-grid { grid-template-columns: 1fr; }
.routine-steps { grid-template-columns: 1fr; }
.routine-steps::before { display: none; }
.nav-left { display: none; }
.nav-burger { display: grid; }
}
@media (max-width: 640px) {
:root { --sec: clamp(3.5rem, 2rem + 7vw, 7rem); }
.product-grid { grid-template-columns: 1fr; }
.bento-grid { grid-template-columns: 1fr; }
.footer-grid { grid-template-columns: 1fr; }
.footer-bar { flex-direction: column; align-items: flex-start; gap: 0.8rem; }
.intro-stats { grid-template-columns: 1fr 1fr; }
/* Mobile Nav Bar Icon Cleanups */
.nav-flags { display: none !important; }
.nav-right button[aria-label="Mein Konto"],
.nav-right button[aria-label="Favoriten"] { display: none !important; }
/* Mobile Content Typography Cleanups */
.eq-img, .insta-heading-pics { display: none !important; }
/* Bento Grid Badge full width mobile */
.why-bento-photo { min-height: 280px; }
.why-badge { bottom: 1rem; left: 1rem; right: 1rem; padding: 1rem; max-width: none; }
}
/* ================================================================
WIRKUNGSVIELFALT — Aurae-Style Sticky Product Scroll
================================================================ */
.wv-sec {
background: var(--cream-2);
position: relative;
overflow: visible;
}
/* Centered hero heading at the top */
.wv-header {
text-align: center;
padding-top: clamp(4.5rem, 7vw, 9rem);
padding-bottom: clamp(2.5rem, 4vw, 5rem);
max-width: 800px;
margin-inline: auto;
padding-inline: var(--gut);
}
.wv-header .overline {
display: block;
margin-bottom: 1rem;
}
.wv-header h2 {
font-family: var(--serif);
font-size: clamp(2.6rem, 1.6rem + 4vw, 5rem);
font-weight: 400;
line-height: 1.06;
letter-spacing: -0.02em;
color: var(--ink);
margin: 0 0 1.2rem;
}
.wv-header h2 em {
font-style: italic;
font-weight: 300;
color: var(--g);
}
.wv-header p {
font-size: clamp(1rem, 0.9rem + 0.3vw, 1.15rem);
color: var(--ink-50);
line-height: 1.6;
margin: 0 auto;
max-width: 50ch;
}
/* Two-column scroll area */
.wv-body {
display: grid;
grid-template-columns: 0.48fr 0.52fr;
gap: 0;
align-items: start;
max-width: var(--wrap);
margin-inline: auto;
padding-inline: var(--gut);
padding-bottom: clamp(4.5rem, 7vw, 9rem);
}
/* Sticky product column — transparent, no card */
.wv-sticky {
position: sticky;
top: 15vh;
display: flex;
align-items: center;
justify-content: center;
padding: clamp(2rem, 4vw, 4rem);
height: auto;
}
.wv-product-img {
width: clamp(350px, 40vw, 700px);
height: auto;
object-fit: contain;
filter: drop-shadow(0 24px 48px rgba(20,32,27,0.10));
transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.wv-sticky:hover .wv-product-img {
transform: scale(1.03) translateY(-6px);
}
/* Scrolling benefit items — one visible at a time */
.wv-scroll-col {
display: flex;
flex-direction: column;
gap: 0;
}
.wv-item {
min-height: 45vh;
display: flex;
flex-direction: column;
justify-content: center;
padding: clamp(2rem, 3vh, 3rem) clamp(1.5rem, 3vw, 3rem);
opacity: 0;
transform: translateY(24px);
transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
pointer-events: none;
}
.wv-item.visible {
opacity: 1;
transform: none;
pointer-events: auto;
}
/* Subtle number + text styling */
.wv-item-num {
font-family: var(--serif);
font-style: italic;
font-size: clamp(1rem, 0.8rem + 0.5vw, 1.2rem);
color: var(--g);
margin-bottom: 0.6rem;
display: block;
opacity: 0.7;
}
.wv-item h3 {
font-family: var(--serif);
font-size: clamp(2rem, 1.5rem + 2vw, 3.4rem);
font-weight: 400;
color: var(--ink);
line-height: 1.15;
letter-spacing: -0.01em;
margin: 0 0 0.8rem;
}
.wv-item p {
font-size: clamp(0.88rem, 0.84rem + 0.12vw, 1rem);
color: var(--ink-50);
line-height: 1.65;
margin: 0;
max-width: 42ch;
}
/* CTA at the bottom */
.wv-cta {
text-align: center;
padding-bottom: clamp(4.5rem, 7vw, 8.5rem);
}
/* Responsive */
@media (max-width: 900px) {
.wv-body {
grid-template-columns: 1fr;
}
.wv-sticky {
position: relative;
top: 0;
padding: 2rem 0;
}
.wv-product-img {
width: 350px;
}
.wv-item {
min-height: auto;
padding: 1.5rem 0;
opacity: 1 !important;
transform: none !important;
pointer-events: auto !important;
}
}
/* ================================================================
REDUCED MOTION
================================================================ */
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after {
animation-duration: 0.001ms !important;
transition-duration: 0.001ms !important;
}
.rv, .rv-right, .rv-left, .rv-scale { opacity: 1 !important; transform: none !important; }
/* Reduced motion */
.hero-slide-img { transform: scale(1) !important; transition: none !important; }
.hero-text .line1, .hero-text .line2,
.hero-text .hero-sub, .hero-text .hero-cta-link {
opacity: 1 !important;
transform: none !important;
transition: none !important;
}
}
/* Dropdown Menus Desktop */
.nav-dropdown {
position: relative;
display: inline-block;
height: 100%;
}
.nav-dropdown-toggle {
display: flex !important;
align-items: center;
gap: 0.3rem;
}
.nav-dropdown-menu {
position: absolute;
top: 100%;
left: -1rem;
background: var(--white);
min-width: 240px;
box-shadow: 0 10px 30px rgba(0,0,0,0.08);
padding: 1rem 0;
border-radius: 6px;
opacity: 0;
visibility: hidden;
transform: translateY(10px);
transition: all 0.3s var(--ease);
z-index: 100;
display: flex;
flex-direction: column;
}
.nav-dropdown:hover .nav-dropdown-menu {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.nav-dropdown-menu a {
padding: 0.6rem 1.5rem !important;
font-size: 0.9rem !important;
text-transform: none !important;
width: 100%;
text-align: left;
}
.nav-dropdown-menu a::after {
display: none !important;
}
.nav-dropdown-menu a:hover {
background: var(--cream-2);
color: var(--g) !important;
}
/* Mobile Dropdown */
.mob-dropdown {
display: flex;
flex-direction: column;
border-bottom: 1px solid var(--line);
}
.mob-dropdown-toggle {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
}
.mob-dropdown-toggle a {
border-bottom: none !important;
flex: 1;
}
.mob-dropdown-toggle button {
background: none;
border: none;
padding: 1rem;
color: var(--ink);
cursor: pointer;
transition: transform 0.3s ease;
}
.mob-dropdown.active .mob-dropdown-toggle button {
transform: rotate(180deg);
}
.mob-dropdown-menu {
display: none;
flex-direction: column;
padding-left: 1rem;
padding-bottom: 1rem;
}
.mob-dropdown.active .mob-dropdown-menu {
display: flex;
}
.mob-dropdown-menu a {
border-bottom: none !important;
padding: 0.5rem 0 !important;
font-size: clamp(1.2rem, 4vw, 1.5rem) !important;
}
/* Scroll To Top Button */
.scroll-top-btn {
position: fixed;
bottom: 2rem;
right: 2rem;
width: 50px;
height: 50px;
background: var(--g);
color: var(--white);
border: none;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 15px rgba(0, 171, 104, 0.3);
cursor: pointer;
z-index: 999;
opacity: 0;
visibility: hidden;
transform: translateY(20px);
transition: all 0.3s var(--ease);
}
.scroll-top-btn.visible {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.scroll-top-btn:hover {
background: var(--g-deep);
transform: translateY(-3px) scale(1.05);
box-shadow: 0 6px 20px rgba(0, 171, 104, 0.4);
}
@media (max-width: 640px) {
.scroll-top-btn {
bottom: 1.5rem;
right: 1.5rem;
width: 44px;
height: 44px;
}
}
/* Mobile Footer Accordion */
@media (max-width: 640px) {
.footer-col .footer-heading {
display: flex;
justify-content: space-between;
align-items: center;
cursor: pointer;
margin-bottom: 0;
padding: 1rem 0;
border-bottom: 1px solid var(--line);
}
.footer-col .footer-heading::after {
content: '+';
font-size: 1.2rem;
font-weight: 300;
}
.footer-col.active h5::after {
content: '-';
}
.footer-col ul {
display: none;
padding-top: 1rem;
padding-bottom: 0.5rem;
}
.footer-col.active ul {
display: block;
}
}
/* ===== from produkte.html ===== */
.nl-content {
position: relative;
z-index: 2;
width: min(480px, 55%);
padding: clamp(2.5rem, 5vw, 5rem) clamp(2rem, 4vw, 4rem);
display: flex;
flex-direction: column;
gap: 1.2rem;
}
.drawer-close:hover { background: var(--cream-2); color: var(--ink); }
.qty-btn:hover { background: var(--cream-2); }
/* ================================================================
ABOUT HERO — Full-height Kanva style
Banner image as background, text bottom-left, polaroids top-right
================================================================ */
.about-hero {
position: relative;
height: clamp(580px, 68vh, 820px);
min-height: 520px;
overflow: hidden;
background: #18140f;
display: flex;
align-items: flex-end;
}
/* Background image */
.about-hero-bg {
position: absolute;
inset: 0;
background-image: url('../img/banner-remigen-single.png');
background-size: cover;
background-position: center 35%;
background-repeat: no-repeat;
transform: scale(1.04);
animation: heroBgSettle 1.4s var(--ease) forwards;
}
@keyframes heroBgSettle {
to { transform: scale(1); }
}
/* Dark gradient overlay */
.about-hero-grad {
position: absolute;
inset: 0;
background:
linear-gradient(110deg,
rgba(8,6,4,0.80) 0%,
rgba(8,6,4,0.28) 52%,
rgba(8,6,4,0.04) 78%),
linear-gradient(0deg,
rgba(4,2,0,0.85) 0%,
rgba(4,2,0,0.0) 45%);
}
/* ── Text content ─ bottom-left ─────────────────────────────── */
.about-hero-inner {
position: relative;
z-index: 10;
width: 100%;
max-width: var(--wrap);
margin-inline: auto;
padding-inline: clamp(1.5rem, 4vw, 3rem);
padding-bottom: clamp(3rem, 5vw, 5rem);
display: flex;
flex-direction: column;
align-items: flex-start;
}
.about-hero-overline {
font-size: var(--fs-xs);
font-weight: 600;
letter-spacing: 0.2em;
text-transform: uppercase;
color: rgba(255,255,255,0.55);
margin-bottom: 1rem;
opacity: 0;
animation: fadeUp 0.7s 0.3s var(--ease) forwards;
}
.about-hero-h1 {
font-family: var(--serif);
font-size: clamp(3.2rem, 2rem + 5.5vw, 7rem);
font-weight: 300;
line-height: 0.95;
letter-spacing: -0.015em;
color: var(--white);
margin-bottom: 1.2rem;
opacity: 0;
animation: fadeUp 0.85s 0.45s var(--ease) forwards;
}
.about-hero-h1 em {
font-style: italic;
color: rgba(255,255,255,0.78);
display: block;
}
.about-hero-sub {
font-size: clamp(0.875rem, 0.83rem + 0.22vw, 1rem);
color: rgba(255,255,255,0.6);
line-height: 1.65;
max-width: 42ch;
margin-bottom: 0;
font-weight: 400;
opacity: 0;
animation: fadeUp 0.75s 0.6s var(--ease) forwards;
}
/* ── Polaroids ─ top-right ───────────────────────────────── */
.hero-photos {
position: absolute;
top: clamp(5rem, 8vw, 7.5rem);
right: clamp(2rem, 6vw, 5rem);
z-index: 10;
width: 280px;
height: 190px;
}
.polaroid {
background: rgba(255,255,255,0.95);
padding: 9px 9px 26px 9px;
border-radius: 6px;
box-shadow: 0 16px 48px rgba(0,0,0,0.35), 0 4px 12px rgba(0,0,0,0.2);
border: 1px solid rgba(255,255,255,0.3);
position: absolute;
width: 130px;
height: 158px;
opacity: 0;
animation: spreadPolaroids 1s var(--ease) forwards;
cursor: pointer;
transition: transform 0.6s var(--ease), box-shadow 0.5s var(--ease);
}
.polaroid img {
width: 100%;
height: 105px;
object-fit: cover;
border-radius: 3px;
display: block;
}
.polaroid-caption {
font-family: var(--serif);
font-style: italic;
font-size: 0.7rem;
color: rgba(20,32,27,0.5);
text-align: center;
margin-top: 6px;
}
.photo-1 {
transform: rotate(-7deg) translateX(-38px) translateY(8px);
z-index: 1;
animation-delay: 0.55s;
}
.photo-2 {
transform: rotate(8deg) translateX(38px) translateY(-8px);
z-index: 2;
animation-delay: 0.75s;
}
.hero-photos:hover .photo-1 {
transform: rotate(-15deg) translateX(-60px) scale(1.08);
box-shadow: 0 28px 70px rgba(0,0,0,0.45);
z-index: 3;
}
.hero-photos:hover .photo-2 {
transform: rotate(17deg) translateX(60px) scale(1.08);
box-shadow: 0 28px 70px rgba(0,0,0,0.45);
z-index: 4;
}
/* ── Scroll hint ─────────────────────────────────────── */
.about-scroll-hint {
position: absolute;
bottom: clamp(2rem, 4vw, 3.5rem);
right: clamp(1.5rem, 4vw, 3rem);
z-index: 20;
display: flex;
align-items: center;
gap: 0.5rem;
text-decoration: none;
opacity: 0;
animation: fadeIn 0.7s 1.1s var(--ease) forwards;
}
.about-scroll-label {
font-family: var(--serif);
font-style: italic;
font-size: 0.9rem;
color: rgba(255,255,255,0.6);
}
.about-scroll-arrow {
color: rgba(255,255,255,0.6);
animation: arrowBounce 2s 1.8s ease-in-out infinite;
}
/* ── Entrance animations ────────────────────────────── */
@keyframes fadeUp {
from { opacity: 0; transform: translateY(22px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes spreadPolaroids {
0% { opacity: 0; transform: scale(0.7) translateY(20px) rotate(0deg); }
100% { opacity: 1; }
}
/* ── Responsive ─────────────────────────────────────── */
@media (max-width: 768px) {
.about-hero { height: clamp(480px, 70vh, 680px); }
.hero-photos {
top: 4.5rem;
right: 1rem;
width: 200px;
height: 140px;
}
.polaroid { width: 100px; height: 122px; }
.polaroid img { height: 80px; }
.photo-1 { transform: rotate(-7deg) translateX(-28px) translateY(6px); }
.photo-2 { transform: rotate(8deg) translateX(28px) translateY(-6px); }
.about-scroll-hint { display: none; }
}
@media (max-width: 480px) {
.about-hero { height: 70vh; min-height: 440px; }
.hero-photos { display: none; }
.about-hero-h1 { font-size: clamp(2.8rem, 2rem + 5vw, 4.5rem); }
}
/* ================================================================
STATS SECTION — Animated counters
================================================================ */
.stats-section {
padding-block: clamp(4rem, 2.5rem + 7vw, 8rem);
background: var(--cream-2);
}
.stats-intro {
text-align: center;
margin-bottom: clamp(2.5rem, 1.5rem + 3vw, 4rem);
}
.stats-intro .overline {
margin-bottom: 0.7rem;
}
.stats-intro h2 {
font-family: var(--serif);
font-size: var(--fs-h2);
max-width: 600px;
margin-inline: auto;
font-weight: 400;
color: var(--ink);
line-height: 1.1;
}
.stats-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1.5rem;
}
.stat-card {
background: var(--white);
padding: clamp(2rem, 1.5vw, 3rem) clamp(1.5rem, 1vw, 2.5rem);
border-radius: var(--r-xl);
border: 1px solid rgba(20,32,27,0.06);
box-shadow: var(--sh);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.stat-card:hover {
transform: translateY(-4px);
box-shadow: var(--sh-lg);
}
.stat-number {
font-family: var(--serif);
font-size: clamp(2.8rem, 2rem + 2.5vw, 4rem);
line-height: 1;
margin-bottom: 0.6rem;
display: flex;
align-items: baseline;
justify-content: center;
}
.stat-number .num {
font-weight: 300;
font-style: italic;
color: var(--ink);
}
.stat-number .unit {
font-size: 0.6em;
font-weight: 400;
font-style: italic;
color: var(--ink);
margin-left: 0.1rem;
}
/* Specific fix for Swiss Made so it doesn't look like a giant number */
.stat-card[data-static="true"] .stat-number {
font-size: clamp(2.2rem, 1.5rem + 1.8vw, 2.8rem);
}
.stat-card[data-static="true"] .stat-number .unit {
font-size: 1em; /* keep same size as 'Swiss' */
margin-left: 0.3rem;
}
.stat-label {
font-family: var(--serif);
font-size: clamp(1.1rem, 1rem + 0.5vw, 1.3rem);
font-weight: 400;
color: var(--ink);
margin-bottom: 0.6rem;
}
.stat-desc {
font-size: var(--fs-xs);
color: var(--ink-50);
line-height: 1.5;
font-weight: 400;
}
/* ── Counter animation state ─────────────────────────────── */
.stat-card.count-triggered .stat-number .num {
animation: countPop 0.4s var(--ease) both;
}
@keyframes countPop {
0% { transform: scale(0.85); opacity: 0.3; }
60% { transform: scale(1.06); }
100% { transform: scale(1); opacity: 1; }
}
@media (max-width: 991px) {
.stats-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 568px) {
.stats-grid { grid-template-columns: 1fr; gap: 1rem; }
}
/* ================================================================
SPLIT SECTIONS — Kanva Style
================================================================ */
.split-sec {
padding-block: clamp(4rem, 6vw, 8rem);
background: var(--cream-2);
}
.split-header {
margin-bottom: clamp(2.5rem, 4vw, 4rem);
max-width: var(--wrap);
margin-inline: auto;
}
.split-header .overline {
margin-bottom: 0.8rem;
display: block;
}
.split-header h2 {
font-family: var(--serif);
font-size: clamp(3.2rem, 2.5rem + 3vw, 5rem);
font-weight: 400;
line-height: 1.05;
color: var(--ink);
letter-spacing: -0.02em;
}
.split-header h2 em {
font-style: italic;
display: block;
color: var(--ink-70);
}
.split-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(1.2rem, 2vw, 2rem);
align-items: stretch;
}
.split-img-col {
border-radius: var(--r-xl);
overflow: hidden;
position: relative;
height: 100%;
min-height: 400px;
}
.split-img-col img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
border-radius: var(--r-xl);
transition: transform var(--dur-slow) var(--ease);
}
.split-img-col:hover img {
transform: scale(1.03);
}
.split-card-col {
display: flex;
justify-content: center;
}
.split-card {
background: var(--white);
border-radius: var(--r-xl);
padding: clamp(2.5rem, 4vw, 4.5rem) clamp(2rem, 3vw, 3.5rem);
box-shadow: var(--sh);
border: 1px solid rgba(20,32,27,0.06);
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
}
.split-rows-wrapper {
display: flex;
flex-direction: column;
gap: clamp(1.2rem, 2vw, 2rem);
}
.split-card .overline {
margin-bottom: 0.8rem;
}
.split-card h3 {
font-family: var(--serif);
font-size: clamp(2rem, 1.5rem + 2vw, 3.2rem);
font-weight: 400;
line-height: 1.1;
color: var(--ink);
margin-bottom: 1.5rem;
letter-spacing: -0.01em;
}
.split-card h3 em {
font-style: italic;
display: block;
color: var(--ink-70);
}
.split-card p {
font-size: var(--fs-body);
color: var(--ink-70);
line-height: 1.65;
margin-bottom: 1.2rem;
}
.split-card p:last-of-type {
margin-bottom: 0;
}
.checklist {
display: flex;
flex-direction: column;
gap: 0.85rem;
margin-top: 2rem;
padding-top: 1.5rem;
border-top: 1px solid var(--line);
}
.check-item {
display: flex;
align-items: flex-start;
gap: 0.85rem;
font-size: var(--fs-body);
color: var(--ink);
line-height: 1.45;
}
.check-icon {
color: var(--g);
flex-shrink: 0;
margin-top: 2px;
}
/* On mobile, stack layout */
@media (max-width: 900px) {
.split-grid {
grid-template-columns: 1fr;
gap: 2rem;
}
}
@media (max-width: 568px) {
.split-card {
padding: 2rem 1.5rem;
}
}
/* ================================================================
SUSTAINABILITY BANNER
================================================================ */
.sus-banner-sec {
padding-block: clamp(4rem, 6vw, 8rem);
}
.sus-banner {
border-radius: var(--r-xl);
background-image: url('../img/banner-remigen-single.png');
background-size: cover;
background-position: center right;
position: relative;
overflow: hidden;
padding: clamp(3.5rem, 6vw, 6rem) clamp(2rem, 5vw, 5rem);
display: flex;
align-items: center;
box-shadow: var(--sh-lg);
}
.sus-banner::before {
content: '';
position: absolute;
top: 0; left: 0; bottom: 0;
width: 60%;
background: linear-gradient(to right, rgba(20,32,27,0.85) 0%, rgba(20,32,27,0) 100%);
z-index: 1;
}
.sus-banner-content {
position: relative;
z-index: 2;
max-width: 520px;
color: var(--white);
}
.sus-banner-content h2 {
font-family: var(--serif);
font-size: clamp(2.8rem, 3.5vw + 1rem, 4.5rem);
font-weight: 400;
line-height: 1.05;
margin-bottom: 1.5rem;
letter-spacing: -0.02em;
}
.sus-banner-content h2 em {
font-style: italic;
display: block;
color: var(--sand);
}
.sus-banner-content p {
font-size: var(--fs-body);
line-height: 1.6;
margin-bottom: 2.5rem;
color: rgba(255,255,255,0.85);
}
.sus-checklist {
display: flex;
flex-direction: column;
gap: 1.2rem;
}
.sus-check-item {
display: flex;
align-items: center;
gap: 0.8rem;
font-size: var(--fs-body);
color: var(--white);
}
.sus-check-item svg {
color: var(--white);
flex-shrink: 0;
}
@media (max-width: 768px) {
.sus-banner::before {
width: 100%;
background: linear-gradient(to right, rgba(20,32,27,0.9) 0%, rgba(20,32,27,0.4) 100%);
}
}
/* ================================================================
ECO PACKAGING SECTION
================================================================ */
.eco-sec {
padding-block: clamp(4rem, 6vw, 8rem);
background: var(--cream-2);
}
.eco-grid {
display: grid;
grid-template-columns: 1fr 1.2fr;
gap: clamp(3rem, 5vw, 6rem);
align-items: center;
}
.eco-img-col {
display: flex;
justify-content: center;
align-items: center;
}
.eco-img-col img {
width: 100%;
height: auto;
max-height: 750px;
object-fit: contain;
}
.eco-content-col {
display: flex;
flex-direction: column;
}
.eco-header {
margin-bottom: clamp(2.5rem, 4vw, 3.5rem);
}
.eco-header h2 {
font-family: var(--serif);
font-size: clamp(3.2rem, 3.5vw + 1rem, 4.5rem);
font-weight: 400;
line-height: 1.05;
color: var(--ink);
letter-spacing: -0.02em;
margin-bottom: 1.2rem;
}
.eco-header h2 em {
font-style: italic;
display: block;
color: var(--ink-70);
}
.eco-header p {
font-size: var(--fs-body);
color: var(--ink-70);
line-height: 1.65;
max-width: 540px;
}
.eco-cards-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.25rem;
}
.eco-card {
background: var(--white);
border-radius: var(--r-xl);
padding: clamp(1.5rem, 3vw, 2.5rem) clamp(1.2rem, 2vw, 2rem);
text-align: center;
box-shadow: var(--sh);
border: 1px solid rgba(20,32,27,0.04);
}
.eco-card-icon {
margin-bottom: 1.2rem;
color: var(--ink);
display: flex;
justify-content: center;
}
.eco-card-icon svg {
width: 24px;
height: 24px;
}
.eco-card h4 {
font-family: var(--serif);
font-size: clamp(1.2rem, 1vw + 1rem, 1.4rem);
font-weight: 400;
color: var(--ink);
margin-bottom: 0.6rem;
}
.eco-card p {
font-size: var(--fs-sm);
color: var(--ink-70);
line-height: 1.5;
}
.eco-img-col,
.eco-content-col {
min-width: 0;
}
@media (max-width: 768px) {
.eco-grid { grid-template-columns: 1fr; gap: 3rem; }
.eco-img-col img { max-height: 500px; }
.eco-cards-grid { grid-template-columns: 1fr; gap: 1rem; }
}
/* ===== from product.html ===== */
/* ================================================================
POLICY SECTION
================================================================ */
.policy-sec {
padding-block: clamp(6rem, 8vw, 10rem);
display: flex;
flex-direction: column;
align-items: center;
}
.policy-breadcrumbs {
font-family: var(--sans);
font-size: 0.85rem;
color: var(--ink-50);
margin-bottom: 1.5rem;
text-align: center;
}
.policy-breadcrumbs a {
color: var(--ink-50);
transition: color var(--dur-fast);
}
.policy-breadcrumbs a:hover {
color: var(--ink);
}
.policy-header {
text-align: center;
margin-bottom: clamp(3rem, 5vw, 4rem);
width: 100%;
}
.policy-header h1 {
font-family: var(--serif);
font-size: clamp(3.2rem, 4vw + 1rem, 4.8rem);
font-style: italic;
font-weight: 400;
color: var(--ink);
letter-spacing: -0.02em;
}
.policy-card {
background: var(--white);
border-radius: var(--r-xl);
padding: clamp(2.5rem, 5vw, 4rem);
box-shadow: 0 10px 40px rgba(20,32,27,0.04);
border: 1px solid rgba(20,32,27,0.03);
width: 100%;
max-width: 800px;
margin-inline: auto;
display: flex;
flex-direction: column;
}
.policy-item {
display: flex;
flex-direction: column;
gap: 1rem;
border-bottom: 1px solid rgba(20,32,27,0.05);
padding-block: 2.5rem;
}
.policy-item:first-child {
padding-top: 0;
}
.policy-item:last-child {
border-bottom: none;
padding-bottom: 0;
}
.policy-item h3 {
font-family: var(--serif);
font-size: 1.4rem;
color: var(--ink);
font-weight: 400;
}
.policy-item p {
font-family: var(--sans);
font-size: 0.95rem;
color: var(--ink-70);
line-height: 1.6;
}
.policy-item p strong {
color: var(--ink);
font-weight: 500;
}
.policy-item a {
font-family: var(--sans);
font-size: 0.9rem;
color: var(--ink);
text-decoration: underline;
text-underline-offset: 3px;
font-weight: 500;
margin-top: 0.5rem;
display: inline-block;
align-self: flex-start;
transition: opacity var(--dur-fast);
}
.policy-item a:hover {
opacity: 0.7;
}
/* ==========================================================================
SINGLE PRODUCT PAGE (Kanva Style)
========================================================================== */
.product-page-wrapper {
background-color: #F4F4F0; /* Kanva style off-white background */
padding-bottom: 6rem;
min-height: 100vh;
}
.product-section {
padding-top: 140px; /* space for fixed header */
}
.product-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4rem;
align-items: start;
}
/* Left: Product Gallery */
.product-gallery {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.gallery-card {
background-color: #EFEFE9; /* Kanva style image card background */
border-radius: 24px;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
padding: 4rem 2rem;
}
.gallery-img {
width: 100%;
max-width: 400px;
height: auto;
object-fit: contain;
mix-blend-mode: multiply; /* Helps blend white backgrounds of product images */
}
/* Right: Sticky Details */
.product-details {
position: sticky;
top: 120px;
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.product-price {
font-family: var(--sans);
font-size: 1.2rem;
color: var(--ink);
font-weight: 500;
}
.product-title {
font-family: var(--serif);
font-size: clamp(2.5rem, 4vw, 3.5rem);
font-weight: 400;
color: var(--ink);
line-height: 1.1;
margin: 0;
}
.product-short-desc {
font-family: var(--sans);
font-size: 1.05rem;
color: var(--ink-70);
line-height: 1.6;
}
/* Variants */
.product-variants {
display: flex;
flex-direction: column;
gap: 0.8rem;
margin-top: 0.5rem;
}
.variant-label {
font-family: var(--sans);
font-size: 0.85rem;
color: var(--ink);
}
.variant-pills {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
}
.variant-pill {
padding: 0.7rem 1.2rem;
background: #EAEAE4;
border: 1px solid transparent;
border-radius: 50px;
font-size: 0.9rem;
font-family: var(--sans);
cursor: pointer;
transition: all 0.3s ease;
color: var(--ink);
}
.variant-pill:hover {
background: #E2E2DC;
}
.variant-pill.active {
background: var(--g);
border-color: var(--g);
color: var(--white);
}
/* Actions */
.product-actions {
display: flex;
gap: 1rem;
margin-top: 0.5rem;
}
.quantity-selector {
display: flex;
align-items: center;
background: #EFEFE9;
border-radius: 50px;
overflow: hidden;
height: 54px;
}
.qty-btn {
background: transparent;
border: none;
width: 45px;
height: 100%;
font-size: 1.2rem;
cursor: pointer;
color: var(--ink);
transition: background 0.3s;
}
.qty-btn:hover {
background: rgba(0,0,0,0.05);
}
.qty-input {
width: 40px;
text-align: center;
border: none;
background: transparent;
font-size: 1rem;
font-family: var(--sans);
color: var(--ink);
-moz-appearance: textfield;
}
.qty-input::-webkit-outer-spin-button,
.qty-input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
.add-to-cart-btn {
flex: 1;
background: var(--g);
color: var(--white);
border: none;
border-radius: 50px;
height: 54px;
font-size: 1.05rem;
font-family: var(--sans);
cursor: pointer;
transition: background 0.3s;
}
.add-to-cart-btn:hover {
background: var(--g-hover);
}
.product-perks {
display: flex;
justify-content: center;
gap: 1.5rem;
font-size: 0.85rem;
color: var(--ink-70);
margin-top: 0.5rem;
font-family: var(--sans);
}
/* Mobile Sticky Add to Cart */
@media (max-width: 900px) {
.product-actions {
position: fixed;
bottom: 0;
left: 0;
right: 0;
background: var(--white);
padding: 1rem;
box-shadow: 0 -4px 20px rgba(0,0,0,0.1);
z-index: 100;
margin: 0;
justify-content: center;
}
}
/* Anwendung Grid */
.anwendung-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1rem;
margin-top: 1rem;
}
.anwendung-card {
text-align: center;
border: 1px solid rgba(0,0,0,0.05);
border-radius: 12px;
padding: 1.5rem 1rem;
background: var(--white);
}
.anwendung-img {
width: 60px;
height: 60px;
object-fit: contain;
margin: 0 auto 1rem;
}
.anwendung-num {
color: var(--g);
font-size: 1.5rem;
font-family: var(--sans);
margin-bottom: 0.5rem;
}
.anwendung-title {
font-weight: 600;
color: var(--ink);
font-size: 0.9rem;
margin-bottom: 0.5rem;
}
.anwendung-text {
font-size: 0.8rem;
color: var(--ink-70);
line-height: 1.4;
}
@media (max-width: 768px) {
.anwendung-grid {
grid-template-columns: 1fr 1fr;
}
}
@media (max-width: 480px) {
.anwendung-grid {
grid-template-columns: 1fr;
}
}
/* Kanva Features Grid */
.product-features-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0.8rem;
margin-top: 1rem;
}
.feature-card {
background: #EFEFE9;
border-radius: 12px;
padding: 1.2rem 0.5rem;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
gap: 0.8rem;
}
.feature-card .icon {
font-size: 1.8rem;
}
.feature-card .text {
font-size: 0.8rem;
line-height: 1.2;
color: var(--ink);
font-family: var(--sans);
}
/* Kanva Style Accordions (White boxes) */
.kanva-accordions {
display: flex;
flex-direction: column;
gap: 0.8rem;
margin-top: 1rem;
}
.kanva-box {
background: var(--white);
border-radius: 12px;
padding: 0 1.5rem;
box-shadow: 0 2px 10px rgba(0,0,0,0.02);
}
.accordion-header {
width: 100%;
text-align: left;
background: transparent;
border: none;
padding: 1.5rem 0;
font-family: var(--serif);
font-size: 1.2rem;
color: var(--ink);
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
}
.accordion-header .icon {
font-family: var(--sans);
font-size: 1.5rem;
font-weight: 300;
color: var(--ink-70);
transition: transform 0.3s ease;
}
.kanva-box.active .accordion-header .icon {
transform: rotate(45deg);
}
.accordion-content {
max-height: 0;
overflow: hidden;
transition: max-height 0.4s ease, opacity 0.4s ease;
opacity: 0;
}
.kanva-box.active .accordion-content {
opacity: 1;
}
.accordion-content p {
padding-bottom: 1.5rem;
color: var(--ink-70);
line-height: 1.6;
font-size: 0.95rem;
font-family: var(--sans);
}
/* Kanva Features Cards Section */
.features-section-kanva {
padding: 4rem 0;
background-color: #F4F4F0;
}
.features-cards-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 2rem;
}
.features-card-large {
background: var(--white);
border-radius: 16px;
padding: 3rem 2rem;
text-align: center;
box-shadow: 0 4px 20px rgba(0,0,0,0.03);
display: flex;
flex-direction: column;
align-items: center;
gap: 1rem;
}
.features-card-large .icon {
width: 48px;
height: 48px;
object-fit: contain;
margin-bottom: 0.5rem;
}
.features-card-large h3 {
font-family: var(--serif);
font-size: 1.5rem;
color: var(--ink);
margin: 0;
font-weight: 400;
}
.features-card-large p {
font-family: var(--sans);
font-size: 0.95rem;
color: var(--ink-70);
line-height: 1.6;
margin: 0;
}
@media (max-width: 900px) {
.features-cards-grid {
grid-template-columns: 1fr 1fr;
}
}
@media (max-width: 600px) {
.features-cards-grid {
grid-template-columns: 1fr;
}
}
/* FAQ Section */
.faq-section-kanva {
padding: 6rem 0;
background-color: #F4F4F0;
}
.faq-grid {
display: grid;
grid-template-columns: 1fr 2fr;
gap: 4rem;
}
.faq-title {
font-family: var(--serif);
font-size: 3.5rem;
font-weight: 400;
color: var(--ink);
margin: 0;
}
/* Mobile Responsive */
@media (max-width: 900px) {
.product-grid, .faq-grid {
grid-template-columns: 1fr;
gap: 2rem;
}
.product-details {
position: static;
}
.product-features-grid {
grid-template-columns: 1fr 1fr;
}
.product-page-wrapper {
padding-bottom: 100px;
}
}
/* ===== from schmerzen.html ===== */
.about-hero-bg {
background-image: url('../img/banner-remigen-single.png');
}
/* ===== from blog.html ===== */
/* ================================================================
BLOG ARCHIVE
================================================================ */
.blog-header {
padding: 12rem 0 4rem;
text-align: center;
}
.blog-title {
font-family: var(--serif);
font-size: clamp(3rem, 5vw, 6rem);
font-style: italic;
font-weight: 400;
color: var(--ink);
}
.blog-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2rem;
padding-bottom: 6rem;
}
.blog-card {
background: var(--white);
border-radius: 12px;
overflow: hidden;
box-shadow: 0 10px 30px rgba(0,0,0,0.03);
transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
display: flex;
flex-direction: column;
text-decoration: none;
}
.blog-card:hover {
transform: translateY(-5px);
box-shadow: 0 15px 40px rgba(0,0,0,0.06);
}
.blog-card-img {
width: 100%;
height: 280px;
object-fit: cover;
}
.blog-card-content {
padding: 2rem;
display: flex;
flex-direction: column;
flex: 1;
}
.blog-meta {
font-family: var(--serif);
font-style: italic;
font-size: 0.95rem;
color: var(--ink-50);
margin-bottom: 0.8rem;
}
.blog-card-title {
font-family: var(--serif);
font-style: italic;
font-size: 1.7rem;
line-height: 1.3;
color: var(--ink);
margin-bottom: 2rem;
}
.blog-read-more {
margin-top: auto;
font-size: 0.85rem;
font-weight: 500;
color: var(--ink);
text-decoration: underline;
text-underline-offset: 4px;
transition: color 0.3s var(--ease);
}
.blog-card:hover .blog-read-more {
color: var(--g);
}
@media (max-width: 1024px) {
.blog-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
.blog-grid { grid-template-columns: 1fr; gap: 1.5rem; }
.blog-header { padding: 9rem 0 3rem; }
}
/* ===== from blog-post.html ===== */
/* ── Hero text content — bottom-left ─────────────────────────── */
.why-top-right {
display: flex;
flex-direction: column;
gap: 0.5rem;
padding-top: 0.4rem;
}
.why-card-img {
width: 38%;
display: flex;
justify-content: center;
padding: 1rem 1rem 0;
background: var(--cream-2);
}
/* Header row: left title + right score */
.review-grid-header {
display: flex;
justify-content: space-between;
gap: 2rem;
margin-bottom: clamp(2.5rem, 4vw, 4rem);
flex-wrap: wrap;
}
.rg-card-footer {
display: flex;
justify-content: space-between;
margin-top: 0.4rem;
}
.app-item-top {
display: flex;
justify-content: space-between;
padding-bottom: 0.8rem;
border-bottom: 1px solid var(--line);
margin-bottom: 1.2rem;
}
/* ================================================================
SINGLE BLOG POST
================================================================ */
.post-hero {
position: relative;
width: 100%;
height: 80vh;
min-height: 500px;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
display: flex;
align-items: flex-end;
justify-content: center;
text-align: center;
overflow: hidden;
}
.post-hero::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0) 60%);
}
.post-hero-title {
position: relative;
z-index: 2;
font-family: var(--serif);
font-size: clamp(2.5rem, 5vw, 5rem);
font-style: italic;
font-weight: 400;
color: var(--white);
max-width: 25ch;
line-height: 1.1;
text-shadow: 0 4px 20px rgba(0,0,0,0.3);
padding: 0 2rem clamp(3rem, 5vw, 5rem);
width: 100%;
text-align: center;
}
.post-wrap {
width: min(900px, 92vw);
margin: -4rem auto 6rem;
position: relative;
z-index: 10;
}
.post-content-card {
background: var(--white);
border-radius: 12px;
padding: clamp(3rem, 6vw, 6rem) clamp(2rem, 5vw, 5rem);
box-shadow: 0 20px 50px rgba(0,0,0,0.05);
}
.post-meta {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1rem;
border-bottom: 1px solid var(--line);
padding-bottom: 2rem;
margin-bottom: 4rem;
}
.post-meta-col span {
font-family: var(--sans);
font-size: 0.8rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--ink);
margin-bottom: 0.5rem;
}
.post-meta-col p {
font-family: var(--serif);
font-style: italic;
font-size: 1rem;
color: var(--ink-50);
margin: 0;
}
.post-body h2 {
font-family: var(--serif);
font-size: clamp(1.8rem, 4vw, 2.8rem);
font-weight: 400;
color: var(--ink);
margin-top: 4rem;
margin-bottom: 1.5rem;
line-height: 1.25;
}
.post-body h2:first-child {
margin-top: 0;
}
.post-body p {
font-family: var(--sans);
font-size: 1.05rem;
line-height: 1.8;
color: var(--ink-70);
margin-bottom: 1.8rem;
}
.post-related {
padding: 6rem 0;
border-top: 1px solid rgba(0,0,0,0.05);
}
.post-related-title {
font-family: var(--serif);
font-size: clamp(2.5rem, 4vw, 3.5rem);
font-style: italic;
font-weight: 400;
color: var(--ink);
text-align: center;
margin-bottom: 4rem;
}
.post-related .blog-grid {
grid-template-columns: repeat(2, 1fr);
}
@media (max-width: 768px) {
.post-hero {
position: relative;
width: 100%;
height: 80vh;
min-height: 500px;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
display: flex;
align-items: flex-end;
justify-content: center;
text-align: center;
overflow: hidden;
}
.post-meta { grid-template-columns: 1fr; gap: 1.5rem; margin-bottom: 3rem; }
.post-related .blog-grid { grid-template-columns: 1fr; }
.post-wrap { margin-top: -3rem; }
}
/* ===== from kontakt.html ===== */
/* ================================================================
CONTACT SECTION
================================================================ */
.contact-sec {
padding-block: clamp(6rem, 8vw, 10rem);
display: flex;
flex-direction: column;
align-items: center;
}
.contact-header {
text-align: center;
margin-bottom: clamp(2.5rem, 4vw, 3.5rem);
max-width: 600px;
margin-inline: auto;
}
.contact-header h1 {
font-family: var(--serif);
font-size: clamp(3.2rem, 4vw + 1rem, 4.8rem);
font-style: italic;
font-weight: 400;
color: var(--ink);
margin-bottom: 1.2rem;
letter-spacing: -0.02em;
}
.contact-header p {
font-size: clamp(0.95rem, 1vw + 0.5rem, 1.1rem);
color: var(--ink-70);
line-height: 1.6;
}
.contact-form-wrap {
width: 100%;
max-width: 760px;
background: var(--white);
border-radius: var(--r-xl);
padding: clamp(2rem, 5vw, 4rem);
box-shadow: 0 10px 40px rgba(20,32,27,0.06);
border: 1px solid rgba(20,32,27,0.03);
margin-bottom: 2.5rem;
margin-inline: auto;
}
.contact-form {
display: flex;
flex-direction: column;
gap: 1.8rem;
}
.contact-form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.5rem;
}
.form-group {
display: flex;
flex-direction: column;
gap: 0.6rem;
}
.form-group label {
font-family: var(--serif);
font-style: italic;
font-size: 1.05rem;
color: var(--ink-50);
}
.form-group input,
.form-group textarea {
width: 100%;
background: #F0EFEA;
border: none;
border-radius: var(--r-sm);
padding: 1.2rem;
font-family: var(--sans);
font-size: 0.95rem;
color: var(--ink);
transition: box-shadow var(--dur-fast);
}
.form-group input:focus,
.form-group textarea:focus {
outline: none;
box-shadow: 0 0 0 2px var(--g-100);
}
.form-group textarea {
resize: vertical;
min-height: 160px;
}
.btn-submit {
width: 100%;
margin-top: 0.5rem;
background: #364234;
color: var(--white);
border-radius: var(--r-pill);
padding: 1.2rem;
font-family: var(--sans);
font-size: 1rem;
font-weight: 500;
transition: opacity var(--dur-fast), transform var(--dur-fast);
}
.btn-submit:hover {
opacity: 0.9;
transform: translateY(-2px);
}
.contact-faq {
display: flex;
align-items: center;
justify-content: center;
gap: 0.6rem;
font-size: 0.9rem;
color: var(--ink-70);
font-weight: 400;
}
.contact-faq a {
text-decoration: underline;
text-underline-offset: 3px;
font-weight: 500;
}
@media (max-width: 600px) {
.contact-form-row { grid-template-columns: 1fr; }
}
/* ================================================================
CONTACT FORM 7 — erbt den rémigén+ Formular-Stil
================================================================ */
.contact-form-wrap .wpcf7-form { display: flex; flex-direction: column; gap: 1.4rem; }
.contact-form-wrap .wpcf7 p { margin: 0; }
.contact-form-wrap .wpcf7-form label {
display: flex;
flex-direction: column;
gap: 0.6rem;
font-family: var(--serif);
font-style: italic;
font-size: 1.05rem;
color: var(--ink-50);
}
.contact-form-wrap .wpcf7-form input.wpcf7-text,
.contact-form-wrap .wpcf7-form input.wpcf7-email,
.contact-form-wrap .wpcf7-form input.wpcf7-tel,
.contact-form-wrap .wpcf7-form input.wpcf7-number,
.contact-form-wrap .wpcf7-form input.wpcf7-date,
.contact-form-wrap .wpcf7-form select.wpcf7-select,
.contact-form-wrap .wpcf7-form textarea.wpcf7-textarea,
.contact-form-wrap .wpcf7-form input[type="text"],
.contact-form-wrap .wpcf7-form input[type="email"],
.contact-form-wrap .wpcf7-form input[type="tel"],
.contact-form-wrap .wpcf7-form textarea {
width: 100%;
background: #F0EFEA;
border: none;
border-radius: var(--r-sm);
padding: 1.2rem;
font-family: var(--sans);
font-size: 0.95rem;
color: var(--ink);
transition: box-shadow var(--dur-fast);
}
.contact-form-wrap .wpcf7-form input:focus,
.contact-form-wrap .wpcf7-form select:focus,
.contact-form-wrap .wpcf7-form textarea:focus {
outline: none;
box-shadow: 0 0 0 2px var(--g-100);
}
.contact-form-wrap .wpcf7-form textarea { resize: vertical; min-height: 160px; }
/* Zwei Felder nebeneinander, wenn du sie in CF7 mit
…
gruppierst */
.contact-form-wrap .wpcf7-form .contact-form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.5rem;
}
@media (max-width: 600px) {
.contact-form-wrap .wpcf7-form .contact-form-row { grid-template-columns: 1fr; }
}
.contact-form-wrap .wpcf7-form input.wpcf7-submit {
width: 100%;
margin-top: 0.5rem;
background: #364234;
color: var(--white);
border: none;
border-radius: var(--r-pill);
padding: 1.2rem;
font-family: var(--sans);
font-size: 1rem;
font-weight: 500;
cursor: pointer;
transition: opacity var(--dur-fast), transform var(--dur-fast);
}
.contact-form-wrap .wpcf7-form input.wpcf7-submit:hover { opacity: 0.9; transform: translateY(-2px); }
.contact-form-wrap .wpcf7-spinner { margin: 0 auto; }
.contact-form-wrap .wpcf7-response-output {
margin: 1.2rem 0 0;
border-radius: var(--r-sm);
border: 1px solid var(--line);
padding: 0.9rem 1.1rem;
font-family: var(--sans);
font-size: 0.9rem;
}
.contact-form-wrap .wpcf7-not-valid-tip { color: var(--err); font-family: var(--sans); font-style: normal; font-size: 0.8rem; }
.contact-form-wrap .wpcf7-form.invalid .wpcf7-response-output { border-color: var(--err); }
.contact-form-wrap .wpcf7-form.sent .wpcf7-response-output { border-color: var(--g); }
.nav-cart-badge {
position: absolute; top: 2px; right: 2px;
min-width: 16px; height: 16px;
border-radius: 8px;
background: var(--g);
color: var(--white);
font-family: var(--sans);
font-size: 10px;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
padding: 0 4px;
border: 1.5px solid var(--white);
line-height: 1;
}
/* Standard WordPress Content Styles für Rechtliche Seiten */
.legal-text {
color: var(--ink-70);
line-height: 1.7;
font-family: var(--sans);
font-size: 1rem;
}
.legal-text h1, .legal-text h2, .legal-text h3, .legal-text h4 {
font-family: var(--serif);
font-weight: 400;
color: var(--ink);
margin-top: 2.5rem;
margin-bottom: 1rem;
line-height: 1.3;
}
.legal-text h2 { font-size: 1.8rem; }
.legal-text h3 { font-size: 1.5rem; }
.legal-text p { margin-bottom: 1.2rem; }
.legal-text ul, .legal-text ol { margin-bottom: 1.2rem; padding-left: 1.5rem; }
.legal-text li { margin-bottom: 0.5rem; }
.legal-text a { color: var(--g); text-decoration: underline; text-underline-offset: 4px; }
.legal-text a:hover { color: var(--g-deep); }
/* ================================================================
FAQ PAGE — 2-Column Card Grid (wie faq.html)
================================================================ */
.faq-sec {
padding-block: clamp(6rem, 8vw, 10rem);
display: flex;
flex-direction: column;
align-items: center;
background: var(--cream-2);
}
.faq-header {
text-align: center;
margin-bottom: clamp(3rem, 5vw, 4rem);
width: 100%;
max-width: 700px;
margin-inline: auto;
}
.faq-header h1 {
font-family: var(--serif);
font-size: clamp(3rem, 4vw + 1rem, 4.5rem);
font-style: italic;
font-weight: 400;
color: var(--ink);
margin-bottom: 2rem;
letter-spacing: -0.02em;
}
.faq-search-wrap {
max-width: 500px;
margin-inline: auto;
position: relative;
}
.faq-search {
width: 100%;
background: var(--white);
border: 1px solid rgba(20,32,27,0.05);
border-radius: var(--r-pill);
padding: 1.2rem 1.5rem 1.2rem 3rem;
font-family: var(--sans);
font-size: 0.95rem;
color: var(--ink);
box-shadow: 0 4px 15px rgba(20,32,27,0.03);
transition: box-shadow var(--dur-fast);
}
.faq-search:focus {
outline: none;
box-shadow: 0 8px 25px rgba(20,32,27,0.06), 0 0 0 2px var(--g-100);
}
.faq-search-icon {
position: absolute; left: 1.2rem; top: 50%;
transform: translateY(-50%);
color: var(--ink-50); pointer-events: none;
}
/* 2-column faq-grid for the FAQ page template */
.faq-sec .faq-grid {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 1.5rem;
width: 100%;
max-width: 1000px;
margin-inline: auto;
align-items: start;
}
.faq-card {
background: var(--white);
border-radius: var(--r-xl);
padding: clamp(1.8rem, 3vw, 2.5rem);
border: 1px solid rgba(20,32,27,0.03);
box-shadow: 0 8px 30px rgba(20,32,27,0.04);
display: flex;
flex-direction: column;
height: 100%;
}
.faq-card-header {
display: flex; align-items: center; gap: 0.8rem;
margin-bottom: 1.5rem;
padding-bottom: 1rem;
border-bottom: 1px solid var(--line);
}
.faq-card-header svg { color: var(--g); flex-shrink: 0; }
.faq-card-header h3 {
font-family: var(--serif); font-size: 1.25rem;
color: var(--ink); font-weight: 400; margin: 0;
}
.faq-card .faq-list {
display: flex; flex-direction: column; gap: 0;
margin-bottom: 0; flex: 1;
}
.faq-card .faq-item {
border-bottom: 1px solid rgba(20,32,27,0.05);
padding: 0;
}
.faq-card .faq-item:last-child { border-bottom: none; }
.faq-card .faq-q {
font-family: var(--sans); font-size: 0.9rem; font-weight: 500;
color: var(--ink-70); cursor: pointer;
display: flex; justify-content: space-between; align-items: flex-start;
gap: 0.8rem; width: 100%; background: none; border: none;
padding: 0.9rem 0; line-height: 1.4; text-align: left;
transition: color var(--dur-fast);
}
.faq-card .faq-q:hover { color: var(--ink); }
.faq-card .faq-q::after {
content: '+'; font-size: 1.1rem; font-weight: 300;
color: var(--ink-50); flex-shrink: 0;
transition: transform 0.3s ease;
}
.faq-card .faq-q.active { color: var(--g); }
.faq-card .faq-q.active::after { content: '−'; color: var(--g); }
.faq-card .faq-a {
display: none; font-size: 0.85rem; color: var(--ink-50);
line-height: 1.6; padding: 0 0 0.8rem 0;
}
.faq-card .faq-a.open { display: block; animation: fadeIn 0.3s ease; }
.faq-view-all {
margin-top: 1rem; font-size: 0.85rem; color: var(--ink-50);
text-decoration: underline; text-underline-offset: 3px;
transition: color var(--dur-fast); align-self: flex-start;
}
.faq-view-all:hover { color: var(--ink); }
@media (max-width: 768px) {
.faq-sec .faq-grid { grid-template-columns: 1fr !important; }
}
/* Scroll-to-top button */
.scroll-top-btn {
position: fixed; bottom: 2rem; right: 2rem;
width: 50px; height: 50px;
background: var(--g); color: var(--white);
border: none; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
box-shadow: 0 4px 15px rgba(0,171,104,0.3);
cursor: pointer; z-index: 999;
opacity: 0; visibility: hidden;
transform: translateY(20px);
transition: all 0.3s var(--ease);
}
.scroll-top-btn.visible { opacity: 1; visibility: visible; transform: none; }
.scroll-top-btn:hover { background: var(--g-deep); transform: translateY(-3px); }
/* ── Global Button Reset — alle Buttons rémigén-grün ───────── */
.btn, a.btn, button.btn,
.wp-block-button__link,
input[type="submit"],
button[type="submit"] {
background: var(--g) !important;
color: var(--white) !important;
border-color: var(--g) !important;
}
.btn:hover, a.btn:hover, button.btn:hover,
.wp-block-button__link:hover,
input[type="submit"]:hover,
button[type="submit"]:hover {
background: var(--g-deep) !important;
color: var(--white) !important;
border-color: var(--g-deep) !important;
}
/* Accordion content reveal */
.kanva-box.active .accordion-content {
max-height: 600px;
opacity: 1;
padding-bottom: 0.5rem;
}
.accordion-inner {
padding: 0 0 1.5rem;
color: var(--ink-70);
line-height: 1.6;
font-size: 0.95rem;
font-family: var(--sans);
}
/* Product actions WooCommerce override */
.product-actions-wrap .cart { display: flex; gap: 1rem; align-items: center; margin: 0; }
.product-actions-wrap .quantity { background: #EFEFE9; border-radius: 50px; overflow: hidden; height: 54px; display: flex; align-items: center; }
.product-actions-wrap .qty { text-align: center; border: none; background: transparent; width: 45px; font-size: 1rem; font-family: var(--sans); color: var(--ink); }
.product-actions-wrap .single_add_to_cart_button {
flex: 1; height: 54px; border-radius: 50px !important;
font-size: 1.05rem !important; font-family: var(--sans) !important;
background: var(--g) !important; color: var(--white) !important;
border: none !important; cursor: pointer;
transition: background 0.3s;
}
.product-actions-wrap .single_add_to_cart_button:hover { background: var(--g-deep) !important; }
/* Product rating stars */
.product-rating { display: flex; align-items: center; gap: 4px; font-size: 1.1rem; }
/* Shop archive product grid */
.shop-product-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2rem;
}
@media (max-width: 900px) {
.shop-product-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
.shop-product-grid { grid-template-columns: 1fr; }
}