:root {
  --cream: #faf6f0;
  --cream-shade: #f1eade;
  --ink: #2b2620;
  --ink-soft: #6b6055;
  --green: #33473b;
  --green-deep: #1f2e26;
  --gold: #b99a5b;
  --line: #ddd2c0;
  --serif: Georgia, "Iowan Old Style", "Palatino Linotype", "Times New Roman", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--sans);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 400;
  color: var(--green-deep);
  margin: 0;
}

a { color: var(--green); }

img { max-width: 100%; display: block; }

/* ── Sticky Nav ───────────────────────────────── */
.site-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.1rem 1.75rem;
  transition: background 0.3s var(--ease), padding 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

.site-nav.scrolled {
  background: rgba(250, 246, 240, 0.92);
  backdrop-filter: blur(10px);
  padding: 0.7rem 1.75rem;
  box-shadow: 0 1px 0 var(--line);
}

.monogram {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.4rem;
  color: var(--cream);
  text-decoration: none;
  letter-spacing: 0.02em;
  transition: color 0.3s var(--ease);
}

.site-nav.scrolled .monogram { color: var(--green-deep); }

.nav-links {
  display: flex;
  align-items: center;
  gap: 1.75rem;
}

.nav-links a {
  color: var(--cream);
  text-decoration: none;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.9;
  transition: color 0.3s var(--ease), opacity 0.2s ease;
}

.site-nav.scrolled .nav-links a { color: var(--ink); }
.nav-links a:hover { opacity: 1; color: var(--gold); }

.nav-cta {
  border: 1px solid currentColor;
  padding: 0.5rem 1rem;
  border-radius: 999px;
}

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 2.2rem;
  height: 2.2rem;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

.nav-toggle span {
  display: block;
  height: 1px;
  background: var(--cream);
  transition: background 0.3s ease, transform 0.3s var(--ease), opacity 0.2s ease;
}

.site-nav.scrolled .nav-toggle span { background: var(--ink); }

/* ── Hero ─────────────────────────────────────── */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--cream);
  overflow: hidden;
}

.hero-media {
  position: absolute;
  inset: 0;
  background-image: url('/img/hero-eiffel-bw.jpg');
  background-size: cover;
  /* Hochformat-Motiv im Querformat-Hero: 55% hält Turmbogen + uns beide im Bild */
  background-position: center 55%;
  background-repeat: no-repeat;
  z-index: 0;
}

@media (min-width: 60rem) {
  .hero-media { background-attachment: fixed; }
}

/* Das S/W-Motiv ist im Bereich des Turms fast weiss, der alte Verlauf (0.35 in
   der Mitte) reichte für das grüne Wiesenbild, hier ersäuft die Schrift darin.
   Zusätzliche radiale Abdunklung genau hinter dem Textblock. */
.hero-scrim {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 95% 55% at 50% 46%, rgba(20, 28, 22, 0.6) 0%, rgba(20, 28, 22, 0) 72%),
    linear-gradient(180deg, rgba(20, 28, 22, 0.62) 0%, rgba(20, 28, 22, 0.48) 45%, rgba(20, 28, 22, 0.8) 100%);
  z-index: 1;
}

.hero-inner {
  position: relative;
  z-index: 2;
  /* 64rem statt 40rem: "Alexandra & Marc" braucht in der grössten Stufe (6rem)
     rund 920 px, sonst bricht der Name auch am Desktop um. */
  max-width: 64rem;
  padding: 0 1.5rem;
  text-shadow: 0 1px 14px rgba(20, 28, 22, 0.55);
}

/* Das normale Gold (#b99a5b) kommt auf dem hellen Foto nicht auf ausreichenden
   Kontrast, im Hero deshalb eine hellere Variante, sonst bleibt die Palette gleich. */
.hero .eyebrow,
.hero .countdown,
.hero .amp { color: #dcc08a; }

.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.28em;
  font-size: 0.75rem;
  color: var(--gold);
  margin: 0 0 1rem;
}

.hero h1 {
  font-size: clamp(3rem, 9vw, 6rem);
  color: var(--cream);
  line-height: 1;
}

.hero .amp {
  color: var(--gold);
  font-style: italic;
}

/* "Alexandra & Marc" passt am Handy nicht in eine Zeile. Ohne Hilfe bricht der
   Browser nach dem Und-Zeichen um ("Alexandra &" / "Marc"); nowrap um "& Marc"
   lässt nur noch den Umbruch davor zu. */
.hero h1 .nb { white-space: nowrap; }

.hero-date {
  margin: 1.5rem 0 0.35rem;
  font-family: var(--serif);
  font-size: clamp(1.1rem, 2vw, 1.4rem);
  letter-spacing: 0.04em;
}

.hero-place {
  margin: 0;
  font-size: 0.9rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.85;
}

.countdown { margin-top: 2.25rem; }

.cd-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.5rem;
  max-width: 23rem;
  margin: 0 auto;
}

.cd-unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.45rem;
  padding: 0.9rem 0.2rem 0.75rem;
  border: 1px solid rgba(250, 246, 240, 0.22);
  border-radius: 2px;
  background: rgba(20, 28, 22, 0.3);
  backdrop-filter: blur(2px);
}

.cd-num {
  font-family: var(--serif);
  font-size: clamp(1.5rem, 5.5vw, 2.1rem);
  line-height: 1;
  /* verhindert Zappeln, wenn die Sekundenziffer die Breite wechselt */
  font-variant-numeric: tabular-nums;
}

.cd-label {
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--cream);
  opacity: 0.72;
}

.cd-done {
  font-family: var(--serif);
  font-size: 1.5rem;
  margin: 0;
}

.scroll-cue {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  width: 1.6rem;
  height: 2.6rem;
  border: 1px solid rgba(250, 246, 240, 0.6);
  border-radius: 999px;
}

.scroll-cue span {
  position: absolute;
  top: 0.4rem;
  left: 50%;
  width: 3px;
  height: 6px;
  margin-left: -1.5px;
  background: var(--cream);
  border-radius: 999px;
  animation: cue 1.8s ease-in-out infinite;
}

@keyframes cue {
  0% { opacity: 1; transform: translateY(0); }
  70% { opacity: 0; transform: translateY(0.9rem); }
  100% { opacity: 0; transform: translateY(0.9rem); }
}

/* ── Reveal-on-scroll ─────────────────────────────
   Nur mit .js am <html> (Inline-Script im Head): ohne JavaScript bleibt
   alles sichtbar, statt dauerhaft auf opacity 0 zu stehen. */
.js .reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
}

.js .reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.js .img-reveal img {
  clip-path: inset(0 0 0 100%);
  transform: scale(1.06);
  transition: clip-path 1.1s var(--ease), transform 1.3s var(--ease);
}

.js .img-reveal.is-visible img,
.js .reveal.is-visible .img-reveal img {
  clip-path: inset(0 0 0 0);
  transform: scale(1);
}

/* ── Sections ─────────────────────────────────── */
/* Am Handy fressen 5.5rem oben und unten fast einen halben Bildschirm */
.section { padding: clamp(3.5rem, 9vw, 5.5rem) 1.5rem; }
.section.shaded { background: var(--cream-shade); }

.kicker {
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: 0.72rem;
  color: var(--gold);
  margin: 0 0 0.6rem;
}

.section h2 {
  font-size: clamp(1.9rem, 4vw, 2.6rem);
  text-align: center;
  margin-bottom: 2.2rem;
  position: relative;
}

.section h2::after {
  content: "";
  display: block;
  width: 3rem;
  height: 1px;
  background: var(--gold);
  margin: 0.9rem auto 0;
}

.narrow { max-width: 38rem; margin-left: auto; margin-right: auto; }
.narrow p { text-align: center; color: var(--ink-soft); }
.narrow > p:not(.note) { max-width: 32rem; margin-left: auto; margin-right: auto; }

.note { font-size: 0.9rem; }

.map-link { text-decoration: none; border-bottom: 1px solid var(--gold); padding-bottom: 2px; }

/* Banner / duo images */
.banner-image { margin: 0; overflow: hidden; }
.banner-image img {
  display: block;
  width: 100%;
  height: clamp(16rem, 42vh, 30rem);
  object-fit: cover;
  /* hält beide Gesichter im sichtbaren Band, auch im flachen Desktop-Zuschnitt */
  object-position: center 18%;
}

.image-duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  max-width: 62rem;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.image-duo figure { margin: 0; overflow: hidden; border-radius: 2px; aspect-ratio: 4 / 3; }
.image-duo img { width: 100%; height: 100%; object-fit: cover; }

.photo-credit {
  text-align: center;
  font-size: 0.75rem;
  color: var(--ink-soft);
  max-width: 62rem;
  margin: 0.6rem auto 0;
  padding: 0 1.5rem;
}

.photo-credit a { color: var(--ink-soft); }

/* Split (text + image) */
.split {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  max-width: 62rem;
  margin: 0 auto;
  align-items: center;
}

@media (min-width: 52rem) {
  .split { grid-template-columns: 1fr 1fr; }
}

.split-text .kicker, .split-text h2 { text-align: left; }
.split-text h2::after { margin-left: 0; }

.split-image { margin: 0; overflow: hidden; border-radius: 2px; }
.split-image img { width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; }

/* Timeline */
.timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.timeline li {
  display: grid;
  grid-template-columns: 6rem 1fr;
  gap: 0.25rem 1rem;
  border-left: 2px solid var(--gold);
  padding-left: 1.25rem;
}

.timeline .time {
  font-family: var(--serif);
  color: var(--green);
  font-size: 0.95rem;
}

.timeline .what { font-weight: 600; grid-column: 2; }
.timeline .where { grid-column: 2; color: var(--ink-soft); font-size: 0.9rem; }

/* Info grid (Anreise) */
.info-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  margin-top: 2.5rem;
}

@media (min-width: 40rem) {
  .info-grid { grid-template-columns: 1fr 1fr; }
}

.info-grid h3 {
  font-size: 1.05rem;
  text-align: center;
  margin-bottom: 0.6rem;
  color: var(--green);
}

/* Info-Karten (Destination Wedding): untereinander, volle Spaltenbreite */
.section-intro { max-width: 38rem; margin-left: auto; margin-right: auto; }

.info-cards {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  max-width: 46rem;
  margin: clamp(2.25rem, 6vw, 3.5rem) auto 0;
  text-align: left;
}

.info-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: clamp(1.75rem, 4vw, 3rem);
}

.card-kicker {
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: 0.7rem;
  color: var(--gold);
  margin: 0 0 0.5rem;
}

.info-card h3 {
  font-size: clamp(1.5rem, 3.5vw, 2rem);
  color: var(--green-deep);
  margin: 0 0 1.25rem;
}

.info-card p { font-size: 1rem; }
.info-card p:last-child { margin-bottom: 0; }

/* Flugstrecken */
.flight-legs {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  margin: 2rem 0;
}

.leg {
  border: 1px solid var(--line);
  border-left: 3px solid var(--gold);
  border-radius: 2px;
  padding: 1.25rem 1.5rem 1.1rem;
  background: var(--cream);
}

.leg-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--ink-soft);
  margin: 0 0 0.9rem;
}

.leg-route {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1rem;
}

/* min-width: 0 lässt die auto-Spalten schrumpfen, statt auf schmalen Displays zu überlaufen */
.leg-point { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.leg-point-end { text-align: right; }

.leg-time {
  font-family: var(--serif);
  font-size: clamp(1.5rem, 4.5vw, 1.9rem);
  line-height: 1;
  color: var(--green-deep);
}

.leg-airport { font-size: 0.85rem; color: var(--ink-soft); }
.leg-airport abbr { text-decoration: none; letter-spacing: 0.06em; }

/* Verbindungslinie mit Pfeilspitze */
.leg-connector {
  position: relative;
  height: 1px;
  min-width: 1.5rem;
  background: var(--line);
}

.leg-connector::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  width: 6px;
  height: 6px;
  border-top: 1px solid var(--gold);
  border-right: 1px solid var(--gold);
  transform: translateY(-50%) rotate(45deg);
}

.leg-meta {
  margin: 0.9rem 0 0;
  font-size: 0.82rem;
  color: var(--ink-soft);
}

.facts { margin: 1.5rem 0 0; }

.facts > div {
  display: grid;
  grid-template-columns: 7rem 1fr;
  gap: 0.5rem 1rem;
  padding: 0.85rem 0;
  border-top: 1px solid var(--line);
}

.facts > div:last-child { border-bottom: 1px solid var(--line); }

.facts dt {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--gold);
  padding-top: 0.25rem;
}

.facts dd { margin: 0; font-size: 1rem; }
.dd-sub { font-size: 0.85rem; color: var(--ink-soft); }

@media (max-width: 30rem) {
  .facts > div { grid-template-columns: 1fr; gap: 0.2rem; }
}

/* Secret-Block (Ablauf) */
.secret {
  max-width: 30rem;
  margin: 2.5rem auto 0;
  padding: 2.5rem 1.5rem;
  border: 1px dashed var(--line);
  border-radius: 2px;
  text-align: center;
}

.secret-label {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.75rem;
  color: var(--gold);
  margin: 0 0 0.5rem;
}

.secret p:last-child { margin: 0; color: var(--ink-soft); font-size: 0.95rem; }

/* RSVP */
.rsvp-section .rsvp-intro { max-width: 34rem; margin: 0 auto 1.5rem; }

.rsvp-deadline {
  max-width: 34rem;
  margin: 0 auto 2.5rem;
  padding: 0.9rem 1.25rem;
  border-top: 1px solid var(--gold);
  border-bottom: 1px solid var(--gold);
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.05rem;
  line-height: 1.5;
  color: var(--green-deep);
  text-align: center;
}

.rsvp-form {
  max-width: 30rem;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

.field { display: flex; flex-direction: column; gap: 0.4rem; }

.field label {
  font-size: 0.85rem;
  letter-spacing: 0.03em;
  color: var(--ink-soft);
}

.field input,
.field select,
.field textarea {
  font-family: var(--sans);
  font-size: 1rem;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--line);
  border-radius: 2px;
  background: #fff;
  color: var(--ink);
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--gold);
}

.rsvp-form button {
  margin-top: 0.5rem;
  background: var(--green-deep);
  color: var(--cream);
  border: none;
  padding: 0.9rem 1.5rem;
  font-size: 0.95rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  cursor: pointer;
  border-radius: 2px;
  transition: background 0.15s ease;
}

.rsvp-form button:hover { background: var(--green); }
.rsvp-form button:disabled { opacity: 0.6; cursor: default; }

.form-status {
  min-height: 1.2rem;
  font-size: 0.9rem;
  text-align: center;
  margin: 0.25rem 0 0;
}

.form-status.ok { color: var(--green); }
.form-status.err { color: #a4402c; }

/* Modulare Formularblöcke (Flug / Hotel) */
[hidden] { display: none !important; }

.conditional {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

.module {
  border: 1px solid var(--line);
  border-radius: 2px;
  background: #fff;
  padding: 1.25rem;
  margin: 0;
}

/* legend sitzt von Haus aus auf der Rahmenlinie und schneidet eine Lücke
   hinein. float + width:100% nimmt sie aus dieser Sonderbehandlung heraus,
   sie verhält sich dann wie eine normale Überschrift im Kasten. */
.module legend {
  float: left;
  width: 100%;
  padding: 0;
  margin: 0 0 0.35rem;
  font-family: var(--serif);
  font-size: 1.05rem;
  line-height: 1.3;
  color: var(--green-deep);
}

.module legend + * { clear: both; }

.module-hint {
  margin: 0 0 1rem;
  font-size: 0.82rem;
  color: var(--ink-soft);
}

.choice-group { display: flex; flex-direction: column; gap: 0.5rem; }

@media (min-width: 30rem) {
  .choice-group { flex-direction: row; }
  .choice { flex: 1; }
}

.choice {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--line);
  border-radius: 2px;
  font-size: 0.92rem;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.choice:hover { border-color: var(--gold); }
.choice input { accent-color: var(--green); margin: 0; flex: none; }
.choice:has(input:checked) { border-color: var(--green); background: var(--cream-shade); }
.choice:has(input:focus-visible) { outline: 2px solid var(--gold); outline-offset: 2px; }

.module-details {
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
}

/* Footer */
.footer {
  text-align: center;
  padding: 3.5rem 1.5rem 4rem;
  color: var(--ink-soft);
  font-size: 1rem;
  background: var(--green-deep);
  color: var(--cream);
}

.monogram-large {
  font-family: var(--serif);
  font-style: italic;
  font-size: 2rem;
  color: var(--gold);
  margin: 0 0 0.75rem;
}

.footer p:last-child { opacity: 0.85; }

/* ── Responsive ───────────────────────────────── */
@media (max-width: 30rem) {
  .timeline li { grid-template-columns: 1fr; border-left: none; border-top: 2px solid var(--gold); padding-left: 0; padding-top: 0.75rem; }
  .timeline .what, .timeline .where { grid-column: 1; }
  .image-duo { grid-template-columns: 1fr; }
}

@media (max-width: 46rem) {
  .nav-toggle { display: flex; }

  .nav-links {
    position: fixed;
    top: 0; right: 0;
    /* dvh statt vh: 100vh ist am Handy die Höhe *ohne* eingeblendete
       Browserleiste. Das Panel ragte darunter, die mittig sitzenden Links
       standen dadurch zu tief. */
    height: 100vh;
    height: 100dvh;
    width: min(80vw, 20rem);
    background: var(--green-deep);
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 1.75rem;
    padding: 2rem;
    transform: translateX(100%);
    transition: transform 0.35s var(--ease);
  }

  .nav-links.open { transform: translateX(0); }

  /* Das Panel ist immer dunkelgrün, auch wenn die Leiste beim Scrollen hell
     wird. Ohne die zweite Zeile gewinnt ".site-nav.scrolled .nav-links a"
     (höhere Spezifität) und die Menütitel stehen dunkel auf dunkel. */
  .nav-links a,
  .site-nav.scrolled .nav-links a { color: var(--cream); font-size: 1rem; }
  .nav-cta { align-self: flex-start; }

  /* Der Button liegt sonst unter dem geöffneten Panel und ist nicht mehr
     antippbar: Das Menü liesse sich nur noch über einen Link schliessen. */
  .nav-toggle { position: relative; z-index: 2; }
  .site-nav.nav-open .nav-toggle span { background: var(--cream); }
  .site-nav.nav-open .nav-toggle span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .site-nav.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
  .site-nav.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

  /* Hintergrund nicht mitscrollen lassen, solange das Menü offen ist. Steht
     bewusst in der Media Query: Beim Wechsel auf Desktop-Breite löst sich die
     Sperre von selbst, auch wenn die Klasse noch am body hängt. */
  body.nav-open { overflow: hidden; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal, .img-reveal img { transition: none; opacity: 1; transform: none; clip-path: none; }
  .scroll-cue span { animation: none; }
}