/* ==========================================================================
   wefa Webdesign: Typografie
   Benötigt wefa-fonts.css (Familien) und wefa-tokens.css (Farben).
   Fluide Größen: clamp() zwischen 360 px und 1280 px Viewport-Breite.
   Sprache immer setzen: <html lang="de">  (Voraussetzung für Silbentrennung)
   ========================================================================== */

:root {
  /* Größe / Zeilenhöhe / Laufweite je Stufe */
  --fs-h1: clamp(2.25rem, 1.6rem + 2.9vw, 3.75rem);     /* 36 → 60 px */
  --lh-h1: 1.08;   --ls-h1: -0.02em;
  --fs-h2: clamp(1.75rem, 1.4rem + 1.6vw, 2.5rem);      /* 28 → 40 px */
  --lh-h2: 1.15;   --ls-h2: -0.015em;
  --fs-h3: clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem);    /* 22 → 28 px */
  --lh-h3: 1.25;   --ls-h3: -0.01em;
  --fs-h4: clamp(1.125rem, 1.05rem + 0.35vw, 1.25rem);  /* 18 → 20 px */
  --lh-h4: 1.35;   --ls-h4: 0;
  --fs-lead: clamp(1.125rem, 1.05rem + 0.35vw, 1.375rem); /* 18 → 22 px */
  --lh-lead: 1.5;
  --fs-body: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);  /* 16 → 17 px */
  --lh-body: 1.65;
  --fs-small: 0.875rem;   --lh-small: 1.5;              /* 14 px: Meta, Bildunterschrift */
  --fs-eyebrow: 0.8125rem; --lh-eyebrow: 1.3; --ls-eyebrow: 0.08em;  /* 13 px */
  --fs-button: 1rem;      --fs-button-sm: 0.875rem;     /* 16 / 14 px */
  --fs-nav: 1rem;         --lh-nav: 1.2;
  --fs-label: 0.875rem;   --lh-label: 1.4;

  /* Zeilenlängen */
  --measure:        68ch;   /* Fließtext        */
  --measure-lead:   58ch;   /* Einleitung       */
  --measure-narrow: 45ch;   /* Karten, Teaser   */
}

html {
  font-family: var(--font-body);
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  font-kerning: normal;
  text-rendering: optimizeLegibility;
  hyphenate-limit-chars: 7 3 3;   /* Wort mind. 7 Zeichen, je 3 vor/nach Trennung */
}
body {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: 400;
  color: var(--text);
  background: var(--bg);
}

/* Überschriften: Outfit, keine Silbentrennung, ausgewogene Zeilenumbrüche */
h1, h2, h3, h4 {
  font-family: var(--font-heading);
  color: var(--text);
  hyphens: manual;
  text-wrap: balance;
  margin: 0;
}
h1 { font-weight: 700; font-size: var(--fs-h1); line-height: var(--lh-h1); letter-spacing: var(--ls-h1); max-width: 20ch; }
h2 { font-weight: 700; font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: var(--ls-h2); max-width: 26ch; }
h3 { font-weight: 600; font-size: var(--fs-h3); line-height: var(--lh-h3); letter-spacing: var(--ls-h3); max-width: 32ch; }
h4 { font-weight: 600; font-size: var(--fs-h4); line-height: var(--lh-h4); letter-spacing: var(--ls-h4); }

/* Fließtext: Inter, mit Silbentrennung, keine einzelnen Wörter in der letzten Zeile */
p, li, dd, blockquote {
  hyphens: auto;
  text-wrap: pretty;
  overflow-wrap: break-word;
}
p, li, dd { max-width: var(--measure); }

.lead    { font-size: var(--fs-lead); line-height: var(--lh-lead); max-width: var(--measure-lead); font-weight: 400; }
small, .small, .meta { font-size: var(--fs-small); line-height: var(--lh-small); color: var(--muted); }

/* Eyebrow: kleine Zeile über der Überschrift */
.eyebrow {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--fs-eyebrow);
  line-height: var(--lh-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--accent);        /* auf Dunkel: var(--accent-on-dark) */
}

/* Buttons, Navigation, Formulare */
.btn, button {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--fs-button);
  line-height: 1;
  letter-spacing: 0.005em;
}
.btn-sm { font-size: var(--fs-button-sm); }
.nav a  { font-family: var(--font-heading); font-weight: 600; font-size: var(--fs-nav); line-height: var(--lh-nav); }
label   { font-family: var(--font-body); font-weight: 600; font-size: var(--fs-label); line-height: var(--lh-label); }
input, select, textarea { font-family: var(--font-body); font-weight: 400; font-size: 1rem; }  /* mind. 16 px: kein Zoom auf iOS */
::placeholder { color: var(--muted); opacity: 1; }

/* Fett, Kursiv, Tabellen */
strong, b { font-weight: 600; }
em, i, cite { font-style: italic; font-weight: 400; }   /* Inter Italic, nur wo <em> im Blog vorkommt */
th { font-weight: 600; font-size: var(--fs-small); text-align: left; color: var(--muted); }

/* Zahlen: Preise und Tabellen tabellarisch (gleich breite Ziffern) */
.num, .price, td.num, th.num { font-variant-numeric: tabular-nums; text-align: right; }
.price { font-family: var(--font-heading); font-weight: 700; }   /* Outfit hat tnum */


/* Links */
a { color: var(--accent); text-decoration: underline; text-underline-offset: 0.18em; text-decoration-thickness: 0.08em; }
a:hover { color: var(--accent-h); }