:root {
  --ink: #2b2119;
  --cream: #f7efe4;
  --gold: #c9a24b;
  --brown: #2a1c12; /* warm elegant brown */
  --dark: #0e0b08;
  font-family: "Cormorant Garamond", "Hoefler Text", Georgia, serif;
}

* {
  box-sizing: border-box;
}

html {
  margin: 0;
  padding: 0;
  background: var(--brown); /* ultimate page backdrop */
}

body {
  margin: 0;
  padding: 0;
  background: var(--dark); /* JS eases this to --brown on scroll */
  color: var(--cream);
}

/* Lenis smooth scroll */
html.lenis,
html.lenis body {
  height: auto;
}
.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}
.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}
.lenis.lenis-stopped {
  overflow: clip;
}

/* ---------- Hero shell ---------- */
.hero {
  position: sticky; /* pin the hero; the carousel scrolls up over it */
  top: 0;
  z-index: 1;
  width: 100%;
  height: 100svh;
  min-height: 560px;
  overflow: hidden;
}

/* perspective so the subtle scene tilt reads as depth */
.stage {
  position: absolute;
  inset: 0;
  perspective: 1400px;
  perspective-origin: 50% 45%;
}

.parallax {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  will-change: transform;
}

/*
 * .layer (container) carries the cursor parallax transform (set by JS).
 * .layer__img carries the entrance animation + the static overscale, so the
 * two transforms never overwrite each other.
 */
.layer {
  position: absolute;
  inset: 0;
  transform: translate3d(0, 0, 0);
  will-change: transform;
}

/* darken only the couple layer (behind the title) so it isn't too bright,
   without dimming the title that sits behind it */
.layer--couple .layer__img {
  filter: brightness(0.75);
}

/* layer 5 (foreground branch) pivots from its base at the top-left as you
   scroll, so the drooping right side swings upward (see data-rotate in JS) */
.layer--sway {
  transform-origin: 0% 0%;
}

.layer__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
  /* overscale to hide parallax edges (composes with the entrance transform) */
  scale: 1.2;
  will-change: transform, opacity;
}

/* ---------- Entrance animations (play once on load, then parallax rules) ---------- */
@keyframes enterFade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes enterUp {
  from {
    opacity: 0;
    transform: translateY(70px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes enterDown {
  from {
    opacity: 0;
    transform: translateY(-70px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes enterRight {
  from {
    opacity: 0;
    transform: translateX(90px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.layer__img {
  opacity: 0; /* hidden until its entrance runs */
  animation-fill-mode: both;
  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); /* dynamic ease-out */
}

.enter-fade {
  /* layer 1 — background settles in first */
  animation-name: enterFade;
  animation-duration: 1.9s;
  animation-delay: 0s;
}
.enter-right {
  /* layer 2 — trees drift in from the right */
  animation-name: enterRight;
  animation-duration: 1.7s;
  animation-delay: 0.55s;
}
.enter-up {
  /* layer 3 — terrace + couple rise up, with a soft settle at the end */
  animation-name: enterUp;
  animation-duration: 2.3s;
  animation-delay: 1.05s;
  animation-timing-function: cubic-bezier(0.25, 0.9, 0.25, 1);
}
.enter-down {
  /* layers 4 & 5 — branches drop down */
  animation-name: enterDown;
  animation-duration: 1.5s;
  animation-delay: 1.5s;
}
/* layer 4 — same drop, but also turns in clockwise (starts tilted a touch
   counter-clockwise, then rotates to level as it settles) */
@keyframes enterDownTurn {
  from {
    opacity: 0;
    transform: translateY(-70px) rotate(-5deg);
  }
  to {
    opacity: 1;
    transform: translateY(0) rotate(0deg);
  }
}
.enter-down-turn {
  animation-name: enterDownTurn;
  animation-duration: 1.5s;
  animation-delay: 1.5s;
  /* layer 5 rotate-in (page-open): pivots from the top-left anchor (same corner
     as its scroll sway), settling clockwise from a -5deg tilt to level */
  transform-origin: 0% 0%;
  /* transform-origin also drives the shared .layer__img overscale (scale:1.2),
     so give this layer a layout-based overscale instead — that keeps its resting
     position centred while the left pivot only affects the rotation. */
  scale: 1;
  top: -10%;
  left: -10%;
  width: 120%;
  height: 120%;
}
/* the nearest branch (layer 5) lands a beat later so nothing is simultaneous.
   Scoped by class (.layer--sway) rather than :nth-child(5) so inserting extra
   background layers can't shift this onto the wrong layer. */
.parallax .layer--sway .enter-down {
  animation-delay: 1.95s;
}

/* ---------- Legibility + copy ---------- */
.hero__scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(
      120% 90% at 50% 30%,
      transparent 40%,
      rgba(14, 11, 8, 0.35) 100%
    ),
    /* upper area (where the title sits) stays clear; lower foreground darkens */
      linear-gradient(
        to bottom,
        transparent 0%,
        transparent 52%,
        rgba(14, 11, 8, 0.55) 100%
      );
}

.hero__content {
  position: absolute;
  left: 50%;
  top: 62%; /* below the in-scene title so the copy doesn't collide with it */
  transform: translate(-50%, -50%);
  text-align: center;
  z-index: 2;
  width: min(92vw, 900px);
  padding: 0 1.25rem;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.45);
}

/* ---------- Handwritten title (real stroke-draw) ---------- */
.hero__title {
  margin: 0 0 0.6rem;
  line-height: 1;
}

/* Title moved into the scene, sat above centre, behind layer 3 */
.hero__title--inscene {
  position: absolute;
  inset: 0;
  margin: 0;
  display: grid;
  place-items: center;
  padding-bottom: calc(16vh - 50px); /* raises the title, ~25px lower than 16vh */
  pointer-events: none;
}

.title-svg {
  display: block;
  width: min(88vw, 909px); /* 760 base → +20% (912) → −5% (866) → +5% (909) */
  height: auto;
  margin: 0 auto;
  overflow: visible; /* let script flourishes spill past the viewBox */
}

/*
 * Solid white letters, revealed by a thick pen stroke that writes along the
 * letter paths left→right (mask animated via stroke-dashoffset).
 */
.title-fill {
  fill: #fff;
}

.title-pen {
  stroke-dasharray: 100;
  stroke-dashoffset: 100; /* each glyph hidden until its turn */
  /* Fully transparent until this glyph's own draw begins. A retracted dash with
     a round stroke-cap still paints a dot at the path's start point; with the
     descenders starting low, those dots showed as artefacts at the bottom of the
     title for the whole pre-animation delay. opacity:0 + fill-mode:forwards (no
     backwards fill) keeps each pen invisible until its draw kicks in. */
  opacity: 0;
  /* start after the layers, then one glyph after another (0.24s apart) */
  animation: draw 0.55s ease-out forwards;
  animation-delay: calc(2.4s + var(--i) * 0.24s);
}

@keyframes draw {
  from {
    opacity: 1;
    stroke-dashoffset: 100;
  }
  to {
    opacity: 1;
    stroke-dashoffset: 0;
  }
}

/* ---------- Supporting copy: blurred slow fade-in after the title ---------- */
.reveal {
  opacity: 0;
  animation: blurIn 1.4s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.hero__eyebrow.reveal {
  animation-delay: 5.6s;
}
.hero__date.reveal {
  animation-delay: 5.85s;
}
.hero__cta.reveal {
  animation-delay: 6.1s;
}

@keyframes blurIn {
  from {
    opacity: 0;
    filter: blur(18px);
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0);
  }
}

.hero__eyebrow {
  margin: 0 0 0.5rem;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  font-size: clamp(0.65rem, 1.4vw, 0.85rem);
  font-family: "Jost", "Helvetica Neue", Arial, sans-serif;
  color: rgba(247, 239, 228, 0.85);
}

.hero__date {
  margin: 0.5rem 0 1.75rem;
  font-size: clamp(1rem, 2.4vw, 1.5rem);
  letter-spacing: 0.06em;
  font-style: italic;
  color: rgba(247, 239, 228, 0.92);
}

.hero__cta {
  display: inline-block;
  padding: 0.7rem 2.4rem;
  border: 1px solid rgba(247, 239, 228, 0.7);
  border-radius: 999px;
  color: var(--cream);
  text-decoration: none;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  font-size: 0.75rem;
  font-family: "Jost", "Helvetica Neue", Arial, sans-serif;
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.hero__cta:hover {
  background: var(--cream);
  color: var(--ink);
  border-color: var(--cream);
}

/* Static fallback for reduced-motion users */
@media (prefers-reduced-motion: reduce) {
  .layer__img {
    scale: 1;
    opacity: 1;
    animation: none;
  }
  .title-pen {
    stroke-dashoffset: 0; /* show the title fully, no writing animation */
    opacity: 1; /* undo the pre-animation hide so the title is visible */
    animation: none;
  }
  .reveal {
    opacity: 1;
    filter: none;
    transform: none;
    animation: none;
  }
}

/* ---------- Card stack: hero pinned, showcase locks 4rem below it ---------- */
.stack {
  position: relative;
}
.stack-spacer {
  /* svh, not vh: on iOS the address bar collapse changes vh mid-scroll and
     shifts the lock-point math under the user's finger */
  height: 60svh; /* scroll room so the locked showcase card holds in place */
}

#showcase {
  position: sticky; /* rises up and locks, expanding to fullscreen */
  top: 0;
  width: 100%;
  left: 0;
  min-height: 100svh;
  /* frosted-glass warm brown over the hero */
  background: linear-gradient(
    180deg,
    rgba(58, 40, 27, 0.58) 0%,
    rgba(34, 22, 14, 0.82) 55%,
    rgba(22, 14, 9, 0.9) 100%
  );
  backdrop-filter: blur(22px) saturate(120%);
  -webkit-backdrop-filter: blur(22px) saturate(120%);
  border-top: 1px solid rgba(255, 255, 255, 0.09);
  box-shadow: 0 -28px 70px rgba(0, 0, 0, 0.35);
  overflow: clip; /* keep the cards inside the section */
  /* corners are controlled entirely by the animated clip-path (JS) */
  padding-top: 15.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(2.5rem, 5vh, 4rem); /* clears the carousel dots */
}

/* ---------- Explainer + sample card ---------- */
/* A calm, centered typographic beat under the busy coverflow — no card,
   so it reads as an intentional pause rather than a stray carousel tile. */
.showcase-explainer {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 620px;
  margin: clamp(2.5rem, 6vh, 4.5rem) auto 0;
  padding: 0 1.5rem;
  color: var(--cream);
}
.explainer-rule {
  width: 1px;
  height: clamp(2rem, 5vh, 3.25rem);
  margin-bottom: clamp(1.25rem, 3vh, 2rem);
  background: linear-gradient(
    to bottom,
    transparent,
    rgba(223, 153, 84, 0.7)
  );
}
.explainer-eyebrow {
  margin: 0 0 0.75rem;
  font-family: "Jost", sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.28em;
  font-size: 0.72rem;
  color: #df9954;
}
.explainer-heading {
  margin: 0 0 0.9rem;
  font-family: "Great Vibes", cursive;
  font-size: clamp(2.4rem, 5vw, 3.4rem);
  line-height: 1;
  color: var(--cream);
}
.explainer-body {
  margin: 0;
  max-width: 40ch;
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(1.05rem, 1.4vw, 1.2rem);
  line-height: 1.55;
  opacity: 0.82;
}

/* ---------- Top nav (revealed as the first card fills) ---------- */
/* Reveal via transform + visibility only — NOT opacity. A backdrop-filter is
   suppressed by the browser while any ancestor sits at a fractional opacity, so
   a 0→1 opacity fade would keep the glass blur switched off for the whole fade
   and then snap it on at the end. Keeping opacity at 1 means the blur is live
   the instant the nav appears. */
#site-nav {
  visibility: hidden;
  /* park it fully above the viewport (its own height + the top gap) so the
     reveal is a clean slide down INTO view — not an on-screen pop then nudge */
  transform: translateY(calc(-100% - 4rem));
  pointer-events: none; /* inner wrapper re-enables pointer events */
}
#site-nav.is-visible {
  visibility: visible;
  transform: translateY(0);
}
/* Glass defined in real CSS (not Tailwind's runtime CDN) so the blur is
   present the instant the nav reveals — otherwise the CDN compiles
   backdrop-blur a second or two late and the effect flickers in. */
.glass-card {
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.05);
  -webkit-backdrop-filter: blur(15px);
  backdrop-filter: blur(15px);
  /* keep the backdrop-filter on a ready compositing layer so it doesn't
     cold-start (snap in) the first time the nav is shown */
  will-change: backdrop-filter;
}
/* dark nav over light sections — auto-toggled */
#site-nav.nav-dark a,
#site-nav.nav-dark button {
  color: #2a1c12 !important;
}
#site-nav.nav-dark .livo-logo {
  color: #2a1c12;
}
#site-nav.nav-dark .glass-card {
  background: rgba(255, 255, 255, 0.5);
  border-color: rgba(0, 0, 0, 0.08);
}
.livo-logo {
  font-family: "Great Vibes", cursive;
  color: #fff;
  font-size: clamp(1.6rem, 2.2vw, 2.3rem);
  line-height: 1;
  white-space: nowrap;
}

/* Hover pop for the nav items — same gentle spring as the bottom chat bar.
   The logo and Anmelden pill grow from their anchored edge; the centre pill
   keeps its translate-based centring so the scale has to fold into it. */
.livo-logo,
#site-nav .nav-anmelden {
  display: inline-block;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.livo-logo { transform-origin: left center; }
.livo-logo:hover { transform: scale(1.06); }
#site-nav .nav-anmelden { transform-origin: right center; }
#site-nav .nav-anmelden:hover { transform: scale(1.05); }
#site-nav .nav-pill {
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  transform: translate(-50%, -50%);
}
#site-nav .nav-pill:hover { transform: translate(-50%, -50%) scale(1.04); }
@media (prefers-reduced-motion: reduce) {
  .livo-logo,
  #site-nav .nav-anmelden,
  #site-nav .nav-pill { transition: none; }
  .livo-logo:hover,
  #site-nav .nav-anmelden:hover { transform: none; }
  #site-nav .nav-pill:hover { transform: translate(-50%, -50%); }
}

.showcase-title {
  text-align: center;
  font-family: "Great Vibes", cursive;
  color: var(--cream);
  font-size: clamp(2.6rem, 6.5vw, 5rem);
  line-height: 1;
  margin: -11.5rem 0 2rem;
}

/* ---------- Gallery card: draggable infinite photo field (2nd card) ---------- */
#gallery {
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
  min-height: 100svh;
  z-index: 70; /* story(30) < gallery(40) < showcase(50) — each rises over the last */
  background: #1b1109;
  box-shadow: 0 -28px 70px rgba(0, 0, 0, 0.35);
  overflow: clip;
  isolation: isolate;
  /* corners are controlled by the animated clip-path (JS), like the others */
}
#gallery-root {
  position: absolute;
  inset: 0;
  z-index: 1;
}
/* top scrim keeps the heading legible over bright photos */
.gallery-scrim {
  position: absolute;
  inset: 0 0 auto 0;
  height: 42%;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(20, 12, 7, 0.72) 0%,
    rgba(20, 12, 7, 0.32) 45%,
    transparent 100%
  );
}
.gallery-head {
  position: absolute;
  top: clamp(4.5rem, 12vh, 8rem);
  left: 0;
  right: 0;
  z-index: 3;
  text-align: center;
  pointer-events: none; /* drags pass through to the canvas below */
}
.gallery-eyebrow {
  margin: 0 0 0.6rem;
  font-family: "Jost", sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.32em;
  font-size: 0.72rem;
  color: #df9954;
}
.gallery-title {
  margin: 0;
  font-family: "Great Vibes", cursive;
  font-size: clamp(2.6rem, 6.5vw, 5rem);
  line-height: 1;
  color: var(--cream);
}
.gallery-hint {
  position: absolute;
  bottom: clamp(1.75rem, 5vh, 3rem);
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  pointer-events: none;
  color: rgba(247, 239, 228, 0.62);
  font-family: "Jost", sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: 0.66rem;
  animation: gallery-hint-pulse 3.4s ease-in-out infinite;
}
@keyframes gallery-hint-pulse {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 0.85; }
}
@media (prefers-reduced-motion: reduce) {
  .gallery-hint { animation: none; }
}

/* ---------- Story card: stacks over the showcase at the same 4rem ---------- */
#story {
  position: sticky;
  top: 0;
  width: 100%;
  left: 0;
  z-index: 30; /* first card to rise over the hero */
  min-height: 100svh;
  background: #efe8dd; /* slightly lighter panel */
  box-shadow: 0 -28px 70px rgba(0, 0, 0, 0.35);
  overflow: clip;
  /* corners are controlled entirely by the animated clip-path (JS) */
  display: flex;
  align-items: center;
  color: #2f2a24;
}
.story-inner {
  width: 100%;
  max-width: 1340px;
  margin: 0 auto;
  padding: 2rem 2.5rem;
  display: grid;
  grid-template-columns: minmax(200px, 0.9fr) minmax(0, 1.5fr) minmax(200px, 0.9fr);
  gap: clamp(1.5rem, 3vw, 3rem);
  align-items: center;
}
.story-photo {
  position: relative;
  margin: 0;
}
.story-photo img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 1.5rem;
  display: block;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.18);
}
.story-photo--left {
  align-self: end;
}
.story-photo--right {
  align-self: start;
}

/* rotating "check your date" badge over the left photo */
.story-badge {
  position: absolute;
  left: -1.25rem;
  bottom: -1.5rem;
  width: 148px;
  height: 148px;
  display: grid;
  place-items: center;
}
.story-badge::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: rgba(70, 66, 60, 0.55);
  backdrop-filter: blur(2px);
}
.story-badge__ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  animation: badge-spin 22s linear infinite;
}
.story-badge__ring text {
  fill: #fff;
  font-family: "Jost", sans-serif;
  font-size: 13px;
  letter-spacing: 2px;
  text-transform: uppercase;
}
.story-badge__label {
  position: relative;
  color: #fff;
  font-family: "Great Vibes", cursive;
  font-size: 1.7rem;
  line-height: 0.9;
  text-align: center;
}
.story-badge__label em {
  display: block;
  font-size: 1rem;
  font-style: normal;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-family: "Jost", sans-serif;
}
@keyframes badge-spin {
  to {
    transform: rotate(360deg);
  }
}

.story-copy {
  text-align: center;
}
.story-title {
  margin: 0 0 1.25rem;
  font-family: "Cormorant Garamond", "Hoefler Text", Georgia, serif;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  line-height: 1.08;
  color: #292f2d;
  font-size: clamp(1.7rem, 3vw, 2.8rem);
}
.story-text {
  margin: 0;
  font-family: "Cormorant Garamond", serif;
  color: #4a463f;
  font-size: clamp(0.82rem, 1vw, 1rem);
  line-height: 1.65;
}
.story-script {
  margin: 1.25rem 0 0;
  font-family: "Great Vibes", cursive;
  color: #8a8378;
  font-size: clamp(1.5rem, 2.2vw, 2rem);
  line-height: 1.2;
  text-align: center;
}

@media (max-width: 860px) {
  .story-inner {
    grid-template-columns: 1fr;
    gap: 1.25rem;
    padding: 1.5rem;
  }
  .story-photo {
    max-width: 300px;
    margin: 0 auto;
  }
}

/* Mobile: cards fill full width to the very top, no rounded top corners */
@media (max-width: 768px) {
  #showcase,
  #story {
    top: 0;
    left: 0;
    width: 100%;
    min-height: 100svh;
    /* top radius is animated to 0 at the lock point via JS */
  }
  /* start content lower from the top so the title is visible */
  #showcase {
    justify-content: flex-start;
    padding-top: clamp(5rem, 16vh, 9rem);
    padding-bottom: 3rem;
    gap: 2rem;
  }
  /* nudge the hero title slightly left for optical (not mathematical) centering */
  .hero__title {
    transform: translateX(-0.4rem);
  }
  .showcase-title {
    margin: 0 0 1.25rem; /* undo the desktop negative pull-up */
    font-size: clamp(2.4rem, 11vw, 3.4rem);
  }
  .showcase-explainer {
    margin-top: clamp(2rem, 5vh, 3rem);
  }
  #story {
    align-items: flex-start;
  }
  .story-inner {
    padding-top: clamp(4.5rem, 14vh, 8rem);
    padding-bottom: 2.5rem;
  }
}

/* ---------- Carousel ---------- */
.carousel-card {
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.45s ease;
  will-change: transform, opacity;
}
.carousel-card .card-dim {
  transition: opacity 0.45s ease;
}

/* ---------- Footer on the green ---------- */
.page-footer {
  text-align: center;
  padding: 8rem 1.5rem 7rem;
  color: var(--cream);
  position: relative;
  z-index: 40;
  background: var(--brown);
}
.page-footer .font-glamour {
  margin: 0;
  font-family: "Great Vibes", cursive;
  font-size: clamp(2.2rem, 7vw, 4rem);
  line-height: 1;
}
.footer-tag {
  margin: 0.75rem 0 0;
  font-family: "Jost", "Helvetica Neue", Arial, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.25em;
  font-size: 0.7rem;
  opacity: 0.65;
}

/* ============================================================= *
 * Scroll-reveal (shared by the sections below the card stack)
 * ============================================================= */
[data-reveal] {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.85s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: calc(var(--d, 0) * 90ms);
  will-change: opacity, transform;
}
[data-reveal].is-in {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ============================================================= *
 * Invitation-websites showcase
 * ============================================================= */
.invites {
  position: relative;
  z-index: 60;
  background: #efe8dd;
  color: #2f2a24;
  padding: clamp(5rem, 11vh, 8.5rem) 1.5rem;
}
.invites-inner {
  max-width: 1120px;
  margin: 0 auto;
}
.invites-head {
  text-align: center;
  max-width: 640px;
  margin: 0 auto clamp(2.75rem, 6vh, 4.5rem);
}
.invites-eyebrow {
  margin: 0 0 1rem;
  font-family: "Jost", sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.32em;
  font-size: 0.72rem;
  color: #b06a3c;
}
.invites-title {
  margin: 0 0 1.1rem;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 500;
  line-height: 1.05;
  font-size: clamp(2rem, 4.4vw, 3.3rem);
  color: #2a211a;
}
.invites-title em {
  font-style: italic;
  color: #4a5233;
}
.invites-sub {
  margin: 0;
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(1.02rem, 1.4vw, 1.2rem);
  line-height: 1.6;
  color: #6a6155;
}
.invite-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 2.75rem);
}
.invite-card {
  display: flex;
  flex-direction: column;
}
.invite-frame {
  display: block;
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(42, 33, 26, 0.08);
  box-shadow: 0 18px 44px rgba(42, 33, 26, 0.12);
  transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}
.invite-frame:focus-visible {
  outline: 2px solid #b06a3c;
  outline-offset: 3px;
}
.invite-card:hover .invite-frame {
  transform: translateY(-8px);
  box-shadow: 0 34px 70px rgba(42, 33, 26, 0.22);
}
.invite-bar {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 36px;
  padding: 0 14px;
  background: #ece5d9;
  border-bottom: 1px solid rgba(42, 33, 26, 0.06);
}
.invite-bar .dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(42, 33, 26, 0.18);
}
.invite-url {
  margin-left: 10px;
  font-family: "Jost", sans-serif;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: #9a8f7e;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.invite-shot {
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #d9d2c6;
}
.invite-shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  transition: object-position 3s ease;
}
.invite-card:hover .invite-shot img {
  object-position: center bottom;
}
.invite-meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  margin-top: 1.05rem;
}
.invite-name {
  margin: 0;
  font-family: "Cormorant Garamond", serif;
  font-weight: 600;
  font-size: 1.45rem;
  line-height: 1;
  color: #2a211a;
}
.invite-desc {
  margin: 0.25rem 0 0;
  font-family: "Jost", sans-serif;
  font-size: 0.8rem;
  color: #7a7063;
}
.invite-cta {
  flex-shrink: 0;
  font-family: "Jost", sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.72rem;
  color: #b06a3c;
  text-decoration: none;
  white-space: nowrap;
}
.invite-cta span {
  display: inline-block;
  transition: transform 0.3s ease;
}
.invite-card:hover .invite-cta span,
.invite-cta:focus-visible span {
  transform: translateX(4px);
}
.invite-tags {
  list-style: none;
  display: none; /* hidden while only the demos show; revealed on "Alle Vorlagen anzeigen" */
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0.9rem 0 0;
  padding: 0;
}
#invitations.is-expanded .invite-tags {
  display: flex;
}
.invite-tags li {
  font-family: "Jost", sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.6rem;
  color: #8a8072;
  border: 1px solid rgba(42, 33, 26, 0.14);
  border-radius: 999px;
  padding: 0.25rem 0.6rem;
  background: rgba(255, 255, 255, 0.45);
}

/* ============================================================= *
 * Contact
 * ============================================================= */
.contact {
  position: relative;
  z-index: 60;
  background: var(--brown);
  color: var(--cream);
  padding: clamp(5rem, 11vh, 8.5rem) 1.5rem;
}
.contact-inner {
  max-width: 1060px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
.contact-eyebrow {
  margin: 0 0 1rem;
  font-family: "Jost", sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.32em;
  font-size: 0.72rem;
  color: #df9954;
}
.contact-title {
  margin: 0 0 1.2rem;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 500;
  line-height: 1.04;
  font-size: clamp(2.1rem, 4.2vw, 3.4rem);
  color: var(--cream);
}
.contact-title em {
  font-style: italic;
  color: #df9954;
}
.contact-text {
  margin: 0 0 2rem;
  max-width: 42ch;
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(1.02rem, 1.4vw, 1.18rem);
  line-height: 1.6;
  opacity: 0.82;
}
.contact-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.contact-list li {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding: 0.85rem 0;
  border-top: 1px solid rgba(247, 239, 228, 0.13);
}
.contact-list li span:first-child {
  flex: 0 0 84px;
  font-family: "Jost", sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.66rem;
  color: rgba(247, 239, 228, 0.5);
}
.contact-list a,
.contact-plain {
  font-family: "Cormorant Garamond", serif;
  font-size: 1.1rem;
  color: var(--cream);
  text-decoration: none;
  transition: color 0.3s ease;
}
.contact-list a:hover {
  color: #df9954;
}

.contact-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem 1.1rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 18px;
  padding: clamp(1.5rem, 3vw, 2.4rem);
}
.field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.field--full {
  grid-column: 1 / -1;
}
.contact-form label {
  font-family: "Jost", sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.66rem;
  color: rgba(247, 239, 228, 0.6);
}
.contact-form input,
.contact-form select,
.contact-form textarea {
  width: 100%;
  font-family: "Cormorant Garamond", serif;
  font-size: 1.02rem;
  color: var(--cream);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 10px;
  padding: 0.7rem 0.8rem;
  transition: border-color 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
  appearance: none;
}
.contact-form textarea {
  resize: vertical;
  min-height: 96px;
}
.contact-form select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23df9954' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.85rem center;
  padding-right: 2.2rem;
}
.contact-form input::placeholder,
.contact-form textarea::placeholder {
  color: rgba(247, 239, 228, 0.35);
}
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: #df9954;
  background: rgba(255, 255, 255, 0.09);
  box-shadow: 0 0 0 3px rgba(223, 153, 84, 0.16);
}
.contact-submit {
  grid-column: 1 / -1;
  margin-top: 0.35rem;
  justify-self: start;
  font-family: "Jost", sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.74rem;
  color: #2a1c12;
  background: var(--cream);
  border: none;
  border-radius: 999px;
  padding: 0.85rem 1.7rem;
  cursor: pointer;
  transition: transform 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
}
.contact-submit:hover {
  background: #fff;
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.28);
}
.contact-submit:disabled {
  opacity: 0.6;
  cursor: default;
  transform: none;
  box-shadow: none;
}
.contact-status {
  grid-column: 1 / -1;
  margin: 0;
  min-height: 1.1em;
  font-family: "Jost", sans-serif;
  font-size: 0.78rem;
  color: #df9954;
}
/* success state — swap the fields for a confirmation */
.contact-done {
  display: none;
  grid-column: 1 / -1;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.5rem;
  padding: 1.5rem 0;
}
.contact-form.is-sent .field,
.contact-form.is-sent .contact-submit,
.contact-form.is-sent .contact-status {
  display: none;
}
.contact-form.is-sent .contact-done {
  display: flex;
}
.contact-done svg {
  color: #df9954;
}
.cd-circle {
  stroke: #df9954;
  stroke-width: 2;
  stroke-dasharray: 151;
  stroke-dashoffset: 151;
  animation: cd-draw 0.6s ease forwards;
}
.cd-check {
  stroke: #df9954;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 48;
  stroke-dashoffset: 48;
  animation: cd-draw 0.4s 0.45s ease forwards;
}
@keyframes cd-draw {
  to { stroke-dashoffset: 0; }
}
.contact-done-title {
  margin: 0.4rem 0 0;
  font-family: "Great Vibes", cursive;
  font-size: 2rem;
  line-height: 1;
  color: var(--cream);
}
.contact-done-text {
  margin: 0;
  max-width: 34ch;
  font-family: "Cormorant Garamond", serif;
  font-size: 1.05rem;
  line-height: 1.5;
  opacity: 0.8;
}
@media (prefers-reduced-motion: reduce) {
  .cd-circle, .cd-check { animation: none; stroke-dashoffset: 0; }
}

@media (max-width: 820px) {
  .invite-grid { grid-template-columns: 1fr; }
  .contact-inner { grid-template-columns: 1fr; }
  .contact-form { grid-template-columns: 1fr; }
}

/* ============================================================= *
 * Why Livo — USP (cinematic band)
 * ============================================================= */
.usp {
  position: relative;
  z-index: 60;
  overflow: hidden;
  color: var(--cream);
  padding: clamp(6rem, 14vh, 10rem) 1.5rem;
  background: #160d07;
}
.usp-bg {
  position: absolute;
  inset: -3%;
  z-index: 0;
  background: url("/assets/gallery/g16.jpg") center 30% / cover no-repeat;
  transform: scale(1.02);
  animation: usp-kenburns 26s ease-in-out infinite alternate;
  will-change: transform;
}
.usp-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: radial-gradient(
      120% 100% at 50% 20%,
      rgba(22, 13, 7, 0.55) 0%,
      rgba(22, 13, 7, 0.86) 60%,
      rgba(18, 10, 5, 0.95) 100%
    );
}
@keyframes usp-kenburns {
  from { transform: scale(1.02) translate3d(0, 0, 0); }
  to { transform: scale(1.14) translate3d(0, -1.5%, 0); }
}
.usp-inner {
  position: relative;
  z-index: 2;
  max-width: 1080px;
  margin: 0 auto;
}
.usp-head {
  text-align: center;
  max-width: 660px;
  margin: 0 auto;
}
.usp-eyebrow {
  margin: 0 0 1.1rem;
  font-family: "Jost", sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.34em;
  font-size: 0.72rem;
  color: #df9954;
}
.usp-title {
  margin: 0 0 1.3rem;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 500;
  line-height: 1.02;
  font-size: clamp(2.4rem, 5.6vw, 4.4rem);
  letter-spacing: 0.01em;
}
.usp-title em {
  font-style: italic;
  color: #df9954;
}
.usp-sub {
  margin: 0;
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(1.05rem, 1.5vw, 1.25rem);
  line-height: 1.62;
  color: rgba(247, 239, 228, 0.82);
}
.usp-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(2rem, 4.5vw, 4rem);
  margin-top: clamp(3.25rem, 7vh, 5rem);
}
.usp-item {
  text-align: center;
}
.usp-icon {
  display: block;
  width: 54px;
  height: 54px;
  margin: 0 auto 1.25rem;
  color: #df9954;
}
.usp-icon svg {
  width: 100%;
  height: 100%;
}
.usp-icon path,
.usp-icon circle {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 200;
  stroke-dashoffset: 200;
}
/* draw the icon once its card scroll-reveals */
.usp-item.is-in .usp-icon path,
.usp-item.is-in .usp-icon circle {
  animation: usp-draw 1.2s cubic-bezier(0.65, 0, 0.35, 1) forwards;
  animation-delay: 0.25s;
}
.usp-item.is-in .usp-icon circle:nth-of-type(2) {
  animation-delay: 0.55s;
}
@keyframes usp-draw {
  to { stroke-dashoffset: 0; }
}
.usp-name {
  margin: 0 0 0.6rem;
  font-family: "Cormorant Garamond", serif;
  font-weight: 600;
  font-size: clamp(1.35rem, 2vw, 1.6rem);
  color: var(--cream);
}
.usp-copy {
  margin: 0 auto;
  max-width: 30ch;
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(1rem, 1.3vw, 1.1rem);
  line-height: 1.6;
  color: rgba(247, 239, 228, 0.76);
}
.usp-foot {
  text-align: center;
  margin-top: clamp(3rem, 6vh, 4.5rem);
}
.usp-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.85rem 2.1rem;
  border: 1px solid rgba(247, 239, 228, 0.5);
  border-radius: 999px;
  font-family: "Jost", sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: 0.74rem;
  color: var(--cream);
  text-decoration: none;
  transition: background 0.35s ease, color 0.35s ease, border-color 0.35s ease;
}
.usp-cta span {
  transition: transform 0.3s ease;
}
.usp-cta:hover {
  background: #df9954;
  border-color: #df9954;
  color: #241a11;
}
.usp-cta:hover span {
  transform: translateX(4px);
}
@media (prefers-reduced-motion: reduce) {
  .usp-bg { animation: none; }
  .usp-icon path, .usp-icon circle { stroke-dashoffset: 0; }
}
@media (max-width: 820px) {
  .usp-grid { grid-template-columns: 1fr; gap: 2.5rem; max-width: 360px; margin-left: auto; margin-right: auto; }
}

/* ============================================================= *
 * Wedding Cam — guest camera app showcase
 * ============================================================= */
.wcam {
  position: relative;
  z-index: 60;
  overflow: hidden;
  color: var(--cream);
  background: radial-gradient(120% 90% at 50% 0%, #1b120b 0%, #100b07 60%, #0b0705 100%);
  /* +2rem on top nudges the content lower so it reads more centered in the section */
  padding: calc(clamp(5rem, 12vh, 9rem) + 2rem) 1.5rem clamp(5rem, 12vh, 9rem);
}
.wcam-inner { max-width: 1300px; margin: 0 auto; }
.wcam-head { text-align: center; max-width: 660px; margin: 0 auto clamp(3rem, 7vh, 5rem); }
.wcam-eyebrow {
  margin: 0 0 1.1rem;
  font-family: "Jost", sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  font-size: 0.72rem;
  color: rgba(247, 239, 228, 0.62);
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
}
.wcam-new {
  letter-spacing: 0.14em;
  font-weight: 500;
  font-size: 0.62rem;
  color: #241a11;
  background: #df9954;
  padding: 0.18rem 0.5rem;
  border-radius: 999px;
}
.wcam-title {
  margin: 0 0 1.2rem;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 500;
  line-height: 1.03;
  font-size: clamp(2.3rem, 5.4vw, 4.2rem);
}
.wcam-title em { font-style: italic; color: #df9954; }
.wcam-sub {
  margin: 0;
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(1.04rem, 1.4vw, 1.22rem);
  line-height: 1.62;
  color: rgba(247, 239, 228, 0.8);
}
.wcam-show {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: center;
}

/* storyboard steps */
.wcam-steps { position: relative; }
.wcam-stepslist { list-style: none; margin: 0; padding: 0; position: relative; min-height: 230px; }
.wcam-step {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.55s ease, transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}
.wcam-step.is-active { opacity: 1; transform: none; pointer-events: auto; }
.wcam-step-badge {
  display: inline-block;
  margin-bottom: 1.1rem;
  font-family: "Jost", sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.66rem;
  color: #df9954;
  border: 1px solid rgba(223, 153, 84, 0.35);
  border-radius: 999px;
  padding: 0.32rem 0.8rem;
}
.wcam-step h3 {
  margin: 0 0 0.85rem;
  font-family: "Cormorant Garamond", serif;
  font-weight: 600;
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  line-height: 1.05;
  color: var(--cream);
}
.wcam-step p {
  margin: 0;
  max-width: 40ch;
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(1.02rem, 1.3vw, 1.14rem);
  line-height: 1.6;
  color: rgba(247, 239, 228, 0.74);
}
.wcam-dots { display: flex; gap: 0.6rem; margin-top: 1.75rem; }
.wcam-dots button {
  height: 5px; width: 18px;
  border: none; padding: 0; cursor: pointer;
  border-radius: 999px;
  background: rgba(247, 239, 228, 0.2);
  transition: width 0.4s ease, background 0.4s ease;
}
.wcam-dots button.is-active { width: 42px; background: #df9954; }

/* phone */
.wcam-phonewrap { position: relative; display: flex; justify-content: center; }
.wcam-aura {
  position: absolute;
  top: 50%; left: 50%;
  width: 118%; aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(223, 153, 84, 0.22), transparent 62%);
  filter: blur(50px);
  animation: wcam-aura 6s ease-in-out infinite;
  z-index: 0;
}
@keyframes wcam-aura {
  0%, 100% { opacity: 0.55; transform: translate(-50%, -50%) scale(1); }
  50% { opacity: 0.85; transform: translate(-50%, -50%) scale(1.08); }
}
.wcam-phone {
  position: relative;
  z-index: 1;
  width: clamp(244px, 26vw, 312px);
  aspect-ratio: 9 / 19.2;
  background: #08070a;
  border: 1px solid rgba(247, 239, 228, 0.12);
  border-radius: 42px;
  padding: 10px;
  box-shadow: 0 40px 90px rgba(0, 0, 0, 0.6), inset 0 0 0 2px rgba(0,0,0,0.6);
}
.wcam-notch {
  position: absolute;
  top: 16px; left: 50%;
  transform: translateX(-50%);
  width: 34%; height: 22px;
  background: #08070a;
  border-radius: 0 0 14px 14px;
  z-index: 20;
}
.wcam-screens {
  position: relative;
  width: 100%; height: 100%;
  border-radius: 32px;
  overflow: hidden;
  background: #0c0a0e;
}
.wcam-screen {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.6s ease;
  pointer-events: none;
}
.wcam-screen.is-active { opacity: 1; pointer-events: auto; }

/* camera screen */
.wcam-cam { display: flex; flex-direction: column; padding: 2.2rem 0.9rem 1rem; }
.wcam-cam-top {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 0.4rem 0.7rem;
  color: rgba(247, 239, 228, 0.6);
}
.wcam-dot-ico, .wcam-user-ico { width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid currentColor; }
.wcam-dot-ico { border-radius: 3px; }
.wcam-cam-ready {
  font-family: "Jost", sans-serif; text-transform: uppercase; letter-spacing: 0.22em;
  font-size: 0.56rem; color: rgba(247,239,228,0.8);
  background: rgba(247, 239, 228, 0.08); padding: 0.22rem 0.6rem; border-radius: 999px;
}
.wcam-view {
  position: relative; flex: 1; border-radius: 22px; overflow: hidden;
  border: 1px solid rgba(247, 239, 228, 0.1); background: #000;
}
.wcam-view img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wcam-grain {
  position: absolute; inset: 0; pointer-events: none; opacity: 0.5; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.4'/%3E%3C/svg%3E");
}
.wcam-flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; }
.wcam-cam.is-active .wcam-flash { animation: wcam-flash 5s linear infinite; }
@keyframes wcam-flash { 0%,30%,36%,100% { opacity: 0; } 32%,33% { opacity: 0.85; } }
.wcam-framec {
  position: absolute; width: 16px; height: 16px; border: 2px solid rgba(255,255,255,0.75);
}
.wcam-framec.tl { top: 12px; left: 12px; border-right: 0; border-bottom: 0; border-radius: 4px 0 0 0; }
.wcam-framec.tr { top: 12px; right: 12px; border-left: 0; border-bottom: 0; border-radius: 0 4px 0 0; }
.wcam-framec.bl { bottom: 12px; left: 12px; border-right: 0; border-top: 0; border-radius: 0 0 0 4px; }
.wcam-framec.br { bottom: 12px; right: 12px; border-left: 0; border-top: 0; border-radius: 0 0 4px 0; }
.wcam-counter {
  position: absolute; left: 12px; bottom: 12px;
  display: flex; align-items: baseline; gap: 0.3rem; flex-wrap: wrap;
  padding: 0.4rem 0.6rem; border-radius: 12px;
  background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(6px);
}
.wcam-counter b {
  font-family: "Jost", sans-serif; font-weight: 500;
  font-size: 1.5rem; line-height: 1; color: #df9954; font-variant-numeric: tabular-nums;
}
.wcam-counter span { font-family: "Jost", sans-serif; font-size: 0.8rem; color: rgba(247,239,228,0.7); }
.wcam-counter em {
  flex-basis: 100%; font-style: normal; font-family: "Jost", sans-serif;
  text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.5rem; color: rgba(247,239,228,0.55);
}
.wcam-cam-bottom {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.9rem 0.6rem 0.3rem;
}
.wcam-galbtn { width: 28px; height: 28px; border-radius: 7px; background: linear-gradient(135deg,#3a2c20,#6d5236); border: 1.5px solid rgba(247,239,228,0.25); }
.wcam-flip { width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid rgba(247,239,228,0.3); }
.wcam-shutter {
  width: 52px; height: 52px; border-radius: 50%; border: 3px solid #fff;
  display: flex; align-items: center; justify-content: center;
}
.wcam-shutter i { width: 40px; height: 40px; border-radius: 50%; background: #fff; display: block; }
.wcam-cam.is-active .wcam-shutter i { animation: wcam-press 5s ease-in-out infinite; }
@keyframes wcam-press { 0%,28%,40%,100% { transform: scale(1); } 32% { transform: scale(0.82); } }

/* gallery screen */
.wcam-gal { display: flex; flex-direction: column; padding: 2.4rem 0.9rem 1rem; background: #0c0a0e; }
.wcam-gal-head {
  display: flex; align-items: baseline; justify-content: space-between; padding: 0 0.3rem 0.7rem;
}
.wcam-gal-head b { font-family: "Cormorant Garamond", serif; font-size: 1.15rem; color: var(--cream); }
.wcam-gal-head span { font-family: "Jost", sans-serif; font-size: 0.62rem; color: rgba(247,239,228,0.5); }
.wcam-gal-scroll { flex: 1; overflow: hidden; position: relative; }
.wcam-gal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.wcam-gal-grid img { width: 100%; aspect-ratio: 3/4; object-fit: cover; border-radius: 10px; display: block; }
.wcam-gal.is-active .wcam-gal-grid { animation: wcam-scroll 5s ease-in-out infinite; }
@keyframes wcam-scroll { 0%,20% { transform: translateY(0); } 80%,100% { transform: translateY(-24%); } }

/* actions screen */
.wcam-act { display: flex; flex-direction: column; padding: 2.6rem 1rem 1.2rem; background: #0c0a0e; }
.wcam-act-photo { position: relative; flex: 1; border-radius: 18px; overflow: hidden; border: 1px solid rgba(247,239,228,0.1); }
.wcam-act-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wcam-act-bar {
  position: absolute; inset: auto 0 0 0; padding: 0.8rem;
  display: flex; gap: 0.6rem; justify-content: center;
  background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
}
.wcam-act-btn {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-family: "Jost", sans-serif; font-size: 0.66rem; color: #fff;
  background: rgba(255,255,255,0.14); backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.18); border-radius: 999px; padding: 0.4rem 0.8rem;
}
.wcam-i-save, .wcam-i-share { width: 12px; height: 12px; border: 1.5px solid currentColor; border-radius: 3px; }
.wcam-i-share { border-radius: 50%; }
.wcam-act-foot { margin: 0.9rem 0 0; text-align: center; font-family: "Jost", sans-serif; font-size: 0.6rem; letter-spacing: 0.14em; color: rgba(247,239,228,0.45); text-transform: uppercase; }
.wcam-act-foot b { color: #df9954; }

.wcam-foot { text-align: center; margin-top: clamp(3rem, 7vh, 5rem); }
.wcam-cta {
  display: inline-flex; align-items: center; gap: 0.6rem;
  padding: 0.9rem 2rem; border-radius: 999px;
  background: #df9954; color: #241a11;
  font-family: "Jost", sans-serif; text-transform: uppercase; letter-spacing: 0.16em; font-size: 0.74rem;
  text-decoration: none; transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
}
.wcam-cta span { transition: transform 0.3s ease; }
.wcam-cta:hover { transform: translateY(-2px); box-shadow: 0 16px 34px rgba(223,153,84,0.3); background: #e6a860; }
.wcam-cta:hover span { transform: translateX(4px); }

@media (prefers-reduced-motion: reduce) {
  .wcam-aura,
  .wcam-cam.is-active .wcam-flash,
  .wcam-cam.is-active .wcam-shutter i,
  .wcam-gal.is-active .wcam-gal-grid { animation: none; }
}
@media (max-width: 820px) {
  .wcam-show { grid-template-columns: 1fr; gap: 3rem; }
  .wcam-stepslist { min-height: 190px; max-width: 420px; margin: 0 auto; }
  .wcam-dots { justify-content: center; }
}

/* ---------- On-brand text selection ---------- */
::selection {
  background: rgba(223, 153, 84, 0.9); /* warm gold */
  color: #211510;
}
::-moz-selection {
  background: rgba(223, 153, 84, 0.9);
  color: #211510;
}

.story-films {
  width: 100%;
  margin: clamp(1.75rem, 4vh, 2.75rem) auto 0;
  padding: clamp(1.5rem, 3vh, 2.25rem) 0 clamp(2.25rem, 3.5vh, 2.75rem);
  background: linear-gradient(180deg, #3a281b 0%, #211510 100%);
  border-radius: 1.35rem;
  box-shadow: 0 26px 60px rgba(0, 0, 0, 0.22);
  overflow: hidden;
}
.story-films-eyebrow {
  margin: 0 0 clamp(1rem, 2.5vh, 1.6rem);
  text-align: center;
  font-family: "Jost", sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.28em;
  font-size: 0.7rem;
  color: #df9954;
}

/* ============================================================= *
 * Lower sections joined into the sticky slide-over card stack
 * ============================================================= */
#warum,
#invitations,
#weddingcam,
#kontakt {
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
  min-height: 100svh;
  overflow: clip;
  box-shadow: 0 -28px 70px rgba(0, 0, 0, 0.35);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: clamp(2.5rem, 5vh, 4rem);
  padding-bottom: clamp(2.5rem, 5vh, 4rem);
}
#warum { z-index: 40; }
#invitations { z-index: 50; }
#weddingcam { z-index: 60; }
#kontakt { z-index: 80; }

/* While the configurator covers the screen, take the contact card out of sight
   so it can't peek behind the glass. Restored the moment you scroll away
   (toggled from the scroll loop in site.ts). visibility (not display) keeps its
   sticky geometry intact so the stack math doesn't jump. */
#kontakt.is-covered { visibility: hidden; }

/* compact each card so it fits one locked screen on desktop */
@media (min-width: 821px) {
  #invitations .invite-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(0.9rem, 1.5vw, 1.5rem); }
  #invitations .invites-head { margin-bottom: clamp(1.5rem, 3.5vh, 2.75rem); }
  #invitations .invite-shot { aspect-ratio: 3 / 2; }
}
#warum .usp-grid { margin-top: clamp(1.75rem, 3.5vh, 3rem); }
#warum .usp-foot { margin-top: clamp(1.5rem, 3vh, 2.5rem); }
#weddingcam .wcam-head { margin-bottom: clamp(1.25rem, 2.5vh, 2.25rem); }
#weddingcam .wcam-title { font-size: clamp(2rem, 4.6vw, 3.3rem); }
#weddingcam .wcam-foot { margin-top: clamp(1.25rem, 2.5vh, 2.25rem); }
#weddingcam .wcam-stepslist { min-height: 200px; }

/* on phones these content-heavy cards scroll normally so nothing is cut */
@media (max-width: 768px) {
  #warum,
  #invitations,
  #weddingcam,
  #kontakt {
    position: relative;
    min-height: auto;
  }
}

/* ============================================================= *
 * Angebot: dark immersive finale card (matches the stack)
 * ---------------------------------------------------------------
 * NOT a hard-pinned sticky card — it's a content-sized cover that
 * slides up over the (sticky) contact card via z-index, then scrolls
 * naturally. That means the configurator never needs an inner scroll
 * and never gets clipped, however tall a step is.
 * ============================================================= */
#angebot {
  position: sticky;
  top: 0;
  left: 0;
  z-index: 90;
  width: 100%;
  min-height: 100svh;
  overflow: clip;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(1.5rem, 3vh, 2.5rem) 0;
  box-shadow: 0 -28px 70px rgba(0, 0, 0, 0.35);
  background: var(--dark);
  color: var(--cream);
  isolation: isolate;
}
@media (max-width: 768px) {
  #angebot { position: relative; min-height: auto; overflow: visible; }
}
.angebot-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.angebot-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 38%;
  opacity: 0.32;
  filter: saturate(0.85);
}
/* warm-to-dark scrim so the glass card always reads, tuned to the site palette */
.angebot-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(223, 153, 84, 0.14), transparent 55%),
    linear-gradient(180deg, rgba(14, 11, 8, 0.55) 0%, rgba(26, 20, 16, 0.72) 45%, rgba(14, 11, 8, 0.92) 100%);
}
.angebot-glow {
  position: absolute;
  border-radius: 999px;
  pointer-events: none;
  z-index: 0;
  filter: blur(120px);
}
.angebot-glow--warm {
  top: 8%;
  left: 12%;
  width: 44vw;
  max-width: 560px;
  aspect-ratio: 1;
  background: rgba(223, 153, 84, 0.16);
}
.angebot-glow--cool {
  bottom: 6%;
  right: 10%;
  width: 34vw;
  max-width: 440px;
  aspect-ratio: 1;
  background: rgba(247, 239, 228, 0.05);
}
/* the configurator glass panel */
.angebot-inner {
  position: relative;
  z-index: 10;
  width: 100%;
  max-width: 64rem;
  margin: 0 auto;
  padding: 0 clamp(1rem, 4vw, 1.5rem);
}
.angebot-glass {
  background: rgba(255, 255, 255, 0.045);
  -webkit-backdrop-filter: blur(22px);
  backdrop-filter: blur(22px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 30px 60px rgba(0, 0, 0, 0.45);
  border-radius: 28px;
  padding: clamp(1.25rem, 2.5vw, 2.1rem);
  /* sizes to its content — no inner scroll */
}
@media (max-width: 768px) {
  .angebot-bg img { opacity: 0.28; }
}
@media (prefers-reduced-transparency: reduce) {
  .angebot-glass { background: #1b1512; -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* ---------- Invitation templates: show-all expand ---------- */
/* While only the four demos show, give the grid ~15% more width so the previews
   read bigger; revert to the standard width once all templates are expanded. */
#invitations:not(.is-expanded) .invites-inner { max-width: 1288px; }
.invite-card--more { display: none; }
#invitations.is-expanded .invite-card--more { display: flex; }
#invitations.is-expanded { position: relative; min-height: auto; } /* grow out of the locked card to show all */
.invites-more { text-align: center; margin-top: clamp(2rem, 4vh, 3rem); }
.invites-more-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.85rem 1.9rem;
  border-radius: 999px;
  border: 1px solid rgba(42, 33, 26, 0.28);
  background: transparent;
  font-family: "Jost", sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.74rem;
  color: #2a211a;
  cursor: pointer;
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.invites-more-btn:hover { background: #2a211a; color: #f7efe4; border-color: #2a211a; }
.invites-more-count {
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  opacity: 0.55;
  border-left: 1px solid currentColor;
  padding-left: 0.7rem;
}


/* ---- Wedding Cam: onboarding, live badge, photobook screens ---- */
#weddingcam .wcam-stepslist { min-height: 250px; }
.wcam-onb { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.65rem; padding: 2.4rem 1.1rem 1.4rem; text-align: center; background: #0c0a0e; }
.wcam-onb-head { font-family: "Jost", sans-serif; text-transform: uppercase; letter-spacing: 0.22em; font-size: 0.56rem; color: rgba(247,239,228,0.6); }
.wcam-qr { width: 88px; height: 88px; border-radius: 14px; background: #fff center/76% no-repeat; background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2025%2025%22%20shape-rendering%3D%22crispEdges%22%3E%3Cpath%20fill%3D%22%231a120b%22%20d%3D%22M0%2C0h7v1h-7zM0%2C6h7v1h-7zM0%2C0h1v7h-1zM6%2C0h1v7h-1zM2%2C2h3v3h-3zM18%2C0h7v1h-7zM18%2C6h7v1h-7zM18%2C0h1v7h-1zM24%2C0h1v7h-1zM20%2C2h3v3h-3zM0%2C18h7v1h-7zM0%2C24h7v1h-7zM0%2C18h1v7h-1zM6%2C18h1v7h-1zM2%2C20h3v3h-3zM9%2C1h1v1h-1zM11%2C1h1v1h-1zM13%2C3h1v1h-1zM15%2C1h1v1h-1zM10%2C3h1v1h-1zM9%2C5h1v1h-1zM12%2C5h1v1h-1zM14%2C5h1v1h-1zM1%2C9h1v1h-1zM3%2C9h1v1h-1zM5%2C11h1v1h-1zM2%2C13h1v1h-1zM4%2C15h1v1h-1zM0%2C11h1v1h-1zM9%2C9h1v1h-1zM11%2C11h1v1h-1zM13%2C9h1v1h-1zM15%2C11h1v1h-1zM10%2C13h1v1h-1zM12%2C15h1v1h-1zM14%2C13h1v1h-1zM9%2C15h1v1h-1zM16%2C9h1v1h-1zM18%2C9h1v1h-1zM20%2C11h1v1h-1zM22%2C9h1v1h-1zM24%2C11h1v1h-1zM19%2C13h1v1h-1zM21%2C15h1v1h-1zM23%2C13h1v1h-1zM9%2C18h1v1h-1zM11%2C20h1v1h-1zM13%2C18h1v1h-1zM15%2C22h1v1h-1zM10%2C24h1v1h-1zM12%2C22h1v1h-1zM16%2C20h1v1h-1zM9%2C22h1v1h-1zM14%2C18h1v1h-1zM18%2C24h1v1h-1zM24%2C18h1v1h-1z%22%2F%3E%3C%2Fsvg%3E"); box-shadow: 0 8px 24px rgba(0,0,0,0.45); }
.wcam-onb-hint { margin: 0; font-family: "Cormorant Garamond", serif; font-size: 0.95rem; line-height: 1.2; color: rgba(247,239,228,0.78); }
.wcam-onb-name { display: flex; align-items: center; gap: 0.5rem; width: 82%; padding: 0.45rem 0.75rem; border-radius: 10px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.14); }
.wcam-onb-name span { font-family: "Jost", sans-serif; font-size: 0.48rem; text-transform: uppercase; letter-spacing: 0.14em; color: rgba(247,239,228,0.5); }
.wcam-onb-name b { font-family: "Cormorant Garamond", serif; font-weight: 500; font-size: 1rem; color: var(--cream); }
.wcam-caret { width: 1.5px; height: 13px; margin-left: auto; background: #df9954; }
.wcam-screen.is-active .wcam-caret { animation: wcam-caret 1s steps(1) infinite; }
@keyframes wcam-caret { 50% { opacity: 0; } }
.wcam-onb-selfie { position: relative; width: 62px; height: 62px; margin-top: 0.2rem; }
.wcam-onb-selfie img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.wcam-onb-ring { position: absolute; inset: -4px; border-radius: 50%; border: 2px solid #df9954; }
.wcam-onb-sub { margin: 0; font-family: "Jost", sans-serif; font-size: 0.56rem; text-transform: uppercase; letter-spacing: 0.14em; color: rgba(247,239,228,0.5); }
.wcam-live { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); z-index: 6; display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; border-radius: 999px; background: rgba(0,0,0,0.5); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); font-family: "Jost", sans-serif; font-size: 0.48rem; letter-spacing: 0.12em; text-transform: uppercase; color: #fff; white-space: nowrap; }
.wcam-live i { width: 6px; height: 6px; border-radius: 50%; background: #df9954; }
.wcam-cam.is-active .wcam-live i { animation: wcam-livepulse 1.4s ease-in-out infinite; }
@keyframes wcam-livepulse { 0%,100% { opacity: 0.4; transform: scale(0.8); } 50% { opacity: 1; transform: scale(1.25); } }
.wcam-book { display: flex; flex-direction: column; padding: 2.4rem 0.9rem 0.9rem; background: #0c0a0e; }
.wcam-book-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 0.35rem; align-content: start; flex: 1; }
.wcam-book-cell { position: relative; aspect-ratio: 3/4; border-radius: 8px; overflow: hidden; }
.wcam-book-cell img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wcam-book-mark { position: absolute; top: 4px; right: 4px; width: 16px; height: 16px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; line-height: 1; }
.wcam-book-cell.is-keep .wcam-book-mark { background: #df9954; color: #241a11; }
.wcam-book-cell.is-keep .wcam-book-mark::after { content: "✓"; }
.wcam-book-cell.is-drop { opacity: 0.42; }
.wcam-book-cell.is-drop .wcam-book-mark { background: rgba(0,0,0,0.55); border: 1px solid rgba(255,255,255,0.45); color: #fff; font-weight: 400; font-size: 12px; }
.wcam-book-cell.is-drop .wcam-book-mark::after { content: "×"; }
.wcam-book-bar { display: flex; align-items: center; gap: 0.55rem; margin-top: 0.7rem; padding: 0.5rem 0.75rem; border-radius: 10px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); font-family: "Jost", sans-serif; font-size: 0.56rem; text-transform: uppercase; letter-spacing: 0.12em; color: rgba(247,239,228,0.7); }
.wcam-lock-ico { position: relative; width: 11px; height: 9px; border: 1.5px solid currentColor; border-radius: 2px; }
.wcam-lock-ico::before { content: ""; position: absolute; left: 50%; top: -5px; transform: translateX(-50%); width: 6px; height: 6px; border: 1.5px solid currentColor; border-bottom: 0; border-radius: 3px 3px 0 0; }
.wcam-book-share { margin-left: auto; background: #df9954; color: #241a11; padding: 0.28rem 0.65rem; border-radius: 999px; font-size: 0.54rem; }

/* Wedding Cam header moved into the left column, above the storyboard slider */
#weddingcam .wcam-head { text-align: left; max-width: none; margin: 0 0 clamp(1.25rem, 3vh, 2rem); }
#weddingcam .wcam-eyebrow { justify-content: flex-start; }
#weddingcam .wcam-title { font-size: clamp(1.75rem, 3.1vw, 2.7rem); }
#weddingcam .wcam-sub { margin: 0; max-width: none; font-size: clamp(0.95rem, 1.2vw, 1.08rem); }
@media (max-width: 820px) {
  #weddingcam .wcam-head { text-align: center; }
  #weddingcam .wcam-eyebrow { justify-content: center; }
}

/* Wedding Cam: header title/sub dominate over the smaller step descriptions */
#weddingcam .wcam-title { font-size: clamp(2.15rem, 3.9vw, 3.2rem); line-height: 1.02; }
#weddingcam .wcam-sub { font-size: clamp(1.1rem, 1.55vw, 1.38rem); line-height: 1.5; }
#weddingcam .wcam-step h3 { font-size: clamp(1.15rem, 1.9vw, 1.5rem); }
#weddingcam .wcam-step p { font-size: clamp(0.9rem, 1.05vw, 1rem); }
#weddingcam .wcam-step-badge { font-size: 0.62rem; }

/* slider: no background panel, no width lock — sits full-width on the cream */
.story-films { background: none; box-shadow: none; border-radius: 0; overflow: visible; max-width: 1340px; margin: 0 auto; padding-top: clamp(1.25rem, 3vh, 2rem); }
#story { flex-direction: column; justify-content: center; gap: clamp(1.75rem, 4vh, 3rem); }
/* Wedding Cam CTA sits lower */
#weddingcam .wcam-foot { margin-top: clamp(2.75rem, 7vh, 5.5rem); }

/* Der Livo Unterschied: background image is parallaxed on scroll via JS */
#warum .usp-bg { animation: none; will-change: transform; }

/* couple name over each Story photo, animated in on scroll (via [data-reveal]) */
.story-photo__name {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1.2rem;
  font-family: "Great Vibes", cursive;
  font-size: clamp(1.7rem, 2.6vw, 2.7rem);
  line-height: 1;
  color: #fff;
  text-shadow: 0 2px 22px rgba(0, 0, 0, 0.5);
  pointer-events: none;
}
.story-photo__name::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 1.5rem;
  background: radial-gradient(ellipse 72% 55% at center, rgba(0, 0, 0, 0.4) 0%, transparent 70%);
}
/* slider sits closer to the text */
#story { gap: clamp(0.5rem, 1.5vh, 1.25rem); }
.story-films { padding-top: clamp(0.4rem, 1.2vh, 0.9rem); }

/* ============================================================= *
 * Floating "ask Benny" WhatsApp bar
 * ============================================================= */
.ask {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 200;
  pointer-events: none;
  transform: translateY(118%);
  transition: transform 0.95s cubic-bezier(0.16, 1, 0.3, 1);
}
.ask.is-in { transform: translateY(0); }
.ask-inner {
  pointer-events: auto;
  position: relative;
  max-width: 1180px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: clamp(1rem, 3vw, 2.5rem);
  background: #ffffff;
  border-radius: 24px 24px 0 0;
  padding: clamp(1rem, 2vw, 1.5rem) clamp(1.25rem, 3vw, 2.25rem);
  box-shadow: 0 -12px 70px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(0, 0, 0, 0.04);
  /* grow from the bottom edge (it sits flush at the screen bottom) with a
     gentle spring so hover feels lively rather than linear */
  transform-origin: center bottom;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
/* nudge the whole bar up a touch on hover */
.ask-inner:hover {
  transform: scale(1.025);
}
.ask-tab {
  pointer-events: auto;
  position: absolute;
  bottom: 100%;
  left: max(1.25rem, calc(50% - 590px + 1.25rem));
  background: #f1ebdf;
  color: #2a211a;
  font-family: "Jost", sans-serif;
  font-size: 0.82rem;
  padding: 0.4rem 1rem 0.55rem;
  border-radius: 13px 13px 0 0;
  box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.08);
}
.ask-close {
  position: absolute;
  top: 10px;
  right: 14px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: none;
  background: rgba(0, 0, 0, 0.05);
  color: #6a6157;
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.3s ease, color 0.3s ease;
}
.ask-close:hover { background: rgba(0, 0, 0, 0.12); color: #2a211a; }
.ask-person { display: flex; align-items: center; gap: 1rem; flex-shrink: 0; }
.ask-avatar {
  width: clamp(56px, 6.5vw, 82px);
  height: clamp(56px, 6.5vw, 82px);
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  background: #2a211a;
}
.ask-name {
  margin: 0;
  font-family: "Jost", sans-serif;
  font-weight: 500;
  font-size: clamp(1.3rem, 2.4vw, 2rem);
  line-height: 1;
  color: #14100c;
}
.ask-role {
  margin: 0.3rem 0 0;
  font-family: "Jost", sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-size: 0.72rem;
  color: #8a8175;
}
.ask-form {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  background: #ece5d7;
  border-radius: 16px;
  padding: 0.45rem 0.45rem 0.45rem 1.15rem;
}
.ask-input {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  outline: none;
  font-family: "Jost", sans-serif;
  font-size: clamp(0.95rem, 1.25vw, 1.12rem);
  color: #2a211a;
}
.ask-input::placeholder { color: #9a9086; }
.ask-send {
  flex-shrink: 0;
  border: none;
  cursor: pointer;
  background: #d9d0be;
  color: #4a4238;
  font-family: "Jost", sans-serif;
  font-size: clamp(0.85rem, 1.1vw, 1rem);
  padding: 0.6rem 1.4rem;
  border-radius: 12px;
  transition: background 0.3s ease, color 0.3s ease, transform 0.2s ease;
}
.ask-send:hover { background: #2a211a; color: #f7efe4; }
.ask-send:active { transform: scale(0.96); }
/* elegant staggered content reveal once the bar has slid up */
.ask-tab,
.ask-person,
.ask-form {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.ask.is-in .ask-tab { opacity: 1; transform: none; transition-delay: 0.35s; }
.ask.is-in .ask-person { opacity: 1; transform: none; transition-delay: 0.48s; }
.ask.is-in .ask-form { opacity: 1; transform: none; transition-delay: 0.6s; }
@media (max-width: 640px) {
  .ask-inner { gap: 0.7rem; padding: 0.85rem 1rem; border-radius: 18px 18px 0 0; }
  .ask-meta { display: none; }
  .ask-tab { left: 1rem; }
  .ask-send { padding: 0.55rem 1rem; }
}
@media (prefers-reduced-motion: reduce) {
  .ask { transition: none; }
  .ask-tab, .ask-person, .ask-form { transition: none; opacity: 1; transform: none; }
  .ask-inner { transition: none; }
  .ask-inner:hover { transform: none; }
}

/* ask bar: much narrower, top-anchored avatar */
.ask-inner { max-width: 860px; gap: 1.4rem; }
.ask-name { font-size: clamp(1.15rem, 2vw, 1.5rem); }
.ask-role { font-size: 0.66rem; }
.ask-avatar { object-position: top; width: clamp(52px, 6vw, 68px); height: clamp(52px, 6vw, 68px); }
.ask-tab { left: max(1rem, calc(50% - 430px + 1.25rem)); }

/* "Fragen?" tab — more subtle */
.ask-tab {
  background: #efe9dd;
  color: #a29888;
  font-size: 0.68rem;
  letter-spacing: 0.02em;
  padding: 0.3rem 0.8rem 0.48rem;
  box-shadow: none;
}

/* Extra dwell: each card holds fullscreen a little longer before the next rises.
   The margin adds flow length after a sticky card, so the next card pins later —
   no content shift, since each card box stays 100svh. Desktop only (mobile scrolls). */
@media (min-width: 821px) {
  .hero,
  #story,
  #warum,
  #invitations,
  #weddingcam,
  #gallery {
    margin-bottom: 34svh;
  }
}

/* ==================================================================== */
/* Mobile menu (hamburger overlay) — the desktop nav pill is hidden     */
/* below lg (1024px), so this is the only navigation on phones.        */
/* ==================================================================== */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 90; /* just under the fixed header (z-100) so the burger stays tappable to close */
  background: rgba(16, 11, 7, 0.96);
  opacity: 0;
  transition: opacity 0.4s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(env(safe-area-inset-top) + 4rem) 2rem calc(env(safe-area-inset-bottom) + 2rem);
}
.mobile-menu.is-open { opacity: 1; }
.mobile-menu__nav {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  width: 100%;
}
.mobile-menu__nav a {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(1.7rem, 6vw, 2.2rem);
  color: #f7efe4;
  text-decoration: none;
  padding: 0.45rem 1.5rem; /* comfortably above the 44px tap minimum */
  letter-spacing: 0.02em;
  transform: translateY(14px);
  opacity: 0;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.5s ease;
}
.mobile-menu.is-open .mobile-menu__nav a { transform: translateY(0); opacity: 1; }
/* gentle stagger */
.mobile-menu.is-open .mobile-menu__nav a:nth-child(2) { transition-delay: 0.04s; }
.mobile-menu.is-open .mobile-menu__nav a:nth-child(3) { transition-delay: 0.08s; }
.mobile-menu.is-open .mobile-menu__nav a:nth-child(4) { transition-delay: 0.12s; }
.mobile-menu.is-open .mobile-menu__nav a:nth-child(5) { transition-delay: 0.16s; }
.mobile-menu.is-open .mobile-menu__nav a:nth-child(6) { transition-delay: 0.2s; }
.mobile-menu.is-open .mobile-menu__nav a:nth-child(7) { transition-delay: 0.24s; }
.mobile-menu.is-open .mobile-menu__nav a:nth-child(8) { transition-delay: 0.28s; }
.mobile-menu__login {
  margin-top: 1rem;
  font-family: "Jost", system-ui, sans-serif !important;
  font-size: 0.85rem !important;
  text-transform: uppercase;
  letter-spacing: 0.25em;
  border: 1px solid rgba(247, 239, 228, 0.35);
  border-radius: 999px;
  padding: 0.8rem 2.2rem !important;
}
/* keep the page from scrolling behind the open menu */
html.menu-locked, html.menu-locked body { overflow: hidden; }

/* ==================================================================== */
/* Touch ergonomics (all viewport sizes)                                */
/* ==================================================================== */
/* Tiny dots stay visually small but gain an invisible ≥44px hit area. */
.wcam-dots button,
[data-carousel-dots] button {
  position: relative;
}
.wcam-dots button::after,
[data-carousel-dots] button::after {
  content: "";
  position: absolute;
  inset: -18px -12px;
}
.ask-close::after {
  content: "";
  position: absolute;
  inset: -10px;
}
/* the fixed bar must clear the iPhone home indicator */
.ask-inner {
  padding-bottom: calc(clamp(1rem, 2vw, 1.5rem) + env(safe-area-inset-bottom));
}
/* the gallery drag field must never trap vertical scrolling on touch */
#gallery-root,
#gallery-root * {
  touch-action: pan-y;
}

/* ==================================================================== */
/* Mobile performance (≤768px) — iOS WebKit compositing/memory budget.  */
/* Large backdrop-filters and big animated blurs force full-viewport    */
/* offscreen buffers at 3× DPR and can OOM-kill the tab in Safari.      */
/* ==================================================================== */
@media (max-width: 768px) {
  /* frosted glass → plain translucent fills (the gradient stays) */
  #showcase {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .angebot-glass {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(27, 21, 18, 0.88);
  }
  .glass-card {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(30, 22, 15, 0.55);
    will-change: auto;
  }
  /* decorative mega-blurs: hide or de-blur (radial gradients still read) */
  .angebot-glow--warm,
  .angebot-glow--cool { display: none; }
  .wcam-aura {
    filter: none;
    animation: none;
    opacity: 0.55;
  }
  /* continuous Ken-Burns on a full-section image keeps a composited layer
     hot forever — static on phones */
  .usp-bg { animation: none; }
  /* don't pin dozens of reveal elements to their own GPU layers */
  [data-reveal] { will-change: auto; }
  /* iOS zooms any focused input under 16px — keep the ask bar unzoomed */
  .ask-input { font-size: 16px; }
}