/* Fonts loaded via in — no @import needed */
/* ============================================================
COLOR TOKENS
============================================================ */
:root {
/* Loaf & Link Brand */
--ll-bg: #0C0C0C;
--ll-bg2: #141414;
--ll-accent: #E8D5A3;
--ll-accent2: #C4A96B;
--ll-text: #F0EDE6;
--ll-text-dim: #8A8680;
--ll-border: rgba(232, 213, 163, 0.12);
/* Showcase Zone */
--sd-bg: #0A0604;
--sd-bg2: #130C08;
--sd-bg3: #1A1008;
--sd-gold: #C9A227;
--sd-gold-lt: #E8C84A;
--sd-red: #8B1A1A;
--sd-cream: #F5EDD6;
--sd-cream-dim: #BFB49A;
}
/* ============================================================
SPACING SCALE
============================================================ */
:root {
--sp-1: 4px;
--sp-2: 8px;
--sp-3: 12px;
--sp-4: 16px;
--sp-6: 24px;
--sp-8: 32px;
--sp-12: 48px;
--sp-16: 64px;
--sp-24: 96px;
--sp-32: 128px;
}
/* ============================================================
RESET
============================================================ */
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
/* ============================================================
ROOT / SCROLL
============================================================ */
html {
scroll-behavior: smooth;
font-size: 18px;
}
body {
font-family: 'Cormorant Garamond', Georgia, serif;
font-weight: 400;
line-height: 1.6;
background-color: var(--ll-bg);
color: var(--ll-text);
overflow-x: hidden;
}
/* ============================================================
TYPOGRAPHY — LOAF & LINK ZONE
============================================================ */
.ll-section h1,
.ll-section h2,
.ll-section h3 {
font-family: 'Bebas Neue', sans-serif;
letter-spacing: 0.04em;
line-height: 1.05;
color: var(--ll-text);
}
.ll-section h1 { font-size: clamp(3rem, 8vw, 7rem); }
.ll-section h2 { font-size: clamp(2rem, 5vw, 4rem); }
.ll-section h3 { font-size: clamp(1.4rem, 3vw, 2.4rem); }
.ll-section h4,
.ll-section h5,
.ll-section h6 {
font-family: 'Cormorant Garamond', Georgia, serif;
font-weight: 600;
color: var(--ll-accent);
line-height: 1.2;
}
.ll-section p {
font-weight: 300;
color: var(--ll-text-dim);
max-width: 64ch;
}
.ll-section a {
color: var(--ll-accent);
text-decoration: none;
transition: color 0.2s ease;
}
.ll-section a:hover {
color: var(--ll-accent2);
}
/* DM Mono — labels, tags, metadata */
.ll-label {
font-family: 'DM Mono', monospace;
font-size: 0.78rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--ll-accent2);
}
/* ============================================================
TYPOGRAPHY — SCHWEINE DIETER ZONE
============================================================ */
.sd-section h1,
.sd-section h2,
.sd-section h3,
.sd-section h4,
.sd-section h5,
.sd-section h6 {
font-family: 'Playfair Display', Georgia, serif;
line-height: 1.15;
color: var(--sd-cream);
}
.sd-section h1 { font-size: clamp(2.4rem, 6vw, 4.5rem); font-weight: 900; }
.sd-section h2 { font-size: clamp(1.8rem, 4vw, 3rem); font-weight: 700; }
.sd-section h3 { font-size: clamp(1.3rem, 3vw, 2rem); font-weight: 700; }
.sd-section h4 { font-size: 1.25rem; font-weight: 400; font-style: italic; }
.sd-section p {
font-weight: 300;
color: var(--sd-cream-dim);
max-width: 66ch;
}
.sd-section a {
color: var(--sd-gold);
text-decoration: none;
transition: color 0.2s ease;
}
.sd-section a:hover {
color: var(--sd-gold-lt);
}
/* Bebas Neue eyebrow in showcase */
.sd-label {
font-family: 'Bebas Neue', sans-serif;
font-size: 0.85rem;
letter-spacing: 0.18em;
color: var(--sd-gold);
text-transform: uppercase;
}
/* ============================================================
SECTION SHELLS
============================================================ */
.ll-section {
padding: 7rem 6vw;
background: var(--ll-bg);
}
.sd-section {
padding: 7rem 6vw;
background: var(--sd-bg);
}
/* ============================================================
CINEMATIC TRANSITION BAND
The gradient bridge between the two worlds.
Place a between .ll-section and
the first .sd-section.
============================================================ */
.world-seam {
height: 180px;
background: linear-gradient(
to bottom,
var(--ll-bg) 0%,
#0D0905 55%,
var(--sd-bg) 100%
);
pointer-events: none;
}
/* ============================================================
ANIMATIONS
============================================================ */
@keyframes hero-fadeup {
from {
opacity: 0;
transform: translateY(24px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes bounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(8px); }
}
/* ============================================================
FIXED NAV
============================================================ */
.ll-nav {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1000;
display: flex;
align-items: center;
justify-content: space-between;
padding: 1.2rem 6vw;
background: rgba(12, 12, 12, 0.85);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border-bottom: 1px solid var(--ll-border);
}
/* right-side cluster: nav links + lang switcher + CTA */
.ll-nav,
.ll-nav * {
pointer-events: auto;
}
.ll-nav__right {
display: flex;
align-items: center;
gap: 1.5rem;
margin-left: 2.5rem;
}
.ll-nav__links {
display: flex;
align-items: center;
gap: 1.5rem;
}
.ll-nav__links a {
font-family: 'DM Mono', monospace;
font-size: 0.78rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--ll-text-dim);
text-decoration: none;
transition: color 0.2s ease;
white-space: nowrap;
}
.ll-nav__links a:hover {
color: var(--ll-accent);
}
/* ============================================================
LANGUAGE SWITCHER
============================================================ */
.lang-switcher {
display: flex;
align-items: center;
gap: 4px;
}
.lang-btn {
font-family: 'DM Mono', monospace;
font-size: 0.78rem;
letter-spacing: 0.15em;
padding: 5px 10px;
border-radius: 2px;
border: 1px solid var(--ll-border);
background: transparent;
color: var(--ll-text-dim);
cursor: pointer;
transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
line-height: 1;
}
.lang-btn:hover:not(.active) {
border-color: var(--ll-accent);
color: var(--ll-accent);
}
.lang-btn.active {
background: var(--ll-accent);
color: var(--ll-bg);
border-color: var(--ll-accent);
}
.ll-nav__monogram {
font-family: 'DM Mono', monospace;
font-size: 0.9rem;
color: var(--ll-accent);
letter-spacing: 0.08em;
}
.ll-nav__wordmark {
font-family: 'Bebas Neue', sans-serif;
font-size: 1rem;
letter-spacing: 0.3em;
color: var(--ll-text-dim);
position: absolute;
left: 50%;
transform: translateX(-50%);
}
.ll-nav__cta {
font-family: 'DM Mono', monospace;
font-size: 0.78rem;
color: var(--ll-accent);
text-decoration: none;
letter-spacing: 0.06em;
transition: color 0.2s ease;
}
.ll-nav__cta:hover {
color: var(--ll-accent2);
}
/* ============================================================
HERO
============================================================ */
.ll-hero {
position: relative;
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
background-color: #0C0C0C;
background-image:
linear-gradient(rgba(232, 213, 163, 0.04) 1px, transparent 1px),
linear-gradient(90deg, rgba(232, 213, 163, 0.04) 1px, transparent 1px);
background-size: 60px 60px;
overflow: hidden;
}
/* ── Hero video background ── */
.hero-video-wrap {
position: absolute;
inset: 0;
z-index: 0;
}
.hero-video {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.hero-overlay {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.60);
}
.ll-hero > *:not(.hero-video-wrap) {
position: relative;
z-index: 1;
}
.ll-hero__deco {
position: absolute;
top: 50%;
right: 4vw;
transform: translateY(-50%);
font-family: 'Bebas Neue', sans-serif;
font-size: 20vw;
line-height: 1;
color: rgba(232, 213, 163, 0.04);
pointer-events: none;
user-select: none;
}
.ll-hero__content {
max-width: 800px;
padding: 0 6vw;
padding-top: 6rem; /* clear fixed nav */
}
/* staggered load animation */
.hero-anim {
opacity: 0;
animation: hero-fadeup 0.8s ease forwards;
animation-delay: var(--delay, 0s);
}
.ll-hero__tag {
font-family: 'DM Mono', monospace;
font-size: 0.78rem;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--ll-accent);
margin-bottom: 1.5rem;
}
.ll-hero__h1 {
font-family: 'Bebas Neue', sans-serif;
font-size: clamp(4rem, 10vw, 9rem);
line-height: 0.95;
letter-spacing: 0.02em;
color: var(--ll-text);
}
.ll-hero__h1 span {
color: var(--ll-accent);
}
.ll-hero__sub {
font-family: 'Cormorant Garamond', Georgia, serif;
font-size: 1.2rem;
font-weight: 300;
color: var(--ll-text-dim);
max-width: 480px;
margin-top: 1.5rem;
}
.ll-hero__stats {
display: flex;
flex-wrap: wrap;
gap: 3rem;
margin-top: 3rem;
}
.ll-stat {
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.ll-stat__num {
font-family: 'Bebas Neue', sans-serif;
font-size: 3rem;
line-height: 1;
color: var(--ll-accent);
}
.ll-stat__label {
font-family: 'DM Mono', monospace;
font-size: 0.78rem;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--ll-text-dim);
}
.ll-hero__btn {
display: inline-block;
margin-top: 2.5rem;
padding: 14px 32px;
font-family: 'Cormorant Garamond', Georgia, serif;
font-size: 1rem;
font-weight: 400;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--ll-accent);
text-decoration: none;
border: 1px solid var(--ll-accent);
background: transparent;
transition: background 0.25s ease, color 0.25s ease;
}
.ll-hero__btn:hover {
background: var(--ll-accent);
color: var(--ll-bg);
}
/* hero bottom scroll prompt */
.ll-hero__footer {
position: absolute;
bottom: 0;
left: 0;
right: 0;
text-align: center;
padding-bottom: 2rem;
}
.ll-hero__rule {
width: 100%;
height: 1px;
background: var(--ll-border);
margin-bottom: 1.25rem;
}
.ll-hero__scroll-text {
font-family: 'DM Mono', monospace;
font-size: 0.78rem;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--ll-text-dim);
display: flex;
align-items: center;
justify-content: center;
gap: 0.75rem;
max-width: none;
}
.ll-bounce {
display: inline-block;
animation: bounce 1.8s ease-in-out infinite;
}
/* ============================================================
SHOWCASE BRIDGE
============================================================ */
.showcase-bridge {
min-height: 160px;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(to bottom, var(--ll-bg), var(--sd-bg));
padding: 0 6vw;
}
.showcase-bridge__inner {
width: 100%;
max-width: 900px;
}
.showcase-bridge__lines {
display: flex;
align-items: center;
gap: 2rem;
}
.showcase-bridge__line {
flex: 1;
height: 1px;
background: var(--sd-gold);
opacity: 0.3;
}
.showcase-bridge__text {
text-align: center;
flex-shrink: 0;
}
.showcase-bridge__tag {
font-family: 'DM Mono', monospace;
font-size: 0.78rem;
letter-spacing: 0.25em;
color: var(--ll-accent);
text-transform: uppercase;
max-width: none;
}
.showcase-bridge__name {
font-family: 'Playfair Display', Georgia, serif;
font-size: 2.5rem;
font-style: italic;
font-weight: 400;
color: var(--sd-gold);
margin-top: 0.4rem;
line-height: 1.15;
max-width: none;
}
.showcase-bridge__sub {
font-family: 'Cormorant Garamond', Georgia, serif;
font-size: 0.85rem;
font-weight: 400;
letter-spacing: 0.2em;
color: var(--sd-cream-dim);
margin-top: 0.3rem;
max-width: none;
}
/* ============================================================
SHOWCASE INTRO — SD SECTION
============================================================ */
.sd-intro {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4rem;
align-items: center;
}
.sd-intro__eyebrow {
font-family: 'DM Mono', monospace;
font-size: 0.78rem;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--sd-gold);
margin-bottom: 1.1rem;
max-width: none;
}
.sd-intro__h2 {
font-family: 'Playfair Display', Georgia, serif;
font-size: clamp(2.2rem, 4vw, 3.8rem);
font-weight: 700;
line-height: 1.1;
color: var(--sd-cream);
}
.sd-intro__h2 em {
font-style: italic;
color: var(--sd-gold);
}
.sd-intro__body {
font-family: 'Cormorant Garamond', Georgia, serif;
font-size: 1.05rem;
font-weight: 300;
color: var(--sd-cream-dim);
max-width: 440px;
margin-top: 1.2rem;
}
.sd-intro__btns {
display: flex;
flex-wrap: wrap;
gap: 1rem;
margin-top: 2rem;
}
.sd-btn {
display: inline-block;
padding: 14px 32px;
font-family: 'Cormorant Garamond', Georgia, serif;
font-size: 1rem;
font-weight: 400;
letter-spacing: 0.12em;
text-transform: uppercase;
text-decoration: none;
border-radius: 2px;
transition: opacity 0.2s ease, background 0.2s ease;
}
.sd-btn--gold,
.sd-section .sd-btn--gold,
.sd-section a.sd-btn--gold {
background: var(--sd-gold);
color: #000000;
border: 1px solid var(--sd-gold);
}
.sd-btn--gold:hover {
opacity: 0.85;
}
.sd-btn--fb {
background: transparent;
color: #1877F2;
border: 1px solid rgba(24, 119, 242, 0.4);
}
.sd-btn--fb:hover {
background: rgba(24, 119, 242, 0.08);
}
/* trust cards grid */
.sd-cards {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
}
.sd-card {
background: var(--sd-bg2);
border: 1px solid rgba(201, 162, 39, 0.12);
border-radius: 3px;
padding: 1.4rem;
display: flex;
flex-direction: column;
gap: 0.35rem;
}
.sd-card__num {
font-family: 'Bebas Neue', sans-serif;
font-size: 2.2rem;
line-height: 1;
color: var(--sd-gold);
}
.sd-card__label {
font-family: 'Cormorant Garamond', Georgia, serif;
font-size: 0.82rem;
font-weight: 400;
letter-spacing: 0.12em;
color: var(--sd-cream-dim);
}
/* reveal stagger for intro columns */
.sd-intro .reveal {
transition-delay: var(--delay, 0s);
}
/* ============================================================
PRODUCTS SECTION
============================================================ */
.sd-products {
padding-bottom: 0;
}
.sd-products__header {
margin-bottom: 2.5rem;
}
.sd-products__h2 {
font-family: 'Playfair Display', Georgia, serif;
font-size: clamp(1.8rem, 3.5vw, 2.8rem);
font-weight: 700;
color: var(--sd-cream);
margin-top: 0.6rem;
line-height: 1.15;
}
.product-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
gap: 3px;
}
.product-card {
background: var(--sd-bg2);
overflow: hidden;
cursor: pointer;
text-decoration: none;
display: flex;
flex-direction: column;
transition: transform 0.3s ease, z-index 0.3s ease;
position: relative;
}
.product-card:hover {
transform: translateY(-5px);
z-index: 2;
}
.product-card__img-wrap {
position: relative;
aspect-ratio: 4 / 3;
overflow: hidden;
}
.product-card__img-wrap img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
filter: saturate(0.8) brightness(0.75);
transition: filter 0.4s ease, transform 0.4s ease;
}
.product-card:hover .product-card__img-wrap img {
filter: saturate(1.1) brightness(0.88);
transform: scale(1.05);
}
.product-card__badge {
position: absolute;
top: 0;
left: 0;
z-index: 1;
background: var(--sd-red);
color: var(--sd-cream);
font-family: 'DM Mono', monospace;
font-size: 0.78rem;
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 4px 10px;
}
.product-card__info {
padding: 1.3rem 1.5rem;
border-top: 1px solid rgba(201, 162, 39, 0.15);
display: flex;
flex-direction: column;
flex: 1;
}
.product-card__name {
font-family: 'Playfair Display', serif;
font-size: 1.15rem;
font-weight: 700;
color: var(--sd-cream);
max-width: none;
}
.product-card__desc {
font-family: 'Cormorant Garamond', serif;
font-size: 0.88rem;
font-weight: 300;
color: var(--sd-cream-dim);
line-height: 1.55;
margin: 4px 0 1rem;
max-width: none;
flex: 1;
}
.product-card__footer {
display: flex;
align-items: center;
justify-content: space-between;
}
.product-card__price {
display: flex;
align-items: baseline;
gap: 0.3rem;
}
.product-card__price-num {
font-family: 'Bebas Neue', sans-serif;
font-size: 1.55rem;
line-height: 1;
color: var(--sd-gold);
}
.product-card__price-unit {
font-family: 'Cormorant Garamond', Georgia, serif;
font-size: 0.78rem;
font-weight: 400;
color: var(--sd-cream-dim);
}
.product-card__btn {
font-family: 'DM Mono', monospace;
font-size: 0.78rem;
letter-spacing: 0.06em;
color: var(--sd-gold);
border: 1px solid rgba(201, 162, 39, 0.4);
padding: 7px 14px;
transition: background 0.2s ease;
white-space: nowrap;
}
.product-card:hover .product-card__btn {
background: rgba(201, 162, 39, 0.12);
}
/* ============================================================
DELIVERY SECTION
============================================================ */
.sd-delivery {
display: grid;
grid-template-columns: 1fr 1fr;
min-height: 440px;
background: var(--sd-bg2);
}
.sd-delivery__img {
position: relative;
overflow: hidden;
background: var(--sd-bg2);
}
/* bg image with desaturation — isolated on ::before so ::after and
child elements are not affected by the filter */
.sd-delivery__img::before {
content: '';
position: absolute;
inset: 0;
background-image: url('../images/versand-bg.png');
background-size: cover;
background-position: center;
filter: saturate(0.92) brightness(0.9);
}
/* right-edge fade into --sd-bg2 — unaffected by the image filter above */
.sd-delivery__img::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 58%, rgba(0, 0, 0, 0.5) 80%, var(--sd-bg2) 100%);
}
.sd-delivery__deco {
position: absolute;
bottom: -0.15em;
left: -0.05em;
font-family: 'Bebas Neue', sans-serif;
font-size: 7rem;
line-height: 1;
color: rgba(201, 162, 39, 0.07);
pointer-events: none;
user-select: none;
z-index: 1;
/* undo parent filter so deco opacity reads as intended */
filter: none;
}
.sd-delivery__content {
padding: 4rem 5vw;
display: flex;
flex-direction: column;
justify-content: center;
}
.sd-delivery__h2 {
font-family: 'Playfair Display', Georgia, serif;
font-size: clamp(1.6rem, 3vw, 2.6rem);
font-weight: 700;
color: var(--sd-cream);
line-height: 1.15;
margin-top: 0.7rem;
}
.sd-delivery__cards {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
margin-top: 1.5rem;
}
.sd-dcard {
background: var(--sd-bg);
border: 1px solid rgba(201, 162, 39, 0.1);
border-radius: 3px;
padding: 1.2rem;
display: flex;
gap: 0.9rem;
align-items: flex-start;
}
.sd-dcard__icon {
width: 32px;
height: 32px;
border-radius: 50%;
background: var(--sd-red);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.sd-dcard__title {
font-family: 'Playfair Display', Georgia, serif;
font-size: 1rem;
font-weight: 400;
color: var(--sd-cream);
line-height: 1.2;
}
.sd-dcard__desc {
font-family: 'Cormorant Garamond', Georgia, serif;
font-size: 0.82rem;
font-weight: 300;
color: var(--sd-cream-dim);
margin-top: 0.2rem;
max-width: none;
}
.sd-dcard__price {
font-family: 'Bebas Neue', sans-serif;
font-size: 1.35rem;
color: var(--sd-gold);
margin-top: 0.4rem;
line-height: 1;
}
.sd-minorder {
display: flex;
align-items: flex-start;
gap: 0.8rem;
margin-top: 1.5rem;
background: linear-gradient(135deg, #3a0a0a 0%, #200606 100%);
border-radius: 3px;
padding: 1.1rem 1.4rem;
}
.sd-minorder__title {
display: block;
font-family: 'Bebas Neue', sans-serif;
font-size: 1.2rem;
letter-spacing: 0.04em;
color: var(--sd-gold);
line-height: 1.2;
}
.sd-minorder__sub {
font-family: 'Cormorant Garamond', Georgia, serif;
font-size: 0.8rem;
font-weight: 300;
color: var(--sd-cream-dim);
margin-top: 0.2rem;
max-width: none;
}
/* ============================================================
SOCIAL / KONTAKT
============================================================ */
.sd-kontakt {
text-align: center;
}
.sd-kontakt__h2 {
font-family: 'Playfair Display', Georgia, serif;
font-size: clamp(1.8rem, 3.5vw, 2.8rem);
font-weight: 700;
color: var(--sd-cream);
line-height: 1.15;
margin-top: 0.7rem;
}
.sd-kontakt__sub {
font-family: 'Cormorant Garamond', Georgia, serif;
font-size: 1.05rem;
font-weight: 300;
color: var(--sd-cream-dim);
margin: 0.9rem auto 0;
max-width: 44ch;
}
.sd-kontakt__btns {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 1rem;
margin-top: 2rem;
}
.sd-social-btn {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 12px 26px;
font-family: 'DM Mono', monospace;
font-size: 0.78rem;
letter-spacing: 0.15em;
text-decoration: none;
border-radius: 2px;
transition: background 0.2s ease, border-color 0.2s ease;
}
.sd-social-btn--fb {
color: #1877F2;
border: 1px solid rgba(24, 119, 242, 0.35);
background: transparent;
}
.sd-social-btn--fb:hover {
border-color: #1877F2;
background: rgba(24, 119, 242, 0.08);
}
.sd-social-btn--neutral {
color: var(--sd-cream);
border: 1px solid rgba(201, 162, 39, 0.35);
background: transparent;
}
.sd-social-btn--neutral:hover {
background: rgba(201, 162, 39, 0.07);
}
/* ============================================================
BACK-TO-BRAND CTA
============================================================ */
.ll-backcta {
background: var(--ll-bg);
padding: 5rem 6vw;
text-align: center;
}
.ll-backcta__rule {
width: 100%;
height: 1px;
background: var(--ll-border);
margin-bottom: 3rem;
}
.ll-backcta__label {
font-family: 'DM Mono', monospace;
font-size: 0.78rem;
letter-spacing: 0.25em;
text-transform: uppercase;
color: var(--ll-accent2);
margin-bottom: 1rem;
max-width: none;
}
.ll-backcta__h3 {
font-family: 'Bebas Neue', sans-serif;
font-size: 3rem;
letter-spacing: 0.04em;
color: var(--ll-text);
line-height: 1;
}
.ll-backcta__body {
font-family: 'Cormorant Garamond', Georgia, serif;
font-size: 1.05rem;
font-weight: 300;
color: var(--ll-text-dim);
margin: 1rem auto 0;
max-width: 52ch;
}
.ll-backcta__btn {
display: inline-block;
margin-top: 2rem;
padding: 14px 36px;
font-family: 'Cormorant Garamond', Georgia, serif;
font-size: 1rem;
font-weight: 400;
letter-spacing: 0.15em;
text-transform: uppercase;
text-decoration: none;
color: var(--ll-accent);
border: 1px solid var(--ll-accent);
background: transparent;
border-radius: 2px;
transition: background 0.25s ease, color 0.25s ease;
}
.ll-backcta__btn:hover {
background: var(--ll-accent);
color: var(--ll-bg);
}
/* ============================================================
FOOTER
============================================================ */
.ll-footer {
background: #080808;
border-top: 1px solid var(--ll-border);
}
.ll-footer__grid {
display: grid;
grid-template-columns: 2fr 1fr 1fr;
gap: 3rem;
padding: 2.5rem 6vw;
}
.ll-footer__brand {
font-family: 'Bebas Neue', sans-serif;
font-size: 1.4rem;
letter-spacing: 0.08em;
color: var(--ll-accent);
max-width: none;
margin-bottom: 0.5rem;
}
.ll-footer__tagline {
font-family: 'Cormorant Garamond', Georgia, serif;
font-size: 0.85rem;
font-weight: 300;
color: var(--ll-text-dim);
max-width: 32ch;
}
.ll-footer__heading {
font-family: 'DM Mono', monospace;
font-size: 0.78rem;
letter-spacing: 0.18em;
color: var(--ll-accent);
margin-bottom: 0.75rem;
font-weight: 400;
}
.ll-footer__link {
font-family: 'Cormorant Garamond', Georgia, serif;
font-size: 0.9rem;
font-weight: 300;
color: var(--ll-text-dim);
text-decoration: none;
transition: color 0.2s ease;
display: block;
}
.ll-footer__link:hover {
color: var(--ll-accent);
}
.ll-footer__bar {
background: #050505;
padding: 0.7rem 6vw;
display: flex;
justify-content: space-between;
align-items: center;
font-family: 'DM Mono', monospace;
font-size: 0.78rem;
letter-spacing: 0.06em;
color: var(--ll-text-dim);
}
/* ============================================================
DEMO BADGE
============================================================ */
@keyframes badge-pulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(232, 213, 163, 0.4); }
50% { box-shadow: 0 0 0 8px rgba(232, 213, 163, 0); }
}
.demo-badge {
position: fixed;
bottom: 28px;
right: 28px;
z-index: 999;
background: var(--ll-accent);
color: var(--ll-bg);
font-family: 'DM Mono', monospace;
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.12em;
padding: 9px 18px;
border-radius: 30px;
animation: badge-pulse 2.5s ease-in-out infinite;
user-select: none;
pointer-events: none;
}
/* ============================================================
NAV SCROLLED STATE (set via JS)
============================================================ */
.ll-nav.scrolled {
background: rgba(12, 12, 12, 0.98);
box-shadow: 0 2px 30px rgba(0, 0, 0, 0.5);
}
/* ============================================================
MOBILE — max-width 768px
============================================================ */
@media (max-width: 768px) {
.showcase-bridge__lines {
flex-direction: column;
gap: 1rem;
}
.showcase-bridge__line {
width: 60px;
flex: none;
height: 1px;
}
.sd-intro {
grid-template-columns: 1fr;
}
.sd-cards {
grid-template-columns: 1fr 1fr;
}
.sd-delivery {
grid-template-columns: 1fr;
}
.sd-delivery__img {
display: none;
}
.sd-delivery__cards {
grid-template-columns: 1fr 1fr;
}
/* ── Nav bar ── */
.ll-nav {
padding: 1rem 4vw;
}
/* Absolute-centred title collides with right cluster on small screens */
.ll-nav__wordmark {
display: none;
}
.ll-nav__links {
display: none;
}
/* "See Live Demo ↓" / "← Zurück" — hidden on mobile, browser back is enough */
.ll-nav__cta {
display: none;
}
/* Tighten right cluster: only lang switcher + cart icon remain */
.ll-nav__right {
gap: 0.5rem;
}
/* Compact lang buttons so all four fit in ≈120px */
.lang-switcher {
gap: 3px;
flex-wrap: nowrap;
}
.lang-btn {
padding: 5px 7px;
font-size: 0.78rem;
letter-spacing: 0.05em;
}
.ll-footer__grid {
grid-template-columns: 1fr;
gap: 2rem;
}
.ll-footer__bar {
flex-direction: column;
gap: 0.4rem;
text-align: center;
}
.ll-backcta {
padding: 3rem 4vw;
}
.demo-badge {
bottom: 16px;
right: 16px;
}
}
/* ============================================================
PRODUCT MEDIA — VIDEO HOVER EFFECT
============================================================ */
.product-media {
position: relative;
width: 100%;
aspect-ratio: 4 / 3;
overflow: hidden;
background: var(--sd-bg2);
}
/* badge sits above both poster and video */
.product-media .product-card__badge {
z-index: 3;
}
.product-poster {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
filter: saturate(0.8) brightness(0.75);
transition: opacity 0.4s ease, filter 0.4s ease;
z-index: 2;
}
.product-video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0;
transition: opacity 0.4s ease;
z-index: 1;
filter: saturate(1) brightness(0.88);
}
.product-card:hover .product-poster {
opacity: 0;
filter: saturate(1) brightness(0.88);
}
.product-card:hover .product-video {
opacity: 1;
}
@media (max-width: 768px) {
.product-video {
display: none;
}
.product-poster {
position: relative;
opacity: 1 !important;
}
}
/* ============================================================
BREAD DIVIDER
============================================================ */
.shop-cta-wrap {
text-align: center;
}
.shop-cta-link {
display: inline-block;
border: 1px solid #C9A84C;
color: #C9A84C;
padding: 12px 32px;
font-family: 'Bebas Neue', sans-serif;
letter-spacing: 2px;
text-decoration: none;
margin: 40px auto;
transition: all 0.3s ease;
}
.shop-cta-link:hover {
background: #C9A84C;
color: #000;
}
.bread-divider {
display: flex;
align-items: center;
gap: 1.5rem;
margin: 5rem 0 3rem;
}
.bread-divider-line {
flex: 1;
height: 1px;
background: linear-gradient(
to right,
transparent,
rgba(201,162,39,0.3),
transparent
);
}
.bread-divider-text {
display: flex;
align-items: center;
gap: 0.8rem;
font-family: 'Playfair Display', serif;
font-size: 1.3rem;
font-style: italic;
color: var(--sd-gold);
white-space: nowrap;
}
.bread-icon {
font-size: 1rem;
opacity: 0.7;
}
/* ── BREAD EYEBROW & TITLE ── */
.bread-eyebrow {
font-family: 'DM Mono', monospace;
font-size: 0.78rem;
letter-spacing: 0.35em;
text-transform: uppercase;
color: var(--sd-gold);
margin-bottom: 0.8rem;
}
.bread-title {
font-family: 'Playfair Display', serif;
font-size: clamp(1.8rem, 3.5vw, 3rem);
font-weight: 700;
color: var(--sd-cream);
margin-bottom: 0.8rem;
line-height: 1.1;
}
.bread-desc {
font-family: 'Cormorant Garamond', serif;
font-size: 1.05rem;
color: var(--sd-cream-dim);
font-weight: 300;
max-width: 540px;
margin-bottom: 3rem;
}
/* ── BREAD GRID ── */
.bread-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 2px;
margin-bottom: 1rem;
}
/* ── BREAD CARD ── */
.bread-card {
background: var(--sd-bg3, #1a1008);
cursor: pointer;
transition: transform 0.3s ease;
border-bottom: 2px solid transparent;
display: flex;
flex-direction: column;
height: auto !important;
overflow: visible !important;
}
.bread-card:hover {
transform: translateY(-4px);
border-bottom-color: var(--sd-gold);
}
.bread-media {
position: relative;
width: 100%;
aspect-ratio: 16 / 10;
overflow: hidden;
}
.bread-img {
width: 100%;
height: 100%;
object-fit: cover;
filter: saturate(0.75) brightness(0.72) sepia(0.15);
transition: filter 0.4s ease, transform 0.4s ease;
display: block;
}
.bread-card:hover .bread-img {
filter: saturate(1) brightness(0.88) sepia(0);
transform: scale(1.04);
}
.bread-overlay {
position: absolute;
inset: 0;
background: linear-gradient(
to top,
rgba(10,6,4,0.6) 0%,
transparent 50%
);
}
.bread-tag {
position: absolute;
top: 12px;
right: 12px;
background: rgba(201,162,39,0.15);
border: 1px solid rgba(201,162,39,0.4);
color: var(--sd-gold);
font-family: 'DM Mono', monospace;
font-size: 0.78rem;
letter-spacing: 0.2em;
text-transform: uppercase;
padding: 4px 10px;
border-radius: 2px;
}
.bread-info {
padding: 1.2rem 1.5rem 1.5rem;
border-top: 1px solid rgba(201,162,39,0.1);
display: flex;
flex-direction: column;
flex: 1;
justify-content: space-between;
height: auto !important;
min-height: 0 !important;
max-height: none !important;
overflow: visible !important;
padding-bottom: 20px;
}
.bread-name {
font-family: 'Playfair Display', serif;
font-size: 1.15rem;
font-weight: 700;
color: var(--sd-cream);
margin-bottom: 0.4rem;
}
.bread-desc-card {
font-family: 'Cormorant Garamond', serif;
font-size: 0.88rem;
color: var(--sd-cream-dim);
font-weight: 300;
line-height: 1.55;
}
/* ── BREAD RESPONSIVE ── */
@media (max-width: 768px) {
.bread-divider {
margin: 3rem 0 2rem;
}
.bread-grid {
grid-template-columns: 1fr 1fr;
gap: 2px;
}
}
@media (max-width: 480px) {
.bread-grid {
grid-template-columns: 1fr;
}
}
/* ============================================================
IMAGE / VIDEO FALLBACKS
============================================================ */
/* Hatched placeholder background while image is absent */
.product-img,
.bread-img {
background: var(--sd-bg3);
background-image: repeating-linear-gradient(
45deg,
rgba(201,162,39,0.03) 0px,
rgba(201,162,39,0.03) 1px,
transparent 1px,
transparent 12px
);
}
/* Centred ✦ icon behind the image — visible only when image is missing */
.product-media::before,
.bread-media::before {
content: '✦';
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
font-size: 2rem;
color: rgba(201,162,39,0.15);
z-index: 0;
pointer-events: none;
}
/* Suppress placeholder once real image has loaded */
.product-media.loaded::before,
.bread-media.loaded::before {
display: none;
}
/* "Bild folgt" badge injected by JS on image error */
.coming-soon-badge {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: rgba(10,6,4,0.85);
border: 1px solid rgba(201,162,39,0.25);
color: var(--sd-cream-dim);
font-family: 'DM Mono', monospace;
font-size: 0.78rem;
letter-spacing: 0.25em;
text-transform: uppercase;
padding: 6px 14px;
border-radius: 2px;
white-space: nowrap;
z-index: 3;
pointer-events: none;
}
/* Bread card video hover — same opacity swap as product cards */
.bread-card:hover .product-poster {
opacity: 0;
}
.bread-card:hover .product-video {
opacity: 1;
}
/* Card with missing video — freeze on static poster */
.product-card.no-video .product-poster {
opacity: 1 !important;
}
.product-card.no-video .product-video {
display: none;
}
/* ============================================================
REVEAL UTILITY
============================================================ */
.reveal {
opacity: 0;
transform: translateY(32px);
transition: opacity 0.75s ease, transform 0.75s ease;
}
.reveal.visible {
opacity: 1;
transform: none;
}
/* ============================================================
CART NAV ICON
============================================================ */
.cart-nav-link {
position: relative;
display: flex;
align-items: center;
justify-content: center;
color: var(--ll-text-dim);
text-decoration: none;
padding: 5px;
transition: color 0.2s ease;
}
.cart-nav-link:hover,
.cart-nav-link--active {
color: var(--ll-accent);
}
.cart-nav-count {
position: absolute;
top: -3px;
right: -3px;
min-width: 17px;
height: 17px;
padding: 0 4px;
border-radius: 9px;
background: var(--sd-gold);
color: #000;
font-family: 'DM Mono', monospace;
font-size: 0.78rem;
font-weight: 700;
line-height: 1;
display: none;
align-items: center;
justify-content: center;
}
.cart-nav-count.has-items {
display: flex;
}
/* ============================================================
SHOP HERO
============================================================ */
.shop-hero {
padding-top: 8rem !important;
padding-bottom: 3rem !important;
border-bottom: 1px solid rgba(201, 162, 39, 0.12);
}
.shop-hero__h1 {
font-family: 'Playfair Display', Georgia, serif;
font-size: clamp(2.4rem, 5vw, 3.8rem);
font-weight: 700;
color: var(--sd-cream);
margin-top: 0.5rem;
line-height: 1.1;
}
.shop-hero__sub {
font-family: 'DM Mono', monospace;
font-size: 0.78rem;
letter-spacing: 0.08em;
color: var(--sd-cream-dim);
margin-top: 0.75rem;
opacity: 0.75;
}
/* ============================================================
SHOP BODY — two-column layout
============================================================ */
.sd-section--shop {
padding-top: 3rem !important;
display: grid;
grid-template-columns: 1fr 380px;
gap: 3rem;
align-items: start;
}
/* ── Filter Tabs ── */
.shop-filter-tabs {
display: flex;
gap: 6px;
margin-bottom: 2rem;
flex-wrap: wrap;
}
.filter-tab {
font-family: 'DM Mono', monospace;
font-size: 0.78rem;
letter-spacing: 0.1em;
text-transform: uppercase;
padding: 8px 18px;
background: transparent;
color: var(--sd-cream-dim);
border: 1px solid rgba(201, 162, 39, 0.2);
border-radius: 2px;
cursor: pointer;
transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.filter-tab:hover {
border-color: var(--sd-gold);
color: var(--sd-gold);
}
.filter-tab.active {
background: var(--sd-gold);
color: #000;
border-color: var(--sd-gold);
}
/* ── Shop Product Grid ── */
.shop-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 2px;
}
/* ── Shop Card ── */
.shop-card {
background: var(--sd-bg2);
overflow: hidden;
transition: transform 0.25s ease;
position: relative;
}
.shop-card:hover {
transform: translateY(-3px);
z-index: 2;
}
.shop-card.in-cart {
outline: 1px solid rgba(201, 162, 39, 0.4);
}
@keyframes card-flash {
0% { box-shadow: 0 0 0 4px rgba(201, 162, 39, 0.55); }
100% { box-shadow: none; }
}
.shop-card.flash {
animation: card-flash 0.55s ease forwards;
}
.shop-card__img-wrap {
position: relative;
aspect-ratio: 4 / 3;
overflow: hidden;
background: var(--sd-bg3);
}
.shop-card__img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
filter: saturate(0.8) brightness(0.72);
transition: filter 0.35s ease, transform 0.35s ease;
}
.shop-card:hover .shop-card__img {
filter: saturate(1.05) brightness(0.85);
transform: scale(1.04);
}
.shop-card__qty-badge {
position: absolute;
top: 8px;
left: 8px;
background: var(--sd-gold);
color: #000;
font-family: 'DM Mono', monospace;
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.04em;
padding: 3px 9px;
border-radius: 2px;
z-index: 1;
}
.shop-card__cat {
position: absolute;
bottom: 8px;
right: 8px;
background: rgba(10, 6, 4, 0.78);
color: var(--sd-cream-dim);
font-family: 'DM Mono', monospace;
font-size: 0.78rem;
letter-spacing: 0.1em;
text-transform: uppercase;
padding: 3px 8px;
border-radius: 2px;
z-index: 1;
}
.shop-card__info {
padding: 1rem 1.2rem 1.2rem;
border-top: 1px solid rgba(201, 162, 39, 0.1);
}
.shop-card__name {
font-family: 'Playfair Display', Georgia, serif;
font-size: 0.95rem;
font-weight: 700;
color: var(--sd-cream);
margin-bottom: 0.75rem;
line-height: 1.25;
min-height: 2.5em;
}
.shop-card__footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
}
.shop-card__price {
font-family: 'Bebas Neue', sans-serif;
font-size: 1.5rem;
color: var(--sd-gold);
line-height: 1;
flex-shrink: 0;
}
.btn-add {
flex: 1;
font-family: 'DM Mono', monospace;
font-size: 0.78rem;
letter-spacing: 0.07em;
text-transform: uppercase;
padding: 8px 10px;
background: transparent;
color: var(--sd-gold);
border: 1px solid rgba(201, 162, 39, 0.35);
border-radius: 2px;
cursor: pointer;
transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
text-align: center;
white-space: nowrap;
}
.btn-add:hover {
background: var(--sd-gold);
color: #000;
border-color: var(--sd-gold);
}
.btn-add.added {
background: rgba(201, 162, 39, 0.12);
border-color: rgba(201, 162, 39, 0.45);
color: var(--sd-gold);
}
/* ============================================================
CART PANEL (sticky)
============================================================ */
.cart-panel {
position: sticky;
top: 5.5rem;
max-height: calc(100vh - 7rem);
display: flex;
flex-direction: column;
background: var(--sd-bg2);
border: 1px solid rgba(201, 162, 39, 0.12);
border-radius: 3px;
overflow: hidden;
}
.cart-panel__head {
display: flex;
align-items: baseline;
justify-content: space-between;
padding: 1.3rem 1.5rem 1rem;
border-bottom: 1px solid rgba(201, 162, 39, 0.1);
flex-shrink: 0;
}
.cart-panel__title {
font-family: 'Playfair Display', Georgia, serif;
font-size: 1.15rem;
font-weight: 700;
color: var(--sd-cream);
}
.cart-item-count {
font-family: 'DM Mono', monospace;
font-size: 0.78rem;
letter-spacing: 0.08em;
color: var(--sd-cream-dim);
}
/* ── Empty state ── */
.cart-empty {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.9rem;
padding: 3rem 2rem;
text-align: center;
opacity: 0.55;
}
.cart-empty svg {
color: var(--sd-gold);
flex-shrink: 0;
}
.cart-empty p {
font-family: 'Cormorant Garamond', Georgia, serif;
font-size: 0.95rem;
font-weight: 300;
color: var(--sd-cream-dim);
max-width: none;
line-height: 1.5;
}
.cart-empty__hint {
font-family: 'DM Mono', monospace !important;
font-size: 0.78rem !important;
letter-spacing: 0.08em;
}
/* ── Cart items list ── */
.cart-items {
flex: 1;
min-height: 0; /* required for flex overflow to work */
overflow-y: auto;
overscroll-behavior: contain;
}
.cart-items::-webkit-scrollbar {
width: 3px;
}
.cart-items::-webkit-scrollbar-track {
background: transparent;
}
.cart-items::-webkit-scrollbar-thumb {
background: rgba(201, 162, 39, 0.2);
border-radius: 2px;
}
/* ── Single cart item row ── */
.cart-item {
display: flex;
align-items: center;
gap: 0.7rem;
padding: 0.75rem 1.5rem;
border-bottom: 1px solid rgba(201, 162, 39, 0.06);
transition: background 0.15s ease;
}
.cart-item:hover {
background: rgba(201, 162, 39, 0.03);
}
.cart-item__img {
width: 48px;
height: 44px;
flex-shrink: 0;
border-radius: 2px;
overflow: hidden;
background: var(--sd-bg3);
}
.cart-item__img img {
width: 100%;
height: 100%;
object-fit: cover;
filter: saturate(0.7) brightness(0.78);
display: block;
}
.cart-item__details {
flex: 1;
min-width: 0;
}
.cart-item__name {
font-family: 'Playfair Display', Georgia, serif;
font-size: 0.85rem;
font-weight: 700;
color: var(--sd-cream);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.cart-item__unit {
font-family: 'DM Mono', monospace;
font-size: 0.78rem;
letter-spacing: 0.05em;
color: var(--sd-cream-dim);
margin-top: 3px;
opacity: 0.7;
}
.cart-item__actions {
display: flex;
align-items: center;
gap: 5px;
flex-shrink: 0;
}
.cart-item__controls {
display: flex;
align-items: center;
gap: 2px;
}
.qty-btn {
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
background: transparent;
border: 1px solid rgba(201, 162, 39, 0.22);
color: var(--sd-cream-dim);
font-size: 0.88rem;
line-height: 1;
cursor: pointer;
border-radius: 2px;
transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.qty-btn:hover {
background: rgba(201, 162, 39, 0.15);
color: var(--sd-gold);
border-color: rgba(201, 162, 39, 0.5);
}
.qty-num {
min-width: 20px;
text-align: center;
font-family: 'DM Mono', monospace;
font-size: 0.78rem;
color: var(--sd-cream);
}
.cart-item__price {
font-family: 'Bebas Neue', sans-serif;
font-size: 1rem;
color: var(--sd-gold);
line-height: 1;
min-width: 44px;
text-align: right;
}
.remove-btn {
background: none;
border: none;
color: rgba(191, 180, 154, 0.28);
font-size: 0.78rem;
cursor: pointer;
padding: 3px 4px;
line-height: 1;
transition: color 0.15s ease;
}
.remove-btn:hover {
color: #e57373;
}
/* ── Cart Footer ── */
.cart-footer {
padding: 1.25rem 1.5rem 1.4rem;
border-top: 1px solid rgba(201, 162, 39, 0.1);
flex-shrink: 0;
}
.mindest-warning {
display: none;
align-items: flex-start;
gap: 0.5rem;
background: rgba(139, 26, 26, 0.18);
border: 1px solid rgba(180, 40, 40, 0.35);
border-radius: 2px;
padding: 0.65rem 0.9rem;
margin-bottom: 1rem;
font-family: 'DM Mono', monospace;
font-size: 0.78rem;
letter-spacing: 0.04em;
color: #ef9a9a;
line-height: 1.55;
}
.mindest-warning svg {
flex-shrink: 0;
margin-top: 1px;
color: #ef9a9a;
}
.cart-total-row {
display: flex;
align-items: baseline;
justify-content: space-between;
margin-bottom: 0.2rem;
}
.cart-total-label {
font-family: 'DM Mono', monospace;
font-size: 0.78rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--sd-cream-dim);
}
.cart-total {
font-family: 'Bebas Neue', sans-serif;
font-size: 2.2rem;
line-height: 1;
color: var(--sd-gold);
}
.cart-shipping-note {
font-family: 'DM Mono', monospace;
font-size: 0.78rem;
letter-spacing: 0.06em;
color: var(--sd-cream-dim);
text-align: right;
margin-bottom: 1.1rem;
opacity: 0.55;
max-width: none;
}
.btn-order {
display: block;
width: 100%;
padding: 14px;
font-family: 'Cormorant Garamond', Georgia, serif;
font-size: 1.05rem;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
background: var(--sd-gold);
color: #000;
border: 1px solid var(--sd-gold);
border-radius: 2px;
cursor: pointer;
transition: opacity 0.2s ease;
margin-bottom: 0.65rem;
}
.btn-order:hover:not(:disabled) {
opacity: 0.88;
}
.btn-order:disabled {
opacity: 0.3;
cursor: not-allowed;
}
.btn-clear {
display: block;
width: 100%;
padding: 9px;
font-family: 'DM Mono', monospace;
font-size: 0.78rem;
letter-spacing: 0.1em;
text-transform: uppercase;
background: transparent;
color: var(--sd-cream-dim);
border: 1px solid rgba(201, 162, 39, 0.1);
border-radius: 2px;
cursor: pointer;
transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.btn-clear:hover {
background: rgba(139, 26, 26, 0.12);
color: #ef9a9a;
border-color: rgba(180, 40, 40, 0.3);
}
/* ============================================================
SHOP — RESPONSIVE
============================================================ */
@media (max-width: 960px) {
.sd-section--shop {
grid-template-columns: 1fr;
}
.cart-panel {
position: static;
max-height: none;
order: 2; /* cart below products on tablet */
}
}
@media (max-width: 600px) {
.shop-grid {
grid-template-columns: 1fr;
}
.shop-hero {
padding-top: 6rem !important;
}
}
/* -- FIX: Bread card price + button visibility -- */
div.product-card {
overflow: visible;
}
div.product-card .product-card__btn.add-to-cart {
background: transparent;
border-radius: 2px;
cursor: pointer;
}
/* ── AMBIENT SOUND TOGGLE ── */
.sound-toggle {
position: fixed;
bottom: 28px;
left: 28px;
z-index: 999;
width: 44px;
height: 44px;
border-radius: 50%;
border: 1px solid rgba(201, 162, 39, 0.35);
background: rgba(10, 6, 4, 0.85);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
color: #C9A227;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.3s ease, border-color 0.3s ease, transform 0.2s ease;
padding: 0;
}
.sound-toggle:hover {
background: rgba(201, 162, 39, 0.12);
border-color: rgba(201, 162, 39, 0.6);
transform: scale(1.08);
}
.sound-toggle.playing {
border-color: #C9A227;
box-shadow: 0 0 12px rgba(201, 162, 39, 0.2);
}
.sound-toggle svg {
width: 18px;
height: 18px;
}
@media (max-width: 768px) {
.sound-toggle {
bottom: 16px;
left: 16px;
width: 38px;
height: 38px;
}
.sound-toggle svg {
width: 15px;
height: 15px;
}
}
.sound-toggle {
animation: badge-pulse 2.5s ease-in-out infinite;
}
.sound-toggle.playing {
animation: badge-pulse 2.5s ease-in-out infinite;
box-shadow: 0 0 12px rgba(201, 162, 39, 0.3);
}
/* ── COOKIE BANNER ── */
.ll-cookie-banner {
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 1000;
background: rgba(10, 6, 4, 0.95);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border-top: 1px solid rgba(201, 162, 39, 0.25);
padding: 1.2rem 6vw;
transform: translateY(0);
transition: transform 0.4s ease, opacity 0.4s ease;
}
.ll-cookie-banner.ll-cookie-hidden {
transform: translateY(100%);
opacity: 0;
pointer-events: none;
}
.ll-cookie-inner {
max-width: 900px;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
gap: 2rem;
}
.ll-cookie-text {
font-family: 'Cormorant Garamond', Georgia, serif;
font-size: 0.88rem;
font-weight: 300;
color: rgba(240, 237, 230, 0.7);
line-height: 1.5;
max-width: none;
margin: 0;
}
.ll-cookie-btns {
display: flex;
gap: 0.5rem;
flex-shrink: 0;
}
.ll-cookie-btn {
font-family: 'DM Mono', monospace;
font-size: 0.78rem;
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 9px 18px;
border-radius: 2px;
cursor: pointer;
transition: background 0.2s ease, color 0.2s ease;
white-space: nowrap;
}
.ll-cookie-accept {
background: #C9A227;
color: #000;
border: 1px solid #C9A227;
}
.ll-cookie-accept:hover {
opacity: 0.85;
}
.ll-cookie-decline {
background: transparent;
color: rgba(240, 237, 230, 0.6);
border: 1px solid rgba(201, 162, 39, 0.25);
}
.ll-cookie-decline:hover {
border-color: rgba(201, 162, 39, 0.5);
color: rgba(240, 237, 230, 0.9);
}
@media (max-width: 768px) {
.ll-cookie-inner {
flex-direction: column;
gap: 1rem;
text-align: center;
}
.ll-cookie-btns {
width: 100%;
justify-content: center;
}
}
.shop-tabs{display:flex;gap:20px;border-bottom:1px solid rgba(201,168,76,.25);margin:20px 0}.shop-tab{background:none;border:0;color:rgba(255,255,255,.6);padding:10px 0;cursor:pointer}.shop-tab.active{color:#C9A84C;border-bottom:2px solid #C9A84C}.shop-sort-wrap{display:flex;justify-content:flex-end;margin-bottom:18px}.shop-sort{background:#000;border:1px solid #C9A84C;color:#C9A84C;padding:8px 12px}.shop-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}.shop-product-card{background:#120d09;border:1px solid rgba(201,168,76,.25)}.shop-product-media{position:relative;aspect-ratio:4/3;overflow:hidden;background:#000}.shop-product-media img,.shop-product-media video{width:100%;height:100%;object-fit:contain}.shop-badge{position:absolute;top:10px;left:10px;padding:4px 8px;font-size:.65rem}.shop-badge--bestseller{background:#C9A84C;color:#000;font-weight:700}.shop-badge--angebot{background:#C0392B;color:#fff}.shop-badge--neu{background:#fff;color:#000}.shop-badge--scarcity{border:1px solid #C0392B;color:#C0392B;background:transparent}.shop-product-name{font-family:'Bebas Neue',sans-serif;color:#C9A84C;font-size:1.1rem}.shop-product-desc,.shop-product-weight,.shop-product-price-per-kg{color:rgba(255,255,255,.6);font-size:.85rem}.shop-product-price{color:#C9A84C;font-size:1.35rem}.shop-product-price--original{text-decoration:line-through;color:rgba(255,255,255,.5);margin-right:8px}.shop-cart-btn{border:1px solid #C9A84C;color:#C9A84C;background:transparent;padding:8px 12px}.shop-cart-btn:hover{background:#C9A84C;color:#000}.shop-hero{text-align:center;margin-bottom:24px}.shop-trust-bar{display:flex;justify-content:center;gap:10px;color:#C9A84C;flex-wrap:wrap}
@media (max-width:768px){.shop-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}@media (max-width:480px){.shop-grid{grid-template-columns:1fr;}}
/* Shop mobile responsiveness improvements */
.shop-tabs {
overflow-x: auto;
overflow-y: hidden;
flex-wrap: nowrap;
-webkit-overflow-scrolling: touch;
scrollbar-width: thin;
}
.shop-tab {
white-space: nowrap;
flex: 0 0 auto;
}
.shop-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.shop-product-media {
aspect-ratio: 4 / 3;
background: #000;
}
.shop-product-media img {
width: 100%;
height: 100%;
object-fit: contain;
}
@media (max-width: 768px) {
.shop-trust-bar {
flex-direction: column;
align-items: center;
gap: 6px;
}
.shop-trust-bar > span:nth-child(even) {
display: none;
}
.shop-sort-wrap {
width: 100%;
justify-content: stretch;
}
.shop-sort {
width: 100%;
}
.shop-badge {
font-size: 0.78rem;
padding: 3px 7px;
}
.shop-cart-btn {
min-height: 48px;
padding-top: 10px;
padding-bottom: 10px;
}
}
@media (max-width: 479px) {
.shop-grid {
grid-template-columns: 1fr;
}
}
@media (min-width: 480px) and (max-width: 768px) {
.shop-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
/* Shop layout fix: full-width centered content */
.sd-section--shop {
padding-top: 3rem !important;
display: block;
}
.shop-content-wrap {
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 0 24px;
}
.shop-hero {
width: 100%;
max-width: 1200px;
margin: 0 auto 24px;
padding-left: 24px;
padding-right: 24px;
text-align: center;
}
.shop-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
width: 100%;
align-items: stretch;
}
.shop-product-card {
width: 100%;
display: flex;
flex-direction: column;
height: 100%;
}
@media (max-width: 768px) {
.shop-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 480px) {
.shop-grid {
grid-template-columns: 1fr;
}
}
/* Product card content alignment */
.shop-product-card {
overflow: hidden;
}
.shop-product-info {
display: flex;
flex-direction: column;
flex: 1;
padding: 16px;
}
.shop-product-name,
.shop-product-desc,
.shop-product-weight,
.shop-product-price,
.shop-product-price-per-kg {
text-align: left;
}
.shop-cart-btn {
display: block;
margin-top: auto;
width: 100%;
}
@media (max-width: 479px) {
.shop-product-info {
padding: 12px;
}
}
/* Dedicated cart page */
.wk-page { padding-top: 8rem; }
.wk-wrap { max-width: 900px; margin: 0 auto; }
.wk-hero h1{font-family:'Bebas Neue',sans-serif;color:#C9A84C;text-align:center;letter-spacing:.12em;font-size:clamp(2.4rem,6vw,4rem)}
.wk-hero p{text-align:center;color:rgba(255,255,255,.6);margin-top:.5rem}
.wk-list .wk-item{display:flex;gap:16px;padding:20px 0;border-bottom:1px solid rgba(255,255,255,.1)}
.wk-item__left img{width:120px;height:120px;object-fit:contain;background:#000;border:1px solid rgba(201,168,76,.2);border-radius:8px}
.wk-item__mid{flex:1;padding:0 24px}.wk-item__name{font-family:'Bebas Neue',sans-serif;color:#C9A84C;font-size:1.3rem;letter-spacing:.04em}
.wk-item__meta{font-size:.85rem;color:rgba(255,255,255,.55)}.wk-item__unit{color:#fff}
.wk-item__right{flex-shrink:0;text-align:right}.wk-qty{display:flex;align-items:center;justify-content:flex-end;gap:8px}
.wk-qty-btn{width:36px;height:36px;border:1px solid #C9A84C;background:#000;color:#C9A84C;cursor:pointer}.wk-qty-btn:hover{background:#C9A84C;color:#000}
.wk-qty-count{width:36px;text-align:center;color:#C9A84C;font-size:1.1rem}
.wk-line-total{font-family:'Bebas Neue',sans-serif;color:#C9A84C;font-size:1.2rem;margin-top:8px}.wk-remove{background:none;border:0;color:#C0392B;font-size:.85rem;cursor:pointer}
.wk-summary{margin-top:24px;border-top:1px solid rgba(255,255,255,.2);padding-top:20px}
.wk-row{display:flex;justify-content:space-between;padding:10px 0;color:#C9A84C;border-bottom:1px solid rgba(255,255,255,.08)}
.wk-row--total{border-top:2px solid rgba(255,255,255,.22);margin-top:10px;padding-top:16px;font-family:'Bebas Neue',sans-serif;font-size:1.8rem}
.wk-btn{display:block;width:100%;text-align:center;padding:16px;letter-spacing:2px;font-family:'Bebas Neue',sans-serif;margin-top:12px}
.wk-btn--gold,.sd-section a.wk-btn--gold{background:#C9A84C;color:#000}.wk-btn--gold:hover,.sd-section a.wk-btn--gold:hover{background:#B89740;color:#000}.wk-btn--outline{border:1px solid #C9A84C;color:#C9A84C}
.wk-clear{display:block;margin:12px auto 0;background:none;border:0;color:rgba(255,255,255,.55);cursor:pointer}
.wk-empty{text-align:center;padding:48px 0;color:#C9A84C}.wk-empty p{margin:8px auto 16px}
.wk-empty-btn{display:inline-block;padding:12px 20px;border:1px solid #C9A84C;color:#C9A84C}
.category-section {
position: relative;
z-index: auto;
}
.category-video,
.category-video video,
.category-hero-video {
position: relative;
z-index: 1;
pointer-events: auto;
}
.category-section {
max-width: 1200px;
margin: 0 auto;
padding: 80px 24px;
display: flex;
gap: 48px;
align-items: center;
}
.category-section--reversed {
flex-direction: row-reverse;
}
.category-video {
flex: 55%;
border-radius: 12px;
overflow: hidden;
aspect-ratio: 16 / 9;
background: #000;
position: relative;
}
.category-video video {
width: 100%;
height: 100%;
object-fit: cover;
}
.category-video-placeholder {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
color: #C9A84C;
font-family: 'Bebas Neue', sans-serif;
letter-spacing: 0.2em;
background: #000;
}
.category-text {
flex: 45%;
}
.category-label {
font-size: 0.78rem;
letter-spacing: 3px;
text-transform: uppercase;
color: #C9A84C;
margin-bottom: 16px;
}
.category-title {
font-family: 'Bebas Neue', sans-serif;
font-size: 2.5rem;
color: #C9A84C;
margin-bottom: 20px;
}
.category-desc {
color: rgba(255, 255, 255, 0.8);
line-height: 1.7;
margin-bottom: 32px;
}
.category-cta {
display: inline-block;
}
.category-divider {
width: 60%;
height: 1px;
background: rgba(201, 168, 76, 0.3);
margin: 40px auto;
}
@media (max-width: 768px) {
.category-section,
.category-section--reversed {
flex-direction: column;
}
.category-video,
.category-text {
flex: 100%;
width: 100%;
}
.category-title {
font-size: 1.8rem;
}
}
.category-section {
max-width: 1200px;
margin: 0 auto;
padding: 80px 24px;
display: flex;
gap: 48px;
align-items: center;
}
.category-section--reversed {
flex-direction: row-reverse;
}
.category-video {
flex: 0 0 55%;
border-radius: 12px;
overflow: hidden;
aspect-ratio: 16/9;
background: #000;
}
.category-video video {
width: 100%;
height: 100%;
object-fit: cover;
}
.video-placeholder {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
font-family: 'Bebas Neue', sans-serif;
color: #C9A84C;
font-size: 1.5rem;
letter-spacing: 4px;
border: 1px solid rgba(201,168,76,0.3);
border-radius: 12px;
}
.category-text {
flex: 1;
}
.category-label {
font-size: 0.78rem;
letter-spacing: 3px;
text-transform: uppercase;
color: #C9A84C;
margin-bottom: 16px;
}
.category-title {
font-family: 'Bebas Neue', sans-serif;
font-size: 2.5rem;
color: #C9A84C;
margin-bottom: 20px;
line-height: 1.1;
}
.category-desc {
color: rgba(255,255,255,0.8);
line-height: 1.7;
margin-bottom: 32px;
font-size: 1rem;
}
.category-cta {
display: inline-block;
border: 1px solid #C9A84C;
color: #C9A84C;
padding: 12px 32px;
font-family: 'Bebas Neue', sans-serif;
letter-spacing: 2px;
text-decoration: none;
transition: all 0.3s;
}
.category-cta:hover {
background: #C9A84C;
color: #000;
}
.category-divider {
width: 60%;
height: 1px;
background: rgba(201,168,76,0.3);
border: none;
margin: 0 auto;
}
@media (max-width: 768px) {
.category-section,
.category-section--reversed {
flex-direction: column;
padding: 48px 16px;
gap: 32px;
}
.category-video {
flex: none;
width: 100%;
}
.category-title {
font-size: 1.8rem;
}
}
.category-hero-video {
width: 100%;
height: auto;
max-height: 70vh;
object-fit: cover;
display: block;
border-radius: inherit;
}
@media (max-width: 768px) {
.category-hero-video {
max-height: 50vh;
}
}
/* Ripple effect for add-to-cart buttons */
.add-to-cart {
position: relative;
overflow: hidden;
transition: transform 0.15s ease, background 0.3s ease, color 0.3s ease;
}
.add-to-cart:hover {
background: rgba(201, 168, 76, 0.1);
color: #C9A84C;
border-color: #C9A84C;
}
.add-to-cart:active {
transform: scale(0.97);
}
.add-to-cart .ripple {
position: absolute;
border-radius: 50%;
background: rgba(201, 168, 76, 0.5);
transform: scale(0);
animation: ripple-expand 0.6s ease-out;
pointer-events: none;
}
@keyframes ripple-expand {
to {
transform: scale(4);
opacity: 0;
}
}
.add-to-cart.added {
background: #C9A84C;
color: #000;
border-color: #C9A84C;
}
@media (max-width: 768px) {
.sd-delivery__img::after {
background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.7) 100%);
}
}
/* Pricing section enhancements */
#pricing > div:first-of-type > div {
cursor: pointer;
transition:
transform 0.3s ease,
border-color 0.3s ease,
box-shadow 0.3s ease,
background 0.3s ease;
border: 2px solid transparent;
position: relative;
}
#pricing > div:first-of-type > div:hover {
transform: translateY(-4px);
border-color: rgba(201, 168, 76, 0.4);
}
#pricing > div:first-of-type > div.selected {
border-color: #C9A84C;
box-shadow: 0 0 30px rgba(201, 168, 76, 0.25);
background: rgba(201, 168, 76, 0.04) !important;
}
#pricing > div:first-of-type > div a,
#pricing > div:first-of-type > div button {
cursor: pointer;
}
/* Pricing readability improvements (non-headline text only) */
#pricing > p:first-of-type {
font-size: 0.95rem !important;
letter-spacing: 0.15em !important;
}
#pricing > p:nth-of-type(2) {
font-size: 1.05rem !important;
line-height: 1.6 !important;
}
#pricing > div:first-of-type > div > div:nth-of-type(2) {
font-size: 1rem !important;
line-height: 1.5 !important;
}
#pricing [data-i18n="pricing.badge.recommended"] {
font-size: 0.85rem !important;
letter-spacing: 0.12em !important;
padding: 6px 14px !important;
}
#pricing > div:first-of-type > div ul li {
font-size: 1.05rem !important;
line-height: 1.7 !important;
}
#pricing > div:first-of-type > div ul li > span:first-child {
font-size: 0.85rem !important;
}
#pricing [data-i18n^="pricing.priceNote."] {
font-size: 0.9rem !important;
line-height: 1.5 !important;
}
#pricing [data-i18n^="pricing.stats."][data-i18n$="Value"] {
font-size: 1.5rem !important;
}
#pricing [data-i18n^="pricing.stats."][data-i18n$="Label"] {
font-size: 0.95rem !important;
}
#pricing > div:last-of-type > div:last-child {
font-size: 1rem !important;
}
@media (max-width: 768px) {
#pricing > div:first-of-type > div > div:nth-of-type(2) {
font-size: 0.95rem !important;
}
#pricing > div:first-of-type > div ul li {
font-size: 1rem !important;
}
#pricing [data-i18n^="pricing.priceNote."] {
font-size: 0.85rem !important;
}
#pricing [data-i18n^="pricing.stats."][data-i18n$="Label"] {
font-size: 0.85rem !important;
}
#pricing [data-i18n^="pricing.stats."][data-i18n$="Value"] {
font-size: 1.3rem !important;
}
}
.view-demo-link {
font-size: 1.0625rem;
letter-spacing: 0.02em;
}