/* ═══════════════════════════════════════════════════════════════════════
   jdmn-card.css — DIE Werk-Card. Eine Quelle für index / artist / model.
   ═══════════════════════════════════════════════════════════════════════

   T521, 16.08.2026. Vorher war die Card dreimal getrennt gebaut, und die
   Kopien waren längst auseinandergelaufen: von 40 gemeinsamen Regeln
   stimmten nur 25 überein, 15 wichen ab — darunter `.card` selbst. Dasselbe
   Werk trug auf der Startseite einen kursiven Serifen-Titel (14 px) und auf
   der Künstlerseite einen normalen 11-px-Titel; Radius 12 gegen 8 px;
   Hintergrund `#181818` fest verdrahtet gegen `var(--card)`.

   ENTSCHEIDUNG 521.E1 (Betreiber, 16.08.): Die STARTSEITEN-Fassung gilt.
   Kursiver Titel, 12 px Radius, Schlagschatten, Anordnung wie sie war.

   ── Zwei Regeln für alle, die hier etwas ändern ──────────────────────

   1) EIGENE TOKEN, KEINE SEITEN-TOKEN.
      Die Farben hängen an `--jdmn-card-*`, nicht an `--card`/`--muted`/
      `--text`. Grund: die drei Seiten definieren diese Namen mit
      UNTERSCHIEDLICHEN Werten (artist: `--card: #1c1c1c`, index: gar
      nicht). Über die Seiten-Token wäre die Card also weiterhin überall
      anders — nur subtiler. Wer eine Seite bewusst abweichen lassen will,
      überschreibt ein `--jdmn-card-*` und sieht dabei, dass er abweicht.

   2) `position: relative` AUF `.card` STEHT HIER BEWUSST NICHT — aber es
      gehört auch nicht ersatzlos gestrichen.
      `veredelung.css` (Effekt 01 Rahmenlicht) warnt davor: zusammen mit der
      columns-Masonry und der Reveal-Animation lässt Safari damit Card-Fotos
      ungezeichnet, also schwarze Kacheln. Sein Hover-Ring braucht den Rahmen
      auch nicht — beim Hovern macht der `transform` die Card selbst dazu.

      ABER: wer auf einer Seite absolut positionierte Kinder DIREKT in der
      Card hat, braucht ihn sehr wohl. Auf der Startseite sind das der
      2-px-Akzent (`.card::before`) und der Ausverkauft-Schleier
      (`.soldout-overlay`). Sie steht darum lokal in `index.html`, direkt
      neben dem Streifen, den sie trägt.
      Am 16.08. habe ich sie beim Zusammenführen gestrichen, weil die Warnung
      oben so absolut klingt — der Akzent verlor seinen Anker und stand als
      lila Balken quer über dem ganzen Regal. Also: die Warnung gilt dem
      Rahmenlicht, nicht jedem Anwendungsfall.

   ── Was NICHT hierher gehört ─────────────────────────────────────────
   Rahmenlicht/Veredelung (`veredelung.css`), die Reveal-Animation
   (seitenweise, weil an den Scroll-Aufbau gekoppelt), sowie „An deiner
   Wand" (`.aw-*`) und „Limitierte Editionen" (`.ed-*`) — die haben eigene
   Klassen und sind bewusst eigenständig.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  --jdmn-card-bg:        #181818;
  --jdmn-card-radius:    12px;
  --jdmn-card-title:     #e0d8cc;
  --jdmn-card-muted:     #888;   /* Preis */
  --jdmn-card-faint:     #666;   /* Model-Zeile, Nebentext */
  --jdmn-card-hairline:  #444;   /* Kontur der Pillen */
  --jdmn-card-collage-bg:#0a0a0a;
}

/* ── Grundkörper ───────────────────────────────────────────────────── */
.card {
  display: block;
  background: var(--jdmn-card-bg);
  border-radius: var(--jdmn-card-radius);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  box-shadow: 0 4px 20px rgba(0,0,0,0.50);
  transition: transform .18s ease, box-shadow .18s ease;
  /* Masonry-Verträglichkeit: auf den columns-Seiten (artist/model) darf eine
     Card nicht über den Spaltenumbruch zerrissen werden. Im Grid der
     Startseite wirkungslos, also gefahrlos gemeinsam. */
  break-inside: avoid;
  margin-bottom: 8px;
}
.card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 28px rgba(0,0,0,0.34);
}

/* ── Bildfläche ────────────────────────────────────────────────────── */
.card-img-wrap { position: relative; overflow: hidden; }
.card-img {
  width: 100%;
  display: block;
  background-color: #1a1a1a;
  background-size: cover;
  background-position: center;
  overflow: hidden;
  /* Muss bleiben: auf der Startseite liegen die Badges (.img-top /
     .img-top-right) INNERHALB von .card-img, nicht im Wrap. Ohne den
     Bezugsrahmen hier rutschen sie zum naechsten positionierten Vorfahren.
     Nicht zu verwechseln mit der Safari-Falle aus veredelung.css — die
     betrifft `position: relative` auf `.card` und `will-change` auf
     `.card-img`, nicht diese Zeile. */
  position: relative;
}
/* Seitenverhältnisse über padding-top (Altbestand) */
.card-img.hoch { padding-top: 133%; }
.card-img.quad { padding-top: 100%; }
.card-img.quer { padding-top:  67%; }

/* Collage für Mehrbild-Werke */
.card-collage {
  aspect-ratio: 3 / 4;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 2px;
  background: var(--jdmn-card-collage-bg);
  position: relative;
  overflow: hidden;
}
.card-collage-2 { grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; }

/* ── Fußzeile ──────────────────────────────────────────────────────── */
.card-foot { padding: 10px 12px 12px; }

.card-title {
  font-size: 14px;
  font-style: italic;
  font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  color: var(--jdmn-card-title);
  line-height: 1.3;
  margin-bottom: 7px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.card-model {
  font-size: 10px;
  letter-spacing: .04em;
  color: var(--jdmn-card-faint);
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.card-model a { color: var(--model-color, #c8a96e); text-decoration: none; font-weight: 500; }
.card-model a:hover { text-decoration: underline; }
.card-model-plain { color: var(--model-color, #c8a96e); font-weight: 500; }

.card-price-row { display: flex; align-items: center; justify-content: space-between; gap: 6px; }

/* Der Preis ist unantastbar. Stand er ohne `nowrap` neben einer Pille MIT
   `nowrap`, gewann die Pille den Platzkampf und „ab 32,99 €" brach auf drei
   Zeilen um (gefunden 16.08. bei den geteilten Werken). */
.card-price {
  font-size: 12px;
  color: var(--jdmn-card-muted);
  white-space: nowrap;
  flex: 0 0 auto;
}

/* Pillen rechts in der Preiszeile. `min-width: 0` ist der entscheidende Teil:
   Flex-Kinder stehen auf `min-width: auto` und schrumpfen sonst NIE unter ihre
   Inhaltsbreite — die Ellipse allein bewirkt nichts. */
.card-limited,
.card-model-chip {
  font-size: 9px;
  padding: 2px 9px;
  border-radius: 20px;
  border: 0.5px solid var(--jdmn-card-hairline);
  color: #777;
  letter-spacing: .04em;
  white-space: nowrap;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.card-model-chip { border-color: rgba(255,255,255,0.12); color: var(--jdmn-card-muted); }
.card-model-chip.is-shared { border-color: rgba(200,169,110,0.45); color: #d8be8e; }

/* Varianten-Leiste unter der Fußzeile */
.card-variants {
  display: flex; justify-content: center; gap: 6px;
  margin-top: 8px; padding-top: 8px;
  border-top: 0.5px solid #2a2a2a;
}

/* ── Badges ────────────────────────────────────────────────────────── */
.img-top       { position: absolute; top: 8px; left: 8px;  z-index: 2; }
.img-top-right { position: absolute; top: 8px; right: 8px; z-index: 2; }

.card-badge {
  position: absolute; top: 8px; left: 8px;
  font-size: 9px; letter-spacing: .08em;
  padding: 3px 8px; border-radius: 999px; font-weight: 600;
}
.badge-free {
  font-size: 9px; letter-spacing: .05em; padding: 3px 9px; border-radius: 4px;
  background: rgba(0,155,65,0.85); color: #fff; white-space: nowrap;
}
/* #ccc statt #bbb: die Künstlerseite hatte den höheren Kontrast, und auf einer
   abgedunkelten Bildfläche ist das die bessere von zwei sonst gleichen Fassungen. */
.badge-lock {
  font-size: 9px; letter-spacing: .05em; padding: 3px 9px; border-radius: 4px;
  background: rgba(15,15,15,0.70); color: #ccc;
  backdrop-filter: blur(6px); white-space: nowrap;
}
.badge-new {
  font-size: 9px; letter-spacing: .08em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 4px;
  background: rgba(15,15,15,0.60); color: #d8bd86;
  border: 0.5px solid rgba(200,169,110,0.55);
  backdrop-filter: blur(6px); white-space: nowrap;
}
.badge-scarce {
  background: rgba(220,100,60,0.15);
  border: 1px solid rgba(220,100,60,0.5);
  color: #e8724a;
}
.badge-shared {
  background: rgba(200,169,110,0.18);
  border: 0.5px solid rgba(200,169,110,0.5);
  color: #d8be8e;
  display: inline-flex; align-items: center; gap: 4px;
}

/* ── Ausverkauft ───────────────────────────────────────────────────── */
.card--soldout { cursor: default; pointer-events: none; }
.card--soldout:hover { transform: none; box-shadow: 0 4px 20px rgba(0,0,0,0.50); }
.card--soldout .card-img,
.card--soldout .card-img-collage { filter: grayscale(1) brightness(0.45); }
.card--soldout .card-foot { opacity: 0.45; }
.soldout-overlay {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  z-index: 4; pointer-events: none;
}
.soldout-pill {
  font-size: 10px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: rgba(255,255,255,0.75);
  background: rgba(0,0,0,0.65);
  border: 0.5px solid rgba(255,255,255,0.2);
  border-radius: 999px; padding: 5px 14px;
  backdrop-filter: blur(6px);
}

/* ── Kontext-Eigenschaften ─────────────────────────────────────────────
   Erlaubte Abweichungen. Jede braucht einen Satz „warum hier anders" —
   sonst ist sie Drift mit Ausrede. Aktuell genau zwei:                  */

/* (1) Künstler-Chip: nur wo Werke mehrerer Künstler nebeneinander stehen
       (Startseite). Auf der Künstlerseite weiss man, bei wem man ist. */
.card-artist-mini {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 3px 9px 3px 3px; border-radius: 999px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  text-decoration: none; margin-bottom: 6px;
  /* Avatar-Kreis bündig zum Titel: Chip-Innenabstand ausgleichen */
  margin-left: -4px; max-width: calc(100% + 4px);
  transition: border-color .15s ease, background .15s ease;
}

/* (2) Ruhe-Akzent in Profilfarbe: der Rahmenlicht-Ring ist im Ruhezustand
       unsichtbar, deshalb trug die Künstlerseite bisher einen festen
       Streifen oben. Bleibt als opt-in, solange 521.E3 offen ist. */
.card--akzent-ruhe { border-top: 2px solid var(--artist-color, var(--model-color, #c8a96e)); }


/* ═══════════════════════════════════════════════════════════════════
   KÜNSTLER-CARD (T521.6)
   ═══════════════════════════════════════════════════════════════════
   Stand 16.08. NICHT dupliziert — sie gab es nur in index.html. Sie
   liegt trotzdem hier, und zwar vorbeugend: T520 zeigt sie im
   Dashboard („Künstler-Card live bearbeiten"). Waere sie in der
   Startseite geblieben, waere dort die naechste Kopie entstanden —
   genau das Muster, das die Werk-Card 15 abweichende Regeln gekostet
   hat. Rail-Layout und Hell-Theme bleiben bewusst in index.html:
   das eine ist Anordnung, das andere eine Startseiten-Eigenheit.
   ═══════════════════════════════════════════════════════════════════ */
.artist-card { border-radius: 12px; overflow: hidden; background: var(--card-surface, #0d0d0d); border: 1px solid var(--card-border, rgba(255,255,255,0.09)); box-shadow: var(--card-shadow, 0 4px 20px rgba(0,0,0,0.5)); cursor: pointer; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; display: block; text-decoration: none; color: inherit; position: relative; }
.artist-card:hover { transform: translateY(-3px); box-shadow: var(--card-shadow-hover, 0 8px 28px rgba(0,0,0,0.4)); }
.artist-card-art { aspect-ratio: 2 / 3; display: flex; flex-direction: row; overflow: hidden; position: relative; }
.artist-card-left { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; padding: 14px 10px 14px 14px; background: var(--card-panel, linear-gradient(135deg, #0d0d0d 0%, #161410 100%)); position: relative; z-index: 1; min-width: 0; }
.artist-card-left::after { content: ''; position: absolute; top: 12%; right: 0; bottom: 12%; width: 0.5px; background: linear-gradient(to bottom, transparent, rgba(200,169,110,0.25), transparent); }
.artist-card-right { width: 44%; flex-shrink: 0; background-size: cover; background-position: center top; position: relative; transition: transform .4s ease; }
.artist-card:hover .artist-card-right { transform: scale(1.04); }
.artist-card-right::before { content: ''; position: absolute; inset: 0; background: linear-gradient(to right, rgba(13,13,13,0.3) 0%, transparent 50%); z-index: 1; }
.artist-card-eyebrow { font-size: 8px; letter-spacing: .2em; text-transform: uppercase; color: var(--artist-card-color, #c8a96e); opacity: 0.75; margin-bottom: 8px; }
.artist-card-name { font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif; font-size: 16px; line-height: 1.2; color: rgba(255,255,255,0.92); margin-bottom: 5px; word-break: break-word; }
.artist-card-name-last { display: block; }
.artist-card-tagline { font-size: 8.5px; letter-spacing: .09em; color: rgba(255,255,255,0.32); text-transform: uppercase; line-height: 1.4; }
.artist-card-bio { margin-top: 10px; font-size: 10.5px; line-height: 1.6; color: rgba(255,255,255,0.5); font-style: italic; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; }
.artist-card-genres { margin-top: 12px; padding-top: 10px; border-top: 1px solid rgba(200,169,110,0.12); display: flex; flex-wrap: wrap; gap: 4px; }
.artist-card-genre { font-size: 7.5px; letter-spacing: .12em; text-transform: uppercase; padding: 3px 7px 3px; border-radius: 999px; background: rgba(200,169,110,0.06); border: 1px solid rgba(200,169,110,0.20); color: rgba(255,255,255,0.62); white-space: nowrap; line-height: 1; }
.artist-card-foot { padding: 9px 12px 11px; display: flex; flex-direction: column; align-items: stretch; gap: 7px; }
.artist-card-foot-main { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.artist-card-meta { font-size: 10px; color: rgba(255,255,255,0.35); display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.artist-card-also { display: inline-flex; align-items: center; gap: 4px; font-size: 9px; letter-spacing: .04em; line-height: 1; padding: 3px 7px; border-radius: 999px; cursor: pointer; align-self: flex-start; /* eigene Zeile unter der Meta-Zeile, linksbündig, nicht gestreckt */ color: var(--artist-card-color, #c8a96e); /* Fallback ohne color-mix-Support (iOS<16.2): Default-Gold mit Alpha */ border: 1px solid rgba(200,169,110,0.55); border: 1px solid color-mix(in srgb, var(--artist-card-color, #c8a96e) 55%, transparent); background: rgba(200,169,110,0.12); background: color-mix(in srgb, var(--artist-card-color, #c8a96e) 12%, transparent); text-transform: uppercase; white-space: nowrap; transition: background .15s ease, border-color .15s ease; }
.artist-card-also:hover { background: rgba(200,169,110,0.22); /* Fallback ohne color-mix-Support */ background: color-mix(in srgb, var(--artist-card-color, #c8a96e) 22%, transparent); border-color: var(--artist-card-color, #c8a96e); }
.artist-card-also svg { flex: 0 0 auto; }
.artist-card-cta { font-size: 9px; letter-spacing: .08em; color: var(--artist-card-color, #c8a96e); text-transform: uppercase; }

/* Ohne aspect-ratio-Unterstuetzung (iOS<15, Chrome<88): Hoehe per Pixel,
   sonst faellt die Bildflaeche auf 0 zusammen. */
@supports not (aspect-ratio: 1 / 1) {
  .artist-card-art { height: 300px; }
}


/* ═══════════════════════════════════════════════════════════════════
   BILD-PARALLAX (T522) — das Bild wandert im Rahmen, der Rahmen steht
   ═══════════════════════════════════════════════════════════════════

   Vorbild: hki.paris. Prinzip ist reine Geometrie: die Bildebene ist
   höher als ihr Rahmen, und dieser Überstand ist der Weg, den sie beim
   Scrollen zurücklegt. Der Rahmen selbst rührt sich nie — deshalb
   bleibt das Raster ruhig, obwohl sich in jeder Kachel etwas bewegt.

   Betreiber-Entscheidung 16.08.: erst 11 %, nach dem Ansehen auf dem
   Telefon zurück auf 8 % — „sonst zu heftig fürs Auge". 8 % sind ±32 px
   bei einer 395-px-Card. Nach oben gibt es zusätzlich eine harte Grenze,
   die niemand sieht, aber jeder merken würde: die Ebene wird um 2 × den
   Wert vergrößert, bei 11 % also aus einem 582-px-Rahmen 710 px Bildhöhe.
   Unsere Thumbs sind 800 px hoch — über ~13 % würde hochgerechnet und das
   Bild weich. Der Geschmack lag hier also innerhalb der Technik, nicht
   dagegen.

   ── Drei Dinge, die hier bewusst so stehen ────────────────────────

   1) KEIN `translate3d`, KEIN `will-change`.
      `veredelung.css` hält für Safari fest: eine eigene Compositing-
      Ebene auf dem Foto lässt Safari das darunterliegende
      background-image ungezeichnet — schwarze Kacheln. Genau darum
      bewegt sich hier ein schlichtes `translateY`. Die paar sichtbaren
      Karten pro Frame kosten auch ohne GPU-Ebene nichts.

   2) DAS BILD KOMMT AUS `--bg`, NICHT AUS `inherit`.
      `background-image: inherit` sieht eleganter aus und war der Grund,
      warum die erste Fassung stumm nichts tat. `--bg` füllt
      `jdmn-parallax.js` — und zwar erst, wenn der Lazy-Loader das Bild
      tatsächlich gesetzt hat. Deshalb greift der Effekt auch bei
      nachgeladenen Karten, ohne dass der Loader etwas davon weiß.

   3) DIE EBENE ENTSTEHT NUR MIT SKRIPT (`html.jdmn-para`).
      Ohne JavaScript, bei `prefers-reduced-motion` oder wenn das Skript
      fehlschlägt, gibt es sie gar nicht erst — die Card sieht dann aus
      wie immer. Das ist zugleich der Not-Aus: die Klasse nicht setzen,
      und der ganze Effekt ist weg.
   ═══════════════════════════════════════════════════════════════════ */

:root { --jdmn-para: 8%; }

html.jdmn-para .card-img::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  top:    calc(var(--jdmn-para) * -1);
  bottom: calc(var(--jdmn-para) * -1);
  background-image: var(--bg);
  background-size: cover;
  background-position: center;
  transform: translateY(var(--sh, 0px));
  z-index: 0;
}

/* Die Plaketten liegen INNERHALB der Bildfläche (siehe `image()` in
   jdmn-card.js) und müssen über der bewegten Ebene bleiben. */
html.jdmn-para .card-img .img-top,
html.jdmn-para .card-img .img-top-right { position: relative; z-index: 2; }

/* Doppelt gesichert: das Skript steigt bei „weniger Bewegung" schon
   vorher aus, aber falls die Einstellung erst später umgelegt wird,
   steht die Ebene hier trotzdem still. */
@media (prefers-reduced-motion: reduce) {
  html.jdmn-para .card-img::after { transform: none; }
}