/* ============================================================
   @font-face — lokal gehostet (DSGVO-konform), WOFF2
   ============================================================ */
@font-face {
  font-family: 'Cormorant Garamond';
  src: url('../fonts/cormorant-garamond/cormorant-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Cormorant Garamond';
  src: url('../fonts/cormorant-garamond/cormorant-400i.woff2') format('woff2');
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Cormorant Garamond';
  src: url('../fonts/cormorant-garamond/cormorant-500.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter/inter-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter/inter-500.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter/inter-600.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}

/* ============================================================
   Custom Properties — Fallback (= modern theme)
   ============================================================ */
:root {
  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-body:    'Inter', system-ui, sans-serif;
  --radius:       2px;
  --transition:   0.6s cubic-bezier(0.4, 0, 0.2, 1);

  /* Fallback = modern theme values */
  --bg:              #F4F1E8;
  --bg-soft:         #FFFFFF;
  --bg-deep:         #DCD4BD;
  --surface:         #FFFFFF;
  --ink:             #233E4E;
  --ink-soft:        #445A6A;
  --accent:          #233E4E;
  --accent-deep:     #15262F;
  --accent-on-dark:  #BCC2C3;
  --highlight:       #5D6140;
  --invert-bg:       #233E4E;
  --invert-text:     #F4F1E8;
  --invert-accent:   #BCC2C3;
  --border:          rgba(35, 62, 78, 0.18);
}

/* ============================================================
   Reset & Base
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  overflow-x: clip;
  background: var(--bg);
  color: var(--ink);
  color-scheme: light;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--ink);
  line-height: 1.6;
  font-weight: 400;
  transition: background var(--transition), color var(--transition);
  overflow-x: clip;
  width: 100%;
  min-width: 320px;
  -webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.1;
}

a { color: inherit; text-decoration: none; }

/* ============================================================
   Fokus-Indikatoren (WCAG AA / BFSG)
   ============================================================ */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}

/* ============================================================
   prefers-reduced-motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* ============================================================
   Utility
   ============================================================ */
.eyebrow {
  font-size: 11px;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 500;
  font-family: var(--font-body);
  display: inline-block;
}