/* =========================================================================
   Artikelkarte als Schaltfläche + Detailansicht, die seitlich hereinfährt.
   Ausgelagert, weil site.css sonst zu unübersichtlich wird.
   ========================================================================= */

/* ---------- Karte ---------- */
.pcard { text-align: left; padding: 0; width: 100%; }
.pcard-open { display: block; width: 100%; text-align: left; padding: 0; cursor: pointer; }
.pcard .pcard-media { display: block; }
.pcard .pcard-body { display: flex; flex-direction: column; }

/* Warenkorbzeile direkt unter dem Kartenbild (Shop-Bereich, 17.08.) —
   gleiche Mechanik und derselbe Entwurfs-Hinweis wie in der Detailansicht,
   aber kleiner und invers (Champagner-Flaeche, dunkles Icon). */
/* .pcard davor noetig: die .ap-cart-Basisregel weiter unten setzt sonst den
   margin-top zurueck (gleiche Spezifitaet, spaeter im Stylesheet). */
.pcard .pcard-cartzeile { margin: 1.6rem 0 .4rem; gap: .55rem; }
/* Cognac-Flaeche mit hellem Korb — Champagner war zu kontrastreich (17.08.). */
.pcard-cartzeile .cart-btn {
  width: 30px; height: 30px;
  background: #9a5c35; color: #f6ebd6;
  box-shadow: none;
}
.pcard-cartzeile .cart-btn:hover {
  background: #b06a3e; color: #fff;
  box-shadow: none; transform: translateY(-1px);
}
.pcard-cartzeile .cart-label { font-size: .62rem; }

/* Bewusst ohne Hintergrund: nur ein dezenter grauer Hinweis auf dem Foto. */
.pcard-more {
  position: absolute; inset: auto 0 .85rem; z-index: 2;
  text-align: center;
  font-size: .745rem; letter-spacing: .18em; text-transform: uppercase;
  color: rgba(23, 23, 29, .5);
  opacity: 0;
  transition: opacity .35s var(--ease-out);
}
.pcard:hover .pcard-more,
.pcard:focus-visible .pcard-more { opacity: 1; }
@media (hover: none) { .pcard-more { opacity: 1; } }

/* ---------- Abdunklung dahinter ----------
   Beginnt unter der Kopfzeile: die Navigation soll erreichbar bleiben, das
   Panel schiebt sich darunter ein statt den ganzen Bildschirm zu belegen. */
.artikel-scrim {
  position: fixed; inset: var(--hdr-h) 0 0; z-index: 110;
  background: rgba(4, 4, 7, .66);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  opacity: 0; visibility: hidden;
  transition: opacity .45s var(--ease), visibility 0s linear .45s;
}
.artikel-scrim.is-open {
  opacity: 1; visibility: visible;
  transition: opacity .45s var(--ease), visibility 0s linear 0s;
}

/* ---------- Detailansicht ----------
   Hintergrund ist eine Schieferaufnahme; welche, entscheidet das JS bei jedem
   Seitenaufruf neu (data-bg am <body>). Darueber liegt ein dunkler Schleier,
   damit die Schrift unabhaengig vom Motiv sicher lesbar bleibt. */
.artikel-panel {
  position: fixed; inset: var(--hdr-h) 0 0 auto; z-index: 115;
  width: min(100%, 940px);
  background-color: #0f0f13;
  background-size: cover; background-position: center;
  color: var(--fg);
  box-shadow: -30px 0 80px -40px #000;
  transform: translateX(100%);
  transition: transform .52s var(--ease-out);
  will-change: transform;
}
.artikel-panel.is-open { transform: none; }
/* display:none, solange geschlossen — sonst laedt der Browser die Bilder ALLER
   Detailansichten mit (auf der Shopseite waren das 2,1 MB fuer 28 Panels, die
   niemand geoeffnet hat). Das JS erzwingt vor dem Einfahren ein Reflow, damit
   die Transition trotzdem laeuft. */
.artikel-panel[hidden] { display: none; }

.ap-inner {
  position: relative; z-index: 1;
  height: 100%; overflow-y: auto;
  overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  /* Ganzflaechiger Schleier ueber dem Schiefer (17.08.): die Maserung soll
     nur noch ganz leicht durchscheinen. */
  background: rgba(10, 10, 14, .55);
}

.ap-bar {
  position: sticky; top: 0; z-index: 3;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1rem clamp(1.25rem, 3vw, 2.5rem);
  background: rgba(12, 12, 16, .88);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line-soft);
}
.ap-back {
  display: inline-flex; align-items: center; gap: .6rem;
  font-size: .78rem; letter-spacing: .16em; text-transform: uppercase;
  color: #fff;
  transition: color .3s;
}
.ap-back:hover { color: var(--gold-2); }
.ap-back svg { transition: transform .3s var(--ease-out); }
.ap-back:hover svg { transform: translateX(-3px); }
.ap-type { font-size: .64rem; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); }

.ap-grid { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); padding: clamp(1.5rem, 3vw, 2.5rem); }
@media (min-width: 780px) {
  .ap-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: start; }
}

.ap-images { display: grid; gap: .8rem; align-content: start; }
.ap-shot {
  border: 1px solid rgba(255, 255, 255, .12); border-radius: var(--r);
  overflow: hidden; background: #fff;
}
.ap-shot img { width: 100%; height: auto; display: block; }

.ap-text h2 { font-size: clamp(1.6rem, 3vw, 2.3rem); line-height: 1.12; color: var(--fg); }
.ap-price {
  font-family: var(--ff-display); font-size: 2rem; color: var(--gold-2);
  margin: .8rem 0 1.4rem;
}
/* Kleine Schriften auf dem Schiefer in Wollweiss — gedaempftes Taupe war
   trotz Abdecker zu schwach lesbar (17.08.). */
.ap-lead { color: var(--fg); font-size: 1rem; line-height: 1.65; }

/* Langbeschreibung aus der Erfassung (01.10.2026) — eine Stufe leiser als die
   Leitzeile, damit die Reihenfolge Leitzeile → Text → Eckdaten lesbar bleibt. */
.ap-beschreibung {
  color: var(--fg-dim); font-size: .94rem; line-height: 1.7;
  margin: .9rem 0 0;
}

/* Eckdaten — bewusst etwas groesser als der Rest: das ist der Grund,
   warum jemand die Detailansicht ueberhaupt oeffnet. */
.ap-facts {
  display: grid; gap: .62rem; margin-top: 1.7rem;
  border-top: 1px solid var(--line-soft); padding-top: 1.5rem;
}
.ap-facts > div { display: grid; grid-template-columns: 8.4rem 1fr; gap: .9rem; align-items: baseline; }
.ap-facts dt { font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); }
.ap-facts dd { margin: 0; font-size: 1.08rem; line-height: 1.45; color: #e6e1d9; }
@media (max-width: 560px) {
  .ap-facts > div { grid-template-columns: 1fr; gap: .1rem; }
}

.ap-cta { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2rem; }
.ap-note { margin-top: 1.2rem; font-size: .78rem; color: var(--fg-mute); }

@media (prefers-reduced-motion: reduce) {
  .artikel-panel { transition: none; }
}


/* =========================================================================
   Schaufenster-Hero der Shopseite
   ========================================================================= */
.shop-hero { position: relative; padding-top: var(--hdr-h); }

.sw-frame {
  position: relative;
  aspect-ratio: 4000 / 2233;
  background: var(--ink);
  overflow: hidden;
}

/* ⛔ DIE BUEHNE TRAEGT FOTO UND AUSLAGE GEMEINSAM. Die Auslage ist in Prozent
   des Fotos ausgemessen; beide muessen deshalb immer dieselbe Flaeche haben.
   Auf dem Desktop ist das der ganze Rahmen — auf dem Telefon wird die Buehne
   groesser als der Rahmen und mittig gesetzt, und damit zoomt das Stylesheet
   in die Auslage hinein, OHNE dass die gemessenen Prozentwerte verrutschen. */
.sw-buehne { position: absolute; inset: 0; }
/* Das Schaufenster ist das Hintergrundbild, die Auslage liegt darueber. */
.sw-glass {
  position: absolute; inset: 0; z-index: 1;
  width: 100%; height: 100%; object-fit: cover;
}
/* Auslagenflaeche, aus dem Bild gemessen. Die vier Zahlen kommen als Custom
   Properties aus dem Bau (--l --t --w --h, alle ohne Einheit) — beide
   Ansichten rechnen damit weiter, statt dass jede ihre eigenen Werte traegt. */
.sw-window {
  position: absolute; z-index: 2;
  left: calc(var(--l) * 1%); top: calc(var(--t) * 1%);
  width: calc(var(--w) * 1%); height: calc(var(--h) * 1%);
  display: flex; flex-direction: column; justify-content: flex-start;
  padding-top: clamp(.6rem, 4%, 2.4rem);
  gap: clamp(1rem, 4%, 2.4rem);
}

/* Ueberschrift. Auf dem TELEFON steht sie ueber der ersten Auslage, auf dem
   Desktop darin (Vorgabe 01.10.2026) — siehe Medienabfrage weiter unten. */
.sw-kopf {
  padding: clamp(1.6rem, 6vw, 2.6rem) 0 clamp(1rem, 3vw, 1.6rem);
  background: var(--ink);
}
.sw-kopf-satz { text-align: center; }
.sw-kopf .eyebrow {
  justify-content: center; margin-bottom: .7rem;
  font-size: clamp(.7rem, 1.05vw, 1.05rem);
}
.sw-kopf h2 {
  font-size: clamp(1.9rem, 3.9vw, 3.8rem); line-height: 1.05; color: var(--fg);
}

/* ⛔ TELEFON: EIN STUECK JE AUSLAGE, drei Auslagen untereinander
   (Vorgabe 01.10.2026). Das ist der Grundzustand; der Desktop baut daraus
   weiter unten wieder EINE Auslage mit drei Stuecken.
   Die Breite ist so gewaehlt, dass das Stueck etwa so gross bleibt wie in der
   Dreierreihe: ein Schaufenster, das von einem einzigen Stein ausgefuellt wird,
   zeigt kein Schaufenster mehr, sondern nur noch den Stein. */
.sw-highlights {
  display: grid; grid-template-columns: 1fr;
  /* ⛔ DIE BREITE IST EIN HOEHENBUDGET, KEIN GESCHMACK. In die Auslage muessen
     Bild, zweizeilige Unterschrift und Preis passen; sie ist aus dem Foto
     gemessen und waechst nicht mit. Bei 45 % ohne Unterschrift ging es auf,
     mit Unterschrift stehen die Stuecke sonst unter der Scheibe. */
  /* Die Spur ist breiter als das Bild — die Unterschrift bekommt dadurch
     Platz, ohne dass der Stein kleiner wird (siehe .sw-hl-frame unten). */
  width: min(100%, 72%); margin-inline: auto;
  /* Rest der Auslage einnehmen und das Stueck darin mittig setzen */
  flex: 1; align-content: center;
}
.sw-window { justify-content: center; }

/* ⛔ AUF DEM TELEFON IN DIE AUSLAGE HINEINZOOMEN (Vorgabe 01.10.2026:
   „Abbildungen deutlich vergrößern"). Die Auslage ist aus dem Foto gemessen und
   damit auf 390 px Bildschirmbreite nur 227 x 147 px gross — ein Stueck darin
   kann nicht groesser werden als dieser Ausschnitt. Also wird der Ausschnitt
   groesser: der Rahmen wird quadratisch, die Buehne 165 % breit und mittig.
   Vom Schaufensterfoto bleibt die Auslage, die Deko links und rechts faellt
   weg — auf einem Telefon ist sie ohnehin nur Beiwerk.
   ⛔ Buehne UND Auslage werden gemeinsam skaliert, deshalb bleiben die
   gemessenen Prozentwerte gueltig. */
@media (max-width: 620px) {
  /* ⛔ 145 %, NICHT MEHR. Bei 165 % blieben links und rechts sieben Pixel
     Schaufensterrahmen stehen — dann ist es kein Schaufenster mehr, sondern
     eine dunkle Platte mit einem Stein darauf. Bei 145 % bleiben rund 30 px
     Rahmen sichtbar, und das Stueck ist trotzdem dreimal so gross wie vorher.
     ⛔ Das Rahmenverhaeltnis 5/4 ist so gewaehlt, dass die Buehne es fast genau
     ausfuellt — sonst stehen oben und unten schwarze Baender. */
  .sw-frame { aspect-ratio: 5 / 4; }
  /* ⛔ KEIN POLSTER OBEN MEHR. Es hielt die Ueberschrift von der Fensterkante
     weg — die steht jetzt ausserhalb der Auslage. Gemessen frisst es 24 px von
     223 px Auslagenhoehe, und genau die fehlten der Bildunterschrift. */
  .sw-window { padding-top: 0; }
  .sw-buehne {
    inset: auto auto auto 50%;
    top: 50%;
    /* 152 % statt 145: die Bildunterschrift braucht zwei Zeilen in der Auslage,
       und die Auslage waechst nur mit dem Zoom. Sichtbarer Schaufensterrahmen
       dabei noch rund 22 px je Seite — bei 165 % waeren es sieben. */
    width: 152%; aspect-ratio: 4000 / 2233;
    transform: translate(-50%, -50%);
  }
}

/* =========================================================================
   Desktop: aus den drei Rahmen wird wieder EINE Auslage
   (Vorgabe 01.10.2026 — drei Schaufenster nur auf dem Telefon)
   =========================================================================
   ⛔ KEIN ZWEITES MARKUP. Die drei Rahmen bleiben; hier legt das Stylesheet
   sie deckungsgleich uebereinander, blendet die Scheiben zwei und drei aus und
   rueckt die drei Stuecke nebeneinander in dieselbe Auslage. Alle Masse kommen
   aus denselben Custom Properties wie oben — es gibt keine zweite Zahlenreihe,
   die auseinanderlaufen koennte.

   ⛔ DER UMBRUCH IST DERSELBE WIE BEIM UEBRIGEN MOBILLAYOUT (620 px). Eine
   eigene Zahl hier waere eine zweite Stelle fuer dieselbe Entscheidung — genau
   daran ist heute schon das `sizes`-Attribut gescheitert. */
@media (min-width: 621px) {
  /* Die Rahmen zwei und drei legen sich deckungsgleich ueber den ersten; nur
     ihre Auslage bleibt sichtbar. Der erste Rahmen bestimmt die Hoehe. */
  .shop-hero { position: relative; }
  /* ⛔ `.sw-frame ~ .sw-frame`, NICHT `:not(:first-of-type)`. Jenes geht auf den
     Elementtyp, und seit die Ueberschrift als `div` davor steht, traf es den
     KOPF statt den ersten Rahmen: alle drei Rahmen wurden absolut gesetzt, die
     Sektion fiel auf null Hoehe zusammen und das Schaufenster war weg. */
  .sw-frame ~ .sw-frame {
    position: absolute; inset: var(--hdr-h) 0 0 0;
    aspect-ratio: auto; background: none;
  }
  .sw-frame ~ .sw-frame .sw-glass,
  .sw-frame ~ .sw-frame .sw-fade { display: none; }

  /* ⛔ Die Ueberschrift wandert zurueck IN die Auslage. Sie steht im Markup vor
     den Rahmen (fuer das Telefon); hier deckt sie den Rahmenkasten ab und setzt
     den Satz an dieselbe Stelle, an der er vor dem Umbau stand. Die Masse sind
     dieselben vier Zahlen wie bei der Auslage. */
  .sw-kopf {
    position: absolute; inset: var(--hdr-h) 0 0 0;
    z-index: 3; pointer-events: none;
    padding: 0; background: none;
  }
  .sw-kopf-satz {
    position: absolute;
    left: calc(var(--l) * 1%); top: calc(var(--t) * 1%);
    width: calc(var(--w) * 1%);
    padding-top: clamp(.6rem, 4%, 2.4rem);
  }
  /* Die zweite und dritte Auslage hat keine Ueberschrift und darf die
     darunterliegende Scheibe nicht fuer Klicks blockieren. */
  .sw-window { pointer-events: none; }
  .sw-hl { pointer-events: auto; }

  /* Drei Spuren in einer Auslage: 74 % der Breite, mittig, wie vor dem Umbau.
     `--i` ist der Platz (0, 1, 2) und kommt aus dem Bau.

     ⛔ ABSOLUT GESETZT, NICHT IM FLUSS. Im Fluss haengt die Hoehe davon ab, ob
     ueber dem Stueck eine Ueberschrift steht — und die gibt es nur in der
     ersten Auslage. Das erste Stueck stand dadurch tiefer als die beiden
     anderen. Mit einem festen Abstand von oben stehen alle drei auf einer
     Linie, unabhaengig davon, was ueber ihnen liegt. */
  .sw-highlights {
    position: absolute;
    top: 38%;
    left: calc(13% + var(--i) * (74% / 3));
    width: 22%;
    margin: 0;
  }
}
.sw-hl {
  display: flex; flex-direction: column; align-items: center;
  gap: .55rem; padding: 0; width: 100%; cursor: pointer;
  transition: transform .45s var(--ease-out);
}
.sw-hl:hover { transform: translateY(-4px); }

/* Goldrahmen: echter Verlauf, kein flacher Strich — sonst wirkt es wie ein
   Kasten und nicht wie eine Fassung. */
.sw-hl-frame {
  /* Echter border, kein padding+background: overflow:hidden schneidet an der
     Innenkante, das um 35 % vergroesserte Foto lief sonst ueber die Polsterung
     und der Rahmen war unsichtbar. Ein border liegt ausserhalb davon.
     Farbe bewusst dieselbe wie die Preisschrift (--gold-2). */
  display: block; width: 100%;
  border: 2px solid var(--gold-2);
  border-radius: 2px;
  box-shadow: 0 10px 28px -14px rgba(0, 0, 0, .9);
  transition: box-shadow .45s var(--ease);
}
.sw-hl:hover .sw-hl-frame { box-shadow: 0 16px 34px -14px rgba(0, 0, 0, .95); }
.sw-hl-frame img {
  display: block; width: 100%; aspect-ratio: 1; object-fit: cover;
  background: #fff;
  transform: scale(1.35);
  transition: transform 1s var(--ease-out);
}
.sw-hl-frame { overflow: hidden; }
.sw-hl:hover .sw-hl-frame img { transform: scale(1.42); }

/* Schrift wie bei den Artikelkarten weiter unten im Shop */
.sw-hl-name {
  font-family: var(--ff-body); font-weight: 400;
  font-size: clamp(.72rem, 1vw, .95rem); line-height: 1.45; color: var(--fg);
  text-align: center; max-width: 22ch;
  /* ⛔ FESTE ZEILENZAHL, SONST HAENGT DIE AUSLAGE AM STEINNAMEN. Seit
     01.10.2026 wuerfelt das JS, welche drei der markierten Stuecke im Fenster
     stehen. Ein langer Titel brach vorher in eine dritte Zeile, die Reihe
     wuchs, und die Stuecke standen 18 px unter der Scheibe — bei 820 px
     gemessen. Die Auslage ist aus dem Foto ausgemessen und waechst nicht mit:
     ihre Hoehe muss also unabhaengig vom Inhalt sein. */
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  overflow: hidden;
  height: calc(2 * 1.45em);
}
/* Zwischen 700 und 1000 px bleibt fuer zwei Zeilen kein Platz — eine. */
@media (max-width: 1000px) {
  .sw-hl-name { -webkit-line-clamp: 1; height: 1.45em; }
}
.sw-hl-price {
  font-family: var(--ff-display);
  font-size: clamp(1rem, 1.45vw, 1.4rem); color: var(--gold-2);
}
/* ⛔ NUR ZWISCHEN 621 UND 700 px AUSBLENDEN. Dort gilt noch die Desktop-
   Auslage mit drei Stuecken nebeneinander — jedes ist dann so schmal, dass der
   Name nur noch ein Stolperstein waere. Unterhalb von 620 px gibt es die grosse
   Einzelauslage, und dort gehoert die Bildunterschrift hin
   (Vorgabe 01.10.2026). */
@media (min-width: 621px) and (max-width: 700px) {
  .sw-hl-name { display: none; }
}
@media (max-width: 620px) {
  /* ⛔ DIESER BLOCK MUSS NACH der Grundregel fuer `.sw-hl-frame` stehen.
     Zuerst stand er davor — gleiche Spezifitaet, also gewann die spaetere
     Grundregel mit `width: 100%`, und das Bild wurde doppelt so gross statt
     kleiner. Die Pruefung hat es gemeldet (Stueck 53 px unter der Scheibe).
     Das Bild bleibt bei 38 % der Auslage: 53 % von 72 % der Spur. */
  .sw-hl-frame { width: 53%; margin-inline: auto; }
  .sw-hl-name {
    display: -webkit-box;
    -webkit-line-clamp: 2; height: calc(2 * 1.45em);
    font-size: .78rem;
    /* ⛔ DIE UNTERSCHRIFT DARF BREITER SEIN ALS DIE FASSUNG. Sonst bricht sie
       auf Bildbreite um und waere nach zwei Zeilen abgeschnitten —
       „Smaragd square emerald cut 1,64ct…" statt der vollen Angabe. Die Hoehe
       bleibt dieselbe, es ist nur mehr Platz je Zeile. */
    max-width: 100%;
  }
}

/* Nach unten ausblenden, damit die Bildkante nicht sichtbar wird. */
.sw-fade {
  position: absolute; inset: auto 0 -1px; z-index: 3;
  /* Das Fenster endet bei 81,5 % der Bildhoehe. Der Verlauf muss darunter
     bleiben, sonst legt er sich als Schleier ueber den Stein. */
  height: 30%;
  background: linear-gradient(180deg,
    rgba(8, 8, 12, 0) 0%, rgba(8, 8, 12, .10) 38%,
    rgba(8, 8, 12, .70) 74%, var(--ink) 100%);
  pointer-events: none;
}

.sw-caption {
  position: relative; z-index: 4;
  /* nur so weit ins Bild ziehen, dass der Text im ausgeblendeten
     Bereich liegt und nicht auf der Fensterkante sitzt */
  margin-top: clamp(-5rem, -5.5vw, -2.5rem);
  padding-bottom: clamp(1.5rem, 3vw, 3rem);
}
.sw-caption .eyebrow { margin-bottom: .9rem; }
.sw-caption h2 { color: var(--fg); }
.sw-price {
  font-family: var(--ff-display); font-size: 1.7rem; color: var(--gold-2);
  margin: .5rem 0 1.4rem;
}

@media (max-width: 700px) {
  /* Hochkant wuerde das Schaufenster zum Streifen — etwas anschneiden ist besser. */
  .sw-frame { aspect-ratio: 4 / 3; }
  .sw-glass { object-position: center; }
  .sw-caption { margin-top: clamp(-5rem, -14vw, -3rem); }
}

/* ---------- Szene als breites Band ---------- */
.szene {
  display: grid; gap: clamp(1.5rem, 3vw, 3rem);
  align-items: center;
  padding: clamp(2.5rem, 5vw, 4.5rem) 0;
  border-block: 1px solid var(--line-soft);
  margin-block: clamp(2.5rem, 5vw, 4rem);
}
/* Szene kompakt (17.08.): das Beratungsfenster nimmt nur noch ein Drittel —
   Portraet klein, Text traegt. */
@media (min-width: 860px) { .szene { grid-template-columns: minmax(0, 1fr) minmax(0, 2.2fr); } }
.szene-bild { position: relative; border-radius: var(--r); overflow: hidden; max-width: 360px; }
.szene-bild img { width: 100%; height: auto; display: block; }
.szene-bild::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  box-shadow: inset 0 0 0 1px var(--line);
}
.szene-bild .ph {
  position: absolute; left: .7rem; bottom: .7rem; z-index: 2;
  padding: .35rem .75rem; border-radius: 999px;
  background: rgba(8, 8, 12, .82); box-shadow: inset 0 0 0 1px rgba(201, 164, 106, .45);
  font-size: .58rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-2);
}
.szene blockquote {
  margin: 1.1rem 0 0; font-family: var(--ff-display); font-weight: 300;
  font-size: clamp(1.45rem, 2.6vw, 2.1rem); line-height: 1.32; color: var(--fg);
}
.szene blockquote::before { content: "„"; color: var(--gold-3); }
.szene blockquote::after { content: "“"; color: var(--gold-3); }
.szene cite {
  display: block; margin-top: 1rem; font-style: normal;
  font-size: .68rem; letter-spacing: .2em; text-transform: uppercase; color: var(--fg-mute);
}
.szene .link-arrow { margin-top: 1.5rem; }

/* ---------- Textbloecke auf dem Schiefer ----------
   Der Schiefer ist lebendig gemasert; damit Fliesstext und Datentafel ruhig
   stehen, bekommen sie eine halbtransparente schwarze Unterlage. Die Maserung
   bleibt eine Ahnung, die Schrift steht sauber — Deckung am 17.08. in zwei
   Schritten von .5 auf .85 verstaerkt, der Hintergrund kam zu stark durch. */
.ap-lead {
  background: rgba(0, 0, 0, .85);
  padding: 1rem 1.15rem;
  border-radius: 3px;
}
.ap-facts {
  background: rgba(0, 0, 0, .85);
  padding: 1.25rem 1.15rem;
  border-radius: 3px;
  border-top: 0;
  margin-top: 1rem;
}

/* ---------- Warenkorb ---------- */
.ap-cart {
  display: flex; align-items: center; gap: .85rem;
  margin-top: .3rem;
}
/* In der Detailansicht sitzt der Warenkorb oben unter dem Preis (17.08.) —
   unter dem Bildstapel rutschte er bei vielen Aufnahmen aus dem Sichtfeld. */
.ap-text .ap-cart { margin: 0 0 1.6rem; }
.cart-btn {
  display: grid; place-items: center;
  width: 52px; height: 52px; flex: none;
  border-radius: 50%;
  color: var(--gold-2);
  box-shadow: inset 0 0 0 1px rgba(236, 215, 172, .45);
  background: rgba(0, 0, 0, .6);
  transition: color .3s var(--ease), box-shadow .3s var(--ease),
              background .3s var(--ease), transform .3s var(--ease-out);
}
.cart-btn:hover {
  color: var(--ink); background: var(--gold-2);
  box-shadow: inset 0 0 0 1px var(--gold-2);
  transform: translateY(-2px);
}
.cart-label {
  font-size: .85rem; letter-spacing: .16em; text-transform: uppercase;
  color: #fff;
}
.ap-cart.is-hint .cart-label { color: var(--gold-2); }

/* Hinweiszeile ebenfalls unterlegen — auf der Maserung war sie kaum lesbar. */
.ap-note {
  background: rgba(0, 0, 0, .85);
  padding: .85rem 1.15rem;
  border-radius: 3px;
  color: var(--fg);
}
/* Auf dem Schiefer trugen diese beiden zu wenig Kontrast — Warenkorb-Label
   groesser und in reinem Weiss (17.08.). */
.cart-label { color: #fff; }
.artikel-panel .btn--ghost {
  --btn-fg: var(--fg);
  background: rgba(0, 0, 0, .6);
  box-shadow: inset 0 0 0 1px rgba(236, 215, 172, .4);
}
.artikel-panel .btn--ghost:hover {
  --btn-fg: var(--gold-2);
  box-shadow: inset 0 0 0 1px var(--gold-2);
}

/* ==========================================================================
   Sammlungs-Navigation im Shop (10.10.2026)
   Kacheln, die zu den Sammlungen weiter unten fuehren. Vorbild war die
   „Search by Type"-Uebersicht, die der Auftraggeber mitgeschickt hat.
   ========================================================================== */

/* ⛔ EIN BEHAELTER, ZWEI REIHENFOLGEN. Am Telefon stehen die Kacheln ueber
   dem Schaufenster, am Desktop darunter (Vorgabe 10.10.2026). Geloest ueber
   `order` statt ueber zwei Bloecke im HTML \u2014 sonst stuende dieselbe
   Navigation zweimal in der Seite. */
.shop-kopf { display: flex; flex-direction: column; }
@media (max-width: 860px) {
  /* ⛔ WER NACH OBEN RUTSCHT, BRAUCHT DEN ABSTAND ZUR KOPFZEILE. Am Telefon
     steht die Navigation als ERSTES auf der Seite — und die Kopfzeile ist
     `position: fixed`. Ohne diesen Abstand schob sich die erste Kachelreihe
     darunter (gemeldet 10.10.2026). Am Desktop steht sie unter dem
     Schaufenster und braucht ihn nicht. */
  .shop-kopf > .shop-nav { order: -1; padding-top: calc(var(--hdr-h) + 1.4rem); }
}

/* ⛔ UND DASSELBE BEIM SPRINGEN. Ein Klick auf eine Kachel fuehrt zu
   `#s-<name>`; ohne `scroll-margin-top` landet die Ueberschrift unter der
   fixierten Kopfzeile, und man sieht die Sammlung an, ohne ihren Namen zu
   sehen. Dieselbe Loesung wie bei `.cat-block`. */
/* ⛔ NACHKOMME, NICHT DIREKTES KIND (behoben 10.10.2026). Hier stand
   `.shop-gruppe > h3[id]`. Als die Ueberschrift in `.shop-gruppe-kopf`
   wanderte, griff die Regel nicht mehr — und der Sprung landete wieder
   unter der fixierten Kopfzeile: weder Name noch Rueckweg waren zu sehen,
   es sah aus, als funktioniere der Anker nicht.
   Der Abstand sitzt deshalb am Kopf UND an der Ueberschrift. */
.shop-gruppe-kopf,
.shop-gruppe h3[id] { scroll-margin-top: calc(var(--hdr-h) + 1.5rem); }

.shop-nav { padding-block: clamp(2.2rem, 4.5vw, 3.6rem); }
/* ⛔ FESTE SPALTENZAHL, NICHT auto-fill. Der Auftraggeber hat die Breite
   vorgegeben: drei am Telefon, rund zehn am Desktop. `auto-fill` haette je
   nach Fenster sieben oder zwoelf ergeben \u2014 und die Kachelgroesse waere
   nirgends die bestellte. */
/* ⛔ UND SIE BLEIBT KLEIN (Nachbesserung 10.10.2026: „viel dezenter, etwas
   mehr Abstand"). Vorher lief das Raster ueber die volle Breite, Kachel an
   Kachel — damit war die Navigation das Lauteste auf der Seite, obwohl sie
   nur hinfuehren soll. Begrenzte Rasterbreite plus groesserer Abstand:
   dieselbe Zahl Kacheln, deutlich ruhiger. */
/* ⛔ `minmax(0, 1fr)`, NICHT `1fr` (gemessen 10.10.2026). `1fr` ist in
   Wahrheit `minmax(auto, 1fr)`: eine Spalte darf wachsen, wenn ihr Inhalt
   breiter ist. Weil die zweite Reihe unter der ersten steht, zog
   „Rhodochrosit" die Spalte auf — und die Kachel „Apatit" darueber wurde
   76 px breit, waehrend die Nachbarn 70 hatten. Sichtbar als ungleich
   grosse Kacheln, nachgemessen im Browser. */
.sk-raster {
  display: grid; gap: clamp(1rem, 2vw, 1.5rem);
  grid-template-columns: repeat(10, minmax(0, 1fr));
  max-width: 58rem; margin-inline: auto;
}
@media (max-width: 1200px) { .sk-raster { grid-template-columns: repeat(6, minmax(0, 1fr)); max-width: 38rem; } }
@media (max-width: 860px)  { .sk-raster { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 21rem; } }

.sk {
  display: flex; flex-direction: column; gap: .45rem;
  text-align: center; color: var(--fg-dim);
  transition: color .3s var(--ease), transform .35s var(--ease-out);
}
.sk:hover, .sk:focus-visible { color: var(--fg); transform: translateY(-3px); }
/* Quadratisch, weil die Aufnahmen unterschiedliche Formate haben und eine
   Reihe sonst wellig wird. Der Ausschnitt ist bis auf Weiteres mittig \u2014
   das Werkzeug, mit dem der Auftraggeber ihn selbst setzt, kommt noch. */
/* Der Rahmen traegt Format, Rand und das Abschneiden; das Bild fuellt ihn
   nur aus. So darf ein gezoomtes Bild ueber seine Box hinausgehen, ohne in
   die Nachbarkachel zu laufen. */
.sk-rahmen {
  display: block; width: 100%; aspect-ratio: 1; overflow: hidden;
  border-radius: var(--r); background: var(--ink-3);
  border: 1px solid var(--line);
}
.sk:hover .sk-rahmen { border-color: var(--gold-3); }
.sk-bild { display: block; width: 100%; height: 100%; object-fit: cover; }
.sk-text {
  font-size: .7rem; letter-spacing: .05em; line-height: 1.3;
  /* ⛔ GETRENNT WIRD NACH SILBEN, NICHT IRGENDWO. Mit `overflow-wrap: anywhere`
     stand dort „Chrysoberyl / l" und „Rhodochros / it" — ein abgetrenntes
     Einzelzeichen liest sich wie ein Tippfehler. `hyphens: auto` greift, weil
     die Seite `lang="de"` traegt; `break-word` bleibt als Notnagel fuer
     Namen ohne Trennstelle. */
  hyphens: auto;
  overflow-wrap: break-word;
}
@media (max-width: 860px) { .sk-text { font-size: .74rem; } }

/* Die Stueckzahl an der Abschnittsueberschrift \u2014 zurueckhaltend, sie ist
   eine Angabe, keine Ansage. */
.gruppe-zahl {
  font-family: var(--ff-body); font-size: .62em; font-weight: 400;
  color: var(--fg-mute); vertical-align: middle; margin-left: .5rem;
  font-variant-numeric: tabular-nums;
}

/* Ueberschrift und Rueckweg in einer Zeile — der Rueckweg steht rechts und
   bleibt zurueckhaltend; er ist ein Ausweg, keine Einladung. */
.shop-gruppe-kopf {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
}
.shop-gruppe-kopf h3 { margin-bottom: 0; }
/* ⛔ SICHTBAR, NICHT NUR VORHANDEN (10.10.2026). Der Rueckweg stand blass
   und ganz rechts aussen — gemeldet mit „ein Zurück-Link ist nicht zu
   sehen", und zwar zu Recht: grau auf dunkel, am Rand, ohne Flaeche. Ein
   Ausweg, den man suchen muss, ist keiner. */
.sk-zurueck {
  font-size: .74rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--gold); white-space: nowrap;
  border: 1px solid var(--gold-3); border-radius: 999px;
  padding: .3rem .8rem;
  transition: color .3s var(--ease), background .3s var(--ease);
}
.sk-zurueck:hover, .sk-zurueck:focus-visible { background: var(--gold); color: var(--ink); }
/* Am Telefon steht er unter der Ueberschrift statt daneben — in einer Zeile
   mit einem langen Namen wie „Moldavit + Tektite" bliebe sonst nichts uebrig. */
@media (max-width: 620px) {
  .shop-gruppe-kopf { flex-direction: column; align-items: flex-start; gap: .5rem; }
}