/* ============================================================
   fairback Design System — Colors & Type
   Richtung B "Drehmoment" · verabschiedet 08/2026
   ============================================================ */

@import url('./inter-fontface.css'); /* Inter, offline, woff2 inline */

:root {
  /* -------- BRAND PALETTE -------- */
  --fb-oliv:        #595950;  /* Leitfarbe. Dunkle Fläche, trägt ganze Seiten. */
  --fb-oliv-deep:   #4A4A43;  /* gedrückter Zustand, Overlays auf Oliv */
  --fb-paper:       #F4F2EB;  /* helle Fläche. Papier, nie reines Weiß. */
  --fb-ink:         #222523;  /* Text auf Papier. Kein Schwarz. */
  --fb-lime:        #D7DF45;  /* Messmarke. CTA, eine Kennzahl, Fußlinie. */
  --fb-lime-press:  #C6CE36;

  /* -------- WARME NEUTRALEN -------- */
  --fb-stone-100: #F4F2EB;    /* = paper */
  --fb-stone-200: #E3E1D9;    /* Balkenspur, leise Fläche auf Papier */
  --fb-stone-300: #D5D5CF;    /* Sekundärtext auf Oliv, Balkensegment */
  --fb-stone-400: #C4C4BD;    /* Balkensegment, betont */
  --fb-stone-500: #B9B9B1;    /* Skalenstriche, Haarlinien */
  --fb-stone-600: #8E8E86;
  --fb-stone-700: #6E6E66;

  /* -------- SEMANTIK · Papierfläche -------- */
  --fb-bg:        var(--fb-paper);
  --fb-fg1:       var(--fb-ink);        /* Primärtext */
  --fb-fg2:       var(--fb-oliv);       /* Sekundärtext, Labels, Eyebrow */
  --fb-border:            rgba(34,37,35,.16);
  --fb-border-strong:     rgba(34,37,35,.28);

  /* -------- SEMANTIK · Olivfläche -------- */
  --fb-bg-oliv:   var(--fb-oliv);
  --fb-fg1-oliv:  var(--fb-paper);
  --fb-fg2-oliv:  var(--fb-stone-300);
  --fb-border-oliv:        rgba(244,242,235,.24);
  --fb-border-oliv-soft:   rgba(244,242,235,.14);

  /* -------- TYPE -------- */
  --fb-font: 'Inter', -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --fb-fw-regular: 400;
  --fb-fw-medium:  500;   /* alle Headlines und Kennzahlen */
  --fb-fw-semibold:600;   /* UI, Buttons, Tabellenwerte */
  --fb-fw-bold:    700;   /* nur Eyebrows und Claim */

  /* Skala 1280×720 Fläche (Deck/Dokument) */
  --fb-fs-hero:    59px;  /* Cover-Headline */
  --fb-fs-h2:      47px;  /* Seiten-Headline */
  --fb-fs-figure:  70px;  /* Ergebniszahl, einmal je Seite */
  --fb-fs-lead:    30px;  /* Versprechen unter der Headline */
  --fb-fs-stat:    34px;  /* Kennzahlenband */
  --fb-fs-lg:      16.5px;
  --fb-fs-base:    16px;
  --fb-fs-sm:      14px;  /* Buttons */
  --fb-fs-xs:      12.5px;
  --fb-fs-2xs:     11.5px;
  --fb-fs-eyebrow: 10.5px;
  --fb-fs-micro:   10px;  /* Fußzeile, Paginierung */

  --fb-lh-hero:    1.04;
  --fb-lh-h2:      1.03;
  --fb-lh-figure:  .9;
  --fb-lh-body:    1.62;
  --fb-lh-snug:    1.5;

  --fb-tr-hero:   -.032em;
  --fb-tr-figure: -.04em;
  --fb-tr-stat:   -.028em;
  --fb-tr-lead:   -.024em;
  --fb-tr-tight:  -.01em;
  --fb-tr-wide:    .02em;
  --fb-tr-eyebrow: .2em;

  /* -------- GEOMETRIE -------- */
  --fb-radius: 0;              /* kein Radius. Nirgends. */
  --fb-hairline: 1px;
  --fb-rule-lime: 1px;         /* Limelinie über dem Fuß */

  /* -------- RASTER -------- */
  --fb-page-w: 1280px;
  --fb-page-h: 720px;
  --fb-pad-x: 76px;
  --fb-pad-top: 44px;
  --fb-pad-bottom: 30px;
  --fb-col-gap: 60px;
  --fb-split: 1fr 1.06fr;      /* Zweispalter: rechte Spalte trägt die Rechnung */

  --fb-s-1: 4px;  --fb-s-2: 8px;  --fb-s-3: 12px; --fb-s-4: 16px;
  --fb-s-5: 20px; --fb-s-6: 26px; --fb-s-7: 32px; --fb-s-8: 44px;
  --fb-s-9: 60px; --fb-s-10: 76px;

  /* -------- SCHATTEN -------- */
  --fb-shadow-page: 0 18px 44px rgba(0,0,0,.34);  /* nur Seitenblatt im Betrachter */

  /* -------- MOTION -------- */
  --fb-dur: 160ms;
  --fb-ease: cubic-bezier(.22,.61,.36,1);
}

/* ============================================================
   Basis
   ============================================================ */
html, body {
  margin: 0;
  background: var(--fb-bg);
  color: var(--fb-fg1);
  font-family: var(--fb-font);
  font-size: var(--fb-fs-base);
  line-height: var(--fb-lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3 {
  margin: 0;
  font-weight: var(--fb-fw-medium);
  letter-spacing: var(--fb-tr-hero);
  line-height: var(--fb-lh-h2);
  color: inherit;
  text-wrap: pretty;
}
h1 { font-size: var(--fb-fs-hero); line-height: var(--fb-lh-hero); }
h2 { font-size: var(--fb-fs-h2); }
h3 { font-size: var(--fb-fs-stat); letter-spacing: var(--fb-tr-stat); }

p { margin: 0; text-wrap: pretty; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--fb-oliv); }
.fb-oliv a:hover, .fb-on-oliv a:hover { color: var(--fb-lime); }

/* Jede Zahl läuft tabellarisch. Ohne Ausnahme. */
.fb-num, .fb-stat, .fb-figure, .fb-page-no, table td, table th { font-variant-numeric: tabular-nums; }

/* ============================================================
   Flächen
   ============================================================ */
.fb-paper { background: var(--fb-paper); color: var(--fb-ink); }
.fb-oliv  { background: var(--fb-oliv);  color: var(--fb-paper); }

/* Seitenblatt im Deck / Dokument */
.fb-page {
  position: relative;
  width: var(--fb-page-w);
  height: var(--fb-page-h);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: var(--fb-pad-top) var(--fb-pad-x) var(--fb-pad-bottom);
  font-family: var(--fb-font);
}

/* ============================================================
   Bausteine
   ============================================================ */
.fb-eyebrow {
  font-size: var(--fb-fs-eyebrow);
  font-weight: var(--fb-fw-bold);
  letter-spacing: var(--fb-tr-eyebrow);
  text-transform: uppercase;
  color: var(--fb-fg2);
}
.fb-oliv .fb-eyebrow { color: var(--fb-lime); }
.fb-eyebrow-quiet { color: var(--fb-oliv); }
.fb-oliv .fb-eyebrow-quiet { color: var(--fb-stone-300); }

.fb-lead {
  font-size: var(--fb-fs-lead);
  font-weight: var(--fb-fw-medium);
  letter-spacing: var(--fb-tr-lead);
  color: var(--fb-lime);
  font-variant-numeric: tabular-nums;
}
.fb-paper .fb-lead { color: var(--fb-oliv); }

.fb-body { font-size: var(--fb-fs-base); line-height: var(--fb-lh-body); color: var(--fb-fg2); max-width: 588px; }
.fb-oliv .fb-body { color: var(--fb-stone-300); }

.fb-btn {
  display: inline-flex;
  align-items: center;
  gap: 13px;
  background: var(--fb-lime);
  color: var(--fb-ink);
  font-size: var(--fb-fs-sm);
  font-weight: var(--fb-fw-semibold);
  padding: 15px 24px;
  border: none;
  border-radius: var(--fb-radius);
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--fb-dur) var(--fb-ease), gap var(--fb-dur) var(--fb-ease);
}
.fb-btn:hover { background: var(--fb-lime-press); gap: 17px; color: var(--fb-ink); }
.fb-btn-ghost {
  background: transparent;
  color: inherit;
  border: 1px solid var(--fb-border-strong);
  padding: 14px 23px;
}
.fb-oliv .fb-btn-ghost { border-color: var(--fb-border-oliv); }
.fb-btn-ghost:hover { background: transparent; border-color: var(--fb-lime); color: inherit; }

/* Kennzahlenband: drei Werte, getrennt durch Haarlinien */
.fb-statband {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  padding-top: 30px;
  border-top: var(--fb-hairline) solid var(--fb-border);
}
.fb-oliv .fb-statband { border-top-color: var(--fb-border-oliv); }
.fb-statband > * + * { padding-left: 28px; border-left: var(--fb-hairline) solid var(--fb-border); }
.fb-oliv .fb-statband > * + * { border-left-color: var(--fb-border-oliv); }
.fb-stat { font-size: var(--fb-fs-stat); font-weight: var(--fb-fw-medium); letter-spacing: var(--fb-tr-stat); }
.fb-stat-label { margin-top: 9px; font-size: var(--fb-fs-2xs); letter-spacing: var(--fb-tr-wide); color: var(--fb-fg2); }
.fb-oliv .fb-stat-label { color: var(--fb-stone-300); }

/* Ergebnisblock: eine Zahl je Seite, Lime auf Oliv */
.fb-result { background: var(--fb-oliv); color: var(--fb-paper); padding: 26px 28px 24px; }
.fb-figure { font-size: var(--fb-fs-figure); font-weight: var(--fb-fw-medium); letter-spacing: var(--fb-tr-figure); line-height: var(--fb-lh-figure); color: var(--fb-lime); }
.fb-result-label { margin-top: 14px; font-size: var(--fb-fs-xs); letter-spacing: var(--fb-tr-wide); color: var(--fb-stone-300); }

/* Aufschlüsselungsbalken */
.fb-bar { display: flex; height: 48px; gap: 2px; }
.fb-bar-seg   { background: var(--fb-stone-300); }
.fb-bar-seg-2 { background: var(--fb-stone-400); }
.fb-bar-track { display: flex; height: 48px; background: var(--fb-stone-200); }
.fb-bar-fill  { background: var(--fb-lime); display: flex; align-items: center; justify-content: space-between; padding: 0 14px; font-size: var(--fb-fs-sm); font-weight: var(--fb-fw-semibold); color: var(--fb-ink); }

/* Skalenleiste: fünferweise ein langer Strich */
.fb-scale { display: flex; justify-content: space-between; }
.fb-scale span { width: 1px; height: 5px; background: var(--fb-stone-500); }
.fb-scale span:nth-child(5n+1) { height: 9px; }

/* Zeile einer Rechnung */
.fb-row { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; padding: 12px 0; border-bottom: var(--fb-hairline) solid var(--fb-border); font-size: var(--fb-fs-base); }
.fb-row-total { border-bottom: none; font-weight: var(--fb-fw-semibold); }
.fb-row .fb-num { min-width: 96px; text-align: right; }

/* Kopf und Fuß jeder Seite */
.fb-head { display: flex; justify-content: space-between; align-items: center; flex: none; }
.fb-page-no { font-size: var(--fb-fs-micro); font-weight: var(--fb-fw-bold); letter-spacing: var(--fb-tr-eyebrow); color: var(--fb-fg2); }
.fb-oliv .fb-page-no { color: var(--fb-stone-300); }
.fb-foot { flex: none; margin-top: 26px; }
.fb-foot-rule { height: var(--fb-rule-lime); background: var(--fb-lime); }
.fb-foot-line { display: flex; justify-content: space-between; align-items: baseline; gap: 40px; padding-top: 12px; font-size: var(--fb-fs-micro); color: var(--fb-fg2); }
.fb-oliv .fb-foot-line { color: var(--fb-stone-300); }
.fb-claim { font-weight: var(--fb-fw-bold); letter-spacing: var(--fb-tr-eyebrow); text-transform: uppercase; white-space: nowrap; }

/* Website-Raster */
.fb-container { max-width: 1240px; margin-inline: auto; padding-inline: 32px; }
.fb-section { padding-block: 96px; }