/* =========================================================================
   Hochzeits-Website — Design-System
   Quelle der Wahrheit: DOKU.md §1. Look = Einladungskarte (Kartenliebe).
   Aufbau dieser Datei:
     1. Design-Tokens (Farben, Schriften)  2. Grundlagen  3. Bausteine
   ========================================================================= */

/* ---- Schriften: LOKAL eingebettet (kein CDN, Konvention: wenige Abhängigkeiten)
   Die Dateien gehören in site/fonts/. Solange sie fehlen, greift der serifen-
   Fallback – die Seite bleibt lesbar, sieht aber noch nicht final aus.        */
@font-face {
  font-family: "Inria Serif";
  src: url("fonts/InriaSerif-Light.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "EB Garamond";
  src: url("fonts/EBGaramond-Italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

/* ---- 1. Design-Tokens ---------------------------------------------------- */
:root {
  --kraft:      #A59A89;   /* Hintergrund: Kraftpapier / Taupe */
  --kraft-tief: #928777;   /* etwas dunkler – für Tiefe an den Rändern */
  --gold:       #B99C55;   /* mattes Gold (Karten-Veredelung) – NUR für den Schimmer-Effekt */
  --gold-hell:  #efe0ad;   /* heller Schimmer-Höhepunkt */
  /* Gold OHNE Schimmer-Effekt (Buttons, Links, reduzierte Bewegung) braucht einen
     eigenen, dunkleren Ton: #B99C55 hat auf --kraft nur Kontrast 1.05:1 (praktisch
     unsichtbar) – #4c3812 kommt auf 4.0:1, damit gut lesbar und noch klar "gold". */
  --gold-kontrast: #4c3812;
  --dunkel:     #231a0f;   /* für Text AUF hellem Gold-Hintergrund (Button-Hover) */
  --weiss:      #ffffff;

  --serif-titel: "Inria Serif", "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --serif-text:  "EB Garamond", Georgia, "Times New Roman", serif;

  --sperrung-titel: 0.32em;  /* weite Buchstabenabstände wie auf der Karte */
  --sperrung-text:  0.07em;  /* Buchstabenabstand für Hero-Fliesstext (Spruch, Datum) */
  --wortabstand:    0.55em;  /* doppelter Abstand zwischen Wörtern auf der ersten Seite */
  --breite-max: 44rem;       /* Lesebreite */
}

/* ---- 2. Grundlagen ------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  background-color: var(--kraft);
  color: var(--weiss);
  font-family: var(--serif-text);
  font-style: italic;
  font-size: clamp(1.05rem, 0.9rem + 0.7vw, 1.25rem);
  line-height: 1.75;
  text-align: center;
  -webkit-font-smoothing: antialiased;
  /* Echtes Kraftpapier statt Flächenfarbe: Kachel direkt aus der Einladungskarte
     ausgeschnitten (Design/Einladungskarte/Karte_front.png, ruhige Fläche ohne Motiv/Text),
     nahtlos kachelbar gemacht. Die Flächenfarbe --kraft bleibt als Lade-/Fallback-Ton.
     Dazu wie bisher eine leichte Vignette an den Rändern (Karte ist an den Ecken dunkler). */
  background-color: var(--kraft);
  background-image: radial-gradient(120% 90% at 50% 40%, transparent 55%, rgba(0,0,0,0.12) 100%),
                     url("pergament.jpg");
  background-repeat: no-repeat, repeat;
}

/* ---- 3. Bausteine -------------------------------------------------------- */

/* Gold-Schimmer: ein heller Streifen wandert langsam über die Buchstaben.
   Bei "Bewegung reduzieren" -> statisches Gold (Pflicht-Regel, DOKU §1.3).   */
.gold-schimmer {
  background-image: linear-gradient(100deg,
    var(--gold) 0%, var(--gold) 38%, var(--gold-hell) 50%, var(--gold) 62%, var(--gold) 100%);
  background-size: 220% auto;
  background-position: 0% center;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: schimmer 7s linear infinite;
}
@keyframes schimmer { to { background-position: -220% center; } }

/* --- Hero --- */
.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 4rem 1.5rem;
  gap: 1.4rem;
}

.berge { width: min(85%, 640px); height: auto; margin-bottom: 0.5rem; }

.paar {
  font-family: var(--serif-titel);
  font-weight: 300;
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: var(--sperrung-titel);
  font-size: clamp(2rem, 1.1rem + 4.2vw, 4.2rem);
  line-height: 1.1;
  margin: 0;
  /* Padding-right gleicht das letzte Sperr-Leerzeichen aus, damit es zentriert bleibt */
  padding-left: var(--sperrung-titel);
}
/* "&" ist auf der Karten-Vorderseite golden wie die Namen selbst – kein Sonderfall mehr,
   die Sperrung von .paar reicht für den Wortabstand rund um "&" bereits aus */

/* Spruch & Datum: wie auf der Karte mit Buchstaben- UND Wortabstand ("erste Seite") */
.spruch {
  margin: 0.4rem 0 0;
  max-width: var(--breite-max);
  letter-spacing: var(--sperrung-text);
  word-spacing: var(--wortabstand);
}

/* Datum: weiss & kursiv wie auf der Karten-Vorderseite (nicht gold) */
.datum {
  font-style: italic;
  color: var(--weiss);
  letter-spacing: var(--sperrung-text);
  word-spacing: var(--wortabstand);
  font-size: 1.15em;
  margin: 0.6rem 0 0;
  padding-left: 0.14em;
}

/* --- Countdown --- */
.countdown {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(1rem, 4vw, 2.6rem);
  margin: 1.2rem 0 0.4rem;
}
.cd-block { display: flex; flex-direction: column; align-items: center; }
.cd-zahl {
  font-family: var(--serif-titel);
  font-style: normal;
  font-size: clamp(1.8rem, 1.2rem + 2.4vw, 3rem);
  color: var(--weiss);
  line-height: 1;
}
.cd-label {
  font-size: 0.72rem;
  text-transform: lowercase;
  letter-spacing: 0.28em;
  color: var(--weiss);
  opacity: 0.75;
  margin-top: 0.5rem;
  padding-left: 0.28em;
}

/* --- Aufruf-Knopf (Call to action) --- */
.cta {
  display: inline-block;
  margin-top: 0.8rem;
  padding: 0.85rem 2.4rem;
  font-family: var(--serif-titel);
  font-style: normal;
  text-transform: lowercase;
  letter-spacing: 0.22em;
  font-size: 1rem;
  color: var(--gold-kontrast);
  text-decoration: none;
  border: 1px solid var(--gold-kontrast);
  border-radius: 2px;
  background: transparent;
  transition: background-color 0.35s ease, color 0.35s ease, border-color 0.35s ease;
}
.cta:hover, .cta:focus-visible {
  background-color: var(--gold);
  border-color: var(--gold);
  color: var(--dunkel);
  outline: none;
}
.cta[aria-disabled="true"] { opacity: 0.75; cursor: default; }
.cta[aria-disabled="true"]:hover { background: transparent; color: var(--gold); }

/* --- Inhalts-Blöcke --- */
.block {
  max-width: var(--breite-max);
  margin: 0 auto;
  padding: clamp(3rem, 8vw, 6rem) 1.5rem;
}

.ueberschrift {
  font-family: var(--serif-titel);
  font-weight: 300;
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: var(--sperrung-titel);
  font-size: clamp(1.5rem, 1.1rem + 1.8vw, 2.4rem);
  margin: 0 0 1.8rem;
  padding-left: var(--sperrung-titel);
}

.fliesstext { margin: 0 auto 1.2rem; max-width: 38rem; }
.platzhalter { opacity: 0.8; }
.hinweis { font-size: 0.9rem; opacity: 0.75; margin-top: 1rem; }

/* --- Ort & Übernachtung --- */
.ort-name { font-size: 1.2em; margin-bottom: 0.3rem; }
.ort-adresse { opacity: 0.85; letter-spacing: 0.06em; margin-bottom: 1.4rem; }
.karten-link {
  font-style: normal;
  color: var(--gold-kontrast);
  text-decoration: none;
  letter-spacing: 0.12em;
  border-bottom: 1px solid rgba(76, 56, 18, 0.55);  /* --gold-kontrast, halbtransparent */
  padding-bottom: 2px;
  transition: border-color 0.3s ease;
}
.karten-link:hover, .karten-link:focus-visible { border-bottom-color: var(--gold-kontrast); outline: none; }

/* --- Tagesablauf (zwei Tage) --- */
/* Tages-Zwischentitel ("freitag, 27. august") – trennt die beiden Tage sichtbar */
.tag-label {
  font-style: normal;
  color: var(--gold-kontrast);
  letter-spacing: 0.18em;
  font-size: 0.9rem;
  margin: 2rem 0 0.4rem;
  padding-left: 0.18em;
}
.tag-label:first-of-type { margin-top: 0; }

.ablauf { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(255,255,255,0.15); }
.ablauf li {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 1rem 0;
  border-bottom: 1px solid rgba(255,255,255,0.15);
}
/* Programmpunkt und Uhrzeit beide weiss & kursiv wie auf der Karte (nur die Überschrift ist gold) */
.ablauf-punkt { font-size: 1.12em; }
.ablauf-zeit { color: var(--weiss); opacity: 0.85; letter-spacing: 0.1em; }
/* Platzhalter-Hinweis (Uhrzeit noch zu bestätigen) – dezent, aber lesbar */
.platzhalter-zeit { opacity: 0.7; font-size: 0.8em; }

/* --- Footer --- */
.footer { padding: 4rem 1.5rem 3rem; }
.footer-paar {
  font-family: var(--serif-titel);
  font-weight: 300;
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: var(--sperrung-titel);
  font-size: 1.3rem;
  margin: 0 0 0.5rem;
  padding-left: var(--sperrung-titel);
}
.footer-datum { color: var(--gold-kontrast); font-size: 0.95rem; margin: 0; }

/* --- Sanftes Einblenden beim Scrollen (nur wenn Bewegung erlaubt) --- */
.block { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.8s ease, transform 0.8s ease; }
  .reveal.sichtbar { opacity: 1; transform: none; }
}

/* =========================================================================
   BARRIEREFREIHEIT: Bewegung reduzieren -> alle Animationen aus,
   statisches Gold statt Schimmer (Pflicht-Regel DOKU §1.3).
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .gold-schimmer {
    animation: none;
    background: none;
    -webkit-text-fill-color: var(--gold-kontrast);
    color: var(--gold-kontrast);
  }
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* --- Sprachumschalter (DE/EN) — dezent, obere Ecke --- */
.sprachwahl {
  position: fixed;
  top: 1rem;
  right: 1.2rem;
  z-index: 2;
  font-family: var(--serif-titel);
  font-style: normal;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: lowercase;
  color: var(--gold-kontrast);
  text-decoration: none;
  opacity: 0.85;
}
.sprachwahl:hover, .sprachwahl:focus-visible { opacity: 1; outline: none; }