/* KORE – "Nuit": black-brown ground, ivory text, gold light, Roman capitals. Rules in DESIGN.md. */
:root {
  color-scheme: dark;
  --night: #261b14;        /* page ground */
  --night-2: #2e221a;      /* panels, alternate sections */
  --surface: #34271e;      /* photo ground, cards, own chat bubbles */
  --glow: #45332a;         /* centre of the symbol's light */
  --line: #3e3026;         /* hairlines */
  --line-strong: #8a7663;  /* control borders, ≥ 3:1 */
  --ivory: #efe6d8;        /* headings, primary text */
  --soft: #cfc3b2;         /* running text */
  --mute: #b3a796;         /* secondary text, ≥ 7:1 */
  --gold: #c9a66b;         /* accent: rules, small caps, prices, focus */
  --gold-light: #e7cf9f;   /* primary button, AI accent */
  --display: 'Marcellus', 'Trajan Pro', 'Cinzel', Georgia, serif;
  --sans: 'Jost', 'Futura', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ease: cubic-bezier(.2, .7, .1, 1);
  --gut: max(20px, env(safe-area-inset-left, 0px));
  --gut-r: max(20px, env(safe-area-inset-right, 0px));
  --head: 72px;   /* space the floating header takes (10 px gap + 52 px bar + 10 px) */
  --dock: 0px;
}
@media (min-width: 900px) { :root { --gut: max(56px, env(safe-area-inset-left, 0px)); --gut-r: max(56px, env(safe-area-inset-right, 0px)); --head: 84px; } }
/* Screen pixels per CSS pixel. A photo is never shown larger than its own pixels (Kimberley, 10.11.2026: "viele Bilder
   sind unscharf"): its frame is at most --cap / --dpr wide. Steps here; shell.js sets the exact value. */
:root { --dpr: 1; }
@media (min-resolution: 1.1dppx) { :root { --dpr: 1.1; } }
@media (min-resolution: 1.25dppx) { :root { --dpr: 1.25; } }
@media (min-resolution: 1.5dppx) { :root { --dpr: 1.5; } }
@media (min-resolution: 1.75dppx) { :root { --dpr: 1.75; } }
@media (min-resolution: 2dppx) { :root { --dpr: 2; } }
@media (min-resolution: 2.5dppx) { :root { --dpr: 2.5; } }
@media (min-resolution: 3dppx) { :root { --dpr: 3; } }
@media (min-resolution: 3.5dppx) { :root { --dpr: 3.5; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--head) + 12px); background: var(--night); }
html.has-sheet { overflow: hidden; }
body { margin: 0; background: var(--night); color: var(--ivory); font: 350 16px/1.7 var(--sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; padding-bottom: var(--dock); overflow-x: clip; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
a, button, label, summary { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 1.5px solid var(--gold); outline-offset: 3px; }
::selection { background: #4a3a26; color: var(--ivory); }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--gold-light); color: var(--night); padding: 10px 14px; font-size: 14px; }
.skip:focus { top: 12px; }
.wrap { width: 100%; max-width: 1440px; margin-inline: auto; padding-left: var(--gut); padding-right: var(--gut-r); }
.muted { color: var(--mute); }

/* Type: Roman capitals for names and headings, Jost for everything else */
.title { font-family: var(--display); font-weight: 400; font-size: clamp(26px, 2.8vw, 40px); line-height: 1.15; letter-spacing: .1em; text-transform: uppercase; text-wrap: balance; }
.rule { display: block; width: 48px; height: 1px; background: var(--gold); }
.lead { color: var(--soft); font-size: clamp(16px, 1.25vw, 18px); line-height: 1.7; max-width: 40ch; text-wrap: pretty; }

/* Buttons and links */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 52px; padding: 0 30px; background: var(--gold-light); color: var(--night); border: 1px solid var(--gold-light); border-radius: 0; font-size: 12px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; transition: background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease); }
.btn:hover { background: #f3e0b8; border-color: #f3e0b8; }
.btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.4; }
.btn--line { background: transparent; color: var(--ivory); border-color: rgba(239, 230, 216, .45); font-weight: 400; }
.btn--line:hover { background: transparent; border-color: var(--ivory); }
.link-btn { font-size: 13.5px; color: var(--mute); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.link-btn:hover { color: var(--ivory); }
.icon-btn { position: relative; display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; transition: background .3s; }
.icon-btn:hover { background: rgba(239, 230, 216, .06); }
.icon-btn svg, .dock svg, .head svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }
.count { position: absolute; top: 4px; right: 2px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--gold-light); color: var(--night); font-size: 10.5px; font-weight: 500; line-height: 18px; text-align: center; font-variant-numeric: tabular-nums; }
.ai-badge { display: inline-block; padding: 1px 5px 0; border-radius: 3px; background: var(--gold-light); color: var(--night); font-size: 8.5px; font-weight: 500; letter-spacing: .06em; line-height: 12px; }
.chip { display: inline-flex; align-items: center; min-height: 40px; padding: 8px 16px; border: 1px solid var(--line-strong); border-radius: 999px; font-size: 14px; text-align: left; color: var(--soft); transition: border-color .3s, color .3s; }
.chip:hover { border-color: var(--gold); color: var(--ivory); }

/* Header like Eldenza (Kimberley, 14.11.2026: "der header soll im gleichen style wie eldenza sein"): a floating rounded
   bar over the page, see-through over the hero photo and darker once the page scrolls. Logo left, the pieces in the middle
   (the current one in a soft pill), right "Frag KORE", the language menu "DE ⌄" and the bag as the gold round button.
   Phones: logo and language in the bar, the dock at the bottom carries menu, assistant and bag. */
.head-sentinel { height: 0; }
.head { position: fixed; top: 0; left: 0; right: 0; z-index: 30; padding-top: 10px; pointer-events: none; }
.head__in { pointer-events: auto; display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 52px; padding: 0 6px 0 20px; border-radius: 999px; border: 1px solid rgba(239, 230, 216, .1); background: rgba(30, 21, 15, .42); backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2); transition: background-color .5s var(--ease), border-color .5s var(--ease), box-shadow .5s var(--ease); }
.head.is-stuck .head__in, .head--solid .head__in { background: rgba(38, 27, 20, .88); border-color: rgba(239, 230, 216, .13); box-shadow: 0 18px 50px -22px rgba(0, 0, 0, .9); backdrop-filter: blur(20px) saturate(1.2); -webkit-backdrop-filter: blur(20px) saturate(1.2); }
.logo { font-family: var(--display); font-weight: 400; font-size: 26px; letter-spacing: .44em; margin-right: -.44em; line-height: 1; }
.head .logo { font-size: 22px; display: inline-flex; align-items: center; min-height: 44px; }
.head__nav { display: none; align-items: center; gap: 2px; }
.head__nav a { display: inline-flex; align-items: center; line-height: 1; height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid transparent; font-size: 11.5px; font-weight: 400; letter-spacing: .22em; text-transform: uppercase; white-space: nowrap; color: var(--soft); transition: color .3s, background-color .3s, border-color .3s; }
.head__nav a:hover { color: var(--ivory); }
.head__nav a[aria-current="page"] { color: var(--ivory); background: rgba(239, 230, 216, .07); border-color: rgba(239, 230, 216, .08); }
/* Family dropdown ("Hand Chain ⌄"), styled like the links and the language menu */
.nav-drop { position: relative; }
.nav-drop__btn { display: inline-flex; align-items: center; gap: 6px; line-height: 1; height: 40px; padding: 0 12px 0 14px; border-radius: 999px; border: 1px solid transparent; font-size: 11.5px; letter-spacing: .22em; text-transform: uppercase; white-space: nowrap; color: var(--soft); transition: color .3s, background-color .3s, border-color .3s; }
.nav-drop__btn:hover, .nav-drop__btn[aria-expanded="true"] { color: var(--ivory); }
.nav-drop__btn[data-current] { color: var(--ivory); background: rgba(239, 230, 216, .07); border-color: rgba(239, 230, 216, .08); }
.nav-drop__btn svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; transition: transform .3s var(--ease); }
.nav-drop__btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.nav-drop__menu { position: absolute; left: 0; top: calc(100% + 10px); z-index: 40; display: grid; min-width: 220px; padding: 6px; border-radius: 18px; border: 1px solid rgba(239, 230, 216, .1); background: rgba(38, 27, 20, .97); box-shadow: 0 18px 50px rgba(0, 0, 0, .45); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }
.nav-drop__menu::before { content: ''; position: absolute; left: 0; right: 0; top: -12px; height: 12px; } /* keeps the hover bridge between button and menu */
.head__nav .nav-drop__menu a { display: block; height: auto; padding: 11px 14px; border: 0; border-radius: 12px; font-size: 11.5px; letter-spacing: .18em; color: var(--soft); }
.head__nav .nav-drop__menu a:hover { background: rgba(239, 230, 216, .06); color: var(--ivory); }
.head__nav .nav-drop__menu a[aria-current="page"] { background: rgba(239, 230, 216, .07); color: var(--ivory); }
.head__nav .nav-drop__menu a[data-t="viewAll"] { margin-top: 4px; border-top: 1px solid rgba(239, 230, 216, .08); border-radius: 0 0 12px 12px; color: var(--gold-light); }
/* Family page ("Alle ansehen") */
.family { padding-block: 8px clamp(80px, 9vw, 140px); }
.family__head { display: grid; gap: 14px; justify-items: center; text-align: center; margin: clamp(24px, 4vw, 56px) 0 clamp(32px, 4.5vw, 64px); }
.family__title { font-family: var(--display); font-weight: 400; font-size: clamp(26px, 2.6vw, 40px); letter-spacing: .1em; text-transform: uppercase; }
.family__lead { color: var(--soft); max-width: 46ch; }
@media (min-width: 900px) { .family__list { max-width: 880px; margin-inline: auto; } }
.head__tools { display: flex; align-items: center; gap: 6px; }
.head__tools .ai-btn, .head__tools .bag-btn { display: none; }
.ai-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 8px; font-size: 11.5px; letter-spacing: .2em; text-transform: uppercase; white-space: nowrap; color: var(--gold-light); transition: color .3s; }
.ai-btn:hover { color: var(--ivory); }
.ai-btn .ai-badge { padding: 0 4px; background: transparent; border: 1px solid rgba(231, 207, 159, .55); border-radius: 2px; color: inherit; font-size: 8.5px; line-height: 13px; letter-spacing: .08em; }
.lang-drop { position: relative; }
.lang-drop__btn { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; padding: 0 10px; font-size: 11.5px; letter-spacing: .22em; text-transform: uppercase; color: var(--soft); transition: color .3s; }
.lang-drop__btn:hover, .lang-drop__btn[aria-expanded="true"] { color: var(--ivory); }
.lang-drop__btn svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; transition: transform .3s var(--ease); }
.lang-drop__btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.lang-drop__menu { position: absolute; right: 0; top: calc(100% + 10px); z-index: 40; display: grid; min-width: 150px; padding: 6px; border-radius: 18px; border: 1px solid rgba(239, 230, 216, .1); background: rgba(38, 27, 20, .96); box-shadow: 0 18px 50px rgba(0, 0, 0, .45); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }
.lang-drop__menu button { text-align: left; padding: 11px 14px; border-radius: 12px; font-size: 14px; color: var(--soft); transition: background-color .25s, color .25s; }
.lang-drop__menu button:hover { background: rgba(239, 230, 216, .06); color: var(--ivory); }
.lang-drop__menu button[aria-pressed="true"] { color: var(--ivory); }
.lang-drop__menu button[aria-pressed="true"]::after { content: ' ·'; color: var(--gold); }
.bag-btn { align-items: center; gap: 10px; min-height: 44px; padding: 0 22px; border-radius: 999px; background: var(--gold-light); color: var(--night); font-size: 11.5px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; white-space: nowrap; transition: background-color .3s, transform .3s var(--ease); }
.bag-btn:hover { background: #f3e0b8; }
.head .bag-btn .count { position: static; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--night); color: var(--gold-light); font-size: 10.5px; font-weight: 500; line-height: 20px; letter-spacing: 0; }
.lang-switch { display: inline-flex; align-items: center; gap: 2px; font-size: 12px; letter-spacing: .14em; }
.lang-switch button { padding: 8px 6px; color: var(--mute); }
.lang-switch button[aria-pressed="true"] { color: var(--ivory); text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 6px; }
/* The page starts under the bar; the home hero runs behind it. */
#main { padding-top: var(--head); }
.is-home #main { padding-top: 0; }
@media (min-width: 900px) {
  .head { padding-top: 12px; }
  .head__in { height: 60px; padding: 0 8px 0 24px; gap: 20px; }
  .head__nav { display: flex; }
  .head__tools .ai-btn, .head__tools .bag-btn { display: inline-flex; }
}
@media (min-width: 900px) and (max-width: 1099.98px) {
  .head__nav a { padding: 0 7px; letter-spacing: .12em; }
  .head__tools .ai-btn { letter-spacing: .14em; padding: 0 4px; }
  .bag-btn { padding: 0 16px; letter-spacing: .14em; }
}
@media (min-width: 1240px) {
  .head__in { display: grid; grid-template-columns: 1fr auto 1fr; padding-left: 28px; } /* the pieces sit exactly in the middle */
  .head .logo { justify-self: start; }
  .head__tools { justify-self: end; }
}

/* Mobile dock with labels: menu, ask KORE, bag */
.dock { position: fixed; left: 0; right: 0; bottom: 0; z-index: 35; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; align-items: stretch; height: var(--dock); padding: 0 max(4px, env(safe-area-inset-right, 0px)) env(safe-area-inset-bottom, 0px) max(4px, env(safe-area-inset-left, 0px)); background: rgba(38, 27, 20, .97); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-top: 1px solid var(--line); }
.dock__item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-width: 0; color: var(--soft); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; }
.dock__item svg { width: 21px; height: 21px; }
.dock__icon { position: relative; display: grid; place-items: center; }
.dock__icon .count { top: -6px; right: -10px; }
.dock__pill { position: relative; display: grid; place-items: center; width: 46px; height: 26px; border: 1px solid var(--gold); border-radius: 13px; color: var(--gold-light); }
.dock__pill svg { width: 16px; height: 16px; }
.dock__pill .ai-badge { position: absolute; top: -7px; right: -10px; font-size: 7.5px; }
.dock__item--ai { color: var(--gold-light); }
@media (min-width: 900px) { .dock { display: none; } }

/* Hero (Kimberley, 14.11.2026: "ich will dass die frau die ganze startseite einnimmt und die schrift obendrüber"):
   the photo fills the first screen under the header, the text lies over it. Wide screens show the wide photo (Model B,
   1672 px: the woman on the left, a calm wall on the right where the text sits on a soft dark wash); phones and upright
   tablets show the woman of the 4:5 photo edge to edge (1122 px, sharp at 3x) with the text over its lower edge, below
   the pendant. The one exception to the
   pixel rule: on retina laptops the full-width photo is shown larger than its 1672 px until the original file arrives. */
.hero { position: relative; overflow: hidden; background: var(--night); }
.hero__media { display: block; position: relative; aspect-ratio: 4 / 5; max-height: 80svh; width: 100%; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0%; }
.hero__media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(38, 27, 20, 0) 74%, rgba(38, 27, 20, .6) 90%, var(--night) 100%); pointer-events: none; }
.hero__text { position: relative; z-index: 1; display: grid; justify-items: start; gap: 20px; margin-top: -44px; padding-bottom: 56px; }
.hero h1 { font-family: var(--display); font-weight: 400; font-size: clamp(36px, 4.4vw, 72px); line-height: 1.06; letter-spacing: .05em; text-transform: uppercase; text-wrap: balance; text-shadow: 0 1px 24px rgba(20, 14, 10, .35); }
.hero .lead { max-width: 36ch; color: var(--ivory); }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }
.hero__status { font-size: 12.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--soft); }
@media (min-width: 640px) and (min-aspect-ratio: 1 / 1) {
  .hero { height: max(560px, min(100svh, 1100px)); }
  .hero__media { position: absolute; inset: 0; aspect-ratio: auto; max-height: none; }
  .hero__media img { object-position: 18% 30%; }
  .hero__media::after { background: linear-gradient(270deg, rgba(38, 27, 20, .82) 0%, rgba(38, 27, 20, .6) 26%, rgba(38, 27, 20, .18) 48%, rgba(38, 27, 20, 0) 60%), linear-gradient(0deg, var(--night) 0%, rgba(38, 27, 20, .82) 7%, rgba(38, 27, 20, .4) 18%, rgba(38, 27, 20, 0) 34%); } /* the photo runs out into the page below, no hard edge (Kimberley 14.11.2026: "der übergang muss fließender sein") */
  .hero__text { height: 100%; margin-top: 0; padding-block: calc(var(--head) + 24px) 48px; align-content: center; justify-items: start; justify-content: end; grid-template-columns: min(100%, 500px, 40vw); }
}
@media (min-width: 900px) and (min-aspect-ratio: 1 / 1) {
  .hero__text { gap: 28px; grid-template-columns: min(100%, 540px, 40vw); }
}
/* Windows wider than the photo (16:9 and up): filling the width would cut her head (the photo already ends just above the
   hair; Kimberley, 14.11.2026: "dass der kopf halb abgeschnitten ist"). The photo then keeps its full height, sits on the
   left and its right side fades into the night, where the text stands. */
@media (min-width: 640px) and (min-aspect-ratio: 16 / 9) {
  .hero__media img { position: absolute; left: 0; top: 0; width: auto; height: 100%; max-width: none; object-fit: cover; -webkit-mask-image: linear-gradient(90deg, #000 64%, transparent 100%); mask-image: linear-gradient(90deg, #000 64%, transparent 100%); }
}

/* The evening photo with the woman behind every page (Kimberley, 14.11.2026: "benutze das foto für den hintergrund der
   seite", choice "Hinter der ganzen Seite", then "mach auf allen seiten die frau als hintergrund"). It stays still while the
   page scrolls over it, under a dark veil so the text and the jewellery photos stay calm and readable. The homepage keeps
   its lighter veil under the hero (the first section fades in from the night of the hero); every other page, with more
   running text, has a darker one: measured over the brightest spot (the sun), running text stays at 5.8:1 or more and
   small muted text at about 4.5:1. Second exception to the pixel rule: the photo (1672 px, the version that came through
   the chat) is shown larger than its pixels on phones, retina and very wide screens; the veil hides the softness, and the
   original file would make it sharp. Text pages (page.css) carry the same rule. */
body { background: transparent; --veil-a: .8; --veil-b: .84; --veil-c: .9; }
body.is-home { --veil-a: .66; --veil-b: .74; --veil-c: .86; }
body::before { content: ''; position: fixed; left: 0; right: 0; top: 0; height: 100lvh; z-index: -1; pointer-events: none; background: linear-gradient(180deg, rgb(38 27 20 / var(--veil-a)) 0%, rgb(38 27 20 / var(--veil-b)) 55%, rgb(38 27 20 / var(--veil-c)) 100%), url(../media/hero-abend.webp) 79% 62% / cover no-repeat var(--night); }
.is-home .hero + .signature { position: relative; }
.is-home .hero + .signature::before { content: ''; position: absolute; top: 0; left: 50%; width: 100vw; height: min(360px, 45vh); transform: translateX(-50%); z-index: -1; pointer-events: none; background: linear-gradient(180deg, var(--night) 0, rgba(38, 27, 20, 0) 100%); }

/* The three signature pieces: equal photos in one row on desktop, a swipeable row on phones */
.signature { padding-block: clamp(40px, 6vw, 96px) calc(var(--section) / 2); }
.sig__list { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gut); margin-inline: calc(-1 * var(--gut)) calc(-1 * var(--gut-r)); padding-inline: var(--gut) var(--gut-r); scrollbar-width: none; }
.sig__list::-webkit-scrollbar { display: none; }
.sig__item { flex: 0 0 min(84%, 420px); scroll-snap-align: start; }
.sig__link { display: grid; gap: 8px; }
.sig__media { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; margin-bottom: 14px; background: var(--surface); }
.sig__media img { width: 100%; height: 100%; object-fit: cover; }
.sig__media.is-small, .card__media.is-small { display: grid; place-items: center; }
.sig__media.is-small img, .card__media.is-small img { height: auto; object-fit: contain; }
.sig__name { font-family: var(--display); font-weight: 400; font-size: clamp(15px, 1.35vw, 19px); line-height: 1.3; letter-spacing: .09em; text-transform: uppercase; }
@media (min-width: 600px) { .sig__name { letter-spacing: .12em; } }
.sig__more { justify-self: start; font-size: 12.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--soft); padding-bottom: 4px; background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; transition: color .3s; }
.sig__link:hover .sig__more, .sig__link:focus-visible .sig__more { color: var(--ivory); }
@media (min-width: 900px) {
  .sig__list { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--grid-gap); overflow: visible; margin-inline: 0; padding-inline: 0; } /* all listed pieces in one row */
  .sig__link { grid-template-rows: auto auto 1fr; height: 100%; }
  .sig__name { min-height: 2.6em; } /* names of one or two lines: the links below stay on one line across the row */
  .sig__more { align-self: start; }
}

/* Home: the sections after the pieces (Kimberley, 14.11.2026: "ich will auf der startseite etwas mehr haben … mach mir ne
   ästhetische seite"). Real photos only, each never larger than its own pixels (--dpr), text beside them, no boxes. */
.sig__head { display: grid; justify-items: center; gap: 14px; text-align: center; margin-bottom: clamp(36px, 5vw, 72px); }
.sig__title { font-family: var(--display); font-weight: 400; font-size: clamp(22px, 2.2vw, 32px); line-height: 1.2; letter-spacing: .08em; text-transform: uppercase; text-wrap: balance; max-width: 24ch; }
.sig__lead { color: var(--soft); max-width: 40ch; }
/* Rework (Kimberley, 14.11.2026: "foto dimensionen gut … übergänge fließend … clean und aufgeräumt"): every photo on the
   home page has the size of one of the piece cards (4:5, one column of the same four-column grid); each section
   after the pieces is two photos and a text, alternating sides; sections follow one rhythm (--section) with no lines. */
:root { --grid-gap: 16px; --section: clamp(72px, 9vw, 136px); }
.ed, .faq-home { padding-block: calc(var(--section) / 2); }
.ed__in { display: grid; gap: 32px; align-items: center; }
.ed__media { margin: 0; position: relative; overflow: hidden; background: var(--surface); width: min(100%, calc(1312px / var(--dpr))); justify-self: center; }
.ed__media img { width: 100%; height: auto; }
.ed__text { display: grid; gap: 18px; justify-items: start; align-content: center; }
.ed__title { font-family: var(--display); font-weight: 400; font-size: clamp(22px, 2.2vw, 32px); line-height: 1.2; letter-spacing: .08em; text-transform: uppercase; text-wrap: balance; }
.ed__lead { color: var(--soft); max-width: 36ch; }
.ed__links { display: flex; flex-wrap: wrap; gap: 12px 28px; margin-top: 4px; }
.ed__link { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--ivory); padding-bottom: 4px; background: linear-gradient(var(--gold), var(--gold)) 0 100% / 100% 1px no-repeat; transition: color .3s; }
.ed__link:hover { color: var(--gold-light); }
.pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--grid-gap); }
.pair figure { margin: 0; display: grid; gap: 10px; align-content: start; justify-items: center; }
.pair__media { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; background: var(--surface); width: min(100%, calc(1122px / var(--dpr))); }
.pair__media img { width: 100%; height: 100%; object-fit: cover; }
.pair figcaption { justify-self: start; font-size: 11.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--soft); }
@media (min-width: 900px) {
  :root { --grid-gap: 28px; }
  /* the same four columns as the row of pieces: two photos span two columns, the text the other two */
  .ed__in { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--grid-gap); }
  /* the two photos take three of the four columns, so the pieces can be seen (Kimberley 14.11.2026: "das muss etwas größer
     das sieht man gar nicht"); each photo is still never wider than its own pixels (--dpr in .pair__media) */
  .ed .pair { grid-column: 1 / span 3; }
  .ed__text { grid-column: 4 / span 1; padding-left: clamp(16px, 2.4vw, 40px); }
  .ed--flip .pair { grid-column: 2 / span 3; }
  .ed--flip .ed__text { grid-column: 1 / span 1; grid-row: 1; padding-left: 0; padding-right: clamp(16px, 2.4vw, 40px); justify-self: end; }
}
.perks { padding-block: calc(var(--section) / 4); }
.perks__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 20px; }
.perks__item a { display: grid; gap: 4px; align-content: start; height: 100%; padding-block: 26px; }
.perks__item:nth-child(n+3) a { border-top: 1px solid var(--line); }
.perks__item strong { font-family: var(--display); font-weight: 400; font-size: 14px; line-height: 1.35; letter-spacing: .12em; text-transform: uppercase; color: var(--ivory); transition: color .3s; }
.perks__item span { font-size: 13.5px; color: var(--soft); }
.perks__item a:hover strong { color: var(--gold-light); }
@media (min-width: 900px) {
  .perks__list { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 0; }
  .perks__item:nth-child(n+3) a { border-top: 0; }
  .perks__item a { padding: 34px 24px; }
  .perks__item:first-child a { padding-left: 0; }
  .perks__item + .perks__item a { border-left: 1px solid var(--line); }
}
.faq-home__in { display: grid; gap: 28px; }
.faq-home__head { display: grid; gap: 16px; justify-items: start; align-content: start; }
@media (min-width: 900px) { .faq-home__in { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(48px, 6vw, 112px); } }
.acc p { padding: 0 0 22px; color: var(--soft); font-size: 15px; max-width: 62ch; }
.closer { padding-block: var(--section); background: radial-gradient(ellipse 60% 90% at 50% 100%, rgba(201, 166, 107, .08), rgba(201, 166, 107, 0) 70%); }
.closer__in { display: grid; justify-items: center; text-align: center; gap: 20px; }
.closer__title { font-family: var(--display); font-weight: 400; font-size: clamp(22px, 2.2vw, 32px); line-height: 1.15; letter-spacing: .08em; text-transform: uppercase; text-wrap: balance; }
.closer__text { color: var(--soft); max-width: 40ch; }
/* Before the shop opens (no Stripe key on the server) the launch list stands in for ordering; shell.js sets .shop-open. */
html.shop-open .prelaunch-only, html:not(.shop-open) .open-only { display: none !important; }

/* Launch list window and the launch-list forms (also in the bag) */
.launch__lead { color: var(--soft); margin-bottom: 22px; max-width: 40ch; }
.notify { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; width: 100%; max-width: 460px; text-align: left; }
.notify__row { display: flex; align-items: stretch; border-bottom: 1px solid var(--line-strong); }
.notify input { flex: 1; min-width: 0; min-height: 52px; padding: 0; background: transparent; border: 0; font-size: 16px; color: var(--ivory); }
.notify input::placeholder { color: var(--mute); }
.notify input:focus { outline: none; }
.notify__row:focus-within { border-bottom-color: var(--gold-light); box-shadow: 0 1px 0 var(--gold-light); }
.notify__row .btn { min-height: 52px; padding: 0 0 0 14px; background: transparent; border: 0; color: var(--gold-light); letter-spacing: .14em; }
.notify__row .btn:hover { background: transparent; color: var(--ivory); }
.notify__note { font-size: 13px; color: var(--mute); line-height: 1.6; }
.notify__note a { text-decoration: underline; text-underline-offset: 3px; }
.notify__status { min-height: 1.5em; font-size: 14.5px; color: var(--soft); }

/* Footer in her usual pattern (as on the HJR site; Kimberley, 14.11.2026, about the old one: "sieht nicht clean aus"):
   brand + one line + launch button | Kollektion | Service | Kontakt, all columns starting on one line, small uppercase
   headings; the legal links in the bottom line. A calm, almost solid ground: the evening photo only shimmers through. */
.foot { border-top: 1px solid var(--line); padding-block: clamp(56px, 7vw, 88px) 28px; font-size: 14.5px; color: var(--soft); background: rgb(38 27 20 / .9); }
.foot__in { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 24px; padding-bottom: clamp(40px, 5vw, 64px); }
.foot__brand { grid-column: 1 / -1; display: grid; justify-items: start; align-content: start; gap: 14px; }
.foot .logo { color: var(--ivory); font-size: 22px; }
.foot__line { margin: 0; max-width: 34ch; color: var(--mute); line-height: 1.65; }
.foot__btn { margin-top: 6px; min-height: 46px; padding: 0 24px; }
.foot .foot__h { margin: 0 0 16px; font: 500 11.5px/1.4 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--mute); }
.foot__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.foot__col a, .foot__legal a, .foot__legal button { color: var(--soft); transition: color .25s; }
.foot a:hover, .foot button:hover { color: var(--ivory); }
.foot__col--contact { grid-column: 1 / -1; }
.foot__base { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 14px 28px; color: var(--mute); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; padding-top: 22px; border-top: 1px solid var(--line); }
.foot__legal { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.foot__legal button { font: inherit; letter-spacing: inherit; text-transform: inherit; }
@media (min-width: 900px) {
  .foot__in { grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); gap: 48px; }
  .foot__brand, .foot__col--contact { grid-column: auto; }
}

/* Sheets (dialogs): bag, menu, assistant, size guide */
.sheet { position: fixed; inset: 0 0 0 auto; width: min(440px, 100vw); max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; padding: 0; border: 0; border-left: 1px solid var(--line); background: var(--night-2); color: var(--ivory); display: none; flex-direction: column; box-shadow: -30px 0 80px -30px rgba(0, 0, 0, .7); transform: translateX(100%); transition: transform .34s var(--ease); }
.sheet[open] { display: flex; }
.sheet.is-open { transform: none; }
.sheet::backdrop { background: rgba(0, 0, 0, 0); transition: background .34s; }
.sheet.is-open::backdrop { background: rgba(0, 0, 0, .55); }
.sheet--left { inset: 0 auto 0 0; border-left: 0; border-right: 1px solid var(--line); transform: translateX(-100%); }
.sheet--center { inset: 0; margin: auto; width: min(560px, calc(100vw - 32px)); height: fit-content; max-height: calc(100dvh - 48px); border: 1px solid var(--line); transform: translateY(16px); opacity: 0; transition: transform .34s var(--ease), opacity .34s; }
.sheet--center.is-open { transform: none; opacity: 1; }
.sheet__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 68px; padding: 8px 12px 8px 24px; border-bottom: 1px solid var(--line); padding-top: max(8px, env(safe-area-inset-top, 0px)); }
.sheet__title { font-family: var(--display); font-weight: 400; font-size: 18px; letter-spacing: .16em; text-transform: uppercase; }
.sheet__title .muted { font-family: var(--sans); font-size: 15px; letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.sheet__body { flex: 1; overflow-y: auto; padding: 22px 24px; overscroll-behavior: contain; }
.sheet__foot { border-top: 1px solid var(--line); padding: 18px 24px max(18px, env(safe-area-inset-bottom, 0px)); display: grid; gap: 12px; background: var(--night-2); }
.sheet__foot > * { min-width: 0; }

.sheet:focus, .sheet:focus-visible { outline: none; } /* the sheet itself holds the focus on opening */
html[data-input="pointer"] :focus-visible, html[data-input="pointer"] .opt input:focus-visible + label { outline: none; } /* rings only for the keyboard */
/* Menu (phones): the pieces as a 2 × 2 grid of 4:5 photos, launch list as a button, legal links at the foot. Photos and
   button and foot scroll as one, so on a short screen (Instagram's browser) photos and button stay in view, the legal links
   follow below; on a tall one the foot sits at the bottom. */
.menu__body { flex: 1; display: flex; flex-direction: column; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.menu__nav { display: grid; align-content: start; gap: 16px; padding: 22px 24px 26px; }
.menu__body .menu__foot { margin-top: auto; }
.menu__group { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--mute); }
.menu__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 12px; margin: 0; padding: 0; list-style: none; }
.menu__piece { display: grid; gap: 11px; }
.menu__media { display: block; aspect-ratio: 4 / 5; overflow: hidden; background: var(--surface); }
.menu__media img { width: 100%; height: 100%; object-fit: cover; transition: opacity .3s var(--ease); }
.menu__piece:active .menu__media img { opacity: .8; }
.menu__name { font-family: var(--display); font-size: 12.5px; line-height: 1.35; letter-spacing: .12em; text-transform: uppercase; color: var(--ivory); text-wrap: balance; transition: color .3s; }
.menu__piece[aria-current="page"] .menu__name { color: var(--gold-light); }
@media (hover: hover) { .menu__piece:hover .menu__name { color: var(--gold-light); } }
.menu__launch { width: 100%; margin-top: 8px; }
.menu__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 20px; padding: 12px 24px max(12px, env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--line); font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--mute); }
.menu__foot .lang-switch { font-size: 11.5px; }

.bag__list { display: grid; gap: 24px; }
.bag__item { display: grid; grid-template-columns: 84px 1fr; gap: 16px; }
.bag__item img { width: 84px; height: 105px; object-fit: cover; background: var(--surface); }
.bag__info { display: grid; gap: 4px; align-content: start; }
.bag__name { font-family: var(--display); font-size: 15px; letter-spacing: .12em; text-transform: uppercase; line-height: 1.4; }
.bag__variant { font-size: 13.5px; color: var(--mute); }
.bag__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 6px; }
.bag__price { font-size: 14.5px; color: var(--ivory); font-variant-numeric: tabular-nums; }
.bag__remove { justify-self: start; margin-top: 2px; font-size: 13px; }
.bag__empty { display: grid; justify-items: start; gap: 18px; padding-top: 12px; color: var(--mute); }
.bag__total { display: flex; justify-content: space-between; align-items: baseline; font-size: 13px; letter-spacing: .18em; text-transform: uppercase; }
.bag__total strong { font-weight: 400; font-size: 15px; letter-spacing: 0; color: var(--ivory); font-variant-numeric: tabular-nums; }
.bag__hint, .bag__prelaunch { font-size: 13.5px; color: var(--mute); line-height: 1.6; }
.bag__hint:empty { display: none; }
/* Checkout in the bag (server/shop.mjs, Stripe) and the page after paying */
.bag__sum { display: grid; gap: 6px; margin: 0; font-size: 14px; }
.bag__sum div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.bag__sum dt { color: var(--soft); }
.bag__sum dd { margin: 0; color: var(--ivory); font-variant-numeric: tabular-nums; }
.bag__grand { margin-top: 4px; padding-top: 10px; border-top: 1px solid var(--line); }
.bag__grand dt { color: var(--ivory); font-size: 12.5px; letter-spacing: .14em; text-transform: uppercase; }
.bag__grand dd { font-size: 16px; }
.bag__checkout { width: 100%; }
.bag__checkout:disabled { opacity: .5; cursor: not-allowed; }
.bag__note { font-size: 12.5px; color: var(--mute); line-height: 1.6; }
.bag__note a { color: var(--soft); text-decoration: underline; text-underline-offset: 3px; }
.bag__test { font-size: 12px; letter-spacing: .06em; color: var(--gold); }
.order { display: grid; justify-items: start; gap: 22px; max-width: 760px; padding-block: clamp(48px, 7vw, 112px) clamp(80px, 9vw, 140px); }
.order__title { font-family: var(--display); font-weight: 400; font-size: clamp(26px, 2.6vw, 38px); line-height: 1.2; letter-spacing: .08em; text-transform: uppercase; text-wrap: balance; }
.order__lead { color: var(--soft); max-width: 52ch; }
.order__summary { width: 100%; display: grid; gap: 14px; padding-block: 20px; border-block: 1px solid var(--line); }
.order__no { color: var(--soft); }
.order__no strong { font-weight: 400; color: var(--ivory); letter-spacing: .06em; }
.order__items { display: grid; gap: 12px; }
.order__items li { display: flex; justify-content: space-between; gap: 16px; font-variant-numeric: tabular-nums; }
.order__items small { display: block; font-size: 13px; color: var(--mute); }
.order__total { display: flex; justify-content: space-between; align-items: baseline; padding-top: 12px; border-top: 1px solid var(--line); }
.order__total strong { font-weight: 400; font-size: 17px; color: var(--ivory); }
.order__links { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-top: 8px; }
.bag .notify { max-width: none; }
.stepper { display: inline-flex; align-items: center; border: 1px solid var(--line-strong); height: 36px; }
.stepper button { width: 34px; height: 100%; display: grid; place-items: center; }
.stepper button:disabled { opacity: .35; cursor: default; }
.stepper svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.4; }
.stepper output { min-width: 22px; text-align: center; font-size: 14px; font-variant-numeric: tabular-nums; }

/* Assistant */
.ai__title { display: flex; align-items: center; gap: 10px; white-space: nowrap; min-width: 0; }
.ai__title .spark { width: 18px; height: 18px; fill: none; stroke: var(--gold-light); stroke-width: 1.4; stroke-linecap: round; }
.ai__title .ai-badge { font-family: var(--sans); letter-spacing: .06em; }
.ai__title .spark, .ai__title .ai-badge { flex: none; }
.ai__title > span:not(.ai-badge) { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ai .sheet__head { gap: 16px; }
@media (max-width: 480px) { .ai__title { font-size: 14px; letter-spacing: .1em; gap: 8px; } }
.ai__tools { gap: 0; }
.ai__tools { display: flex; align-items: center; gap: 6px; }
.ai__tools .link-btn { white-space: nowrap; font-size: 13px; }
.ai__log { display: flex; flex-direction: column; gap: 16px; }
.ai__msg { max-width: 90%; font-size: 15px; line-height: 1.65; color: var(--soft); }
.ai__msg strong { color: var(--ivory); font-weight: 500; }
.ai__msg p + p { margin-top: .6em; }
.ai__msg--bot { align-self: flex-start; }
.ai__msg--me { align-self: flex-end; background: var(--surface); color: var(--ivory); padding: 10px 14px; border-radius: 14px 14px 2px 14px; }
.ai__msg--error p { color: var(--mute); }
.ai__msg.is-typing p { color: var(--mute); animation: pulse 1.4s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .45; } }
.ai__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.ai__card { display: grid; grid-template-columns: 56px 1fr auto; align-items: center; gap: 12px; margin-top: 10px; padding: 8px 12px 8px 8px; background: var(--surface); border: 1px solid var(--line); transition: border-color .3s; }
.ai__card:hover { border-color: var(--gold); }
.ai__card img { width: 56px; height: 70px; object-fit: cover; background: var(--night); }
.ai__card > span:nth-child(2) { display: grid; font-size: 13px; color: var(--mute); line-height: 1.5; }
.ai__card strong { font-family: var(--display); font-weight: 400; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--ivory); }
.ai__view { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); }
.ai__row { display: flex; align-items: flex-end; gap: 8px; }
.ai__row textarea { flex: 1; min-width: 0; min-height: 50px; max-height: 140px; padding: 13px 14px; resize: none; background: var(--surface); border: 1px solid var(--line-strong); border-radius: 0; font-size: 16px; line-height: 1.4; color: var(--ivory); }
.ai__row textarea::placeholder { color: var(--mute); }
.ai__row textarea:focus { outline: none; border-color: var(--gold); }
.ai__send { padding: 0; width: 50px; min-height: 50px; }
.ai__send svg { width: 18px; height: 18px; }
.ai__note { font-size: 12px; color: var(--mute); line-height: 1.55; }
.ai__note a { text-decoration: underline; text-underline-offset: 2px; }

/* Toast */
.toast { position: fixed; left: 50%; bottom: calc(var(--dock) + 20px); z-index: 60; transform: translate(-50%, 20px); opacity: 0; pointer-events: none; background: var(--gold-light); color: var(--night); padding: 12px 22px; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; transition: opacity .3s, transform .4s var(--ease); white-space: nowrap; }
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* Product page */
.crumbs { padding-block: 22px 14px; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--mute); }
.crumbs ol { display: flex; flex-wrap: wrap; gap: 10px; }
.crumbs li + li::before { content: '/'; margin-right: 10px; color: var(--line-strong); }
.crumbs a:hover { color: var(--ivory); }
.pdp { display: grid; gap: 32px; padding-bottom: clamp(88px, 9vw, 140px); }
/* Product page as one block (Kimberley, 14.11.2026: "das sieht ganz unaufgeräumt aus"): the breadcrumb sits in the grid,
   flush with the photo, so crumbs, photo and details share their edges; the details column is never wider than the photo. */
.pdp > .crumbs { grid-column: 1 / -1; padding-block: 22px 0; margin-bottom: -14px; }
/* Wide screens: the photo column is as wide as the photos can be shown sharply on this screen (1122 px photos: 561 px on
   a retina laptop), the details beside it; the two together sit centred. */
@media (min-width: 900px) { .pdp { grid-template-columns: min(calc(1122px / var(--dpr)), 55%) minmax(0, 440px); justify-content: center; column-gap: clamp(40px, 4.5vw, 80px); row-gap: 22px; align-items: start; } .pdp > .crumbs { margin-bottom: 0; } }

/* Gallery: one swipeable photo at a time on phones, all photos one below the other on wider screens */
.gallery { min-width: 0; }
.stage { position: relative; min-width: 0; }
.stage__empty { display: grid; place-items: center; aspect-ratio: 4 / 5; width: 100%; background: var(--surface); color: var(--mute); font-size: 12.5px; letter-spacing: .16em; text-transform: uppercase; }
@media (min-width: 900px) { .stage__empty { grid-column: 1 / -1; } }
.bag__nopic, .ai__nopic { display: block; width: 84px; height: 105px; background: var(--surface); }
.ai__nopic { width: 56px; height: 70px; }
.stage__note { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; font-size: 14px; color: var(--soft); }
.stage__note::before { content: ''; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); }
.stage__track { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.stage__track::-webkit-scrollbar { display: none; }
/* A slide is never wider than the photos can fill sharply (tablets: the next photo peeks in). */
.stage__slide { position: relative; flex: 0 0 min(100%, calc(1122px / var(--dpr))); aspect-ratio: 4 / 5; scroll-snap-align: start; overflow: hidden; cursor: zoom-in; background: var(--surface); }
.stage__slide img { width: 100%; height: 100%; object-fit: cover; }
.stage__slide.is-small { display: grid; place-items: center; }
.stage__slide.is-small img { height: auto; max-width: 100%; max-height: 100%; object-fit: contain; } /* width set in product.js */
.stage__shown { position: absolute; left: 12px; top: 12px; padding: 7px 11px; background: rgba(38, 27, 20, .78); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ivory); pointer-events: none; }
.stage__zoom { position: absolute; top: 12px; left: calc(min(100%, 1122px / var(--dpr)) - 56px); z-index: 2; background: rgba(38, 27, 20, .72); color: var(--ivory); }
.stage__dots { display: flex; justify-content: center; gap: 8px; padding-top: 14px; }
.stage__dots span { width: 6px; height: 6px; border-radius: 50%; background: var(--line-strong); transition: background .3s; }
.stage__dots span[aria-current="true"] { background: var(--ivory); }
@media (min-width: 900px) {
  .stage__track { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; overflow: visible; background: none; }
  .stage__dots { display: none; }
}
.viewer { position: relative; aspect-ratio: 4 / 5; background: radial-gradient(ellipse at 50% 45%, var(--glow), var(--surface) 70%); }
.viewer canvas { width: 100%; height: 100%; display: block; touch-action: none; }
.viewer__hint { position: absolute; left: 12px; bottom: 12px; font-size: 12.5px; color: var(--mute); }

.info { display: grid; gap: 24px; align-content: start; }
@media (min-width: 900px) { .info { position: sticky; top: calc(var(--head) + 24px); } }
.info h1 { font-family: var(--display); font-weight: 400; font-size: clamp(28px, 2.8vw, 42px); line-height: 1.15; letter-spacing: .06em; text-transform: uppercase; text-wrap: balance; }
.info__price { font-size: 17px; letter-spacing: .02em; color: var(--ivory); font-variant-numeric: tabular-nums; margin-top: -8px; }
.info__price.is-tbd { color: var(--soft); }
.info__vat, .bag__vat { font-size: 12.5px; letter-spacing: .04em; text-transform: none; color: var(--mute); }
.info .lead { font-size: 16px; }
.opt { display: grid; gap: 12px; border: 0; margin: 0; padding: 0; min-width: 0; }
.opt legend { padding: 0; font-size: 12.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--mute); margin-bottom: 14px; }
.opt legend b { font-weight: 400; color: var(--ivory); }
.opt__row { display: flex; flex-wrap: wrap; gap: 10px; }
.opt__row--size { display: grid; grid-template-columns: repeat(auto-fit, minmax(46px, 1fr)); gap: 8px; max-width: 400px; }
.swatch { position: relative; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; }
.swatch::before { content: ''; width: 28px; height: 28px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .25); }
.swatch[data-finish="gold"]::before { background: linear-gradient(135deg, #f3dfae, #c99d5a 45%, #9b743c 75%, #dcbb7e); }
.swatch[data-finish="silver"]::before { background: linear-gradient(135deg, #fff, #cfcfd4 45%, #96969c 75%, #ebebee); }
.swatch::after { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 1px solid transparent; transition: border-color .3s; }
.opt input:checked + .swatch::after { border-color: var(--gold-light); }
.seg { display: inline-flex; align-items: center; min-height: 46px; padding: 0 22px; border: 1px solid var(--line-strong); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; cursor: pointer; transition: border-color .3s, background .3s; }
.seg:hover { border-color: var(--gold); }
.opt input:checked + .seg { border-color: var(--gold-light); background: var(--surface); }
.size { display: grid; place-items: center; min-width: 0; min-height: 46px; padding: 0 10px; border: 1px solid var(--line-strong); font-size: 14px; font-variant-numeric: tabular-nums; cursor: pointer; transition: border-color .3s, background .3s, color .3s; }
.size:hover { border-color: var(--gold); }
.opt input:checked + .size { border-color: var(--gold-light); background: var(--gold-light); color: var(--night); }
.opt__guide { justify-self: start; }
.opt input:focus-visible + label { outline: 1.5px solid var(--gold); outline-offset: 3px; }
.opt__error { font-size: 14px; color: #f0a48c; }
.add { width: 100%; min-height: 56px; }
.info__note { font-size: 14px; color: var(--mute); margin-top: -8px; }
.acc { border-top: 1px solid var(--line); }
.acc details { border-bottom: 1px solid var(--line); }
.acc summary { display: flex; justify-content: space-between; align-items: center; min-height: 58px; cursor: pointer; font-size: 12.5px; letter-spacing: .14em; text-transform: uppercase; list-style: none; }
.acc summary::-webkit-details-marker { display: none; }
.acc summary::after { content: ''; width: 11px; height: 11px; background: linear-gradient(var(--soft), var(--soft)) 50% / 11px 1px no-repeat, linear-gradient(var(--soft), var(--soft)) 50% / 1px 11px no-repeat; transition: transform .3s var(--ease); }
.acc details[open] summary::after { transform: rotate(45deg); }
.acc ul { display: grid; gap: 8px; padding: 0 0 22px; font-size: 15px; color: var(--soft); }
.acc li { padding-left: 18px; position: relative; }
.acc li::before { content: ''; position: absolute; left: 0; top: .82em; width: 8px; height: 1px; background: var(--line-strong); }
.ask { display: inline-flex; align-items: center; gap: 10px; justify-self: start; min-height: 44px; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-light); text-align: left; }
.ask .spark { flex: none; width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; }
.ask span { padding-bottom: 4px; border-bottom: 1px solid rgba(231, 207, 159, .45); }
.ask:hover span { border-bottom-color: var(--gold-light); }

/* More from the collection: the same four columns as the home page, the heading in the first, the other three pieces in
   the rest of the row; on the phone they scroll sideways like the pieces on the home page, so none sits alone in a row */
.more { padding-block: clamp(48px, 6vw, 96px) clamp(64px, 7vw, 112px); }
.more__in { display: grid; gap: 28px; }
.more__title { font-family: var(--display); font-weight: 400; font-size: clamp(20px, 1.8vw, 26px); line-height: 1.25; letter-spacing: .12em; text-transform: uppercase; color: var(--ivory); text-wrap: balance; }
.cards { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gut); margin-inline: calc(-1 * var(--gut)) calc(-1 * var(--gut-r)); padding-inline: var(--gut) var(--gut-r); scrollbar-width: none; }
.cards::-webkit-scrollbar { display: none; }
.cards > .card { flex: 0 0 min(64%, 320px); scroll-snap-align: start; }
@media (min-width: 900px) {
  .more__in { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--grid-gap); align-items: start; }
  .more__title { max-width: 12ch; }
  .cards { grid-column: 2 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--grid-gap); overflow: visible; margin-inline: 0; padding-inline: 0; }
}
.card { display: grid; align-content: start; gap: 6px; }
.card__media { position: relative; aspect-ratio: 4 / 5; overflow: hidden; margin-bottom: 10px; background: var(--surface); }
.card__media img { width: 100%; height: 100%; object-fit: cover; }
.card__name { font-family: var(--display); font-weight: 400; font-size: clamp(15px, 1.25vw, 17px); line-height: 1.3; letter-spacing: .1em; text-transform: uppercase; }
.card:hover .card__name { text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 5px; text-decoration-thickness: 1px; }

/* 3D on the real photos (depth.js): a soft light that follows the pointer while a photo is tilted */
.sig__media::after, .card__media::after, figure.stage__slide::after { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .5s var(--ease); background: radial-gradient(circle at var(--lx, 50%) var(--ly, 30%), rgba(255, 240, 214, .5), rgba(255, 240, 214, 0) 58%); mix-blend-mode: soft-light; }
.is-lit::after { opacity: 1; }

/* Size guide */
.guide .sheet__body { display: grid; gap: 14px; font-size: 15px; color: var(--soft); }
.guide .sheet__body p:first-child { color: var(--ivory); }

/* Zoom */
.lightbox { inset: 0; width: 100vw; height: 100dvh; max-width: none; border: 0; transform: none; opacity: 0; transition: opacity .25s; background: var(--night); box-shadow: none; }
.lightbox.is-open { opacity: 1; }
.lightbox__stage { position: relative; flex: 1; overflow: hidden; cursor: zoom-in; touch-action: none; }
.lightbox__stage.is-zoom { cursor: grab; }
.lightbox__stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: scale-down; transform-origin: 0 0; user-select: none; -webkit-user-drag: none; }
.lightbox__bar { position: absolute; top: max(10px, env(safe-area-inset-top, 0px)); left: 0; right: 0; display: flex; justify-content: space-between; align-items: center; padding: 0 12px 0 20px; z-index: 2; pointer-events: none; }
.lightbox__bar > * { pointer-events: auto; }
.lightbox__count { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--mute); }
.lightbox__nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; background: rgba(38, 27, 20, .72); }
.lightbox__nav--prev { left: 12px; }
.lightbox__nav--next { right: 12px; }
.lightbox__hint { position: absolute; bottom: max(14px, env(safe-area-inset-bottom, 0px)); left: 0; right: 0; text-align: center; font-size: 12px; color: var(--mute); pointer-events: none; }

/* Consent banner for Google Analytics (consent.js): Decline and Accept look exactly alike */
.consent { position: fixed; z-index: 70; left: 16px; right: 16px; bottom: calc(var(--dock, 0px) + 16px); display: flex; justify-content: center; }
.consent__in { max-width: 720px; padding: 22px 24px; background: #2e221a; color: #efe6d8; border: 1px solid #45362b; box-shadow: 0 22px 60px rgba(0, 0, 0, .5); }
.consent__title { margin: 0 0 8px; font-family: 'Marcellus', Georgia, serif; font-size: 17px; letter-spacing: .12em; text-transform: uppercase; }
.consent__body { margin: 0 0 18px; font-size: 14.5px; line-height: 1.6; color: #cfc3b2; max-width: none; }
.consent__body a { color: #efe6d8; text-decoration: underline; text-underline-offset: 3px; }
.consent__choice { display: flex; flex-wrap: wrap; gap: 12px; }
.consent__choice button { flex: 1 1 160px; min-height: 48px; padding: 0 22px; background: #e7cf9f; color: #261b14; border: 1px solid #e7cf9f; font: inherit; font-size: 12px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; cursor: pointer; }
.consent__choice button:hover { background: #f3e0b8; border-color: #f3e0b8; }
.consent :focus-visible { outline: 1.5px solid #c9a66b; outline-offset: 3px; }

/* Finer scale on computers (Kimberley, 14.11.2026: "alles sieht bisschen groß dargestellt aus"): smaller type, lower
   bars and buttons, a narrower page, and the product photo never taller than the window. Phones keep their sizes. */
@media (min-width: 900px) {
  :root { --head: 76px; }
  body { font-size: 15px; }
  .wrap { max-width: 1320px; }
  .head__in { height: 52px; padding: 0 6px 0 22px; }
  .head .logo { font-size: 19px; }
  .head__nav a { height: 36px; font-size: 11px; }
  .bag-btn { min-height: 38px; padding: 0 18px; font-size: 11px; }
  .lang-drop__btn { font-size: 11px; min-height: 38px; }
  .btn { min-height: 46px; padding: 0 26px; font-size: 11.5px; }
  .lead { font-size: clamp(15px, 1.05vw, 16.5px); }
  .title { font-size: clamp(24px, 2.2vw, 34px); }
  .hero h1 { font-size: clamp(32px, 3.6vw, 58px); }
  .sig__name { font-size: clamp(14px, 1.1vw, 16.5px); }
  .pdp { grid-template-columns: min(calc(1122px / var(--dpr)), 50%, calc((100svh - var(--head) - 72px) * .8)) clamp(300px, min(calc(1122px / var(--dpr)), 50%, calc((100svh - var(--head) - 72px) * .8)), 400px); }
  .info { gap: 28px; }
  .pdp { column-gap: clamp(72px, 7.5vw, 150px); row-gap: 34px; } /* more air between photo and text (Kimberley 14.11.2026: "sieht so gequetscht aus") */
  .info .opt legend { margin-bottom: 16px; }
  .info__price { margin-top: -4px; }
  .info h1 { font-size: clamp(24px, 2.1vw, 32px); }
  .info__price { font-size: 16px; }
  .info .lead { font-size: 15px; }
  .swatch { width: 38px; height: 38px; }
  .swatch::before { width: 25px; height: 25px; }
  .seg { min-height: 42px; padding: 0 20px; font-size: 11.5px; }
  .add { min-height: 50px; }
  .acc summary { min-height: 50px; font-size: 12px; }
  .acc ul { font-size: 14.5px; }
  .more__title { font-size: clamp(18px, 1.5vw, 22px); }
  .card__name { font-size: clamp(14px, 1.05vw, 15.5px); }
}
@media (min-width: 900px) and (min-aspect-ratio: 1 / 1) {
  .hero__text { grid-template-columns: min(100%, 480px, 40vw); gap: 24px; }
}

/* Finer scale on phones (Kimberley, 14.11.2026: "Bearbeite die Telefon Ansicht. Sieht alles viel zu groß und unaufgeräumt
   aus"): the same calm as the computer scale above. Smaller type and buttons, lower bars, the links of a section one under
   the other instead of wrapping, the service facts in plain words, a compact consent notice. Photos keep their sizes. */
@media (max-width: 899.98px) {
  :root { --head: 62px; --dock: calc(56px + env(safe-area-inset-bottom, 0px)); --section: 64px; --grid-gap: 12px; }
  body { font-size: 15px; line-height: 1.65; }
  .head { padding-top: 8px; }
  .head__in { height: 46px; padding: 0 2px 0 18px; }
  .head .logo { font-size: 18px; min-height: 40px; }
  .lang-drop__btn { min-height: 40px; font-size: 11px; letter-spacing: .18em; }
  .dock__item { gap: 3px; font-size: 9.5px; letter-spacing: .14em; }
  .dock__item svg { width: 19px; height: 19px; }
  .btn { min-height: 46px; padding: 0 22px; font-size: 11px; letter-spacing: .16em; }
  .lead { font-size: 15px; }
  .title, .sig__title, .ed__title, .closer__title, .family__title { font-size: 20px; letter-spacing: .08em; }
  /* Home */
  .hero__text { gap: 14px; margin-top: -28px; padding-bottom: 40px; }
  .hero h1 { font-size: 27px; letter-spacing: .06em; line-height: 1.12; }
  .hero .lead { font-size: 15px; max-width: 34ch; }
  .hero__actions { gap: 10px; margin-top: 4px; }
  .hero__status { font-size: 10.5px; letter-spacing: .16em; color: var(--mute); }
  .signature { padding-block: 24px calc(var(--section) / 2); }
  .sig__head { gap: 10px; margin-bottom: 26px; }
  .sig__lead { font-size: 15px; }
  .sig__list { gap: 12px; }
  .sig__item { flex-basis: min(70%, 340px); }
  .sig__media { margin-bottom: 10px; }
  .sig__link { gap: 6px; }
  .sig__name { font-size: 13.5px; letter-spacing: .1em; }
  .sig__more { font-size: 10.5px; letter-spacing: .16em; }
  .ed__in { gap: 22px; }
  .ed__text { gap: 12px; }
  .ed__lead { font-size: 15px; }
  .ed__links { flex-direction: column; align-items: flex-start; gap: 12px; margin-top: 6px; }
  .ed__link { font-size: 10.5px; letter-spacing: .16em; padding-bottom: 3px; }
  .pair figure { gap: 8px; }
  .pair figcaption { font-size: 10px; letter-spacing: .14em; line-height: 1.5; color: var(--mute); }
  .perks__item a { gap: 2px; padding-block: 18px; }
  .perks__item strong { font-family: var(--sans); font-size: 14px; font-weight: 400; letter-spacing: .01em; text-transform: none; }
  .perks__item span { font-size: 12.5px; color: var(--mute); }
  .faq-home__in { gap: 20px; }
  .faq-home__head { gap: 12px; }
  .acc summary { gap: 16px; min-height: 52px; font-size: 11.5px; letter-spacing: .1em; line-height: 1.45; }
  .acc summary::after { flex: none; }
  .acc p, .acc ul { font-size: 14.5px; }
  .closer__in { gap: 16px; }
  .closer__text { font-size: 15px; }
  /* Product page */
  .crumbs { font-size: 10.5px; letter-spacing: .12em; }
  .crumbs ol { gap: 8px; }
  .crumbs li + li::before { margin-right: 8px; }
  .pdp { gap: 24px; }
  .pdp > .crumbs { padding-block: 14px 0; margin-bottom: -12px; }
  .stage__dots { padding-top: 12px; }
  .info { gap: 20px; }
  .info h1 { font-size: 22px; letter-spacing: .07em; line-height: 1.2; }
  .info__price { font-size: 15px; margin-top: -6px; }
  .info .lead { font-size: 15px; }
  .opt legend { font-size: 11px; margin-bottom: 12px; }
  .swatch { width: 38px; height: 38px; }
  .swatch::before { width: 25px; height: 25px; }
  .seg { min-height: 42px; padding: 0 18px; font-size: 11px; }
  .add { min-height: 50px; }
  .info__note { font-size: 13px; }
  .more { padding-block: 40px 56px; }
  .more__in { gap: 20px; }
  .more__title { font-size: 16px; letter-spacing: .12em; }
  .cards > .card { flex-basis: min(56%, 280px); }
  .card { gap: 4px; }
  .card__media { margin-bottom: 8px; }
  .card__name { font-size: 13px; letter-spacing: .1em; }
  .card [data-from-price] { font-size: 13.5px; color: var(--soft); }
  /* Sheets: menu, bag, assistant */
  .sheet__head { min-height: 60px; padding-left: 20px; }
  .sheet__title { font-size: 16px; }
  .sheet__body { padding: 18px 20px; }
  .sheet__foot { padding-inline: 20px; }
  .menu__nav { gap: 14px; padding: 16px 20px 20px; }
  .menu__group { font-size: 11px; }
  .menu__grid { gap: 16px 12px; }
  .menu__launch { margin-top: 4px; }
  .menu__name { font-size: 12px; letter-spacing: .1em; }
  .menu__foot { padding-inline: 20px; }
  .bag__name { font-size: 13.5px; }
  .notify input { min-height: 48px; font-size: 16px; }
  .notify__row .btn { min-height: 48px; }
  /* Footer: same pattern, a size smaller */
  .foot { padding-block: 44px 24px; font-size: 14px; }
  .foot__in { gap: 32px 20px; padding-bottom: 32px; }
  .foot .logo { font-size: 19px; }
  .foot__line { font-size: 14px; }
  .foot__btn { min-height: 42px; padding: 0 20px; }
  .foot .foot__h { margin-bottom: 12px; font-size: 10.5px; }
  .foot__col ul { gap: 8px; }
  .foot__base { font-size: 11px; padding-top: 18px; }
  /* Consent: a small notice above the dock, the two equal buttons side by side */
  .consent { left: 10px; right: 10px; bottom: calc(var(--dock, 0px) + 10px); }
  .consent__in { padding: 16px 18px; }
  .consent__title { margin-bottom: 6px; font-size: 14px; }
  .consent__body { margin-bottom: 14px; font-size: 13px; line-height: 1.55; }
  .consent__choice { flex-wrap: nowrap; gap: 10px; }
  .consent__choice button { flex: 1 1 0; min-height: 42px; padding: 0 12px; font-size: 11px; letter-spacing: .14em; }
}

/* Smooth transitions: pages cross-fade into each other (header and dock stay where they are), photos fade in once they
   are decoded instead of popping in (site/js/shell.js). No scroll animations. Off with reduced motion. */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .38s; animation-timing-function: var(--ease); }
.head { view-transition-name: kore-head; }
.dock { view-transition-name: kore-dock; }
main img { transition: opacity .7s var(--ease); }
main img.is-loading { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}