/* ---------- tokens ---------- */
:root{
  --cream: #faf5ee;
  --cream-2: #f3ebde;
  --ink: #2c241d;
  --ink-soft: #5c5148;
  --gold: #b78a45;
  --gold-deep: #8f6a30;
  --rust: #c1602f;
  --line: rgba(44,36,29,0.12);

  --serif: "Fraunces", Georgia, serif;
  --sans: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --ease: cubic-bezier(.22,.61,.36,1);
  --dur-s: .5s;
  --dur-m: .9s;
  --dur-l: 1.4s;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
}

body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

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

/* ---------- reveal-on-scroll ---------- */
.reveal{
  opacity:0;
  transform:translateY(18px);
  transition:opacity var(--dur-m) var(--ease), transform var(--dur-m) var(--ease);
  transition-delay:calc(var(--d, 0) * 110ms);
}
.reveal[data-delay="1"]{ --d:1; }
.reveal[data-delay="2"]{ --d:2; }
.reveal[data-delay="3"]{ --d:3; }
.reveal[data-delay="4"]{ --d:4; }
.reveal[data-delay="5"]{ --d:5; }

.reveal.is-visible{
  opacity:1;
  transform:none;
}

@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
}

/* ---------- HERO ---------- */
.hero{
  position:relative;
  height:100svh;
  min-height:560px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:flex-end;
  color:#fff;
  isolation:isolate;
}

.hero__media{
  position:absolute;
  inset:0;
  z-index:0;
}

.hero__video{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:22% center;
  transform:scale(1.04);
  animation:heroIn 1.8s var(--ease) both;
}

@keyframes heroIn{
  from{ opacity:0; transform:scale(1.12); }
  to{ opacity:1; transform:scale(1.04); }
}

.hero__scrim{
  position:absolute;
  inset:0;
  background:
    radial-gradient(140% 100% at 78% 12%, rgba(255,247,232,.14), transparent 55%),
    linear-gradient(90deg, rgba(15,10,6,.55) 0%, rgba(15,10,6,.15) 46%, rgba(15,10,6,0) 60%),
    linear-gradient(180deg, rgba(20,15,10,.32) 0%, rgba(20,15,10,.1) 28%, rgba(20,15,10,.42) 74%, rgba(250,245,238,.5) 92%, var(--cream) 100%),
    radial-gradient(120% 90% at 50% 100%, transparent 58%, rgba(10,8,5,.22) 100%);
}

.hero__grain{
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.05;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 180 180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:180px 180px;
}

.hero__content{
  position:relative;
  z-index:1;
  padding:0 6vw 9vh;
  max-width:720px;
}

.hero__eyebrow{
  font-family:var(--sans);
  font-weight:600;
  letter-spacing:.22em;
  text-transform:uppercase;
  font-size:.72rem;
  opacity:.85;
  margin:0 0 .9rem;
}

.hero__title{
  font-family:var(--serif);
  font-optical-sizing:auto;
  font-weight:500;
  font-size:clamp(2.3rem, 7vw, 4.6rem);
  letter-spacing:-.01em;
  line-height:1.05;
  margin:0 0 .9rem;
  text-shadow:0 2px 24px rgba(0,0,0,.25);
}

.hero__subtitle{
  font-size:clamp(1.05rem, 2.4vw, 1.35rem);
  font-weight:500;
  margin:0;
  opacity:.95;
}

.heart{ display:inline-block; }

.hero__scrollcue{
  position:absolute;
  bottom:28px;
  left:50%;
  transform:translateX(-50%);
  z-index:1;
}
.hero__scrollcue span{
  display:block;
  width:1px;
  height:34px;
  background:linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,0));
  animation:cue 2.2s ease-in-out infinite;
}
@keyframes cue{
  0%{ transform:translateY(0); opacity:.2; }
  50%{ transform:translateY(8px); opacity:1; }
  100%{ transform:translateY(16px); opacity:0; }
}
@media (prefers-reduced-motion: reduce){
  .hero__scrollcue span{ animation:none; opacity:.6; }
  .hero__video{ animation:none; }
}

/* ---------- STORY ---------- */
.story{
  position:relative;
  background:var(--cream);
  padding:min(14vh, 8rem) 6vw;
  display:flex;
  justify-content:center;
}

.story__inner{
  max-width:620px;
  text-align:center;
}

.story__line{
  font-size:1.08rem;
  color:var(--ink-soft);
  margin:0 0 .85rem;
}

.story__line em{
  font-style:italic;
  color:var(--ink);
}

.story__line--accent{
  font-weight:600;
  color:var(--ink);
  margin-bottom:1.1rem;
}

.story__quote{
  font-family:var(--serif);
  font-optical-sizing:auto;
  font-style:italic;
  font-weight:500;
  font-size:clamp(1.35rem, 3.4vw, 1.9rem);
  color:var(--rust);
  margin:0 0 1.6rem;
  line-height:1.35;
}

.story__cta{
  font-family:var(--serif);
  font-optical-sizing:auto;
  font-size:1.4rem;
  margin:2rem 0 0;
  color:var(--ink);
}

/* ---------- GIFT / FORM ---------- */
.gift{
  position:relative;
  background:var(--cream-2);
  padding:2vh 6vw min(14vh, 9rem);
  display:flex;
  justify-content:center;
}

.gift__form{
  width:100%;
  max-width:680px;
}

.gift__cards{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:22px;
  margin:0 0 3.2rem;
  perspective:1200px;
}

.gift__cards .reveal{ transform:translateY(26px) scale(.93); }
.gift__cards .reveal.is-visible{ transform:none; }

.card{
  appearance:none;
  border:1px solid var(--line);
  background:linear-gradient(180deg, #fff 0%, #fdfaf4 100%);
  border-radius:26px;
  padding:2.5rem 1.4rem 2.1rem;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:1rem;
  cursor:pointer;
  font-family:var(--sans);
  color:var(--ink);
  position:relative;
  overflow:hidden;
  isolation:isolate;
  box-shadow:0 2px 8px rgba(44,36,29,.05);
  transition:transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s var(--ease), background .5s var(--ease);
  min-height:248px;
  transform-style:preserve-3d;
  will-change:transform;
}

.card__shine{
  position:absolute;
  inset:-50% -70%;
  background:linear-gradient(115deg, transparent 42%, rgba(255,255,255,.6) 50%, transparent 58%);
  transform:translateX(-130%);
  transition:transform 1s var(--ease);
  pointer-events:none;
  z-index:1;
}

.card:hover .card__shine{ transform:translateX(70%); }

.card__badge{
  width:82px;
  height:82px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:radial-gradient(circle at 32% 28%, #ffffff, #f5ead8 62%, #ecdbbb 100%);
  box-shadow:0 10px 22px rgba(183,138,69,.2), inset 0 0 0 1px rgba(183,138,69,.16);
  transition:transform .55s var(--ease), background .55s var(--ease), box-shadow .55s var(--ease);
  transform:translateZ(24px);
}

.card__icon{
  font-size:2.5rem;
  line-height:1;
  transition:transform .5s var(--ease), filter .5s var(--ease);
}

.card__text{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.2rem;
  transform:translateZ(14px);
}

.card__label{
  font-family:var(--serif);
  font-weight:500;
  font-size:1.22rem;
  letter-spacing:.005em;
}

.card__desc{
  font-size:.82rem;
  color:var(--ink-soft);
  opacity:.75;
  text-align:center;
}

.card__check{
  position:absolute;
  top:16px;
  right:16px;
  width:28px;
  height:28px;
  border-radius:50%;
  background:linear-gradient(135deg, var(--gold), var(--rust));
  color:#fff;
  font-size:.72rem;
  display:flex;
  align-items:center;
  justify-content:center;
  transform:scale(0) translateZ(30px);
  opacity:0;
  transition:transform .45s var(--ease), opacity .3s var(--ease);
  box-shadow:0 6px 14px rgba(183,138,69,.4);
  z-index:2;
}

.card:hover{
  box-shadow:0 24px 46px rgba(44,36,29,.13);
  border-color:rgba(183,138,69,.35);
}

.card:hover .card__badge{
  transform:translateZ(30px) scale(1.07) rotate(-4deg);
}

.card:hover .card__icon{
  transform:scale(1.1);
}

.card:active{
  transform:scale(.97);
}

.card.is-active{
  border-color:var(--gold);
  background:linear-gradient(180deg, #fff 0%, #fbf2df 100%);
  box-shadow:0 26px 50px rgba(183,138,69,.28), 0 0 0 1px var(--gold) inset;
}

.card.is-active .card__badge{
  background:linear-gradient(150deg, var(--gold) 0%, var(--rust) 120%);
  box-shadow:0 12px 26px rgba(183,138,69,.42);
}

.card.is-active .card__icon{
  transform:scale(1.06);
  filter:brightness(1.3) saturate(1.1);
}

.card.is-active .card__check{
  transform:scale(1) translateZ(30px);
  opacity:1;
}

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

@media (hover:none){
  .card__shine{ display:none; }
}

/* other-wish field */
.gift__other{
  overflow:hidden;
  max-height:0;
  opacity:0;
  transform:translateY(-6px);
  transition:max-height var(--dur-m) var(--ease), opacity var(--dur-s) var(--ease), transform var(--dur-m) var(--ease), margin var(--dur-m) var(--ease);
  margin:0;
}

.gift__other.is-open{
  max-height:160px;
  opacity:1;
  transform:none;
  margin:0 0 1.8rem;
}

.gift__row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1.2rem;
  margin-bottom:2.2rem;
}

.field{ display:flex; flex-direction:column; }

.field__label{
  font-size:.82rem;
  font-weight:600;
  color:var(--ink-soft);
  margin-bottom:.45rem;
}

.field__input{
  border:1px solid var(--line);
  background:#fff;
  border-radius:12px;
  padding:.85rem 1rem;
  font-family:var(--sans);
  font-size:1rem;
  color:var(--ink);
  transition:border-color var(--dur-s) var(--ease), box-shadow var(--dur-s) var(--ease);
}

.field__input:focus{
  outline:none;
  border-color:var(--gold);
  box-shadow:0 0 0 3px rgba(183,138,69,.16);
}

.field__hint{
  font-size:.76rem;
  color:var(--ink-soft);
  opacity:.75;
  margin-top:.4rem;
}

.field__error{
  color:#a3402a;
  font-size:.88rem;
  margin:.9rem 0 0;
  text-align:center;
}

.hp{
  position:absolute;
  left:-9999px;
  width:1px;
  height:1px;
  overflow:hidden;
}

.gift__submit{
  display:flex;
  flex-direction:column;
  align-items:center;
}

.btn{
  appearance:none;
  border:none;
  cursor:pointer;
  background:linear-gradient(135deg, var(--gold) 0%, var(--rust) 130%);
  color:#fff;
  font-family:var(--sans);
  font-weight:700;
  font-size:1.02rem;
  padding:1.15rem 2.6rem;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  position:relative;
  overflow:hidden;
  isolation:isolate;
  box-shadow:0 10px 24px rgba(183,138,69,.32), inset 0 1px 0 rgba(255,255,255,.35);
  transition:transform var(--dur-s) var(--ease), box-shadow var(--dur-s) var(--ease), filter var(--dur-s) var(--ease);
}

.btn::before{
  content:"";
  position:absolute;
  inset:-40% -60%;
  background:linear-gradient(115deg, transparent 42%, rgba(255,255,255,.45) 50%, transparent 58%);
  transform:translateX(-130%);
  transition:transform .9s var(--ease);
}

.btn:hover::before{ transform:translateX(70%); }

.btn__label,
.btn__heart{
  position:relative;
  z-index:1;
}

.btn__heart{
  display:inline-block;
  transition:transform .35s var(--ease);
}

.btn:hover{
  transform:translateY(-2px);
  box-shadow:0 16px 32px rgba(183,138,69,.4);
  filter:brightness(1.04);
}

.btn:hover .btn__heart{
  transform:scale(1.18);
}

.btn:active{
  transform:translateY(0) scale(.97);
}

.btn:disabled{
  opacity:.6;
  cursor:default;
  transform:none;
}

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

/* ---------- SUCCESS ---------- */
.gift__success{
  width:100%;
  max-width:680px;
  text-align:center;
  padding:3rem 1rem;
  animation:successIn .8s var(--ease) both;
}

@keyframes successIn{
  from{ opacity:0; transform:translateY(14px) scale(.98); }
  to{ opacity:1; transform:none; }
}

.success__icon{
  position:relative;
  font-size:2.6rem;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:88px;
  height:88px;
  margin-bottom:1.2rem;
  animation:heartBeat 1.6s var(--ease) .3s both;
}

.success__icon::before,
.success__icon::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:50%;
  border:1px solid rgba(183,138,69,.4);
  animation:ring 1.8s var(--ease) .5s both;
}

.success__icon::after{
  animation-delay:.7s;
}

@keyframes ring{
  0%{ transform:scale(.5); opacity:0; }
  40%{ opacity:.6; }
  100%{ transform:scale(1.6); opacity:0; }
}

@keyframes heartBeat{
  0%{ transform:scale(.6); opacity:0; }
  60%{ transform:scale(1.15); opacity:1; }
  100%{ transform:scale(1); }
}

.success__title{
  font-family:var(--serif);
  font-size:1.7rem;
  margin:0 0 .5rem;
}

.success__subtitle{
  color:var(--ink-soft);
  margin:0;
}

@media (prefers-reduced-motion: reduce){
  .gift__success, .success__icon{ animation:none; }
  .success__icon::before, .success__icon::after{ display:none; }
}

/* ---------- RESPONSIVE ---------- */
@media (max-width:760px){
  .hero{ height:88svh; min-height:520px; }
  .hero__video{ object-position:30% center; }
  .hero__content{ padding:0 6vw 7vh; max-width:none; }
  .gift__row{ grid-template-columns:1fr; }
  .gift__cards{
    grid-template-columns:1fr 1fr;
    gap:14px;
  }
  .card{
    padding:1.8rem 1rem 1.5rem;
    min-height:190px;
    border-radius:22px;
    gap:.75rem;
  }
  .card__badge{ width:62px; height:62px; }
  .card__icon{ font-size:2rem; }
  .card__label{ font-size:1.05rem; }
  .card__desc{ font-size:.76rem; }
  /* "Sonstiges" spans full width on the 2-column mobile grid so all three feel equally prominent */
  .card[data-value="Sonstiges"]{
    grid-column:1 / -1;
    flex-direction:row;
    justify-content:flex-start;
    text-align:left;
    min-height:auto;
    padding:1.2rem 1.4rem;
  }
  .card[data-value="Sonstiges"] .card__badge{ width:52px; height:52px; flex-shrink:0; }
  .card[data-value="Sonstiges"] .card__icon{ font-size:1.6rem; }
  .card[data-value="Sonstiges"] .card__text{ align-items:flex-start; }
  .card[data-value="Sonstiges"] .card__desc{ text-align:left; }
  .story{ padding:9vh 6vw; }
}

@media (max-width:400px){
  .hero__title{ font-size:2rem; }
}