/* MARA VITAL — design-baseline preview base (self-contained, zero external requests)
   @font-face uses locally-bundled Open Sans woff2 (openly licensed, from the site's
   OMGF self-hosted set). Surface-band helpers reproduce the site's warm-paper / white /
   petrol band alternation. This is scaffolding for the baseline capture cards, not a
   production stylesheet. */

@font-face {
  font-family: "Open Sans"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("assets/fonts/open-sans-normal-400.woff2") format("woff2");
}
@font-face {
  font-family: "Open Sans"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("assets/fonts/open-sans-normal-600.woff2") format("woff2");
}
@font-face {
  font-family: "Open Sans"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("assets/fonts/open-sans-normal-700.woff2") format("woff2");
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; font-family: var(--font-body); font-weight: var(--w-regular);
  color: var(--n-ink); line-height: 1.6; background: var(--surface-white);
  font-size: 16px;
}
h1, h2, h3, h4 { font-weight: var(--w-semibold); line-height: 1.2; color: var(--lived-petrol); margin: 0 0 .5em; }
a { color: var(--lived-petrol); }
img { max-width: 100%; height: auto; display: block; }

/* ---- layout ---- */
.ds-container { max-width: var(--container-width); margin: 0 auto; padding: 0 24px; }
.ds-page { padding: 32px 0 56px; }

/* ---- surface bands (the site's alternating rhythm) ---- */
.band { padding: 40px 0; }
.band--white      { background: var(--surface-white); }
.band--paper      { background: var(--paper); }
.band--paper-warm { background: var(--paper-warm); }
.band--sage       { background: var(--surface-sage); }
.band--topbar     { background: var(--surface-topbar); }
.band--petrol     { background: var(--lived-petrol); color: #fff; }
.band--petrol h1, .band--petrol h2, .band--petrol h3 { color: #fff; }
.band--navy       { background: var(--lived-navy-band); color: #fff; }

/* ---- capture chrome (used by every card to frame the spec) ---- */
.ds-cardhead { border-bottom: 1px solid var(--n-e2); margin-bottom: 24px; padding-bottom: 12px; }
.ds-cardhead h1 { font-size: 22px; margin: 0 0 4px; }
.ds-cardhead .ds-sub { color: var(--n-9ca3af); font-size: 13px; }
.ds-eyebrow { text-transform: uppercase; letter-spacing: .12em; font-size: 12px; font-weight: 600; color: var(--lived-cta-rust); }
.ds-note {
  font-size: 13px; color: #5a5a5a; background: #fff; border: 1px dashed var(--n-ccc);
  border-radius: 4px; padding: 8px 12px; margin: 12px 0;
}
.ds-note b { color: var(--lived-cta-rust); }
.ds-grid { display: grid; gap: 16px; }
.ds-swatch { border: 1px solid var(--n-e2); border-radius: 6px; overflow: hidden; background: #fff; }
.ds-swatch .chip { height: 72px; }
.ds-swatch .meta { padding: 8px 10px; font-size: 12px; }
.ds-swatch .meta code { font-size: 11px; color: #333; }
.ds-swatch .role { display: block; font-weight: 600; color: var(--n-ink); }

/* ---- button reality (variant sprawl — NOT one component; see §9.2) ---- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-body); font-weight: 600; font-size: 15px; line-height: 1;
  padding: 14px 26px; border: 0; border-radius: var(--btn-radius); cursor: pointer;
  text-decoration: none; }
.btn--rust    { background: var(--lived-cta-rust); color: #fff; }          /* lived primary CTA */
.btn--petrol  { background: var(--lived-petrol); color: #fff; }            /* secondary action */
.btn--kitred  { background: var(--declared-btn-bg); color: #fff; }         /* DECLARED kit button (#B40000) */
.btn--variation { background: #b56b62; color: #fff; opacity: .85; }        /* disabled "In den Warenkorb" (variation-wall) */
.btn--ghost   { background: transparent; color: var(--lived-petrol); box-shadow: inset 0 0 0 2px var(--lived-petrol); }
.btn--link    { background: transparent; color: var(--lived-petrol); text-decoration: underline; padding: 8px 0; }

/* ---- misc primitives ---- */
.stars { color: var(--lived-gold-ratings); letter-spacing: 1px; }
.price { font-weight: 700; color: var(--n-ink); }
.price .from { font-weight: 400; color: #6a6a6a; font-size: .8em; }
.pill { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; }
.hairline { border: 0; border-top: 1px solid var(--n-e2); margin: 20px 0; }
.icon-svg { width: 22px; height: 22px; display: inline-block; vertical-align: middle; }