/* ============================================================
   MNCH — Basis-Stylesheet
   Reihenfolge: inter.css → mnch-tokens.css → mnch-base.css
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--mnch-white);
  color: var(--mnch-ink);
  font-family: var(--mnch-font);
  font-weight: var(--mnch-weight-body);
  font-size: var(--mnch-size-base);
  line-height: var(--mnch-leading-body);
  font-feature-settings: 'kern' 1, 'liga' 1, 'calt' 1;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Zahlen in Tabellen, Preisen, Stücklisten immer tabellarisch */
table, .mnch-num, input[type='number'] { font-variant-numeric: tabular-nums; }

/* ---------------- Typografie ---------------- */
h1, h2, h3, h4 {
  font-weight: var(--mnch-weight-title);
  line-height: var(--mnch-leading-title);
  letter-spacing: var(--mnch-track-title);
  margin: 0 0 var(--mnch-space-4);
  text-wrap: balance;
}
h1 { font-size: var(--mnch-size-4xl); line-height: var(--mnch-leading-tight); }
h2 { font-size: var(--mnch-size-2xl); margin-top: var(--mnch-space-12); }
h3 { font-size: var(--mnch-size-xl);  margin-top: var(--mnch-space-8); }
h4 { font-size: var(--mnch-size-lg); }

p, li { max-width: var(--mnch-measure); }
p { margin: 0 0 var(--mnch-space-4); }

.mnch-lead {
  font-size: var(--mnch-size-lg);
  font-weight: var(--mnch-weight-title);
  line-height: 1.45;
  color: var(--mnch-ink);
}

small, .mnch-small, figcaption, .mnch-hint {
  font-size: var(--mnch-size-sm);
  font-weight: var(--mnch-weight-body);   /* unter 14 px nie Light */
  letter-spacing: var(--mnch-track-small);
  color: var(--mnch-slate);
  line-height: 1.5;
}

hr, .mnch-rule {
  border: 0;
  border-top: var(--mnch-border) solid var(--mnch-line);
  margin: var(--mnch-space-12) 0;
}

a {
  color: var(--mnch-ink);
  text-decoration: underline;
  text-decoration-color: var(--mnch-slate);
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
}
a:hover { text-decoration-color: var(--mnch-ink); }

:focus-visible {
  outline: var(--mnch-focus) solid var(--mnch-ink);
  outline-offset: 2px;
}

/* ---------------- Wortmarke als Text ---------------- */
/* Nur wenn kein SVG möglich ist (E-Mail, Signatur, Fallback). */
.mnch-wordmark {
  font-weight: 300;
  letter-spacing: var(--mnch-track-logo);
  margin-right: calc(-1 * var(--mnch-track-logo)); /* Sperrung hinter dem H herausrechnen */
  color: var(--mnch-ink);
  white-space: nowrap;
}

/* ---------------- Logo ---------------- */
.mnch-logo { display: inline-block; line-height: 0; }
.mnch-logo svg, .mnch-logo img { display: block; height: 100%; width: auto; }

/* Schutzraum: 0,25 × Zeichenhöhe auf allen Seiten */
.mnch-logo--clear { padding: calc(var(--mnch-logo-clear) * var(--mnch-logo-size, 40px)); }

/* Mindestgrößen: horizontales Lockup ab 24 px Zeichenhöhe,
   darunter nur das Zeichen verwenden. */
.mnch-logo--header { height: 40px; }
@media (max-width: 640px) { .mnch-logo--header { height: 32px; } }

/* ---------------- Flächen ---------------- */
.mnch-section { padding: var(--mnch-space-24) var(--mnch-space-6); }
.mnch-container { max-width: 1100px; margin-inline: auto; }
.mnch-surface { background: var(--mnch-surface); }

/* Umkehrung: Tiefblau als Grund */
.mnch-inverse {
  background: var(--mnch-ink);
  color: var(--mnch-white);
}
.mnch-inverse a { color: var(--mnch-white); text-decoration-color: rgba(255,255,255,.55); }
.mnch-inverse small, .mnch-inverse .mnch-hint, .mnch-inverse figcaption { color: #B9C2CC; }
.mnch-inverse hr, .mnch-inverse .mnch-rule { border-top-color: rgba(255,255,255,.22); }
.mnch-inverse :focus-visible { outline-color: var(--mnch-white); }

/* ---------------- Formulare ---------------- */
.mnch-field { margin-bottom: var(--mnch-space-6); max-width: 34rem; }
.mnch-label {
  display: block;
  font-size: var(--mnch-size-sm);
  font-weight: var(--mnch-weight-body);
  color: var(--mnch-slate);
  margin-bottom: var(--mnch-space-2);
}
.mnch-input, .mnch-select, .mnch-textarea {
  width: 100%;
  font: inherit;
  color: var(--mnch-ink);
  background: var(--mnch-white);
  border: var(--mnch-border) solid var(--mnch-line);
  border-radius: var(--mnch-radius);
  padding: 0.625rem 0.75rem;
  transition: border-color .12s ease;
}
.mnch-input::placeholder, .mnch-textarea::placeholder { color: var(--mnch-ink-50); }
.mnch-input:hover, .mnch-select:hover, .mnch-textarea:hover { border-color: var(--mnch-slate); }
.mnch-input:focus, .mnch-select:focus, .mnch-textarea:focus {
  border-color: var(--mnch-ink);
  outline: var(--mnch-focus) solid var(--mnch-ink);
  outline-offset: 1px;
}
.mnch-input[aria-invalid='true'] { border-color: var(--mnch-error); }
.mnch-error {
  display: block;
  margin-top: var(--mnch-space-2);
  font-size: var(--mnch-size-sm);
  color: var(--mnch-error);
}
.mnch-textarea { min-height: 8rem; resize: vertical; }

/* ---------------- Buttons ---------------- */
.mnch-btn {
  display: inline-block;
  font: inherit;
  font-weight: var(--mnch-weight-ui);
  font-size: var(--mnch-size-sm);
  line-height: 1;
  padding: 0.8125rem 1.5rem;
  border-radius: var(--mnch-radius);
  border: var(--mnch-border) solid var(--mnch-ink);
  background: var(--mnch-ink);
  color: var(--mnch-white);
  text-decoration: none;
  cursor: pointer;
  transition: background-color .12s ease, color .12s ease;
}
.mnch-btn:hover { background: #16202B; border-color: #16202B; }
.mnch-btn--quiet {
  background: transparent;
  color: var(--mnch-ink);
  border-color: var(--mnch-line);
}
.mnch-btn--quiet:hover { background: var(--mnch-surface); border-color: var(--mnch-slate); }
.mnch-btn[disabled] { opacity: .45; cursor: not-allowed; }

/* ---------------- Tabellen ---------------- */
.mnch-table { width: 100%; border-collapse: collapse; font-size: var(--mnch-size-sm); }
.mnch-table th {
  text-align: left;
  font-weight: var(--mnch-weight-ui);
  color: var(--mnch-slate);
  padding: var(--mnch-space-3) var(--mnch-space-3);
  border-bottom: var(--mnch-border) solid var(--mnch-line);
}
.mnch-table td {
  padding: var(--mnch-space-3);
  border-bottom: var(--mnch-border) solid var(--mnch-line-soft);
}
.mnch-table td.mnch-right, .mnch-table th.mnch-right { text-align: right; }

/* ---------------- Bewegung ---------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}