@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=DM+Sans:wght@400;600;700&family=Gloria+Hallelujah&display=swap');

:root{
  --pink:#f2b2da;
  --hot:#ef4966;
  --red:#d72c32;
  --orange:#ff7a35;
  --lime:#ccd86a;
  --blue:#5871c8;
  --cream:#fff1d4;
  --ink:#25311f;
  --black:#1e211b;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--pink);color:var(--ink);font-family:"DM Sans",sans-serif;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit}
.section-inner{width:min(1160px,calc(100% - 36px));margin-inline:auto}
h1,h2,h3,.festival-mark,.blob-title{font-family:"Archivo Black",sans-serif}
.eyebrow{font-weight:800;letter-spacing:.08em;text-transform:uppercase;margin:0 0 10px}
.hand{font-family:"Gloria Hallelujah",cursive;font-size:1.15rem}

.hero{background:var(--pink);min-height:100vh;position:relative}
.topnav{
  height:64px;display:flex;align-items:center;justify-content:center;gap:28px;
  padding:0 22px;background:var(--blue);color:var(--cream);font-weight:800;font-size:.84rem;letter-spacing:.07em
}
.topnav a{text-decoration:none}
.mini-logo{background:var(--cream);color:var(--red);padding:8px 10px;border-radius:999px}
.hero-grid{display:grid;grid-template-columns:1.04fr .96fr;min-height:calc(100vh - 64px)}
.hero-art{position:relative;overflow:hidden;background:var(--orange)}
.hero-art img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0;filter:saturate(.9) contrast(1.04)}
.hero-art:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.05),rgba(0,0,0,.18))}
.sunburst{
  position:absolute;width:1100px;height:1100px;left:-420px;top:-260px;z-index:2;opacity:.44;
  background:repeating-conic-gradient(var(--hot) 0 11deg,transparent 11deg 22deg);border-radius:50%
}
.hero-sticker,.hero-note{position:absolute;z-index:3;font-weight:800}
.sticker-top{top:26px;left:28px;background:var(--lime);padding:9px 14px;transform:rotate(-2deg);box-shadow:5px 5px 0 var(--red)}
.hero-note{right:24px;bottom:30px;background:var(--cream);padding:16px 18px;transform:rotate(3deg);font-family:"Gloria Hallelujah";font-size:1.1rem}
.hero-copy{
  background:var(--pink);padding:clamp(44px,6vw,84px) clamp(28px,5vw,70px);
  display:flex;flex-direction:column;justify-content:center;position:relative;overflow:hidden
}
.hero-copy:before{
  content:"";position:absolute;width:380px;height:380px;border-radius:50%;background:var(--lime);right:-230px;top:-80px;opacity:.9
}
.festival-mark{position:relative;z-index:2;font-size:clamp(4.2rem,8vw,8.2rem);line-height:.74;letter-spacing:-.065em}
.festival-mark .line{display:block}
.l1{color:var(--cream);text-shadow:4px 4px 0 var(--blue)}
.l2{color:var(--hot);transform:translateX(4%)}
.l3{color:var(--orange)}
.couple{margin-top:28px;font-family:"Archivo Black";font-size:clamp(1.35rem,2.2vw,2.1rem);letter-spacing:.06em}
.couple span{color:var(--blue)}
.date-card{margin-top:24px;background:var(--lime);padding:16px 18px;display:flex;flex-direction:column;gap:5px;max-width:620px;transform:rotate(-1deg);box-shadow:7px 7px 0 var(--red)}
.date-card strong{font-size:1.2rem}
.primary-cta{display:inline-block;width:max-content;max-width:100%;margin-top:32px;background:var(--red);color:var(--cream);padding:15px 22px;border-radius:999px;text-decoration:none;font-weight:900;box-shadow:6px 6px 0 var(--blue)}

.ticker{
  background:var(--orange);
  overflow:hidden;
  border-top:4px solid var(--ink);
  border-bottom:4px solid var(--ink);
  font-family:"Archivo Black";
  font-size:1.25rem;
  white-space:nowrap;
}

.ticker div{
  display:inline-block;
  width:max-content;
  min-width:200%;
  padding:13px 0;
  padding-left:100%;
  transform:none;
  animation:festivalTicker 22s linear infinite;
  will-change:transform;
}

@keyframes festivalTicker{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}

@media (prefers-reduced-motion: reduce){
  .ticker div{
    animation:none;
    padding-left:0;
    min-width:100%;
    text-align:center;
  }
}

.countdown-section{background:var(--lime);padding:82px 0}
.countdown-layout{display:grid;grid-template-columns:.7fr 1.3fr;gap:46px;align-items:center}
.countdown-section h2{margin:0;color:var(--blue);font-size:clamp(4rem,8vw,7rem);line-height:.75}
.countdown{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.countdown div{background:var(--pink);padding:22px 10px;text-align:center;border:4px solid var(--ink);box-shadow:6px 6px 0 var(--red)}
.countdown strong{display:block;font-family:"Archivo Black";font-size:clamp(2.2rem,5vw,4.4rem)}
.countdown span{font-weight:800;font-size:.75rem}

.story{display:grid;grid-template-columns:.9fr 1.1fr;gap:60px;align-items:center;padding:100px 0}
.story-visual{position:relative}
.photo-cutout{background:var(--red);padding:18px;clip-path:polygon(4% 4%,95% 0,100% 88%,84% 100%,3% 96%,0 19%)}
.photo-cutout img{width:100%;aspect-ratio:4/3;object-fit:cover}
.story-badge{position:absolute;right:-24px;bottom:-26px;background:var(--blue);color:var(--cream);border-radius:50%;width:155px;height:155px;display:grid;place-items:center;text-align:center;font-family:"Archivo Black";font-size:1.4rem;transform:rotate(8deg)}
.story-copy h2{font-size:clamp(3rem,6vw,5.8rem);line-height:.86;color:var(--red);margin:0}
.story-copy p{font-size:1.08rem;line-height:1.7}

.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;padding-bottom:100px}
.card{padding:28px;min-height:300px;border:4px solid var(--ink);box-shadow:8px 8px 0 var(--ink)}
.card .number{font-family:"Archivo Black";font-size:1.1rem}
.card h3{font-size:2.4rem;line-height:.88;margin:42px 0 18px}
.card p{line-height:1.55}
.card-lime{background:var(--lime)}
.card-red{background:var(--red);color:var(--cream)}
.card-orange{background:var(--orange)}

.program-section{background:var(--blue);color:var(--cream);padding:90px 0}
.program-grid{display:grid;grid-template-columns:.75fr 1.25fr;gap:60px;align-items:center}
.blob-title{display:inline-block;background:var(--lime);color:var(--blue);padding:35px 42px;border-radius:46% 54% 41% 59% / 50% 38% 62% 50%;font-size:clamp(3rem,6vw,5.4rem);line-height:.78;text-align:center;transform:rotate(-3deg)}
.program-list{border-top:4px solid var(--cream)}
.program-row{display:grid;grid-template-columns:140px 1fr 1fr;gap:20px;padding:20px 0;border-bottom:2px solid rgba(255,255,255,.45);align-items:center}
.program-row span{font-family:"Archivo Black";font-size:1.3rem}
.program-row em{font-style:normal;opacity:.8}

.details{display:grid;grid-template-columns:.7fr 1.3fr;gap:54px;padding:100px 0}
.details-copy h2{margin:0;color:var(--red);font-size:clamp(3.8rem,7vw,6.8rem);line-height:.8}
.detail-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.detail-grid article{background:var(--cream);padding:24px;border:4px solid var(--ink)}
.detail-grid h3{font-size:1.45rem;margin:0 0 10px}
.detail-grid p{line-height:1.5}

.rsvp-wrap{background:var(--red);color:var(--cream);padding:100px 0}
.rsvp-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:start}
.rsvp-intro h2{font-size:clamp(4rem,7vw,7rem);line-height:.78;margin:0}
.rsvp-photo{margin-top:32px;background:var(--orange);padding:14px;transform:rotate(-2deg);box-shadow:8px 8px 0 var(--cream)}
.rsvp-photo img{aspect-ratio:4/3;object-fit:cover;width:100%}
.rsvp-form{background:var(--pink);color:var(--ink);padding:30px;border:4px solid var(--ink);box-shadow:10px 10px 0 var(--orange)}
.rsvp-form label,.rsvp-form legend{font-weight:900;letter-spacing:.04em}
.rsvp-form input[type="text"],.rsvp-form input[type="number"]{width:100%;margin-top:8px;padding:13px 14px;border:3px solid var(--ink);background:var(--cream);font:inherit}
fieldset{border:0;padding:0;margin:24px 0}
.choice{display:inline-flex;align-items:center;gap:8px;margin:9px 10px 0 0;padding:10px 13px;border:3px solid var(--ink);background:var(--cream)}
.two-cols{display:grid;grid-template-columns:1fr 1fr;gap:14px}
button{width:100%;border:4px solid var(--ink);background:var(--lime);font-family:"Archivo Black";font-size:1.15rem;padding:15px;box-shadow:6px 6px 0 var(--ink);cursor:pointer}
.form-note{font-size:.88rem;opacity:.8}
.form-message{font-weight:800}

.location{background:var(--orange);padding:100px 0}
.location-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:50px;align-items:center}
.location h2{font-size:clamp(5rem,10vw,9rem);line-height:.72;margin:0;color:var(--blue);text-shadow:4px 4px 0 var(--cream)}
.location-address{font-weight:900;font-size:1.15rem}
.photo-stack{display:grid;grid-template-columns:repeat(3,1fr);align-items:end}
.photo-stack img{width:100%;aspect-ratio:3/4;object-fit:cover;border:10px solid var(--cream);box-shadow:0 16px 28px rgba(0,0,0,.18)}
.photo-stack img:nth-child(1){transform:rotate(-6deg) translateX(12px)}
.photo-stack img:nth-child(2){transform:rotate(3deg);z-index:2}
.photo-stack img:nth-child(3){transform:rotate(7deg) translateX(-12px)}

footer{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;background:var(--black);color:var(--cream);padding:28px 5vw;font-weight:800}
footer a{color:var(--lime)}

@media(max-width:900px){
  .hero-grid,.countdown-layout,.story,.program-grid,.details,.rsvp-grid,.location-grid{grid-template-columns:1fr}
  .hero-art{min-height:58vh}
  .hero-copy{min-height:auto}
  .festival-mark{font-size:clamp(4.2rem,17vw,7rem)}
  .cards{grid-template-columns:1fr}
  .program-row{grid-template-columns:1fr;gap:5px}
  .detail-grid{grid-template-columns:1fr}
  .topnav a:not(.mini-logo){display:none}
}
@media(max-width:620px){
  .section-inner{width:min(100% - 24px,1160px)}
  .countdown{grid-template-columns:repeat(2,1fr)}
  .two-cols{grid-template-columns:1fr}
  .photo-stack{grid-template-columns:1fr}
  .photo-stack img{transform:none!important;margin-top:-10px}
}


/* V2.2 – Mobile-Optimierung
   Desktop bleibt unverändert. */
@media(max-width:620px){
  html,body{max-width:100%;overflow-x:hidden}

  .section-inner{width:calc(100% - 32px)}

  /* Navigation */
  .topnav{
    height:56px;
    padding:0 16px;
    justify-content:flex-start;
  }

  /* Hero */
  .hero-grid{min-height:auto}
  .hero-art{min-height:62svh}
  .sticker-top{
    top:18px;
    left:18px;
    padding:8px 11px;
    font-size:.82rem;
  }
  .hero-note{
    right:16px;
    bottom:18px;
    padding:11px 13px;
    font-size:.95rem;
  }
  .hero-copy{
    padding:42px 20px 54px;
  }
  .hero-copy:before{
    width:240px;
    height:240px;
    right:-145px;
    top:-45px;
  }
  .festival-mark{
    font-size:clamp(3.2rem,15vw,4.7rem);
    line-height:.79;
    letter-spacing:-.055em;
    max-width:100%;
  }
  .l2{transform:none}
  .couple{
    margin-top:24px;
    font-size:clamp(1.15rem,5.8vw,1.55rem);
    letter-spacing:.045em;
  }
  .date-card{
    margin-top:22px;
    padding:15px 16px;
    box-shadow:5px 5px 0 var(--red);
  }
  .date-card strong{font-size:1.08rem}
  .date-card span{
    font-size:.92rem;
    line-height:1.4;
    overflow-wrap:anywhere;
  }
  .primary-cta{
    width:100%;
    text-align:center;
    margin-top:28px;
    padding:15px 14px;
    font-size:.94rem;
    box-shadow:5px 5px 0 var(--blue);
  }

  /* Ticker */
  .ticker{font-size:1rem}
  .ticker div{
    padding-top:11px;
    padding-bottom:11px;
    animation-duration:18s;
  }

  /* Countdown */
  .countdown-section{padding:58px 0 64px}
  .countdown-layout{gap:30px}
  .countdown-section h2{
    font-size:clamp(3.5rem,17vw,5rem);
    line-height:.78;
  }
  .countdown{gap:10px}
  .countdown div{
    padding:16px 6px;
    border-width:3px;
    box-shadow:4px 4px 0 var(--red);
  }
  .countdown strong{font-size:clamp(2rem,11vw,3rem)}

  /* Story */
  .story{
    gap:42px;
    padding:68px 0 72px;
  }
  .photo-cutout{padding:12px}
  .story-badge{
    width:112px;
    height:112px;
    right:8px;
    bottom:-28px;
    font-size:1rem;
  }
  .story-copy h2{
    font-size:clamp(2rem,8vw,2.7rem);
  }
  .story-copy p{
    font-size:1rem;
    line-height:1.6;
  }

  /* Festival cards */
  .cards{
    gap:16px;
    padding-bottom:72px;
  }
  .card{
    min-height:0;
    padding:24px 22px;
    box-shadow:6px 6px 0 var(--ink);
  }
  .card h3{
    margin:30px 0 15px;
    font-size:2rem;
  }

  /* Programm */
  .program-section{padding:68px 0}
  .program-grid{gap:42px}
  .blob-title{
    padding:27px 30px;
    font-size:clamp(2.5rem,13vw,3.6rem);
  }
  .program-row{
    padding:17px 0;
  }
  .program-row span{font-size:1.08rem}

  /* Details */
  .details{
    gap:38px;
    padding:70px 0;
  }
  .details-copy h2{
    font-size:clamp(3rem,14vw,4.2rem);
    line-height:.84;
  }
  .detail-grid article{
    padding:20px;
    border-width:3px;
  }

  /* Kommt ihr? */
  .rsvp-wrap{padding:70px 0}
  .rsvp-grid{gap:42px}
  .rsvp-intro h2{
    font-size:clamp(3.2rem,15vw,4.5rem);
    line-height:.82;
  }
  .rsvp-photo{
    margin-top:24px;
    padding:10px;
    box-shadow:6px 6px 0 var(--cream);
  }
  .rsvp-form{
    padding:22px 18px;
    border-width:3px;
    box-shadow:6px 6px 0 var(--orange);
  }
  .choice{
    display:flex;
    width:100%;
    margin:9px 0 0;
  }
  button{
    font-size:1rem;
    padding:14px 10px;
    box-shadow:4px 4px 0 var(--ink);
  }

  /* Location – wichtigster Mobile-Fix */
  .location{padding:68px 0 74px}
  .location-grid{gap:38px}
  .location h2{
    font-size:clamp(3rem,14vw,4rem);
    line-height:.82;
    letter-spacing:-.06em;
    text-shadow:3px 3px 0 var(--cream);
    max-width:100%;
    overflow-wrap:normal;
  }
  .location-address{
    font-size:1rem;
    line-height:1.35;
    overflow-wrap:anywhere;
  }
  .location .hand{
    font-size:1rem;
    line-height:1.5;
  }

  /* Die drei Bilder bleiben als Collage statt drei riesiger Einzelbilder */
  .photo-stack{
    grid-template-columns:repeat(3,1fr);
    gap:0;
    padding:8px 5px 18px;
    align-items:center;
  }
  .photo-stack img{
    margin:0;
    border-width:5px;
    box-shadow:0 8px 16px rgba(0,0,0,.16);
  }
  .photo-stack img:nth-child(1){transform:rotate(-5deg) translateX(6px)!important}
  .photo-stack img:nth-child(2){transform:rotate(2deg)!important;z-index:2}
  .photo-stack img:nth-child(3){transform:rotate(5deg) translateX(-6px)!important}

  footer{
    padding:24px 18px;
    font-size:.9rem;
    flex-direction:column;
  }
}


/* Desktop-Feinschliff – Story-Bereich
   Größeres Paarfoto, kleineres GLÜCK-UND-LIEBE-Badge.
   Mobile-Regeln bleiben unverändert. */
@media (min-width: 901px){
  .story{
    grid-template-columns:minmax(360px, .82fr) 1.55fr;
    gap:68px;
  }

  .story-visual{
    width:100%;
    max-width:430px;
    justify-self:start;
  }

  .photo-cutout{
    padding:16px;
  }

  .story-badge{
    width:112px;
    height:112px;
    right:-18px;
    bottom:-18px;
    font-size:1rem;
    line-height:1.05;
  }
}


/* Desktop – Location-Hinweis etwas größer */
@media (min-width: 901px){
  .location .hand{
    font-size:1.4rem;
    line-height:1.5;
  }
}


/* Desktop – Location-Fotocollage sauber rechts */
@media (min-width: 901px){
  .location-grid{
    grid-template-columns:minmax(0, 1.18fr) minmax(420px, .82fr);
    gap:84px;
    align-items:center;
  }

  .photo-stack{
    width:82%;
    max-width:560px;
    justify-self:end;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:0;
    padding:20px 0;
    transform:translateX(6%);
  }

  .photo-stack img{
    width:100%;
    max-width:none;
    border-width:10px;
    box-shadow:0 12px 22px rgba(0,0,0,.16);
  }

  .photo-stack img:nth-child(1){
    transform:rotate(-5deg) translateX(7%) scale(1.01);
    z-index:1;
  }

  .photo-stack img:nth-child(2){
    transform:rotate(2deg) scale(1.03);
    z-index:3;
  }

  .photo-stack img:nth-child(3){
    transform:rotate(5deg) translateX(-7%) scale(1.01);
    z-index:2;
  }
}