/* =========================================================
   RiNG STUDiO — Wedding page (cinematic layer)
   Loaded only on wedding.html, on top of style.css.
   ========================================================= */

.w-h2{ font-size:clamp(30px,4.4vw,56px); line-height:1.04; }
.w-svc-list, .w-calc-steps{ list-style:none; margin:0; padding:0; }
.w-h2 em, .w-calc-title em{ font-style:italic; color:var(--accent-2); }

a:focus-visible, button:focus-visible, .btn:focus-visible{
  outline:2px solid var(--accent-2); outline-offset:3px;
}

/* =========================================================
   HERO
   ========================================================= */
.w-cine{
  position:relative; min-height:100vh; min-height:100svh; overflow:hidden; isolation:isolate; background:#050505;
  display:flex; flex-direction:column; justify-content:center; padding:104px 0 72px;
}
.w-cine .b-beams{ z-index:-1; opacity:.55; }
.w-cine-band{ position:relative; width:100%; aspect-ratio:2.39/1; max-height:68vh; overflow:hidden; background:#000; }
.w-cine-band::after{
  content:''; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:
    linear-gradient(90deg, rgba(5,5,5,.88) 0%, rgba(5,5,5,.5) 38%, rgba(5,5,5,0) 70%),
    linear-gradient(0deg, rgba(5,5,5,.85) 0%, rgba(5,5,5,0) 55%);
}
.w-cine-vert{ display:none; }
.w-cine-copy{ position:relative; z-index:3; margin-top:calc(-1 * min(26vh, 17vw)); }
.w-cine .kicker{ color:var(--accent-2); }
.w-cine h1{ font-size:clamp(42px,5.6vw,84px); line-height:1.04; max-width:900px; }
.w-cine h1 em{ font-style:italic; color:var(--accent-2); }
.w-cine .lede{ max-width:560px; color:var(--text-muted); font-size:18px; margin-top:22px; }
@media (max-width:640px){
  .w-cine h1{ font-size:clamp(34px,9vw,60px); }
  .w-cine .lede{ font-size:16px; }
}
.w-hero-title{ max-width:900px; }
.w-line{ display:block; overflow:hidden; padding:0 .12em .1em 0; margin-bottom:-.1em; }
.w-line > span{ display:inline-block; }

.w-hero-actions{ display:flex; gap:16px; margin-top:34px; flex-wrap:wrap; }
.w-hero-meta{
  display:flex; flex-wrap:wrap; gap:10px 30px; margin-top:44px;
  font-size:11.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--text-muted);
}
.w-hero-meta li{ display:flex; align-items:center; gap:12px; }
.w-hero-meta li::before{ content:''; width:18px; height:1px; background:var(--line-strong); }

.w-scroll{
  position:absolute; z-index:2; right:32px; bottom:36px; width:24px; height:56px;
  display:flex; justify-content:center;
}
.w-scroll span{
  width:1px; height:100%; background:linear-gradient(var(--accent-2), transparent);
  animation:scrollLine 2.2s infinite ease-in-out;
}

@media (prefers-reduced-motion: no-preference){
  .w-js .w-cine-band{ animation:wBandOpen 1.7s var(--ease) .2s both; }
  .w-js .w-hero-kicker{ animation:wFadeUp .9s var(--ease) .45s both; }
  .w-js .w-hero-title .w-line > span{ animation:wLineUp 1.15s var(--ease) both; }
  .w-js .w-hero-title .w-line:nth-child(1) > span{ animation-delay:.55s; }
  .w-js .w-hero-title .w-line:nth-child(2) > span{ animation-delay:.7s; }
  .w-js .w-hero-lede{ animation:wFadeUp 1s var(--ease) .95s both; }
  .w-js .w-hero-actions{ animation:wFadeUp 1s var(--ease) 1.1s both; }
  .w-js .w-hero-meta{ animation:wFade 1.2s ease 1.35s both; }
  .w-js .w-scroll{ animation:wFade 1s ease 1.7s both; }
}
@keyframes wBandOpen{ from{ clip-path:inset(50% 0 50% 0); } to{ clip-path:inset(0 0 0 0); } }
@keyframes wLineUp{ from{ transform:translateY(112%); } to{ transform:translateY(0); } }
@keyframes wFadeUp{ from{ opacity:0; transform:translateY(22px); } to{ opacity:1; transform:none; } }
@keyframes wFade{ from{ opacity:0; } to{ opacity:1; } }

@media (max-width:900px){
  .w-cine{ justify-content:flex-end; padding-bottom:64px; }
  .w-cine-band{ display:none; }
  .w-cine-vert{ display:block; position:absolute; inset:0; z-index:-1; }
  .w-cine-vert video{ width:100%; height:100%; object-fit:cover; }
  .w-cine-vert::after{
    content:''; position:absolute; inset:0;
    background:linear-gradient(180deg, rgba(5,5,5,.45) 0%, rgba(5,5,5,.25) 22%, rgba(5,5,5,.82) 52%, rgba(5,5,5,.92) 75%, var(--bg) 100%);
  }
  .w-cine-copy{ margin-top:0; }
  .w-scroll{ display:none; }
}
@media (max-width:640px){
  .w-hero-actions .btn{ flex:1 1 auto; }
  .w-hero-meta{ margin-top:32px; font-size:10.5px; letter-spacing:.16em; }
}

/* =========================================================
   STORY / HALTUNG
   ========================================================= */
.w-story-grid{ display:grid; grid-template-columns:1fr 1fr; gap:96px; align-items:center; }
.w-story-media{ position:relative; padding:0 14% 16% 0; }
.w-story-main{ margin:0; aspect-ratio:4/5; overflow:hidden; --r:var(--radius); border-radius:var(--radius); }
.w-story-detail{
  position:absolute; right:0; bottom:0; width:44%; aspect-ratio:3/4; margin:0; overflow:hidden;
  --r:var(--radius-sm); border-radius:var(--radius-sm); box-shadow:0 0 0 8px var(--bg), 0 30px 60px -20px rgba(0,0,0,.6);
}
.w-story-main img, .w-story-detail img{ width:100%; height:100%; object-fit:cover; }
.w-story-copy .w-h2{ margin-bottom:28px; }
.w-story-copy p{ color:var(--text-muted); font-size:17px; max-width:520px; }
.w-story-copy p + p{ margin-top:18px; }
@media (max-width:900px){
  .w-story-grid{ grid-template-columns:1fr; gap:56px; }
  .w-story-media{ max-width:520px; }
}

/* =========================================================
   LEISTUNGEN
   ========================================================= */
.w-services-head{ margin-bottom:48px; }
.w-services-head .w-h2{ max-width:680px; }
.w-svc-list{ border-bottom:1px solid var(--line); }
.w-svc{
  position:relative; isolation:isolate;
  display:grid; grid-template-columns:72px minmax(0,1.05fr) minmax(0,1.4fr) minmax(0,1fr);
  gap:32px; align-items:baseline; padding:36px 0;
}
.w-svc::before{
  content:''; position:absolute; top:0; left:0; right:0; height:1px; background:var(--line-strong);
  transform:scaleX(0); transform-origin:left; transition:transform 1.3s var(--ease);
}
.w-svc.is-visible::before{ transform:scaleX(1); }
.w-svc::after{
  content:''; position:absolute; inset:0 -24px; z-index:-1;
  background:linear-gradient(90deg, var(--accent-soft), transparent 65%);
  opacity:0; transition:opacity .5s ease;
}
.w-svc:hover::after{ opacity:1; }
.w-svc-num{ font-family:var(--font-display); font-size:18px; color:var(--accent-2); }
.w-svc h3{ font-size:clamp(24px,2.5vw,34px); transition:transform .6s var(--ease), color .4s ease; }
.w-svc:hover h3{ transform:translateX(8px); }
.w-svc p{ color:var(--text-muted); font-size:15px; }
.w-svc-tags{ justify-self:end; text-align:right; font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--text-faint); line-height:1.8; }
.w-extras{ display:flex; align-items:center; gap:18px 28px; flex-wrap:wrap; margin-top:40px; }
.w-extras-label{ font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--text-muted); }
.w-extras ul{ display:flex; flex-wrap:wrap; gap:10px; }
.w-extras li{
  padding:9px 16px; border:1px solid var(--line-strong); border-radius:var(--pill);
  font-size:13px; color:var(--text-muted); transition:border-color .3s ease, color .3s ease;
}
.w-extras li:hover{ border-color:var(--accent-2); color:var(--text); }
@media (max-width:900px){
  .w-svc{ grid-template-columns:44px minmax(0,1fr); gap:10px 16px; padding:28px 0; }
  .w-svc h3, .w-svc p, .w-svc-tags{ grid-column:2; }
  .w-svc-tags{ justify-self:start; text-align:left; margin-top:4px; }
  .w-svc::after{ inset:0 -20px; }
}

/* =========================================================
   ABLAUF — journey line
   ========================================================= */
.w-process::before{ display:none; }
.w-process-track{
  position:absolute; top:26px; left:50px; right:calc(25% - 50px); height:1px; background:var(--line); z-index:0;
}
/* Each step is its own stacking context (reveal transform), so lift the whole step above the line. */
.w-process .p-step{ z-index:1; }
.w-process-track i{
  display:block; width:100%; height:100%;
  background:linear-gradient(90deg, var(--accent), var(--accent-2));
  transform:scaleX(var(--progress,0)); transform-origin:left;
}
.w-process .p-num{ transition:border-color .5s ease, color .5s ease, background .5s ease, transform .6s var(--ease), box-shadow .6s ease; }
.w-process .p-step.is-active .p-num{
  border-color:var(--accent); background:var(--accent); color:#fff; transform:scale(1.06);
  box-shadow:0 0 0 6px var(--accent-soft);
}
.w-process .p-step h3{ font-size:20px; margin-bottom:10px; transition:color .5s ease; }
.w-process .p-step:not(.is-active) h3{ color:var(--text-muted); }
@media (max-width:900px){
  .w-process{ gap:40px; }
  .w-process-track{ top:26px; bottom:var(--track-end, 26px); left:26px; right:auto; width:1px; height:auto; }
  .w-process-track i{ transform:scaleY(var(--progress,0)); transform-origin:top; background:linear-gradient(180deg, var(--accent), var(--accent-2)); }
  .w-process .p-step{ display:grid; grid-template-columns:52px minmax(0,1fr); column-gap:22px; padding:0; }
  .w-process .p-step .p-num{ margin-bottom:0; grid-row:span 2; }
  .w-process .p-step h3{ margin:12px 0 6px; }
}

/* =========================================================
   PORTFOLIO — editorial grid
   ========================================================= */
.pf-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:40px; margin-bottom:60px; }
.pf-intro{ color:var(--text-muted); max-width:400px; font-size:15.5px; }
.pf-grid{
  display:grid; grid-template-columns:repeat(12,minmax(0,1fr));
  gap:22px; align-items:start;
}
.pf-item{ margin:0; position:relative; overflow:hidden; background:var(--surface); --r:3px; border-radius:3px; margin-top:var(--off,0px); }
.pf-item.r-45{ aspect-ratio:4/5; }
.pf-item.r-34{ aspect-ratio:3/4; }
.pf-item.r-43{ aspect-ratio:4/3; }
.pf-item.r-wide{ aspect-ratio:16/10; }
.pf-open{
  display:block; width:100%; height:100%; padding:0; margin:0; border:0; background:none;
  cursor:zoom-in; position:relative;
}
.pf-open img{ width:100%; height:100%; object-fit:cover; }
.pf-item.is-visible .pf-open img{ transition:transform 1.4s var(--ease), filter .6s ease; }
.pf-open::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,.38) 100%);
  opacity:0; transition:opacity .6s ease;
}
.pf-open::before{
  content:''; position:absolute; z-index:2; right:18px; bottom:18px; width:34px; height:34px; border-radius:50%;
  border:1px solid rgba(255,255,255,.55);
  background:
    linear-gradient(#fff,#fff) center/12px 1px no-repeat,
    linear-gradient(#fff,#fff) center/1px 12px no-repeat;
  opacity:0; transform:translateY(8px); transition:opacity .5s ease, transform .6s var(--ease);
}
.pf-open:focus-visible{ outline:2px solid var(--accent-2); outline-offset:-4px; }
@media (hover:hover){
  .pf-item.is-visible .pf-open:hover img{ transform:scale(1.045); }
  .pf-open:hover::after{ opacity:1; }
  .pf-open:hover::before{ opacity:1; transform:none; }
}
.pf-open:focus-visible::before{ opacity:1; transform:none; }

.pf-a1{ grid-column:1 / span 7; grid-row:1 / span 2; }
.pf-a-note{ grid-column:8 / span 5; grid-row:1; align-self:end; padding:0 0 6px 4px; }
.pf-a2{ grid-column:8 / span 5; grid-row:2; }
.pf-b1{ grid-column:1 / span 4; --off:80px; }
.pf-b2{ grid-column:5 / span 4; }
.pf-b3{ grid-column:9 / span 4; --off:140px; }
.pf-c1{ grid-column:1 / span 8; }
.pf-c2{ grid-column:9 / span 4; --off:60px; }
.pf-d1{ grid-column:2 / span 4; }
.pf-d2{ grid-column:7 / span 5; --off:110px; }
.pf-e1{ grid-column:1 / span 6; }
.pf-e2{ grid-column:7 / span 3; --off:70px; }
.pf-e3{ grid-column:10 / span 3; --off:170px; }
.pf-f1{ grid-column:1 / span 4; }
.pf-f2{ grid-column:5 / span 8; --off:90px; }
.pf-b2.is-visible, .pf-e2.is-visible, .pf-a2.is-visible{ transition-delay:.12s; }
.pf-b2.is-visible img, .pf-e2.is-visible img{ transition-delay:.12s; }
.pf-b3.is-visible, .pf-e3.is-visible, .pf-c2.is-visible, .pf-d2.is-visible, .pf-f2.is-visible{ transition-delay:.22s; }

.pf-note-num{ display:block; font-family:var(--font-display); color:var(--accent-2); font-size:16px; margin-bottom:12px; }
.pf-note p{ font-family:var(--font-display); font-style:italic; font-size:clamp(24px,2.4vw,34px); line-height:1.15; max-width:320px; }

@media (max-width:1100px){
  .pf-item{ margin-top:calc(var(--off,0px) * .5); }
}
@media (max-width:760px){
  .pf-head{ flex-direction:column; align-items:flex-start; gap:18px; margin-bottom:36px; }
  .pf-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  .pf-grid > *{ grid-column:auto / span 1; grid-row:auto; margin-top:0; }
  .pf-a1, .pf-a-note, .pf-c1, .pf-f1, .pf-f2{ grid-column:1 / -1; }
  .pf-grid > .pf-item:not(.pf-a1):not(.pf-c1):not(.pf-f1):not(.pf-f2){ aspect-ratio:4/5; }
  .pf-a-note{ padding:14px 2px 18px; }
  .pf-c1.r-wide, .pf-f2.r-wide{ aspect-ratio:4/3; }
  .pf-open::before{ display:none; }
}

/* Instagram (kept, now part of the portfolio) */
.ig-block{ margin-top:110px; padding-top:72px; border-top:1px solid var(--line); }
.ig-block-head{ text-align:center; margin-bottom:44px; }
.ig-block-head h3{ font-size:clamp(24px,2.6vw,32px); margin-bottom:10px; }
.ig-block-head p{ color:var(--text-muted); }
.ig-block-head a{ color:var(--accent-2); }
@media (max-width:760px){ .ig-block{ margin-top:72px; padding-top:56px; } }

/* =========================================================
   PREISRECHNER — invitation
   ========================================================= */
.w-calc{ background:var(--bg-alt); overflow:hidden; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.w-calc::before{
  content:''; position:absolute; width:620px; height:620px; border-radius:50%;
  background:var(--accent-soft); filter:blur(90px); left:-220px; top:-260px; pointer-events:none;
}
.w-calc-grid{ position:relative; display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr); gap:90px; align-items:center; }
.w-calc-title{ font-size:clamp(36px,5.4vw,74px); line-height:1.02; max-width:760px; }
.w-calc-title > span, .w-calc-title em{ display:block; }
.w-calc-text{ color:var(--text-muted); font-size:17px; max-width:540px; margin-top:28px; }
.w-calc-steps{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; margin-top:44px; max-width:620px; }
.w-calc-steps li{
  position:relative; padding-top:16px; border-top:1px solid var(--line-strong);
  font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--text-muted);
}
.w-calc-steps li::before{
  content:''; position:absolute; top:-1px; left:0; width:100%; height:1px; background:var(--accent-2);
  transform:scaleX(0); transform-origin:left; transition:transform 1.1s var(--ease);
}
.w-calc-steps.is-visible li::before{ transform:scaleX(1); }
.w-calc-steps.is-visible li:nth-child(2)::before{ transition-delay:.35s; }
.w-calc-steps.is-visible li:nth-child(3)::before{ transition-delay:.7s; }
.w-calc-steps span{ display:block; font-family:var(--font-display); font-size:17px; letter-spacing:0; color:var(--accent-2); margin-bottom:6px; }
.w-calc-actions{ display:flex; align-items:center; flex-wrap:wrap; gap:16px 26px; margin-top:44px; }
.w-calc-note{ font-size:12.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--text-faint); }
.btn-arrow{ padding:18px 30px 18px 36px; gap:14px; }
.btn-arrow .arrow, .w-text-link .arrow{ transition:transform .5s var(--ease); flex-shrink:0; }
.btn-arrow:hover .arrow, .btn-arrow:focus-visible .arrow,
.w-text-link:hover .arrow, .w-text-link:focus-visible .arrow{ transform:translateX(6px); }
.w-calc-media{ margin:0; aspect-ratio:4/5; overflow:hidden; --r:var(--radius); border-radius:var(--radius); position:relative; }
.w-calc-media img{ width:100%; height:112%; object-fit:cover; margin-top:-6%; }
.w-calc-media.is-visible img{ transform:translate3d(0,var(--py,0px),0); transition:transform 1.9s var(--ease); }
@media (max-width:900px){
  .w-calc-grid{ grid-template-columns:1fr; gap:56px; }
  .w-calc-media{ max-width:440px; aspect-ratio:4/3; }
}
@media (max-width:560px){
  .w-calc-steps{ grid-template-columns:1fr; gap:14px; }
  .w-calc-actions .btn{ width:100%; }
}

/* =========================================================
   FINAL CTA
   ========================================================= */
.w-text-link{
  display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:10px 0 0;
  font-size:12.5px; letter-spacing:.14em; text-transform:uppercase; font-weight:600; color:var(--text);
  transition:color .3s ease;
}
.w-text-link:hover{ color:var(--accent-2); }

/* =========================================================
   LIGHTBOX
   ========================================================= */
.w-lb{
  position:fixed; inset:0; z-index:1000; display:flex; align-items:center; justify-content:center;
  padding:72px 88px; background:rgba(8,8,9,.95);
  opacity:0; visibility:hidden; transition:opacity .45s var(--ease), visibility 0s linear .45s;
}
.w-lb.is-open{ opacity:1; visibility:visible; transition:opacity .45s var(--ease); }
.w-lb-figure{
  margin:0; display:flex; flex-direction:column; align-items:center; max-width:100%; max-height:100%;
  transform:scale(.95) translateY(14px); transition:transform .6s var(--ease);
}
.w-lb.is-open .w-lb-figure{ transform:none; }
.w-lb-img{
  display:block; max-width:min(100%, 880px); max-height:calc(100vh - 190px); width:auto; height:auto;
  object-fit:contain; border-radius:3px; transition:opacity .28s ease, transform .5s var(--ease);
}
.w-lb.is-switching .w-lb-img{ opacity:0; transform:scale(.985); }
.w-lb-caption{ margin-top:16px; color:var(--text-muted); font-size:13.5px; text-align:center; max-width:640px; }
.w-lb-count{ position:absolute; top:30px; left:32px; font-size:12px; letter-spacing:.2em; color:var(--text-muted); }
.w-lb-btn{
  position:absolute; width:52px; height:52px; border-radius:50%; display:grid; place-items:center;
  border:1px solid var(--line-strong); background:rgba(11,11,12,.55); color:var(--text);
  transition:border-color .3s ease, background .3s ease, transform .45s var(--ease);
}
.w-lb-btn:hover{ border-color:var(--accent-2); background:rgba(11,11,12,.85); }
.w-lb-close{ top:20px; right:22px; }
.w-lb-prev{ left:22px; top:50%; margin-top:-26px; }
.w-lb-next{ right:22px; top:50%; margin-top:-26px; }
.w-lb-prev:hover{ transform:translateX(-3px); }
.w-lb-next:hover{ transform:translateX(3px); }
body.w-lb-lock{ overflow:hidden; }
@media (max-width:760px){
  .w-lb{ padding:64px 12px 96px; }
  .w-lb-img{ max-height:calc(100vh - 200px); max-height:calc(100svh - 200px); }
  .w-lb-prev, .w-lb-next{ top:auto; bottom:24px; margin-top:0; }
  .w-lb-prev{ left:calc(50% - 64px); }
  .w-lb-next{ right:calc(50% - 64px); }
  .w-lb-count{ top:34px; left:20px; }
  .w-lb-close{ top:18px; right:14px; }
}

/* =========================================================
   REDUCED MOTION — no movement, no parallax, no zoom; content still
   arrives with calm opacity fades so the page doesn't feel static.
   ========================================================= */
@media (prefers-reduced-motion: reduce){
  .pf-open img, .w-calc-media img{ transform:none !important; transition:none !important; }
  .w-svc::before, .w-calc-steps li::before{ transform:none !important; transition:none !important; }
  .marquee-track, .w-scroll span{ animation:none !important; }
  .w-lb-figure{ transform:none !important; }
  .w-lb-img{ transition:opacity .25s ease !important; transform:none !important; }
  .w-svc h3{ transition:color .35s ease !important; transform:none !important; }
  .w-process .p-num{ transform:none !important; }

  .w-js .w-cine-band{ animation:wFade 1.4s ease both; }
  .w-js .w-hero-kicker{ animation:wFade 1s ease .4s both; }
  .w-js .w-hero-title .w-line:nth-child(1) > span{ animation:wFade 1.1s ease .55s both; }
  .w-js .w-hero-title .w-line:nth-child(2) > span{ animation:wFade 1.1s ease .75s both; }
  .w-js .w-hero-lede{ animation:wFade 1s ease .95s both; }
  .w-js .w-hero-actions{ animation:wFade 1s ease 1.1s both; }
  .w-js .w-hero-meta{ animation:wFade 1s ease 1.3s both; }
}