/* ==========================================================================
   MarbeOne v2 — Schriften und Gestaltungswerte
   Selbst gehostet, keine externen Aufrufe.
   Bodoni Moda: SIL Open Font License 1.1
   Archivo:     SIL Open Font License 1.1
   ========================================================================== */

/* --- Schriften ----------------------------------------------------------- */

@font-face {
  font-family: 'Bodoni Moda';
  src: url('../fonts/bodoni-moda-latin-400-normal.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Bodoni Moda';
  src: url('../fonts/bodoni-moda-latin-400-italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Bodoni Moda';
  src: url('../fonts/bodoni-moda-latin-500-normal.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Archivo';
  src: url('../fonts/archivo-latin-400-normal.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Archivo';
  src: url('../fonts/archivo-latin-500-normal.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* --- Gestaltungswerte ---------------------------------------------------- */

:root {
  /* Farbrollen. Kontrastwerte nach WCAG 2.1 geprüft, alle über 4,5:1. */
  --mo-kalk:         #EFF0EC;  /* Grundfläche aller Seiten                   */
  --mo-dunkel:       #1F2220;  /* Fusszeile, Overlay-Menü, ruhige Bänder     */
  --mo-text:         #232624;  /* Text auf Hell             — 13,4:1         */
  --mo-sekundaer:    #616661;  /* Ortsangaben, Beschriftungen —  5,1:1       */
  --mo-akzent:       #6E5433;  /* Schaltflächen, aktive Zustände —  6,2:1    */
  --mo-akzent-hell:  #C3A882;  /* NUR auf dunklen Flächen   —  7,1:1         */
  --mo-linie:        #D6D8D2;  /* Trennlinien auf Hell                       */
  --mo-linie-dunkel: rgba(239, 240, 236, .20);

  /* Schriftfamilien */
  --mo-schrift-titel: 'Bodoni Moda', Georgia, serif;
  --mo-schrift-text:  'Archivo', system-ui, -apple-system, sans-serif;

  /* Schriftgrade. Die Leiter gilt seitenweit, nicht je Abschnitt. */
  --mo-grad-1: clamp(38px, 6.4vw, 86px);  /* Seitentitel                     */
  --mo-grad-2: clamp(28px, 3.7vw, 46px);  /* Abschnittsüberschrift           */
  --mo-grad-3: clamp(21px, 2.2vw, 26px);  /* Unterabschnitt                  */
  --mo-grad-4: 20px;                      /* kleine Überschrift              */
  --mo-grad-text: 17px;                   /* Fliesstext                      */
  --mo-grad-klein: 14px;                  /* Bildunterschrift, Ortsangabe    */
  --mo-grad-marke: 13px;                  /* Eyebrow, gesperrt, Grossbuchst. */

  /* Abstandsrhythmus zwischen Abschnitten */
  --mo-raum: clamp(88px, 11vw, 150px);

  /* Inhaltsbreite */
  --mo-breite: 1180px;
}

/* --- Grundregeln --------------------------------------------------------- */

body {
  background: var(--mo-kalk);
  color: var(--mo-text);
  font-family: var(--mo-schrift-text);
  font-weight: 400;
  font-size: var(--mo-grad-text);
  line-height: 1.68;
}

h1, h2, h3 {
  font-family: var(--mo-schrift-titel);
  font-weight: 400;
  letter-spacing: .005em;
}

h1 { font-size: var(--mo-grad-1); line-height: 1.06; }
h2 { font-size: var(--mo-grad-2); line-height: 1.14; }
h3 { font-size: var(--mo-grad-3); line-height: 1.24; }

/* Die Antiqua bleibt den grossen Graden vorbehalten. Unter 20px bricht
   ihr Strichkontrast weg — dort trägt ausschliesslich Archivo. */

.mo-eyebrow {
  font-family: var(--mo-schrift-text);
  font-size: var(--mo-grad-marke);
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--mo-sekundaer);
}

/* Fokus muss immer sichtbar bleiben — niemals outline: none. */
:focus-visible {
  outline: 2px solid var(--mo-akzent);
  outline-offset: 3px;
}

/* Berührflächen mindestens 44 Pixel. */
a.mo-knopf, button.mo-knopf {
  display: inline-block;
  min-height: 44px;
  padding: 15px 30px;
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  background: var(--mo-akzent);
  color: var(--mo-kalk);
  border: 1px solid var(--mo-akzent);
}

/* Auf dunklen Flächen trägt der Akzent nicht — dort Kalkweiss verwenden. */
.mo-dunkel {
  background: var(--mo-dunkel);
  color: var(--mo-kalk);
}
.mo-dunkel .mo-eyebrow { color: var(--mo-akzent-hell); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}