/*
 * Seelenschätze — shop layer.
 * Loaded only on the shop page, on top of style.css. Uses the existing
 * tokens exclusively; nothing here introduces a new colour or radius.
 *
 * Note on shape: blobs stay reserved for photos of Sabine (DESIGN.md).
 * Products sit in soft rounded frames with a blush aura instead, so the
 * organic form still belongs to her.
 */

/* ═══════════════════════════════════════════════════════════
   1 · HERO
   ═══════════════════════════════════════════════════════════ */

.sm-shop-hero {
  position: relative;
  overflow: hidden;
}

.sm-shop-hero__media {
  position: relative;
  aspect-ratio: 3 / 2;
  overflow: hidden;
}
.sm-shop-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 18% center;
  display: block;
  will-change: transform;
}

.sm-shop-hero__inner {
  position: relative;
  z-index: 2;
  max-width: var(--max-content);
  margin-inline: auto;
  padding: clamp(36px, 7vw, 64px) var(--gutter) var(--section-y);
}
.sm-shop-hero__copy { max-width: 560px; }
/* Volle Textfarbe statt der gedämpften: auf einem Foto trägt ink-70
   nicht, auch nicht unter einem Schleier. */
.sm-shop-hero__copy .sm-lead { color: var(--text-body); }
/* Nur am Handy. Zwei Blindvergleiche widersprachen sich: am Desktop hat
   der Hero an Textebenen verloren, am Handy hat er wegen genau dieser
   Chips gewonnen — dort tragen sie das Angebot über die Falte. */
.sm-shop-hero__pills { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; }
@media (min-width: 860px) { .sm-shop-hero__pills { display: none; } }
/* Etwas kleiner als das Display der Startseite: die Zeile ist länger und
   muss neben dem Bild in zwei Zeilen passen, nicht in vier. */
.sm-shop-hero__title {
  font-size: clamp(2.4rem, 4.4vw, 3.6rem);
  margin-bottom: 14px;
}
.sm-shop-hero__title .sm-line { display: block; }
.sm-shop-hero__title em {
  font-style: italic;
  color: var(--accent-strong);
}
.sm-shop-hero__actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 28px;
}
/* Ein Blindvergleich gegen susannekaufmann.com hat den Hero verloren:
   sechs Textebenen im ersten Bildschirm gegen zwei großzügige Bilder.
   Geblieben sind Überschrift, ein Satz, ein Knopf und die Zeile, die
   die Hürde entschärft. Alles andere steht jetzt weiter unten. */
.sm-shop-hero__note {
  margin: 16px 0 0;
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--accent-strong);
}

/* From tablet up the hero becomes one cinematic band: the still fills the
   section and a cream veil opens on the right, exactly where the photo
   was composed empty. */
@media (min-width: 860px) {
  .sm-shop-hero {
    display: flex;
    align-items: center;
    min-height: min(84vh, 760px);
  }
  .sm-shop-hero__media {
    position: absolute;
    inset: 0;
    aspect-ratio: auto;
  }
  .sm-shop-hero__media img { object-position: 12% center; }
  .sm-shop-hero__media::after {
    content: '';
    position: absolute;
    inset: 0;
    /* Deckt früher und dichter als zuvor: der Vorspann maß gegen die
       dunkelsten Bildpunkte 2,74:1 und war die schwächste Schrift an der
       wichtigsten Stelle. Die Dose steht links von 30 %, das Motiv
       verliert nichts. */
    background: linear-gradient(
      100deg,
      rgba(247, 239, 233, 0) 26%,
      rgba(247, 239, 233, .82) 42%,
      rgba(247, 239, 233, .97) 54%,
      var(--cream) 68%
    );
  }
  /* Weniger Polster als in den übrigen Abschnitten: die Bandhöhe soll
     nahe an der Eigenhöhe des Bildes bleiben, sonst wird das Motiv
     hochskaliert und verliert seine Luft. */
  .sm-shop-hero__inner {
    width: 100%;
    padding-block: clamp(44px, 5vw, 80px);
  }
  .sm-shop-hero__copy {
    margin-left: auto;
    max-width: 540px;
  }
}

@media (min-width: 1240px) {
  .sm-shop-hero__copy { max-width: 580px; }
}

/* ═══════════════════════════════════════════════════════════
   2 · DREI WELTEN
   ═══════════════════════════════════════════════════════════ */

/* Drei Welten, drei Zeilen — keine Kartenreihe.
   Vorher standen sie als drei gleiche Wasch-Kästen nebeneinander, mit
   exakt derselben Box, denselben Füllungen und demselben Raster wie die
   Ablauf-Schritte 700 px weiter oben: zweimal dasselbe Bauteil auf einer
   Seite, und dazu Pastell als Kartenfüllung statt als Fläche, was gegen
   die eigene Regel läuft. Jetzt bekommt jede Welt eine eigene Zeile über
   die ganze Breite, mit Haarlinie statt Kasten, asymmetrisch geteilt und
   von Zeile zu Zeile gespiegelt. */
.sm-worlds {
  margin-top: clamp(36px, 4vw, 56px);
  border-top: 1px solid var(--hairline);
}

.sm-world {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 6fr);
  align-items: center;
  gap: clamp(20px, 3vw, 48px);
  padding-block: clamp(24px, 3vw, 40px);
  border-bottom: 1px solid var(--hairline);
  color: inherit;
  text-decoration: none;
}

/* Gespiegelt, damit aus drei Zeilen ein Rhythmus wird und keine Liste.
   Die Spalten werden ausdrücklich zugewiesen: mit `order` allein rutschen
   die Kinder nur in der Reihenfolge weiter und landen in den falschen
   Spuren — der Text lief dann einwortig aus dem Bild. */
.sm-world__body  { grid-column: 1; grid-row: 1; }
.sm-world__media { grid-column: 2; grid-row: 1; }

.sm-world:nth-child(even) { grid-template-columns: minmax(0, 6fr) minmax(0, 4fr); }
.sm-world:nth-child(even) .sm-world__media { grid-column: 1; grid-row: 1; }
.sm-world:nth-child(even) .sm-world__body  { grid-column: 2; grid-row: 1; }


.sm-world__body { display: block; }
.sm-world__title {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 2.8vw, 2.1rem);
  line-height: 1.15;
  letter-spacing: -0.018em;
  color: var(--text-heading);
  margin-bottom: 10px;
}
.sm-world__text {
  display: block;
  max-width: 46ch;
  color: var(--text-muted);
  line-height: 1.7;
  text-wrap: pretty;
}
.sm-world__go {
  display: inline-block;
  margin-top: 14px;
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent);
}
.sm-world:hover .sm-world__go { color: var(--burgundy); }

.sm-world__media {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--radius-lg);
  aspect-ratio: 21 / 9;
  background: var(--cream-deep);
}
.sm-world__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 640ms var(--ease-soft);
}
.sm-world:hover .sm-world__media img { transform: scale(1.03); }

@media (max-width: 899px) {
  /* Am Handy fällt die Nummernspalte weg und das Bild geht nach oben:
     erst sehen, dann lesen. */
  .sm-world,
  .sm-world:nth-child(even) { grid-template-columns: 1fr; gap: 16px; }
  .sm-world__body,
  .sm-world:nth-child(even) .sm-world__body { grid-column: 1; grid-row: 2; }
  .sm-world__media,
  .sm-world:nth-child(even) .sm-world__media { grid-column: 1; grid-row: 1; }
  .sm-world__text { max-width: none; }
  .sm-world__media { aspect-ratio: 16 / 9; }
}

/* The three worlds are links into the page, so they carry no link
   colour of their own — the card is the affordance. */
a.sm-world { color: inherit; text-decoration: none; }
a.sm-world:hover { color: inherit; }
.sm-world__count { transition: color var(--dur-base) var(--ease-soft); }
a.sm-world:hover .sm-world__count { color: var(--mauve); }

/* ═══════════════════════════════════════════════════════════
   2b · FAKTEN-BAND (Cosmoterra einordnen)
   ═══════════════════════════════════════════════════════════ */

/* Aus vier Faktenzellen wurde ein Absatz. Die Zellen sagten nichts, was
   ein Satz nicht auch sagt, und sie waren die dritte gleich aussehende
   Vierergruppe auf derselben Seite. */
.sm-facts-line {
  margin: clamp(26px, 3.4vw, 38px) auto 0;
  max-width: 56ch;
  /* Eine Stufe unter dem Vorspann: der Absatz ergänzt ihn, er steht
     nicht gleichrangig daneben. */
  font-size: var(--fs-small);
  line-height: 1.75;
  text-align: center;
  text-wrap: pretty;
}

/* ═══════════════════════════════════════════════════════════
   2c · DIE DOSE — Vollbild-Szene am Scrollrad
   Grundzustand ist eine ganz normale, lesbare Sektion. Erst wenn
   JS, Breite und Bewegungsvorliebe zusammenpassen, setzt shop.js
   `is-cinema` und daraus wird die bildschirmfüllende Szene.
   Die Frames sind seitlich verbreitert (tinw/), damit ein Cover-
   Zuschnitt weder Dose noch Pulverwolke beschneidet — und damit
   rechts eine ruhige Fläche für den Text bleibt. Kein Verlaufs-
   schleier: der Text sitzt dort, wo das Foto ohnehin still ist.
   ═══════════════════════════════════════════════════════════ */

.sm-tin__viewport { position: relative; }
.sm-tin__canvas,
.sm-tin__poster { display: none; }
.sm-tin__still {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
}
.sm-tin__copy { margin-top: clamp(28px, 4vw, 44px); }
.sm-tin__beat + .sm-tin__beat { margin-top: clamp(32px, 4vw, 48px); }

/* ── Die Szene ─────────────────────────────────────────── */

.sm-tin.is-cinema .sm-tin__scroll { height: 300vh; }
.sm-tin.is-cinema .sm-tin__viewport {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  display: grid;
  align-items: center;
}
.sm-tin.is-cinema .sm-tin__canvas,
.sm-tin.is-cinema .sm-tin__poster {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 30% center;
  border-radius: 0;
}
.sm-tin.is-cinema .sm-tin__canvas { opacity: 0; transition: opacity var(--dur-fast) var(--ease-soft); }
.sm-tin.is-cinema.is-scrubbing .sm-tin__canvas { opacity: 1; }
.sm-tin.is-cinema.is-scrubbing .sm-tin__poster { opacity: 0; }
.sm-tin.is-cinema .sm-tin__still { display: none; }

/* Der Text sitzt in der rechten Hälfte, auf der ruhigen Sandfläche
   des Fotos. Dunkles Plum darauf misst über 8:1. */
.sm-tin.is-cinema .sm-tin__copy {
  position: relative;
  z-index: 2;
  margin: 0 0 0 auto;
  width: min(46%, 560px);
  padding-inline: clamp(20px, 3vw, 40px) 0;
  display: grid;
}
.sm-tin.is-cinema .sm-tin__beat {
  grid-area: 1 / 1;
  margin: 0;
}
.sm-tin.is-cinema .sm-tin__grid {
  display: block;
  max-width: var(--max-content);
  margin-inline: auto;
  padding-inline: var(--gutter);
  width: 100%;
}

/* Ein leiser Fortschrittsbalken am unteren Rand: er verrät, dass hier
   gescrollt und nicht gewartet wird. */
.sm-tin__progress {
  display: none;
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: rgba(58, 42, 51, .14);
  z-index: 3;
}
.sm-tin.is-cinema .sm-tin__progress { display: block; }
.sm-tin__progress span {
  display: block;
  height: 100%;
  width: 0;
  background: var(--accent);
  transform-origin: left center;
}

/* ── Der hohe Zuschnitt: dieselbe Szene am Handy ────────────
   Quer liegende Frames taugen im Hochformat nichts — ein Cover-
   Zuschnitt würde die Dose seitlich abschneiden. Deshalb der
   hochkante Bildsatz (tinm/), oben im Bild, Text darunter statt
   darüber. Kein Schleier: Bild und Text teilen sich die Fläche,
   sie überlagern sich nicht. */
.sm-tin.is-cinema.is-hoch .sm-tin__scroll { height: 280vh; }
.sm-tin.is-cinema.is-hoch .sm-tin__viewport {
  display: grid;
  grid-template-rows: minmax(30svh, 1fr) auto;
  align-items: stretch;
}
.sm-tin.is-cinema.is-hoch .sm-tin__canvas,
.sm-tin.is-cinema.is-hoch .sm-tin__poster {
  position: static;
  grid-area: 1 / 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Nach unten gewichtet: Eine Wolke, die oben aus dem Bild steigt,
     wirkt richtig — eine Dose ohne Fuß wirkt kaputt. */
  object-position: center 68%;
}
.sm-tin.is-cinema.is-hoch .sm-tin__grid {
  grid-area: 2 / 1;
  display: grid;
  align-items: start;
  min-height: 0;
  padding: clamp(18px, 4.5vw, 28px) var(--gutter) clamp(20px, 4vw, 28px);
}
.sm-tin.is-cinema.is-hoch .sm-tin__copy {
  width: 100%;
  max-width: none;
  margin: 0;
  padding-inline: 0;
}
.sm-tin.is-cinema.is-hoch .sm-tin__viewport::after { content: none; }

/* Am Handy teilen sich Bild und Text einen Bildschirm. Jede Zeile, die
   der Text spart, bekommt das Bild — deshalb hier eine Stufe kleiner und
   enger als auf dem Schreibtisch, aber nicht kleiner als lesbar. */
.sm-tin.is-cinema.is-hoch .sm-tin__beat h2 {
  font-size: clamp(24px, 6.4vw, 30px);
  margin-bottom: 10px;
}
.sm-tin.is-cinema.is-hoch .sm-tin__beat .sm-eyebrow { margin-bottom: 8px; }
.sm-tin.is-cinema.is-hoch .sm-tin__beat .sm-lead { font-size: 15px; line-height: 1.55; }
.sm-tin.is-cinema.is-hoch .sm-tin__claims-intro { margin-bottom: 10px; }
.sm-tin.is-cinema.is-hoch .sm-tin__claims { gap: 6px; }
.sm-tin.is-cinema.is-hoch .sm-tin__claims li { font-size: var(--fs-caption); line-height: 1.45; }
.sm-tin.is-cinema.is-hoch .sm-tin__line { margin-bottom: 14px; line-height: 1.6; max-width: none; }
.sm-tin.is-cinema.is-hoch .sm-note { margin-top: 12px; font-size: var(--fs-label); line-height: 1.45; }
.sm-tin.is-cinema.is-hoch /* Eine Zeile statt vier Zellen: dieselben vier Angaben, aber ohne die
   Tabellenform, die auf dieser Seite schon zweimal woanders steht. */
.sm-tin__line {
  margin: 0 0 clamp(18px, 2vw, 26px);
  font-size: var(--fs-caption);
  line-height: 1.75;
  color: var(--text-muted);
  max-width: 54ch;
  text-wrap: pretty;
}
/* Zweispaltig: bei einer Handvoll Produkten liest sich eine Auslage
   besser als ein Katalog. Diese Regel war beim Auflösen der Faktenzellen
   versehentlich mitgelöscht worden — ohne sie stapelten die Karten
   einspaltig und die Seite wuchs um sechs Bildschirme. */
.sm-shelf {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(26px, 3vw, 40px);
  margin-top: 48px;
}
@media (max-width: 619px) {
  .sm-shelf { grid-template-columns: 1fr; }
  /* Einspaltig gestapelt sind vier Hochformate hintereinander zu viel
     Weg für vier Produkte. Quer zeigt dasselbe Motiv.
     Zwei Klassen tief, weil diese Media-Query im Dokument vor der
     Grundregel steht und sonst überschrieben würde. */
  .sm-shelf .sm-prod__frame { aspect-ratio: 3 / 2; }
}

.sm-prod {
  position: relative;
  display: flex;
  flex-direction: column;
  transition: transform var(--dur-base) var(--ease-soft);
}
.sm-prod:hover { transform: translateY(-4px); }

/* Frame + aura: the glow only wakes on hover, so a still page stays calm. */
.sm-prod__frame {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  aspect-ratio: 4 / 5;
  background: var(--cream-deep);
}
.sm-prod__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 1.1s var(--ease-soft);
}
/* Kein Zoom beim Hover: 1,045 auf einem 605px hohen Bild sind 13,6px
   Wachstum pro Seite — das Dreieinhalbfache dessen, was das
   Designsystem erlaubt. Seed zoomt ebenfalls nicht. */
.sm-prod:hover .sm-prod__frame img { transform: none; }

.sm-prod__aura {
  position: absolute;
  inset: 8% 6% 2%;
  border-radius: 50%;
  filter: blur(38px);
  opacity: 0;
  z-index: -1;
  pointer-events: none;
  transition: opacity var(--dur-slow) var(--ease-soft);
}
.sm-prod:hover .sm-prod__aura { opacity: .62; }
.sm-prod__aura--blush  { background: var(--blush); }
.sm-prod__aura--powder { background: var(--powder-blue); }
.sm-prod__aura--sage   { background: var(--sage); }

.sm-prod__badge {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: var(--radius-pill);
  background: var(--white);
  font-size: var(--fs-caption);
  font-weight: 700;
  color: var(--accent-strong);
  box-shadow: var(--shadow-xs);
}

/* Ein Blindvergleich hat die Karten verloren: unter dem Bild stapelten
   sich Kategorie, Titel, Text, Trennlinie, Preis, Knopf und Fußnote zu
   sieben Ebenen. Jetzt Titel, Preis, eine kleine Metazeile, Text, Knopf
   — und keine Linie mehr, die den Block zerschneidet. */
.sm-prod__body { padding: 20px 4px 0; display: flex; flex-direction: column; flex: 1; }
.sm-prod h3 { font-size: 1.45rem; margin-bottom: 4px; }
.sm-prod__for {
  margin: 12px 0 0;
  color: var(--text-muted);
  font-size: var(--fs-small);
  line-height: 1.7;
  flex: 1;
}

/* Der Preis sitzt jetzt direkt unter dem Titel, wie auf der Latte, statt
   im Fuß mit dem Knopf um dieselbe Zeile zu kämpfen. */
.sm-prod__price {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.35rem;
  line-height: 1.1;
  color: var(--accent-strong);
}
.sm-prod__size {
  margin: 7px 0 0;
  font-family: var(--font-body);
  /* Specimen-Stimme: Menge und Grundpreis tragen den Laborzettel-Ton
     aus DESIGN.md, sonst gehen sie als vierte Fließtextzeile unter. */
  font-size: var(--fs-label);
  font-weight: 500;
  line-height: 1.6;
  color: var(--text-muted);
}
/* Ein echter Knopf, kein Textlink: auf einer Seite, deren einziges Ziel
   die Anfrage ist, darf die Handlung nicht leiser sein als der Preis.
   Mindestens 44px hoch, damit sie am Handy zu treffen ist. */
.sm-prod__ask {
  align-self: flex-start;
  margin-top: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 20px;
  border: 1px solid var(--burgundy);
  border-radius: var(--radius-pill);
  font-weight: 700;
  font-size: var(--fs-small);
  color: var(--burgundy);
  white-space: nowrap;
  transition:
    background-color var(--dur-base) var(--ease-soft),
    transform var(--dur-base) var(--ease-soft);
}
.sm-prod__ask:hover {
  background: var(--blush-wash);
  color: var(--burgundy);
  transform: translateY(-2px);
}
.sm-prod__ask::after {
  content: '→';
  display: inline-block;
  margin-left: 6px;
  transition: transform var(--dur-base) var(--ease-soft);
}

/* Symbolbild-Hinweis: die Motive sind gestaltet, nicht fotografiert.
   Das gehört an die Karte, nicht nur ins Kleingedruckte. */
.sm-prod__symbol {
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 2;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  background: var(--white);
  font-size: var(--fs-label);
  letter-spacing: .04em;
  color: var(--ink-70);
}
.sm-prod:hover .sm-prod__ask::after { transform: translateX(4px); }

/* Lead product: the set gets the full row and reads horizontally. */
.sm-prod--lead {
  grid-column: 1 / -1;
  flex-direction: row;
  align-items: stretch;
  gap: clamp(24px, 4vw, 48px);
  background: var(--blush-wash);
  border-radius: var(--radius-lg);
  padding: clamp(20px, 2.4vw, 28px);
}
.sm-prod--lead .sm-prod__frame {
  flex: 0 0 clamp(300px, 42%, 460px);
  aspect-ratio: auto;
  min-height: 340px;
  border-radius: var(--radius-lg);
}
.sm-prod--lead .sm-prod__body {
  flex: 1 1 320px;
  justify-content: center;
  padding: clamp(8px, 2vw, 24px) clamp(4px, 2vw, 20px) clamp(8px, 2vw, 24px) 0;
}
/* Muss unter der H2 des Abschnitts bleiben (36px). Vorher 38,4px —
   eine H3, die größer rendert als die Überschrift darüber. */
.sm-prod--lead h3 { font-size: clamp(1.6rem, 2.4vw, 2rem); }
.sm-prod--lead .sm-prod__for { flex: 0 1 auto; font-size: var(--fs-body); max-width: 46ch; }
.sm-prod--lead .sm-prod__foot { border-top-color: rgba(58, 42, 51, .12); max-width: 46ch; }
.sm-prod--lead .sm-prod__price { font-size: 2rem; }
@media (max-width: 819px) {
  .sm-prod--lead { flex-direction: column; }
  /* min-height plus an aspect ratio would drive the width past the
     viewport once the card stacks, so both are released here. */
  .sm-prod--lead .sm-prod__frame {
    flex: none;
    width: 100%;
    min-height: 0;
    aspect-ratio: 4 / 3;
  }
  .sm-prod--lead .sm-prod__body { padding: 4px 4px 8px; }
}

/* On the blush section the lead card needs paper instead of blush-wash. */
.sm-prod--paper { background: var(--white); margin-top: clamp(26px, 3vw, 40px); }

.sm-shelf-note {
  margin-top: 40px;
  text-align: center;
  font-size: var(--fs-small);
  color: var(--text-muted);
}

/* ── Programme: a price list, not a gallery ─────────────── */

.sm-programme {
  margin-top: clamp(48px, 6vw, 76px);
  background: var(--surface-card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  padding: clamp(28px, 4vw, 48px);
}
.sm-programme__head { max-width: 58ch; }
.sm-programme__head h3 { font-size: 1.5rem; margin-bottom: 10px; }
.sm-programme__head p { color: var(--text-muted); line-height: 1.7; margin: 0; }

.sm-programme__list {
  margin: clamp(24px, 3vw, 34px) 0 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0 clamp(24px, 4vw, 56px);
}
@media (max-width: 599px) { .sm-programme__list { grid-template-columns: 1fr; } }
.sm-programme__list > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 0;
  border-bottom: 1px solid var(--border-soft);
}
.sm-programme__list dt { font-weight: 600; color: var(--plum-ink); }
.sm-programme__list dd {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.15rem;
  color: var(--accent-strong);
  white-space: nowrap;
}
.sm-programme__foot {
  margin-top: 26px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}
.sm-programme__note {
  margin: 0;
  flex: 1 1 32ch;
  max-width: 56ch;
  font-size: var(--fs-small);
  line-height: 1.7;
  color: var(--text-muted);
  text-wrap: pretty;
}

/* Ein Blindvergleich hat die Typografie verloren: Vorspann und Kartentext
   unterschieden sich nur durch die Farbe, nicht durch die Größe. Der
   Vorspann ist jetzt eine echte Stufe — größer, dunkler, auf festem Maß,
   damit die zweite Zeile nicht auf drei Viertel abbricht. */
.sm-section .sm-lead, .sm-band .sm-lead {
  font-size: clamp(1.375rem, 1.8vw, 1.5rem);
  line-height: 1.5;
  color: var(--plum-ink);
  /* Lesemaß, nachgemessen statt geschätzt: die ch-Einheit rechnet mit der
     Breite der Null, echte Buchstaben sind schmaler — 64ch ergaben 90
     Zeichen pro Zeile. 46ch landen bei rund 66. */
  max-width: 52ch;
  text-wrap: pretty;
}
/* Zentrierte Vorspänne laufen über drei Zeilen und enden sonst mit einem
   Zweiwort-Rest in der Mitte — hier ist `balance` genau richtig, beim
   linksbündigen Fließtext war es falsch. */
.sm-section .sm-intro--center .sm-lead, .sm-band .sm-intro--center .sm-lead {
  max-width: 50ch;
  text-wrap: balance;
}

/* ═══════════════════════════════════════════════════════════
   4 · RITUAL — the scroll moment
   ═══════════════════════════════════════════════════════════ */

.sm-ritual__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 6vw, 80px);
  align-items: start;
  margin-top: 48px;
}
@media (max-width: 899px) { .sm-ritual__grid { grid-template-columns: 1fr; } }

/* Portrait on desktop: the sticky film should hold the column while the
   three steps pass, so it is cropped tall from the 3:2 master. */
.sm-ritual__stage {
  position: sticky;
  top: 108px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  aspect-ratio: 4 / 5;
  background: var(--cream-deep);
}
@media (max-width: 899px) {
  .sm-ritual__stage { aspect-ratio: 3 / 2; }
}
.sm-ritual__stage video,
.sm-ritual__stage img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
@media (max-width: 899px) {
  .sm-ritual__stage { position: static; }
}

.sm-ritual__steps {
  --step-gap: clamp(48px, 9vw, 104px);
  display: flex;
  flex-direction: column;
  gap: var(--step-gap);
  padding-block: clamp(8px, 4vw, 48px);
}
.sm-ritual__step { position: relative; padding-left: 62px; }
.sm-ritual__step::before {
  content: attr(data-num);
  position: absolute;
  left: 0;
  top: -2px;
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--accent);
  line-height: 1;
}
/* A hairline rail carries the eye from one number down to the next. */
.sm-ritual__step::after {
  content: '';
  position: absolute;
  left: 11px;
  top: 34px;
  bottom: calc(var(--step-gap) * -1);
  width: 1px;
  background: var(--hairline);
}
.sm-ritual__step:last-of-type::after { display: none; }
.sm-ritual__step h3 { font-size: 1.5rem; margin-bottom: 10px; }
.sm-ritual__step p {
  margin: 0;
  color: var(--text-muted);
  line-height: 1.75;
  max-width: 42ch;
}
.sm-ritual__closing {
  margin: clamp(40px, 6vw, 72px) 0 0 62px;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.35rem;
  line-height: 1.5;
  color: var(--accent-strong);
  max-width: 32ch;
}
@media (max-width: 899px) {
  .sm-ritual__step { padding-left: 48px; }
  .sm-ritual__closing { margin-left: 48px; }
}

/* ═══════════════════════════════════════════════════════════
   5 · KEIN WARENKORB
   ═══════════════════════════════════════════════════════════ */

.sm-nocart__head { max-width: 640px; }
.sm-nocart__head .sm-lead { max-width: 60ch; }

/* Der Ablauf trägt hier keine Kastenfarbe mehr — er ist eine Linie mit
   drei Halten (siehe style.css). Bleibt nur der Umbruch. */
.sm-step p { text-wrap: pretty; }

/* ═══════════════════════════════════════════════════════════
   6 · BÜCHER
   ═══════════════════════════════════════════════════════════ */

.sm-books__grid {
  display: grid;
  grid-template-columns: 0.85fr 1fr;
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
  margin-top: 44px;
}
@media (max-width: 899px) { .sm-books__grid { grid-template-columns: 1fr; } }

.sm-books__media {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  aspect-ratio: 4 / 5;
  align-self: start;
}
.sm-books__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

.sm-books__list { display: flex; flex-direction: column; gap: 20px; }

.sm-book {
  background: var(--surface-card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 28px clamp(24px, 3vw, 34px);
  transition: transform var(--dur-base) var(--ease-soft), box-shadow var(--dur-base) var(--ease-soft);
}
.sm-book:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.sm-book__cat {
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 8px;
}
.sm-book h3 { font-size: 1.45rem; margin-bottom: 8px; }
.sm-book p { margin: 0; color: var(--text-muted); font-size: var(--fs-small); line-height: 1.75; }
/* Preis und Umfang links, der Ausgang rechts — dieselbe Ordnung wie auf
   den Produktkarten, damit die Seite eine Handbewegung behält. */
.sm-book__foot {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--border-soft);
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  column-gap: 16px;
  row-gap: 4px;
}
.sm-book__price {
  grid-column: 1;
  font-family: var(--font-display);
  font-size: 1.35rem;
  color: var(--plum-ink);
}
.sm-book__meta {
  grid-column: 1;
  font-size: var(--fs-label);
  font-weight: 500;
  color: var(--text-muted);
}
.sm-book__foot .sm-prod__ask { grid-column: 2; grid-row: 1 / span 2; }

.sm-books__note {
  margin-top: 26px;
  font-size: var(--fs-small);
  color: var(--text-muted);
}

/* ═══════════════════════════════════════════════════════════
   7 · KONTAKT — white card in place of the front page's form
   ═══════════════════════════════════════════════════════════ */

.sm-shop-cta {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: clamp(24px, 3vw, 36px);
}
.sm-shop-cta h3 { font-size: 1.5rem; margin-bottom: 10px; }
.sm-shop-cta > p {
  color: var(--text-muted);
  line-height: 1.7;
  margin-bottom: 22px;
}
.sm-shop-cta__note {
  margin: 18px 0 0;
  font-size: var(--fs-caption);
  color: var(--text-muted);
}

/* Die Zeile über dem Formular, die zeigt, woher jemand kam. */
.sm-form__produkt {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 12px 16px;
  border-radius: var(--radius-lg);
  background: var(--blush-wash);
  font-size: var(--fs-small);
  color: var(--plum-ink);
}
.sm-form__produkt[hidden] { display: none; }
.sm-form__produkt-label {
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--accent);
}
.sm-form__produkt [data-sm-produkt-text] { font-weight: 600; }
.sm-form__produkt-clear {
  margin-left: auto;
  border: 0;
  background: none;
  padding: 6px;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: var(--fs-caption);
  color: var(--text-muted);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.sm-form__produkt-clear:hover { color: var(--burgundy); }

/* Was nach dem Absenden passiert — die Fragen, die vor einer Anfrage
   im Kopf sind, gehören neben den Knopf und nicht ins Impressum. */
.sm-trust {
  margin-top: clamp(40px, 5vw, 64px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 20px 32px;
}
.sm-trust div {
  padding-left: 26px;
  position: relative;
  font-size: var(--fs-small);
  line-height: 1.7;
  color: var(--text-muted);
}
.sm-trust div::before {
  content: '✦';
  position: absolute;
  left: 0;
  top: 1px;
  color: var(--accent-soft);
}
.sm-trust strong { color: var(--plum-ink); display: block; }

/* Ein Hinweis, der zum Abschnitt gehört statt ans Seitenende. */
.sm-note {
  margin: clamp(28px, 4vw, 40px) 0 0;
  font-size: var(--fs-caption);
  line-height: 1.7;
  color: var(--text-muted);
  max-width: 58ch;
  text-wrap: pretty;
}

/* Sabine im Beratungs-Abschnitt: Blob, wie es das Designsystem für
   ihre Porträts vorsieht. */
.sm-nocart {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
@media (max-width: 899px) {
  .sm-nocart { grid-template-columns: 1fr; justify-items: start; }
}
.sm-nocart__portrait { width: min(70vw, 300px); aspect-ratio: 1; }
.sm-nocart__sig {
  margin: 20px 0 0;
  font-size: var(--fs-small);
  line-height: 1.75;
  color: var(--text-muted);
  max-width: 52ch;
}

/* ═══════════════════════════════════════════════════════════
   8 · FEINGEDRUCKTES
   ═══════════════════════════════════════════════════════════ */

.sm-finelines {
  border-top: 1px solid var(--border-soft);
  padding-block: 40px;
}
.sm-finelines__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px 40px;
}
.sm-finelines p {
  margin: 0;
  font-size: var(--fs-caption);
  line-height: 1.7;
  color: var(--text-muted);
}
.sm-finelines strong { color: var(--plum-ink); font-weight: 700; }

/* ═══════════════════════════════════════════════════════════
   9 · MOTION GUARDS
   ═══════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  /* Der Knopf fehlte hier und sprang deshalb auch bei reduzierter
     Bewegung noch 2px — gemessen im Blindtest. Jetzt steht wirklich
     alles still, was sich sonst bewegt. */
  .sm-prod,
  .sm-prod__frame img,
  .sm-world,
  .sm-book,
  .sm-prod__ask,
  .sm-btn,
  .sm-prod__ask::after {
    transition: none !important;
    transform: none !important;
  }
  .sm-shop-hero__media img { transform: none !important; }
}

/* ═══════════════════════════════════════════════════════════
   10 · AUF DER DUNKLEN FLÄCHE
   Aus dem Seed-Vergleich: Produktkarten sitzen direkt auf dem
   Farbfeld — kein Behälter, keine Kante, kein Schatten. Alles hier
   gilt nur innerhalb von .sm-band--ink.
   ═══════════════════════════════════════════════════════════ */


/* Die Karte selbst verschwindet: nur Bild, Name, Preis, Zeile, Knopf. */
.sm-band--ink .sm-prod__frame { box-shadow: none; background: rgba(247, 239, 233, .06); }
.sm-band--ink .sm-prod h3 { color: var(--cream); }
.sm-band--ink .sm-prod__price { color: var(--blush); }
.sm-band--ink .sm-prod__size { color: rgba(247, 239, 233, .58); }
.sm-band--ink .sm-prod__for { color: rgba(247, 239, 233, .74); }
.sm-band--ink .sm-facts-line { color: rgba(247, 239, 233, .82); }

.sm-band--ink .sm-prod__ask {
  border-color: rgba(247, 239, 233, .55);
  color: var(--cream);
}
.sm-band--ink .sm-prod__ask:hover {
  background: rgba(247, 239, 233, .12);
  color: var(--cream);
}
.sm-band--ink .sm-prod__aura { display: none; }

/* Die Programmliste wird zur Spezifikationstabelle statt zur Karte. */
.sm-band--ink .sm-programme {
  background: transparent;
  border: 0;
  border-top: 1px solid rgba(247, 239, 233, .18);
  border-radius: 0;
  padding: clamp(28px, 3vw, 40px) 0 0;
}
.sm-band--ink .sm-programme__head h3 { color: var(--cream); }
.sm-band--ink .sm-programme__head p,
.sm-band--ink .sm-programme__note { color: rgba(247, 239, 233, .72); }
.sm-band--ink .sm-programme__list > div { border-bottom-color: rgba(247, 239, 233, .18); }
.sm-band--ink .sm-programme__list dt { color: var(--cream); font-weight: 400; }
.sm-band--ink .sm-programme__list dd { color: var(--blush); }
.sm-band--ink .sm-shelf-note { color: rgba(247, 239, 233, .68); }

/* Kontakt: das Band ist jetzt selbst die dunkle Fläche, der frühere
   gerundete Kasten darin entfällt ersatzlos. */
.sm-band--ink .sm-kontakt__wrap { max-width: var(--max-content); }
@media (max-width: 859px) {
  /* Die Introspalte wird aufgelöst, damit ihre Kinder eigene
     Flex-Elemente werden und sich einzeln einsortieren lassen. So steht
     die Anrede vor dem Formular und der lange Vorspann dahinter — der
     Sprung aus einer Produktkarte landet trotzdem nah an der
     Anfragezeile, weil nur drei kurze Zeilen davor stehen. */
  .sm-kontakt__grid { flex-direction: column; gap: 22px; }
  .sm-kontakt__intro { display: contents; }
  .sm-kontakt__intro .sm-logo-icon { order: 1; margin-bottom: 0; }
  .sm-kontakt__title { order: 2; }
  .sm-kontakt__facts { order: 3; }
  .sm-kontakt__formcol { order: 4; }
  .sm-kontakt__lead { order: 5; margin-top: 4px; }
}

.sm-band--ink .sm-kontakt__panel {
  background: transparent;
  border-radius: 0;
  padding: 0;
}
.sm-band--ink .sm-trust div { color: rgba(247, 239, 233, .72); }
.sm-band--ink .sm-trust strong { color: var(--cream); }
.sm-band--ink .sm-trust div::before { color: var(--blush); }

/* Das Formular bleibt eine helle Fläche — der einzige Ort, an dem auf
   dem dunklen Band bewusst ein Feld steht, weil dort getippt wird. */
.sm-band--ink .sm-form {
  background: var(--cream);
  border-radius: var(--radius-lg);
}

/* Spezifitätskorrektur: die Lead-Regel oben setzt Plum-Ink und steht in
   derselben Datei — auf dem dunklen Band muss sie überschrieben werden,
   sonst steht dunkler Text auf dunklem Grund. */
.sm-band--ink .sm-lead,
.sm-band--ink .sm-intro--center .sm-lead {
  color: rgba(247, 239, 233, .80);
}
.sm-band--ink .sm-eyebrow { color: var(--blush); }

/* Das Badge lag mit halbtransparentem Creme auf hellen Produktfotos und
   war praktisch unlesbar. Auf dem dunklen Band wird es zur klaren
   Specimen-Kontur statt zu einem Nebelfleck. */
.sm-band--ink .sm-prod__badge {
  background: var(--plum-ink);
  color: var(--cream);
  font-weight: 600;
  letter-spacing: .04em;
}

/* Specimen-Stimme für die Mengenzeile. Der System-Kritiker hat zu Recht
   beanstandet, dass Menge und Grundpreis als vierte Fließtextzeile
   untergingen — sie tragen jetzt den Laborzettel-Ton aus DESIGN.md. */
.sm-tin__buy .sm-prod__size { line-height: 1.7; }

/* Der sekundäre Knopf blieb auf dem Ink-Band burgunderrot — 2,17:1 gegen
   Plum-Ink, faktisch unlesbar. Auf dunklem Grund trägt er dieselbe
   Cremekontur wie die Anfrage-Knöpfe daneben. */
.sm-band--ink .sm-btn--secondary {
  border-color: rgba(247, 239, 233, .55);
  color: var(--cream);
}
.sm-band--ink .sm-btn--secondary:hover {
  background: rgba(247, 239, 233, .12);
  color: var(--cream);
}

/* Der Knopf sitzt in einer Karte, die beim Hover bereits 4px hebt. Sein
   eigener 2px-Hub addierte sich darauf zu 6px — über der Obergrenze des
   Designsystems. Innerhalb einer Karte trägt die Karte die Bewegung. */
.sm-prod .sm-prod__ask:hover,
.sm-prod:hover .sm-prod__ask {
  transform: none;
}

/* ═══════════════════════════════════════════════════════════
   11 · DIE LAUFENDE REIHE
   Aus Seeds Mitschnitt übernommen: eine langsam nach links
   wandernde Endlosreihe. Bei Seed sind es Kundenstimmen — die
   haben wir bewusst nicht. Bei uns trägt dieselbe Mechanik die
   49 Essenztitel: sie zeigt Breite, ohne etwas zu behaupten.
   ═══════════════════════════════════════════════════════════ */

.sm-rail {
  position: relative;
  margin-top: clamp(32px, 4vw, 48px);
  overflow: hidden;
  /* Randlos über die volle Breite, auch wenn der Abschnitt einen
     Container hat — die Reihe soll aus dem Bild laufen. */
  width: 100vw;
  margin-left: 50%;
  transform: translateX(-50%);
  /* An beiden Enden ausblenden statt hart abschneiden. */
  isolation: isolate;
}

/* Die weichen Enden. Eine Maske ginge auch, würde aber den Anhalter
   mit ausblenden — sie kennt keine Ausnahmen. Deshalb Verläufe über den
   Tags und unter dem Knopf. Die Farbe ist an das Cremeband gebunden, in
   dem die Reihe steht; wandert sie je auf ein anderes Band, muss sie
   mitwandern. */
.sm-rail::before,
.sm-rail::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: clamp(64px, 14vw, 190px);
  z-index: 1;
  pointer-events: none;
}
.sm-rail::before {
  left: 0;
  background: linear-gradient(90deg, var(--cream) 30%, rgba(247, 239, 233, 0));
}
.sm-rail::after {
  right: 0;
  background: linear-gradient(270deg, var(--cream) 10%, rgba(247, 239, 233, 0));
}

.sm-rail__track {
  display: flex;
  width: max-content;
  gap: 12px;
  padding-block: 4px;
  animation: sm-rail-drift 78s linear infinite;
}
.sm-rail:hover .sm-rail__track,
.sm-rail.is-paused .sm-rail__track { animation-play-state: paused; }

/* WCAG 2.2.2, Stufe A: Bewegung über fünf Sekunden braucht einen
   Anhalter. Hover ist keiner — am Handy gibt es ihn nicht. Der Knopf
   sitzt links in der Ausblendzone der Maske, wo ohnehin kein Tag lesbar
   ist, und misst volle 44px. */
.sm-rail__pause {
  position: absolute;
  left: clamp(10px, 2vw, 26px);
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-pill);
  background: var(--white);
  color: var(--accent);
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-soft),
              border-color var(--dur-fast) var(--ease-soft);
}
.sm-rail__pause:hover { color: var(--burgundy); border-color: var(--accent); }

/* Zwei Balken für „läuft, kann angehalten werden", ein Dreieck für
   „steht, kann weiterlaufen". Reine CSS-Formen, kein Icon-Satz. */
.sm-rail__pause-icon {
  width: 12px;
  height: 13px;
  border-left: 3px solid currentColor;
  border-right: 3px solid currentColor;
}
.sm-rail.is-paused .sm-rail__pause-icon {
  width: 0;
  height: 0;
  border: 7px solid transparent;
  border-left: 11px solid currentColor;
  margin-left: 4px;
}

.sm-rail .sm-tag {
  flex: none;
  color: var(--accent);
  border-color: var(--hairline);
  background: var(--white);
  white-space: nowrap;
}
/* Versalien tragen die Nummer, nicht das Thema: „FÜR VERÄNDERUNG UND
   VERWANDLUNG" ist kein Label, sondern ein Satz — und Versalsatz liest
   sich langsamer und lauter, als diese Reihe sein soll. */
.sm-rail .sm-tag { text-transform: none; letter-spacing: 0; font-size: var(--fs-caption); }
.sm-rail .sm-tag b {
  font-weight: 600;
  color: var(--text-muted);
  margin-right: 8px;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: var(--fs-label);
}

/* Zwei identische Listen hintereinander; bei −50% ist die zweite genau
   dort, wo die erste begann — der Sprung ist unsichtbar. */
@keyframes sm-rail-drift {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .sm-rail__track { animation: none; }
  .sm-rail__pause { display: none; }
  /* Ohne Bewegung wäre die Reihe abgeschnitten und sinnlos — dann
     bricht sie stattdessen um und zeigt alles auf einmal. */
  .sm-rail {
    width: auto;
    margin-left: 0;
    transform: none;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .sm-rail__track { flex-wrap: wrap; width: auto; }
  .sm-rail__track [aria-hidden="true"] { display: none; }
}

/* Die Haarlinie der Reihen-Tags lag bei 1,36:1 und war praktisch
   unsichtbar — damit verlor die Pille genau den Laborzettel-Charakter,
   für den sie da ist. Etwas kräftiger, aber weiterhin leise. */
.sm-rail .sm-tag { border-color: var(--ink-45); }

/* Die Szene bringt ihre eigene Höhe mit — das Bandpolster würde oben und
   unten cremefarbene Streifen neben das Vollbild setzen. */
.sm-tin.is-cinema { padding-block: 0; }

/* ── Inhalt der Dosenszene ──────────────────────────────
   Diese Regeln lagen im alten 2c-Block und sind beim Umbau zur
   Vollbild-Szene mit verschwunden. Hier vollständig neu, angepasst
   an den neuen Grund: der Text sitzt jetzt auf einem Foto, nicht
   mehr auf Creme. */

.sm-tin__claims-intro {
  font-weight: 700;
  color: var(--plum-ink);
  margin: 0 0 14px;
}

ul.sm-tin__claims {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
ul.sm-tin__claims li {
  display: flex;
  gap: 12px;
  align-items: baseline;
  line-height: 1.55;
  color: var(--plum-ink);
  text-wrap: pretty;
}
ul.sm-tin__claims li span { color: var(--sage-deep); flex: none; }

/* Der Pflichthinweis lag bei rund 4:1 auf dem Sandton des Fotos.
   Auf Plum-Ink gehoben, dafür kleiner — lesbar, nicht laut. */
.sm-tin .sm-note {
  color: var(--plum-ink);
  opacity: .74;
  font-size: var(--fs-label);
  line-height: 1.6;
  margin-top: 20px;
  max-width: none;
}

.sm-tin__buy {
  margin-top: clamp(24px, 3vw, 34px);
  padding-top: 20px;
  border-top: 1px solid rgba(58, 42, 51, .22);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
}
.sm-tin__buy .sm-prod__price { font-size: 1.9rem; display: block; color: var(--plum-ink); }
.sm-tin__buy .sm-prod__size { display: block; margin-top: 5px; color: var(--plum-ink); opacity: .7; }

/* Mehrere Produkte in der Anfragezeile: jedes als eigener Chip, jedes
   einzeln wieder entfernbar. Vorher hat ein Klick den vorigen ersetzt. */
.sm-form__produkt { align-items: flex-start; }
.sm-form__produkt-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  flex: 1 1 auto;
}
.sm-form__chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 6px 4px 11px;
  border-radius: var(--radius-pill);
  background: var(--white);
  border: 1px solid var(--hairline);
  font-size: var(--fs-caption);
  line-height: 1.35;
  color: var(--plum-ink);
}
.sm-form__chip-kill {
  min-width: 24px;
  min-height: 24px;
  border: 0;
  background: none;
  cursor: pointer;
  padding: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  font-size: 15px;
  line-height: 1;
  color: var(--text-muted);
}
.sm-form__chip-kill:hover { background: var(--blush-wash); color: var(--burgundy); }

/* Der Partnerlink laut Cosmoterra-Anleitung. Er steht bewusst unter dem
   Faktenband und nicht neben dem Beratungsknopf: Wer schon weiß, was er
   will, findet ihn — wer nicht, liest weiter und landet im Gespräch.
   Deshalb Umriss statt Fläche, eine Zeile statt eines Blocks. */
.sm-partnerlink {
  margin-top: clamp(36px, 4vw, 56px);
  padding-top: clamp(24px, 2.5vw, 32px);
  border-top: 1px solid rgba(247, 239, 233, .18);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px 40px;
}
.sm-partnerlink p {
  margin: 0;
  max-width: 52ch;
  font-size: var(--fs-small);
  line-height: 1.7;
  color: rgba(247, 239, 233, .72);
}
.sm-partnerlink .sm-btn { flex: none; }

/* Ein Hinweis an die Redaktion, kein Gestaltungselement — deshalb sieht
   er auch aus wie ein Zettel und nicht wie Inhalt. */
.sm-todo {
  margin-top: 20px;
  padding: 12px 16px;
  border: 1px dashed rgba(247, 239, 233, .3);
  border-radius: var(--radius-sm);
  font-size: var(--fs-caption);
  line-height: 1.6;
  color: rgba(247, 239, 233, .6);
}
.sm-todo code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .92em;
  word-break: break-all;
}

/* ── Der Text auf dem Bild ──────────────────────────────────
   Die Szene ist hell und unruhig, der Text steht mitten darauf.
   Statt eines Kastens ein Schleier, der von der Bildmitte nach
   rechts in den Papierton läuft: die Schrift bekommt ihren Grund,
   die Dose bleibt frei. */
.sm-tin.is-cinema .sm-tin__viewport::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    rgba(247, 239, 233, 0) 52%,
    rgba(247, 239, 233, .5) 60%,
    rgba(247, 239, 233, .88) 68%,
    rgba(247, 239, 233, .94) 100%
  );
}

/* Das Formular sitzt als helle Karte im dunklen Band. Die Umkehrung des
   Bandes („heller Knopf auf dunklem Grund") gilt dort nicht mehr — sonst
   steht Creme auf Creme und der Absenden-Knopf verschwindet. */
.sm-band--ink .sm-kontakt__panel .sm-btn--primary {
  background: var(--burgundy);
  color: var(--cream);
}
.sm-band--ink .sm-kontakt__panel .sm-btn--primary:hover {
  background: var(--plum-ink);
  color: var(--cream);
}