/* =========================================================
   base.css — Typo-Basis & Body-Defaults raw&royal
   Setzt tokens.css und reset.css voraus.
   ========================================================= */

/* -------------------------------------------------------
   @font-face — Inter (self-hosted)
   Dateien erwartet unter: assets/fonts/inter/
   Variablen-Font-Variante empfohlen: InterVariable.woff2
------------------------------------------------------- */

@font-face {
  font-family: 'Inter';
  src: url('../assets/fonts/inter/InterVariable.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('../assets/fonts/inter/InterVariable-Italic.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

/* -------------------------------------------------------
   @font-face — Playfair Display (self-hosted)
   Dateien erwartet unter: assets/fonts/playfair/
------------------------------------------------------- */

@font-face {
  font-family: 'Playfair Display';
  src: url('../assets/fonts/playfair/PlayfairDisplay-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Playfair Display';
  src: url('../assets/fonts/playfair/PlayfairDisplay-Italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Playfair Display';
  src: url('../assets/fonts/playfair/PlayfairDisplay-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Playfair Display';
  src: url('../assets/fonts/playfair/PlayfairDisplay-Black.woff2') format('woff2');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* -------------------------------------------------------
   HTML & BODY
------------------------------------------------------- */

html {
  font-size: 100%;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-sans);
  font-weight: var(--weight-regular);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--ink);
  background-color: var(--paper);
}

/* Dunkle Sections erben korrekte Farben */
.section--dark {
  color: var(--paper);
  background-color: var(--surface-dark);
}

.section--mid {
  color: var(--paper);
  background-color: var(--surface-mid);
}

/* -------------------------------------------------------
   TYPOGRAFISCHE HIERARCHIE
------------------------------------------------------- */

/* Display — Playfair, nur für große Gesten */
.display {
  font-family: var(--font-serif);
  font-weight: var(--weight-heavy);
  font-size: var(--text-hero);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}

.display--gold {
  font-family: var(--font-serif);
  font-weight: var(--weight-heavy);
  font-size: var(--text-hero);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--gold);
}

/* H1 */
h1, .h1 {
  font-family: var(--font-serif);
  font-weight: var(--weight-bold);
  font-size: var(--text-3xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}

/* H2 */
h2, .h2 {
  font-family: var(--font-serif);
  font-weight: var(--weight-bold);
  font-size: var(--text-2xl);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
}

/* H3 */
h3, .h3 {
  font-family: var(--font-sans);
  font-weight: var(--weight-bold);
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-normal);
}

/* H4 */
h4, .h4 {
  font-family: var(--font-sans);
  font-weight: var(--weight-medium);
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
}

/* H5 / H6 — Label-Ebene */
h5, .h5,
h6, .h6 {
  font-family: var(--font-sans);
  font-weight: var(--weight-medium);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
}

/* -------------------------------------------------------
   FLIESSTEXT
------------------------------------------------------- */

p {
  max-width: var(--container-text);
  font-size: var(--text-base);
  line-height: var(--leading-loose);
  color: inherit;
}

p + p {
  margin-top: var(--space-4);
}

/* Lead — größerer Einführungstext */
.lead {
  font-size: var(--text-md);
  line-height: var(--leading-loose);
  color: var(--muted);
}

.section--dark .lead,
.section--mid .lead {
  color: rgba(250, 250, 247, 0.65);
}

/* -------------------------------------------------------
   INLINE-ELEMENTE
------------------------------------------------------- */

strong, b {
  font-weight: var(--weight-bold);
}

em, i {
  font-style: italic;
}

/* Übertype / Label — kleines Etikett über Headlines */
.overtype {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: var(--space-3);
}

/* Gold-Akzent für einzelne Wörter in Headlines */
.gold {
  color: var(--gold);
}

/* -------------------------------------------------------
   LINKS
------------------------------------------------------- */

a {
  transition: color var(--duration-fast) var(--ease-out),
              opacity var(--duration-fast) var(--ease-out);
}

a:hover {
  color: var(--gold);
}

/* -------------------------------------------------------
   HORIZONTALE TRENNLINIE
------------------------------------------------------- */

hr {
  border: none;
  border-top: 1px solid var(--border);
  margin: var(--space-12) 0;
}

/* -------------------------------------------------------
   SELECTION
------------------------------------------------------- */

::selection {
  background-color: var(--gold);
  color: var(--ink);
}

/* -------------------------------------------------------
   SCROLLBAR (Webkit) — dezent zum Branding passend
------------------------------------------------------- */

::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background: var(--ink);
}

::-webkit-scrollbar-thumb {
  background: var(--gold-deep);
  border-radius: var(--radius-pill);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--gold);
}

/* -------------------------------------------------------
   FOKUS — sichtbar & markig
------------------------------------------------------- */

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

/* -------------------------------------------------------
   UTILITY — Visibility / SR-only
------------------------------------------------------- */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}