/* =====================================================================
   Startseite – "Der Moment davor" (kellermanns.de, Okt. 2026)
   Das Zitat als Kontaktbogen: grosse Schrift, "Pose" wird mit goldenem
   Fettstift durchgestrichen, darunter ein Filmstreifen mit sieben echten
   Bildern eines Hochzeitstags in Dresden. Das gestellte Bild bekommt ein
   Kreuz, der echte Moment einen Kreis ("der hier.").
   Desktop: der Streifen faehrt beim Scrollen durch eine Lupe, die Maus
   kann die Lupe ueber den Streifen fuehren.
   Handy: Streifen zum Wischen, Markierungen zeichnen sich beim Ansehen.
   Bewegung reduzieren / ohne Skript: alles steht fertig markiert da.
   ===================================================================== */

.md{position:relative; overflow:hidden;
  background:
    radial-gradient(ellipse 60% 55% at 18% 18%, rgba(255,187,3,.055), transparent 70%),
    linear-gradient(180deg, transparent, rgba(255,187,3,.025) 60%, transparent);}
.md::before{content:""; position:absolute; left:clamp(1.2rem,4vw,3.5rem); right:clamp(1.2rem,4vw,3.5rem); top:0;
  height:1px; background:linear-gradient(90deg, var(--hairline), transparent 70%);}

/* ---------- Zitat ---------- */
.md-kopf{display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:1rem 3rem;}
.md-zitat{max-width:none; font-size:clamp(1.9rem,4vw,3.4rem);}
.md-z2{margin-top:.08em;}
.md-pose{position:relative; display:inline-block; white-space:nowrap;}
.md-strich{display:block; position:absolute; left:-6%; width:112%; top:42%; height:.42em; overflow:visible; pointer-events:none;}
.md-strich path{fill:none; stroke:var(--gold); stroke-width:4.2; stroke-linecap:round;
  stroke-dasharray:1 1.2; stroke-dashoffset:0; filter:drop-shadow(0 0 6px rgba(255,187,3,.35));}
.md-cite{margin:0 0 .55rem; padding-left:3.2rem; position:relative; white-space:nowrap;}
.md-cite::before{content:""; position:absolute; left:0; top:50%; width:2.4rem; height:1px; background:var(--bronze);}

/* ---------- Filmstreifen ---------- */
.md-band{position:relative; margin-top:clamp(2.2rem,4.5vw,3.4rem);}
.md-film{position:relative; margin-top:0; padding:30px 0 34px;
  background:#17130E;
  border-top:1px solid rgba(255,187,3,.10); border-bottom:1px solid rgba(255,187,3,.10);
  scrollbar-width:thin; scrollbar-color:rgba(255,187,3,.35) transparent;
  -webkit-overflow-scrolling:touch; scroll-snap-type:x proximity;}
/* Perforation oben und unten */
.md-film::before, .md-film::after{content:""; position:absolute; left:0; right:0; height:9px; pointer-events:none;
  background:repeating-linear-gradient(90deg, transparent 0 9px, rgba(243,239,230,.13) 9px 21px, transparent 21px 30px); border-radius:2px;}
.md-film::before{top:10px;} .md-film::after{bottom:10px;}
.md-film:focus-visible{outline:2px solid var(--gold); outline-offset:-2px;}
.md-rand{display:flex; justify-content:space-around; position:absolute; left:0; right:0; bottom:20px;
  font-family:'Inter',sans-serif; font-size:.56rem; letter-spacing:.32em; color:rgba(200,154,46,.55); pointer-events:none; white-space:nowrap;}
.md-streifen{position:relative; gap:14px; width:max-content;}
.md-bild{position:relative; scroll-snap-align:center;}
.md-bild figure{position:relative; border-radius:2px; box-shadow:0 0 0 1px rgba(0,0,0,.6);}
.md-bild img{border-radius:2px; filter:saturate(.92) contrast(1.02); transition:filter .5s ease;}
.md-nr{display:block; position:absolute; left:4px; top:-24px; font-family:'Inter',sans-serif; font-size:.62rem; letter-spacing:.12em;
  color:rgba(200,154,46,.7); font-variant-numeric:tabular-nums;}
.md-nr i{font-style:normal; margin:0 .45em; opacity:.8;}

/* Fettstift: Kreuz + Kreis + Notiz */
.md-kreuz, .md-kreis{display:block; position:absolute; overflow:visible; pointer-events:none;}
.md-kreuz{top:6%; left:8%; width:84%; height:88%;}
.md-kreis{top:-8%; left:-5%; width:110%; height:116%;}
.md-kreuz path, .md-kreis path{fill:none; stroke:var(--gold); stroke-linecap:round; stroke-width:1.5;
  stroke-dasharray:1 1.2; stroke-dashoffset:0; filter:drop-shadow(0 0 5px rgba(0,0,0,.6));}
.md-notiz{display:block; position:absolute; font-family:'Fraunces',serif; font-style:italic; font-weight:500; color:var(--gold);
  font-size:clamp(1.15rem,1.8vw,1.55rem); line-height:1; white-space:nowrap; pointer-events:none;
  text-shadow:0 2px 10px rgba(0,0,0,.85), 0 0 2px rgba(0,0,0,.9);}
.md-pose-bild .md-notiz{left:6%; bottom:8%; transform:rotate(-5deg);}
.md-treffer .md-notiz{right:-2%; top:-16%; transform:rotate(-7deg); z-index:2;}
.md-pose-bild img{filter:saturate(.55) brightness(.78);}

.md-unter{display:flex; flex-wrap:wrap; gap:.3rem 1.2rem; justify-content:space-between; font-size:.86rem;}

/* ---------- Mit Skript: Zustand vor den Animationen ---------- */
.md.md-js .md-z1, .md.md-js .md-z2, .md.md-js .md-cite{opacity:0; transform:translateY(18px);
  transition:opacity .9s ease, transform 1.1s cubic-bezier(.16,.8,.24,1);}
.md.md-js .md-z2{transition-delay:.05s;}
.md.md-js.md-a1 .md-z1, .md.md-js.md-a2 .md-z2, .md.md-js.md-a2 .md-cite{opacity:1; transform:none;}
.md.md-js .md-strich path{stroke-dashoffset:1.05; transition:stroke-dashoffset .75s cubic-bezier(.6,.1,.2,1);}
.md.md-js.md-strich-an .md-strich path{stroke-dashoffset:0;}
.md.md-js .md-kreuz path, .md.md-js .md-kreis path{stroke-dashoffset:1.05;}
.md.md-js .md-kreuz path{transition:stroke-dashoffset .45s cubic-bezier(.6,.1,.2,1);}
.md.md-js .md-kreuz path + path{transition-delay:.35s;}
.md.md-js .md-kreis path{transition:stroke-dashoffset 1s cubic-bezier(.6,.1,.2,1);}
.md.md-js .md-notiz{opacity:0; transition:opacity .5s ease;}
.md.md-js.md-x-an .md-kreuz path{stroke-dashoffset:0;}
.md.md-js.md-x-an .md-pose-bild .md-notiz{opacity:1; transition-delay:.7s;}
.md.md-js.md-o-an .md-kreis path{stroke-dashoffset:0;}
.md.md-js.md-o-an .md-treffer .md-notiz{opacity:1; transition-delay:.85s;}
.md.md-js .md-pose-bild img{filter:saturate(.92) contrast(1.02); }
.md.md-js.md-x-an .md-pose-bild img{filter:saturate(.55) brightness(.78);}
.md.md-js.md-o-an .md-treffer img{filter:saturate(1.08) contrast(1.04);}

/* ---------- Desktop: Fahrt durch die Lupe ---------- */
.md.md-fahrt .md-film{overflow:hidden;}
.md.md-fahrt .md-streifen{transform:translate3d(var(--md-x,0px),0,0); will-change:transform;}
.md.md-fahrt .md-tipp{display:inline;}
.md-lupe{position:absolute; z-index:4; pointer-events:none;
  width:var(--md-l,230px); height:var(--md-l,230px);
  left:0; top:0; transform:translate3d(var(--md-lx,0px), var(--md-ly,0px), 0);
  border-radius:50%; overflow:hidden; background:#17130E;
  box-shadow:0 0 0 2px var(--gold), 0 0 0 7px rgba(14,13,12,.85), 0 0 0 8px rgba(255,187,3,.35), 0 18px 50px rgba(0,0,0,.65);
  opacity:0; transition:opacity .5s ease;}
.md.md-fahrt .md-lupe{display:block;}
.md.md-fahrt.md-lupe-an .md-lupe{opacity:1;}
.md-lupe::after{content:""; position:absolute; inset:0; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle at 32% 26%, rgba(255,255,255,.16), transparent 34%),
             radial-gradient(circle, transparent 62%, rgba(0,0,0,.45) 100%);}
.md-lupe-innen{position:absolute; left:0; top:0;}
.md-lupe-innen .md-streifen{position:absolute; left:0; top:0; transform-origin:0 0;}
.md-lupe-innen .md-notiz, .md-lupe-innen .md-nr{display:none;}

/* ---------- Handy ---------- */
@media (max-width:760px){
  .md-kopf{display:block;}
  .md-cite{margin-top:1.1rem;}
  .md-bild{flex-basis:72vw;}
  .md-rand{display:none;}
  .md-treffer .md-notiz{right:2%; top:-12%;}
}

/* ---------- Bewegung reduzieren ---------- */
@media (prefers-reduced-motion: reduce){
  .md .md-z1, .md .md-z2, .md .md-cite{opacity:1 !important; transform:none !important; transition:none !important;}
  .md .md-strich path, .md .md-kreuz path, .md .md-kreis path{stroke-dashoffset:0 !important; transition:none !important;}
  .md .md-notiz{opacity:1 !important; transition:none !important;}
  .md .md-lupe{display:none !important;}
}