/* =====================================================================
   merch.css — eingebetteter Spreadshop im re:signal-Stil (26.09.2026)
   Gilt nur innerhalb von #myShop (merch.php). Der Spreadshop steuert Flächen
   und Schrift über Hilfsklassen: sprd-bg-* (Flächen), sprd-c-* (Schrift),
   sprd-bc-* (Rahmen), sprd-hc-* (Hervorhebung), sprd-lc-* (Links).
   ===================================================================== */
.rs-merch-kopf { padding-top: clamp(28px, 4vw, 48px); padding-bottom: 10px; }
.rs-merch-kopf .rs-lab { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; }
.rs-merch-colon { font-size: 5px; gap: 3px; }
.rs-merch-sub { max-width: 60ch; margin: 14px 0 0; color: var(--ru-paper-70); font: 500 clamp(15px, 1.2vw, 18px)/1.55 var(--ru-f-text); }
.rs-merch { padding-top: 24px; padding-bottom: 40px; }
.rs-merch-laden { display: flex; align-items: center; gap: 14px; height: 40px; margin: 40px 0 16px; font: 600 12px var(--ru-f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ru-paper-70); }
.rs-merch-laden .rs-fq { width: 160px; height: 28px; color: var(--ru-paper); }
.rs-merch-hinweis { margin-top: 20px; max-width: 80ch; }

#myShop { color: var(--ru-paper); font-family: var(--ru-f-text); border-top: 1px solid var(--ru-line-2); }
#myShop .customPageBackground,
#myShop .sprd-bg-m1, #myShop .sprd-bg-m2, #myShop .sprd-bg-m3 { background-color: var(--ru-ink) !important; }
#myShop .sprd-bg-s3 { background-color: var(--ru-ink-2) !important; }
#myShop .sprd-c-s1, #myShop .sprd-c-s2, #myShop .sprd-c-s3 { color: var(--ru-paper) !important; fill: var(--ru-paper) !important; }
#myShop .sprd-lc-s2, #myShop a { color: var(--ru-paper); }
#myShop a:hover { color: var(--ru-cyan); }
#myShop .sprd-bc-m1, #myShop .sprd-bc-m2, #myShop .sprd-bc-m3 { border-color: var(--ru-line) !important; }
#myShop .sprd-hc-m2 { color: var(--ru-cyan) !important; }
#myShop svg { fill: currentColor; }
#myShop .sprd-search__icon, #myShop .sprd-basket-indicator__icon { color: var(--ru-paper); fill: var(--ru-paper) !important; }

/* Überschriften im Shop: re:signal statt der globalen Seitentitel-Regeln */
#myShop h1, #myShop h2, #myShop h3, #myShop h4 { color: var(--ru-paper) !important; font-family: var(--ru-f-disp) !important; font-weight: 900; text-transform: uppercase; letter-spacing: -.02em; line-height: 1.05; }
#myShop h2 { font-size: clamp(24px, 2.6vw, 38px) !important; }
/* Produkttitel: Manrope statt Riesenversalien (sonst Kollision mit Bewertung) */
#myShop h1 { font-family: var(--ru-f-text) !important; font-weight: 800 !important; text-transform: none !important; letter-spacing: -.01em !important; font-size: clamp(22px, 2vw, 30px) !important; line-height: 1.2 !important; }
#myShop h3, #myShop h4 { font-size: clamp(14px, 1.2vw, 18px) !important; font-weight: 700; }
#myShop p, #myShop span, #myShop li, #myShop label, #myShop button { font-family: var(--ru-f-text); }

/* Logo im Shop-Kopf: helle Fassung auf Nacht */
#myShop .sprd-header__image img { content: url('/img/merch-logo-nacht.png'); max-height: 56px; width: auto; }

/* Knöpfe: Kanten wie re:signal (keine Kapseln) */
#myShop button, #myShop .sprd-button, #myShop [class*="button"] { border-radius: var(--ru-r-1) !important; }
#myShop input, #myShop select, #myShop textarea { background: transparent !important; color: var(--ru-paper) !important; border: 1.5px solid var(--ru-line) !important; border-radius: var(--ru-r-1) !important; }

/* Produktkacheln und Bilder */
#myShop img { border-radius: var(--ru-r-1); }
#myShop [class*="price"] { font-family: var(--ru-f-mono) !important; color: var(--ru-paper) !important; }

/* Sprunglinks nur bei Fokus zeigen (Barrierefreiheit bleibt) */
#myShop .sprd-skip-nav__item:not(:focus) { position: absolute !important; left: -9999px !important; }

/* Fließtexte des Shops: lesbarer Kontrast auf Nacht */
#myShop p, #myShop li, #myShop .sprd__sub-caption, #myShop [class*="description"], #myShop [class*="text"] { color: var(--ru-paper-70) !important; }
#myShop [class*="name"], #myShop [class*="title"], #myShop .sprd__caption { color: var(--ru-paper) !important; }

/* Produktdetail: Titel in Manrope, Designname klein darüber */
#myShop .sprd-detail-block__detail-info h1, #myShop .sprd-detail-block__detail-info h2,
#myShop [class*="sprd-detail-info__"][class*="title"], #myShop [class*="sprd-detail-info__"][class*="heading"] {
  font-family: var(--ru-f-text) !important; font-weight: 800 !important; text-transform: none !important;
  letter-spacing: -.01em !important; font-size: clamp(20px, 1.8vw, 28px) !important; line-height: 1.2 !important;
}

/* Vorhang: Shop lädt erst nach Klick (Audit 26.09.2026) */
.rs-merch-vorhang { border: 1.5px solid var(--ru-line); border-radius: var(--ru-r-2); padding: clamp(20px, 3vw, 36px); margin-top: 24px; display: grid; gap: 18px; max-width: 760px; }
.rs-merch-vorhang[hidden] { display: none; }
.rs-merch-hinweis-kurz { margin: 0; color: var(--ru-paper-70); font: 500 15px/1.55 var(--ru-f-text); }
.rs-merch-knoepfe { display: flex; flex-wrap: wrap; gap: 12px; }
.rs-merch-merken { display: flex; align-items: center; gap: 10px; font: 600 11px var(--ru-f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ru-paper-70); cursor: pointer; }
.rs-merch-merken input { width: 18px; height: 18px; accent-color: var(--ru-magenta); }
.rs-merch-laden[hidden] { display: none; }