/* =====================================================================
   MenschKunst Design-System  (Richtung A „Galerie auf Papier“, 14.09.2026)
   ---------------------------------------------------------------------
   Eine Datei für alle Oberflächen: Root-Site (Elementor), Kunstkatalog,
   Art-Wall, Künstler-Sites (wpartiststheme). Enthält NUR Tokens,
   Schriften und wiederverwendbare Komponenten. Keine Seiten-Hacks.

   Einbindung:
     WordPress:  wp_enqueue_style( 'meku-design-system', '/assets/css/meku-design-system.css' )
     Smarty:     <link rel="stylesheet" href="/assets/css/meku-design-system.css">

   Farbwerte stammen aus katalog/katalog.css (Stand 08/2026), Schriften
   Newsreader + Source Sans 3 (SIL Open Font License 1.1, selbst gehostet
   unter /assets/fonts/). Konzept: Abschnitt 3.2, Ticket T1.1.
   ===================================================================== */

/* ---- Schriften (variable Fonts, Latin) ------------------------------ */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('../fonts/Newsreader-variable.woff2') format('woff2');
}
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 200 800;
  font-display: swap;
  src: url('../fonts/Newsreader-italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url('../fonts/SourceSans3-variable.woff2') format('woff2');
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: italic;
  font-weight: 200 900;
  font-display: swap;
  src: url('../fonts/SourceSans3-italic.woff2') format('woff2');
}

/* ---- Tokens ---------------------------------------------------------- */
:root {
  /* Farben (hell) */
  --mk-paper:        #fafaf8;   /* Seitengrund */
  --mk-paper-2:      #f3f0e9;   /* Flächen, Panels, Footer */
  --mk-surface:      #ffffff;   /* Karten, Formulare */
  --mk-ink:          #2c2c2c;   /* Text, Titel */
  --mk-ink-soft:     #666666;   /* Nebentext */
  --mk-ink-faint:    #999999;   /* Labels, Hinweise */
  --mk-line:         #e8e4de;   /* Linien, Rahmen */
  --mk-accent:       #b8860b;   /* Gold: Links, Buttons, Preise */
  --mk-accent-hover: #9a6f08;
  --mk-accent-soft:  #f1e7cf;
  --mk-sold:         #8c2f39;   /* „Privatbesitz“ */
  --mk-on-accent:    #ffffff;

  /* Schrift */
  --mk-font-display: 'Newsreader', Georgia, 'Book Antiqua', Palatino, serif;
  --mk-font-text:    'Source Sans 3', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mk-font-mono:    ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* Typo-Skala */
  --mk-fs-xs: 12px;
  --mk-fs-sm: 14px;
  --mk-fs-md: 16px;
  --mk-fs-lg: 18px;
  --mk-fs-xl: 22px;
  --mk-fs-2xl: 28px;
  --mk-fs-3xl: 36px;
  --mk-fs-4xl: 48px;
  --mk-lh-tight: 1.1;
  --mk-lh-text: 1.55;

  /* Abstände */
  --mk-sp-1: 4px;
  --mk-sp-2: 8px;
  --mk-sp-3: 12px;
  --mk-sp-4: 16px;
  --mk-sp-5: 24px;
  --mk-sp-6: 32px;
  --mk-sp-7: 48px;
  --mk-sp-8: 64px;
  --mk-sp-9: 80px;

  /* Form */
  --mk-radius: 0;                                  /* bewusst eckig, wie der Katalog */
  --mk-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  --mk-shadow-lg: 0 6px 24px rgba(0, 0, 0, 0.14);
  --mk-frame: 8px solid #ffffff;                   /* „Passepartout“ um Werkbilder */
  --mk-container: 1312px;
  --mk-gutter: 64px;
}

/* Dunkles Schema: Systemeinstellung, sofern keine explizite Wahl gesetzt ist */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --mk-paper: #171614;
    --mk-paper-2: #1f1d1a;
    --mk-surface: #232120;
    --mk-ink: #ece8df;
    --mk-ink-soft: #b3ada2;
    --mk-ink-faint: #8a847a;
    --mk-line: #33302a;
    --mk-accent: #d9a441;
    --mk-accent-hover: #e6b85c;
    --mk-accent-soft: #2e2718;
    --mk-sold: #d46a76;
    --mk-on-accent: #171614;
    --mk-frame: 8px solid #2b2926;
    --mk-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
    --mk-shadow-lg: 0 6px 24px rgba(0, 0, 0, 0.6);
  }
}
/* Explizite Wahl (z. B. Schalter auf den Künstler-Sites) */
:root[data-theme="dark"] {
  --mk-paper: #171614;
  --mk-paper-2: #1f1d1a;
  --mk-surface: #232120;
  --mk-ink: #ece8df;
  --mk-ink-soft: #b3ada2;
  --mk-ink-faint: #8a847a;
  --mk-line: #33302a;
  --mk-accent: #d9a441;
  --mk-accent-hover: #e6b85c;
  --mk-accent-soft: #2e2718;
  --mk-sold: #d46a76;
  --mk-on-accent: #171614;
  --mk-frame: 8px solid #2b2926;
  --mk-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
  --mk-shadow-lg: 0 6px 24px rgba(0, 0, 0, 0.6);
}

/* ---- Basis (nur innerhalb .mk-scope, damit nichts Fremdes umgefärbt wird) --- */
.mk-scope {
  background: var(--mk-paper);
  color: var(--mk-ink);
  font-family: var(--mk-font-text);
  font-size: var(--mk-fs-md);
  line-height: var(--mk-lh-text);
  -webkit-font-smoothing: antialiased;
}
/* :where() haelt die Spezifitaet niedrig, damit Komponenten (.mk-btn, .mk-chip, .mk-wordmark) ihre eigene Farbe behalten */
:where(.mk-scope) a { color: var(--mk-accent); text-decoration: none; }
:where(.mk-scope) a:hover, :where(.mk-scope) a:focus-visible { color: var(--mk-accent-hover); }
.mk-scope :focus-visible { outline: 2px solid var(--mk-accent); outline-offset: 2px; }

/* ---- Typografie ------------------------------------------------------- */
.mk-display, .mk-h1, .mk-h2, .mk-h3 {
  font-family: var(--mk-font-display);
  font-weight: 500;
  line-height: var(--mk-lh-tight);
  letter-spacing: -0.01em;
  color: var(--mk-ink);
  margin: 0;
  text-wrap: balance;
}
.mk-h1 { font-size: clamp(34px, 4vw, 58px); line-height: 1.05; }
.mk-h2 { font-size: clamp(26px, 2.6vw, 34px); }
.mk-h3 { font-size: var(--mk-fs-xl); font-weight: 600; }
.mk-lead { font-size: var(--mk-fs-lg); color: var(--mk-ink-soft); max-width: 34em; }
.mk-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mk-ink-soft);
}
.mk-eyebrow--accent { color: var(--mk-accent); }
.mk-muted { color: var(--mk-ink-soft); }
.mk-faint { color: var(--mk-ink-faint); }
.mk-tabular { font-variant-numeric: tabular-nums; }

/* ---- Layout ------------------------------------------------------------ */
.mk-container { max-width: var(--mk-container); margin-inline: auto; padding-inline: var(--mk-gutter); }
.mk-section { padding-block: var(--mk-sp-9) 0; display: flex; flex-direction: column; gap: var(--mk-sp-5); }
.mk-section__head { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--mk-sp-5); }
.mk-section__head > div { display: flex; flex-direction: column; gap: 6px; }
.mk-grid { display: grid; gap: var(--mk-sp-6) var(--mk-sp-5); align-items: start; }
.mk-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mk-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mk-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.mk-rule { height: 1px; background: var(--mk-line); border: 0; margin: 0; }
@media (max-width: 1024px) {
  :root { --mk-gutter: 32px; }
  .mk-grid--4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  :root { --mk-gutter: 20px; }
  .mk-grid--3, .mk-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mk-grid--2 { grid-template-columns: minmax(0, 1fr); }
  .mk-section { padding-block: var(--mk-sp-7) 0; }
  .mk-section__head { flex-direction: column; align-items: flex-start; }
}

/* ---- Buttons ----------------------------------------------------------- */
.mk-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 24px;
  font-family: var(--mk-font-text);
  font-size: var(--mk-fs-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1px solid var(--mk-accent);
  border-radius: var(--mk-radius);
  color: var(--mk-accent);
  background: transparent;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}
.mk-btn:hover, .mk-btn:focus-visible { background: var(--mk-accent-soft); color: var(--mk-accent-hover); }
.mk-btn--primary { background: var(--mk-accent); color: var(--mk-on-accent); }
.mk-btn--primary:hover, .mk-btn--primary:focus-visible { background: var(--mk-accent-hover); color: var(--mk-on-accent); }
.mk-btn--ink { border-color: var(--mk-ink); color: var(--mk-ink); }
.mk-btn--ink:hover { background: var(--mk-ink); color: var(--mk-paper); }
.mk-btn--sm { min-height: 38px; padding: 0 16px; }
.mk-btn--block { width: 100%; }
.mk-link {
  font-size: var(--mk-fs-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* ---- Badges, Chips, Preise -------------------------------------------- */
.mk-badge {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 8px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: 1px solid var(--mk-accent);
  color: var(--mk-accent);
  white-space: nowrap;
}
.mk-badge--sold { border-color: var(--mk-sold); color: var(--mk-sold); }
.mk-chip {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 14px;
  font-size: 13px;
  border: 1px solid var(--mk-line);
  background: var(--mk-surface);
  color: var(--mk-ink);
  text-decoration: none;
}
.mk-chip:hover { border-color: var(--mk-ink-soft); color: var(--mk-ink); }
.mk-chip--on, .mk-chip[aria-current="true"] { border-color: var(--mk-ink); background: var(--mk-ink); color: var(--mk-paper); }
.mk-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.mk-price {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--mk-accent);
  white-space: nowrap;
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}
.mk-price--request { color: var(--mk-ink-soft); font-weight: 400; font-style: italic; }
.mk-price--sold { color: var(--mk-sold); }
.mk-price--lg { font-family: var(--mk-font-display); font-size: var(--mk-fs-3xl); font-weight: 500; letter-spacing: 0; }

/* ---- Werk-Karte ---------------------------------------------------------
   <a class="mk-work" href="…">
     <img class="mk-work__img" src="…" width="400" height="533" alt="Titel, Technik, Künstler" loading="lazy">
     <div class="mk-work__row">
       <div><div class="mk-work__title">Titel</div><div class="mk-work__artist">Künstler</div></div>
       <span class="mk-price">890 €</span>
     </div>
   </a>
   Das Bild behält sein Seitenverhältnis (kein Beschnitt). */
.mk-work { display: flex; flex-direction: column; gap: 10px; color: var(--mk-ink); text-decoration: none; }
.mk-work__img { width: 100%; height: auto; display: block; border: 1px solid var(--mk-line); background: var(--mk-surface); }
.mk-work__row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.mk-work__title { font-family: var(--mk-font-display); font-size: var(--mk-fs-lg); line-height: 1.25; color: var(--mk-ink); }
.mk-work__artist { font-size: var(--mk-fs-sm); color: var(--mk-ink-soft); }
.mk-work:hover .mk-work__img { box-shadow: var(--mk-shadow); }
.mk-work:hover .mk-work__title { color: var(--mk-accent); }

/* Werkbild mit Passepartout (Hero, Werkseite) */
.mk-frame { border: var(--mk-frame); box-shadow: var(--mk-shadow-lg); display: block; max-width: 100%; height: auto; }

/* ---- Künstler-Karte ----------------------------------------------------- */
.mk-artist {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  padding: var(--mk-sp-5);
  border: 1px solid var(--mk-line);
  background: var(--mk-surface);
}
.mk-artist__photo { width: 96px; height: 96px; object-fit: cover; flex: 0 0 96px; }
.mk-artist__body { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.mk-artist__name { display: flex; gap: 10px; align-items: center; font-family: var(--mk-font-display); font-size: var(--mk-fs-xl); }
.mk-artist__line { font-size: var(--mk-fs-sm); color: var(--mk-ink-soft); }
.mk-artist__meta { font-size: 13px; color: var(--mk-ink-faint); }

/* ---- Vertrauensleiste --------------------------------------------------- */
.mk-trust { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--mk-line); border-bottom: 1px solid var(--mk-line); }
.mk-trust__item { display: flex; gap: 14px; align-items: flex-start; padding: 20px 24px; border-left: 1px solid var(--mk-line); }
.mk-trust__item:first-child { border-left: 0; }
.mk-trust__icon { color: var(--mk-accent); display: inline-flex; margin-top: 2px; flex-shrink: 0; }
.mk-trust__title { font-weight: 700; font-size: var(--mk-fs-sm); }
.mk-trust__text { font-size: 13px; color: var(--mk-ink-soft); }
@media (max-width: 900px) {
  .mk-trust { grid-template-columns: minmax(0, 1fr); }
  .mk-trust__item { border-left: 0; padding: 12px 0; }
}

/* ---- Hinweisbox (z. B. „Anfrage geht direkt an den Künstler“) ----------- */
.mk-note { display: flex; flex-direction: column; gap: 8px; padding: 18px 20px; background: var(--mk-paper-2); font-size: var(--mk-fs-sm); color: var(--mk-ink-soft); }
.mk-note__row { display: flex; gap: 10px; align-items: center; }
.mk-note__row svg { color: var(--mk-accent); flex-shrink: 0; }

/* ---- Formulare ----------------------------------------------------------- */
.mk-field { display: flex; flex-direction: column; gap: 6px; }
.mk-field__label { font-size: var(--mk-fs-xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--mk-ink-soft); }
.mk-input, .mk-scope input[type="text"], .mk-scope input[type="email"], .mk-scope input[type="url"], .mk-scope input[type="search"], .mk-scope textarea, .mk-scope select {
  font-family: var(--mk-font-text);
  font-size: 15px;
  color: var(--mk-ink);
  border: 1px solid var(--mk-line);
  border-radius: var(--mk-radius);
  background: var(--mk-surface);
  padding: 12px 14px;
  width: 100%;
  box-sizing: border-box;
  min-height: 48px;
}
.mk-input:focus, .mk-scope input:focus, .mk-scope textarea:focus { border-color: var(--mk-accent); outline: none; }
.mk-check { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; color: var(--mk-ink-soft); }
.mk-check input { width: 18px; height: 18px; margin: 2px 0 0; flex-shrink: 0; }

/* ---- Tabellen (Vergleich, Werkdaten) -------------------------------------- */
.mk-table { border-collapse: collapse; width: 100%; font-size: 15px; }
.mk-table th, .mk-table td { text-align: left; padding: 14px 16px; border-bottom: 1px solid var(--mk-line); vertical-align: top; }
.mk-table th { font-family: var(--mk-font-display); font-size: var(--mk-fs-xl); font-weight: 500; }
.mk-table td:first-child { color: var(--mk-ink-soft); width: 34%; }
.mk-facts { display: flex; flex-direction: column; border-bottom: 1px solid var(--mk-line); }
.mk-facts__row { display: grid; grid-template-columns: 110px 1fr; gap: 12px; padding: 10px 0; border-top: 1px solid var(--mk-line); font-size: 15px; }
.mk-facts__row > span:first-child { color: var(--mk-ink-soft); }

/* ---- Navigation, Header, Footer ------------------------------------------ */
.mk-header { display: flex; align-items: center; justify-content: space-between; min-height: 76px; padding-inline: var(--mk-gutter); border-bottom: 1px solid var(--mk-line); background: var(--mk-paper); gap: var(--mk-sp-5); }
.mk-wordmark { font-family: var(--mk-font-display); font-size: 26px; letter-spacing: 0.02em; color: var(--mk-ink); text-decoration: none; }
.mk-wordmark sup { font-size: 12px; }
.mk-nav { display: flex; gap: 32px; align-items: center; }
.mk-nav a { font-size: 11px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--mk-ink); text-decoration: none; }
.mk-nav a:hover, .mk-nav a[aria-current="page"], .mk-nav a.mk-nav--on { color: var(--mk-accent); }
.mk-topbar { min-height: 30px; background: var(--mk-ink); color: rgba(255, 255, 255, 0.75); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; display: flex; align-items: center; justify-content: space-between; padding-inline: var(--mk-gutter); }
.mk-topbar a { color: inherit; }
.mk-footer { padding: 56px var(--mk-gutter) 40px; border-top: 1px solid var(--mk-line); background: var(--mk-paper-2); display: flex; flex-direction: column; gap: 40px; }
.mk-footer__cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
.mk-footer__col { display: flex; flex-direction: column; gap: 10px; }
.mk-footer__col a { color: var(--mk-ink-soft); font-size: var(--mk-fs-sm); }
.mk-footer__bottom { display: flex; justify-content: space-between; align-items: center; gap: 16px; font-size: 13px; color: var(--mk-ink-faint); flex-wrap: wrap; }
@media (max-width: 720px) {
  .mk-footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---- Barrierefreiheit ------------------------------------------------------ */
.mk-skip { position: absolute; left: -9999px; top: 0; padding: 12px 16px; background: var(--mk-ink); color: var(--mk-paper); z-index: 1000; }
.mk-skip:focus { left: 16px; top: 16px; }
.mk-visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) {
  .mk-scope *, .mk-scope *::before, .mk-scope *::after { transition: none !important; animation: none !important; }
}