/* TESSAR Brand v2.0 — Tokens · SPIEGEL von 04_design-system/tokens.css (dort pflegen) */

/* Fonts werden lokal via fonts.css geladen (kein externer @import). */

:root {
  /* ─── Brand-Kernfarben ────────────────────────────────────────── */
  --brand-paper:        #F6F4EE;  /* Hauptgrund Pearl, warm */
  --brand-anthrazit:    #1F1E1C;  /* Block-Akzent, minimal warm neutral */
  --brand-ink:          #0E0E0E;  /* nur für reine Text-Anwendung */
  --brand-accent:       #8C2333;  /* Bordeaux-Primary (Pearl) – 08.06.2026 einen Ticken heller f. Lesbarkeit auf hellem Grund */
  --brand-accent-soft:  #9C2E3E;  /* Bordeaux-Soft (Anthrazit) – unverändert, passt auf dunkel */

  /* ─── Grauskala ───────────────────────────────────────────────── */
  --grau-50:   #FAFAF7;
  --grau-100:  #EFEDE6;
  --grau-200:  #DDD9CF;
  --grau-300:  #C6C1B5;
  --grau-500:  #7A766D;
  --grau-700:  #3C3A35;
  --grau-900:  #1A1815;

  /* ─── Funktional ──────────────────────────────────────────────── */
  --positiv:  #2B5A33;
  --warnung:  #9C6A1F;
  --stop:     #7A1F22;

  /* ─── Typografie ──────────────────────────────────────────────── */
  /* H1 (Entscheidung 08.06.2026): Headlines in Fraunces („entschärft"),
     Mengentext bleibt Geist. Achsen-Tuning via font-variation-settings
     in mobile.css (greift voll mit Fraunces-Variable-Font). */
  --font-display:  'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body:     'Geist', system-ui, sans-serif;
  --font-serif:    'Fraunces', 'Times New Roman', serif;
  --font-mono:     'JetBrains Mono', 'Menlo', monospace;

  /* ─── Brand-Anchor (3px gradient line) ────────────────────────── */
  --brand-anchor: linear-gradient(90deg, #8C2333 0%, #9C2E3E 100%);

  /* ─── Spacing (8-point grid) ──────────────────────────────────── */
  --space-1:   8px;
  --space-2:  16px;
  --space-3:  24px;
  --space-4:  32px;
  --space-5:  48px;
  --space-6:  64px;
  --space-7:  96px;
  --space-8: 128px;
}

/* ─── Variante A · Pearl-Haupt ─────────────────────────────────── */
.surface-pearl {
  background: var(--brand-paper);
  color: var(--grau-700);
}

/* ─── Variante B · Anthrazit-Haupt ─────────────────────────────── */
.surface-anthrazit {
  background: var(--brand-anthrazit);
  color: var(--brand-paper);
}

/* ─── Anthrazit-Block (embed in Variante A) ────────────────────── */
.block-anthrazit {
  background: var(--brand-anthrazit);
  color: var(--brand-paper);
}

/* ─── Element defaults ──────────────────────────────────────────── */
html, body {
  margin: 0;
  background: var(--brand-paper);
  color: var(--grau-700);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

.brand-anchor {
  height: 3px;
  background: var(--brand-anchor);
}

/* ─── Type roles ────────────────────────────────────────────────── */
.display {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.05;
}
.display em, em.accent {
  font-family: inherit;
  font-style: normal;
  color: var(--brand-accent-soft);
  font-weight: 400;
}

.h1 { font-size: 56px; }
.h2 { font-size: 40px; }
.h3 { font-size: 28px; }

.body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
}

.mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

.overline {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--grau-500);
}

/* ─── Logo wordmark ─────────────────────────────────────────────── */
.wordmark {
  font-family: var(--font-body);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  display: inline-block;
  position: relative;
}
/* Wortmarke folgt dem Hintergrund (Korrektur 21.05.2026): auf Pearl
   Anthrazit, auf Anthrazit Pearl. Bordeaux ist die Linie darunter,
   nicht die Letter. */
.wordmark.on-pearl     { color: var(--brand-anthrazit); }
.wordmark.on-anthrazit { color: var(--brand-paper); }
/* Logo-Ankerlinie · IMMER nur unter „TE" (glyphen-verankert, 09.06.2026).
   Markup: <span class="wordmark"><span class="wm-te">TE</span>SSAR</span> */
.wordmark .wm-te { position: relative; }
.wordmark .wm-te::after {
  content: ""; position: absolute;
  left: 0; right: 0.18em; bottom: -0.5em; height: 3px;
  background: var(--brand-anchor);
}

/* ─── Buttons ───────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 14px;
  line-height: 1;
  padding: 14px 24px;
  border-radius: 0;
  cursor: pointer;
  text-decoration: none;
  border: 0;
  transition: background-color 150ms ease-out, color 150ms ease-out;
}
.btn-primary {
  background: var(--brand-accent);
  color: var(--brand-paper);
}
.btn-primary:hover { background: #5C1620; }

.btn-outline-pearl {
  background: transparent;
  color: var(--brand-anthrazit);
  border: 1px solid var(--brand-anthrazit);
  padding: 13px 24px;
}
.btn-outline-pearl:hover { background: rgba(31,30,28,0.04); }

.btn-outline-anthrazit {
  background: transparent;
  color: var(--brand-paper);
  border: 1px solid var(--brand-paper);
  padding: 13px 24px;
}
.btn-outline-anthrazit:hover { background: rgba(246,244,238,0.06); }