/* ============================================================
LAMENTINE — Ein Ort wo Gegensätze spielen
Default palette: dunkel violett
============================================================ */
:root {
--bg: #160520;
--bg-deep: #0a0215;
--cream: #f1e8da;
--cream-2: #ebdfcd;
--ink: #160520;
--accent: #c2005a;
--accent-2: #b8e821;
--silver: #d8d3cd;
--hairline: rgba(241, 232, 218, 0.18);
--hairline-strong: rgba(241, 232, 218, 0.36);
/* type */
--display: "Cormorant Garamond", "Cormorant", "Times New Roman", serif;
--serif: "Cormorant Garamond", "Cormorant", "Times New Roman", serif;
--mono: "Space Mono", ui-monospace, "JetBrains Mono", monospace;
--maxw: 1480px;
/* Cookie-consent banner (core ConsentGate reads these NAMESPACED vars; other
tenants don't define them and fall back to the original white/black look).
Mapped to the Lamentine brand: deep surface, cream text, accent button. */
--consent-surface: var(--bg-deep);
--consent-fg: var(--cream);
--consent-border: var(--hairline-strong);
--consent-decline-fg: var(--cream);
--consent-accent: var(--accent);
--consent-accent-fg: var(--cream);
--consent-font: 400 15px/1.6 "Space Mono", ui-monospace, monospace;
}
/* ============================================================
LANGUAGE SWITCHER (header nav__r) — Space Mono, --accent active
============================================================ */
.lang-switch {
display: inline-flex;
align-items: center;
gap: 6px;
font-family: var(--mono);
font-size: 12px;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.lang-switch__item {
display: inline-flex;
align-items: center;
gap: 6px;
}
.lang-switch__sep {
opacity: 0.4;
color: var(--cream);
}
.lang-switch__link {
color: color-mix(in oklab, var(--cream) 62%, transparent);
text-decoration: none;
transition: color 0.2s ease;
}
.lang-switch__link:hover {
color: var(--cream);
}
.lang-switch__cur {
color: var(--accent);
font-weight: 700;
}
/* THEMES applied to */
body[data-theme="braun"] {
--bg: #1c1108;
--bg-deep: #0d0703;
--cream: #f1e8da;
--accent: #d97a3d;
--accent-2: #b8e821;
}
body[data-theme="schwarz"] {
--bg: #0a0a0a;
--bg-deep: #000000;
--cream: #ebe6df;
--accent: #c7c1b8;
--accent-2: #e83a8e;
}
body[data-theme="gift"] {
--bg: #0d1305;
--bg-deep: #050802;
--cream: #f1e8da;
--accent: #b8e821;
--accent-2: #e83a8e;
}
/* ============================================================
RESET & BASE
============================================================ */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { width: 100%; overflow-x: clip; }
html { scroll-behavior: smooth; }
body {
background: var(--bg);
color: var(--cream);
font-family: var(--serif);
font-size: 17px;
line-height: 1.5;
font-weight: 400;
overflow-x: clip;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
cursor: none;
}
img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: none; }
::selection { background: var(--accent); color: var(--cream); }
/* grainy noise overlay */
body::before {
content: "";
position: fixed; inset: 0; pointer-events: none; z-index: 200;
background-image: url("data:image/svg+xml;utf8,");
opacity: .35;
mix-blend-mode: overlay;
}
/* Base cursor restore */
body, button, a { cursor: auto; }
button, a { cursor: pointer; }
/* Theme toggle — custom flower & thorn switch */
.theme-switch {
display: flex;
align-items: center;
gap: 6px;
background: color-mix(in oklab, var(--cream) 12%, transparent);
border: 1px solid color-mix(in oklab, var(--cream) 20%, transparent);
border-radius: 999px;
padding: 3px;
cursor: pointer;
margin-right: 16px;
transition: border-color 0.3s ease, background-color 0.3s ease;
}
.theme-switch:hover {
border-color: color-mix(in oklab, var(--cream) 40%, transparent);
}
.theme-switch__btn {
display: flex;
align-items: center;
justify-content: center;
width: 26px;
height: 26px;
border-radius: 50%;
color: rgba(255, 255, 255, 0.35);
background: transparent;
transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.theme-switch__icon {
width: 16px;
height: 16px;
display: block;
}
/* Active states based on toggle class */
.theme-switch:not(.thorned) .theme-switch__btn--soft {
color: var(--cream);
background: var(--accent);
box-shadow: 0 2px 8px rgba(0,0,0,0.25);
}
.theme-switch.thorned .theme-switch__btn--thorned {
color: var(--cream);
background: var(--accent);
box-shadow: 0 2px 8px rgba(0,0,0,0.25);
}
/* Decorative particles */
.decor-particle {
position: fixed;
z-index: 1;
opacity: 0;
transition: opacity 1.5s ease, transform 1s ease;
pointer-events: none;
transform: scale(0.5);
overflow: hidden;
}
/* Colorize monochrome black art to pink/fuchsia via CSS filter */
.decor-particle img {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
filter: brightness(0) saturate(100%) invert(20%) sepia(80%) saturate(4000%) hue-rotate(310deg) brightness(95%);
}
/* Mode class lives on (set pre-paint from localStorage), so these use
`.mode-*` rather than `body.mode-*`. */
.mode-soft .flower-particle { opacity: 0.2; transform: scale(1); }
.mode-thorned .thorn-particle { opacity: 0.22; transform: scale(1); }
/* Rose branch (tattoo-stencil silhouette) — smaller & subtle, partly off the
right edge (client: "die Blume ist schön aber zu gross"). */
.flower-particle {
width: 300px; height: 580px;
top: 10%; right: -150px;
}
/* The original woodcut thorn branch (thorns_2.svg) the client prefers. The box
has a FIXED height (not 100vh), so object-fit: cover renders the branch at a
CONSTANT scale — the thorns peek out by the SAME distance from the right edge
on every screen (phone, tablet, desktop), instead of scaling up with the
viewport height the way `height: 100vh` did. */
.thorn-particle {
width: 460px; height: 1100px;
top: 0; right: -200px;
}
.thorn-particle img {
object-fit: cover;
object-position: left top;
}
@keyframes bounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-5px); }
}
/* ============================================================
MARQUEE
============================================================ */
.marquee {
position: relative;
width: 100%; overflow: hidden;
border-top: 1px solid var(--hairline);
border-bottom: 1px solid var(--hairline);
background: var(--bg-deep);
color: var(--cream);
font-family: var(--mono);
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
padding: 9px 0;
}
.marquee__inner {
display: inline-flex; gap: 3rem; padding-left: 3rem;
white-space: nowrap;
animation: scroll 40s linear infinite;
}
.marquee span.flower { font-family: var(--display); font-size: 22px; color: var(--accent); letter-spacing: 0; line-height: 0.5; vertical-align: middle; }
.marquee.alt { background: var(--accent); color: var(--bg); }
.marquee.alt .flower { color: var(--bg); }
@keyframes scroll {
from { transform: translate3d(0,0,0); }
to { transform: translate3d(-50%,0,0); }
}
/* ============================================================
NAV
============================================================ */
.nav {
position: sticky; top: 0; z-index: 100;
display: grid; grid-template-columns: 1fr auto 1fr;
align-items: center;
padding: 14px 26px;
background: color-mix(in oklab, var(--bg) 78%, transparent);
backdrop-filter: blur(16px) saturate(140%);
-webkit-backdrop-filter: blur(16px) saturate(140%);
border-bottom: 1px solid var(--hairline);
}
.nav__l, .nav__r { display: flex; align-items: center; gap: 22px; font-family: var(--mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.22em; }
.nav__r { justify-content: flex-end; }
.nav__l a, .nav__r a, .nav__r button { position: relative; padding: 6px 2px; }
.nav__l a:hover, .nav__r a:hover, .nav__r button:hover { color: var(--accent); }
.nav__brand {
display: inline-flex; align-items: center; justify-content: flex-end;
height: 44px;
justify-self: end;
padding-right: 14px;
}
.nav__brand img {
height: 40px; width: auto; display: block;
filter: invert(95%) sepia(8%) saturate(310%) hue-rotate(343deg) brightness(105%);
}
/* Reserve the German cart width ("Warenkorb" is ~44px wider than "Cart") and
right-align, so the right nav cluster does NOT shift when switching language. */
.nav__cart { display: inline-flex; align-items: baseline; justify-content: flex-end; gap: 6px; min-width: 100px; }
.nav__cart .count { color: var(--accent); font-feature-settings: "tnum"; }
/* lang switch */
.lang { display: inline-flex; gap: 6px; }
.lang button { opacity: .45; }
.lang button.active { opacity: 1; color: var(--accent); }
/* ============================================================
HERO
============================================================ */
.hero {
position: relative; width: 100%;
height: calc(100vh - 50px);
min-height: 720px;
overflow: hidden;
background: var(--bg-deep);
}
.hero__video {
position: absolute; inset: 0; width: 100%; height: 100%;
object-fit: cover;
filter: saturate(0.85) contrast(1.05) brightness(0.78);
}
.hero__veil {
position: absolute; inset: 0;
background:
radial-gradient(80% 60% at 50% 40%, transparent 0%, var(--bg-deep) 100%),
linear-gradient(180deg, color-mix(in oklab, var(--bg) 30%, transparent) 0%, transparent 30%, transparent 70%, var(--bg-deep) 100%);
pointer-events: none;
}
.hero__veil--mag {
position: absolute; inset: 0;
background: radial-gradient(45% 45% at 50% 52%, color-mix(in oklab, var(--accent) 18%, transparent) 0%, transparent 75%);
mix-blend-mode: screen;
pointer-events: none;
}
.hero__wrap {
position: relative; z-index: 3;
height: 100%;
display: grid; grid-template-rows: 1fr auto;
padding: 36px 26px 80px;
}
.hero__top { align-self: start; }
.hero__center {
align-self: center; justify-self: center;
text-align: center;
display: grid; place-items: center; gap: 18px;
width: min(900px, 92vw);
}
.hero__logo {
width: min(680px, 78vw); height: auto;
color: var(--cream);
filter: drop-shadow(0 6px 30px rgba(232, 58, 142, 0.18));
}
.hero__sub {
font-family: var(--display);
font-size: clamp(28px, 4vw, 56px);
line-height: 1;
color: var(--cream);
font-weight: 400;
}
.hero__sub em { color: var(--accent); font-style: normal; }
.hero__tags {
display: inline-flex; gap: 22px;
font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.22em; text-transform: uppercase;
opacity: .8;
}
.hero__tags b { color: var(--accent-2); font-weight: 400; }
.hero__bottom {
display: grid; grid-template-columns: 1fr 1fr 1fr;
align-items: end; gap: 24px;
}
.hero__bottom > * { font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; opacity: 0.78; }
.hero__bottom > *:nth-child(2) { text-align: center; }
.hero__bottom > *:nth-child(3) { text-align: right; }
.hero__bottom .pill {
display: inline-flex; align-items: center; gap: 8px;
padding: 7px 12px; border: 1px solid var(--hairline-strong); border-radius: 999px;
}
.hero__bottom .pill::before {
content: ""; width: 6px; height: 6px; border-radius: 50%;
background: var(--accent-2); box-shadow: 0 0 14px var(--accent-2);
animation: blink 1.6s infinite ease-in-out;
}
@keyframes blink { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
.hero__enter {
position: absolute; right: 26px; top: 50%; transform: translateY(-50%);
z-index: 4;
writing-mode: vertical-rl;
font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.4em; text-transform: uppercase;
padding: 12px 6px; border-left: 1px solid var(--hairline-strong);
}
.hero__corner {
position: absolute; bottom: 18px; left: 26px; z-index: 4;
font-family: var(--display); font-size: 50px; color: var(--accent); line-height: 0.7;
}
/* ============================================================
SECTIONS
============================================================ */
.section { position: relative; padding: 90px 26px; max-width: var(--maxw); margin: 0 auto; }
.section--full { max-width: none; padding: 90px 0; }
.eyebrow {
display: inline-flex; align-items: center; gap: 12px;
font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.28em; text-transform: uppercase;
color: var(--cream); opacity: .72;
}
.eyebrow::before, .eyebrow::after {
content: ""; display: inline-block; width: 28px; height: 1px; background: var(--cream); opacity: .4;
}
/* The decorative ✦ star before every eyebrow is hidden site-wide (client
request — remove the ✦ marks). Eyebrow text itself stays where used. */
.eyebrow .star { display: none; }
.h-display {
font-family: var(--display);
font-size: clamp(56px, 9vw, 140px);
line-height: 0.9;
font-weight: 500;
font-style: italic;
letter-spacing: -0.01em;
color: var(--cream);
}
.h-display em { color: var(--accent); font-style: italic; }
.h-display .out { -webkit-text-stroke: 1px var(--cream); color: transparent; }
/* ============================================================
MANIFEST
============================================================ */
.manifest {
position: relative;
padding: 110px 26px 130px;
}
.manifest__inner {
max-width: 1180px; margin: 0 auto;
display: grid; grid-template-columns: 1fr 1.4fr;
gap: 64px; align-items: start;
}
.manifest__l { position: sticky; top: 96px; }
.manifest__l p { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.24em; text-transform: uppercase; opacity: .65; margin-top: 14px; max-width: 260px; }
.manifest__quote {
font-family: var(--serif); font-style: italic;
font-size: clamp(34px, 4vw, 62px); line-height: 1.08;
color: var(--cream);
font-weight: 400;
letter-spacing: -0.01em;
}
.manifest__quote .script { font-family: var(--display); font-style: normal; color: var(--accent); }
.manifest__quote .strike { text-decoration: line-through; text-decoration-color: var(--accent); opacity: .85; }
.manifest__quote .swap { color: var(--accent-2); }
.symbol-row {
margin-top: 56px;
display: grid; grid-template-columns: repeat(5, 1fr);
gap: 18px;
border-top: 1px solid var(--hairline);
padding-top: 22px;
}
.symbol {
display: grid; gap: 10px; place-items: center;
text-align: center;
}
.symbol svg { width: 46px; height: 46px; color: var(--cream); opacity: .9; }
.symbol span { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.22em; text-transform: uppercase; opacity: .65; }
.symbol:hover svg { color: var(--accent); animation: spin 6s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
/* swirl decorations */
.swirl-deco {
position: absolute; pointer-events: none; opacity: .55;
}
.swirl-deco svg { width: 100%; height: 100%; }
.swirl-deco--tl { top: 30px; left: 30px; width: 180px; color: var(--accent); }
.swirl-deco--br { bottom: 30px; right: 30px; width: 220px; color: var(--accent-2); transform: rotate(180deg); }
/* spikes divider */
.spikes {
width: 100%; height: 28px;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: repeat-x;
background-size: 40px 28px;
opacity: .85;
}
.spikes--cream { filter: hue-rotate(0) brightness(1); }
/* ============================================================
COLLECTION
============================================================ */
.coll {
position: relative;
background: var(--cream);
color: var(--ink);
padding: 100px 0 120px;
}
.coll__head {
max-width: var(--maxw); margin: 0 auto;
padding: 0 26px 56px;
display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: end;
}
.coll__head .h-display { color: var(--ink); }
.coll__head .h-display em { color: var(--accent); }
.coll__head .h-display .out { -webkit-text-stroke: 1.2px var(--ink); color: transparent; }
.coll__head .eyebrow { color: var(--ink); }
.coll__head .eyebrow::before, .coll__head .eyebrow::after { background: var(--ink); }
.coll__intro {
font-family: var(--serif); font-style: italic;
font-size: 20px; line-height: 1.4; max-width: 480px;
justify-self: end;
}
.coll__index {
margin-top: 18px;
font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase;
color: var(--ink); opacity: .7;
}
.coll__index span + span::before { content: " · "; opacity: .4; }
/* ----- Filter ribbon ----- */
.filter {
position: relative;
max-width: var(--maxw); margin: 0 auto 32px;
padding: 16px 26px;
display: flex; flex-wrap: wrap; gap: 12px; align-items: center;
border-top: 1px solid color-mix(in oklab, var(--ink) 18%, transparent);
border-bottom: 1px solid color-mix(in oklab, var(--ink) 18%, transparent);
}
.filter__label {
font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.22em; text-transform: uppercase; opacity: .55;
margin-right: 6px;
}
.filter__chip {
font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase;
padding: 7px 13px; border: 1px solid color-mix(in oklab, var(--ink) 35%, transparent); border-radius: 999px;
transition: all .2s ease;
}
.filter__chip:hover { background: var(--ink); color: var(--cream); border-color: var(--ink); }
.filter__chip.active { background: var(--accent); color: var(--cream); border-color: var(--accent); }
.filter__sort {
margin-left: auto;
font-family: var(--display); font-size: 22px; color: var(--accent); line-height: 1;
}
/* ----- Asymmetric product grid ----- */
.grid {
max-width: var(--maxw); margin: 0 auto; padding: 0 26px;
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 24px 22px;
}
.card { position: relative; }
.card__media {
position: relative; overflow: hidden;
background: color-mix(in oklab, var(--ink) 6%, var(--cream));
border-radius: 2px;
aspect-ratio: 3/4;
}
.card__media img {
width: 100%; height: 100%; object-fit: cover;
transition: transform .8s ease, filter .4s ease;
}
.card:hover .card__media img { transform: scale(1.04); }
.card__badge {
position: absolute; top: 12px; left: 12px; z-index: 2;
font-family: var(--mono); font-size: 9px; letter-spacing: 0.22em; text-transform: uppercase;
padding: 5px 9px; background: var(--ink); color: var(--cream);
}
.card__badge--new { background: var(--accent); }
.card__badge--last { background: var(--accent-2); color: var(--ink); }
.card__num {
position: absolute; top: 10px; right: 14px; z-index: 2;
font-family: var(--mono); font-size: 10px; letter-spacing: 0.18em; opacity: .7;
}
.card__cta {
position: absolute; left: 12px; right: 12px; bottom: 12px;
display: flex; gap: 8px;
opacity: 0; transform: translateY(8px);
transition: opacity .25s ease, transform .25s ease;
}
.card:hover .card__cta { opacity: 1; transform: translateY(0); }
.card__cta button {
flex: 1;
font-family: var(--mono); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase;
background: var(--cream); color: var(--ink);
padding: 11px 10px;
border: 1px solid var(--ink);
}
.card__cta button:hover { background: var(--ink); color: var(--cream); }
.card__cta button.dark { background: var(--ink); color: var(--cream); }
.card__cta button.dark:hover { background: var(--accent); border-color: var(--accent); }
.card__meta {
margin-top: 16px;
display: grid; grid-template-columns: 1fr auto; gap: 4px 14px; align-items: baseline;
}
.card__name {
font-family: var(--display); font-size: 26px; line-height: 1.1; color: var(--ink); font-style: italic; font-weight: 500;
}
.card__price {
font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; color: var(--ink); white-space: nowrap;
}
.card__desc {
grid-column: 1 / -1;
font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
color: var(--ink); opacity: .55;
margin-top: 4px;
}
.card__swatches { display: inline-flex; gap: 6px; margin-left: 10px; vertical-align: middle; }
.card__swatch { width: 11px; height: 11px; border-radius: 50%; background: var(--ink); border: 1px solid rgba(0,0,0,.2); display: inline-block; }
/* asymmetric column spans */
.card.s-3 { grid-column: span 3; }
.card.s-4 { grid-column: span 4; }
.card.s-5 { grid-column: span 5; }
.card.s-6 { grid-column: span 6; }
.card.s-7 { grid-column: span 7; }
.card.s-8 { grid-column: span 8; }
.card.tall .card__media { aspect-ratio: 3/5; }
.card.wide .card__media { aspect-ratio: 4/3; }
.card.short .card__media { aspect-ratio: 4/4.4; }
.card.tilt-l { transform: rotate(-1.4deg); }
.card.tilt-r { transform: rotate(1.2deg); }
/* spike border for featured */
.card.feature .card__media {
outline: 2px solid var(--accent);
outline-offset: -8px;
}
.card.feature::after {
content: "Lieblingsstück";
position: absolute; top: -10px; left: 20px;
background: var(--accent); color: var(--cream);
font-family: var(--mono); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase;
padding: 5px 10px;
transform: rotate(-3deg);
z-index: 3;
}
.coll__more {
margin: 60px auto 0; max-width: var(--maxw); padding: 0 26px;
display: flex; justify-content: center;
}
.coll__more a {
display: inline-flex; align-items: center; gap: 14px;
font-family: var(--mono); font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase;
color: var(--ink); padding: 14px 22px;
border: 1px solid var(--ink); border-radius: 999px;
}
.coll__more a:hover { background: var(--ink); color: var(--cream); }
.coll__more a .script { font-family: var(--display); font-size: 26px; color: var(--accent); line-height: 0; letter-spacing: 0; }
/* ============================================================
EDITORIAL SPLIT
============================================================ */
.split {
position: relative; overflow: hidden;
display: grid; grid-template-columns: 1fr 1fr;
}
.split__l, .split__r {
position: relative; aspect-ratio: 4/5; overflow: hidden;
}
.split__l img, .split__r img {
width: 100%; height: 100%; object-fit: cover;
}
.split__band {
position: absolute; left: 50%; top: 50%;
transform: translate(-50%, -50%) rotate(-4deg);
background: var(--accent);
color: var(--cream);
font-family: var(--display);
font-size: clamp(70px, 11vw, 180px);
line-height: 0.85;
padding: 12px 36px;
white-space: nowrap;
z-index: 3;
box-shadow: 0 14px 60px rgba(0,0,0,.4);
}
.split__cap {
position: absolute;
font-family: var(--mono); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
background: var(--bg); color: var(--cream);
padding: 7px 12px;
z-index: 2;
}
.split__l .split__cap { left: 14px; bottom: 14px; }
.split__r .split__cap { right: 14px; top: 14px; }
/* ============================================================
LOOKBOOK STRIP
============================================================ */
.lookbook {
padding: 110px 0 110px;
}
.lookbook__head {
max-width: var(--maxw); margin: 0 auto 36px;
padding: 0 26px;
display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 30px;
}
.lookbook__head .h-display { color: var(--cream); }
.lookbook__head p { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.22em; text-transform: uppercase; opacity: .7; max-width: 320px; text-align: right; }
.lookbook__strip {
position: relative;
display: flex; gap: 18px; overflow-x: auto; overflow-y: hidden;
padding: 14px 26px 30px;
scroll-snap-type: x mandatory;
scrollbar-width: thin; scrollbar-color: var(--accent) transparent;
}
.lookbook__strip::-webkit-scrollbar { height: 6px; }
.lookbook__strip::-webkit-scrollbar-thumb { background: var(--accent); border-radius: 4px; }
.look {
position: relative; flex: 0 0 auto;
scroll-snap-align: start;
height: 78vh; max-height: 760px; min-height: 520px;
}
.look img { height: 100%; width: auto; object-fit: cover; }
.look__cap {
position: absolute; left: 14px; bottom: 14px;
font-family: var(--mono); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase;
color: var(--cream);
text-shadow: 0 1px 6px rgba(0,0,0,.6);
}
.look__cap b { color: var(--accent); font-weight: 400; }
.look__cap em { font-family: var(--display); font-size: 22px; font-style: normal; line-height: 0; vertical-align: middle; }
/* ============================================================
ATELIER / About
============================================================ */
.atelier {
position: relative;
padding: 120px 26px;
max-width: 1080px; margin: 0 auto;
display: grid; grid-template-columns: 1fr 1.1fr; gap: 80px;
align-items: start;
}
.atelier__h {
font-family: var(--display);
font-size: clamp(52px, 8vw, 120px);
line-height: 0.9;
font-style: italic;
font-weight: 500;
color: var(--cream);
}
.atelier__h em { color: var(--accent); font-style: italic; }
.atelier__h .out { -webkit-text-stroke: 1.2px var(--cream); color: transparent; }
/* min-width:0 lets the text track shrink/wrap instead of blowing out the grid
and shoving the lookbook images around. */
.atelier__body { min-width: 0; }
.atelier__body p { font-family: var(--serif); font-size: 19px; line-height: 1.55; margin-bottom: 20px; overflow-wrap: break-word; }
.atelier__body p:first-child::first-letter {
font-family: var(--display); font-size: 68px; line-height: 0.8; color: var(--accent);
float: left; padding: 10px 12px 0 0;
}
.atelier__meta {
margin-top: 22px;
display: grid; grid-template-columns: 1fr 1fr; gap: 18px;
font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase;
border-top: 1px solid var(--hairline); padding-top: 18px;
}
.atelier__meta b { display: block; opacity: .55; font-weight: 400; margin-bottom: 4px; }
/* ============================================================
NEWSLETTER
============================================================ */
.news {
position: relative;
background: var(--accent);
color: var(--cream);
padding: 100px 26px;
overflow: hidden;
}
.news__inner {
max-width: 1080px; margin: 0 auto;
text-align: center;
display: grid; gap: 30px; justify-items: center;
}
.news h2 {
font-family: var(--display); font-size: clamp(64px, 10vw, 150px);
line-height: 0.85; font-weight: 400;
}
.news p { font-family: var(--serif); font-style: italic; font-size: 22px; max-width: 580px; line-height: 1.35; }
.news__form {
display: flex; gap: 8px; width: min(560px, 100%);
border-bottom: 1.5px solid var(--cream);
padding-bottom: 8px;
}
.news__form input {
flex: 1; background: transparent; border: 0;
color: var(--cream);
font-family: var(--mono); font-size: 13px; letter-spacing: 0.12em;
outline: none;
padding: 8px 4px;
}
.news__form input::placeholder { color: color-mix(in oklab, var(--cream) 65%, transparent); text-transform: uppercase; letter-spacing: 0.22em; font-size: 11px; }
.news__form button {
font-family: var(--mono); font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase;
padding: 8px 18px;
color: var(--cream);
border-left: 1px solid var(--cream);
}
.news__form button:hover { background: var(--bg); }
.news__legal { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.22em; text-transform: uppercase; opacity: .75; }
.news__decorL, .news__decorR {
position: absolute; top: 50%; transform: translateY(-50%);
font-family: var(--display); font-size: clamp(120px, 18vw, 260px); line-height: 0.7; color: var(--cream); opacity: .35;
pointer-events: none;
}
.news__decorL { left: -30px; }
.news__decorR { right: -30px; }
/* ============================================================
FOOTER
============================================================ */
.footer {
background: var(--bg-deep); color: var(--cream);
padding: 70px 26px 40px;
border-top: 1px solid var(--hairline);
}
.footer__inner {
max-width: var(--maxw); margin: 0 auto;
display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px;
}
.footer__brand svg { height: 36px; color: var(--cream); }
.footer__brand p { font-family: var(--serif); font-style: italic; font-size: 16px; line-height: 1.4; margin-top: 16px; max-width: 280px; opacity: .8; }
.footer h4 { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.24em; text-transform: uppercase; margin-bottom: 16px; opacity: .65; font-weight: 500; }
.footer ul { list-style: none; display: grid; gap: 10px; }
.footer ul a {
font-family: var(--serif); font-style: italic; font-size: 16px;
}
.footer ul a:hover { color: var(--accent); }
.footer__bottom {
max-width: var(--maxw); margin: 56px auto 0; padding-top: 22px;
border-top: 1px solid var(--hairline);
display: flex; justify-content: space-between; align-items: center; gap: 24px;
font-family: var(--mono); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase;
}
/* Copyright text understated; the payment chips stay crisp (parent no longer dims all). */
.footer__bottom > span:first-child { opacity: .6; }
.footer__bottom .pay { display: inline-flex; align-items: center; gap: 8px; }
/* Payment marks — real brand logos on small light chips so every card is
clearly visible and recognisable on the dark footer. */
.footer__bottom .pay img {
height: 22px; width: 34px; padding: 3px 5px; box-sizing: border-box;
background: #fff; border-radius: 4px; object-fit: contain; display: block;
}
/* Agency credit — deliberately understated (client: less prominent). */
.footer__credit { opacity: .6; font-size: 9px; }
.footer__credit a { color: inherit; text-underline-offset: 2px; }
/* ============================================================
CART DRAWER
============================================================ */
.drawer {
position: fixed; inset: 0; z-index: 500;
visibility: hidden;
}
.drawer.open { visibility: visible; }
.drawer__veil {
position: absolute; inset: 0;
background: rgba(0,0,0,0.6);
opacity: 0; transition: opacity .35s ease;
}
.drawer.open .drawer__veil { opacity: 1; }
.drawer__panel {
position: absolute; top: 0; right: 0; height: 100%;
width: min(460px, 100%);
background: var(--bg);
color: var(--cream);
border-left: 1px solid var(--hairline-strong);
transform: translateX(100%);
transition: transform .45s cubic-bezier(.4,.0,.2,1);
display: flex; flex-direction: column;
}
.drawer.open .drawer__panel { transform: translateX(0); }
.drawer__hd {
padding: 22px 24px;
display: flex; align-items: center; justify-content: space-between;
border-bottom: 1px solid var(--hairline);
}
.drawer__hd h3 { font-family: var(--display); font-size: 32px; font-weight: 500; font-style: italic; line-height: 1; }
.drawer__close { font-family: var(--mono); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; }
.drawer__close:hover { color: var(--accent); }
.drawer__items { flex: 1; overflow-y: auto; padding: 18px 24px; display: grid; gap: 22px; }
.line { display: grid; grid-template-columns: 88px 1fr; gap: 14px; align-items: start; }
.line__img { width: 88px; height: 110px; object-fit: cover; background: var(--cream); }
.line__name { font-family: var(--display); font-size: 20px; line-height: 1.1; font-style: italic; font-weight: 500; }
.line__meta { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase; opacity: .65; margin-top: 6px; }
.line__row { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; }
.line__qty { display: inline-flex; align-items: center; gap: 10px; border: 1px solid var(--hairline-strong); padding: 4px 8px; }
.line__qty button { padding: 0 4px; font-family: var(--mono); font-size: 14px; }
.line__qty span { font-family: var(--mono); font-size: 11px; }
.line__price { font-family: var(--mono); font-size: 12px; letter-spacing: 0.1em; }
.drawer__ft { padding: 22px 24px; border-top: 1px solid var(--hairline); }
.drawer__total { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 14px; }
.drawer__total b { font-family: var(--display); font-size: 28px; font-weight: 500; font-style: italic; }
.drawer__total span { font-family: var(--mono); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; opacity: .65; }
.drawer__total i { font-family: var(--mono); font-size: 18px; font-style: normal; color: var(--accent); }
.drawer__check {
width: 100%; padding: 18px;
background: var(--accent); color: var(--cream);
font-family: var(--mono); font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase;
}
.drawer__check:hover { background: var(--cream); color: var(--ink); }
.drawer__note { font-family: var(--serif); font-style: italic; font-size: 13px; opacity: .65; text-align: center; margin-top: 10px; }
/* ============================================================
MOBILE MENU DRAWER
============================================================ */
.nav__menu-btn {
display: none;
flex-direction: column;
justify-content: space-between;
width: 22px;
height: 14px;
background: none;
border: none;
padding: 0;
cursor: pointer;
}
.nav__menu-btn span {
display: block;
width: 100%;
height: 2px;
background-color: var(--cream);
transition: background-color 0.3s ease;
}
.nav__menu-btn:hover span {
background-color: var(--accent);
}
.mob-drawer__panel {
right: auto;
left: 0;
transform: translateX(-100%);
border-left: none;
border-right: 1px solid var(--hairline-strong);
}
.drawer.open .mob-drawer__panel {
transform: translateX(0);
}
.mob-drawer__body {
flex: 1;
display: flex;
align-items: center;
padding: 40px 24px;
}
.mob-drawer__links {
list-style: none;
width: 100%;
display: flex;
flex-direction: column;
gap: 32px;
padding: 0;
}
.mob-drawer__link {
font-family: var(--display);
font-size: 38px;
font-weight: 500;
font-style: italic;
color: var(--cream);
display: flex;
flex-direction: column;
align-items: flex-start;
text-transform: uppercase;
letter-spacing: 0.08em;
text-decoration: none;
position: relative;
transition: color 0.3s ease;
}
.mob-drawer__link span {
position: relative;
z-index: 2;
}
.mob-drawer__link:hover {
color: var(--accent);
}
.mob-drawer__orn {
display: none;
width: 100%;
max-width: 180px;
height: auto;
margin-top: 4px;
color: var(--accent);
}
.mode-soft .mob-drawer__link:hover .mob-drawer__orn--flower {
display: block;
}
.mode-thorned .mob-drawer__link:hover .mob-drawer__orn--thorn {
display: block;
}
/* ---- woodcut button (.wbtn) ---- */
.wbtn {
--orn: currentColor;
position: relative; border: none; cursor: pointer;
width: 100%; padding: 14px 24px;
background: var(--ink); color: var(--cream);
border-radius: 0;
display: flex; flex-direction: column; align-items: center; gap: 8px;
font-family: var(--display); font-style: italic; font-weight: 500;
font-size: 18px; letter-spacing: .12em; text-transform: uppercase;
transition: transform .18s ease, background .18s ease, color 0.18s ease;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.wbtn:hover {
background: var(--accent);
color: var(--cream);
}
.wbtn__label { line-height: 1; }
.wbtn__orn { display: none; width: 100%; max-width: 180px; height: auto; color: var(--orn); }
.wbtn__orn--flip { transform: scaleY(-1); }
/* Dynamic display based on active mode */
.mode-soft .wbtn__orn--flower { display: block; }
.mode-thorned .wbtn__orn--thorn { display: block; }
/* Custom overrides for card cta buttons */
.card__cta .wbtn {
flex: 1;
min-width: 0;
padding: 6px 12px 8px;
font-size: 11px;
letter-spacing: 0.12em;
background: var(--cream);
color: var(--ink);
border: 1px solid var(--ink);
box-shadow: none;
gap: 2px;
}
.card__cta .wbtn:hover {
background: var(--ink);
color: var(--cream);
transform: none;
}
.card__cta .wbtn__orn {
max-width: 100px;
}
/* Custom overrides for drawer checkout wbtn */
.drawer__check.wbtn {
padding: 12px 24px;
background: var(--accent);
color: var(--cream);
border-radius: 0;
box-shadow: none;
}
.drawer__check.wbtn:hover {
background: var(--cream);
color: var(--ink);
}
/* ============================================================
ENTER GATE
============================================================ */
.gate {
position: fixed; inset: 0; z-index: 400;
background: var(--bg-deep);
display: grid; place-items: center;
text-align: center;
transition: opacity .8s ease, visibility .8s ease;
}
.gate.dismissed { opacity: 0; visibility: hidden; pointer-events: none; }
.gate__inner { display: grid; gap: 22px; padding: 22px; }
.gate__logo { width: min(540px, 78vw); color: var(--cream); }
.gate__sub { font-family: var(--display); font-size: clamp(28px, 4vw, 50px); font-style: italic; font-weight: 500; color: var(--accent); }
.gate__btn {
margin-top: 16px;
font-family: var(--mono); font-size: 11px; letter-spacing: 0.36em; text-transform: uppercase;
color: var(--cream); padding: 14px 32px;
border: 1px solid var(--cream); border-radius: 999px;
transition: background .25s ease, color .25s ease, border-color .25s ease;
}
.gate__btn:hover { background: var(--cream); color: var(--ink); }
.gate__age { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.24em; text-transform: uppercase; opacity: .55; margin-top: 28px; }
/* ============================================================
RESPONSIVE
============================================================ */
@media (max-width: 980px) {
.hero__bottom { grid-template-columns: 1fr; gap: 14px; }
.hero__bottom > *:nth-child(2), .hero__bottom > *:nth-child(3) { text-align: left; }
.manifest__inner { grid-template-columns: 1fr; gap: 30px; }
.manifest__l { position: static; }
.coll__head { grid-template-columns: 1fr; }
.coll__intro { justify-self: start; max-width: none; }
.grid { gap: 30px 14px; }
.card.s-3, .card.s-4 { grid-column: span 6; }
.card.s-5, .card.s-6, .card.s-7, .card.s-8 { grid-column: span 12; }
.split { grid-template-columns: 1fr; }
.atelier { grid-template-columns: 1fr; gap: 36px; }
.footer__inner { grid-template-columns: 1fr 1fr; gap: 36px; }
.symbol-row { grid-template-columns: repeat(3, 1fr); }
.nav__l a:nth-child(n+4) { display: none; }
}
@media (max-width: 600px) {
body { font-size: 16px; }
.section { padding: 60px 18px; }
.hero { min-height: 620px; }
.nav { padding: 12px 16px; }
.nav__l a { display: none; }
.nav__menu-btn { display: flex; }
/* Phone header: two rows. Row 1 = hamburger (left) + controls (right); row 2
= the wordmark on its OWN full-width row, so it is no longer squeezed into a
narrow centre column between the cart and the menu. That is the only way to
scale the 3.6:1 wordmark up ~2x without it overlapping the controls or being
width-capped (max-width:100%) down to ~40px. */
.nav {
grid-template-columns: 1fr auto;
grid-template-areas:
"menu controls"
"brand brand";
row-gap: 10px; column-gap: 8px;
padding: 12px 16px 14px;
}
.nav__l { grid-area: menu; justify-self: start; gap: 0; }
.nav__r { grid-area: controls; justify-self: end; gap: 14px; }
.nav__r .theme-switch { margin-right: 0; }
.nav__brand {
grid-area: brand; justify-self: center; justify-content: center;
height: auto; padding-right: 0;
}
.nav__brand img { height: 46px; width: auto; max-width: 100%; object-fit: contain; transition: height .25s ease; }
/* Shrink-on-scroll: once scrolled, the header tightens its padding and the
wordmark shrinks, so the two-row mobile nav is not a tall band while
reading. Toggled by lm-runtime (adds `.scrolled` past ~24px). */
.nav { transition: padding .25s ease, row-gap .25s ease; }
.nav.scrolled { padding-top: 8px; padding-bottom: 8px; row-gap: 6px; }
.nav.scrolled .nav__brand img { height: 30px; }
.footer__inner { grid-template-columns: 1fr; }
/* On phones the © + payment line share the top row; the agency credit drops
to its OWN full-width line below, centred and extra-muted, so it is not
tapped by accident (client request). */
.footer__bottom { flex-wrap: wrap; row-gap: 12px; }
.footer__credit {
flex-basis: 100%;
order: 3;
text-align: center;
margin-top: 6px;
opacity: .5;
}
/* Background ornaments on mobile — subtle, hugging the right edge; no
horizontal overflow (body has overflow-x: clip, art stays off-canvas). */
.flower-particle {
right: -130px;
width: 220px;
height: 420px;
top: 8%;
}
/* Thorn strip inherits the desktop tile (fixed width + repeat-y), so it peeks
out by the SAME amount on phone as on desktop — no per-breakpoint override. */
}
/* ============================================================
GLACÉ — Commerce-Erweiterung
(Produktseite · Shop · Warenkorb · Kasse)
============================================================ */
.textlink { color: var(--accent); border-bottom: 1px solid currentColor; }
/* Karte als Link */
.card__link { display: block; width: 100%; height: 100%; }
a.card__meta { color: inherit; }
.card__meta:hover .card__name { color: var(--accent); }
/* Primär-Buttons auf dunklem Grund (sonst wäre --ink == --bg) */
.pdp__add, .cartp__back, .cartp__check.wbtn, .ko__submit, .ko__back {
background: var(--accent); color: var(--cream); box-shadow: none;
}
.pdp__add:hover, .cartp__back:hover, .cartp__check.wbtn:hover, .ko__submit:hover, .ko__back:hover {
background: var(--cream); color: var(--ink);
}
/* Drawer-Ergänzungen */
.drawer__view { display: block; text-align: center; margin-top: 10px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase; opacity: .7; }
.drawer__view:hover { color: var(--accent); opacity: 1; }
.drawer__empty { font-family: var(--serif); font-style: italic; font-size: 18px; opacity: .8; text-align: center; padding: 50px 10px; line-height: 1.7; }
.drawer__empty a { color: var(--accent); }
.line__rm { margin-top: 8px; font-family: var(--mono); font-size: 9.5px; letter-spacing: .18em; text-transform: uppercase; opacity: .5; }
.line__rm:hover { color: var(--accent); opacity: 1; }
/* ===== PRODUKTSEITE ===== */
.pdp { max-width: 1240px; margin: 0 auto; padding: 30px 26px 40px; }
.pdp__crumbs { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; font-family: var(--mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; opacity: .62; margin-bottom: 30px; }
.pdp__crumbs a:hover { color: var(--accent); }
.pdp__crumbs b { font-weight: 400; opacity: 1; }
.pdp__crumbs span { opacity: .4; }
.pdp__grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: start; }
.pdp__media { position: sticky; top: 84px; }
.pdp__stage { position: relative; aspect-ratio: 3/4; overflow: hidden; background: color-mix(in oklab, var(--cream) 86%, var(--ink)); border-radius: 2px; }
.pdp__stage img { width: 100%; height: 100%; object-fit: cover; }
.pdp__thumbs { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.pdp__thumb { width: 70px; height: 88px; overflow: hidden; border: 1px solid var(--hairline); border-radius: 2px; padding: 0; opacity: .7; transition: opacity .2s ease, border-color .2s ease; }
.pdp__thumb img { width: 100%; height: 100%; object-fit: cover; }
.pdp__thumb.is-active, .pdp__thumb:hover { opacity: 1; border-color: var(--accent); }
.pdp__info > * + * { margin-top: 20px; }
.pdp__name { font-family: var(--display); font-style: italic; font-weight: 500; font-size: clamp(40px, 6vw, 66px); line-height: .95; color: var(--cream); }
.pdp__name em { color: var(--accent); font-style: italic; }
.pdp__price { font-family: var(--mono); font-size: 15px; letter-spacing: .12em; display: flex; align-items: baseline; gap: 12px; }
.pdp__price-note { font-size: 9.5px; letter-spacing: .2em; text-transform: uppercase; opacity: .55; }
.pdp__intro { font-family: var(--serif); font-style: italic; font-size: 21px; line-height: 1.4; max-width: 46ch; opacity: .92; }
.pdp__opt { border-top: 1px solid var(--hairline); padding-top: 18px; }
/* Group label + value on the LEFT (the value used to float to the far right of
a wide info column, reading as disconnected). Action links (size chart) get
pushed back to the right via margin-left:auto. */
.pdp__opt-hd { display: flex; justify-content: flex-start; align-items: baseline; gap: 14px; margin-bottom: 12px; }
.pdp__opt-label { font-family: var(--mono); font-size: 10.5px; letter-spacing: .24em; text-transform: uppercase; opacity: .6; }
.pdp__opt-val { font-family: var(--serif); font-style: italic; font-size: 17px; }
.pdp__opt-link { margin-left: auto; font-family: var(--mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--accent); border-bottom: 1px solid currentColor; }
.pdp__swatches { display: flex; gap: 12px; flex-wrap: wrap; }
.pdp__swatch { width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--hairline-strong); box-shadow: inset 0 0 0 2px var(--bg); outline: 1.5px solid transparent; outline-offset: 2px; transition: outline-color .2s ease, transform .2s ease; }
.pdp__swatch:hover { transform: scale(1.08); }
.pdp__swatch.is-active { outline-color: var(--accent); }
.pdp__sizes { display: flex; gap: 8px; flex-wrap: wrap; }
.pdp__size { min-width: 50px; padding: 11px 6px; font-family: var(--mono); font-size: 11px; letter-spacing: .12em; border: 1px solid var(--hairline-strong); color: var(--cream); transition: all .18s ease; }
.pdp__size:hover { border-color: var(--cream); }
.pdp__size.is-active { background: var(--accent); border-color: var(--accent); color: var(--cream); }
.pdp__hint { font-family: var(--mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); margin-top: 10px; opacity: 0; transition: opacity .2s ease; }
.pdp__hint.show { opacity: 1; }
.pdp__meas { font-family: var(--serif); font-style: italic; font-size: 16px; opacity: .8; }
.pdp__add { max-width: 380px; margin-top: 6px; }
.pdp__moto { font-family: var(--serif); font-style: italic; font-size: 14px; opacity: .7; }
.pdp__desc { border-top: 1px solid var(--hairline); padding-top: 20px; }
.pdp__desc p { font-family: var(--serif); font-size: 18px; line-height: 1.6; margin-bottom: 12px; }
.pdp__details { display: grid; grid-template-columns: max-content 1fr; gap: 10px 22px; border-top: 1px solid var(--hairline); padding-top: 20px; }
.pdp__details dt { font-family: var(--mono); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; opacity: .55; }
.pdp__details dd { font-family: var(--serif); font-size: 16px; line-height: 1.5; }
/* Global handmade disclaimer — shown once under every product's info column
(single source, not stored per product). German only. */
.pdp__info::after {
content: "Dieses Produkt ist handgemacht und kleine menschliche Imperfektionen können vorkommen. Jedes Stück ist ein Unikat.";
display: block;
max-width: 48ch;
margin-top: 30px;
padding-top: 18px;
border-top: 1px solid var(--hairline);
font-family: var(--serif);
font-style: italic;
font-size: 14.5px;
line-height: 1.6;
letter-spacing: .01em;
color: color-mix(in oklab, var(--cream) 60%, transparent);
}
.pdp__section { margin-top: 8px; }
.pdp__section h3 { font-family: var(--mono); font-size: 10.5px; letter-spacing: .24em; text-transform: uppercase; opacity: .6; margin-bottom: 14px; font-weight: 400; }
.pdp__section.flash { animation: flashbg .9s ease; }
@keyframes flashbg { 0%, 100% { background: transparent; } 30% { background: color-mix(in oklab, var(--accent) 14%, transparent); } }
.pdp__sizetable { width: 100%; border-collapse: collapse; font-family: var(--mono); font-size: 12px; }
.pdp__sizetable th, .pdp__sizetable td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--hairline); letter-spacing: .06em; }
.pdp__sizetable thead th { font-size: 9.5px; letter-spacing: .2em; text-transform: uppercase; opacity: .55; }
.pdp__sizetable tbody th { color: var(--accent); }
.shake { animation: shake .4s ease; }
@keyframes shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
.pdp__missing { text-align: center; padding: 80px 0; }
.pdp__missing .h-display { margin: 18px 0 24px; }
/* mehr aus der Capsule — helle Bande (Karten brauchen hellen Grund) */
.pdp__more { background: var(--cream); color: var(--ink); margin-top: 70px; padding: 70px 0 90px; border-radius: 2px; }
.pdp__more-hd { max-width: var(--maxw); margin: 0 auto 30px; padding: 0 26px; }
.pdp__more-hd .eyebrow { color: var(--ink); }
.pdp__more-hd .eyebrow::before, .pdp__more-hd .eyebrow::after { background: var(--ink); }
/* .pdp__more nutzt die Basis-12-Spalten-Grid mit s-3-Karten (4 pro Reihe) */
/* ===== SHOP ===== */
.shop__count { font-family: var(--mono); font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; opacity: .6; margin-left: auto; }
/* ===== WARENKORB-SEITE ===== */
.cartp { max-width: 1200px; margin: 0 auto; padding: 40px 26px 100px; display: grid; grid-template-columns: 1.6fr .9fr; gap: 48px; align-items: start; }
.cartp__head { display: grid; grid-template-columns: 1fr auto auto; gap: 18px; font-family: var(--mono); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; opacity: .5; padding-bottom: 14px; border-bottom: 1px solid var(--hairline); }
.cartp__head span:nth-child(2) { justify-self: center; }
.cartp__head span:nth-child(3) { justify-self: end; }
.cartp__row { display: grid; grid-template-columns: 96px 1fr auto auto; gap: 18px; align-items: center; padding: 22px 0; border-bottom: 1px solid var(--hairline); }
.cartp__img { width: 96px; height: 120px; overflow: hidden; background: var(--cream); }
.cartp__img img { width: 100%; height: 100%; object-fit: cover; }
.cartp__name { font-family: var(--display); font-style: italic; font-weight: 500; font-size: 24px; color: var(--cream); display: block; }
.cartp__name em { color: var(--accent); }
.cartp__name:hover { color: var(--accent); }
.cartp__meta { font-family: var(--mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; opacity: .6; margin-top: 6px; }
.cartp__rm { margin-top: 10px; font-family: var(--mono); font-size: 9.5px; letter-spacing: .18em; text-transform: uppercase; opacity: .5; }
.cartp__rm:hover { color: var(--accent); opacity: 1; }
.cartp__qty { display: inline-flex; align-items: center; gap: 12px; border: 1px solid var(--hairline-strong); padding: 8px 12px; }
.cartp__qty button { font-family: var(--mono); font-size: 15px; }
.cartp__qty span { font-family: var(--mono); font-size: 12px; }
.cartp__price { font-family: var(--mono); font-size: 13px; letter-spacing: .08em; justify-self: end; }
.cartp__sum { border: 1px solid var(--hairline); padding: 28px; position: sticky; top: 84px; }
.cartp__sum h3 { font-family: var(--display); font-style: italic; font-weight: 500; font-size: 26px; margin-bottom: 18px; }
.cartp__sumrow { display: flex; justify-content: space-between; align-items: baseline; padding: 10px 0; font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; }
.cartp__sumrow b { font-weight: 400; }
.cartp__sumtotal { border-top: 1px solid var(--hairline); margin-top: 6px; padding-top: 16px; }
.cartp__sumtotal b { font-family: var(--display); font-style: italic; font-size: 26px; }
.cartp__check { margin-top: 18px; }
.cartp__cont { display: block; text-align: center; margin-top: 14px; font-family: var(--mono); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; opacity: .65; }
.cartp__cont:hover { color: var(--accent); opacity: 1; }
.cartp__empty { text-align: center; padding: 90px 0; grid-column: 1 / -1; }
.cartp__empty .h-display { margin: 16px 0 30px; }
.cartp__back { max-width: 320px; margin: 0 auto; }
/* ===== KASSE ===== */
.ko { max-width: 1160px; margin: 0 auto; padding: 40px 26px 100px; }
.ko__grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: 56px; align-items: start; }
.ko__sum-hd { font-family: var(--mono); font-size: 10.5px; letter-spacing: .24em; text-transform: uppercase; opacity: .6; margin-bottom: 18px; }
.ko fieldset { border: 0; margin: 0 0 28px; padding: 0; }
.ko legend { font-family: var(--display); font-style: italic; font-weight: 500; font-size: 26px; margin-bottom: 16px; color: var(--cream); }
.ko__field { display: grid; gap: 6px; margin-bottom: 16px; }
.ko__row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ko__field label { font-family: var(--mono); font-size: 9.5px; letter-spacing: .2em; text-transform: uppercase; opacity: .55; }
.ko__field input, .ko__field select { background: transparent; border: 0; border-bottom: 1.5px solid var(--hairline-strong); color: var(--cream); font-family: var(--serif); font-size: 17px; padding: 8px 2px; outline: none; }
.ko__field input:focus, .ko__field select:focus { border-color: var(--accent); }
.ko__field input::placeholder { color: color-mix(in oklab, var(--cream) 45%, transparent); }
.ko__field select option { color: #000; }
.ko__pay { display: grid; gap: 10px; }
.ko__pay label { display: flex; align-items: center; gap: 12px; border: 1px solid var(--hairline); padding: 14px 16px; font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; cursor: pointer; }
.ko__pay label:hover { border-color: var(--hairline-strong); }
.ko__pay input { accent-color: var(--accent); }
.ko__submit { margin-top: 6px; }
.ko__summary { border: 1px solid var(--hairline); padding: 26px; position: sticky; top: 84px; }
.ko__line { display: grid; grid-template-columns: 54px 1fr auto; gap: 14px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--hairline); }
.ko__line img { width: 54px; height: 68px; object-fit: cover; background: var(--cream); }
.ko__line-name { font-family: var(--display); font-style: italic; font-size: 18px; }
.ko__line-meta { font-family: var(--mono); font-size: 9px; letter-spacing: .14em; text-transform: uppercase; opacity: .55; margin-top: 4px; }
.ko__line-price { font-family: var(--mono); font-size: 11px; }
.ko__sum { margin-top: 18px; }
.ko__sumrow { display: flex; justify-content: space-between; padding: 8px 0; font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; }
.ko__sumrow b { font-weight: 400; }
.ko__total { border-top: 1px solid var(--hairline); margin-top: 8px; padding-top: 14px; }
.ko__total b { font-family: var(--display); font-style: italic; font-size: 24px; }
.ko__empty { font-family: var(--serif); font-style: italic; opacity: .7; padding: 20px 0; }
.ko__done { text-align: center; padding: 60px 0; max-width: 640px; margin: 0 auto; }
.ko__done .h-display { margin: 16px 0 20px; }
.ko__done p { font-family: var(--serif); font-size: 19px; line-height: 1.6; opacity: .9; margin-bottom: 26px; }
.ko__back { max-width: 320px; margin: 0 auto; }
/* ===== RESPONSIVE — Commerce ===== */
@media (max-width: 980px) {
.pdp__grid { grid-template-columns: 1fr; gap: 30px; }
.pdp__media { position: static; }
.cartp { grid-template-columns: 1fr; gap: 30px; }
.cartp__sum { position: static; }
.ko__grid { grid-template-columns: 1fr; gap: 30px; }
.ko__summary { position: static; }
}
@media (max-width: 600px) {
.cartp__row { grid-template-columns: 72px 1fr; gap: 8px 14px; }
.cartp__qty { grid-column: 2; justify-self: start; }
.cartp__price { grid-column: 2; justify-self: start; }
.pdp__name { font-size: 38px; }
.ko__row2 { grid-template-columns: 1fr; }
}
/* ============================================================
RECHTLICHES — legal / plain text content pages
The generic block fallback renders a demo `hero` + `text` block
(light-theme Tailwind: white bg, dark prose) which is unreadable on
the dark brand. `.legal` on the re-skins those blocks into the
Lamentine editorial voice: one narrow readable column, serif display
headings with hairline dividers, cream-on-dark, accent links.
============================================================ */
.legal { --legal-col: 760px; }
/* neutralise the demo blocks' light-theme section chrome */
.legal section {
width: 100%;
background: transparent;
border: 0;
margin: 0;
padding: 0;
}
.legal section > div { max-width: var(--legal-col); margin: 0 auto; }
/* HERO block → serif display title with a brand eyebrow + hairline rule */
.legal section:first-child {
border-bottom: 1px solid var(--hairline);
padding-bottom: 34px;
margin-bottom: 48px;
}
.legal h1 {
font-family: var(--display);
font-weight: 500;
font-style: italic;
font-size: clamp(44px, 6vw, 66px);
line-height: 1.03;
letter-spacing: -0.01em;
color: var(--cream);
text-align: center;
overflow-wrap: break-word;
}
.legal h1::before {
content: "✦";
display: block;
font-style: normal;
font-size: 15px;
color: var(--accent);
margin-bottom: 16px;
letter-spacing: 0;
}
/* TEXT block → readable prose column */
.legal .prose,
.legal section:not(:first-child) > div {
max-width: var(--legal-col);
margin: 0 auto;
color: var(--cream);
font-family: var(--serif);
font-size: 19px;
line-height: 1.75;
}
.legal p {
margin: 0 0 20px;
color: color-mix(in oklab, var(--cream) 86%, transparent);
}
/* lead-in paragraph */
.legal .prose > p:first-child,
.legal section:not(:first-child) > div > p:first-child {
font-size: 21px;
font-style: italic;
line-height: 1.6;
color: var(--cream);
margin-bottom: 30px;
}
.legal h2 {
font-family: var(--display);
font-weight: 500;
font-size: clamp(26px, 3.4vw, 33px);
line-height: 1.14;
letter-spacing: -0.005em;
color: var(--cream);
margin: 44px 0 14px;
padding-top: 26px;
border-top: 1px solid var(--hairline);
}
.legal h3 {
font-family: var(--display);
font-weight: 600;
font-style: italic;
font-size: 22px;
color: var(--cream);
margin: 28px 0 10px;
}
.legal a {
color: var(--accent);
border-bottom: 1px solid color-mix(in oklab, var(--accent) 45%, transparent);
transition: color .2s ease, border-color .2s ease;
}
.legal a:hover { color: var(--cream); border-bottom-color: var(--cream); }
.legal strong, .legal b { font-weight: 600; color: var(--cream); }
.legal ul, .legal ol { margin: 0 0 22px; padding-left: 1.35em; }
.legal li { margin: 0 0 10px; padding-left: 6px; line-height: 1.65; }
.legal li::marker { color: var(--accent); }
.legal blockquote {
border-left: 2px solid var(--accent);
padding-left: 20px;
margin: 24px 0;
font-style: italic;
opacity: .9;
}
@media (max-width: 600px) {
.legal h1 { font-size: clamp(29px, 8vw, 40px); }
.legal .prose,
.legal section:not(:first-child) > div { font-size: 18px; }
.legal .prose > p:first-child,
.legal section:not(:first-child) > div > p:first-child { font-size: 19px; }
}
/* ── Scroll reveal (native scroll-driven animation, no JS, no deps) — product
cards fade + rise as they enter. Progressive enhancement: browsers without
`animation-timeline` (e.g. Firefox) show cards statically; reduced-motion too. ── */
@media (prefers-reduced-motion: no-preference) {
@supports (animation-timeline: view()) {
@keyframes lm-rise { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
.card { animation: lm-rise linear both; animation-timeline: view(); animation-range: entry 0% cover 20%; }
}
}
/* ── Contact form on a lamentine content page (/kontakt) — re-skin the generic
(Tailwind, light-theme) `form` block into the dark editorial voice, mirroring
the checkout fields (.ko__field). Scoped to `.legal` so only content pages. ── */
.legal form { max-width: var(--legal-col); margin: 8px auto 0; }
.legal form label { display: block; margin-bottom: 20px; }
.legal form label > span {
display: block; margin-bottom: 6px;
font-family: var(--mono); font-size: 9.5px; letter-spacing: .2em; text-transform: uppercase;
opacity: .55; color: var(--cream);
}
.legal form input,
.legal form textarea,
.legal form select {
width: 100%; background: transparent; border: 0; border-bottom: 1.5px solid var(--hairline-strong);
color: var(--cream); font-family: var(--serif); font-size: 17px; padding: 9px 2px; outline: none;
border-radius: 0; box-sizing: border-box;
}
.legal form textarea { min-height: 130px; resize: vertical; }
.legal form input:focus, .legal form textarea:focus, .legal form select:focus { border-color: var(--accent); }
.legal form input::placeholder, .legal form textarea::placeholder { color: color-mix(in oklab, var(--cream) 45%, transparent); }
.legal form button[type="submit"] {
margin-top: 10px; background: var(--accent); color: var(--cream); border: 0; cursor: pointer;
font-family: var(--mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
padding: 15px 34px;
}
.legal form button[type="submit"]:hover { filter: brightness(1.1); }
.legal form button[type="submit"]:disabled { opacity: .5; cursor: default; }
/* Contact form inline result messages. */
.legal .lm-form-ok, .legal .lm-form-err { font-family: var(--serif); font-size: 18px; margin-top: 8px; }
.legal .lm-form-ok { color: var(--accent-2); }
.legal .lm-form-err { color: var(--accent); }
/* ============================================================
MOBILE LEGIBILITY — nudge the small mono micro-labels up a touch on phones.
Placed at end-of-file so it wins source order over the base label rules
(which are scattered later than the main 600px block). Client: "all small
fonts a bit bigger on mobile". Sizes are floors, headings untouched.
============================================================ */
@media (max-width: 600px) {
body { font-size: 17px; }
/* ~10–11px labels → 12px */
.nav__r,
.hero__tags, .hero__bottom > *, .hero__enter,
.eyebrow,
.manifest__l p,
.coll__index, .filter__label, .filter__chip,
.card__num, .card__cta button, .card__price, .card__desc,
.lookbook__head p,
.footer h4, .footer__bottom span,
.drawer__close, .drawer__total span, .drawer__view, .drawer__check,
.line__meta, .line__price, .line__qty span,
.shop__count,
.pdp__crumbs, .pdp__opt-label, .pdp__opt-link, .pdp__hint, .pdp__details dt,
.pdp__section h3, .pdp__size, .pdp__sizetable,
.cartp__head, .cartp__meta, .cartp__sumrow, .cartp__cont, .cartp__price,
.ko__sum-hd, .ko__pay label, .ko__sumrow, .ko__line-price { font-size: 12px; }
/* very tiny 9–9.5px labels → 11px */
.symbol span, .card__badge,
.news__legal, .footer__credit, .gate__age,
.line__rm, .cartp__rm,
.pdp__price-note, .pdp__sizetable thead th,
.ko__field label, .ko__line-meta, .legal form label > span { font-size: 11px; }
}