/* Typografie von steffen-herr.de (Apple-Stil), gelegt über die unveränderte
   style.css des alten Hubs. Quelle der Werte: steffen-herr src/styles/tokens.css
   (Stand main b183bd2). SF Pro kommt nur als Systemschrift, nie als Webfont.
   Nur Schrift, Größe, Zeilenhöhe, Laufweite und Gewicht, sonst nichts. */
:root {
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display",
    "Inter Variable", Inter, "Helvetica Neue", Arial, sans-serif;
  --text-12: 0.75rem;  --leading-12: 1.33;
  --text-14: 0.875rem; --leading-14: 1.43;
  --text-link: 0.9375rem; --leading-link: 1.33;
  --text-17: 1.0625rem; --leading-17: 1.47;
  --text-21: 1.3125rem; --leading-21: 1.38;
  --text-28: 1.75rem;  --leading-28: 1.14;
  --tracking-body: -0.022em;
  --tracking-label: -0.01em;
  --tracking-title: 0em;
  --weight-title: 600;
  --weight-label: 600;
  --weight-body: 400;
}

body {
  font-family: var(--font-sans);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

button, input { font-family: inherit; }

/* Titel */
.name,
.modal-profile-preview h3 {
  font-size: var(--text-28);
  line-height: var(--leading-28);
  font-weight: var(--weight-title);
  letter-spacing: var(--tracking-title);
}

.modal-header h2 {
  font-size: var(--text-21);
  line-height: var(--leading-21);
  font-weight: var(--weight-title);
  letter-spacing: var(--tracking-title);
}

/* Fließtext */
.tagline {
  font-size: var(--text-17);
  line-height: var(--leading-17);
  font-weight: var(--weight-body);
  letter-spacing: var(--tracking-body);
}

/* Kompakte Link-Labels wie auf apple.com: kleiner als Fließtext, auf Dunkel
   optisch etwas kräftiger und weniger eng laufend. */
.bento-item .btn-text,
.highlight-article .btn-text {
  font-size: var(--text-link);
  line-height: var(--leading-link);
  font-weight: 500;
  letter-spacing: var(--tracking-label);
}

/* Kleine Stufen */
.modal-profile-preview p,
.qr-btn,
.toast,
.qr-hint,
.bento-item.portal .btn-text {
  font-size: var(--text-14);
  line-height: var(--leading-14);
  letter-spacing: var(--tracking-body);
}

.toast { font-weight: var(--weight-label); }

.overlay-subtitle,
.bento-item.wide .btn-subtext,
.feature-location .btn-subtext,
.share-option span,
.footer-meta {
  font-size: var(--text-12);
  line-height: var(--leading-12);
}

.bento-item.quarter .btn-text {
  font-size: var(--text-12);
  line-height: var(--leading-12);
}