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

/* ==========================================================================
   BEADBRACELETS — Designsystem nach der Referenz „NORDI"
   Die Zerlegung der Referenz steht in REFERENZ.md. Kurzfassung des Regelwerks:

   • Die Seite ist ein Stapel gerundeter Karten auf warmem Off-White.
   • Jede Sektion ist genau EINE Karte. Radius 32 px aussen, 26 px innen.
   • Ueber jeder Ueberschrift steht eine kleine graue Augenbraue.
   • Knopf = Pille. Der Hauptknopf traegt einen Kreis-Pfeil in Gegenfarbe.
   • Farbe kommt aus den Fotos, nicht aus der Flaeche. Einzige Ausnahme:
     --pop fuer Preisvorteile.

   Reihenfolge: 1 Tokens · 2 Grundlage · 3 Typografie · 4 Bauteile ·
   5 Kopfzeile · 6 Hero · 7 Sektionen · 8 Karten & Raster · 9 Produktseite ·
   10 Stapel · 11 Warenkorb & Dialoge · 12 Fusszeile · 13 Bewegung
   ========================================================================== */

/* ------------------------------------------------------------- 1 · Tokens */
:root {
  /* Flaeche und Schrift — Hue 80–90, warm-neutral, aus der Referenz uebernommen */
  --grund:      #FAF8F5;   /* background   oklch(.98 .005 90) */
  --tinte:      #171612;   /* foreground   oklch(.20 .008 90) */
  --weich:      #F3F0EA;   /* secondary    oklch(.955 .008 85) — Blockfuellung */
  --akzent:     #ECE7DF;   /* accent       oklch(.93 .012 80) — Hover */
  --leise:      #66635D;   /* muted-fg     oklch(.50 .010 85) — Nebentext 5,7:1 */
  --linie:      #E0DED8;   /* border       oklch(.90 .008 85) */
  /* Eingabefelder sind leer, bis jemand hineinschreibt — dort ist der Rahmen
     das Einzige, was sie sichtbar macht. Deshalb kraeftiger als die feinen
     Trennlinien: 3,3 : 1 gegen den Seitengrund, wie es die Richtlinie fuer
     Bedienelemente verlangt (WCAG 1.4.11). */
  --linie-feld: #8E8878;
  --dunkel:     #1C1A16;   /* primary      oklch(.22 .008 90) — dunkle Bloecke */
  --karte:      #FFFFFF;   /* card         Kreise in hellen Bloecken */

  /* Der eine warme Ton: Preisvorteil. Sonst bleibt alles neutral. */
  --pop:        #8A4B1E;   /* auf hellem Grund */
  --pop-hell:   #E8B183;   /* auf dunklem Grund */

  /* Radien — EIN Wert fuer alles, was eine Flaeche ist: Karten, Bloecke,
     Hero, Banner, Bilder in den Karten. 32/26/18 px liessen die Produkt- und
     Set-Karten wie Bubbles aussehen statt wie Schmuck. Die drei Namen bleiben,
     damit die rund 70 Fundstellen nicht angefasst werden muessen — sie zeigen
     jetzt auf denselben Wert. Nur die Pille bleibt rund: sie ist der einzige
     gewollte Kontrast (Knoepfe, Fahnen, Zaehler). */
  --r-blk: 16px;
  --r-med: 16px;
  --r-kl:  16px;
  --r-pill: 999px;

  /* Raster */
  --rand: 16px;
  --pad: 28px;
  --sec: 48px;
  --max: 1560px;

  /* Schrift */
  --display: "Manrope", ui-sans-serif, system-ui, sans-serif;
  --sans: "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;

  --schnell: 180ms cubic-bezier(.4, 0, .2, 1);
  --ruhig: 520ms cubic-bezier(.22, .8, .28, 1);
}

@media (min-width: 768px) {
  :root { --rand: 24px; --pad: 56px; --sec: 64px; }
}

/* --------------------------------------------------------- 2 · Grundlage */
*, *::before, *::after { box-sizing: border-box; }

html {
  color-scheme: light;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
}

body {
  margin: 0;
  accent-color: var(--dunkel);   /* Haekchen im Kontaktformular in Hausfarbe */
  background: var(--grund);
  color: var(--tinte);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  font-feature-settings: "cv05" 1, "cv08" 1;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, picture, svg, video { display: block; max-width: 100%; }
img { height: auto; }
picture { display: contents; }

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }

h1, h2, h3, h4 { margin: 0; font-family: var(--display); font-weight: 600; letter-spacing: -.022em; line-height: 1.05; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

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

.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-link {
  position: fixed; left: 50%; top: -80px; transform: translateX(-50%);
  z-index: 200; background: var(--dunkel); color: var(--grund);
  padding: 12px 22px; border-radius: var(--r-pill); font-size: 14px;
  transition: top var(--schnell);
}
.skip-link:focus { top: 12px; }

/* -------------------------------------------------------- 3 · Typografie */
.h-xxl, .h1 {
  font-family: var(--display);
  font-size: clamp(38px, 7.2vw, 76px);
  line-height: 1.02;
  letter-spacing: -.03em;
  font-weight: 600;
}
.h2 {
  font-family: var(--display);
  font-size: clamp(30px, 4.4vw, 50px);
  line-height: 1.05;
  letter-spacing: -.025em;
  font-weight: 600;
}
.h3 {
  font-family: var(--display);
  font-size: clamp(22px, 2.6vw, 30px);
  line-height: 1.12;
  letter-spacing: -.02em;
  font-weight: 600;
}

.eyebrow {
  margin: 0;
  font-size: 14px;
  line-height: 1.4;
  color: var(--leise);
  letter-spacing: 0;
}
/* Auf dem Foto braucht die Augenbraue mehr Deckung als auf der dunklen
   Vollflaeche — gemessen, nicht geschaetzt. */
.hero .eyebrow { color: rgba(255,255,255,.95); }

.lead { font-size: clamp(16px, 1.5vw, 18px); line-height: 1.62; color: var(--leise); }
.body { font-size: 15.5px; line-height: 1.68; color: var(--leise); }
.klein { font-size: 13px; line-height: 1.5; color: var(--leise); }

/* ---------------------------------------------------------- 4 · Bauteile */
.btn {
  display: inline-flex; align-items: center; gap: 12px;
  border: 1px solid var(--linie); background: var(--karte); color: var(--tinte);
  border-radius: var(--r-pill);
  padding: 13px 24px;
  font-size: 14.5px; font-weight: 500; letter-spacing: -.005em;
  cursor: pointer;
  transition: background var(--schnell), border-color var(--schnell), transform var(--schnell), color var(--schnell);
}
.btn:hover { background: var(--akzent); }
.btn:active { transform: translateY(1px); }

.btn-solid { background: var(--dunkel); border-color: var(--dunkel); color: var(--grund); }
.btn-solid:hover { background: #2A271F; border-color: #2A271F; }

.btn-hell { background: var(--grund); border-color: var(--grund); color: var(--tinte); }
.btn-hell:hover { background: #fff; border-color: #fff; }

.btn-geist { background: transparent; border-color: rgba(255,255,255,.55); color: #fff; backdrop-filter: blur(6px); }
.btn-geist:hover { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.8); }

.btn-block { width: 100%; justify-content: space-between; }

/* Der Pillenknopf mit Kreis-Pfeil — das Markenzeichen der Referenz. */
.btn-pfeil { padding: 7px 7px 7px 24px; gap: 14px; }
.btn-pfeil .pf {
  display: grid; place-items: center;
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--dunkel); color: var(--grund);
  transition: transform var(--schnell);
}
.btn-pfeil:hover .pf { transform: translateX(3px); }
.btn-solid.btn-pfeil .pf, .btn-hell.btn-pfeil .pf { background: var(--grund); color: var(--tinte); }
.btn-solid.btn-pfeil .pf { background: var(--grund); }
.btn-geist.btn-pfeil .pf { background: #fff; color: var(--tinte); }
.pf svg { width: 17px; height: 17px; }

/* Textlink mit feiner Unterlinie, die beim Hover durchlaeuft */
.link {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 14.5px; font-weight: 500; cursor: pointer;
  background: none; border: 0; padding: 0;
}
.link span { position: relative; }
.link span::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: right;
  transition: transform var(--ruhig);
}
.link:hover span::after { transform: scaleX(1); transform-origin: left; }
.link svg { width: 15px; height: 15px; }

.kreis {
  display: grid; place-items: center; flex: none;
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--karte); color: var(--tinte);
}
.kreis svg { width: 20px; height: 20px; }

.icon-btn {
  display: grid; place-items: center; position: relative;
  width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid var(--linie); background: transparent; cursor: pointer;
  transition: background var(--schnell), border-color var(--schnell);
}
.icon-btn:hover { background: var(--akzent); }
.icon-btn svg { width: 19px; height: 19px; }

/* --------------------------------------------------------- 5 · Kopfzeile */
/* Aktionsleiste und Navigation sitzen in EINER fixierten Zone. Beim Scrollen
   klappt die Aktionsleiste weg und die Navigation wird zur schwebenden Pille —
   die Referenz kennt nur die Pille, der Laden braucht zusaetzlich den Code. */
.kopfzone { position: fixed; inset: 0 0 auto; z-index: 90; }

.header { padding: 0 var(--rand); }
.header-inner {
  position: relative;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 18px 20px;
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  color: #fff;
  transition: background var(--ruhig), color var(--ruhig), border-color var(--ruhig),
              padding var(--ruhig), box-shadow var(--ruhig), margin var(--ruhig);
}

/* Hell: sobald gescrollt wird — und auf Seiten ohne Bild-Hero von Anfang an. */
body.ohne-hero .header-inner,
.header.is-stuck .header-inner {
  background: rgba(250,248,245,.82);
  backdrop-filter: saturate(1.6) blur(16px);
  -webkit-backdrop-filter: saturate(1.6) blur(16px);
  border-color: var(--linie);
  color: var(--tinte);
  padding: 10px 10px 10px 20px;
  margin-top: 10px;
  box-shadow: 0 14px 38px -24px rgba(23,22,18,.55);
}

/* Der Abstand oben war die Hoehe der Aktionsleiste (40 px, mobil 36). Die
   Leiste ist am 2026-08-29 gestrichen worden, der Abstand blieb stehen — und
   damit begann die Hero-Karte erst UNTER der Kopfzeile: die weisse Wortmarke
   lag zu 60 % auf dem hellen Seitengrund und war dort unlesbar (gemessen:
   Marke y 27–43, Karte ab y 36). Jetzt ist der Abstand oben derselbe wie
   links und rechts, und die Kopfzeile liegt vollstaendig auf dem Bild. */
body.mit-hero { padding-top: var(--rand); }
/* Dieselben 10 px wie im gescrollten Zustand — so wandert beim Scrollen
   nichts, es faerbt sich nur um. */
body.mit-hero .header-inner { margin-top: 10px; }
body.ohne-hero { padding-top: 124px; }

/* Wortmarke — das echte Logo, als CSS-Maske eingefaerbt. So nimmt sie die
   Textfarbe des Kontexts an (weiss ueber dem Foto, dunkel in der hellen Leiste)
   und wechselt beim Scrollen im selben Uebergang mit. Seitenverhaeltnis 20,74:1.
   Ohne Maskenunterstuetzung faellt sie auf den Schriftzug zurueck. */
.brand {
  display: inline-flex; align-items: center;
  font-family: var(--display); font-weight: 700; font-size: 15px; letter-spacing: .2em;
  white-space: nowrap; line-height: 1.1; text-transform: uppercase;
}
/* Die Wortmarke ist Text, kein Bild. Bis 2026-08-28 lag hier eine PNG-Maske
   (logo-maske.webp, 1120 x 54 px): sie war an beiden Raendern angeschnitten —
   erste Tinte bei x = 0, letzte bei x = 1119 — im Kopf stand deshalb
   "EADBRACELET". Als Text kann nichts abschneiden, er faerbt sich mit
   currentColor und skaliert mit der Schriftgroesse. */
.brand-text { display: block; }
.footer-brand .brand { font-size: clamp(19px, 4.4vw, 26px); letter-spacing: .16em; }
.mobile-foot .wortmarke, .header.is-stuck .wortmarke { }

.nav { display: none; align-items: center; gap: 26px; font-size: 14.5px; }
.nav a { opacity: .88; transition: opacity var(--schnell); }
.nav a:hover, .nav a[aria-current="page"] { opacity: 1; }
.nav a[aria-current="page"] { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; }
@media (min-width: 1120px) { .nav { display: flex; } }

.header-right { display: flex; align-items: center; gap: 8px; flex: none; }
@media (max-width: 479px) { .header .icon-btn { width: 38px; height: 38px; } }
.header .icon-btn { border-color: rgba(255,255,255,.4); }
.header .icon-btn:hover { background: rgba(255,255,255,.16); }
body.ohne-hero .header .icon-btn,
.header.is-stuck .icon-btn { border-color: var(--linie); }
body.ohne-hero .header .icon-btn:hover,
.header.is-stuck .icon-btn:hover { background: var(--akzent); }

.header-cta { display: none; }
@media (min-width: 780px) { .header-cta { display: inline-flex; } }
.header-cta.btn { background: #fff; border-color: #fff; color: var(--tinte); padding: 11px 20px; }
body.ohne-hero .header-cta.btn,
.header.is-stuck .header-cta.btn { background: var(--dunkel); border-color: var(--dunkel); color: var(--grund); }
body.ohne-hero .header-cta.btn:hover,
.header.is-stuck .header-cta.btn:hover { background: #2A271F; border-color: #2A271F; }

.cart-count {
  position: absolute; top: -3px; right: -3px;
  min-width: 20px; height: 20px; padding: 0 5px;
  display: grid; place-items: center;
  border-radius: var(--r-pill);
  background: var(--pop); color: #fff;
  /* 11 px war die einzige Stelle am Schirm unter der 12er-Grenze der Referenz. */
  font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums;
  opacity: 0; transform: scale(.6); transition: opacity var(--schnell), transform var(--schnell);
}
.cart-count.is-on { opacity: 1; transform: scale(1); }

.burger { display: grid; }
@media (min-width: 1120px) { .burger { display: none; } }
.burger svg:last-child, .burger[aria-expanded="true"] svg:first-child { display: none; }
.burger[aria-expanded="true"] svg:last-child { display: block; }

.progress {
  position: absolute; left: 24px; right: 24px; bottom: 4px; height: 1px;
  transform: scaleX(0); transform-origin: left;
  background: currentColor; opacity: 0;
}
.header.is-stuck .progress, body.ohne-hero .progress { opacity: .22; }

.mobile-nav {
  position: fixed; inset: 0; z-index: 89;
  background: var(--grund);
  padding: 118px var(--rand) 36px;
  display: flex; flex-direction: column; justify-content: space-between; gap: 30px;
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity var(--ruhig), transform var(--ruhig), visibility var(--ruhig);
}
.mobile-nav.is-open { opacity: 1; visibility: visible; transform: none; }
.mobile-nav ul { display: grid; gap: 2px; overflow-y: auto; }
.mobile-nav a {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  font-family: var(--display); font-size: clamp(26px, 7vw, 38px);
  font-weight: 600; letter-spacing: -.03em;
  padding: 13px 0; border-bottom: 1px solid var(--linie);
}
.mobile-nav li svg { width: 20px; height: 20px; color: var(--leise); }
.mobile-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 14px; }

/* -------------------------------------------------------------- 6 · Hero */
.hero {
  position: relative;
  /* Dieselbe Box wie jede Sektion: Rinne --rand, danach das 1560er Raster.
     Vorher fehlte die Deckelung, dadurch lag der Hero ab 1608 px Fensterbreite
     weiter aussen als alles darunter — die linke Kante sprang beim Scrollen. */
  width: calc(100% - var(--rand) * 2);
  max-width: var(--max);
  margin: 0 auto;
  border-radius: var(--r-blk);
  overflow: hidden;
  isolation: isolate;
  background: var(--dunkel);
}
.hero-media { position: absolute; inset: 0; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; animation: hero-atmen 30s ease-in-out infinite alternate; }
@keyframes hero-atmen { from { transform: scale(1); } to { transform: scale(1.035); } }
/* Zwei Verlaeufe, weil die Fotos hell sind (Rand um 240 von 255): senkrecht
   fuer Navigation und Chips, waagerecht fuer die Textseite. Denselben
   Waagerecht-Verlauf benutzt die Referenz in ihrem dunklen Banner. */
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to bottom, rgba(0,0,0,.74) 0%, rgba(0,0,0,.34) 42%, rgba(0,0,0,.80) 100%);
}
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(100deg, rgba(0,0,0,.60) 0%, rgba(0,0,0,.36) 46%, rgba(0,0,0,0) 84%);
}
.hero-inner {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; justify-content: space-between; gap: 44px;
  min-height: clamp(520px, calc(100svh - 104px), 660px);
  padding: clamp(84px, 13vh, 108px) var(--pad) 26px;
  color: #fff;
}
@media (min-width: 768px) {
  .hero-inner { min-height: clamp(560px, calc(100svh - 112px), 780px);
                padding: clamp(104px, 14vh, 132px) var(--pad) 44px; }
}

/* Der Spruch der Startseite wechselt. Alle Saetze liegen im SELBEN
   Rasterplatz — deshalb ist die Hoehe die des laengsten, und beim Wechsel
   rutscht nichts darunter weg. Der ausgehende Satz zieht nach oben ab, der
   neue kommt von unten nach: eine Bewegung, keine zwei.
   Ohne JavaScript bleibt schlicht der erste stehen (er traegt is-an im HTML). */
  grid-area: 1 / 1;
  opacity: 0; transform: translateY(15px);
  transition: opacity 620ms cubic-bezier(.22, .8, .28, 1),
              transform 620ms cubic-bezier(.22, .8, .28, 1);
}

.hero-titel {
  font-family: var(--display);
  font-size: clamp(38px, 6.4vw, 72px);
  line-height: 1.03; letter-spacing: -.032em; font-weight: 600;
  max-width: 16ch;
  text-wrap: balance;
}
.hero-lead { margin-top: 20px; max-width: 46ch; font-size: clamp(15.5px, 1.4vw, 18px); line-height: 1.6; color: rgba(255,255,255,.92); }
.hero-cta { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 12px; }
.hero-oben .eyebrow { margin-bottom: 18px; }

.hero-unten { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 22px; }

.beleg { display: flex; align-items: center; gap: 14px; }
.beleg-bilder { display: flex; }
.beleg-bilder img {
  width: 42px; height: 42px; border-radius: 50%; object-fit: cover;
  border: 2px solid #fff; margin-left: -12px;
}
.beleg-bilder img:first-child { margin-left: 0; }
.beleg p { font-size: 14px; line-height: 1.35; }
.beleg p span { color: rgba(255,255,255,.84); }


@media (max-width: 559px) {
  .hero-inner { gap: 26px; }
  .hero-cta { margin-top: 22px; }
  .hero-lead { margin-top: 16px; }
}

@media (max-width: 767px) {
  .hero::before,
  .hero--klein::before {
    background: linear-gradient(to bottom, rgba(0,0,0,.26) 0%, rgba(0,0,0,.44) 46%, rgba(0,0,0,.30) 100%);
  }
}

/* Kleiner Hero fuer Unterseiten — dasselbe Bauteil, nur flacher. */
/* Der flache Hero hat weniger Weg fuer den Verlauf: der Text sitzt dort, wo
   der grosse Hero am hellsten ist. Deshalb eine eigene, kompaktere Kurve. */
.hero--klein::after {
  background: linear-gradient(to bottom, rgba(0,0,0,.68) 0%, rgba(0,0,0,.46) 55%, rgba(0,0,0,.72) 100%);
}
.hero--klein::before {
  background: linear-gradient(100deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,.3) 50%, rgba(0,0,0,0) 88%);
}
.hero--klein .hero-inner { min-height: clamp(320px, calc(100svh - 300px), 400px); padding-bottom: 40px; }
@media (min-width: 768px) { .hero--klein .hero-inner { min-height: clamp(360px, calc(100svh - 320px), 460px); } }
.hero--klein .hero-titel { font-size: clamp(34px, 5.2vw, 58px); }

/* --------------------------------------------------------- 7 · Sektionen */
/* ZWEI Linien fuer die ganze Seite, mehr gibt es nicht:
     Linie 1 = Aussenkante jeder Flaeche  → --rand bzw. der Rand des 1560er Rasters
     Linie 2 = jeder Text und jede Karte  → Linie 1 + --pad
   Vorher waren es fuenf (Hero 24, Sektion 70, Blocktext 80, Banner 126,
   FAQ 440 bei 1700 px) — genau das sah beim Scrollen aus wie ein Sprung. */
.sec { padding: var(--sec) var(--rand) 0; }
.sec-letzte { padding-bottom: var(--sec); }
.innen { max-width: var(--max); margin: 0 auto; padding-inline: var(--pad); }
/* In einer gefuellten Karte traegt schon die Karte den Einzug. */
.blk > .innen, .banner .innen { padding-inline: 0; max-width: none; }

/* Eine Sektion = eine Karte. */
.blk {
  border-radius: var(--r-blk);
  padding: var(--pad);
  max-width: var(--max);
  margin: 0 auto;
}
.blk--soft { background: var(--weich); }

/* Kopfzeile einer Sektion: Augenbraue + H2 links, Textlink rechts. */
.kopf {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 20px;
  margin-bottom: 26px;
}
.kopf .eyebrow { margin-bottom: 6px; }
.kopf-link { flex: none; }
@media (max-width: 620px) { .kopf { flex-direction: column; align-items: flex-start; gap: 14px; } }

/* Zweispalter: links Titel, rechts Inhalt — Referenz „WhyUs". */
.zwei { display: grid; gap: 40px; }
@media (min-width: 900px) { .zwei { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; } }
@media (min-width: 900px) { .zwei--schmal { grid-template-columns: 300px minmax(0, 1fr); gap: 64px; } }

.merkmale { display: grid; gap: 30px; }
@media (min-width: 620px) { .merkmale { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; } }
.merkmal { display: flex; gap: 16px; }
.merkmal h3 { font-family: var(--display); font-size: 16px; font-weight: 600; letter-spacing: -.01em; }
.merkmal p { margin-top: 5px; font-size: 14px; line-height: 1.55; color: var(--leise); }


/* Schritte — Referenz „Steps" */
.schritte { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 22px; }
@media (min-width: 620px) { .schritte { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1080px) { .schritte { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.schritt-kopf { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.schritt-nr { font-size: 12px; color: var(--leise); font-variant-numeric: tabular-nums; }
.schritt .kreis { width: 44px; height: 44px; background: var(--weich); }
.schritt h3 { font-family: var(--display); font-size: 14.5px; font-weight: 600; }
.schritt p { margin-top: 8px; font-size: 12.5px; line-height: 1.55; color: var(--leise); }

/* Staffel: drei Stufen als Karten + Rechenbeispiel */
/* Dunkler Bildbanner — Referenz „ProductionBanner" */
.banner {
  position: relative; overflow: hidden; isolation: isolate;
  border-radius: var(--r-blk); background: var(--dunkel); color: var(--grund);
  max-width: var(--max); margin: 0 auto;
}
.banner img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .62; }
.banner::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(100deg, var(--dunkel) 4%, rgba(28,26,22,.82) 44%, rgba(28,26,22,.34) 100%);
}
.banner-inner {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; gap: 28px;
  padding: var(--pad);
}
@media (min-width: 900px) { .banner-inner { flex-direction: row; align-items: center; justify-content: space-between; } }
.banner h2 { margin-top: 12px; max-width: 20ch; font-size: clamp(27px, 3.6vw, 40px); }
.banner .eyebrow { color: rgba(255,255,255,.72); }
.banner-inner > a { align-self: flex-start; }

/* Zwei Motive + Text dazwischen */
.duo { display: grid; gap: 18px; align-items: center; }
@media (min-width: 900px) { .duo { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) minmax(0, 1fr); gap: 26px; } }
.duo figure { margin: 0; position: relative; border-radius: var(--r-med); overflow: hidden; }
.duo figure img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 3 / 4; transition: transform 900ms cubic-bezier(.22,.8,.28,1); }
.duo figure:hover img { transform: scale(1.04); }
.duo figcaption {
  position: absolute; left: 12px; bottom: 12px;
  background: rgba(250,248,245,.9); backdrop-filter: blur(8px);
  border-radius: var(--r-pill); padding: 5px 13px; font-size: 12px; color: var(--tinte);
}
.duo-text { text-align: left; }
@media (min-width: 900px) { .duo-text { padding: 0 14px; } }

/* Herkunft: Liste links, Bild rechts */
.stones { display: grid; gap: 34px; }
@media (min-width: 900px) { .stones { grid-template-columns: minmax(0, 1fr) .85fr; gap: 56px; align-items: start; } }
.stones-list { border-top: 1px solid var(--linie); }
.stones-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  width: 100%; padding: 15px 4px; background: none; border: 0;
  border-bottom: 1px solid var(--linie); cursor: pointer; text-align: left;
  transition: padding-left var(--ruhig), color var(--schnell);
}
.stones-row:hover, .stones-list li.is-active .stones-row { padding-left: 12px; }
.s-name { font-family: var(--display); font-size: 18px; font-weight: 600; letter-spacing: -.02em; }
.s-land { font-size: 13px; color: var(--leise); }
.stones-list li.is-active .s-land { color: var(--tinte); }
.stones-view { position: relative; border-radius: var(--r-med); overflow: hidden; aspect-ratio: 1 / 1; background: var(--akzent); }
.stones-view img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity var(--ruhig); }
.stones-view img.is-on { opacity: 1; }

/* Laufschrift mit den Steinnamen */
.band { overflow: hidden; margin: var(--sec) 0 0; padding: 22px 0; border-top: 1px solid var(--linie); border-bottom: 1px solid var(--linie); }
.band-track { display: flex; width: max-content; animation: laufen 62s linear infinite; }
.band-track > div { display: flex; }
.band-track span {
  font-family: var(--display); font-size: clamp(20px, 2.4vw, 30px); font-weight: 600;
  letter-spacing: -.02em; color: var(--leise); padding: 0 22px; white-space: nowrap;
}
.band-track span::after { content: "•"; margin-left: 44px; opacity: .4; }
@keyframes laufen { to { transform: translateX(-50%); } }

/* Kontaktblock — Referenz „ContactForm", aber ohne erfundenes Formular */
.kontaktblock { display: grid; gap: 22px; }
@media (min-width: 900px) { .kontaktblock { grid-template-columns: 1.45fr minmax(0, 1fr); align-items: stretch; } }
.kontaktblock-bild { border-radius: var(--r-med); overflow: hidden; min-height: 240px; }
.kontaktblock-bild img { width: 100%; height: 100%; object-fit: cover; }
.kb-liste { display: grid; gap: 10px; margin-top: 22px; }
.kb-liste li { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--leise); }
.kb-liste svg { width: 17px; height: 17px; flex: none; }

/* ------------------------------------------------- 8 · Karten und Raster */
.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 720px) { .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } }
@media (min-width: 1080px) { .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; } }

.card {
  position: relative; display: flex; flex-direction: column; min-width: 0;
  background: var(--weich); border-radius: var(--r-blk); padding: 12px;
  transition: background var(--ruhig), transform var(--ruhig);
}
/* Der Link traegt Bild und Text, der Plus-Knopf liegt daneben — ein <button>
   darf nicht in einem <a> stehen, und ohne ihn muesste man fuer vier Steine
   viermal auf die Produktseite und wieder zurueck. */
.card-flaeche { display: flex; flex-direction: column; min-width: 0; color: inherit; text-decoration: none; }
.card-add {
  /* 44 px Trefferflaeche, aber nur 36 px sichtbar: der Kreis liegt auf dem
     Produktfoto, und ein 44-px-Weiss deckte ein Viertel des Armbands zu.
     background-clip malt nur den Inhaltsbereich aus, der Rand bleibt Ziel. */
  /* Unten rechts in der Karte, NICHT auf dem Foto: das Armband liegt
     kreisfoermig im Bild, jede Ecke ausser der Textzeile deckt Perlen zu. */
  position: absolute; right: 8px; bottom: 6px; z-index: 2;
  width: 44px; height: 44px; padding: 4px; display: grid; place-items: center;
  border: 0; border-radius: var(--r-pill); cursor: pointer;
  background: rgba(255,255,255,.92); background-clip: content-box;
  color: var(--tinte);
  box-shadow: 0 2px 8px rgba(23,22,18,.14);
  transition: transform var(--schnell), background-color var(--schnell);
}
.card-add:hover { transform: scale(1.08); background: #fff; }
.card-add:active { transform: scale(.94); }
.card-add.ist-drin { background: var(--dunkel); background-clip: content-box; color: #fff; }
.card:hover { background: var(--akzent); transform: translateY(-3px); }
.card-media { position: relative; border-radius: var(--r-med); overflow: hidden; aspect-ratio: 1 / 1; background: var(--akzent); }
.card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 800ms cubic-bezier(.22,.8,.28,1), opacity var(--ruhig); }
.card:hover .card-media img { transform: scale(1.05); }
.card .img-alt { position: absolute; inset: 0; opacity: 0; }
.card:hover .img-alt[src] { opacity: 1; }
.card-index {
  position: absolute; top: 10px; left: 12px; z-index: 2;
  font-size: 11px; font-variant-numeric: tabular-nums; color: var(--tinte);
  background: rgba(250,248,245,.85); backdrop-filter: blur(6px);
  border-radius: var(--r-pill); padding: 3px 9px;
}
.card-look {
  position: absolute; right: 10px; bottom: 10px; z-index: 2;
  font-size: 12px; padding: 6px 13px; border-radius: var(--r-pill);
  background: rgba(250,248,245,.92); color: var(--tinte);
  opacity: 0; transform: translateY(6px); transition: opacity var(--ruhig), transform var(--ruhig);
}
.card:hover .card-look { opacity: 1; transform: none; }
/* baseline statt flex-end: der Preis stand sonst auf der Unterkante der
   Textbox — also genau dort, wo der Plus-Knopf sitzt. */
.card-body { min-width: 0; display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 16px 8px 30px; }
.card-body > div { min-width: 0; }
.card-name { overflow-wrap: anywhere; font-family: var(--display); font-size: 18px; font-weight: 600; letter-spacing: -.02em; }
.card-stone { margin-top: 3px; font-size: 12.5px; color: var(--leise); }
.card-price { font-size: 14.5px; font-weight: 500; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* Filter auf der Kollektionsseite */
.filter {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px;
  margin-bottom: 18px;
}
.filter-welten { display: flex; flex-wrap: wrap; gap: 8px; }
.filter-welten button {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid var(--linie); background: transparent; border-radius: var(--r-pill);
  padding: 9px 16px; font-size: 14px; cursor: pointer;
  transition: background var(--schnell), border-color var(--schnell), color var(--schnell);
}
.filter-welten button span { font-size: 12px; color: var(--leise); font-variant-numeric: tabular-nums; }
.filter-welten button:hover { background: var(--akzent); }
.filter-welten button.ist-aktiv { background: var(--dunkel); border-color: var(--dunkel); color: var(--grund); }
.filter-welten button.ist-aktiv span { color: rgba(250,248,245,.6); }
.filter-sort { display: inline-flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--leise); }
.filter-sort select {
  font: inherit; color: var(--tinte); background: var(--karte);
  border: 1px solid var(--linie-feld); border-radius: var(--r-pill);
  padding: 9px 38px 9px 14px; cursor: pointer;
  -webkit-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231C1A16' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9.5 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 16px 16px;
  transition: border-color var(--schnell), background-color var(--schnell);
}
.filter-sort select:hover { border-color: var(--tinte); }
.filter-sort select::-ms-expand { display: none; }
.filter-stand { margin: 0 0 16px; font-size: 13px; color: var(--leise); min-height: 1em; }
.card[hidden] { display: none; }   /* der Filter setzt hidden, nicht eine Klasse */

/* Prosa (Geschichte, Versand, Rechtstexte) */
.prose { max-width: 68ch; }
.prose h2 { font-size: clamp(23px, 2.6vw, 30px); margin: 40px 0 12px; }
.prose h3 { font-size: 19px; margin: 30px 0 8px; }
.prose h2:first-child, .prose h3:first-child { margin-top: 0; }
.prose p { margin: 0 0 14px; font-size: 15.5px; line-height: 1.72; color: var(--leise); }
.prose .lead { font-size: 18px; line-height: 1.6; color: var(--tinte); margin-bottom: 26px; }
.prose ul { margin: 0 0 16px; display: grid; gap: 9px; }
.prose ul li { position: relative; padding-left: 20px; font-size: 15.5px; line-height: 1.65; color: var(--leise); }
.prose ul li::before { content: ""; position: absolute; left: 2px; top: 11px; width: 6px; height: 6px; border-radius: 50%; background: var(--linie); }
.prose a { text-decoration: underline; text-underline-offset: 3px; color: var(--tinte); }

.note-box {
  border: 1px solid var(--linie); background: var(--weich);
  border-radius: var(--r-med); padding: 20px 22px;
  font-size: 14px; line-height: 1.6; color: var(--leise); margin-bottom: 24px;
}
.note-box strong { color: var(--tinte); }
.note-box code { font-size: 13px; background: var(--karte); padding: 1px 6px; border-radius: 5px; }

/* ------------------------------------------------------- 12 · Fusszeile */
.footer { padding: var(--sec) var(--rand) var(--rand); }
.footer-inner {
  background: var(--dunkel); color: var(--grund);
  border-radius: var(--r-blk); padding: var(--pad);
  max-width: var(--max); margin: 0 auto;
}
.footer-claim {
  font-family: var(--display); font-size: clamp(28px, 4vw, 46px);
  font-weight: 600; letter-spacing: -.03em; line-height: 1.06;
  padding-bottom: 34px; margin-bottom: 34px; border-bottom: 1px solid rgba(255,255,255,.12);
  max-width: 18ch;
}
.footer-grid { display: grid; gap: 34px; }
@media (min-width: 720px) { .footer-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@media (min-width: 1000px) { .footer-grid { grid-template-columns: 1.5fr minmax(0, 1fr) minmax(0, 1fr) 1.2fr; gap: 40px; } }
.footer-brand .body { color: rgba(250,248,245,.66); max-width: 34ch; margin-top: 16px; }
.foot-title { font-family: var(--sans); font-size: 13px; font-weight: 400; color: rgba(250,248,245,.55); margin-bottom: 16px; }
.footer-grid ul { display: grid; gap: 11px; font-size: 14.5px; }
.footer-grid ul a { color: rgba(250,248,245,.88); transition: color var(--schnell); }
.footer-grid ul a:hover { color: #fff; }
.footer-grid li { color: rgba(250,248,245,.88); }
.social { display: flex; gap: 8px; margin-top: 20px; }
.social a {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.2); transition: background var(--schnell);
}
.social a:hover { background: rgba(255,255,255,.12); }
.social svg { width: 18px; height: 18px; }
.footer-bottom {
  display: flex; flex-wrap: wrap; gap: 14px; justify-content: space-between;
  margin-top: 40px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.12);
  font-size: 12px; line-height: 1.6; color: rgba(250,248,245,.5);
}
.footer-bottom span:last-child { max-width: 74ch; }
.footer-bottom a { text-decoration: underline; text-underline-offset: 3px; }

/* ----------------------------------------------------- 9 · Produktseite */
.brotkrume { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--leise); margin-bottom: 18px; }
.brotkrume a { text-decoration: underline; text-underline-offset: 3px; }

.pdp { display: grid; gap: 26px; }
@media (min-width: 1000px) { .pdp { grid-template-columns: 1.15fr .85fr; gap: 34px; align-items: start; } }

.pdp-media { display: grid; gap: 12px; }
.pdp-main { border-radius: var(--r-blk); overflow: hidden; background: var(--weich); aspect-ratio: 4 / 3; }
.pdp-main img { width: 100%; height: 100%; object-fit: cover; }
.pdp-thumbs { display: flex; gap: 10px; }
.pdp-thumbs button {
  width: 84px; height: 84px; padding: 0; overflow: hidden; cursor: pointer;
  border-radius: var(--r-kl); border: 1px solid var(--linie); background: var(--weich);
  transition: border-color var(--schnell);
}
.pdp-thumbs button[aria-pressed="true"] { border-color: var(--tinte); }
.pdp-thumbs img { width: 100%; height: 100%; object-fit: cover; }

.pdp-info { background: var(--weich); border-radius: var(--r-blk); padding: 26px; }
@media (min-width: 768px) { .pdp-info { padding: 34px; } }
.pdp-title { font-family: var(--display); font-size: clamp(30px, 4vw, 44px); font-weight: 600; letter-spacing: -.03em; line-height: 1.02; }
/* Die Kurzbeschreibung steht zwischen Titel und Preis: sie sagt, was das
   Ding ist, bevor sie sagt, was es kostet. */
.pdp-kurz { margin-top: 14px; max-width: 46ch; font-size: 15px; line-height: 1.55; color: var(--leise); }
.pdp-price { margin-top: 18px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font-family: var(--display); font-size: 30px; font-weight: 600; letter-spacing: -.025em; font-variant-numeric: tabular-nums; }
.pdp-price > span:first-child { white-space: nowrap; }
.pdp-price small { font-family: var(--sans); font-size: 13px; font-weight: 400; color: var(--leise); letter-spacing: 0; }
@media (max-width: 560px) { .pdp-price small { flex: 1 0 100%; } }
.price-note { margin-top: 6px; font-size: 12.5px; color: var(--leise); }
.price-note a { text-decoration: underline; text-underline-offset: 3px; }


.kaufzeile { display: flex; gap: 10px; align-items: stretch; margin-bottom: 12px; }
.kaufzeile .btn { flex: 1; justify-content: center; }
.menge {
  display: inline-flex; align-items: center; gap: 4px;
  border: 1px solid var(--linie); border-radius: var(--r-pill); background: var(--karte);
  padding: 3px;
}
.menge button {
  width: 30px; height: 30px; border: 0; background: none; cursor: pointer;
  border-radius: 50%; font-size: 16px; line-height: 1; color: var(--leise);
  transition: background var(--schnell), color var(--schnell);
}
.menge button:hover { background: var(--akzent); color: var(--tinte); }
.menge span { min-width: 22px; text-align: center; font-size: 14px; font-variant-numeric: tabular-nums; }
.menge-gross { padding: 5px; }
.menge-gross button { width: 38px; height: 38px; font-size: 18px; }
.menge-gross span { min-width: 26px; font-size: 15px; }

.kasse-zeile { min-height: 1em; font-size: 12.5px; color: var(--pop); margin-bottom: 12px; }
.zahlarten { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 16px; }
.za-titel { font-size: 12px; color: var(--leise); }
.zahlarten span:not(.za-titel) {
  font-size: 12px; border: 1px solid var(--linie); border-radius: 6px;
  padding: 3px 8px; color: var(--leise); background: var(--karte);
}

.staffel-mini, .assure { display: grid; gap: 0; margin-bottom: 18px; border-top: 1px solid var(--linie); }
.staffel-mini li, .assure li {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 11px 2px; border-bottom: 1px solid var(--linie); font-size: 13.5px;
}
.staffel-mini span:first-child, .assure span:first-child { color: var(--leise); }
.staffel-mini b { font-weight: 600; font-variant-numeric: tabular-nums; }
.staffel-mini b small { font-weight: 400; color: var(--leise); margin-left: 6px; font-size: 12px; }
.pdp-stapelpreis { margin-top: 2px; font-size: 14px; color: var(--leise); font-variant-numeric: tabular-nums; }
.st-zeile.st-summe { font-weight: 600; }
.staffel-mini .ist-best b { color: var(--pop); }
.assure span:last-child { text-align: right; }

.buy-note { display: flex; gap: 10px; font-size: 12.5px; line-height: 1.5; color: var(--leise); }
.buy-note svg { width: 17px; height: 17px; flex: none; margin-top: 1px; }

/* 0fr -> 1fr faehrt exakt auf die Inhaltshoehe, ohne willkuerlichen Deckel.
   Geprueft: das Panel loest auf 159 px auf, nicht auf 0. */
.acc-facts { display: grid; gap: 0; margin-bottom: 14px; }
.acc-facts > div { display: flex; justify-content: space-between; gap: 14px; padding: 8px 0; border-bottom: 1px solid var(--linie); font-size: 13.5px; }
.acc-facts dt { color: var(--leise); }
.acc-facts dd { margin: 0; }
.mass-schritte { display: grid; gap: 8px; counter-reset: s; margin: 0 0 14px; }
.mass-schritte li { position: relative; padding-left: 28px; font-size: 14px; line-height: 1.6; color: var(--leise); }
.mass-schritte li::before {
  counter-increment: s; content: counter(s);
  position: absolute; left: 0; top: 1px; width: 19px; height: 19px; border-radius: 50%;
  background: var(--akzent); color: var(--tinte); font-size: 11px; display: grid; place-items: center;
}

.sitz-innen { display: grid; gap: 26px; align-items: center; }
@media (min-width: 900px) { .sitz-innen { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; } }
.sitz-text { min-width: 0; }
.sitz-bild { border-radius: var(--r-med); overflow: hidden; }
.sitz-bild img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; }
.sitz-fakten { display: grid; gap: 0; margin-top: 20px; border-top: 1px solid var(--linie); }
.sitz-fakten > div { display: flex; justify-content: space-between; gap: 14px; padding: 11px 0; border-bottom: 1px solid var(--linie); font-size: 14px; }
.sitz-fakten dt { color: var(--leise); }
.sitz-fakten dd { margin: 0; }

.buybar {
  position: fixed; left: var(--rand); right: var(--rand); bottom: 12px; z-index: 80;
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 10px 10px 10px 20px;
  background: rgba(250,248,245,.9); backdrop-filter: saturate(1.6) blur(16px);
  border: 1px solid var(--linie); border-radius: var(--r-pill);
  box-shadow: 0 18px 40px -26px rgba(23,22,18,.65);
  opacity: 0; visibility: hidden; transform: translateY(14px);
  transition: opacity var(--ruhig), transform var(--ruhig), visibility var(--ruhig);
}
.buybar.is-on { opacity: 1; visibility: visible; transform: none; }
.buybar-info { min-width: 0; }
.buybar-name { font-family: var(--display); font-size: 15px; font-weight: 600; letter-spacing: -.02em; }
.buybar-price { font-size: 13px; color: var(--leise); font-variant-numeric: tabular-nums; }
@media (min-width: 1000px) { .buybar { display: none; } }

/* ----------------------------------------------------------- 10 · Stapel */
.stapel-buehne { display: grid; gap: 18px; }
@media (min-width: 900px) { .stapel-buehne { grid-template-columns: 1.5fr minmax(0, 1fr); gap: 22px; align-items: start; } }

.stapel-plaetze { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.stapel-plaetze li {
  position: relative; border-radius: var(--r-med); overflow: hidden;
  aspect-ratio: 1 / 1; background: var(--weich);
  border: 1px dashed var(--linie);
  display: grid; place-items: center;
}
.stapel-plaetze li.ist-belegt { border-style: solid; border-color: transparent; }
.stapel-plaetze img { width: 100%; height: 100%; object-fit: cover; }
/* 3,2:1 auf der Blockfuellung — gemessen; als Ziffer gross genug fuer die
   AA-Grenze von 3:1, ohne den leeren Platz laut zu machen. */
.platz-leer { font-family: var(--display); font-size: 26px; font-weight: 600; color: #85827A; }
.platz-name {
  position: absolute; left: 8px; bottom: 8px;
  font-size: 12px; padding: 3px 9px; border-radius: var(--r-pill);
  background: rgba(250,248,245,.9); color: var(--tinte);
}
.platz-name--leer { background: transparent; color: var(--leise); }
.platz-weg {
  position: absolute; top: 7px; right: 7px; z-index: 2;
  width: 26px; height: 26px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(250,248,245,.92); color: var(--tinte); font-size: 15px; line-height: 1;
}
.platz-weg:hover { background: #fff; }

.stapel-rechnung { background: var(--weich); border-radius: var(--r-blk); padding: 24px; }
.st-leer { font-size: 14px; line-height: 1.6; color: var(--leise); }
.st-zeile { display: flex; justify-content: space-between; gap: 14px; padding: 9px 0; border-bottom: 1px solid var(--linie); font-size: 14px; font-variant-numeric: tabular-nums; }
.st-zeile:first-child { font-family: var(--display); font-size: 19px; font-weight: 600; letter-spacing: -.02em; border-bottom-color: var(--leise); }
.st-gratis span:last-child, .st-gespart span:last-child { color: var(--pop); }
.st-je { border-bottom: 0; color: var(--leise); }
.st-hinweis { margin-top: 14px; font-size: 12.5px; color: var(--leise); }
.st-voll { color: var(--pop); }
.stapel-rechnung .btn { margin-top: 16px; }

.stapel-wahl-kopf { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: var(--sec) 0 18px; }
.stapel-wahl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 620px) { .stapel-wahl { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .stapel-wahl { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.stein {
  display: flex; flex-direction: column; gap: 8px; padding: 8px; cursor: pointer;
  background: var(--weich); border: 1px solid transparent; border-radius: var(--r-med);
  text-align: left; transition: background var(--schnell), border-color var(--schnell);
}
.stein:hover { background: var(--akzent); }
.stein-bild { position: relative; display: block; border-radius: var(--r-kl); overflow: hidden; aspect-ratio: 1 / 1; }
.stein-bild img { width: 100%; height: 100%; object-fit: cover; }
.stein-plus {
  position: absolute; right: 6px; bottom: 6px;
  width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(250,248,245,.92); color: var(--tinte); font-size: 15px; line-height: 1;
  opacity: 0; transform: scale(.7); transition: opacity var(--schnell), transform var(--schnell);
}
.stein:hover .stein-plus { opacity: 1; transform: none; }
.stein-name { font-family: var(--display); font-size: 13.5px; font-weight: 600; letter-spacing: -.015em; }
.stein-stein { font-size: 12px; color: var(--leise); }
.stapel.ist-voll .stein { opacity: .45; cursor: not-allowed; }
.stapel.ist-voll .stein:hover { background: var(--weich); }

/* ------------------------------------------ 11 · Warenkorb und Dialoge */
.overlay {
  position: fixed; inset: 0; z-index: 95; background: rgba(23,22,18,.42);
  backdrop-filter: blur(3px);
  opacity: 0; visibility: hidden; transition: opacity var(--ruhig), visibility var(--ruhig);
}
.overlay.is-open { opacity: 1; visibility: visible; }

.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 96;
  width: min(430px, 100%);
  display: flex; flex-direction: column;
  background: var(--grund);
  transform: translateX(100%); visibility: hidden;
  transition: transform var(--ruhig), visibility var(--ruhig);
}
@media (min-width: 520px) { .drawer { top: 10px; bottom: 10px; right: 10px; border-radius: var(--r-blk); overflow: hidden; box-shadow: 0 40px 90px -40px rgba(23,22,18,.6); } }
.drawer.is-open { transform: none; visibility: visible; }
.drawer-head {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 20px 22px; border-bottom: 1px solid var(--linie); flex: none;
}
.drawer-title { font-family: var(--display); font-size: 17px; font-weight: 600; letter-spacing: -.02em; }
.drawer-body { flex: 1; overflow-y: auto; padding: 18px 22px; }
.drawer-foot { flex: none; padding: 18px 22px 22px; border-top: 1px solid var(--linie); background: var(--weich); }
.drawer-empty { font-size: 14.5px; line-height: 1.6; color: var(--leise); padding: 20px 0; }

.cart-line { display: grid; grid-template-columns: 76px minmax(0, 1fr) auto; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--linie); }
.cart-line img { width: 76px; height: 76px; border-radius: var(--r-kl); object-fit: cover; background: var(--weich); }
.cart-line-name { font-family: var(--display); font-size: 15px; font-weight: 600; letter-spacing: -.015em; }
.cart-line-meta { font-size: 12.5px; color: var(--leise); margin-bottom: 8px; }
.cart-line-rechts { display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; }
.cart-line-price { font-size: 14.5px; font-weight: 500; font-variant-numeric: tabular-nums; }
.cart-remove { background: none; border: 0; padding: 0; cursor: pointer; font-size: 12px; color: var(--leise); text-decoration: underline; text-underline-offset: 3px; }
.cart-remove:hover { color: var(--tinte); }

.leiste { margin: 18px 0 4px; }
.leiste p { margin-top: 9px; font-size: 12.5px; color: var(--leise); }
.leiste-spur { height: 4px; border-radius: var(--r-pill); background: var(--akzent); overflow: hidden; }
.leiste-spur i { display: block; height: 100%; background: var(--pop); transform-origin: left; transition: transform var(--ruhig); }

.vorschlaege { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--linie); }
.vs-titel { font-family: var(--display); font-size: 14px; font-weight: 600; letter-spacing: -.01em; margin-bottom: 12px; }
.vs-liste { display: grid; gap: 8px; }
.vs {
  display: grid; grid-template-columns: 52px minmax(0, 1fr) 26px; align-items: center; gap: 12px;
  width: 100%; padding: 7px; cursor: pointer; text-align: left;
  background: var(--weich); border: 1px solid transparent; border-radius: var(--r-kl);
  transition: background var(--schnell);
}
.vs:hover { background: var(--akzent); }
.vs img { width: 52px; height: 52px; border-radius: 12px; object-fit: cover; }
.vs-text { display: grid; }
.vs-name { font-family: var(--display); font-size: 13.5px; font-weight: 600; letter-spacing: -.015em; }
.vs-stein { font-size: 12px; color: var(--leise); }
.vs-plus { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--karte); font-size: 15px; line-height: 1; }

.stand { margin-bottom: 12px; }
.stand-zeile { display: flex; justify-content: space-between; gap: 14px; font-size: 13.5px; padding: 4px 0; color: var(--leise); font-variant-numeric: tabular-nums; }
.stand-gratis span:last-child, .stand-gespart span:last-child { color: var(--pop); }
.cart-sum { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; margin-bottom: 4px; }
.cart-sum > span:first-child { font-size: 14px; color: var(--leise); }
.cart-sum > span:last-child { font-family: var(--display); font-size: 22px; font-weight: 600; letter-spacing: -.025em; font-variant-numeric: tabular-nums; }
.cart-sum small { display: block; font-family: var(--sans); font-size: 12px; font-weight: 400; color: var(--leise); text-align: right; letter-spacing: 0; }
.drawer-hint { margin-top: 12px; font-size: 12px; line-height: 1.5; color: var(--leise); }

.modal {
  position: fixed; inset: 0; z-index: 120; display: grid; place-items: center;
  padding: var(--rand); background: rgba(23,22,18,.5); backdrop-filter: blur(4px);
  opacity: 0; visibility: hidden; transition: opacity var(--ruhig), visibility var(--ruhig);
}
.modal.is-open { opacity: 1; visibility: visible; }
.modal-box {
  position: relative; width: min(440px, 100%);
  background: var(--grund); border-radius: var(--r-blk); padding: 34px;
  transform: translateY(10px) scale(.98); transition: transform var(--ruhig);
}
.modal.is-open .modal-box { transform: none; }
.modal-close {
  position: absolute; top: 14px; right: 14px; width: 36px; height: 36px;
  display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--linie);
  background: none; cursor: pointer;
}
.modal-close svg { width: 17px; height: 17px; }
.code {
  display: block; width: 100%; margin-top: 14px; cursor: pointer;
  border: 1px dashed var(--linie); border-radius: var(--r-med); background: var(--weich);
  padding: 18px; font-family: var(--display); font-size: 27px; font-weight: 600;
  letter-spacing: .1em; color: var(--pop);
}
.code-hint { margin-top: 9px; font-size: 12px; color: var(--leise); }

/* -------------------------------------------------------- 13 · Bewegung */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity 700ms cubic-bezier(.22,.8,.28,1), transform 700ms cubic-bezier(.22,.8,.28,1); transition-delay: var(--reveal-delay, 0ms); }
.reveal.is-in { opacity: 1; transform: none; }
html:not(.js) .reveal { opacity: 1; transform: none; }

.par { will-change: transform; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .reveal { opacity: 1; transform: none; }
  .band-track { animation: none; }
}

/* ==========================================================================
   Sets, Gratis-Platz, Ersatzband, Einwilligung
   Alles nach demselben Regelwerk: eine gerundete Karte je Bauteil, 32/26 px
   Radius, neutrale Palette. --pop bleibt dem Preisvorteil vorbehalten.
   ========================================================================== */

/* --- Die vier Sets ------------------------------------------------------ */
.sets { display: grid; gap: 16px; margin-top: 26px; }
@media (min-width: 760px)  { .sets { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.setkarte {
  display: flex; flex-direction: column; gap: 18px;
  background: var(--karte); border: 1px solid var(--linie);
  border-radius: var(--r-blk); padding: 20px;
}
/* picture { display: contents } macht auch das <source> zum Rasterkind —
   sonst stehen hier sechs Kinder in zwei Reihen statt drei in einer. */
.set-bilder source { display: none; }
.set-bilder { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.set-bilder img {
  width: 100%; height: auto; aspect-ratio: 1; object-fit: cover;
  border-radius: var(--r-kl); background: var(--weich);
}
.set-name { font-family: var(--display); font-size: 24px; font-weight: 600; letter-spacing: -.025em; margin-top: 6px; }
.set-steine { font-size: 13px; color: var(--leise); margin-top: 4px; letter-spacing: .04em; }
.set-info { font-size: 14.5px; line-height: 1.6; margin-top: 10px; }
.set-preis { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 16px 0 14px; }
.set-preis b { font-family: var(--display); font-size: 28px; font-weight: 600; letter-spacing: -.03em; color: var(--pop); }
.set-preis .statt { font-size: 16px; align-self: baseline; }
.set-preis span { font-size: 13px; color: var(--leise); font-variant-numeric: tabular-nums; }
.setkarte .btn { width: 100%; justify-content: center; }
/* Der Leitsatz steht einmal unter den vier Karten, nicht auf jeder Karte. */
.sets-note { margin-top: 16px; font-size: 13.5px; color: var(--leise); }
/* Der durchgestrichene Bezugspreis. Er steht ueberall dort, wo eine
   Mengenstufe einen Vorteil hat: was dieselbe Zahl Armbaender einzeln kostet
   (Menge x EINZELPREIS). Nie eine Prozentangabe, nie eine getippte Zahl. */
.statt {
  font-family: var(--sans); font-weight: 400; letter-spacing: 0;
  color: var(--leise); text-decoration: line-through;
  /* gemessen: --leise auf --dunkel sind 2,90:1 — auf den dunklen Flaechen
     deshalb ein heller Ton (11,7:1), nicht der graue der hellen Flaechen. */
  text-decoration-thickness: 1px; font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* Nur DUNKLE Flaechen. Stapel-Rechnung und Warenkorb sind hell — dort waere
   der helle Ton unsichtbar (gemessen: 1,03:1 auf --weich). */
.footer .statt, .banner .statt, .hero .statt {
  color: rgba(250,248,245,.72);
}
.kopf-note { font-size: 13.5px; color: var(--leise); max-width: 30ch; display: block; }

/* --- Warenkorb: geschenkte Zeile und offener Platz ---------------------- */
.cart-line.ist-frei { background: var(--weich); border-radius: var(--r-med); padding: 10px; }
.frei-fahne {
  display: inline-block; vertical-align: 2px; margin-left: 6px; padding: 2px 8px;
  border-radius: var(--r-pill); background: var(--pop); color: #fff;
  font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; font-weight: 600;
}
.cart-line-price s { color: var(--leise); font-weight: 400; margin-right: 4px; }
.cart-tausch {
  margin-top: 6px; padding: 0; border: 0; background: none; cursor: pointer;
  font-size: 12.5px; color: var(--leise); text-decoration: underline; text-underline-offset: 3px;
}
.cart-tausch:hover { color: var(--tinte); }
.cart-platz {
  border: 1px dashed var(--pop); border-radius: var(--r-med); padding: 12px;
  /* Bewusst --weich statt color-mix(): aeltere Safari-Versionen kennen
     color-mix nicht und liessen die Flaeche transparent. */
  background: var(--weich);
}
.platz-marke {
  width: 76px; height: 76px; flex: none; display: grid; place-items: center;
  border-radius: var(--r-kl); border: 1px dashed var(--linie);
  font-size: 26px; color: var(--pop); background: var(--karte);
}
.btn-klein {
  padding: 8px 16px; font-size: 13px; border-radius: var(--r-pill);
  background: var(--dunkel); color: var(--grund); border: 0; cursor: pointer; white-space: nowrap;
}
.btn-klein:hover { background: var(--tinte); }
.leiste .btn-block { margin-top: 12px; }

/* --- Ersatzband --------------------------------------------------------- */
.cart-bandicon {
  width: 76px; height: 76px; flex: none; display: grid; place-items: center;
  border-radius: var(--r-kl); background: var(--weich); color: var(--leise);
}
.cart-bandicon svg { width: 26px; height: 26px; }
.bandangebot { margin-top: 14px; }
.bandbox {
  display: flex; align-items: center; gap: 12px;
  border: 1px solid var(--linie); border-radius: var(--r-med); padding: 12px;
}
.bandbox .cart-bandicon { width: 46px; height: 46px; }
.bandbox > div { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.bandbox b { font-size: 13.5px; }
.bandbox span { font-size: 12.5px; color: var(--leise); }
.bandbox-preis { color: var(--pop) !important; font-variant-numeric: tabular-nums; }
.bandseite { display: grid; gap: 30px; align-items: start; }
@media (min-width: 900px) { .bandseite { grid-template-columns: 5fr 6fr; gap: 48px; } }
.band-karte {
  display: grid; place-items: center; gap: 14px; text-align: center;
  background: var(--weich); border-radius: var(--r-blk); padding: 48px 26px;
}
.band-icon { display: grid; place-items: center; width: 74px; height: 74px; border-radius: 50%; background: var(--karte); color: var(--leise); }
.band-icon svg { width: 30px; height: 30px; }
.band-inhalt { font-family: var(--display); font-size: 18px; font-weight: 600; letter-spacing: -.02em; }
.band-fotonote { font-size: 12.5px; color: var(--leise); max-width: 26ch; }
.sec-erste { padding-top: 26px; }

/* --- Wahl des Gratis-Armbands ------------------------------------------ */
.modal--breit .modal-box { width: min(720px, 100%); max-height: 86vh; overflow-y: auto; }
.freiwahl {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 10px; margin: 20px 0 16px;
}
.fw {
  position: relative; display: flex; flex-direction: column; gap: 2px; padding: 0 0 8px;
  border: 1px solid var(--linie); border-radius: var(--r-kl); background: var(--karte);
  cursor: pointer; text-align: left; overflow: hidden;
  transition: border-color var(--schnell), transform var(--schnell);
}
.fw:hover { border-color: var(--tinte); transform: translateY(-2px); }
.fw img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; background: var(--weich); }
.fw-name { font-size: 12.5px; font-weight: 600; padding: 6px 8px 0; }
.fw-stein { font-size: 11px; color: var(--leise); padding: 0 8px; }
.fw-fahne {
  position: absolute; top: 6px; left: 6px; padding: 2px 7px; border-radius: var(--r-pill);
  background: var(--dunkel); color: var(--grund); font-size: 9.5px;
  letter-spacing: .07em; text-transform: uppercase;
}

/* --- Lieferzeile über dem Kaufknopf ------------------------------------ */
.lieferzeile {
  display: flex; align-items: center; gap: 8px; margin: 16px 0 12px;
  font-size: 13.5px; color: var(--tinte);
}
.lieferzeile b { font-weight: 600; }
.li-punkt { width: 7px; height: 7px; flex: none; border-radius: 50%; background: var(--pop); }

/* --- Herkunft, Glas, Überlieferung ------------------------------------- */
.herkunft { display: grid; gap: 0; margin-top: 4px; border-top: 1px solid var(--linie); }
.herkunft > div {
  display: flex; justify-content: space-between; gap: 14px;
  padding: 9px 2px; border-bottom: 1px solid var(--linie); font-size: 13.5px;
}
.herkunft dt { color: var(--leise); }
.herkunft dd { text-align: right; }
.herkunft-note { margin-top: 8px; font-size: 12px; color: var(--leise); }
.glashinweis {
  margin-top: 14px; padding: 14px 16px; border-radius: var(--r-med);
  background: var(--weich); font-size: 13.5px; line-height: 1.6;
}
.acc-vorsatz { font-size: 12.5px; color: var(--leise); margin-bottom: 10px; }

/* --- Zahlungsarten ----------------------------------------------------- */
.zahlarten { margin: 16px 0 4px; }
.za-titel { font-size: 12px; color: var(--leise); letter-spacing: .06em; text-transform: uppercase; }
.za-liste { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.za-liste span {
  padding: 4px 10px; border: 1px solid var(--linie); border-radius: var(--r-pill);
  font-size: 12px; color: var(--leise);
}
.za-klarna { display: block; margin-top: 10px; font-size: 13px; }

/* --- Einwilligung ------------------------------------------------------ */
.cookiekarte {
  position: fixed; left: var(--rand); right: var(--rand); bottom: 12px; z-index: 130;
  background: var(--grund); border: 1px solid var(--linie); border-radius: var(--r-med);
  box-shadow: 0 24px 60px -30px rgba(23,22,18,.75); padding: 20px;
}
@media (min-width: 760px) { .cookiekarte { left: auto; right: 20px; width: min(460px, calc(100% - 40px)); } }
.ck-innen { display: grid; gap: 16px; }
.ck-text { font-size: 13.5px; line-height: 1.6; margin-top: 8px; }
.ck-knoepfe { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
/* Ablehnen und Akzeptieren sind gleich gross und gleich dunkel — kein grauer
   Link neben einem schwarzen Knopf. */
.ck-knoepfe .btn { width: 100%; justify-content: center; }
.ck-mehr {
  grid-column: 1 / -1; text-align: center; font-size: 12.5px; color: var(--leise);
  text-decoration: underline; text-underline-offset: 3px;
}
.ck-link {
  padding: 0; border: 0; background: none; cursor: pointer; color: inherit;
  font: inherit; text-decoration: underline; text-underline-offset: 3px;
}
/* Der Banner darf die Kaufleiste nicht verdecken. */
.ck-offen .buybar { bottom: 210px; }
@media (min-width: 760px) { .ck-offen .buybar { bottom: 12px; right: calc(var(--rand) + 480px); } }

/* --- Kontaktformular ---------------------------------------------------- */
/* Laeuft ueber Netlify Forms: kein Skript, kein Backend. Ohne KONTAKTFORMULAR
   in site_config.py wird es gar nicht erst gebaut. */
.formular { margin-top: 30px; display: grid; gap: 16px; max-width: 44rem; }
.formular-zwei { display: grid; gap: 16px; grid-template-columns: 1fr 1fr; }
.feld { display: grid; gap: 8px; }
.feld > span { font-size: 13.5px; font-weight: 500; color: var(--leise); }
.feld > span i { font-style: normal; font-weight: 400; }
.feld input, .feld textarea {
  width: 100%; font: inherit; font-size: 15.5px; color: var(--tinte);
  background: var(--karte); border: 1px solid var(--linie-feld); border-radius: var(--r-kl);
  padding: 13px 16px; min-height: 48px;
  transition: border-color var(--schnell), box-shadow var(--schnell);
}
.feld textarea { resize: vertical; line-height: 1.55; }
.feld input:hover, .feld textarea:hover { border-color: var(--tinte); }
.feld input:focus-visible, .feld textarea:focus-visible {
  outline: 0; border-color: var(--tinte); box-shadow: 0 0 0 3px rgba(23, 22, 18, .08);
}
.feld-check { display: flex; gap: 12px; align-items: flex-start; font-size: 13.5px;
  color: var(--leise); line-height: 1.5; cursor: pointer; }
.feld-check input { flex: none; width: 20px; height: 20px; margin-top: 1px; accent-color: var(--dunkel); }
.feld-check a { text-decoration: underline; text-underline-offset: 3px; }
.formular > .btn { justify-self: start; margin-top: 4px; }
/* Der Koederfang fuer Bots — fuer Menschen und Screenreader unsichtbar. */
.honig { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ------------------------------- 15 · FAQ, Zoom, Meldungen, Empfehlung */
/* Das Akkordeon ist ein <details>: es funktioniert ohne JavaScript, steht als
   Text im HTML (Google liest es) und braucht keine Zeile Skript. `name=` haelt
   immer nur eine Antwort offen. */
/* Schmale Lesebreite — aber linksbuendig auf Linie 2, nicht mittig.
   Zentriert stand die FAQ bei 1700 px auf x 440, waehrend jede Ueberschrift
   darueber auf x 70 begann. */
.innen--eng > * { max-width: 860px; }

.faq { border-top: 1px solid var(--linie); }
.faq-item { border-bottom: 1px solid var(--linie); }
.faq-item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 19px 0; cursor: pointer; list-style: none;
  font-family: var(--display); font-size: 17px; font-weight: 600;
  letter-spacing: -.01em; color: var(--tinte);
  transition: opacity var(--schnell);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { opacity: .62; }
.faq-item summary:focus-visible { outline: 2px solid var(--tinte); outline-offset: 3px; border-radius: 6px; }
.faq-sign { position: relative; width: 13px; height: 13px; flex: none; }
.faq-sign::before, .faq-sign::after {
  content: ""; position: absolute; inset: 50% 0 auto; height: 1.4px;
  background: var(--tinte); transition: transform var(--ruhig);
}
.faq-sign::after { transform: rotate(90deg); }
.faq-item[open] .faq-sign::after { transform: rotate(0deg); }
.faq-panel { padding-bottom: 20px; max-width: 62ch; }
.faq-panel p { font-size: 14.5px; line-height: 1.68; color: var(--leise); }
.faq-panel p + p { margin-top: 12px; }
.faq-panel a { color: var(--tinte); text-underline-offset: 3px; }
.faq-fuss { margin-top: 26px; font-size: 14px; color: var(--leise); }
.faq-fuss .link { margin-left: 4px; }

/* Ohne Hoehenanimation waere der Sprung hart. ::details-content koennen noch
   nicht alle Browser — wer es kann, bekommt das Aufziehen, alle anderen ein
   ruhiges Einblenden. Beides ist fertig, keines ist Pflicht. */
.faq-item[open] .faq-panel { animation: faq-auf 300ms var(--ruhig) both; }
@keyframes faq-auf { from { opacity: 0; transform: translateY(-5px); } }
@supports selector(::details-content) {
  :root { interpolate-size: allow-keywords; }
  .faq-item::details-content {
    block-size: 0; overflow: hidden;
    transition: block-size var(--ruhig), content-visibility var(--ruhig);
    transition-behavior: allow-discrete;
  }
  .faq-item[open]::details-content { block-size: auto; }
  .faq-item[open] .faq-panel { animation: none; }
}

/* Auf der Produktseite steht dasselbe Bauteil enger und ohne obere Linie —
   dort traegt es die vier Fragen, die direkt vor dem Kauf haengen. */
.faq--pdp { margin-top: 24px; }
.faq--pdp summary { font-size: 15.5px; padding: 15px 0; }
.faq--pdp .faq-panel p { font-size: 13.8px; }

/* Drei Gruende als Leiste statt als eigene Sektion mit Ueberschrift. */
/* Die vier Mengen als schmale Zeilen. Als Karten brauchten sie am Handy
   520 px fuer dieselben Zahlen. */
.preisleiste { list-style: none; margin: 0; padding: 0; }
.preisleiste li {
  display: grid; grid-template-columns: 1fr auto; align-items: baseline;
  gap: 2px 12px; padding: 14px 0; border-top: 1px solid var(--linie);
}
.preisleiste li:last-child { border-bottom: 1px solid var(--linie); }
.pl-menge { font-family: var(--display); font-size: 16px; font-weight: 600; }
.pl-preis {
  grid-column: 2; grid-row: 1; text-align: right;
  font-family: var(--display); font-size: 19px; font-weight: 600;
  letter-spacing: -.02em; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.pl-preis .statt { font-size: 14px; margin-right: 6px; }
.pl-note { grid-column: 1 / -1; grid-row: 2; font-size: 13px; color: var(--leise); }
@media (min-width: 560px) {
  .preisleiste li { grid-template-columns: 1fr auto auto; }
  .pl-note { grid-column: 2; grid-row: 1; text-align: right; }
  .pl-preis { grid-column: 3; grid-row: 1; min-width: 96px; }
}

/* Zwei Kacheln statt Banner, vier Set-Karten und Merkmalsleiste. */
.wege--zwei { grid-template-columns: 1fr; }
@media (min-width: 700px) { .wege--zwei { grid-template-columns: 1fr 1fr; gap: 18px; } }

/* Die drei Wege durch den Shop: einzeln, gestapelt, fertig. Sie stehen auf
   der Startseite unter dem Hero und am Kopf jeder der drei Zielseiten —
   dieselbe Karte, damit man an jeder Stelle sieht, wo man gerade ist. */
.wege { display: grid; gap: 12px; }
@media (min-width: 800px) { .wege { grid-template-columns: repeat(3, 1fr); gap: 18px; } }
.weg {
  position: relative; background: var(--karte); border-radius: var(--r-med);
  padding: 24px 22px 20px; border: 1px solid transparent;
  display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
}
.weg .kreis { margin-bottom: 2px; }
.weg h3 { font-family: var(--display); font-size: 18px; font-weight: 600; letter-spacing: -.015em; }
.weg p { font-size: 14.5px; line-height: 1.55; color: var(--leise); max-width: 34ch; }
.weg .link { margin-top: auto; padding-top: 6px; }
/* Ein Satz unter der Ueberschrift, bevor das Raster anfaengt. */
.sektion-lead { margin: -6px 0 22px; max-width: 52ch; font-size: 15px; line-height: 1.6; color: var(--leise); }

/* Die Größenskala in der Klappe der Produktseite. */
.groesse { margin: 2px 0 18px; }
.groesse svg { width: 100%; max-width: 340px; height: auto; display: block; }
.groesse figcaption { margin-top: 8px; font-size: 13.5px; line-height: 1.6; color: var(--leise); }
.groesse figcaption b { color: var(--tinte); font-weight: 600; }

.gruende { display: grid; gap: 22px; }
@media (min-width: 900px) {
  .gruende { grid-template-columns: repeat(3, 1fr); gap: 40px; }
}

/* --- Bild vergroessern -------------------------------------------------- */
.zoom-btn {
  position: absolute; right: 14px; bottom: 14px; z-index: 3;
  width: 44px; height: 44px; display: grid; place-items: center;
  border: 0; border-radius: var(--r-pill); cursor: pointer;
  background: rgba(255,255,255,.86); color: var(--tinte);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 2px 10px rgba(23,22,18,.10);
  transition: transform var(--schnell), background var(--schnell);
}
.zoom-btn:hover { transform: scale(1.06); background: #fff; }
.zoom-btn svg { width: 19px; height: 19px; }

.lupe {
  position: fixed; inset: 0; z-index: 120; display: none;
  background: rgba(20,19,16,.94); touch-action: none;
}
.lupe.ist-auf { display: block; animation: lupe-auf 200ms ease-out; }
@keyframes lupe-auf { from { opacity: 0; } }
.lupe-bild {
  position: absolute; inset: 0; margin: auto; max-width: 100%; max-height: 100%;
  object-fit: contain; transform-origin: 50% 50%; cursor: zoom-in;
  transition: transform 260ms var(--ruhig);
}
.lupe.ist-nah .lupe-bild { cursor: grab; transition: none; }
.lupe-zu {
  position: absolute; top: 14px; right: 14px; z-index: 2;
  width: 46px; height: 46px; display: grid; place-items: center;
  border: 0; border-radius: var(--r-pill); cursor: pointer;
  background: rgba(255,255,255,.14); color: #fff;
}
.lupe-zu:hover { background: rgba(255,255,255,.24); }
.lupe-hint {
  position: absolute; left: 0; right: 0; bottom: 22px; text-align: center;
  font-size: 12.5px; letter-spacing: .04em; text-transform: uppercase;
  color: rgba(255,255,255,.62); pointer-events: none;
}
.lupe.ist-nah .lupe-hint { opacity: 0; }

/* --- Meldung nach dem Hinzufuegen --------------------------------------- */
/* Wer etwas in den Korb legt, bekommt eine Antwort: was drin liegt und wie
   weit es bis zum naechsten Gratis-Armband ist. Dieselbe Karte traegt beim
   Wiederkommen den Hinweis auf den gespeicherten Korb. */
.melde {
  position: fixed; z-index: 95; left: var(--rand); right: var(--rand); bottom: 16px;
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; border-radius: var(--r-med);
  background: var(--karte); border: 1px solid var(--linie);
  box-shadow: 0 10px 34px rgba(23,22,18,.14);
  transform: translateY(140%); opacity: 0; pointer-events: none;
  transition: transform var(--ruhig), opacity var(--ruhig);
}
.melde.ist-da { transform: translateY(0); opacity: 1; pointer-events: auto; }
.melde img { width: 46px; height: 46px; border-radius: 12px; object-fit: cover; flex: none; }
.melde-text { flex: 1; min-width: 0; }
.melde-titel {
  font-family: var(--display); font-weight: 600; font-size: 14.5px;
  line-height: 1.25; color: var(--tinte);
  overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; line-clamp: 2;
}
.melde-sub { font-size: 12.5px; color: var(--leise); margin-top: 2px; }
.melde-sub b { color: var(--pop); font-weight: 600; }
.melde-btn {
  flex: none; border: 0; cursor: pointer; border-radius: var(--r-pill);
  background: var(--dunkel); color: #fff; padding: 10px 16px; min-height: 44px;
  font-family: var(--display); font-size: 13.5px; font-weight: 600;
}
.melde-zu {
  /* 44 px Trefferflaeche, aber ohne die Karte auseinanderzuziehen. */
  flex: none; width: 44px; height: 44px; margin: -7px -8px -7px -4px;
  display: grid; place-items: center;
  border: 0; background: transparent; color: var(--leise); cursor: pointer;
}
.melde-zu svg { width: 15px; height: 15px; }
@media (min-width: 768px) {
  .melde { left: auto; right: 24px; bottom: 24px; width: 372px; }
}

/* --- Empfehlung unter dem Farbfilter ------------------------------------ */
.empfehlung {
  display: none; align-items: center; gap: 14px; flex-wrap: wrap;
  margin: 0 0 22px; padding: 14px 16px;
  border: 1px solid var(--linie); border-radius: var(--r-med); background: var(--weich);
}
.empfehlung.ist-da { display: flex; animation: faq-auf 320ms var(--ruhig) both; }
.empfehlung-bilder { display: flex; flex: none; }
.empfehlung-bilder img {
  width: 42px; height: 42px; border-radius: var(--r-pill); object-fit: cover;
  border: 2px solid var(--weich); margin-left: -12px; background: var(--karte);
}
.empfehlung-bilder img:first-child { margin-left: 0; }
.empfehlung-text { flex: 1; min-width: 190px; font-size: 13.8px; color: var(--leise); }
.empfehlung-text b { color: var(--tinte); font-weight: 600; }

/* ==========================================================================
   14 · Mobil — alles unterhalb 768 px
   Die Desktop-Fassung oberhalb dieser Datei wird nicht angefasst: jede Regel
   hier steht in einer Abfrage, die am Schirm nie greift.

   Drei Leitsaetze, in dieser Reihenfolge:
   1. Wegnehmen vor Verkleinern. Was am Handy nichts entscheidet, faellt weg.
   2. Ein Anliegen und eine naechste Handlung je Bildschirm.
   3. Nichts unter 44 px zum Tippen, nichts unter 14 px zum Lesen —
      ausser echten Marken/Zaehlern, die bei 12 px stehen bleiben (REFERENZ.md).
   ========================================================================== */

/* Auf Geraeten ohne Zeiger gibt es kein :hover — was nur beim Hover erscheint,
   erscheint dort nie. Das Plus auf den Steinkacheln war deshalb unsichtbar. */
@media (hover: none) {
  .stein-plus { opacity: 1; transform: none; }
}

/* Die Faktenzeile im Hero gehoert dem Handy. Am Schirm sagen Lead und Chips
   dasselbe, dort waere sie doppelt. */
.hero-fakten { display: none; }

/* Zweiter Platz fuer die Zwischensumme (site.js entscheidet, welcher gilt).
   Leer heisst unsichtbar — am Schirm ist er immer leer. */
#cart-stand-mobil:empty { display: none; }
@media (min-width: 768px) { #cart-stand-mobil { display: none; } }

@media (max-width: 767px) {

  /* Am Handy steht die Überschrift mitten im Bild — beim Startseiten-Motiv
     genau über den hellen Perlen. Der Verlauf der Referenz wird dort zu
     durchsichtig (34 %), deshalb hier ein kräftigerer Mittelwert. Am Schirm
     steht der Text auf dem dunklen Unterarm und braucht das nicht. */
  .hero::after {
    background: linear-gradient(to bottom,
      rgba(0,0,0,.78) 0%, rgba(0,0,0,.52) 46%, rgba(0,0,0,.82) 100%);
  }

  /* Zwei Formularspalten sind am Handy eine. */
  .formular-zwei { grid-template-columns: 1fr; }

  /* --- Raster: das Innenpolster war fast doppelt so gross wie die Rinne,
         obwohl innen der knappe Platz ist. Jetzt ist es kleiner. --------- */
  :root { --rand: 16px; --pad: 20px; --sec: 36px; }

  /* --- Lesegroessen. 16 / 14 / 12 wie in der Referenz; alles, was Text ist,
         steht bei mindestens 14. Unter 14 bleiben nur Marken und Zaehler. */
  .klein, .card-stone, .zusagen span, .schritt p, .merkmal p, .stufe span,
  .set-steine, .set-preis span, .sets-note, .kopf-note, .filter-stand,
  .filter-sort, .price-note, .za-klarna, .staffel-mini li, .assure li,
  .acc-facts > div, .herkunft > div, .sitz-fakten > div, .lieferzeile,
  .stein-name, .st-zeile, .st-leer, .stand-zeile, .vs-name, .bandbox b,
  .foot-title, .s-land, .buy-note, .kasse-zeile, .acc-vorsatz, .st-hinweis,
  .band-fotonote, .leiste p, .ck-text, .brotkrume, .cart-line-meta,
  .filter-welten button, .mass-schritte li, .note-box, .pdp-stapelpreis {
    font-size: 14px;
  }
  .cart-remove, .cart-tausch, .cart-sum small, .vs-stein,
  .stein-stein, .fw-name, .bandbox span, .footer-bottom, .duo figcaption,
  .herkunft-note, .staffel-mini b small, .za-liste span, .note-box code,
  .drawer-hint, .filter-welten button span {
    font-size: 14px;
  }
  /* Unter 14 bleiben nur Marken und Zaehler — die 12 aus der Referenz. */
  .card-index, .stufe-fahne, .frei-fahne, .fw-fahne, .fw-stein,
  .platz-name, .za-titel, .card-look, .schritt-nr, .cart-count {
    font-size: 12px;
  }
  .brand { font-size: 14px; letter-spacing: .18em; }
  /* Die Zahlart-Plaketten stehen unter einem eigenen, spezifischeren
     Selektor — sonst bleiben sie bei 11,5 px. */
  .zahlarten span:not(.za-titel) { font-size: 14px; }
  /* Der Link mitten im Satz war 17 px hoch. Inline-flex laesst ihn im Satz
     stehen und gibt ihm trotzdem eine Daumenflaeche. */
  .kb-liste a { display: inline-flex; align-items: center; min-height: 44px; }
  /* Gemessen am 2026-08-28: der Versandlink unter dem Preis war 22 px hoch,
     der Verweis auf die Widerrufsbelehrung im Fliesstext 19 px. */
  .price-note a, .prose p a { display: inline-flex; align-items: center; min-height: 44px; }
  /* Derselbe Fall im Einwilligungssatz des Formulars: der Link war 17 px hoch
     und lag mitten in der Flaeche, die das Haekchen setzt. */
  .feld-check a { display: inline-flex; align-items: center; min-height: 44px; }
  .feld-check input { width: 24px; height: 24px; }

  /* --- Kopfzone: kostete dauerhaft 116 px. Jetzt 104, und der Warenkorb-
         knopf ist endlich gross genug zum Treffen. ---------------------- */
  body.mit-hero .header-inner { margin-top: 8px; }
  body.ohne-hero { padding-top: 108px; }
  .header-inner { padding: 12px 12px 12px 16px; gap: 12px; }
  body.ohne-hero .header-inner,
  .header.is-stuck .header-inner { padding: 10px 10px 10px 16px; margin-top: 8px; }
  .header .icon-btn { width: 44px; height: 44px; }
  .header-right { gap: 6px; }
  .wortmarke { width: 172px; }
  /* Die Wortmarke war 208 x 10 px gross zum Antippen. Das Polster macht 44 px
     daraus, die Gegen-Marge haelt die Kopfleiste trotzdem flach. */
  .brand { min-height: 44px; padding-block: 17px; margin-block: -17px; }

  /* --- Mobilmenue: sass fix bei 800 px Inhalt auf 667 px Schirm — die
         untersten Eintraege waren nicht erreichbar. Jetzt scrollt es. --- */
  .mobile-nav {
    padding: 104px var(--rand) calc(24px + env(safe-area-inset-bottom));
    justify-content: flex-start; gap: 22px;
    overflow-y: auto; overscroll-behavior: contain;
  }
  .mobile-nav ul { overflow: visible; }
  .mobile-nav a { padding: 15px 0; font-size: clamp(24px, 6.4vw, 32px); }
  .mobile-foot { margin-top: auto; }
  .mobile-foot .btn, .mobile-foot .link { min-height: 48px; }

  /* --- Hero: 712 px fuer vier Zeilen ohne Preis und ohne Produkt. Jetzt
         Claim, Titel, EINE Handlung und die drei Zahlen, um die es geht. */
  .hero-inner {
    min-height: clamp(440px, calc(100svh - 250px), 560px);
    padding: 92px var(--pad) 26px;
    gap: 20px;
  }
  .hero-lead, .hero-unten { display: none; }
  .hero-cta .btn + .btn-geist { display: none; }   /* eine Handlung, nicht zwei */
  .hero-cta { margin-top: 22px; }
  /* Der Hero war kopflastig: Inhalt oben, 160 px leeres Foto darunter. Die
     Zahlen sitzen jetzt unten im Bild — dieselbe Stelle und dasselbe Bauteil
     wie die Glaschips der Referenz, nur eine Zeile statt drei Kacheln. */
  .hero-fakten {
    display: flex; align-items: center; gap: 12px; margin: 0;
    padding: 12px 15px;
    border-radius: var(--r-med);
    border: 1px solid rgba(255,255,255,.16);
    background: rgba(255,255,255,.1);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    font-size: 14px; line-height: 1.4; color: rgba(255,255,255,.94);
  }
  .hero-fakten b { font-weight: 600; }
  .hero--klein .hero-inner { min-height: clamp(280px, calc(100svh - 430px), 340px); padding-bottom: 24px; }

  /* --- Sektionen und Karten ---------------------------------------- */
  .kopf { margin-bottom: 20px; }
  .link { min-height: 44px; }
  /* .lieferzeile ist ein Flexkasten; die losen Textstuecke darin werden zu
     eigenen Flexkindern und brechen auf 390 px in Spalten um ("Bei dir bis
     zum" / "18. September"). Als Fliesstext laeuft der Satz normal. */
  .lieferzeile { display: block; }
  .li-punkt { display: inline-block; margin-right: 8px; vertical-align: middle; }
  .zwei { gap: 24px; }
  .grid { gap: 12px; }
  .card { padding: 12px; }
  .card-body { padding: 12px 6px 4px; }
  .card-name { font-size: 17px; }
  .merkmale { gap: 22px; }
  .merkmal { gap: 12px; }
  .kreis { width: 42px; height: 42px; }
  .schritte { gap: 20px 14px; }
  .schritt .kreis, .schritt-kopf .kreis { width: 38px; height: 38px; }
  .schritt-kopf { gap: 10px; margin-bottom: 10px; }

  /* --- Die vier Sets: vier Karten kosteten 2.486 px. Der Beschreibungstext
         steht auf der Set-Seite (#dievier), der Leitsatz einmal statt
         viermal. ------------------------------------------------------- */
  .sets { gap: 12px; margin-top: 20px; }
  /* --- Sets: vier Karten uebereinander waren 1585 px — die Haelfte der
         Startseite fuer vier Angebote. Als Zeile (Steine links, Preis und
         Knopf rechts) sind es rund 640 px, ohne dass etwas fehlt, was zum
         Kauf gebraucht wird. Der Beschreibungssatz steht nur noch auf der
         Setseite selbst, wo Platz dafuer ist. --------------------------- */
  .setkarte {
    padding: 14px; gap: 12px;
    display: grid; grid-template-columns: 112px minmax(0, 1fr); align-items: center;
  }
  .set-bilder { display: flex; gap: 0; }
  /* picture { display: contents } erzeugt KEINE Box — die Marge lief hier ins
     Leere, die drei Kreise standen 138 px breit in einer 104-px-Spalte und
     ragten 22 px unter den Preis. Die Marge gehoert auf das <img>, das ist
     das einzige Kind mit einer Box. (Dieselbe Falle steht in STAND.md.) */
  .set-bilder picture + picture img { margin-left: -14px; }
  .set-bilder img {
    width: 46px; height: 46px; border-radius: var(--r-pill);
    border: 2px solid var(--karte);
  }
  .set-text > .eyebrow { display: none; }
  .set-name { font-size: 21px; margin-top: 0; }
  .set-steine { font-size: 12px; letter-spacing: .02em; }
  .set-preis { margin: 8px 0 10px; gap: 8px; }
  .set-preis b { font-size: 23px; }
  .set-preis span { font-size: 12px; }
  .set-info { display: none; }
  /* Der Pfeilkreis frisst in der schmalen Spalte 40 px — dadurch brach
     "In den Warenkorb" auf zwei Zeilen und die Karte wuchs um 20 px. */
  .setkarte .btn { min-height: 46px; font-size: 14px; padding: 11px 14px; gap: 8px; }
  .setkarte .btn .pf { display: none; }

  /* Auf der Setseite bleibt die Karte kompakt — sie ist die Landeseite fuer
     Anzeigen, und dort zaehlt, wie schnell der erste Kaufknopf im Bild ist.
     Was sie zusaetzlich zeigt, ist der Satz zur Mischung; volle Karten haben
     ihn 1187 px weit nach unten geschoben. */
  #dievier .set-info { display: block; font-size: 12.5px; line-height: 1.45; margin-top: 6px; }

  /* --- Mengenstaffel: vier Karten untereinander brauchten 620 px fuer eine
         Tabelle mit vier Zeilen. Als Zeile sind es 320. ----------------- */
  /* Das Rechenbeispiel wiederholt am Handy nur die Zeile "Kaufe 3, bekomme 4"
     aus der Tafel darueber — am Schirm steht es daneben und traegt, hier
     kostet es 150 px. */
  .stufen { grid-template-columns: 1fr; gap: 8px; }
  .stufe {
    display: grid; grid-template-columns: minmax(0, 1fr) auto;
    align-items: baseline; gap: 2px 14px; padding: 13px 16px;
  }
  .stufe span:first-child { font-size: 15px; color: var(--tinte); }
  .stufe b { grid-column: 2; grid-row: 1; font-size: 21px; text-align: right; }
  .stufe span:nth-of-type(2), .stufe-fahne { grid-column: 1 / -1; }
  .stufe-fahne { margin-top: 6px; }

  /* --- Kampagne und Herkunft: zwei hohe Motive und ein Quadrat, das am
         Handy nie wechselt (kein Hover). Eines reicht, das Quadrat faellt. */
  .duo { gap: 16px; }
  .duo figure:last-of-type { display: none; }
  .duo figure img { aspect-ratio: 4 / 3; }
  .stones { gap: 20px; }
  .stones-view { display: none; }
  .stones-row { padding: 13px 4px; min-height: 44px; }

  /* --- Laufschrift: 78 px fuer Zierde ------------------------------- */
  .band { padding: 13px 0; }
  .band-track span { font-size: 17px; padding: 0 16px; }
  .band-track span::after { margin-left: 30px; }

  /* --- Kontaktblock und Fusszeile ----------------------------------- */
  .kontaktblock { gap: 16px; }
  .kontaktblock-bild { min-height: 170px; }
  .footer { padding-bottom: calc(var(--rand) + env(safe-area-inset-bottom)); }
  .footer-claim { font-size: 30px; padding-bottom: 24px; margin-bottom: 24px; }
  .footer-grid { gap: 26px; }
  /* Fusszeilen-Links waren 18 px hoch bei 34 px Abstand. Zweispaltig bleiben
     sie gleich hoch wie vorher, sind aber 44 px zu treffen. */
  .footer-grid ul { gap: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-grid ul { gap: 0 10px; }
  .footer-grid ul a { display: flex; align-items: center; width: 100%; min-height: 44px; }
  .footer-grid li { display: flex; align-items: center; min-height: 44px; }
  .footer-bottom { margin-top: 28px; }
  .social a { width: 44px; height: 44px; }

  /* --- Kollektion: Filter ------------------------------------------- */
  /* Fuenf Pillen brachen auf zwei Zeilen um ("Bunt" allein), darunter das
     Auswahlfeld: 154 px ragged. Als angeschnittene Reihe ist es eine Zeile,
     und der Anschnitt zeigt, dass rechts mehr steht. */
  .filter { display: block; margin-bottom: 12px; }
  .filter-welten {
    flex-wrap: nowrap; gap: 6px;
    margin-inline: calc((var(--rand) + var(--pad)) * -1);
    padding-inline: calc(var(--rand) + var(--pad));
    overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x proximity; scrollbar-width: none;
  }
  .filter-welten::-webkit-scrollbar { display: none; }
  .filter-welten button { flex: 0 0 auto; scroll-snap-align: start; padding: 11px 15px; min-height: 44px; }
  .filter-sort { display: flex; justify-content: space-between; align-items: center; width: 100%; margin-top: 10px; }
  .filter-sort select { padding: 12px 14px; min-height: 44px; }
  .filter-stand { margin-bottom: 12px; }

  /* --- Prosaseiten --------------------------------------------------- */
  .prose h2 { margin: 30px 0 10px; }
  .prose h3 { margin: 24px 0 8px; }
  .band-karte { padding: 32px 20px; }

  /* --- Produktseite: ueber der Falz stand weder Preis noch Kaufknopf.
         Reihenfolge neu: Name, Preis, Liefertag, Kaufen. Die Mengenwahl
         kommt darunter — wer eine andere Menge will, sucht sie ohnehin. */
  #pdp.sec { padding-top: 10px; }
  .brotkrume { display: none; }
  .pdp { gap: 14px; }
  .pdp-media { display: block; position: relative; }
  .pdp-main { aspect-ratio: 1 / 1; }
  /* Der quadratische Zuschnitt der Kachelbilder sitzt links der Mitte
     (tools/images.py: SQ_X = 0.036). object-position holt denselben
     Ausschnitt aus dem grossen Bild — sonst faellt das Armband raus. */
  .pdp-main img { object-position: 11% center; }
  /* Die Vorschaubilder liegen jetzt IM Foto statt darunter: 84 px Hoehe
     gespart, Tippflaeche 56 px. */
  .pdp-thumbs {
    position: absolute; left: 10px; bottom: 10px; z-index: 2; gap: 6px;
    padding: 6px; border-radius: 20px;
    background: rgba(250,248,245,.82);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 10px 26px -14px rgba(23,22,18,.7);
  }
  .pdp-thumbs button {
    width: 48px; height: 48px; border-radius: 14px;
    border: 1px solid transparent; background: transparent;
  }
  .pdp-thumbs button[aria-pressed="true"] { border-color: var(--tinte); }

  .pdp-info { padding: 18px 16px; display: flex; flex-direction: column; }
  .pdp-info > .eyebrow      { order: 1; }
  .pdp-info > .pdp-title    { order: 2; }
  /* Die Glas-Klarstellung bleibt direkt unter dem Titel (Regel aus STAND.md). */
  .pdp-info > .glashinweis  { order: 3; }
  /* Erst was es ist, dann was es kostet — dieselbe Reihenfolge wie am Schirm. */
  .pdp-info > .pdp-kurz     { order: 4; }
  .pdp-info > .pdp-price    { order: 5; margin-top: 12px; }
  .pdp-info > .price-note   { order: 6; }
  .pdp-info > .lieferzeile  { order: 7; margin: 14px 0 9px; }
  /* Die Pflichtangabe brach mitten im Link um ("… ab 2 / Armbändern frei").
     Als ein Stueck rutscht sie geschlossen in die zweite Zeile. */
  .pdp-info > .price-note a { display: inline-flex; white-space: nowrap; }
  .pdp-info > .kaufzeile    { order: 8; }
  .pdp-info > .kasse-zeile  { order: 9; }
  .pdp-info > .zahlarten    { order: 11; }
  .pdp-info > .assure       { order: 12; }
  .pdp-info > .faq          { order: 13; }
  .pdp-info > .buy-note     { order: 14; }


  /* Der wichtigste Knopf der Seite war der schmalste: 150 px von 390 (auf
     einem 360er Schirm 120), der Text brach auf drei Zeilen, der Knopf wurde
     74 px hoch. Schuld war der Mengenwaehler daneben, der genauso viel Platz
     bekam — dabei kauft am Handy fast niemand zwei gleiche Armbaender, man
     nimmt verschiedene Steine. Jetzt: Menge oben links, Kaufknopf darunter
     ueber die ganze Breite und einzeilig. */
  .kaufzeile { gap: 10px; flex-wrap: wrap; }
  .kaufzeile .btn { flex: 1 0 100%; min-height: 54px; padding: 13px 16px; white-space: nowrap; }
  .menge-gross { padding: 3px; }
  .menge.menge-gross button { width: 44px; height: 44px; font-size: 20px; }
  .menge-gross span { min-width: 28px; font-size: 16px; }
  .staffel-mini li, .assure li { padding: 13px 2px; }
  .faq-item summary { padding: 17px 2px; }
  .faq--pdp summary { padding: 16px 2px; }
  .gruende { gap: 20px; }

  /* Karten: 165 px Spaltenbreite. 18 px Versalien brachen "AMETHYST" mitten
     im Wort um, und der lange Steinname drueckte den Preis aus der Zeile. */
  .card-name { font-size: 16px; overflow-wrap: normal; }
  .card-body {
    padding: 12px 6px 26px; gap: 2px 8px; align-items: baseline;
    display: grid; grid-template-columns: minmax(0, 1fr) auto;
  }
  /* :not(.card-price) — die alte Regel loeste auch den Preis-DIV auf
     (display: contents). Dann griff seine eigene Rasterzuweisung nicht mehr,
     der Name bekam nur 56 px und "AMETHYST" (81 px) lief in den Preis.
     Gemessen am 2026-08-29 auf produkt/*.html bei 390 px. */
  .card-body > div:not(.card-price) { display: contents; }
  /* Der Name steht ueber die ganze Karte, Steinname und Preis teilen sich die
     Zeile darunter: so bleibt der Produktname immer vollstaendig lesbar. */
  .card-name { grid-column: 1 / -1; grid-row: 1; }
  .card-stone { grid-column: 1; grid-row: 2; }
  .card-price { grid-column: 2; grid-row: 2; align-self: baseline; }
  /* nowrap + overflow im Flexkind braucht min-width:0, sonst schrumpft der
     Steinname auf drei Pixel zusammen. Platz fuer den Knopf macht das Padding
     der Zeile, nicht eine max-width am Text. */
  .card-stone { font-size: 12px; }
  .card-body > div { min-width: 0; }
  .card-price { font-size: 14px; white-space: nowrap; }
  .buybar {
    bottom: calc(12px + env(safe-area-inset-bottom));
    padding: 8px 8px 8px 16px;
  }
  .buybar .btn { min-height: 44px; }

  /* --- Stapel: der Preis stand oben, die Auswahl begann bei y 889. Wer
         unten waehlt, sah weder Preis noch Knopf. Jetzt klebt die Rechnung
         als schmale Leiste am unteren Rand, die Auswahl rueckt hoch. ---- */
  #stapel .innen { display: flex; flex-direction: column; }
  .stapel-buehne { display: contents; }
  .stapel-plaetze { order: 1; gap: 8px; }
  .stapel-wahl-kopf { order: 2; margin: 24px 0 14px; }
  .stapel-wahl { order: 3; gap: 8px; }
  .stapel-rechnung {
    order: 4; position: sticky; bottom: 0; z-index: 40;
    margin: 12px calc((var(--rand) + var(--pad)) * -1) 0;
    padding: 12px calc(var(--rand) + var(--pad)) calc(12px + env(safe-area-inset-bottom));
    border-radius: var(--r-blk) var(--r-blk) 0 0;
    border-top: 1px solid var(--linie);
    box-shadow: 0 -16px 34px -24px rgba(23,22,18,.55);
    display: grid; grid-template-columns: minmax(0, 1fr) auto;
    align-items: center; gap: 6px 14px;
  }
  /* In der Leiste steht, was entscheidet: Gesamt, Ersparnis, Knopf.
     Die Aufschluesselung steht im Warenkorb. */
  .stapel-rechnung .st-zeile, .stapel-rechnung .st-leer { display: none; }
  /* min-width: 0 fehlte: der Inhalt (153 px) lief aus der 86 px breiten
     Rasterzelle heraus und landete unter dem Kaufknopf — gemessen bei 390 px.
     Jetzt schrumpft die Zelle mit und bricht notfalls um. */
  .stapel-rechnung .st-summe {
    display: flex; grid-column: 1; grid-row: 1; min-width: 0; flex-wrap: wrap;
    column-gap: 8px; row-gap: 0;
    padding: 0; border: 0; font-family: var(--display); font-size: 17px;
  }
  .stapel-rechnung .st-summe span:last-child { white-space: nowrap; }
  .stapel-rechnung .st-hinweis { grid-column: 1 / -1; margin-top: 0; }
  .stapel-rechnung .btn { grid-column: 2; grid-row: 1; margin-top: 0; width: auto; }
  .stapel-rechnung:has(.st-leer) { display: none; }
  /* Die ganze belegte Kachel entfernt — ein 26-px-Kreuz auf 83 px Kachel
     trifft niemand. Das Kreuz bleibt als Zeichen, ohne Tippflaeche. */
  .stapel-plaetze li.ist-belegt .platz-weg {
    inset: 0; width: 100%; height: 100%;
    border-radius: var(--r-med); background: transparent; color: transparent;
  }
  .stapel-plaetze li.ist-belegt::after {
    content: "×"; position: absolute; top: 6px; right: 6px; z-index: 3;
    width: 26px; height: 26px; border-radius: 50%; pointer-events: none;
    display: grid; place-items: center; font-size: 15px; line-height: 1;
    background: rgba(250,248,245,.92); color: var(--tinte);
  }

  /* --- Warenkorb: der Fuss war 441 px = 52 % des Schirms, die Liste zeigte
         40 % ihres Inhalts. Die Zwischensumme wandert in die Liste (site.js),
         der Hinweis faellt weg, der Fuss traegt nur noch das Noetige. ---- */
  .drawer-head { padding: 12px 12px 12px 18px; }
  .drawer-title { font-size: 16px; }
  .drawer-head .icon-btn { width: 44px; height: 44px; }
  .drawer-body { padding: 12px 16px; }
  .drawer-foot { padding: 12px 16px calc(14px + env(safe-area-inset-bottom)); }
  .drawer-hint { display: none; }
  .drawer-foot .price-note { font-size: 13px; margin-bottom: 8px !important; }
  .drawer-foot .lieferzeile { margin: 8px 0 10px; }
  .drawer-foot .btn { min-height: 52px; }
  .stand-mobil { margin: 16px 0 0; padding-top: 12px; border-top: 1px solid var(--linie); }
  .cart-sum { margin-bottom: 2px; }

  .cart-line { grid-template-columns: 64px minmax(0, 1fr) auto; gap: 12px; padding: 12px 0; }
  .cart-line img, .platz-marke, .cart-bandicon { width: 64px; height: 64px; }
  .cart-line-meta { margin-bottom: 4px; }
  .menge { padding: 2px; }
  .menge button { width: 44px; height: 44px; font-size: 18px; }
  .menge span { min-width: 26px; font-size: 15px; }
  .cart-remove, .cart-tausch { display: inline-flex; align-items: center; min-height: 44px; }
  .btn-klein { min-height: 44px; padding: 10px 16px; }
  .vs { grid-template-columns: 52px minmax(0, 1fr) 30px; padding: 9px; }
  .bandbox { padding: 12px 10px; }
  .bandbox .cart-bandicon { width: 44px; height: 44px; }
  .leiste .btn-block { min-height: 48px; }

  /* --- Dialoge als Blatt von unten: eine Ebene, ein Daumenweg --------- */
  .modal { padding: 0; place-items: end stretch; }
  .modal-box {
    border-radius: var(--r-blk) var(--r-blk) 0 0;
    padding: 26px 18px calc(20px + env(safe-area-inset-bottom));
    max-height: 90svh; overflow-y: auto;
    transform: translateY(24px);
  }
  .modal--breit .modal-box { max-height: 88svh; }
  .modal-close { top: 12px; right: 12px; width: 44px; height: 44px; }
  .freiwahl { gap: 8px; margin: 18px 0 14px; }
  .modal .link { min-height: 44px; }
  .cookiekarte { bottom: calc(12px + env(safe-area-inset-bottom)); }
}

/* ------------------------------------------------------------------ Druck
   Gedruckt wird bei diesem Shop genau eines: die Rechtstexte, allen voran
   das Muster-Widerrufsformular. Alles, was am Bildschirm bedient wird,
   gehoert nicht aufs Papier. */
@media print {
  .kopfzone, .mobile-nav, .footer, .drawer, .drawer-huelle, .modal,
  .cookiekarte, .skip-link, .progress, .icon-btn, .burger, .header-cta,
  .btn, .zurueck-oben, .zahlarten { display: none !important; }

  /* Abschnitte werden erst beim Scrollen eingeblendet — gedruckt muss alles
     sofort da sein, sonst bleiben halbe Seiten leer. */
  .reveal, .reveal * { opacity: 1 !important; transform: none !important; }

  html, body { background: #fff !important; color: #000 !important; }
  body { padding-top: 0 !important; font-size: 11pt; }
  main { padding-top: 0 !important; }
  .innen, .innen--eng, .prose { max-width: none !important; padding: 0 !important; }
  a { color: #000 !important; text-decoration: underline; }
  h1, h2, h3 { break-after: avoid-page; }
  p, li, tr { break-inside: avoid; }
  .karte, .blk, .note-box { border: 1px solid #999 !important; background: #fff !important;
                            box-shadow: none !important; }
  @page { margin: 18mm 16mm; }
}