/* =========================================================
   Andrina & Alessio — Hochzeitswebsite
   Design tokens
   ========================================================= */
:root{
  --orange-900:#6f3410;
  --orange-700:#b6541c;
  --orange-600:#e57027;
  --orange-500:#e2812f;
  --orange-300:#efa868;
  --orange-200:#f6d9bd;
  --orange-100:#fbeeda;

  --blush-600:#d98686;
  --blush-400:#eeb3b0;
  --blush-300:#f5bec7;
  --blush-200:#f6d6d2;
  --blush-100:#fbe9e6;

  /* brand palette (assets/colors.png) — used for background fields, patterns
     and stripes, never for running text */
  --burgundy-700:#902633;
  --olive-600:#828a33;
  --olive-100:#e6e3cd;

  --paper:#f8f3e8;
  --paper-dim:#efe4cd;
  --ink:#241f1a;
  --ink-soft:#5b4d40;
  --line:rgba(36,31,26,.16);

  --font-display:'Kaushan Script','Segoe Script','Bradley Hand',cursive;
  --font-body:'Helvetica Neue',Helvetica,Arial,sans-serif;

  --container:1080px;
}

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

html{scroll-behavior:smooth;}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important;}
}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  position:relative;
}

/* scribble/paper texture overlay across the whole page */
body::before{
  content:"";
  position:fixed;
  inset:0;
  background-image:url("../assets/img/scribble-bg.jpg");
  background-size:900px;
  background-repeat:repeat;
  mix-blend-mode:multiply;
  opacity:.55;
  pointer-events:none;
  z-index:0;
}

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

h1,h2,h3{
  font-family:var(--font-body);
  font-weight:700;
  line-height:1.05;
  margin:0;
  text-wrap:balance;
}

p{margin:0;}

a{color:inherit;}

.wrap{
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:20px;
  position:relative;
  z-index:1;
}

.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;
}

section{position:relative;z-index:1;}

.eyebrow{
  font-family:var(--font-display);
  font-size:clamp(1.6rem,4vw,2.1rem);
  color:var(--blush-300);
  display:block;
}

.section-title{
  font-size:clamp(2.4rem,6vw,3.6rem);
  color:var(--orange-700);
  margin-bottom:.2em;
}
.section-title.on-dark{color:var(--blush-200);}

.section-kicker{
  font-family:var(--font-body);
  font-weight:700;
  font-size:.78rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--orange-600);
}
.section-kicker.on-dark{color:var(--blush-200);}

.section-lede{
  max-width:60ch;
  color:var(--ink-soft);
  font-size:1.05rem;
}

.btn{
  display:inline-flex;
  align-items:center;
  gap:.5em;
  font-family:var(--font-body);
  font-weight:700;
  font-size:.95rem;
  letter-spacing:.02em;
  padding:.85em 1.5em;
  border-radius:999px;
  border:none;
  background:var(--orange-600);
  color:var(--paper);
  cursor:pointer;
  text-decoration:none;
  transition:transform .15s ease, box-shadow .15s ease;
  box-shadow:0 10px 22px -10px rgba(36,31,26,.55);
}
.btn:hover{transform:translateY(-2px);box-shadow:0 14px 26px -10px rgba(36,31,26,.55);}
.btn:active{transform:translateY(0);box-shadow:0 6px 14px -8px rgba(36,31,26,.5);}
.btn:focus-visible{outline:3px solid var(--ink);outline-offset:2px;}

/* =========================================================
   Nav
   ========================================================= */
.site-nav{
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(248,243,232,.88);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--line);
}
.site-nav .wrap{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding-block:.6rem;
}
.site-nav .brand{
  display:inline-flex;
  align-items:center;
  text-decoration:none;
  white-space:nowrap;
}
.brand-logo{
  height:2.3rem;
  width:auto;
  display:block;
}
.site-nav ul{
  list-style:none;
  display:flex;
  gap:1.3rem;
  margin:0;
  padding:0;
  overflow-x:auto;
  scrollbar-width:none;
}
.site-nav ul::-webkit-scrollbar{display:none;}
.site-nav a.nav-link{
  text-decoration:none;
  font-weight:700;
  font-size:.82rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--ink-soft);
  white-space:nowrap;
  padding-block:.2rem;
  border-bottom:2px solid transparent;
}
.site-nav a.nav-link:hover,
.site-nav a.nav-link.active{
  color:var(--orange-700);
  border-color:var(--orange-600);
}

/* hamburger toggle: hidden on desktop, shown on mobile below */
.nav-toggle{
  display:none;
  flex:none;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:5px;
  width:2.4rem;
  height:2.4rem;
  padding:0;
  border:none;
  border-radius:10px;
  background:transparent;
  cursor:pointer;
}
.nav-toggle span{
  display:block;
  width:1.2rem;
  height:2px;
  background:var(--ink);
  border-radius:2px;
  transition:transform .2s ease, opacity .2s ease;
}
.nav-toggle.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.nav-toggle.is-open span:nth-child(2){opacity:0;}
.nav-toggle.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

@media (max-width:760px){
  .nav-toggle{display:flex;}
  .site-nav ul{
    position:absolute;
    top:100%;
    left:20px;
    right:20px;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    background:var(--paper);
    border-radius:0 0 28px 28px;
    box-shadow:0 16px 32px -14px rgba(36,31,26,.35);
    max-height:0;
    overflow:hidden;
    padding-inline:1.2rem;
  }
  .site-nav ul.is-open{
    max-height:24rem;
    padding-block:.4rem;
  }
  .site-nav a.nav-link{
    display:block;
    padding-block:.85rem;
    border-bottom:1px solid var(--line);
  }
  .site-nav li:last-child a.nav-link{border-bottom:none;}
}

/* =========================================================
   Hero
   ========================================================= */
.hero{
  background:var(--orange-600);
  color:var(--paper);
  overflow:hidden;
  padding-block:3.6rem;
}
.hero .wrap{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:.4rem;
}
.hero-arc{
  width:min(94vw,620px);
  height:auto;
  display:block;
  overflow:visible;
}
.hero-arc-top{margin-bottom:-.4rem;}
.hero-arc-bottom{margin-top:-.4rem;}
.hero-arc text{
  font-family:var(--font-display);
  font-weight:400;
  fill:var(--blush-300);
}
.hero-arc-top text{font-size:70px;}
.hero-arc-bottom text{font-size:42px;}

.hero-heads{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:clamp(1rem,5vw,3rem);
  margin-block:1rem;
}
.hero-heads img{
  width:clamp(160px,40vw,360px);
  height:clamp(160px,40vw,360px);
  object-fit:contain;
  filter:drop-shadow(4px 10px 0 rgba(0,0,0,.18));
  transform-origin:bottom center;
}
.hero-heads img.left{animation:wiggle-left 1.4s ease-in-out infinite;}
.hero-heads img.right{animation:wiggle-right 1.4s ease-in-out infinite;animation-delay:.1s;}
@keyframes wiggle-left{0%,100%{transform:rotate(-10deg);}50%{transform:rotate(-2deg);}}
@keyframes wiggle-right{0%,100%{transform:rotate(2deg);}50%{transform:rotate(10deg);}}

/* =========================================================
   Section shells — each band uses one field from the brand
   palette (assets/colors.png); text keeps the existing ink/
   orange system so contrast stays predictable.
   ========================================================= */
.band{padding-block:4.5rem;}
.band.pink{background:var(--blush-300);}
.band.olive{background:var(--olive-100);}
.band.orange{background:var(--orange-600);color:var(--paper);}
.band.burgundy{background:var(--burgundy-700);color:var(--blush-100);}
.band.ink{background:var(--ink);color:var(--paper);}

.band-head{margin-bottom:2.4rem;max-width:60ch;}

/* organic wave divider between sections — the strip's own background
   matches the section above, the wave shape matches the section below,
   so the seam curves instead of cutting straight across */
.wave-divider{
  position:relative;
  z-index:2;
  height:64px;
  overflow:hidden;
  line-height:0;
}
.wave-divider svg{display:block;width:100%;height:100%;}
.wave-divider.orange-pink{background:var(--orange-600);}
.wave-divider.orange-pink path{fill:var(--blush-300);}
.wave-divider.pink-olive{background:var(--blush-300);}
.wave-divider.pink-olive path{fill:var(--olive-100);}
.wave-divider.olive-pink{background:var(--olive-100);}
.wave-divider.olive-pink path{fill:var(--blush-300);}
.wave-divider.olive-burgundy{background:var(--olive-100);}
.wave-divider.olive-burgundy path{fill:var(--burgundy-700);}
.wave-divider.burgundy-ink{background:var(--burgundy-700);}
.wave-divider.burgundy-ink path{fill:var(--ink);}

/* image + text side by side — used below Infos so the page opens up
   after the card grid. The image stretches to the full height of the
   row (i.e. the section), not a small fixed-height box. */
.media-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(1.8rem,4vw,3.2rem);
  align-items:stretch;
}
@media (max-width:760px){
  .media-row{grid-template-columns:1fr;gap:1.6rem;}
  .media-row .media-frame{order:-1;}
}

.media-frame{
  position:relative;
  min-height:420px;
  border-radius:32px;
  background:
    repeating-linear-gradient(135deg, rgba(36,31,26,.07) 0 16px, transparent 16px 32px),
    var(--paper-dim);
  display:flex;
  align-items:center;
  justify-content:center;
}
@media (max-width:760px){.media-frame{min-height:56vw;}}
.media-frame span{
  font-family:var(--font-body);
  font-weight:700;
  font-size:.75rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--ink-soft);
  background:var(--paper);
  padding:.5em 1.1em;
  border-radius:999px;
  box-shadow:0 8px 18px -10px rgba(36,31,26,.4);
}

/* =========================================================
   Infos
   ========================================================= */
.infos-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:1.4rem;
  margin-bottom:2.8rem;
}
.info-card{
  background:var(--paper);
  border-radius:26px;
  padding:1.5rem 1.5rem 1.7rem;
}
.info-card .tag{
  font-weight:700;
  font-size:.72rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--orange-700);
}
.info-card h3{
  font-family:var(--font-body);
  font-weight:800;
  font-size:1.15rem;
  margin-top:.35rem;
}
.info-card p{color:var(--ink-soft);margin-top:.4rem;font-size:.95rem;}
.info-card address{font-style:normal;color:var(--ink-soft);font-size:.95rem;margin-top:.15rem;}

.rsvp{
  background:var(--paper);
  border-radius:32px;
  padding:clamp(1.5rem,4vw,2.6rem);
  display:grid;
  gap:1.8rem;
  grid-template-columns:1.1fr 1.4fr;
  align-items:start;
}
@media (max-width:760px){
  .rsvp{grid-template-columns:1fr;}
}

.rsvp-intro h3{font-size:2rem;color:var(--orange-700);}
.rsvp-intro p{color:var(--ink-soft);margin-top:.7rem;}

.form-grid{display:grid;gap:.9rem;}
.form-row{display:grid;gap:.9rem;grid-template-columns:1fr 1fr;}
@media (max-width:520px){.form-row{grid-template-columns:1fr;}}

.field{display:flex;flex-direction:column;gap:.35rem;}
.field label{font-weight:700;font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);}
.field input,.field select,.field textarea{
  font-family:var(--font-body);
  font-size:.95rem;
  padding:.6em .2em;
  border:none;
  border-bottom:2px solid var(--ink-soft);
  border-radius:0;
  background:transparent;
  color:var(--ink);
}
.field textarea{resize:vertical;min-height:5.5em;}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;
  border-color:var(--orange-600);
  box-shadow:0 2px 0 0 var(--orange-600);
}

.form-note{font-size:.82rem;color:var(--ink-soft);}
.form-actions{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;}

/* =========================================================
   Ablauf timeline
   ========================================================= */
.timeline{
  position:relative;
  margin-top:1rem;
  padding-left:clamp(1.6rem,5vw,2.6rem);
  border-left:3px dashed var(--orange-500);
}
.timeline-item{
  position:relative;
  padding-bottom:2.4rem;
}
.timeline-item:last-child{padding-bottom:0;}
.timeline-item::before{
  content:"";
  position:absolute;
  left:calc(-1 * clamp(1.6rem,5vw,2.6rem) - 9px);
  top:.25rem;
  width:16px;height:16px;
  border-radius:50%;
  background:var(--blush-300);
  box-shadow:0 4px 10px -3px rgba(36,31,26,.45);
}
.timeline-time{
  font-family:var(--font-display);
  font-size:1.6rem;
  color:var(--orange-700);
  display:block;
}
.timeline-item h3{
  font-family:var(--font-body);
  font-weight:800;
  font-size:1.15rem;
  margin-top:.15rem;
}
.timeline-item p{color:var(--ink-soft);margin-top:.35rem;max-width:52ch;}

/* =========================================================
   Dresscode
   ========================================================= */
.dresscode-text p{color:var(--ink-soft);margin-top:1rem;}
.dresscode-text p:first-of-type{margin-top:0;}
.dresscode-text strong{color:var(--orange-700);}

.swatch-inspo{margin-top:1.6rem;}
.swatch-inspo .tag{font-weight:700;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--orange-700);}
.swatch-row{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:.9rem;}
.swatch{
  width:52px;height:52px;border-radius:50%;
  box-shadow:0 6px 14px -6px rgba(36,31,26,.4);
}
.avoid{
  margin-top:1.1rem;
  font-size:.85rem;
  color:var(--ink-soft);
  display:flex;
  align-items:center;
  gap:.5rem;
}
.avoid .no-swatch{
  width:26px;height:26px;border-radius:50%;
  background:#fff;box-shadow:0 4px 10px -4px rgba(36,31,26,.4);position:relative;flex:none;
}
.avoid .no-swatch::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top right, transparent 46%, var(--orange-700) 48%, var(--orange-700) 52%, transparent 54%);
}

/* =========================================================
   Mitbringtavolata
   ========================================================= */
.tavolata-live{
  background:var(--paper);
  border-radius:28px;
  padding:clamp(1.5rem,4vw,2.4rem);
  margin-bottom:1.4rem;
}
.tavolata-live h3{font-size:1.9rem;color:var(--orange-700);margin-bottom:1rem;}
.tavolata-empty{color:var(--ink-soft);font-size:.92rem;}
.tavolata-category{margin-bottom:1.1rem;}
.tavolata-category:last-child{margin-bottom:0;}
.tavolata-category h4{
  font-family:var(--font-body);
  font-weight:800;
  font-size:.85rem;
  letter-spacing:.04em;
  color:var(--ink);
  margin-bottom:.5rem;
}
.tavolata-entry-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.4rem;}
.tavolata-entry{
  display:flex;
  align-items:baseline;
  gap:.5rem;
  font-size:.92rem;
  color:var(--ink-soft);
  background:var(--paper-dim);
  border-radius:10px;
  padding:.5rem .8rem;
}
.tavolata-status{font-size:.85rem;color:var(--ink-soft);margin-bottom:1rem;}

/* honeypot: unsichtbar für Menschen, nicht für Bots verwendbar */
.hp-field{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}

.signup{
  background:var(--paper);
  border-radius:28px;
  padding:clamp(1.5rem,4vw,2.4rem);
}
.signup h3{font-size:1.9rem;color:var(--orange-700);margin-bottom:1rem;}

/* =========================================================
   Geschenke / Vespa
   ========================================================= */
.vespa-layout{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:2rem;
  align-items:start;
  margin-top:2rem;
}
@media (max-width:820px){.vespa-layout{grid-template-columns:1fr;}}

.vespa-figure{
  background:var(--paper);
  border-radius:32px;
  padding:1rem;
  position:sticky;
  top:5.5rem;
}
@media (max-width:820px){.vespa-figure{position:relative;}}
.vespa-figure svg{width:100%;height:auto;display:block;}
.vespa-figure figcaption{
  text-align:center;
  font-size:.82rem;
  color:var(--ink-soft);
  margin-top:.6rem;
}
.hotspot{cursor:pointer;transition:transform .15s ease;transform-box:fill-box;transform-origin:center;}
.hotspot:hover,.hotspot:focus-visible{transform:scale(1.18);}
.hotspot circle.pin{fill:var(--blush-300);stroke:var(--ink);}
.hotspot.claimed circle.pin{fill:var(--orange-500);}
.hotspot:focus-visible{outline:none;}

.parts-list{display:grid;gap:.8rem;}
.part-card{
  background:var(--paper);
  border-radius:20px;
  padding:.9rem 1.1rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.8rem;
  box-shadow:0 6px 16px -10px rgba(36,31,26,.4);
  transition:background .3s ease, box-shadow .2s ease;
}
.part-card .num{
  font-family:var(--font-display);
  font-size:1.5rem;
  color:var(--orange-600);
  width:1.6em;
  flex:none;
}
.part-card .info{flex:1;}
.part-card h4{font-family:var(--font-body);font-weight:800;font-size:.98rem;margin:0;color:var(--orange-700);}
.part-card .price{font-size:.85rem;color:var(--ink-soft);}
.part-card.pulse{
  background:var(--blush-100);
  box-shadow:0 8px 22px -8px var(--orange-600);
}

/* geschenke sits on the dark burgundy band — lighten the text that
   isn't already inside a paper card */
#geschenke .section-lede{color:var(--blush-100);}

/* =========================================================
   Footer
   ========================================================= */
.footer{
  background:var(--ink);
  color:var(--paper);
  padding-block:3.5rem 2.5rem;
  text-align:center;
}
.footer h2{
  font-size:clamp(2.2rem,7vw,3.4rem);
  color:var(--blush-200);
}
.footer p{color:rgba(248,243,232,.75);margin-top:.8rem;}
.footer .signature{
  font-family:var(--font-display);
  font-size:1.6rem;
  color:var(--paper);
  margin-top:1.4rem;
}
.footer-contact{
  margin-top:1.6rem;
  font-size:.95rem;
}
.footer-contact a{text-decoration:underline;text-underline-offset:3px;}

.easter-egg{
  margin-top:2.6rem;
  display:inline-flex;
  flex-direction:column;
  align-items:center;
  gap:.5rem;
}
.easter-egg img{
  width:110px;
  border-radius:14px;
  box-shadow:0 10px 24px -10px rgba(0,0,0,.6);
  transform:rotate(-3deg);
}
.easter-egg span{font-size:.75rem;letter-spacing:.06em;text-transform:uppercase;color:rgba(248,243,232,.6);}

/* status text for forms */
.status-msg{font-size:.85rem;font-weight:700;color:var(--orange-700);min-height:1.2em;}