/* S272 #WERK-ANZEIGE-UNIFORM Punkt 6 (Sebi „alles, go"): die Werk-Bausteine — großer Preis, EIN Knopf, Frist, History, Knopfreihe,
   Serien-Zeile, Fuß — in EINER Datei. Galerie + Werkseite binden sie über styles.css ein (@import), die 265 Magenta-Seiten /w/<nr>/ laden
   sie als /mint/werk-bausteine.css (fester Name, vite.config.js kopiert sie). Aussehen ändern = HIER, wirkt auf G · W · M.
   Variablen mit Rückfall: die Magenta-Seiten haben kein --mono/--line-soft. Rad (solo.js SOLO_CSS) setzt bewusst eigen (Rad-Schrift). */
.ftr { font-size: 12px; padding-top: 24px; border-top: 1px solid var(--line); text-align: center; }
.ftr a { color: var(--dim); text-decoration: none; border-bottom: 1px dotted var(--line); }
.ftr a:hover { color: var(--fg); border-bottom-color: var(--dim); }
.lb-preis { font: 700 44px/1 var(--mono, "Noto Sans Mono", ui-monospace, monospace); letter-spacing: -.03em; }
.lb-preis small { font-size: 18px; color: var(--dim); font-weight: 400; margin-left: 6px; }
.lb-preis.klein { font-size: 28px; color: var(--dim); }
.lb-preis-sub { color: var(--dim); font-size: 12px; margin: 6px 0 16px; }
.lb-cta { display: block; text-align: center; background: var(--magenta); color: #fff; font: 700 17px var(--mono, "Noto Sans Mono", ui-monospace, monospace); padding: 15px; border-radius: 8px; text-decoration: none; }
.lb-cta:hover { filter: brightness(1.15); }
.lb-cta span { display: block; font-weight: 400; font-size: 11px; opacity: .85; margin-top: 3px; }
.lb-cta.aus { background: var(--line-soft, #1a1a1a); color: var(--dim); border: 1px dashed var(--line); font-size: 14px; }
.lb-cta.aus svg { width: 12px; height: 12px; vertical-align: -1px; }
.lb-satz { color: var(--dim); margin: 0 0 6px; line-height: 1.5; }
.lb-frist { display: flex; align-items: center; gap: 8px; font: 11px var(--mono, "Noto Sans Mono", ui-monospace, monospace); margin-top: 14px; }
.lb-frist svg { width: 14px; height: 14px; flex: none; }
.lb-hist { margin-top: 18px; border-top: 1px solid var(--line); padding-top: 12px; }
.lb-hist b { display: block; font: 600 10px var(--mono, "Noto Sans Mono", ui-monospace, monospace); letter-spacing: .14em; text-transform: uppercase; color: var(--dim); margin-bottom: 6px; }
.lb-hist div { display: grid; grid-template-columns: 58px 1fr auto; gap: 8px; font: 11px/1.9 var(--mono, "Noto Sans Mono", ui-monospace, monospace); }
.lb-hist i { font-style: normal; color: var(--dim); }
button.lb-cta { width: 100%; cursor: pointer; }
button.lb-cta:not(.aus) { border: 0; }
.hist-kette { display: block; margin-top: 6px; font: 11px/1.9 var(--mono, "Noto Sans Mono", ui-monospace, monospace); color: var(--dim); text-decoration: none; }
.hist-kette:hover { color: var(--fg); }
.lb-hist div.hist-hinweis { display: block; padding-left: 1.2em; color: var(--dim); }   /* S281b: fiel ins 58-px-Raster der Zeilen ⇒ ein Wort pro Zeile */
.lb-cta.zweit { background: transparent; border: 1px solid var(--line); color: var(--fg); margin-top: 10px; }
.lb-cta svg { width: 18px; height: 18px; vertical-align: -3px; margin-right: 4px; }
.werk-zeile { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }
.werk-zeile .badge.coll { position: relative; display: inline-flex; align-items: center; flex: 0 0 auto; width: auto; max-width: 100%; padding-top: 3px; padding-bottom: 3px; }
.werk-zeile .gespielt { font: 12px var(--mono, "Noto Sans Mono", ui-monospace, monospace); color: var(--dim); }
/* S276c: EINE Regel für den Preis-Block (Preis + Unterzeile + Knopf) — Werkseite/Magenta (#angebot) UND Katalog-Großansicht (.werk-angebot) */
:is(#angebot, .werk-angebot) { text-align: center; margin: 22px 0 0; }
#angebot.hidden { display: none; }
.lb-preis.wort { font-size: 36px; letter-spacing: 0; }
:is(#angebot, .werk-angebot) .lb-cta { width: 100%; border: 0; cursor: pointer; }
/* S276d: zweiter Weg unter [←][Hauptknopf] (Send as a gift) — ruhig: Rand statt Fläche */
:is(#angebot, .werk-angebot) .lb-cta.zweit, #lbSide .lb-cta.zweit { border: 1px solid var(--line); background: transparent; color: var(--fg); font-weight: 400; font-size: 15px; padding: 11px; margin-top: 10px; }
/* K10 geteilter Knopf [←][Aktion] — das ← ist immer die UMKEHRUNG des Hauptknopfs (Sebi 05.10.): pink ⇒ weiß/pinker Pfeil · weiß ⇒ pink/weißer Pfeil */
.werk-split { display: flex; gap: 6px; align-items: stretch; }
.werk-split > .lb-cta { flex: 1; margin: 0; }
.werk-split-zur { flex: 0 0 54px; border: 0; border-radius: 8px; background: #fff; color: var(--magenta); display: grid; place-items: center; cursor: pointer; text-decoration: none; }
.werk-split-zur:hover { filter: brightness(.92); }
.werk-split-zur.pink { background: var(--magenta); color: #fff; }
.werk-split-zur svg { width: 22px; height: 22px; }
.werk-split-allein { flex: 1; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 14px; font: 700 14px var(--mono, "Noto Sans Mono", monospace); }   /* S1: ← allein, wenn es nichts zu tun gibt */
.werk-split-allein span { color: #000; }
.lb-cta.weiss { background: #fff; color: #000; }
#angebot .lb-cta.aus { cursor: pointer; }
.werk-knoepfe { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 18px 0 0; }
.werk-knopf { display: block; text-align: center; padding: 10px 8px; border: 1px solid var(--line); border-radius: 8px; text-decoration: none; font: 13px var(--mono, "Noto Sans Mono", ui-monospace, monospace); color: var(--fg); }
.werk-knopf:hover { border-color: var(--dim); }
.werk-knoepfe .werk-knopf:only-child { grid-column: 1 / -1; }
.hist-frueher > summary { cursor: pointer; list-style: none; font: 11px/1.9 var(--mono, "Noto Sans Mono", ui-monospace, monospace); color: var(--dim); }
.hist-frueher > summary::-webkit-details-marker { display: none; }
.hist-frueher > summary::before { content: '› '; display: inline-block; transition: transform .15s; }
.hist-frueher[open] > summary::before { transform: rotate(90deg); }
/* Serien-Zeile eigenständig (Magenta hat keine .badge-Grundregeln der Galerie) — Werte wie die Galerie-Pill */
.werk-zeile .badge.coll { border-radius: 3px; border: 1px solid #fff; background: #fff; color: var(--magenta); font: 700 9px/1.4 var(--mono, "Noto Sans Mono", ui-monospace, monospace);
  letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; text-decoration: none; padding: 3px 17px; }
.werk-zeile .badge.coll .zahl { font-weight: 400; margin-left: 5px; }
.werk-zeile .badge.coll .dot { position: absolute; left: 7px; top: 50%; margin-top: -3px; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.werk-zeile .badge.coll.live .dot { background: #1fa855; box-shadow: 0 0 4px #4ade80; }
.werk-zeile .badge.coll.zu { background: #1f1f1f; color: var(--dim); border-color: #333; font-weight: 400; }
.werk-zeile .badge.coll.zu .dot { background: none; border: 1px solid currentColor; box-sizing: border-box; }
/* S276 Entscheid 2 B: Chain-Marke (DOT · ATOM) vor der Serien-Pill — karte.js collPillHTML({kette}).
   S276c (Sebi 04.10.): beide Chains PINK (Polkadot-Alt-CI + Stargaze) statt violett · Farben als Variablen ⇒ später EIN Wert hier */
:root { --kette-rand: #E20074; --kette-schrift: #ff4fa3; --kuenstler-grund: #000; --kuenstler-farbe: #fff; }
:is(.werk-zeile, #lbSub) .kette { display: inline-block; flex: 0 0 auto; margin-right: -5px; padding: 3px 5px; border: 1px solid var(--kette-rand); border-radius: 3px; color: var(--kette-schrift);
  font: 600 9px/1.4 var(--mono, "Noto Sans Mono", ui-monospace, monospace); letter-spacing: .08em; white-space: nowrap; }
/* S276c Back catalogue: Serien-Pill ohne Status-Punkt · Künstler-Pill „Art by iO" schwarz-weiß, nicht großgeschrieben (iO bleibt iO) */
.werk-zeile .badge.coll.katalog { padding: 3px 8px; }
.werk-zeile .badge.coll.katalog .dot { display: none; }
.werk-zeile .kuenstler { flex: 0 0 auto; padding: 3px 7px; border: 1px solid var(--kuenstler-farbe); border-radius: 3px; background: var(--kuenstler-grund);
  color: var(--kuenstler-farbe); font: 600 10px/1.3 var(--mono, "Noto Sans Mono", ui-monospace, monospace); letter-spacing: .04em; white-space: nowrap; }
#lbSub .kette { margin-right: 6px; vertical-align: 1px; }   /* Galerie-Großansicht: kein Flex-Abstand wie in .werk-zeile ⇒ Marke klebte an der Serien-Pill (Sebi 05.10.) */
#historie:empty { display: none; }

/* #STUDIO-NIE-KAEUFLICH (Sebi 13.10., S281): Studio-Werk unverwechselbar — gelber Sticker oben rechts AUF dem Werk (karte.js studioStickerHTML),
   Kachel · Galerie-Großansicht · Werkseite; Rad hat dieselbe Regel in solo.js SOLO_CSS. Kein Texteinschub (S281b): der Satz erscheint bei
   Mouse-over (title) und beim Antippen als Blase (:focus). */
.studio-sticker { position: absolute; top: 8px; right: 8px; z-index: 3; padding: 3px 7px; border-radius: 4px; background: #ffd400; color: #000;
  font: 700 10px/1 var(--mono, "Noto Sans Mono", ui-monospace, monospace); letter-spacing: .08em; box-shadow: 0 1px 4px rgba(0,0,0,.5);
  cursor: help; outline: none; -webkit-tap-highlight-color: transparent; }
.studio-sticker:focus::after, .studio-sticker.auf::after { content: attr(data-info); position: absolute; top: calc(100% + 6px); right: 0; width: max-content; max-width: 220px;
  padding: 7px 9px; border-radius: 6px; background: #ffd400; color: #000; font: 500 11px/1.35 var(--mono, "Noto Sans Mono", ui-monospace, monospace);
  letter-spacing: 0; white-space: normal; text-align: left; box-shadow: 0 2px 8px rgba(0,0,0,.5); }
#lbMedia .studio-sticker { right: auto; left: 8px; }   /* Großansicht: oben rechts liegt der fixe ✕ (#lbClose) */
#lbMedia .studio-sticker::after { right: auto; left: 0; }