/* === VERMÖGENSBUND · BASE === */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,700;0,900;1,400;1,500;1,700&family=DM+Sans:wght@300;400;500;600;700&display=swap');

:root {
  /* === COLORS === */
  --bg:           #141920;
  --bg-2:         #1C2433;
  --bg-3:         #212D3F;
  --surface:      #FAFAF7;
  --surface-2:    #F0EBDF;
  --accent:       #C9A96E;
  --accent-light: #E8D5A8;
  --accent-dim:   rgba(201,169,110,0.15);
  --accent-mid:   rgba(201,169,110,0.4);
  --text:         #EDE9E1;
  --text-muted:   #8A9AAD;
  --text-dark:    #1a1a1a;
  --text-dark-muted: #5a5e63;
  --border:       rgba(201,169,110,0.18);
  --border-sub:   rgba(255,255,255,0.07);
  --border-dark:  rgba(20,25,32,0.12);

  /* === TYPE === */
  --serif:    'Playfair Display', Georgia, serif;
  --sans:     'DM Sans', system-ui, sans-serif;

  /* === SCALE === */
  --max-w:    1200px;
  --gutter:   clamp(1.25rem, 4vw, 3rem);
  --radius:   0;
  --radius-sm: 4px;

  /* === MOTION === */
  --ease: cubic-bezier(.2,.7,.2,1);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
}
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.container {
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* === SECTION SURFACES === */
.surface-light {
  background: var(--surface);
  color: var(--text-dark);
}
.surface-light .muted { color: var(--text-dark-muted); }
.surface-dark {
  background: var(--bg);
  color: var(--text);
}

/* === REVEAL ANIMATIONS === */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .9s var(--ease), transform .9s var(--ease);
}
.reveal.in {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}