/* Design-System-Tokens (Farben, Typografie, Form) – aus dem NEWSEED Design
 * System übernommen, unverändert. Schriften siehe fonts.css.
 */
:root{
/* Kernfarben */
--paper:#F2EDE3; /* Grundfläche */
--dust:#E2DACA; /* Flächen 2. Ebene */
--ink:#0E0E0E; /* Text, Linien */
--acid:#D8FF3D; /* Zone 01+04: Klettern / Neue Produkte */
--orange:#FF5A1F; /* Zone 02: Sammeln */
--blue:#009BD8; /* Zone 03: Verarbeitung */
/* Hilfsfarben */
--sheet:#FAF8F2; --hairline:rgba(14,14,14,.14); --muted:#57524a;
/* Semantische Aliasse */
--surface-page:var(--paper); --surface-raised:var(--dust); --surface-doc:var(--sheet);
--text-body:var(--ink); --text-muted:var(--muted);
--border-strong:var(--ink); --border-hair:var(--hairline);
/* Farb-Kreislauf */
--zone-01:var(--acid); --zone-02:var(--orange); --zone-03:var(--blue); --zone-04:var(--acid);
/* Textfarbe AUF Zonenfarbe */
--on-acid:var(--ink); --on-orange:#fff; --on-blue:#fff; --on-ink:var(--paper);
}

:root{
--display:"Stellost","Arial Black",sans-serif; /* nur Kern-Aussage, 72-360px, line .86 */
--statement:"Archivo Black","Helvetica Neue",sans-serif; /* italic caps, 22-72px, line 1.02 */
--body:"Archivo","Helvetica Neue",sans-serif; /* 16-24px, line 1.45 */
--mono:"Space Mono","Courier New",monospace; /* Labels/Codes, 12-15px, tracking .2em */
--font-display:var(--display); --font-statement:var(--statement); --font-body:var(--body); --font-meta:var(--mono);
--lh-display:.86; --lh-statement:1.02; --lh-body:1.45;
--track-meta:.2em;
}

:root{
--radius-container:30px; /* Karten, große Container */
--radius-tile:16px; /* Tiles, Token-Chips, Bildkacheln */
--radius-pill:999px; /* Buttons, Tags */
--radius:30px;
--border-card:2px solid var(--ink);
--border-line:1.5px solid var(--hairline);
}

/* --- Komponenten des Design Systems --- */
/* NEWSEED Komponenten-Basisklassen — gleiche Klassen nutzen die React-Komponenten */
.ns-duo{position:relative;overflow:hidden;background:var(--hi,var(--acid))}
.ns-duo .media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.08) brightness(1.02);mix-blend-mode:multiply}
.ns-duo .tone{position:absolute;inset:0;background:var(--sh,var(--ink));mix-blend-mode:screen;pointer-events:none}
.ns-btn{font-family:var(--statement);font-size:15px;text-transform:uppercase;letter-spacing:.02em;border-radius:var(--radius-pill);padding:15px 30px;border:2px solid var(--ink);cursor:pointer;background:transparent;color:var(--ink)}
.ns-btn.primary{background:var(--ink);color:var(--paper)}
.ns-btn.primary:hover{background:var(--orange);border-color:var(--orange);color:#fff}
.ns-btn.zone-o{background:var(--orange);border-color:var(--orange);color:#fff}
.ns-btn.zone-a{background:var(--acid);border-color:var(--acid);color:var(--ink)}
.ns-btn.zone-b{background:var(--blue);border-color:var(--blue);color:#fff}
.ns-btn.ghost:hover{background:var(--ink);color:var(--paper)}
.ns-btn.sm{font-size:13px;padding:10px 20px}
.ns-tag{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;padding:7px 14px;border-radius:var(--radius-pill);border:1.5px solid var(--ink);display:inline-block}
.ns-tag.f-o{background:var(--orange);border-color:var(--orange);color:#fff}
.ns-tag.f-a{background:var(--acid);border-color:var(--acid);color:var(--ink)}
.ns-tag.f-b{background:var(--blue);border-color:var(--blue);color:var(--ink);color:#fff}
.ns-tag.f-d{background:var(--dust);border-color:var(--dust)}
.ns-card{border:var(--border-card);border-radius:var(--radius-container);overflow:hidden;background:var(--paper);display:flex;flex-direction:column;font-family:var(--body);color:var(--ink)}
.ns-card .cimg{height:240px;position:relative;overflow:hidden;background:var(--paper)}
.ns-card .cimg img.prod{position:absolute;inset:18px;width:calc(100% - 36px);height:calc(100% - 36px);object-fit:contain}
.ns-card .cbody{padding:20px 24px 24px}
.ns-card .ct{font-family:var(--statement);font-size:19px;text-transform:uppercase;margin:0 0 4px}
.ns-card .cs{font-size:14.5px;color:var(--muted);margin:0}
.ns-card .cfoot{margin-top:14px;display:flex;justify-content:space-between;align-items:center}
.ns-card .price{font-family:var(--mono);font-size:15px;font-weight:700}
.ns-card.story .cbody{background:var(--ink);color:var(--paper)}
.ns-card.story .cs{color:rgba(242,237,227,.75)}
.ns-card.story .stag{position:absolute;top:18px;left:20px;z-index:3;font-family:var(--statement);font-size:15px;font-style:italic;text-transform:uppercase;color:#fff}