/* ============================================================================
   ALENA & DANIEL WEDDINGS — Design System (Schwester-System der Babyfotografie)
   Gleiche DNA wie „Babyfotografie bei Alena D." — umgemünzt auf Hochzeit:
   BRONZE als warmer Metall-Akzent (statt Tannengrün)
   ANTHRAZIT als dunkles, elegantes Element (statt Espresso)
   ============================================================================ */

/* ------------------------------------------------------------------ Fonts -- */
@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal; font-weight: 500; font-display: swap;
  src: url("fonts/cormorant-500.woff2") format("woff2");
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: italic; font-weight: 500; font-display: swap;
  src: url("fonts/cormorant-italic-500.woff2") format("woff2");
}
@font-face {
  font-family: "Jost";
  font-style: normal; font-weight: 300; font-display: swap;
  src: url("fonts/jost-300.woff2") format("woff2");
}
@font-face {
  font-family: "Jost";
  font-style: normal; font-weight: 400; font-display: swap;
  src: url("fonts/jost-400.woff2") format("woff2");
}
@font-face {
  font-family: "Jost";
  font-style: normal; font-weight: 500; font-display: swap;
  src: url("fonts/jost-500.woff2") format("woff2");
}

/* ----------------------------------------------------------------- Tokens -- */
:root {
  /* — Flächen — helles warmes Papier, wie beim Schwester-System — */
  --paper:        #FAF8F4;
  --card:         #FFFEFC;
  --inset:        #F3EEE6;
  --sand:         #E9DFD0;

  /* — Bronzeskala — DER Hochzeits-Akzent (warm, metallisch, edel) — */
  --bronze-soft:  #EFE3D3;  /* zarte Bronze-Tint-Fläche */
  --bronze-light: #C9A87C;  /* helle Bronze — Linien-Akzente, Icons */
  --bronze:       #A57B4F;  /* HAUPT-AKZENT — Buttons, Links, Highlights */
  --bronze-deep:  #85613C;  /* Hover, Text-Akzente */

  /* — Anthrazit — das dunkle, elegante Element — */
  --anthracite:       #2C3033;  /* dunkle Bänder, Footer, Kontrastflächen */
  --anthracite-soft:  #3C4145;  /* Karten auf Anthrazit, Hover */

  /* — Erdtöne (Erbe des Schwester-Systems, sparsamer) — */
  --clay:          #C3AE97;
  --mocha:         #9A8168;

  /* — Text — */
  --ink:          #26272A;  /* Headlines — kühler als beim Baby-System */
  --ink-soft:     #5D5A54;
  --ink-mute:     #98928A;
  --on-dark:      #F5F1EA;
  --on-dark-soft: #C9C2B6;

  /* — Linien — */
  --line:         #E9E2D7;
  --line-strong:  #D3C8B7;

  /* — Typografie — identisch zum Schwester-System (bewusst KEIN Script) — */
  --font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-body:    "Jost", "Helvetica Neue", Arial, sans-serif;

  --fw-body:      300;
  --fw-body-mid:  400;
  --fw-display:   500;

  --fs-eyebrow:   0.72rem;
  --fs-caption:   0.82rem;
  --fs-body:      1.02rem;
  --fs-lead:      1.18rem;
  --fs-h4:        1.5rem;
  --fs-h3:        2rem;
  --fs-h2:        2.7rem;
  --fs-h1:        3.6rem;
  --fs-display:   4.8rem;

  --lh-tight:     1.08;
  --lh-snug:      1.28;
  --lh-body:      1.62;

  --ls-eyebrow:   0.3em;
  --ls-label:     0.22em;
  --ls-button:    0.2em;
  --ls-tight:     -0.01em;

  --radius-xs:   3px;
  --radius-sm:   6px;
  --radius-md:   9px;
  --radius-lg:   14px;
  --radius-pill: 999px;

  /* — Schatten — warm getönt, Anthrazit-Basis — */
  --shadow-xs: 0 1px 2px rgba(44, 48, 51, 0.05);
  --shadow-sm: 0 4px 14px rgba(44, 48, 51, 0.07);
  --shadow-md: 0 10px 30px rgba(44, 48, 51, 0.09), 0 2px 6px rgba(44, 48, 51, 0.04);
  --shadow-lg: 0 24px 60px rgba(44, 48, 51, 0.14), 0 6px 16px rgba(44, 48, 51, 0.06);

  --ease:        cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur:         320ms;
  --dur-fast:    180ms;

  --measure:     62ch;
  --container:   1120px;
}

/* -------------------------------------------------------------- Base/Reset - */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink-soft);
  font-family: var(--font-body);
  font-weight: var(--fw-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  color: var(--ink);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  margin: 0 0 0.4em;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: clamp(2rem, 4.2vw, 2.7rem); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); line-height: var(--lh-snug); }

p { margin: 0 0 1em; max-width: var(--measure); }
a { color: var(--bronze-deep); text-decoration-color: var(--line-strong); text-underline-offset: 3px; }

.lead    { font-size: var(--fs-lead); line-height: var(--lh-snug); color: var(--ink-soft); }
.caption { font-size: var(--fs-caption); color: var(--ink-mute); }
.sig     { font-family: var(--font-display); font-style: italic; font-weight: 500; }

.eyebrow {
  font-family: var(--font-body); font-weight: 400;
  font-size: var(--fs-eyebrow); letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase; color: var(--bronze);
}
.eyebrow--onDark { color: var(--bronze-light); }

/* ------------------------------------------------------------------ Button - */
.btn {
  --btn-bg: var(--bronze);
  --btn-fg: var(--on-dark);
  --btn-bd: transparent;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6em;
  font-family: var(--font-body); font-weight: 400;
  font-size: 0.8rem; letter-spacing: var(--ls-button); text-transform: uppercase;
  padding: 0.95em 1.9em;
  border-radius: var(--radius-pill);
  background: var(--btn-bg); color: var(--btn-fg);
  border: 1px solid var(--btn-bd);
  cursor: pointer; text-decoration: none;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease), transform var(--dur-fast) var(--ease);
  box-shadow: var(--shadow-xs);
}
.btn:hover { box-shadow: var(--shadow-sm); transform: translateY(-1px); }
.btn--bronze        { --btn-bg: var(--bronze); --btn-fg: var(--on-dark); }
.btn--bronze:hover  { --btn-bg: var(--bronze-deep); }
.btn--anthracite       { --btn-bg: var(--anthracite); --btn-fg: var(--on-dark); }
.btn--anthracite:hover { --btn-bg: var(--anthracite-soft); }
.btn--outline       { --btn-bg: transparent; --btn-fg: var(--bronze-deep); --btn-bd: var(--bronze); box-shadow: none; }
.btn--outline:hover { --btn-bg: var(--bronze-soft); --btn-bd: var(--bronze-deep); }
.btn--onDark        { --btn-bg: var(--on-dark); --btn-fg: var(--anthracite); }
.btn--onDark:hover  { --btn-bg: #fff; }

/* ------------------------------------------------------------------- Badge - */
.badge {
  display: inline-flex; align-items: center; gap: 0.5em;
  font-family: var(--font-body); font-weight: 400;
  font-size: 0.66rem; letter-spacing: var(--ls-label); text-transform: uppercase;
  padding: 0.5em 0.95em; border-radius: var(--radius-pill);
  background: var(--bronze-soft); color: var(--bronze-deep);
  border: 1px solid var(--line);
}
.badge__dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; opacity: 0.7; }

/* ----------------------------------------------------------------- Divider - */
/* runde Punkte statt Rauten — Haus-Regel */
.rh-div { display: flex; align-items: center; gap: 14px; }
.rh-div::before, .rh-div::after { content: ""; flex: 1; height: 1px; background: var(--line-strong); }
.rh-div i { width: 6px; height: 6px; border-radius: 50%; background: var(--bronze-light); flex: none; }

/* -------------------------------------------------------------------- Card - */
.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 32px;
}