/* ==========================================================================
   LiebesBrief — „Mitternachtsbrief"
   Ein Brief, bei Kerzenlicht geöffnet: dunkler Samt, Kerzengold, Siegelwachs,
   cremefarbenes Papier. Mobile-first, self-hosted Fonts, CSP-kompatibel.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Schriften (self-hosted, variable, latin subset)
   -------------------------------------------------------------------------- */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('/fonts/cormorant-garamond.woff2') format('woff2');
}

@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 300 700;
  font-display: swap;
  src: url('/fonts/cormorant-garamond-italic.woff2') format('woff2');
}

@font-face {
  font-family: 'EB Garamond';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/fonts/eb-garamond.woff2') format('woff2');
}

@font-face {
  font-family: 'EB Garamond';
  font-style: italic;
  font-weight: 400 800;
  font-display: swap;
  src: url('/fonts/eb-garamond-italic.woff2') format('woff2');
}

@font-face {
  font-family: 'Great Vibes';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/great-vibes.woff2') format('woff2');
}

/* --------------------------------------------------------------------------
   Design-Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Nacht & Samt */
  --night-deep: #120b10;
  --night: #1c1118;
  --night-soft: #281823;
  --night-line: rgba(233, 200, 126, 0.14);

  /* Kerzengold */
  --gold: #d4a44c;
  --gold-bright: #e9c87e;
  --gold-deep: #a87b2f;
  --gold-faint: rgba(212, 164, 76, 0.35);

  /* Siegelwachs & Rosé */
  --wax: #7e1f38;
  --wax-deep: #5c1426;
  --rose: #c14b66;
  --rose-soft: #e08fa4;
  --rose-blush: #f0c1ce;

  /* Briefpapier */
  --paper: #f5ecdc;
  --paper-warm: #eee0c8;
  --paper-line: #ddcbab;
  --paper-shadow: rgba(10, 5, 8, 0.55);

  /* Text auf dunklem Grund */
  --text: #f2e7d5;
  --text-dim: #c0aa90;

  /* Legacy-Variablen (werden von JS-Inline-Styles referenziert).
     Auf Papier-Kontext abgestimmt; dunkle Kontexte überschreiben sie lokal. */
  --ink: #38271d;
  --muted: #7d6650;
  --accent: var(--gold);
  --heart-strong: #b53d59;
  --heart-soft: #d97e95;
  --heart-blush: #f0c1ce;
  --heart-pop: #c95876;

  /* Typografie */
  --font-display: 'Cormorant Garamond', 'Iowan Old Style', 'Palatino', Georgia, serif;
  --font-body: 'EB Garamond', 'Iowan Old Style', Georgia, serif;
  --font-script: 'Great Vibes', 'Snell Roundhand', cursive;

  --max-width: 720px;
  --shadow-card: 0 24px 60px rgba(8, 4, 7, 0.55);
  --shadow-paper: 0 30px 70px rgba(8, 4, 7, 0.65), 0 4px 18px rgba(8, 4, 7, 0.4);
  --ease-romantic: cubic-bezier(0.22, 1, 0.36, 1);
}

/* Dunkle Kontexte: hier zeigen die Legacy-Variablen helle Werte,
   damit JS-gesetzte Farben (var(--ink) etc.) lesbar bleiben. */
.admin-body,
.exchange-modal {
  --ink: #f0e4d2;
  --muted: #b39e88;
  --heart-strong: #e58aa0;
  --heart-soft: #e9c87e;
}

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

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background:
    radial-gradient(110% 80% at 50% -10%, rgba(212, 164, 76, 0.13), transparent 60%),
    radial-gradient(90% 70% at 85% 105%, rgba(126, 31, 56, 0.28), transparent 65%),
    radial-gradient(70% 60% at 8% 90%, rgba(193, 75, 102, 0.12), transparent 60%),
    linear-gradient(175deg, var(--night) 0%, var(--night-deep) 70%, #0d0709 100%);
  background-attachment: fixed;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.75;
  letter-spacing: 0.01em;
  padding: 24px 18px 56px;
  overflow-x: hidden;
}

/* Kerzenschein-Atmen */
body::before {
  content: "";
  position: fixed;
  inset: -20%;
  pointer-events: none;
  background: radial-gradient(42% 30% at 50% 18%, rgba(233, 200, 126, 0.09), transparent 70%);
  animation: candleBreath 7s ease-in-out infinite alternate;
  z-index: 0;
}

@keyframes candleBreath {
  from { opacity: 0.65; transform: scale(1); }
  to   { opacity: 1;    transform: scale(1.06); }
}

/* Feines Korn über allem */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  opacity: 0.045;
  mix-blend-mode: overlay;
  z-index: 9999;
}

::selection {
  background: rgba(193, 75, 102, 0.45);
  color: #fff6ea;
}

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

.page {
  position: relative;
  max-width: var(--max-width);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 30px;
  z-index: 1;
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 18px 0 0;
  text-align: center;
}

.subtitle {
  margin: 0;
  order: -1;
  font-family: var(--font-script);
  font-size: clamp(1.5rem, 5.5vw, 1.9rem);
  font-weight: 400;
  color: var(--gold-bright);
  text-shadow: 0 0 24px rgba(233, 200, 126, 0.35);
  letter-spacing: 0.02em;
}

.title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2.2rem, 9vw, 3.4rem);
  line-height: 1.12;
  color: var(--text);
  letter-spacing: 0.01em;
  text-wrap: balance;
}

/* Goldene Zierlinie mit Punkt */
.hero::after {
  content: "";
  width: min(240px, 60vw);
  height: 22px;
  margin-top: 14px;
  background:
    radial-gradient(circle at 50% 50%, var(--gold-bright) 0 2.5px, transparent 3px),
    linear-gradient(90deg, transparent, var(--gold-faint) 18%, var(--gold) 50%, var(--gold-faint) 82%, transparent) 50% 50% / 100% 1px no-repeat;
}

.intro,
.body-copy,
.closing {
  margin: 0;
  font-size: 1.08rem;
  line-height: 1.85;
  color: var(--ink);
  white-space: pre-line;
}

.intro {
  font-size: 1.14rem;
}
/* --------------------------------------------------------------------------
   Utilities
   -------------------------------------------------------------------------- */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

:focus-visible {
  outline-color: var(--gold-bright);
}