@import url("fonts.css");
@import url("artikel.css");

/* =========================================================================
   Weninger Gems & Jewellery — Draft
   Design-Konzept "Lichtbrechung": tiefdunkler Grund, Gold als Fassung,
   spektrale Akzente als das, was ein Stein mit Licht macht.
   Vanilla CSS, keine Frameworks, keine externen Requests zur Laufzeit.
   ========================================================================= */

/* ---------- Tokens ---------- */
:root {
  --ink:      #08080c;
  --ink-2:    #0d0d14;
  --ink-3:    #14141e;
  --ink-4:    #1c1c28;

  --fg:       #eeebe4;
  --fg-dim:   #a6a29a;
  --fg-mute:  #6f6c66;

  --paper:    #f4f1ea;
  --paper-2:  #eae5da;
  --paper-fg: #17171d;
  --paper-dim:#54524d;
  /* Rahmenlinie auf hellem Grund: eine Spur dunkler als das Papier, warm —
     bewusst kein Schwarz und kein Grau, das würde die Steine erschlagen. */
  --paper-line: #ded6c6;

  --gold:     #c9a46a;
  --gold-2:   #ecd7ac;
  --gold-3:   #8a6f42;

  /* spektrale Akzente – nach echten Steinfarben benannt */
  --sp-aqua:  #6fd4e8;
  --sp-tanz:  #8b6fe0;
  --sp-rubel: #f06a87;
  --sp-peri:  #5fcf9b;
  --sp-manda: #f2a94b;

  --line:      rgba(255, 255, 255, .10);
  --line-soft: rgba(255, 255, 255, .06);

  --wrap: 1240px;
  --gut: clamp(1.25rem, 4vw, 3.5rem);

  --ff-display: "Cormorant Garamond", "Iowan Old Style", Palatino, Georgia, serif;
  --ff-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);

  --r: 2px;
  --hdr-h: 92px;        /* Kopfzeile bewusst etwas höher — trägt das Logo */
  --hdr-h-stuck: 72px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
/* ⛔ `hidden` MUSS STAERKER SEIN ALS JEDE display-REGEL. Die Browser-Vorgabe
   `[hidden]{display:none}` verliert gegen jedes `display:` einer Klasse — und
   genau das traegt die Hälfte dieser Bausteine (`.sw-hl` ist flex, `.pcard`
   steckt in einem Grid). Das Attribut ist seit 01.10.2026 tragend: Zufalls-
   auswahl und Shopsuche schalten damit, und ein Element, das trotz `hidden`
   sichtbar bleibt, zerlegt beide lautlos. */
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--ink);
  color: var(--fg);
  font-family: var(--ff-body);
  font-size: clamp(1rem, .96rem + .2vw, 1.075rem);
  font-weight: 300;
  line-height: 1.7;
  letter-spacing: .002em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body.is-locked { overflow: hidden; }
img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
h1, h2, h3, h4 {
  font-family: var(--ff-display); font-weight: 300; line-height: 1.08;
  margin: 0; letter-spacing: -.01em;
  /* verteilt lange Zeilen gleichmaessig, statt ein Wort allein umzubrechen */
  text-wrap: balance;
}
p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }
/* Der UA-Style gibt <figure> 40px Seitenrand — das sprengt jede Galerie-Zelle. */
figure, dl, dd, ul, ol { margin: 0; }
::selection { background: var(--gold); color: var(--ink); }

:focus-visible {
  outline: 2px solid var(--gold-2);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--gold); color: var(--ink); padding: .8rem 1.2rem; font-size: .9rem;
}
.skip:focus { left: 1rem; top: 1rem; }

/* ---------- Layout ---------- */
.wrap { width: min(100% - 2 * var(--gut), var(--wrap)); margin-inline: auto; }
.wrap-wide { width: min(100% - 2 * var(--gut), 1560px); margin-inline: auto; }
/* Der Kopfbereich bekommt etwas mehr Luft zum Rand als der Inhalt — sonst klebt
   die Bildmarke am Bildschirmrand und wirkt angeschnitten. */
.header-inner, .drawer > nav { padding-inline: clamp(0rem, 1.2vw, 1.25rem); }

.section { padding-block: clamp(4.5rem, 9vw, 9rem); position: relative; }
.section--paper { background: var(--paper); color: var(--paper-fg); }
.section--paper .lede { color: var(--paper-dim); }
.section--tight { padding-block: clamp(3rem, 6vw, 5.5rem); }
/* Der Uebergang Ueber-uns -> Kontakt war zu luftig (17.08.). */
#ueber-uns { padding-bottom: clamp(2.2rem, 4.5vw, 4rem); }
#kontakt { padding-top: clamp(2.2rem, 4.5vw, 4rem); }

/* Haarlinie mit spektralem Verlauf – der wiederkehrende "Lichtbrechungs"-Marker */
.spectral-rule {
  height: 1px; border: 0; margin: 0;
  background: linear-gradient(90deg,
    transparent 0%, var(--sp-aqua) 18%, var(--sp-peri) 34%,
    var(--gold-2) 50%, var(--sp-manda) 66%, var(--sp-rubel) 82%, transparent 100%);
  opacity: .5;
}

/* ---------- Typo-Bausteine ---------- */
.eyebrow {
  font-family: var(--ff-body);
  font-size: .72rem; font-weight: 500;
  letter-spacing: .26em; text-transform: uppercase;
  color: var(--gold); margin: 0 0 1.35rem;
  display: flex; align-items: center; gap: .85rem;
}
.eyebrow::before {
  content: ""; width: clamp(1.5rem, 4vw, 2.75rem); height: 1px;
  background: currentColor; opacity: .55; flex: none;
}
.section--paper .eyebrow { color: var(--gold-3); }

.h-xl { font-size: clamp(2.6rem, 7.5vw, 5.6rem); }
.h-lg { font-size: clamp(2.1rem, 5vw, 3.5rem); }
.h-md { font-size: clamp(1.6rem, 3vw, 2.25rem); }
.h-sm { font-size: clamp(1.25rem, 2vw, 1.55rem); }

.lede {
  font-size: clamp(1.05rem, .98rem + .45vw, 1.3rem);
  line-height: 1.65; color: var(--fg-dim); max-width: 62ch;
}
.italic-accent { font-style: italic; color: var(--gold-2); }
.section--paper .italic-accent { color: var(--gold-3); }

.section-head { max-width: 74ch; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
/* Ein Wert fuer alle: Abstand zwischen Ueberschrift und erstem Absatz. */
:root { --gap-head: clamp(1.6rem, 2.4vw, 2.4rem); }
.section-head .lede,
h1 + .lede, h2 + .lede, h3 + .lede,
.h-xl + .lede, .h-lg + .lede, .h-md + .lede, .h-sm + .lede {
  margin-top: var(--gap-head);
}

/* ---------- Buttons ---------- */
.btn {
  --btn-fg: var(--ink);
  --btn-bg: var(--gold);
  display: inline-flex; align-items: center; gap: .7rem;
  padding: .95rem 1.7rem;
  font-size: .82rem; font-weight: 500; letter-spacing: .13em; text-transform: uppercase;
  background: var(--btn-bg); color: var(--btn-fg);
  border-radius: var(--r);
  position: relative; overflow: hidden;
  transition: transform .4s var(--ease-out), box-shadow .4s var(--ease-out);
  will-change: transform;
}
.btn span { position: relative; z-index: 1; }
.btn::after {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .55), transparent);
  transform: translateX(-120%);
  /* Kein Uebergang im Grundzustand: beim Verlassen springt der Streifen
     unsichtbar zurueck — der Glanz laeuft nur beim Hineinfahren (17.08.). */
  transition: none;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 12px 30px -12px rgba(201, 164, 106, .6); }
.btn:hover::after { transform: translateX(120%); transition: transform .7s var(--ease-out); }

.btn--ghost {
  --btn-bg: transparent; --btn-fg: var(--fg);
  box-shadow: inset 0 0 0 1px var(--line);
}
.btn--ghost:hover { --btn-fg: var(--gold-2); box-shadow: inset 0 0 0 1px var(--gold-3); }
.section--paper .btn--ghost { --btn-fg: var(--paper-fg); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .18); }
.section--paper .btn--ghost:hover { --btn-fg: var(--gold-3); box-shadow: inset 0 0 0 1px var(--gold-3); }

.link-arrow {
  display: inline-flex; align-items: center; gap: .55rem;
  font-size: .78rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase;
  color: var(--gold);
  padding-bottom: .3rem;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px; background-repeat: no-repeat; background-position: 0 100%;
  transition: background-size .45s var(--ease-out);
}
.link-arrow:hover { background-size: 100% 1px; }
.link-arrow svg { transition: transform .4s var(--ease-out); }
.link-arrow:hover svg { transform: translateX(4px); }

.btn-row { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 2.2rem; }

/* ---------- Header ---------- */
.site-header {
  position: fixed; inset: 0 0 auto; z-index: 90;
  height: var(--hdr-h);
  display: flex; align-items: center;
  transition: background .45s var(--ease), box-shadow .45s var(--ease), height .45s var(--ease);
}
.site-header::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(8, 8, 12, .85), rgba(8, 8, 12, 0));
  opacity: 1; transition: opacity .4s var(--ease);
}
.site-header.is-stuck {
  height: var(--hdr-h-stuck);
  background: rgba(8, 8, 12, .88);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  box-shadow: 0 1px 0 var(--line-soft);
}
.site-header.is-stuck::before { opacity: 0; }

/* Achtung: kein width:100% — das würde die Breite von .wrap-wide überschreiben. */
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }

/* Bildmarke ist das originale BW-Monogramm (transparentes WebP aus
   Design/logo/logo-mark-light.png). Der Name steht daneben als Text — bleibt
   dadurch in jeder Größe scharf, ist selektier- und vorlesbar. */
/* Unten buendig: die Unterkante der Bildmarke sitzt auf der Grundlinie
   von "Gems & Jewellery". */
.brand { display: flex; align-items: flex-end; gap: .72rem; }
.brand img { display: block; width: auto; flex: none; }
/* Icon-Größe: die Marke soll den Namen begleiten, nicht dominieren. */
.brand-mark { height: 47px; transition: height .45s var(--ease); }
.site-header.is-stuck .brand-mark { height: 40px; }

.brand-text { display: flex; flex-direction: column; gap: .34rem; line-height: 1; padding-bottom: 1px; }
.brand-text b {
  font-family: var(--ff-body); font-weight: 600;
  font-size: 1.02rem; letter-spacing: .105em; text-transform: uppercase;
  color: var(--fg); white-space: nowrap;
}
.brand-text small {
  font-family: var(--ff-body); font-weight: 400;
  font-size: .8rem; letter-spacing: .285em;
  color: var(--gold); white-space: nowrap;
}

.brand--footer .brand-mark { height: 48px; }
.brand--footer .brand-text b { font-size: 1.06rem; }

@media (max-width: 560px) {
  .brand { gap: .55rem; }
  .brand-mark { height: 40px; }
  .brand-text b { font-size: .86rem; letter-spacing: .085em; }
  .brand-text small { font-size: .69rem; letter-spacing: .2em; }
}

.nav { display: flex; align-items: center; gap: clamp(1.1rem, 2.4vw, 2.2rem); }
.nav a {
  font-size: .78rem; font-weight: 400; letter-spacing: .12em; text-transform: uppercase;
  color: var(--fg-dim); position: relative; padding-block: .4rem;
  transition: color .3s var(--ease);
}
.nav a::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%;
  background: var(--gold); transform: scaleX(0); transform-origin: right;
  transition: transform .45s var(--ease-out);
}
.nav a:hover, .nav a[aria-current="page"] { color: var(--fg); }
.nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }

.nav-shop {
  color: var(--ink) !important; background: var(--gold);
  padding: .6rem 1.1rem !important; border-radius: var(--r);
  transition: transform .35s var(--ease-out);
}
.nav-shop::after { display: none; }
.nav-shop:hover { transform: translateY(-2px); }

.burger { display: none; width: 44px; height: 44px; position: relative; margin-right: -10px; }
.burger i {
  position: absolute; left: 11px; width: 22px; height: 1px; background: var(--fg);
  transition: transform .4s var(--ease-out), opacity .25s;
}
.burger i:nth-child(1) { top: 17px; }
.burger i:nth-child(2) { top: 22px; }
.burger i:nth-child(3) { top: 27px; }
.burger[aria-expanded="true"] i:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.burger[aria-expanded="true"] i:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] i:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

/* Mobile-Drawer */
.drawer {
  position: fixed; inset: 0; z-index: 89;
  background: rgba(8, 8, 12, .97);
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  display: flex; flex-direction: column; justify-content: center;
  padding: var(--hdr-h) var(--gut) 3rem;
  opacity: 0; visibility: hidden;
  transition: opacity .45s var(--ease), visibility 0s linear .45s;
}
.drawer.is-open { opacity: 1; visibility: visible; transition: opacity .45s var(--ease), visibility 0s linear 0s; }
.drawer nav { display: flex; flex-direction: column; gap: .2rem; }
.drawer nav a {
  font-family: var(--ff-display); font-size: clamp(1.9rem, 8vw, 2.6rem); font-weight: 300;
  padding: .38rem 0; color: var(--fg);
  border-bottom: 1px solid var(--line-soft);
  opacity: 0; transform: translateY(18px);
  transition: opacity .5s var(--ease-out), transform .5s var(--ease-out), color .3s;
}
.drawer.is-open nav a { opacity: 1; transform: none; }
.drawer nav a:hover { color: var(--gold-2); }
.drawer-foot { margin-top: 2.5rem; color: var(--fg-mute); font-size: .85rem; }
.drawer-foot a { color: var(--gold); }

/* ---------- Hero ---------- */
.hero {
  position: relative; min-height: 100vh; min-height: 100svh;
  display: flex; align-items: flex-end;
  /* Der Header liegt fix darueber - ohne Kopffreiheit schiebt sich eine
     laengere Hero-Copy (Textrevision 08/2026) unter die Kopfzeile. */
  padding-top: calc(var(--hdr-h) + 2.5rem);
  padding-bottom: clamp(3.5rem, 8vh, 6rem);
  overflow: hidden; isolation: isolate;
}
.hero-media { position: absolute; inset: 0; z-index: -3; overflow: hidden; }

/* Bildfolge: jedes Bild zoomt langsam, blendet aus, das nächste kommt.
   Der Zoom läuft als transition (nicht als animation), damit das abgehende Bild
   während der Überblendung stehen bleibt statt zurückzuspringen. */
.hero-slide {
  position: absolute; inset: 0;
  /* 68 % statt Mitte: schiebt das Schmuckstück nach oben, weg vom unteren
     Verlauf — dort ging es sonst optisch unter. Gegengeprüft mit tools/shot.py. */
  width: 100%; height: 100%; object-fit: cover; object-position: center 68%;
  opacity: 0; transform: scale(1.04);
  transition: opacity 1.6s var(--ease);
  will-change: opacity, transform;
}
.hero-slide.is-active {
  opacity: 1; transform: scale(1.15);
  transition: opacity 1.6s var(--ease), transform 11s linear;
}
.hero-slide.is-leaving {
  opacity: 0; transform: scale(1.15);   /* Zoomstand halten, nur ausblenden */
  transition: opacity 1.6s var(--ease);
}

/* Deutlich zurückgenommener Verlauf: nur so viel Abdunklung, wie die Schrift
   braucht — oben schmal für den Header, unten für den Textblock. Die Bildmitte,
   wo die Steine sitzen, bleibt unangetastet. */
.hero-scrim {
  position: absolute; inset: 0; z-index: -2; pointer-events: none;
  /* ⛔ Die unterste Lage ist eine FLAECHE, kein Verlauf (Vorgabe 01.10.2026:
     „etwas stärker, aber nicht so stark wie bei Mobile"). Ein Verlauf deckt
     immer nur dort, wo er dunkel ist — der Text steht aber nicht immer an
     derselben Stelle, und das Bild wechselt alle paar Sekunden. */
  background:
    linear-gradient(180deg, rgba(8, 8, 12, .52) 0%, rgba(8, 8, 12, .16) 12%, rgba(8, 8, 12, 0) 24%),
    linear-gradient(180deg, rgba(8, 8, 12, 0) 42%, rgba(8, 8, 12, .40) 72%, rgba(8, 8, 12, .88) 100%),
    linear-gradient(0deg, rgba(8, 8, 12, .16), rgba(8, 8, 12, .16));
}
/* ⛔ AUF DEM TELEFON IST DER HERO NUR NOCH ETWA HALB SO HOCH (Vorgabe
   01.10.2026). Bei 100 svh auf einem schmalen, hohen Bildschirm schneidet
   `object-fit: cover` das Querformat links und rechts weg — man sah „nur einen
   riesigen Ausschnitt". Ein flacherer Kasten zeigt mehr vom Bild, nicht
   weniger.
   ⛔ `min-height`, nicht `height`: ist der Textblock höher, wächst der Hero mit.
   Ein fester Wert würde die Schrift abschneiden.
   ⛔ Und die Abdunklung muss dort deutlich stärker sein — über einem hellen
   Stein war die weiße Schrift sonst nicht lesbar. */
@media (max-width: 620px) {
  /* ⛔ DAS BILD BEKOMMT EINEN EIGENEN, FLACHEREN BEREICH (Vorgabe 01.10.2026:
     „ca. 50 % kleiner, sonst sieht man nur einen riesigen Ausschnitt").
     ⛔ `min-height` am Hero war dafür WIRKUNGSLOS — gemessen: der Hero war
     949 px hoch, davon 774 px Textblock. Nicht die Einstellung bestimmt die
     Höhe, sondern der Text. Solange das Bild den ganzen Hero füllt, ist es so
     hoch wie der Text, und `object-fit: cover` schneidet von einem Querformat
     auf 390 px Breite dann 71 % weg: man sah 29 % der Aufnahme.
     ⛔ Mit einem eigenen Bereich von 50 svh sieht man rund zwei Drittel — und
     der Text steht darunter auf dem dunklen Grund, wo er ohnehin lesbar ist. */
  /* ⛔ 42 svh, nicht 50: der Text soll beim Aufruf SCHON ZU SEHEN SEIN
     (Vorgabe 01.10.2026). Ein Bildbereich, der die halbe Bildschirmhöhe
     einnimmt, schiebt zusammen mit der Kopfzeile alles darunter aus dem Bild —
     man landet auf der Seite und sieht nur ein Foto. */
  .hero {
    min-height: 0;
    align-items: flex-start;
    padding-top: calc(42svh + .9rem);
    padding-bottom: clamp(2.2rem, 5vh, 3.2rem);
  }
  .hero-media, .hero-scrim { bottom: auto; height: 42svh; }

  /* Weicher Übergang von der Bildkante auf den Seitengrund — eine harte Kante
     sähe aus wie ein abgeschnittenes Bild, nicht wie ein Bildbereich. */
  .hero-media::after {
    content: ""; position: absolute; inset: auto 0 0 0; height: 32%;
    background: linear-gradient(180deg, rgba(8, 8, 12, 0), var(--ink) 94%);
  }

  /* ⛔ OBEN DEUTLICH WENIGER ABDUNKLUNG (Vorgabe 01.10.2026). Die starke
     Deckung stammte aus der Zeit, als die Überschrift ÜBER dem Bild stand —
     seit der Text darunter sitzt, gibt es dort nichts mehr zu schützen außer
     der Bildmarke, und dafür reichen 34 % in den obersten Prozenten.
     Nach unten bleibt es kräftig: dort geht das Bild in den Seitengrund über. */
  .hero-scrim {
    background:
      linear-gradient(180deg, rgba(8, 8, 12, .34) 0%, rgba(8, 8, 12, .12) 16%, rgba(8, 8, 12, 0) 30%),
      linear-gradient(180deg, rgba(8, 8, 12, 0) 46%, rgba(8, 8, 12, .26) 82%, rgba(8, 8, 12, .55) 100%),
      linear-gradient(0deg, rgba(8, 8, 12, .10), rgba(8, 8, 12, .10));
  }

  /* Weniger Zoom: jeder Prozentpunkt Vergrößerung ist ein Prozentpunkt
     weniger Bild. */
  .hero-slide { transform: scale(1.0); }
  .hero-slide.is-active { transform: scale(1.06); }
  .hero-slide.is-leaving { transform: scale(1.06); }
}

/* Ab Tablet sitzt der Text links — dort etwas mehr Deckung, rechts fast keine. */
@media (min-width: 780px) {
  .hero-scrim::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(96deg, rgba(8, 8, 12, .55) 0%, rgba(8, 8, 12, .22) 34%, rgba(8, 8, 12, 0) 62%);
  }
}

/* wandernder Spektralschimmer – die "Dispersion" */
.hero-prism {
  position: absolute; inset: -20% -10%; z-index: -2; pointer-events: none;
  background: conic-gradient(from 210deg at 62% 38%,
    rgba(111, 212, 232, .00) 0deg,
    rgba(111, 212, 232, .17) 42deg,
    rgba(139, 111, 224, .16) 96deg,
    rgba(240, 106, 135, .13) 150deg,
    rgba(242, 169, 75, .14) 205deg,
    rgba(95, 207, 155, .13) 268deg,
    rgba(111, 212, 232, .00) 330deg);
  filter: blur(56px);
  mix-blend-mode: screen;   /* hellt nur auf, dunkelt die Steine nicht ab */
  animation: prism-drift 32s linear infinite;
  opacity: .45;
}
@keyframes prism-drift {
  0%   { transform: rotate(0deg) scale(1.05); }
  100% { transform: rotate(360deg) scale(1.05); }
}

.hero-inner { position: relative; }

/* Mit dem leichteren Verlauf trägt der Schatten einen Teil der Lesbarkeit —
   er wirkt nur auf der Schrift, nicht auf dem Bild. */
.hero h1, .hero .lede, .hero .eyebrow, .hero-sig {
  text-shadow: 0 1px 2px rgba(0, 0, 0, .45), 0 2px 26px rgba(0, 0, 0, .55);
}
.hero h1 { font-size: clamp(2.7rem, 8.2vw, 6.2rem); line-height: 1.02; max-width: 17ch; }
.hero h1 em { font-style: italic; color: var(--gold-2); }
.hero .lede { margin-top: 1.8rem; max-width: 52ch; color: #dbd7d0; }

.hero-sig {
  margin-top: 1.6rem; font-family: var(--ff-display); font-style: italic;
  font-size: 1.15rem; color: var(--gold-2);
}

.hero-scroll {
  position: absolute; right: 0; bottom: 0;
  display: flex; align-items: center; gap: .8rem;
  font-size: .68rem; letter-spacing: .24em; text-transform: uppercase; color: var(--fg-mute);
}
.hero-scroll i {
  display: block; width: 1px; height: 46px; background: var(--line);
  position: relative; overflow: hidden;
}
.hero-scroll i::after {
  content: ""; position: absolute; inset: 0; background: var(--gold);
  animation: scroll-run 2.4s var(--ease) infinite;
}
@keyframes scroll-run {
  0%   { transform: translateY(-100%); }
  55%  { transform: translateY(0); }
  100% { transform: translateY(100%); }
}

/* Wort-für-Wort-Einblendung der Headline */
/* overflow:hidden versteckt das Wort, solange es von unten einlaeuft — kappt
   aber auch die Unterlaengen (g, j, p). Deshalb den Kasten unten ueber die
   Grundlinie hinaus verlaengern und den Zugewinn per negativem Rand wieder
   herausrechnen, damit sich der Zeilenabstand nicht aendert. */
.word {
  display: inline-block; overflow: hidden; vertical-align: bottom;
  padding-bottom: .18em; margin-bottom: -.18em;
}
.word > span {
  display: inline-block;
  transform: translateY(105%);
  animation: word-rise .95s var(--ease-out) forwards;
  animation-delay: var(--d, 0ms);
}
@keyframes word-rise { to { transform: translateY(0); } }

/* ---------- Karten-Reihe (Angebot) ---------- */
.cards { display: grid; gap: 1px; background: var(--line-soft); border-block: 1px solid var(--line-soft); }
@media (min-width: 800px) { .cards { grid-template-columns: repeat(3, 1fr); } }
.card {
  background: var(--ink); padding: clamp(2rem, 3.5vw, 3rem);
  display: flex; flex-direction: column; gap: 1rem;
  position: relative; overflow: hidden;
  transition: background .5s var(--ease);
}
.card::before {
  content: ""; position: absolute; left: 0; top: 0; height: 2px; width: 100%;
  background: var(--accent, var(--gold));
  transform: scaleX(0); transform-origin: left;
  transition: transform .6s var(--ease-out);
}
.card:hover { background: var(--ink-2); }
.card:hover::before { transform: scaleX(1); }
.card .num {
  font-family: var(--ff-display); font-size: .95rem; color: var(--gold-3); letter-spacing: .2em;
}
.card h3 { font-size: clamp(1.45rem, 2.4vw, 1.85rem); }
/* Kleintext eine Stufe heller als --fg-dim — war auf Schwarz zu schwach (17.08.). */
.card p { color: #ccc8bf; font-size: .96rem; }
.card .link-arrow { margin-top: auto; padding-top: 1rem; }

/* ---------- Kollektions-Kacheln ---------- */
.tiles {
  display: grid; gap: clamp(.6rem, 1.2vw, 1rem);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
}
.tile {
  position: relative; display: block; overflow: hidden;
  aspect-ratio: 4 / 5; background: var(--ink-3);
  border-radius: var(--r);
}
.tile--wide { grid-column: span 2; aspect-ratio: 8 / 5; }

/* Unter 620px greift auto-fill nicht mehr (260px passen nur einmal) — dann würden
   13 Kacheln zu einer endlosen Spalte. Deshalb hier fix zweispaltig. */
@media (max-width: 620px) {
  .tiles { grid-template-columns: repeat(2, 1fr); }
  .tile { aspect-ratio: 3 / 4; }
  .tile--wide { grid-column: span 2; aspect-ratio: 16 / 10; }
  .tile-body h3 { font-size: 1.05rem; }
}

.tile img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.02);
  transition: transform 1.1s var(--ease-out), filter .8s var(--ease);
  filter: saturate(1.02);
}
.tile::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(8, 8, 12, .05) 30%, rgba(8, 8, 12, .82) 100%);
  transition: background .6s var(--ease);
}
.tile:hover img { transform: scale(1.09); filter: saturate(1.14); }
.tile:hover::after { background: linear-gradient(180deg, rgba(8, 8, 12, .0) 20%, rgba(8, 8, 12, .88) 100%); }

.tile-body {
  position: absolute; inset: auto 0 0; z-index: 2;
  padding: clamp(1.1rem, 2vw, 1.6rem);
  display: flex; flex-direction: column; gap: .35rem;
}
.tile-body h3 { font-size: clamp(1.3rem, 2vw, 1.7rem); }
.tile-body span {
  font-size: .68rem; letter-spacing: .2em; text-transform: uppercase; color: var(--gold);
  opacity: 0; transform: translateY(6px);
  transition: opacity .45s var(--ease-out), transform .45s var(--ease-out);
}
.tile:hover .tile-body span, .tile:focus-visible .tile-body span { opacity: 1; transform: none; }

/* schmale Spektrallinie, die beim Hover einläuft */
.tile-body::before {
  content: ""; position: absolute; left: clamp(1.1rem, 2vw, 1.6rem); right: clamp(1.1rem, 2vw, 1.6rem);
  top: 0; height: 1px;
  background: linear-gradient(90deg, var(--sp-aqua), var(--gold-2), var(--sp-rubel));
  transform: scaleX(0); transform-origin: left;
  transition: transform .7s var(--ease-out);
}
.tile:hover .tile-body::before { transform: scaleX(1); }

/* ---------- Shop-Highlights ----------
   Bewusst rahmenlose Karten: nur die Abbildung bekommt eine feine Linie, der Text
   darunter schwebt frei auf dem Papierton. Kein dunkler Kasten — der würde in
   einem hellen Abschnitt schwerer wirken als die Steine selbst. */
/* ⛔ FUENF JE ZEILE, FEST (Vorgabe 01.10.2026) — nicht `auto-fill`. Die
   Schmuckschatulle und die Entdeckungsreise darunter sollen gleich aussehen;
   mit `auto-fill` haengt die Spaltenzahl am Fenster, und die beiden Reihen
   liefen auseinander (die eine fuenf-, die andere vierspaltig). */
.shop-grid {
  display: grid; gap: clamp(1.4rem, 2.4vw, 2.2rem) clamp(1rem, 2vw, 1.6rem);
  grid-template-columns: repeat(5, 1fr);
}
@media (max-width: 1000px) { .shop-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 620px)  { .shop-grid { grid-template-columns: 1fr; } }

/* ⛔ DAS BILD IST SCHMALER ALS SEINE SPALTE (Vorgabe 01.10.2026: „um 15 %
   verkleinern"). Verkleinert wird das BILD, nicht die Spalte — sonst stuende
   zwischen den Karten mehr Luft als in ihnen, und die Beschriftung darunter
   rutschte mit. */
/* ⛔ LINKSBUENDIG, nicht mittig: die Beschriftung darunter steht links, und
   eine mittige Kachel ueber linksbuendigem Text sieht nach Versehen aus. */
.shop-grid .pcard-media { width: 85%; }

/* ⛔ AUF DEM TELEFON DEUTLICH KLEINER (Vorgabe 01.10.2026: „zu massiv").
   Eine Karte je Zeile stand dort schon vorher — sie fuellte nur die ganze
   Breite. Ein Stein, der formatfuellend ueber den Bildschirm geht, wirkt wie
   ein Hero, nicht wie ein Artikel.
   ⛔ Das loest zugleich das Aufloesungsproblem: die halb so breite Kachel
   braucht die naechstkleinere Datei. */
@media (max-width: 620px) {
  .shop-grid { gap: clamp(1.8rem, 5vw, 2.6rem); }
  .shop-grid .pcard-media { width: 42%; margin-inline: auto; }
  .shop-grid .pcard-body { align-items: center; text-align: center; padding-top: .7rem; }
  .shop-grid .pcard h3 { font-size: .9rem; max-width: 30ch; }
}
.pcard {
  display: flex; flex-direction: column;
  background: none; border: 0;
  transition: transform .5s var(--ease-out);
}
.pcard:hover { transform: translateY(-4px); }

/* Quadratisch, nicht hochkant: die Shop-Fotos sind quadratisch und tragen unten
   links ein eingebranntes Wasserzeichen. Ein Hochformat-Ausschnitt schneidet
   zwangsläufig seitlich hinein und zersägt es. Größer werden die Abbildungen
   stattdessen über breitere Spalten. */
.pcard-media {
  position: relative; aspect-ratio: 1; overflow: hidden;
  background: #fff;
  border: 1px solid var(--paper-line);
  border-radius: var(--r);
  transition: border-color .5s var(--ease), box-shadow .5s var(--ease);
}
.pcard:hover .pcard-media {
  border-color: var(--gold);
  box-shadow: 0 18px 38px -26px rgba(60, 48, 24, .55);
}
/* leicht angeschnitten: der Zuschnitt nimmt den Studio-Rand weg,
   dadurch steht der Stein deutlich größer im Bild */
.pcard-media img {
  width: 100%; height: 100%; object-fit: cover;
  /* Vergroessern und aussen abschneiden — das Foto bleibt unangetastet.
     Kein Zuschnitt in der Pipeline: der muesste die entstehende Flaeche in
     einer Hintergrundfarbe auffuellen, und das sieht man der Karte an. */
  transform: scale(1.5);
  transition: transform 1s var(--ease-out);
}
.pcard:hover .pcard-media img { transform: scale(1.58); }

.pcard-body {
  padding: 1rem .1rem 0; background: none;
  display: flex; flex-direction: column; gap: .4rem; flex: 1;
}
.pcard-type { font-size: .64rem; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-3); }
.pcard h3 {
  font-family: var(--ff-body); font-size: .95rem; font-weight: 400;
  line-height: 1.45; color: var(--paper-fg);
}
.pcard .price {
  margin-top: .15rem; padding-top: 0;
  font-family: var(--ff-display); font-size: 1.4rem; color: var(--gold-3);
}

/* ---------- Split (Bild / Text) ---------- */
.split { display: grid; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
@media (min-width: 900px) {
  .split { grid-template-columns: 1fr 1fr; }
  .split--reverse .split-media { order: 2; }
}
.split-media { position: relative; }
.split-media img { width: 100%; border-radius: var(--r); }
.split-media .frame {
  position: absolute; inset: 0; pointer-events: none; border-radius: var(--r);
  box-shadow: inset 0 0 0 1px var(--line);
}
.split-media .frame::after {
  content: ""; position: absolute; inset: auto auto -14px -14px;
  width: 46%; height: 46%;
  border-left: 1px solid var(--gold-3); border-bottom: 1px solid var(--gold-3);
  opacity: .8;
}
.split-caption {
  margin-top: .8rem; font-size: .8rem; color: var(--fg-mute); font-style: italic;
}
.section--paper .split-caption { color: var(--paper-dim); }

/* ---------- Fakten / Zahlen ---------- */
.facts {
  display: grid; gap: clamp(1.5rem, 4vw, 3rem);
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.fact b {
  display: block; font-family: var(--ff-display); font-weight: 300;
  font-size: clamp(2.4rem, 5vw, 3.6rem); line-height: 1; color: var(--gold-2);
}
.fact span {
  display: block; margin-top: .7rem;
  font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; color: var(--fg-mute);
}
.section--paper .fact b { color: var(--gold-3); }
.section--paper .fact span { color: var(--paper-dim); }

/* ---------- Galerie / Katalog ---------- */
.cat-nav {
  position: sticky; top: var(--hdr-h); z-index: 40;
  background: rgba(8, 8, 12, .9);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-block: 1px solid var(--line-soft);
}
.cat-nav ul {
  display: flex; gap: .35rem; list-style: none; margin: 0; padding: .7rem 0;
  overflow-x: auto; scrollbar-width: none;
}
.cat-nav ul::-webkit-scrollbar { display: none; }
.cat-nav a {
  display: block; white-space: nowrap; padding: .45rem .95rem;
  font-size: .74rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--fg-dim); border: 1px solid transparent; border-radius: 999px;
  transition: color .3s, border-color .3s, background .3s;
}
.cat-nav a:hover { color: var(--fg); border-color: var(--line); }
.cat-nav a.is-active { color: var(--gold-2); border-color: var(--gold-3); background: rgba(201, 164, 106, .08); }

.gems { display: grid; gap: clamp(.6rem, 1.4vw, 1.1rem); grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); }
.gem {
  position: relative; display: block; overflow: hidden; border-radius: var(--r);
  background: var(--ink-3); aspect-ratio: 1; cursor: zoom-in;
}
.gem img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .9s var(--ease-out), filter .6s;
}
.gem:hover img { transform: scale(1.08); }
/* Eckdaten-Tafel: fährt beim Überfahren von unten ein. Die Werte stammen aus
   den Bildunterschriften des Altbestands (siehe stone_facts in tools/build.py). */
.gem figcaption {
  position: absolute; inset: auto 0 0; z-index: 2;
  padding: 2.8rem .95rem .9rem;
  color: #ded9d1;
  background: linear-gradient(180deg, transparent, rgba(8, 8, 12, .93) 42%, rgba(8, 8, 12, .97));
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  opacity: 0; transform: translateY(10px);
  transition: opacity .45s var(--ease-out), transform .45s var(--ease-out);
}
.gem figcaption b {
  display: block;
  font-family: var(--ff-display); font-weight: 400;
  font-size: 1.12rem; line-height: 1.2; color: var(--fg);
  margin-bottom: .5rem;
}
.gem-facts { display: grid; gap: .28rem; }
.gem-facts > div {
  display: grid; grid-template-columns: 5.4rem 1fr; gap: .6rem;
  align-items: baseline;
}
.gem-facts dt {
  font-size: .58rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--gold-3);
}
.gem-facts dd { margin: 0; font-size: .78rem; line-height: 1.35; color: #e2ded6; }
.gem-facts dd:first-letter { text-transform: none; }
.gem:hover figcaption, .gem:focus-visible figcaption { opacity: 1; transform: none; }
@media (hover: none) {
  .gem figcaption { opacity: 1; transform: none; }
}

@media (max-width: 620px) {
  .gems { grid-template-columns: repeat(2, 1fr); }
  .gem figcaption { padding: 1.6rem .6rem .6rem; }
  .gem figcaption b { font-size: .92rem; margin-bottom: .35rem; }
  .gem-facts > div { grid-template-columns: 4.2rem 1fr; gap: .4rem; }
  .gem-facts dd { font-size: .68rem; }
}

.cat-block { padding-block: clamp(3rem, 6vw, 5rem); scroll-margin-top: calc(var(--hdr-h) + 56px); }
.cat-block + .cat-block { border-top: 1px solid var(--line-soft); }
.cat-head { display: grid; gap: 1.2rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
@media (min-width: 900px) { .cat-head { grid-template-columns: minmax(0, 26ch) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); align-items: start; } }
.cat-head h2 { font-size: clamp(1.9rem, 4vw, 2.9rem); }
.cat-head p { color: var(--fg-dim); }

/* ---------- Lightbox ---------- */
.lbox {
  position: fixed; inset: 0; z-index: 120;
  background: rgba(5, 5, 8, .96);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  display: grid; place-items: center; padding: clamp(1rem, 4vw, 3rem);
  opacity: 0; visibility: hidden;
  /* visibility ohne Verzögerung einschalten, erst beim Schließen verzögern —
     sonst ist der Dialog beim focus() noch unsichtbar und nicht fokussierbar. */
  transition: opacity .35s var(--ease), visibility 0s linear .35s;
}
.lbox.is-open { opacity: 1; visibility: visible; transition: opacity .35s var(--ease), visibility 0s linear 0s; }
.lbox figure { margin: 0; max-width: min(1200px, 100%); max-height: 100%; display: flex; flex-direction: column; gap: 1rem; }
.lbox img {
  max-height: min(76vh, 900px); width: auto; max-width: 100%; margin-inline: auto;
  border-radius: var(--r); object-fit: contain;
  transform: scale(.97); transition: transform .4s var(--ease-out);
}
.lbox.is-open img { transform: scale(1); }
.lbox figcaption { text-align: center; color: var(--fg-dim); font-size: .9rem; max-width: 70ch; margin-inline: auto; }
.lbox-close, .lbox-prev, .lbox-next {
  position: absolute; width: 52px; height: 52px; display: grid; place-items: center;
  color: var(--fg-dim); transition: color .3s, transform .3s;
}
.lbox-close { top: clamp(.5rem, 2vw, 1.5rem); right: clamp(.5rem, 2vw, 1.5rem); }
.lbox-prev { left: clamp(.25rem, 2vw, 1.5rem); top: 50%; transform: translateY(-50%); }
.lbox-next { right: clamp(.25rem, 2vw, 1.5rem); top: 50%; transform: translateY(-50%); }
.lbox-close:hover, .lbox-prev:hover, .lbox-next:hover { color: var(--gold-2); }
.lbox-count { position: absolute; bottom: clamp(.6rem, 2vw, 1.4rem); left: 50%; transform: translateX(-50%); font-size: .75rem; letter-spacing: .18em; color: var(--fg-mute); }

/* ---------- Kontakt ---------- */
/* Gleiches Raster wie .af-zeile darunter (2/3 zu 1/3, gleicher Zwischenraum,
   gleicher Umbruchpunkt) — Textblock und Formular gleich breit, Kontaktliste
   und Experten-Box auf einer Flucht (17.08.). */
.contact-grid { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); }
@media (min-width: 960px) { .contact-grid { grid-template-columns: 2fr 1fr; } }
.contact-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.4rem; }
.contact-list dt, .contact-list b {
  display: block; font-size: .68rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--gold); font-weight: 500; margin-bottom: .4rem;
}
.contact-list a { border-bottom: 1px solid var(--line); transition: border-color .3s, color .3s; }
.contact-list a:hover { color: var(--gold-2); border-color: var(--gold-3); }

/* ---------- Footer ---------- */
.site-footer { background: var(--ink-2); border-top: 1px solid var(--line-soft); padding-block: clamp(3rem, 6vw, 4.5rem) 2rem; }
.footer-top { display: grid; gap: clamp(2rem, 5vw, 3.5rem); }
@media (min-width: 780px) { .footer-top { grid-template-columns: 1.4fr 1fr 1fr; } }
.footer-top h4 { font-family: var(--ff-body); font-size: .7rem; letter-spacing: .22em; text-transform: uppercase; color: var(--gold); margin-bottom: 1.1rem; font-weight: 500; }
.footer-top ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.footer-top a { color: var(--fg-dim); font-size: .92rem; transition: color .3s; }
.footer-top a:hover { color: var(--gold-2); }
.footer-bottom {
  margin-top: clamp(2.5rem, 5vw, 3.5rem); padding-top: 1.6rem; border-top: 1px solid var(--line-soft);
  display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between;
  font-size: .78rem; color: var(--fg-mute);
}

/* Draft-Hinweis — bewusst als fixiertes Badge, nicht als Balken im Fluss:
   der Header liegt fixiert ganz oben und würde einen Balken überdecken. */
.draft-flag {
  position: fixed; z-index: 95;
  left: max(.75rem, env(safe-area-inset-left)); bottom: max(.75rem, env(safe-area-inset-bottom));
  padding: .5rem .9rem;
  background: rgba(8, 8, 12, .82);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: inset 0 0 0 1px rgba(201, 164, 106, .35);
  border-radius: 999px;
  font-size: .62rem; letter-spacing: .18em; text-transform: uppercase; color: var(--gold-2);
  pointer-events: none;
}
@media (max-width: 560px) { .draft-flag { font-size: .55rem; letter-spacing: .12em; } }

/* ---------- Scroll-Reveal ---------- */
/* Nur verstecken, wenn JS laeuft — sonst waere ohne JS die halbe Seite leer. */
.js .reveal { opacity: 0; transform: translateY(26px); }
.reveal.is-in {
  opacity: 1; transform: none;
  transition: opacity .9s var(--ease-out) var(--delay, 0ms), transform .9s var(--ease-out) var(--delay, 0ms);
}
/* ⛔ DER ZUSCHNITT LIEGT AUF DEN KINDERN, NICHT AUF DEM BEOBACHTETEN ELEMENT.
   `clip-path: inset(0 0 100% 0)` macht die Fläche leer, und der
   IntersectionObserver rechnet den Zuschnitt mit: das Element meldet nie eine
   Überschneidung, `.is-in` wird nie gesetzt, der Zuschnitt bleibt. Die
   Einblendung verhinderte damit ihre eigene Auslösung.

   Am 28.09.2026 waren dadurch ALLE 138 Bilder auf edelsteine.html und
   index.html unsichtbar — der ganze Katalog zeigte nur Text. Aufgefallen ist
   es lange nicht, weil der Block „reduced motion" weiter unten
   `clip-path: none` setzt: wer die Einstellung aktiv hat, sah alles. Gemessen
   mit einem frisch angehängten Beobachter derselben Einstellungen — auch der
   feuerte nicht, obwohl die Kachel mitten im Sichtfeld stand.

   Auf den Kindern hat der Zuschnitt dieselbe Wirkung, nur behält das
   beobachtete Element seine Fläche. */
.js .reveal-img > * { clip-path: inset(0 0 100% 0); }
.reveal-img.is-in > * {
  clip-path: inset(0 0 0 0);
  transition: clip-path 1.1s var(--ease-out) var(--delay, 0ms);
}

/* ---------- Reduced Motion ---------- */
/* ---------- Reduced Motion ----------
   "reduce" heisst weniger Bewegung, nicht gar nichts. Weggenommen werden
   Ortsveraenderung, Zoom und Dauerschleifen — also alles, was Schwindel
   ausloesen kann. Ein- und Ausblenden sowie Farbwechsel bleiben, sonst wirkt
   die Seite tot. Betrifft mehr Leute als man denkt: unter Windows schaltet
   schon der Energiesparmodus oder ein abgeschalteter Animationseffekt die
   Einstellung ein. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation: none !important;
    /* nur noch Eigenschaften ohne Ortsveraenderung ueberblenden */
    transition-property: opacity, color, background-color, border-color,
                         box-shadow, filter !important;
    transition-duration: .45s !important;
  }

  /* `> *` muss mit: der Zuschnitt sitzt seit 28.09.2026 auf den Kindern. */
  .reveal, .reveal-img, .reveal-img > * { transform: none; clip-path: none; }
  .word, .word > span { transform: none; overflow: visible; }

  .hero-slide { transform: none !important; }
  .hero-prism { opacity: .3; }

  /* Detailansicht blendet ein, statt hereinzufahren */
  .artikel-panel { transform: none !important; opacity: 0; }
  .artikel-panel.is-open { opacity: 1; }
}

/* ---------- Breakpoints ---------- */
@media (max-width: 900px) {
  .nav { display: none; }
  .burger { display: block; }
  .hero-scroll { display: none; }
}

/* ---------- Shopseite: mitlaufende Szene + Steine auf Schwarz ---------- */
.shop-layout { display: grid; gap: clamp(2rem, 4vw, 4rem); padding-block: clamp(2.5rem, 5vw, 4.5rem); }
.shop-layout + .shop-layout { border-top: 1px solid var(--line-soft); }
@media (min-width: 1000px) {
  .shop-layout { grid-template-columns: minmax(0, 330px) minmax(0, 1fr); }
  /* Die Szene bleibt stehen, solange ihre Artikel durchlaufen. */
  .shop-scene { position: sticky; top: calc(var(--hdr-h) + 1.6rem); align-self: start; }
}
.shop-scene figure { position: relative; border-radius: var(--r); overflow: hidden; }
.shop-scene img { width: 100%; height: auto; display: block; }
.shop-scene figure::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  box-shadow: inset 0 0 0 1px var(--line);
  background: linear-gradient(180deg, transparent 55%, rgba(8, 8, 12, .55));
}
.shop-scene .ph {
  position: absolute; left: .6rem; bottom: .6rem; z-index: 2;
  padding: .35rem .7rem; border-radius: 999px;
  background: rgba(8, 8, 12, .8); box-shadow: inset 0 0 0 1px rgba(201, 164, 106, .4);
  font-size: .58rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-2);
}
.shop-scene blockquote {
  margin: 0; font-family: var(--ff-display); font-weight: 300;
  font-size: clamp(1.3rem, 1.9vw, 1.65rem); line-height: 1.35; color: var(--fg);
}
/* Literale Zeichen statt CSS-Escapes — C ohne Abschluss frisst das Folgezeichen. */
.shop-scene blockquote::before { content: "„"; color: var(--gold-3); }
.shop-scene blockquote::after { content: "“"; color: var(--gold-3); }
.shop-scene cite {
  display: block; margin-top: .9rem; font-style: normal;
  font-size: .68rem; letter-spacing: .2em; text-transform: uppercase; color: var(--fg-mute);
}
.shop-scene .link-arrow { margin-top: 1.6rem; }


/* Karten auf dunklem Grund */
.pcard--dark .pcard-media { background: #fff; border-color: rgba(255, 255, 255, .14); }
.pcard--dark:hover .pcard-media { border-color: var(--gold-3); box-shadow: 0 20px 44px -28px #000; }
.pcard--dark h3 { color: var(--fg); }
.pcard--dark .pcard-type { color: var(--gold-3); }
.pcard--dark .price { color: var(--gold-2); }


/* Artikelraster der Shopseite — ruhiges, gleichmaessiges Raster ueber die volle Breite */
.shop-items {
  display: grid; gap: clamp(1.3rem, 2.2vw, 2rem);
  grid-template-columns: repeat(auto-fill, minmax(min(50% - 1rem, 210px), 1fr));
  align-content: start;
}

/* ---------- Preis auf Anfrage ----------
   ⛔ Drei Artikel haben keinen hinterlegten Preis. „€ 0" waere eine falsche
   Angabe, ein leerer Platz liesse die Karte kippen — deshalb steht da ein
   Satz, und zwar in der Schrift des Fliesstexts, damit ihn niemand fuer eine
   Zahl haelt. */
.price--anfrage,
.ap-preiswert--anfrage,
.sw-hl-price--anfrage {
  font-family: var(--ff-body) !important;
  font-size: .82rem !important; font-style: italic;
  letter-spacing: .02em; opacity: .85;
}

/* ---------- Volltextsuche im Shop (01.10.2026) ----------
   ⛔ OHNE JS NICHT VORHANDEN. Ein Eingabefeld, das nichts tut, ist schlimmer
   als keines — deshalb haengt die Anzeige an der `.js`-Klasse, die das Skript
   als Erstes setzt. */
.shop-suche { display: none; }
.js .shop-suche {
  display: block; max-width: 34rem;
  margin: clamp(1.4rem, 3vw, 2.2rem) 0 0;
}
.shop-suche-feld {
  display: flex; align-items: center; gap: .6rem;
  padding: .55rem .8rem;
  border: 1px solid rgba(201, 164, 106, .35);
  border-radius: 999px;
  background: rgba(255, 255, 255, .04);
  transition: border-color .3s var(--ease), background .3s var(--ease);
}
.shop-suche-feld:focus-within {
  border-color: var(--gold); background: rgba(255, 255, 255, .07);
}
.shop-suche-feld svg { flex: none; color: var(--gold); }
.shop-suche-feld input {
  flex: 1; min-width: 0;
  padding: .25rem 0; border: 0; background: none;
  font-family: var(--ff-body); font-size: .95rem; color: var(--fg);
  /* iOS legt sonst eine eigene Innenschattierung und runde Ecken darauf. */
  -webkit-appearance: none; appearance: none;
}
.shop-suche-feld input::placeholder { color: var(--fg-mute); }
.shop-suche-feld input:focus { outline: none; }
/* Das eigene Kreuz genuegt — das von WebKit sitzt daneben und ist nicht
   bedienbar, wenn die Zeile scrollt. */
.shop-suche-feld input::-webkit-search-cancel-button { -webkit-appearance: none; }
.shop-suche-weg {
  flex: none; display: grid; place-items: center;
  width: 1.6rem; height: 1.6rem; padding: 0;
  border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(255, 255, 255, .08); color: var(--fg-dim);
}
.shop-suche-weg:hover { background: rgba(255, 255, 255, .16); color: var(--fg); }
.shop-suche-stand {
  margin: .6rem 0 0;
  font-size: .76rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--fg-dim);
}

/* ==========================================================================
   Farbschema B — Test 17.08.2026, Palette des Auftraggebers
   (Creme #f4f1ea · Greige #e3e0da · Noir #17181e · Cognac #9a5c35 ·
    Sand #c9a46a · Champagner #ecd7ac)
   Steinpraesentationen auf Cognac statt Schwarz. Aktiv nur, wenn
   tools/build.py mit SCHEMA = "b" baut (Klasse auf <body>). Schema A bleibt
   oben vollstaendig erhalten — Ruecksprung: SCHEMA = "a" + neu bauen.
   ========================================================================== */
.schema-b {
  --cognac:      #9a5c35;
  --cognac-tief: #3a2113;
  --champagner:  #ecd7ac;   /* = --gold-2, als Flaechenfarbe */
  --champagner-50: #f6ebd6; /* Champagner auf 50 % (mit Weiss gemischt) —
                               neben dem Cognac-Band sonst zu aufdringlich */
  --paper-2:     #e3e0da;   /* Greige statt #eae5da */
}

/* Startseite: Cognac nur als kompaktes Band mit den besonderen Steinen direkt
   unter dem Hero; die weiteren Neuzugaenge darunter wieder hell (Champagner).
   (Rueckmeldung 17.08.: Cognac nicht grossflaechig.) */
.schema-b.seite-start #shop {
  background: var(--cognac);
  /* Band kompakter: Ober-/Unterlaenge reduziert (17.08.). */
  padding-block: clamp(2rem, 3.5vw, 3rem);
}
.schema-b.seite-start #shop .section-head { margin-bottom: clamp(1.6rem, 3vw, 2.4rem); }
.schema-b.seite-start #shop .eyebrow { color: var(--gold-2); }
.schema-b.seite-start #shop h2 { color: var(--fg); }
/* Auf Cognac traegt der Paper-Akzent (--gold-3) nicht — Champagner nehmen. */
.schema-b.seite-start #shop .italic-accent { color: var(--gold-2); }
.schema-b.seite-start #shop .pcard-type { color: var(--gold-2); }
.schema-b.seite-start #shop .pcard h3 { color: var(--fg); }
.schema-b.seite-start #shop .pcard .price { color: var(--gold-2); }
/* Fokusglas — ENTSCHIEDEN 17.08.: reine Kreise ohne Outline, nur weicher
   Schatten ("am elegantesten"). Verworfen am Bild: 3px Schwarz, 1.5px
   Espresso, Champagner-Doppellinie. */
.schema-b.seite-start #shop .pcard-media {
  border-radius: 50%;
  border: none;
  box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .55);
}
.schema-b.seite-start #shop .pcard:hover .pcard-media { border: none; }
.schema-b.seite-start #neuzugaenge { background: var(--champagner-50); }
.schema-b.seite-start #neuzugaenge .pcard-media { border-color: rgba(138, 111, 66, .4); }
/* Warengruppe und Preis auf Pearl in dunklem Bronze — mehr Kontrast (17.08.). */
.schema-b.seite-start #neuzugaenge .pcard-type,
.schema-b.seite-start #neuzugaenge .pcard .price { color: #6d5426; }

/* Shop: das Sortiment nicht auf dem tiefen Seitengrund, sondern eine Stufe
   heller (Noir-Flaeche #17181e) — Wunsch 17.08., "nicht ganz schwarz". */
.schema-b.seite-shop #sortiment { background: #17181e; }

/* Katalog bleibt auf Schwarz; Cognac erscheint dort nur noch in der
   Eckdaten-Tafel der Steine und der Artikel-Detailansicht. */
.schema-b .gem figcaption {
  background: linear-gradient(180deg, transparent, rgba(58, 33, 19, .93) 42%, rgba(58, 33, 19, .97));
}
.schema-b .gem-facts dt { color: var(--gold); }
.schema-b .pcard--dark .pcard-type { color: var(--gold-2); }
.schema-b .pcard--dark:hover .pcard-media { border-color: var(--gold-2); }
.schema-b .artikel-panel { background-color: #2b1a10; }
.schema-b .ap-bar { background: rgba(43, 26, 16, .9); }

/* ==========================================================================
   Design-Konzept-Seiten (intern): Kopf mit MDMX-Studio-Logo und Umschalter
   zwischen elemente.html und farbpalette.html.
   ========================================================================== */
.dk-kopf {
  text-align: center;
  padding-top: calc(var(--hdr-h) + clamp(2.5rem, 5vw, 4rem));
}
/* Eine Zeile: grosses DESIGN-KONZEPT, daneben das MDMX-Querformat-Logo. */
.dk-marke {
  display: flex; align-items: center; justify-content: center;
  gap: clamp(.9rem, 2vw, 1.6rem); flex-wrap: wrap;
  padding-inline: var(--gut);
}
.dk-titel {
  font-family: var(--ff-body); font-weight: 300;
  font-size: clamp(1.35rem, 3vw, 2.1rem); line-height: 1;
  letter-spacing: .18em; text-transform: uppercase; color: var(--fg);
}
/* Logo auf Versalhoehe des Schriftzugs — weniger ist mehr (17.08.). */
.dk-logo { height: clamp(1rem, 2.2vw, 1.55rem); width: auto; }
.dk-schalter {
  display: flex; gap: 1.2rem; justify-content: center; flex-wrap: wrap;
  margin-top: clamp(1.8rem, 4vw, 2.6rem);
}
.dk-schalter .btn { font-size: 1.05rem; padding: 1.3rem 3.2rem; }


/* ==========================================================================
   Experten-Box (Element, 17.08.2026): Portraet, Ueberschrift, Beratungstext.
   Zwei Fassungen — .xpb fuer dunkle, .xpb--hell fuer helle Flaechen.
   ========================================================================== */
.xpb {
  max-width: 340px;
  border-radius: var(--r); overflow: hidden;
  background: var(--ink-2); border: 1px solid var(--line-soft);
}
.xpb > img { width: 100%; height: auto; }
.xpb-body { padding: 1.4rem 1.5rem 1.6rem; }
.xpb-rolle {
  font-size: .66rem; font-weight: 500; letter-spacing: .18em;
  text-transform: uppercase; color: var(--gold); margin: 0 0 .7rem;
}
.xpb-body h3 { font-size: 1.5rem; margin: 0 0 .8rem; }
.xpb-body p { font-size: .92rem; line-height: 1.6; color: var(--fg-dim); }
.xpb .link-arrow { margin-top: 1rem; }

/* Weiss statt Creme: auf den hellen Sektionen muss sich die Box abheben. */
.xpb--hell { background: #fff; border-color: var(--paper-line); }
.xpb--hell .xpb-rolle { color: var(--gold-3); }
.xpb--hell .xpb-body h3 { color: var(--paper-fg); }
.xpb--hell .xpb-body p { color: var(--paper-dim); }
.xpb--hell .link-arrow { color: var(--gold-3); }

/* ==========================================================================
   Inline-Anfrageformular (Shop, "Wir suchen weiter") — Botschutz-Mechanik
   wie Website-VMC2: Honeypot, Zeitfalle, Schrift-Heuristik; KI vorbereitet.
   Endpoint: site/anfrage.php, Ablage im vhost unter ../private/anfragen/.
   ========================================================================== */
.af { max-width: 640px; margin: 2.4rem auto 0; text-align: left; display: grid; gap: 1rem; }
.af-felder { display: grid; gap: 1rem; }
@media (min-width: 640px) { .af-felder { grid-template-columns: 1fr 1fr; } }
.af-feld { display: grid; gap: .4rem; }
.af-feld > span {
  font-size: .8rem; font-weight: 500; letter-spacing: .18em;
  text-transform: uppercase; color: var(--gold-3);
}
.af-feld input, .af-feld textarea {
  font: inherit; color: var(--paper-fg);
  background: #fff; border: 1px solid var(--paper-line); border-radius: var(--r);
  padding: .75rem .9rem; width: 100%; resize: vertical;
}
.af-feld input:focus-visible, .af-feld textarea:focus-visible {
  outline: 2px solid var(--gold); outline-offset: 1px;
}
/* Honeypot: fuer Menschen unerreichbar, fuer Formular-Bots ein Feld wie jedes. */
.af-hp { position: absolute !important; left: -9999px; top: auto; }
.af .btn-row { margin-top: .4rem; justify-content: center; }
.af-status { text-align: center; font-size: .95rem; color: var(--paper-dim); min-height: 1.5em; margin: 0; }
.af-status.ist-ok { color: #2e6b46; }
.af-status.ist-fehler { color: #9c3a32; }
.af.ist-gesendet .af-felder, .af.ist-gesendet .af-feld, .af.ist-gesendet .btn-row { display: none; }

/* Formular und Experten-Box als festes Paar: Formular IMMER links,
   die Box daneben rechts — im 2/3-zu-1/3-Raster (17.08.). */
.af-zeile {
  display: grid; gap: clamp(1.5rem, 3vw, 2.5rem);
  margin-top: 2.4rem; text-align: left;
  justify-items: start;
}
@media (min-width: 960px) {
  .af-zeile { grid-template-columns: 2fr 1fr; align-items: start; }
}
.af-zeile .af { margin: 0; width: 100%; max-width: none; }
/* Die Box behaelt ihre kompakte Stammgroesse (17.08.) — sie soll die
   1/3-Spalte nicht ausfuellen. */
.af-zeile .xpb { width: 100%; max-width: 340px; }
.af-zeile .btn-row { justify-content: flex-start; }

.af-optional {
  font-style: normal; text-transform: none; letter-spacing: .02em;
  color: var(--paper-dim); opacity: .8;
}
.af-zustimmung {
  display: flex; gap: .7rem; align-items: flex-start;
  font-size: .82rem; line-height: 1.55; color: var(--paper-dim);
  max-width: 62ch;
}
.af-zustimmung input {
  margin-top: .25em; width: 1.05rem; height: 1.05rem; flex: none;
  accent-color: var(--gold-3);
}
.af-zustimmung a { border-bottom: 1px solid currentColor; }

/* Schlagwörter unter dem Kategorietext (01.10.2026).
   ⛔ Sie sind der Grund, warum 47 Minerale in 15 Kategorien passen: der
   Katalog führt den populären Namen als Kategorie, und was sonst unsichtbar
   bliebe — Rubellit, Tsavorit, Demantoid — steht hier beim Namen.
   Bewusst zurückhaltend: sie erklären, sie werben nicht. */
.cat-tags {
  display: flex; flex-wrap: wrap; gap: .35rem .5rem;
  margin: .9rem 0 0; padding: 0;
}
.cat-tags span {
  font-size: .76rem; letter-spacing: .04em;
  padding: .18rem .55rem;
  color: var(--fg-dim);
  border: 1px solid var(--line);
  border-radius: 999px;
  white-space: nowrap;
}

/* Unternehmensangaben im Impressum (01.10.2026) — Begriff und Wert als Paar,
   nicht als Fließtext: eine Pflichtangabe soll auffindbar sein, nicht gesucht
   werden müssen. */
.recht-daten { display: grid; gap: .6rem; margin: 1.1rem 0 0; }
.recht-daten > div { display: grid; grid-template-columns: 15rem 1fr; gap: .9rem; }
.recht-daten dt { color: var(--fg-dim); font-size: .92rem; }
.recht-daten dd { margin: 0; color: var(--fg); font-size: .98rem; }
@media (max-width: 620px) {
  .recht-daten > div { grid-template-columns: 1fr; gap: .1rem; }
  .recht-daten dt { font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; }
}

/* ==========================================================================
   Warenkorb (01.10.2026)
   ==========================================================================
   ⛔ OHNE JAVASCRIPT GIBT ES IHN NICHT. Er lebt im localStorage; ein sichtbarer
   Knopf, der ins Leere führt, wäre schlimmer als keiner. Dieselbe Regel wie
   beim Suchfeld im Shop. */
.korb-knopf { display: none; }
.js .korb-knopf {
  display: inline-flex; align-items: center; gap: .4rem;
  position: relative; padding: .45rem .6rem;
  color: var(--fg-dim); border-radius: 999px;
  transition: color .3s var(--ease), background .3s var(--ease);
}
.korb-knopf:hover { color: var(--fg); background: rgba(255, 255, 255, .07); }
.korb-zahl {
  min-width: 1.15rem; height: 1.15rem; padding: 0 .3rem;
  display: grid; place-items: center;
  border-radius: 999px; background: var(--gold); color: #17171d;
  font-size: .68rem; font-weight: 600; letter-spacing: 0;
}
.korb-zahl[hidden] { display: none; }

/* Ein Stück im Warenkorb ist bereits drin — der Knopf sagt es, statt es
   beim nächsten Klick stillschweigend wieder hinauszuwerfen. */
.ap-cart.ist-drin .cart-btn { background: var(--gold); color: #17171d; }
.ap-cart.ist-drin .cart-label { color: var(--gold-2); }

.korb-liste { list-style: none; padding: 0; margin: clamp(1.6rem, 4vw, 2.4rem) 0 0; }
.korb-zeile {
  display: grid; grid-template-columns: 96px 1fr auto;
  gap: clamp(.9rem, 2.4vw, 1.6rem); align-items: center;
  padding: 1rem 0; border-top: 1px solid var(--line-soft);
}
.korb-zeile:last-child { border-bottom: 1px solid var(--line-soft); }
.korb-zeile img {
  width: 96px; height: 96px; object-fit: cover;
  border-radius: var(--r); background: #fff;
}
.korb-text { display: grid; gap: .18rem; min-width: 0; }
.korb-art { font-size: .64rem; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-3); }
.korb-titel { color: var(--fg); font-size: .98rem; line-height: 1.4; }
.korb-titel:hover { color: var(--gold-2); }
.korb-preis { font-family: var(--ff-display); font-size: 1.2rem; color: var(--gold-2); }
.korb-weg {
  padding: .4rem .7rem; border: 1px solid var(--line);
  border-radius: 999px; background: none; cursor: pointer;
  font-size: .74rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--fg-mute);
}
.korb-weg:hover { color: var(--fg); border-color: var(--gold-3); }

.korb-summe {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 1rem; margin: 1.4rem 0 .4rem; color: var(--fg-dim);
}
.korb-summe strong { font-family: var(--ff-display); font-size: 1.7rem; color: var(--gold-2); }
.korb-hinweis { color: var(--fg-mute); font-size: .86rem; max-width: 60ch; }

@media (max-width: 620px) {
  .korb-zeile { grid-template-columns: 72px 1fr; grid-template-areas: "bild text" "weg weg"; }
  .korb-zeile img { width: 72px; height: 72px; grid-area: bild; }
  .korb-text { grid-area: text; }
  .korb-weg { grid-area: weg; justify-self: start; }
}

/* ==========================================================================
   Hinweis zur lokalen Speicherung (04.10.2026)
   ==========================================================================
   ⛔ KEIN ZUSTIMMUNGS-BANNER. Die Seite setzt keine Cookies und lädt nichts von
   Dritten; gespeichert wird nur der Warenkorb und dieses Wegklicken. Ein
   „Akzeptieren / Ablehnen" täuschte eine Wahl vor, die es nicht gibt.
   ⛔ Ohne JS gar nicht da — ein Hinweis, den man nicht wegklicken kann, bleibt
   für immer stehen. */
.speicherhinweis { display: none; }
.js .speicherhinweis {
  position: fixed; left: 50%; bottom: clamp(.8rem, 2vw, 1.4rem);
  transform: translateX(-50%);
  z-index: 60;
  width: min(100% - 1.6rem, 58rem);
  display: flex; align-items: center; gap: clamp(.9rem, 2.5vw, 2rem);
  padding: clamp(.9rem, 2vw, 1.2rem) clamp(1rem, 2.4vw, 1.6rem);
  background: rgba(13, 13, 20, .96);
  border: 1px solid rgba(201, 164, 106, .35);
  border-radius: var(--r);
  box-shadow: 0 24px 60px -24px rgba(0, 0, 0, .85);
  backdrop-filter: blur(6px);
}
/* ⛔ `[hidden]` gewinnt — der Riegel aus dem Reset. Sonst stünde der Hinweis
   schon da, bevor das JS entschieden hat, ob er überhaupt gezeigt wird. */
.speicherhinweis p {
  margin: 0; flex: 1;
  font-size: .84rem; line-height: 1.55; color: var(--fg-dim);
}
.speicherhinweis strong { color: var(--fg); font-weight: 400; }
.speicherhinweis a { color: var(--gold-2); border-bottom: 1px solid currentColor; }
.speicherhinweis .btn { flex: none; }
@media (max-width: 620px) {
  .js .speicherhinweis { flex-direction: column; align-items: stretch; text-align: left; }
  .speicherhinweis p { font-size: .8rem; }
}