/* IQ Media Arts: Hochzeiten / Weddings only. 28 October 2026.
   Page-specific, bilingual responsive finish. Existing media and forms unchanged.
   The same browser-delivered Anton face is used on laptop, tablet and phone. */

/* Major wedding headings, excluding the previously approved social/CTA footer. */
html body.wedding-site .wedding-main .wedding-hero #wedding-title,
html body.wedding-site .wedding-main .wedding-intro h2,
html body.wedding-site .wedding-main #wedding-reel-title,
html body.wedding-site .wedding-main #wedding-films-title,
html body.wedding-site .wedding-main .wedding-story h2,
html body.wedding-site .wedding-main #standesamt-title,
html body.wedding-site .wedding-main #wedding-details-title,
html body.wedding-site .wedding-main #wedding-request-title,
html body.wedding-site .wedding-main .wedding-form-panel h3 {
 font-family:"Anton",Impact,"Arial Narrow",sans-serif!important;
 font-weight:400!important;
 font-stretch:normal!important;
 font-style:normal!important;
 font-synthesis:none!important;
 line-height:1.09!important;
 letter-spacing:0!important;
 text-rendering:optimizeLegibility;
}

/* 00 / Hero: always smaller YOUR DAY / EUER TAG, larger FOREVER / FÜR IMMER. */
html body.wedding-site .wedding-main .wedding-hero #wedding-title{
 font-size:clamp(49px,5.1vw,82px)!important;
 max-width:100%!important;
 white-space:normal!important;
 line-height:1.03!important;
 margin-top:20px!important;
}
html body.wedding-site .wedding-main .wedding-hero #wedding-title br{display:none}
html body.wedding-site .wedding-main .wedding-hero #wedding-title em{
 display:block!important;
 font-family:inherit!important;
 font-size:1.27em!important;
 font-weight:400!important;
 font-style:normal!important;
 line-height:1.04!important;
 letter-spacing:0!important;
 white-space:nowrap!important;
}

/* 02 / Film section: first phrase small, IN MOTION / IN BEWEGUNG large.
   Desktop supporting sentence occupies its own line above the media. */
html body.wedding-site .wedding-main .wedding-reel-head{
 display:flex!important;
 flex-direction:column!important;
 align-items:flex-start!important;
 justify-content:flex-start!important;
 gap:16px!important;
 margin-bottom:clamp(30px,3vw,48px)!important;
}
html body.wedding-site .wedding-main .wedding-reel-head>div{min-width:0;width:100%}
html body.wedding-site .wedding-main #wedding-reel-title{
 display:block!important;
 font-size:clamp(46px,5.1vw,80px)!important;
 max-width:100%!important;
 line-height:1.06!important;
 margin:14px 0 0!important;
}
html body.wedding-site .wedding-main #wedding-reel-title .iq-mobile-first,
html body.wedding-site .wedding-main #wedding-reel-title .iq-mobile-second{
 display:block!important;
 font-family:inherit!important;
 letter-spacing:0!important;
 line-height:1.06!important;
 white-space:nowrap!important;
}
html body.wedding-site .wedding-main #wedding-reel-title .iq-mobile-first{
 font-size:.76em!important;
}
html body.wedding-site .wedding-main #wedding-reel-title .iq-mobile-second{
 font-size:1em!important;
}
html body.wedding-site .wedding-main .wedding-reel-head>p{
 flex:none!important;
 width:100%!important;
 max-width:none!important;
 margin:0!important;
 font-size:clamp(16px,1.35vw,20px)!important;
 line-height:1.55!important;
 white-space:nowrap!important;
 color:#514b4d!important;
}

/* 06 / Details: editorial, staggered eight-piece mosaic in BOTH languages.
   Row 1: necklace video at top left, Candy Bar photo at right.
   Row 2: preparation photo, ring-case film in the center, rings photograph.
   Row 3: three original photos stepping down left to right.
   The original two video and six photo URLs remain untouched in HTML. */
html body.wedding-site .wedding-main #details .wedding-details-grid{
 display:grid!important;
 columns:auto!important;
 grid-template-columns:repeat(12,minmax(0,1fr))!important;
 grid-template-areas:
   "jewel jewel jewel jewel jewel . . candy candy candy candy candy"
   "prep prep prep prep promise promise promise promise rings rings rings rings"
   "welcome welcome welcome welcome decor decor decor decor gesture gesture gesture gesture"!important;
 column-gap:clamp(14px,2vw,28px)!important;
 row-gap:clamp(27px,3.4vw,50px)!important;
 align-items:start!important;
}
html body.wedding-site .wedding-main #details .wedding-details-grid>figure{
 display:block!important;
 position:relative;
 min-width:0!important;
 width:100%!important;
 max-width:100%!important;
 margin:0!important;
 grid-column:auto!important;
 grid-row:auto!important;
 break-inside:avoid!important;
 align-self:start!important;
}
html body.wedding-site .wedding-main #details .wedding-details-grid>figure:nth-child(1){grid-area:jewel!important}
html body.wedding-site .wedding-main #details .wedding-details-grid>figure:nth-child(2){grid-area:prep!important}
html body.wedding-site .wedding-main #details .wedding-details-grid>figure:nth-child(3){grid-area:rings!important}
html body.wedding-site .wedding-main #details .wedding-details-grid>figure:nth-child(4){grid-area:promise!important}
html body.wedding-site .wedding-main #details .wedding-details-grid>figure:nth-child(5){grid-area:welcome!important}
html body.wedding-site .wedding-main #details .wedding-details-grid>figure:nth-child(6){grid-area:candy!important}
html body.wedding-site .wedding-main #details .wedding-details-grid>figure:nth-child(7){grid-area:decor!important}
html body.wedding-site .wedding-main #details .wedding-details-grid>figure:nth-child(8){grid-area:gesture!important}
/* Vary the vertical starts deliberately, without moving the videos next to each other. */
html body.wedding-site .wedding-main #details .wedding-details-grid>figure:nth-child(6){margin-top:clamp(30px,4vw,65px)!important}
html body.wedding-site .wedding-main #details .wedding-details-grid>figure:nth-child(4){margin-top:clamp(25px,3.5vw,55px)!important}
html body.wedding-site .wedding-main #details .wedding-details-grid>figure:nth-child(3){margin-top:clamp(48px,6vw,95px)!important}
html body.wedding-site .wedding-main #details .wedding-details-grid>figure:nth-child(7){margin-top:clamp(28px,3.5vw,56px)!important}
html body.wedding-site .wedding-main #details .wedding-details-grid>figure:nth-child(8){margin-top:clamp(48px,6vw,95px)!important}
html body.wedding-site .wedding-main #details .wedding-details-grid>.wedding-photo img{
 display:block!important;
 width:100%!important;
 height:auto!important;
 max-height:520px!important;
 object-fit:contain!important;
 object-position:center!important;
}
html body.wedding-site .wedding-main #details .wedding-details-grid .wedding-clip-stage{
 width:100%!important;
 aspect-ratio:16/9!important;
 overflow:hidden;
}
html body.wedding-site .wedding-main #details .wedding-details-grid .wedding-clip video{
 object-fit:contain!important;
}
/* 06 / THE DETAILS / THAT LAST: same display face, larger second line. */
html body.wedding-site .wedding-main #wedding-details-title .iq-mobile-first{
 display:block!important;
 font-size:.76em!important;
 line-height:1.07!important;
}
html body.wedding-site .wedding-main #wedding-details-title .iq-mobile-second{
 display:block!important;
 font-size:1em!important;
 line-height:1.07!important;
}

/* 07 / Enquiry: the heading is above a clean, self-contained image/form.
   Remove the negative image overlap causing the cropped title at 07. */
html body.wedding-site .wedding-main #anfrage{
 overflow:visible!important;
}
html body.wedding-site .wedding-main #anfrage .wedding-request-heading{
 position:relative!important;
 z-index:2!important;
 display:flex!important;
 align-items:end!important;
 justify-content:space-between!important;
 gap:clamp(18px,2.8vw,40px)!important;
 margin-bottom:clamp(32px,3.4vw,55px)!important;
 min-height:0!important;
}
html body.wedding-site .wedding-main #anfrage #wedding-request-title{
 display:block!important;
 max-width:100%!important;
 font-size:clamp(34px,3.4vw,54px)!important;
 line-height:1.1!important;
 white-space:normal!important;
 overflow:visible!important;
 margin:14px 0 0!important;
}
html body.wedding-site .wedding-main #anfrage .wedding-request-heading>p{
 max-width:420px!important;
 min-width:0;
 margin:0!important;
 line-height:1.55!important;
}
html body.wedding-site .wedding-main #anfrage .wedding-form-layout{
 position:relative!important;
 isolation:isolate!important;
 overflow:hidden!important;
 background:#141415!important;
 z-index:0!important;
}
html body.wedding-site .wedding-main #anfrage .wedding-form-backdrop{
 position:absolute!important;
 inset:0!important;
 width:100%!important;
 height:100%!important;
 overflow:hidden!important;
 -webkit-mask-image:none!important;
 mask-image:none!important;
 pointer-events:none!important;
 z-index:0!important;
}
html body.wedding-site .wedding-main #anfrage .wedding-form-backdrop .wedding-request-photo{
 position:absolute!important;
 inset:0!important;
 width:100%!important;
 height:100%!important;
 max-width:none!important;
 display:block!important;
 object-fit:cover!important;
 object-position:62% 42%!important;
 transform:none;
 animation:none;
 transition:transform .85s ease;
 will-change:transform;
}
html body.wedding-site .wedding-main #anfrage .wedding-form-backdrop::after{
 background:linear-gradient(90deg,rgba(12,12,15,.94) 0%,rgba(12,12,15,.78) 36%,rgba(12,12,15,.32) 58%,rgba(12,12,15,.06) 100%)!important;
}
html body.wedding-site .wedding-main #anfrage .wedding-form-panel{
 position:relative!important;
 z-index:2!important;
 margin:0!important;
 padding:clamp(28px,4vw,60px)!important;
 background:transparent!important;
}

/* Tablet: preserve same display type, adjust spacing, center ring film. */
@media(min-width:701px) and (max-width:1100px){
 html body.wedding-site .wedding-main .wedding-hero #wedding-title{
   font-size:clamp(43px,6vw,69px)!important;
 }
 html body.wedding-site .wedding-main #wedding-reel-title{
   font-size:clamp(40px,6.2vw,65px)!important;
 }
 html body.wedding-site .wedding-main .wedding-reel-head>p{
   white-space:normal!important;
   font-size:clamp(16px,1.7vw,19px)!important;
 }
 html body.wedding-site .wedding-main #details .wedding-details-grid{
   grid-template-columns:repeat(6,minmax(0,1fr))!important;
   grid-template-areas:
      "jewel jewel jewel candy candy candy"
      "prep prep promise promise rings rings"
      "welcome welcome decor decor gesture gesture"!important;
   column-gap:clamp(12px,1.8vw,20px)!important;
   row-gap:clamp(24px,3vw,38px)!important;
 }
 html body.wedding-site .wedding-main #details .wedding-details-grid>figure:nth-child(6){margin-top:clamp(16px,3vw,36px)!important}
 html body.wedding-site .wedding-main #details .wedding-details-grid>figure:nth-child(4){margin-top:clamp(14px,2.5vw,30px)!important}
 html body.wedding-site .wedding-main #details .wedding-details-grid>figure:nth-child(3){margin-top:clamp(24px,4vw,48px)!important}
 html body.wedding-site .wedding-main #details .wedding-details-grid>figure:nth-child(7){margin-top:clamp(16px,2.7vw,30px)!important}
 html body.wedding-site .wedding-main #details .wedding-details-grid>figure:nth-child(8){margin-top:clamp(26px,4vw,50px)!important}
 html body.wedding-site .wedding-main #anfrage .wedding-request-heading{
   flex-direction:column!important;
   align-items:flex-start!important;
 }
 html body.wedding-site .wedding-main #anfrage .wedding-request-heading>p{
   max-width:680px!important;
 }
}
/* Tablet/phone: the photo is an independent stage above the dark enquiry
   form, not an image stretched behind the headings or outside its frame. */
@media(max-width:850px){
 html body.wedding-site .wedding-main #anfrage .wedding-form-layout{
   display:flex!important;
   flex-direction:column!important;
   min-height:0!important;
 }
 html body.wedding-site .wedding-main #anfrage .wedding-form-backdrop{
   position:relative!important;
   order:0!important;
   inset:auto!important;
   display:block!important;
   flex:none!important;
   width:100%!important;
   height:clamp(330px,54vw,480px)!important;
   overflow:hidden!important;
 }
 html body.wedding-site .wedding-main #anfrage .wedding-form-backdrop .wedding-request-photo{
   object-position:65% 36%!important;
 }
 html body.wedding-site .wedding-main #anfrage .wedding-form-backdrop::after{
   /* Match the user's portrait reference: visible couple, smooth fading into dark form. */
   background:linear-gradient(to bottom,transparent 0%,
     rgba(20,20,21,.02) 28%,rgba(20,20,21,.12) 47%,
     rgba(20,20,21,.40) 63%,rgba(20,20,21,.76) 80%,#141415 100%)!important;
 }
 html body.wedding-site .wedding-main #anfrage .wedding-form-backdrop .wedding-request-photo{
   -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 47%,
      rgba(0,0,0,.96) 56%,rgba(0,0,0,.68) 72%,
      rgba(0,0,0,.30) 88%,transparent 100%)!important;
   mask-image:linear-gradient(to bottom,#000 0%,#000 47%,
      rgba(0,0,0,.96) 56%,rgba(0,0,0,.68) 72%,
      rgba(0,0,0,.30) 88%,transparent 100%)!important;
 }
 html body.wedding-site .wedding-main #anfrage .wedding-form-panel{
   order:1!important;
   margin:0!important;
   padding:clamp(26px,5vw,45px)!important;
   background:#141415!important;
 }
 html body.wedding-site .wedding-main #anfrage .wedding-form-visual{display:none!important}
}

/* Phone: readable non-cropped titles, single ring film amid photos. */
@media(max-width:700px){
 html body.wedding-site .wedding-main .wedding-hero #wedding-title{
   font-size:clamp(39px,10vw,58px)!important;
 }
 html body.wedding-site .wedding-main .wedding-hero #wedding-title em{
   font-size:1.21em!important;
 }
 html body.wedding-site .wedding-main #wedding-reel-title{
   font-size:clamp(34px,9vw,52px)!important;
 }
 html body.wedding-site .wedding-main .wedding-reel-head>p{
   white-space:normal!important;
   font-size:clamp(15px,4vw,18px)!important;
 }
 html body.wedding-site .wedding-main #details .wedding-details-grid{
   grid-template-columns:repeat(2,minmax(0,1fr))!important;
   grid-template-areas:
     "jewel candy"
     "prep prep"
     "promise promise"
     "rings rings"
     "welcome decor"
     "gesture gesture"!important;
   gap:clamp(16px,4vw,25px) 12px!important;
 }
 html body.wedding-site .wedding-main #details .wedding-details-grid>figure:nth-child(6),
 html body.wedding-site .wedding-main #details .wedding-details-grid>figure:nth-child(4),
 html body.wedding-site .wedding-main #details .wedding-details-grid>figure:nth-child(3),
 html body.wedding-site .wedding-main #details .wedding-details-grid>figure:nth-child(7),
 html body.wedding-site .wedding-main #details .wedding-details-grid>figure:nth-child(8){
   margin-top:0!important;
 }
 html body.wedding-site .wedding-main #details .wedding-details-grid>figure:nth-child(6),
 html body.wedding-site .wedding-main #details .wedding-details-grid>figure:nth-child(7){margin-top:18px!important}
 html body.wedding-site .wedding-main #anfrage #wedding-request-title{
   font-size:clamp(27px,7.5vw,39px)!important;
 }
 html body.wedding-site .wedding-main #anfrage .wedding-request-heading{
   flex-direction:column!important;
   align-items:flex-start!important;
   margin-bottom:24px!important;
 }
 html body.wedding-site .wedding-main #anfrage .wedding-request-heading>p{
   font-size:14px!important;
   max-width:100%!important;
 }
 html body.wedding-site .wedding-main #anfrage .wedding-form-backdrop{
   height:clamp(275px,82vw,420px)!important;
 }
}
@media(max-width:430px){
 html body.wedding-site .wedding-main #details .wedding-details-grid{
   display:grid!important;
   grid-template-columns:minmax(0,1fr)!important;
   grid-template-areas:
    "jewel" "candy" "prep" "promise" "rings" "welcome" "decor" "gesture"!important;
 }
 html body.wedding-site .wedding-main #anfrage .wedding-form-panel{
   padding:24px 18px!important;
 }
}
@media(prefers-reduced-motion:reduce){
 html body.wedding-site .wedding-main #anfrage .wedding-form-backdrop .wedding-request-photo{
   transition:none!important;
 }
}


/* 07 / Bring back the existing subtle image zoom without moving the image
   or enquiry header. The black fade remains attached to the photograph.
   Touch uses the existing wedding-tap-zoom JS and original tap keyframes. */
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
 html body.wedding-site .wedding-main #anfrage .wedding-form-layout:hover .wedding-form-backdrop .wedding-request-photo{
   transform:scale(1.025)!important;
 }
}
@media(hover:none), (pointer:coarse){
 html body.wedding-site .wedding-main #anfrage .wedding-form-layout.wedding-tap-zoom .wedding-form-backdrop .wedding-request-photo{
   animation:iqma-wedding-photo-tap 1s ease both!important;
 }
}
@media(prefers-reduced-motion:reduce){
 html body.wedding-site .wedding-main #anfrage .wedding-form-backdrop .wedding-request-photo{
   transform:none!important;
   animation:none!important;
   transition:none!important;
 }
}


/* User-approved 2026-10-28: Section 06 only — gapless editorial masonry.
   Natural portrait and landscape aspect ratios in independent columns eliminate
   the big row gaps without cropping. All original footage, text and controls stay. */
html body.wedding-site .wedding-main #details .wedding-details-grid {
  display:grid!important;
  columns:auto!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  grid-template-areas:none!important;
  grid-template-rows:auto!important;
  grid-auto-flow:row!important;
  align-items:start!important;
  gap:clamp(10px,1.5vw,22px)!important;
}
html body.wedding-site .wedding-main #details .wedding-details-grid>.wedding-details-column {
  display:flex;
  min-width:0;
  width:100%;
  flex-direction:column;
  align-items:stretch;
  gap:clamp(10px,1.5vw,22px);
}
html body.wedding-site .wedding-main #details .wedding-details-column>figure {
  position:relative;
  display:block!important;
  width:100%!important;
  min-width:0!important;
  max-width:none!important;
  margin:0!important;
  padding:0!important;
  top:auto!important;
  align-self:auto!important;
  break-inside:avoid!important;
}
html body.wedding-site .wedding-main #details .wedding-details-column>.wedding-photo img {
  display:block!important;
  width:100%!important;
  height:auto!important;
  max-height:none!important;
  object-fit:contain!important;
  object-position:center!important;
}
html body.wedding-site .wedding-main #details .wedding-details-column>.wedding-clip .wedding-clip-stage {
  display:block;
  width:100%!important;
  height:auto!important;
  aspect-ratio:16/9!important;
}
html body.wedding-site .wedding-main #details .wedding-details-column>.wedding-clip video {
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
}
/* Phones up to 700px: compact two-column waterfall; tablets retain the centered ring film in three columns. */
@media(max-width:700px){
  html body.wedding-site .wedding-main #details .wedding-details-grid{
    display:block!important;
    columns:2!important;
    column-count:2!important;
    column-gap:clamp(10px,2vw,18px)!important;
    column-fill:balance!important;
  }
  html body.wedding-site .wedding-main #details .wedding-details-grid>.wedding-details-column{
    display:contents!important;
  }
  html body.wedding-site .wedding-main #details .wedding-details-column>figure{
    display:block!important;
    break-inside:avoid!important;
    -webkit-column-break-inside:avoid!important;
    page-break-inside:avoid!important;
    margin:0 0 clamp(12px,2.3vw,20px)!important;
  }
}
/* Very narrow screens: one column preserves usable video tap targets. */
@media(max-width:350px){
  html body.wedding-site .wedding-main #details .wedding-details-grid{
    columns:1!important;
    column-count:1!important;
  }
}