/* ==========================================================================
   MAISON KRISTO – Brand Tokens & Basis-Styles (Designlinie "Classique")
   Version 1.0 · November 2026
   Schriften werden lokal ausgeliefert (DSGVO-konform, keine Google-Server).
   Pfade unten gehen davon aus, dass dieser Ordner als /assets/brand/web/ liegt.
   ========================================================================== */

/* ---------- Schriften (selbst gehostet) ---------- */
@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("fonts/cormorant-garamond-400.woff2") format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-style: italic; font-weight: 400; font-display: swap;
  src: url("fonts/cormorant-garamond-400-italic.woff2") format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("fonts/cormorant-garamond-500.woff2") format("woff2"); }
@font-face { font-family: "Jost"; font-style: normal; font-weight: 300; font-display: swap;
  src: url("fonts/jost-300.woff2") format("woff2"); }
@font-face { font-family: "Jost"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("fonts/jost-400.woff2") format("woff2"); }
@font-face { font-family: "Jost"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("fonts/jost-500.woff2") format("woff2"); }

:root {
  /* ---------- Farben ---------- */
  --mk-tinte:          #1E1C1A;  /* Haupttext, dunkle Flächen, Primär-Button */
  --mk-kohle:          #2A2724;  /* Flächen auf Tinte (Karten im Footer etc.) */
  --mk-creme:          #F6F1E9;  /* Haupt-Hintergrund, Text auf Tinte */
  --mk-weiss:          #FFFFFF;  /* Karten, Formularfelder */
  --mk-leinen:         #E6DFD3;  /* Linien, Rahmen, ruhige Sekundärflächen */
  --mk-stein:          #6B645B;  /* Sekundärtext auf hell (5,2:1 auf Creme) */
  --mk-sand:           #B5AB9C;  /* Sekundärtext auf dunkel (7,5:1 auf Tinte) */
  --mk-messing:        #A6865A;  /* Akzent: Logo-K, Ziellinien, Icons. Als Text nur auf Tinte oder ab 24px */
  --mk-messing-dunkel: #7F6440;  /* Links & Akzenttext auf hell (4,9:1 auf Creme) */

  /* Semantische Zuordnung (helle Standardseite) */
  --mk-bg:        var(--mk-creme);
  --mk-surface:   var(--mk-weiss);
  --mk-text:      var(--mk-tinte);
  --mk-text-2:    var(--mk-stein);
  --mk-line:      var(--mk-leinen);
  --mk-accent:    var(--mk-messing);
  --mk-link:      var(--mk-messing-dunkel);

  /* ---------- Typografie ---------- */
  --mk-font-display: "Cormorant Garamond", Garamond, "Times New Roman", serif;
  --mk-font-body:    "Jost", "Futura", "Century Gothic", "Helvetica Neue", Arial, sans-serif;

  --mk-fs-h1:    clamp(2.75rem, 1.9rem + 3.6vw, 4.5rem);   /* 44 → 72px */
  --mk-fs-h2:    clamp(2rem, 1.6rem + 1.6vw, 2.75rem);     /* 32 → 44px */
  --mk-fs-h3:    clamp(1.5rem, 1.35rem + 0.6vw, 1.875rem); /* 24 → 30px */
  --mk-fs-lead:  1.25rem;   /* 20px */
  --mk-fs-body:  1.0625rem; /* 17px */
  --mk-fs-small: 0.875rem;  /* 14px */
  --mk-fs-label: 0.75rem;   /* 12px, Versalien */

  --mk-track-caps:  0.22em; /* Sperrung der Wortmarke – für Versal-Überschriften in Cormorant */
  --mk-track-label: 0.18em; /* Sperrung für Labels, Navigation, Buttons in Jost */

  /* ---------- Raster & Abstände (8er-System) ---------- */
  --mk-space-1: 4px;  --mk-space-2: 8px;   --mk-space-3: 12px; --mk-space-4: 16px;
  --mk-space-5: 24px; --mk-space-6: 32px;  --mk-space-7: 48px; --mk-space-8: 64px;
  --mk-space-9: 96px; --mk-space-10: 128px;
  --mk-container: 1200px;
  --mk-measure: 65ch;
  --mk-radius: 0;           /* Classique: keine Rundungen */
  --mk-hairline: 1px;
}

/* ---------- Basis ---------- */
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--mk-bg);
  color: var(--mk-text);
  font-family: var(--mk-font-body);
  font-weight: 300;
  font-size: var(--mk-fs-body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 {
  font-family: var(--mk-font-display);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: 0.01em;
  text-wrap: balance;
  margin: 0 0 var(--mk-space-5);
}
h1 { font-size: var(--mk-fs-h1); }
h2 { font-size: var(--mk-fs-h2); }
h3 { font-size: var(--mk-fs-h3); font-weight: 500; }
p  { max-width: var(--mk-measure); margin: 0 0 var(--mk-space-4); }
strong { font-weight: 500; }
em { font-family: var(--mk-font-display); font-style: italic; font-size: 1.12em; }

a { color: var(--mk-link); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--mk-text); }
:focus-visible { outline: 1px solid var(--mk-messing-dunkel); outline-offset: 3px; }

/* ---------- Markentypische Elemente ---------- */

/* Versal-Überschrift im Stil der Wortmarke */
.mk-caps {
  font-family: var(--mk-font-display);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--mk-track-caps);
}

/* Kleines Label / Eyebrow über Überschriften */
.mk-label {
  font-family: var(--mk-font-body);
  font-weight: 400;
  font-size: var(--mk-fs-label);
  text-transform: uppercase;
  letter-spacing: var(--mk-track-label);
  color: var(--mk-link);
}

/* Messing-Ziellinie: kurzer Strich unter Überschriften (zitiert die Linie im Logo) */
.mk-rule { display: block; width: 64px; height: 0; border: 0; border-top: 1px solid var(--mk-messing); margin: var(--mk-space-5) 0; }
.mk-rule--center { margin-inline: auto; }

/* ---------- Buttons ---------- */
.mk-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--mk-space-2);
  font-family: var(--mk-font-body); font-weight: 400; font-size: 0.8125rem;
  text-transform: uppercase; letter-spacing: var(--mk-track-label);
  padding: 15px 30px; border: 1px solid var(--mk-tinte); border-radius: var(--mk-radius);
  background: var(--mk-tinte); color: var(--mk-creme); text-decoration: none; cursor: pointer;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.mk-btn:hover { background: var(--mk-messing-dunkel); border-color: var(--mk-messing-dunkel); color: var(--mk-weiss); }
.mk-btn--outline { background: transparent; color: var(--mk-tinte); }
.mk-btn--outline:hover { background: var(--mk-tinte); border-color: var(--mk-tinte); color: var(--mk-creme); }

/* ---------- Dunkle Sektionen (Footer, Highlight-Bänder) ---------- */
.mk-dark {
  --mk-bg: var(--mk-tinte);
  --mk-surface: var(--mk-kohle);
  --mk-text: var(--mk-creme);
  --mk-text-2: var(--mk-sand);
  --mk-line: #3A3632;
  --mk-link: var(--mk-messing);
  background: var(--mk-bg); color: var(--mk-text);
}
.mk-dark .mk-btn { background: var(--mk-creme); color: var(--mk-tinte); border-color: var(--mk-creme); }
.mk-dark .mk-btn:hover { background: var(--mk-messing); border-color: var(--mk-messing); color: var(--mk-tinte); }
.mk-dark .mk-btn--outline { background: transparent; color: var(--mk-creme); }

/* ---------- Logo im Header ---------- */
.mk-logo { display: inline-block; line-height: 0; }
.mk-logo img { display: block; height: 48px; width: auto; }   /* horizontal: ca. 227px breit */
.mk-logo .mk-logo__mono { display: none; height: 40px; }
@media (max-width: 480px) {
  .mk-logo .mk-logo__full { display: none; }
  .mk-logo .mk-logo__mono { display: block; }
}

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }