/* Base typography & layout primitives */

body {
  font-family: var(--font-sans);
  font-size: var(--fs-md);
  color: var(--color-ink-900);
  background: var(--surface-page);
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: -0.015em;
  color: var(--color-ink-900);
}
h1 { font-size: var(--fs-5xl); letter-spacing: -0.025em; }
h2 { font-size: var(--fs-4xl); letter-spacing: -0.02em; }
h3 { font-size: var(--fs-2xl); }
h4 { font-size: var(--fs-xl); }
p  { color: var(--color-ink-700); }

a { color: var(--color-primary-600); transition: color var(--t-fast) var(--ease-out); }
a:hover { color: var(--color-primary-500); }

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}
.container-narrow {
  width: 100%;
  max-width: var(--container-narrow);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

section { padding-block: clamp(3.5rem, 6vw, 6rem); }
section.tight { padding-block: clamp(2rem, 4vw, 3.5rem); }
section.soft  { background: var(--surface-soft); }
section.dark  { background: var(--gradient-dark); color: var(--color-ink-100); }
section.dark h1, section.dark h2, section.dark h3, section.dark h4 { color: var(--color-white); }
section.dark p { color: var(--color-ink-200); }

.eyebrow {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-size: var(--fs-sm); font-weight: var(--fw-semibold);
  color: var(--color-primary-600); letter-spacing: 0.08em;
  text-transform: uppercase;
}
.eyebrow::before {
  content: ""; width: 24px; height: 2px;
  background: var(--gradient-cta); border-radius: 2px;
}

.lead {
  font-size: var(--fs-lg);
  color: var(--color-ink-500);
  line-height: var(--lh-base);
  max-width: 60ch;
}

.section-head {
  text-align: center;
  max-width: 760px;
  margin: 0 auto var(--space-7);
}
.section-head .eyebrow { justify-content: center; }
.section-head .lead { margin: var(--space-4) auto 0; }

.grid { display: grid; gap: var(--space-5); }
.grid-2 { grid-template-columns: 1fr; }
.grid-3 { grid-template-columns: 1fr; }
.grid-4 { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 720px) {
  .grid-2 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .grid-4 { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 1024px) {
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
}

.stack > * + * { margin-top: var(--space-4); }
.stack-lg > * + * { margin-top: var(--space-6); }

.text-center { text-align: center; }
.muted { color: var(--color-ink-500); }

/* ---- Print (Studien-PDF via Chrome DevTools printToPDF) ----
   Seitenraender + Kopf-/Fusszeile (Logo, Seitenzahlen) kommen aus scripts/studien-pdf.js;
   hier deshalb KEINE @page-margins definieren. CI nach Vorlage-Angebot-DeepRank. */
@media print {
  @page { size: A4; }
  .site-header, .site-footer, .cta-band, .skip-link,
  form.form, .card:has(> form.form), .mobile-nav, .crumbs { display: none !important; }
  body { background: #fff; font-size: 10.5pt; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .container, .container-narrow { max-width: 100% !important; padding-inline: 0 !important; }

  /* Deckblatt im Stil der Angebots-Vorlage: grosses zentriertes Logo, Titel, orange Linie */
  .blog-article-header { text-align: center; break-after: page; padding-top: 40pt; }
  .blog-article-header .container::before {
    content: "";
    display: block;
    height: 70pt;
    margin: 0 auto 28pt;
    background: url("../img/deeprank-logo.webp") no-repeat center / contain;
  }
  .blog-article-header .blog-article__cat {
    display: inline-block;
    color: #f5811f;
    background: none;
    font-size: 15pt;
    font-weight: 700;
    letter-spacing: 0.08em;
    margin-bottom: 10pt;
  }
  .blog-article-header h1 { font-size: 23pt; line-height: 1.25; }
  .blog-article-header .lead { max-width: 100%; }
  .blog-article-header .container {
    border-bottom: 2px solid #f5811f;
    padding-bottom: 24pt;
  }

  /* Kapitel-Ueberschriften in Brand-Orange mit Linie (wie Angebots-Vorlage) */
  .blog-content h2 {
    color: #c46412;
    border-bottom: 1.5px solid #f5811f;
    padding-bottom: 4pt;
    break-after: avoid;
  }
  .blog-content h3 { color: #9a4d00; }

  /* Tabellen: auf Seitenbreite bringen statt abschneiden */
  .blog-table-wrap { overflow: visible !important; }
  .blog-table { width: 100%; font-size: 8pt; line-height: 1.35; }
  .blog-table th, .blog-table td {
    min-width: 0 !important;
    padding: 3pt 4pt;
    overflow-wrap: break-word;
    hyphens: auto;
  }
  .blog-table thead th { background: #fff5eb !important; color: #4a2400 !important; }
  .blog-table small { font-size: 7pt; }

  /* Lange Tabellen duerfen ueber Seiten brechen — Zeilen bleiben ganz, Kopf wiederholt sich */
  .blog-table tr { break-inside: avoid; }
  .blog-table thead { display: table-header-group; }

  figure, .blog-callout { break-inside: avoid; }
  h2, h3 { break-after: avoid; }
  a { color: inherit; text-decoration: none; }
}