/* ==========================================================================
   Kira & Julien — Hochzeitswebsite
   Designsprache aus der gedruckten Einladung übernommen:
   Navy (#0B3F5C), Doppelrahmen-Karten, getrackte Versalien, Skriptschrift
   ========================================================================== */

:root{
  --navy-deep:   #0B3F5C;
  --navy:        #14567E;
  --navy-soft:   #6C93AA;
  --navy-faint:  #C8D8E2;
  --ivory:       #FDFCFA;
  --ivory-warm:  #F6F2EA;
  --line:        rgba(11,63,92,0.28);

  --font-script: 'Alex Brush', cursive;
  --font-serif:  'EB Garamond', Georgia, serif;

  --frame-gap: 14px;
  --container: 1100px;
}

*{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--ivory);
  color:var(--navy-deep);
  font-family:var(--font-serif);
  font-size:18px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; }
}

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

.eyebrow{
  font-family:var(--font-serif);
  font-size:0.78rem;
  letter-spacing:0.32em;
  text-transform:uppercase;
  color:var(--navy-soft);
  margin:0 0 0.9em;
}

.heading-script{
  font-family:var(--font-script);
  font-weight:400;
  color:var(--navy-deep);
  line-height:1;
}

.divider{
  width:56px;
  height:1px;
  background:var(--line);
  margin:1.6em auto;
  position:relative;
}
.divider::after{
  content:"";
  position:absolute;
  left:50%; top:50%;
  width:5px; height:5px;
  background:var(--navy-soft);
  transform:translate(-50%,-50%) rotate(45deg);
}

/* ---------- Skip link ---------- */
.skip-link{
  position:absolute; left:-999px; top:auto;
  background:var(--navy-deep); color:var(--ivory);
  padding:10px 16px; z-index:1000;
}
.skip-link:focus{ left:12px; top:12px; }

/* ---------- Nav ---------- */
.site-nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:22px clamp(20px,5vw,56px);
  background:transparent;
  transition:background 0.4s ease, padding 0.4s ease, box-shadow 0.4s ease;
}
.site-nav.is-scrolled{
  background:rgba(253,252,250,0.92);
  backdrop-filter:blur(6px);
  padding:14px clamp(20px,5vw,56px);
  box-shadow:0 1px 0 var(--line);
}
.site-nav .brand{
  font-family:var(--font-script);
  font-size:1.7rem;
  color:var(--navy-deep);
  text-decoration:none;
}
.site-nav ul{
  list-style:none; display:flex; gap:clamp(16px,3vw,36px);
  margin:0; padding:0;
}
.site-nav a.nav-link{
  text-decoration:none;
  font-size:0.72rem;
  letter-spacing:0.24em;
  text-transform:uppercase;
  color:var(--navy-deep);
  border-bottom:1px solid transparent;
  padding-bottom:4px;
  transition:border-color 0.3s ease, opacity 0.3s ease;
}
.site-nav a.nav-link:hover,
.site-nav a.nav-link:focus-visible{ border-color:var(--navy-soft); }

.nav-toggle{
  display:none;
  background:none; border:1px solid var(--line); border-radius:2px;
  width:40px; height:40px; cursor:pointer;
  align-items:center; justify-content:center;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after{
  content:""; display:block; width:18px; height:1px; background:var(--navy-deep);
  position:relative; transition:transform 0.25s ease, opacity 0.25s ease;
}
.nav-toggle span::before{ position:absolute; top:-6px; }
.nav-toggle span::after{ position:absolute; top:6px; }

@media (max-width:760px){
  .site-nav ul{
    position:fixed; inset:0 0 0 auto; height:100vh; width:min(78vw,320px);
    background:var(--ivory); flex-direction:column; justify-content:center;
    align-items:flex-start; padding:40px; gap:28px;
    transform:translateX(100%); transition:transform 0.4s ease;
    box-shadow:-6px 0 24px rgba(11,63,92,0.12);
  }
  .site-nav ul.is-open{ transform:translateX(0); }
  .nav-toggle{ display:flex; z-index:110; }
  .nav-toggle.is-open span{ background:transparent; }
  .nav-toggle.is-open span::before{ transform:rotate(45deg); top:0; }
  .nav-toggle.is-open span::after{ transform:rotate(-45deg); top:0; }
}

/* ---------- Framed section (signature element) ---------- */
.framed{
  position:relative;
  margin:18px;
}
.framed::before{
  content:"";
  position:absolute;
  inset:var(--frame-gap);
  border:1px solid var(--line);
  pointer-events:none;
}
.framed-inner{
  position:relative;
  padding:clamp(56px,9vw,120px) clamp(20px,6vw,80px);
}
@media (max-width:600px){
  .framed{ margin:10px; }
  :root{ --frame-gap:8px; }
}

/* ---------- Hero ---------- */
.hero{
  min-height:100vh;
  display:flex; align-items:center; justify-content:center;
  text-align:center;
  background:var(--ivory);
}
.hero-names{
  font-size:clamp(3.4rem,10vw,6.5rem);
  margin:0 0 0.45em;
  opacity:0;
  animation:fadeUp 1.1s ease 0.15s forwards;
}
.hero-meta{
  font-size:0.85rem;
  letter-spacing:0.26em;
  text-transform:uppercase;
  color:var(--navy);
  opacity:0;
  animation:fadeUp 1.1s ease 0.4s forwards;
}
.hero-meta span{ display:block; margin:0.3em 0; }
.hero-meta .dot{ color:var(--navy-soft); }

.countdown{
  display:flex; gap:clamp(14px,4vw,34px); justify-content:center;
  margin-top:2.4em;
  opacity:0;
  animation:fadeUp 1.1s ease 0.9s forwards;
}
.countdown div{ text-align:center; min-width:56px; }
.countdown .num{
  font-size:clamp(1.6rem,4vw,2.3rem);
  color:var(--navy-deep);
  font-variant-numeric:tabular-nums;
}
.countdown .lbl{
  font-size:0.62rem; letter-spacing:0.2em; text-transform:uppercase; color:var(--navy-soft);
}

.scroll-cue{
  position:absolute; bottom:34px; left:50%; transform:translateX(-50%);
  font-size:0.65rem; letter-spacing:0.3em; text-transform:uppercase; color:var(--navy-soft);
  display:flex; flex-direction:column; align-items:center; gap:10px;
  opacity:0; animation:fadeUp 1.1s ease 1.15s forwards;
}
.scroll-cue::after{
  content:""; width:1px; height:34px; background:var(--line);
  animation:pulseLine 2.4s ease-in-out infinite;
}

@keyframes fadeUp{
  from{ opacity:0; transform:translateY(16px); }
  to{ opacity:1; transform:translateY(0); }
}
@keyframes pulseLine{
  0%,100%{ opacity:0.3; } 50%{ opacity:1; }
}

/* ---------- Generic section ---------- */
section{ position:relative; }
.section-head{ text-align:center; max-width:640px; margin:0 auto 3.2em; }
.section-title{
  font-size:clamp(2rem,4.5vw,2.8rem);
  margin:0;
}
.section-alt{ background:var(--ivory-warm); }

.reveal{
  opacity:0; transform:translateY(22px);
  transition:opacity 0.8s ease, transform 0.8s ease;
}
.reveal.is-visible{ opacity:1; transform:translateY(0); }

/* ---------- Ablauf / Timeline ---------- */
.timeline{
  max-width:660px; margin:0 auto;
  position:relative;
  padding-left:clamp(70px,14vw,110px);
}
.timeline::before{
  content:"";
  position:absolute; left:calc(clamp(70px,14vw,110px) - 1px); top:6px; bottom:6px;
  width:1px; background:var(--line);
}
.timeline-item{
  position:relative;
  padding-bottom:2.6em;
}
.timeline-item:last-child{ padding-bottom:0; }
.timeline-item::before{
  content:"";
  position:absolute; left:calc(-1 * (clamp(70px,14vw,110px) - 1px) + 1px);
  top:6px;
  width:9px; height:9px; border-radius:50%;
  background:var(--ivory); border:1px solid var(--navy-deep);
}
.timeline-time{
  position:absolute; left:calc(-1 * clamp(70px,14vw,110px));
  top:-2px;
  width:calc(clamp(70px,14vw,110px) - 26px);
  text-align:right;
  font-size:0.85rem; letter-spacing:0.06em; color:var(--navy);
  font-variant-numeric:tabular-nums;
}
.timeline-title{ margin:0 0 0.15em; font-size:1.25rem; }
.timeline-desc{ margin:0; color:var(--navy); font-size:0.98rem; }

.ablauf-note{
  max-width:520px; margin:3em auto 0; text-align:center;
  font-size:0.85rem; color:var(--navy-soft); font-style:italic;
}
.route-link{
  display:inline-block; margin-top:1.6em;
  font-size:0.72rem; letter-spacing:0.22em; text-transform:uppercase;
  text-decoration:none; color:var(--navy-deep);
  border-bottom:1px solid var(--navy-deep); padding-bottom:3px;
}

/* ---------- Wunschliste ---------- */
.gift-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:2px; max-width:920px; margin:0 auto;
  background:var(--line);
  border:1px solid var(--line);
}
.gift-card{
  background:var(--ivory);
  padding:2.6em 2em;
  text-align:center;
  display:flex; flex-direction:column; align-items:center;
  transition:background 0.3s ease;
}
.gift-card:hover{ background:var(--ivory-warm); }
.gift-icon{
  width:34px; height:34px; margin-bottom:1.1em;
  color:var(--navy-deep);
}
.gift-card h3{
  font-size:1.15rem; margin:0 0 0.5em; font-weight:400;
}
.gift-card p{
  font-size:0.88rem; color:var(--navy); margin:0 0 1.4em; flex-grow:1;
}
.gift-link{
  font-size:0.7rem; letter-spacing:0.22em; text-transform:uppercase;
  text-decoration:none; color:var(--navy-deep);
  border:1px solid var(--navy-deep);
  padding:0.7em 1.4em;
  transition:background 0.3s ease, color 0.3s ease;
}
.gift-link:hover{ background:var(--navy-deep); color:var(--ivory); }

.gift-note{
  max-width:560px; margin:3em auto 0; text-align:center;
  font-size:0.85rem; color:var(--navy-soft);
}

.gift-single{
  max-width:360px; margin:0 auto;
  text-align:center;
  padding:3em 2.4em;
  border:1px solid var(--line);
  background:var(--ivory);
}
.gift-single .gift-icon{ margin:0 auto 1.2em; }
.gift-single h3{ font-size:1.3rem; margin:0 0 0.5em; font-weight:400; }
.gift-single p{ font-size:0.92rem; color:var(--navy); margin:0 0 1.6em; }

/* ---------- RSVP ---------- */
.rsvp{
  background:var(--navy-deep);
  color:var(--ivory);
}
.rsvp .eyebrow{ color:var(--navy-faint); }
.rsvp .divider{ background:rgba(253,252,250,0.28); }
.rsvp .divider::after{ background:var(--navy-faint); }
.rsvp .section-title{ color:var(--ivory); }
.rsvp .framed::before{ border-color:rgba(253,252,250,0.28); }
.rsvp-deadline{
  text-align:center; font-size:0.85rem; color:var(--navy-faint);
  margin:-1.6em 0 3em;
}

.rsvp-form{
  max-width:600px; margin:0 auto;
}
.field-row{
  display:grid; grid-template-columns:1fr 1fr; gap:1.4em;
}
.field{ margin-bottom:1.6em; }
.field label{
  display:block; font-size:0.7rem; letter-spacing:0.2em; text-transform:uppercase;
  color:var(--navy-faint); margin-bottom:0.6em;
}
.field input[type="text"],
.field input[type="email"],
.field input[type="number"],
.field textarea{
  width:100%;
  background:transparent;
  border:none; border-bottom:1px solid rgba(253,252,250,0.4);
  color:var(--ivory);
  font-family:var(--font-serif); font-size:1rem;
  padding:0.5em 0.1em;
  transition:border-color 0.3s ease;
}
.field input:focus, .field textarea:focus{
  outline:none; border-color:var(--ivory);
}
.field textarea{ resize:vertical; min-height:90px; }

.attend-toggle{
  display:flex; gap:14px; flex-wrap:wrap; margin-bottom:1.8em;
}
.attend-toggle input{ position:absolute; opacity:0; width:1px; height:1px; }
.attend-toggle label{
  flex:1; min-width:170px;
  text-align:center;
  padding:1em 1.2em;
  border:1px solid rgba(253,252,250,0.4);
  font-size:0.78rem; letter-spacing:0.14em; text-transform:uppercase;
  cursor:pointer; transition:background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.attend-toggle input:checked + label{
  background:var(--ivory); color:var(--navy-deep); border-color:var(--ivory);
}
.attend-toggle input:focus-visible + label{ outline:2px solid var(--ivory); outline-offset:2px; }

#guestsField{ display:none; }
#guestsField.is-visible{ display:block; }

.rsvp-submit{
  display:block; width:100%;
  background:transparent;
  border:1px solid var(--ivory);
  color:var(--ivory);
  font-family:var(--font-serif);
  font-size:0.78rem; letter-spacing:0.24em; text-transform:uppercase;
  padding:1em; cursor:pointer;
  transition:background 0.3s ease, color 0.3s ease;
}
.rsvp-submit:hover, .rsvp-submit:focus-visible{
  background:var(--ivory); color:var(--navy-deep);
}
.rsvp-submit:disabled{ opacity:0.5; cursor:default; }

.form-status{
  margin-top:1.4em; text-align:center; font-size:0.9rem; min-height:1.4em;
}
.form-status[data-state="ok"]{ color:#BFE3C7; }
.form-status[data-state="err"]{ color:#F0B4B4; }

/* ---------- Footer ---------- */
.site-footer{
  text-align:center; padding:4em 1.5em 3em;
  background:var(--ivory);
}
.site-footer .heading-script{ font-size:2rem; margin-bottom:0.3em; }
.site-footer p{ font-size:0.78rem; letter-spacing:0.18em; text-transform:uppercase; color:var(--navy-soft); }

/* ---------- Utility ---------- */
.visually-hidden{
  position:absolute !important; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap;
}

:focus-visible{ outline:2px solid var(--navy-deep); outline-offset:3px; }