/* ============================================================================
   Total-Event.de — Theme: Farb- & Typo-Fundament
   ----------------------------------------------------------------------------
   Lokal eingebundene Schriften (OFL, self-hosted — KEINE externen Server):
     • Cormorant Garamond  → Display / Überschriften (feine, edle Serife)
     • Jost                → Fließtext, Navigation, Buttons, Labels (klare Sans)
   Farbwelt: Champagner & Gold auf warmem Creme — edle Wedding-Optik.
   ============================================================================ */

/* @font-face URLs lösen sich relativ zu DIESER Datei auf → funktionieren aus
   jeder HTML, unabhängig von deren Ordnertiefe. Variable Fonts: eine Datei
   deckt den gesamten Gewichtsbereich ab. */
@font-face {
  font-family: 'Cormorant Garamond';
  src: url('fonts/cormorant-garamond.woff2') format('woff2');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Cormorant Garamond';
  src: url('fonts/cormorant-garamond-italic.woff2') format('woff2');
  font-weight: 300 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Jost';
  src: url('fonts/jost.woff2') format('woff2');
  font-weight: 300 600;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---------------------------------------------------------------- COLORS */
  /* Helle Flächen & Tinte ------------------------------------------------- */
  --ivory:      #f7f2ea;  /* Signatur-Seitenhintergrund, warmes Creme        */
  --ivory-2:    #f1e9da;  /* zweite Creme-Stufe (Bänder, sanfte Abschnitte)  */
  --paper:      #fffdf9;  /* Karten / saubere Flächen                        */
  --ink:        #1d1b17;  /* Überschriften & Tinte (warmes Fast-Schwarz)     */
  --espresso:   #17140f;  /* dunkle Kontrast-Bänder                          */
  --espresso-2: #211c14;  /* etwas hellere dunkle Fläche                     */
  --cream-soft: #efe7d7;  /* helle Schrift auf dunklem Grund                 */

  /* Champagner & Gold ----------------------------------------------------- */
  --gold:       #b8924e;  /* der eine, edle Akzent                           */
  --gold-light: #cdab6e;  /* helleres Gold (Hover, Linien auf dunkel)        */
  --gold-deep:  #9c7a3c;  /* tieferes Gold (Text-Akzent auf hell)            */
  --champ:      #e7d6b4;  /* Champagner-Schimmer                             */
  --champ-soft: #f0e6d2;  /* sehr zarter Champagner-Ton                      */

  /* Tinten-Transparenzen (Lesbarkeits-Konvention) ------------------------- */
  --fg:         #1d1b17;
  --fg-muted:   rgba(29, 27, 23, 0.74);  /* Fließtext                        */
  --fg-subtle:  rgba(29, 27, 23, 0.54);  /* Captions, Meta                   */
  --fg-on-dark:        rgba(240, 233, 218, 0.86);
  --fg-on-dark-subtle: rgba(240, 233, 218, 0.60);

  /* Linien / Zustände ----------------------------------------------------- */
  --border-ink:   rgba(29, 27, 23, 0.12);
  --border-gold:  rgba(184, 146, 78, 0.38);
  --border-input: rgba(29, 27, 23, 0.40);
  --border-dark:  rgba(240, 233, 218, 0.18);
  --success:      #6f7d3f;  /* gedämpftes Oliv-Grün für Bestätigungen        */
  --error:        #b4452f;

  /* ------------------------------------------------------------ TYPE ------ */
  --font-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-body:    'Jost', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* ------------------------------------------------ FORM / SPACING -------- */
  --radius-sm:  6px;
  --radius:     10px;
  --radius-lg:  16px;
  --page-width: 1180px;
  --gutter:     clamp(20px, 5vw, 40px);

  /* Motion */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur:  0.45s;

  --shadow-soft: 0 18px 50px -28px rgba(29, 27, 23, 0.45);
  --shadow-card: 0 14px 40px -26px rgba(29, 27, 23, 0.40);
}

/* ============================================================================
   Basis-Elementstile
   ============================================================================ */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { margin: 0; }
body {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: clamp(16px, 1.05vw, 17.5px);
  line-height: 1.7;
  letter-spacing: 0.005em;
  color: var(--fg-muted);
  background: var(--ivory);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
  overflow-x: hidden;
}
/* height:auto verhindert Verzerrung durch die width/height-HTML-Attribute
   (Presentational Hints) – diese sind nur für die Layout-Stabilität (CLS) da. */
img, video { display: block; max-width: 100%; height: auto; }
/* <picture> als Block, damit es sich wie das <img> ins Layout/Grid einfügt */
picture { display: block; }
a { color: inherit; text-decoration: none; }

h1, h2, h3, .display {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: 0.005em;
  color: var(--ink);
  margin: 0 0 0.4em;
  text-wrap: balance;
  overflow-wrap: break-word;
}
h1, .display { font-size: clamp(2.6rem, 6.6vw, 4.6rem); font-weight: 600; }
h2 { font-size: clamp(2rem, 4.6vw, 3.1rem); }
h3 { font-size: clamp(1.35rem, 2.4vw, 1.7rem); }
p  { margin: 0 0 1em; }

/* Eyebrow / Kicker — getrackte Versalien in Jost, gold */
.eyebrow {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.26em;
  color: var(--gold-deep);
  margin: 0 0 1rem;
  display: inline-block;
}

/* Akzent in Display-Serife, kursiv (für eingestreute Wörter) */
.italic-accent { font-style: italic; color: var(--gold-deep); }