/* ============================================================
   07 · Medien & Galerien
   ============================================================ */

/* Karussell */
.m-karussell{position:relative;width:100%;padding:34px 0 46px}
.m-spur{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;padding:10px calc(50% - 150px);cursor:grab}
.m-spur::-webkit-scrollbar{display:none}
.m-spur.zieht{scroll-snap-type:none;scroll-behavior:auto;cursor:grabbing}
.m-folie{position:relative;flex:0 0 300px;margin:0;aspect-ratio:4/3;border-radius:20px;overflow:hidden;scroll-snap-align:center;user-select:none;
  transform:scale(var(--s,.88));opacity:var(--o,.55);transition:transform .35s var(--sanft),opacity .35s}
.m-folie img{width:100%;height:100%;object-fit:cover;pointer-events:none}
.m-folie figcaption{position:absolute;left:14px;bottom:12px;color:#fff;font-weight:600;text-shadow:0 2px 10px rgba(0,0,0,.5)}
.m-pfeil{position:absolute;top:calc(50% - 26px);z-index:2;width:44px;height:44px;border:0;border-radius:50%;font-size:17px;
  background:var(--glas);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:inset 0 0 0 1px var(--linie-2);transition:transform .3s var(--feder)}
.m-pfeil:hover{transform:scale(1.1)}
.m-links{left:18px}.m-rechts{right:18px}
.m-punkte{position:absolute;left:0;right:0;bottom:16px;display:flex;justify-content:center;gap:6px}
.m-punkte i{width:7px;height:7px;border-radius:7px;background:var(--linie-3);transition:width .35s var(--sanft),background .3s}
.m-punkte i.aktiv{width:22px;background:var(--akzent)}

/* Vergleich */
.m-vergleich{--pos:50%;position:relative;width:100%;height:100%;min-height:300px;overflow:hidden;user-select:none}
.m-vergleich img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.m-vorher{filter:grayscale(1) contrast(1.15) brightness(.9)}
.m-nachher{clip-path:inset(0 0 0 var(--pos))}
.m-griff{position:absolute;top:0;bottom:0;left:var(--pos);width:3px;margin-left:-1.5px;background:#fff;box-shadow:0 0 20px rgba(0,0,0,.4);pointer-events:none}
.m-griff i{position:absolute;top:50%;left:50%;display:grid;place-items:center;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;font-style:normal;
  background:#fff;color:#111;box-shadow:0 8px 24px rgba(0,0,0,.35)}
.m-vergleich input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize}
.m-tag{position:absolute;top:14px;padding:5px 10px;border-radius:8px;font:600 11px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:#fff;background:rgba(0,0,0,.4);pointer-events:none}
.m-tag-l{left:14px}.m-tag-r{right:14px}

/* Lupe */
.m-lupe{position:relative;width:100%;height:100%;min-height:300px;overflow:hidden}
.m-lupe img{width:100%;height:100%;object-fit:cover}
.m-glas{position:absolute;left:0;top:0;width:150px;height:150px;border-radius:50%;pointer-events:none;background-repeat:no-repeat;
  box-shadow:0 0 0 3px #fff,0 0 0 4px rgba(0,0,0,.2),0 20px 40px rgba(0,0,0,.45);opacity:0;transform:scale(.6);transition:opacity .2s,transform .3s var(--feder)}
.m-lupe:hover .m-glas{opacity:1;transform:scale(1)}

/* Masonry & Lightbox */
.m-masonry{width:100%;columns:4 200px;column-gap:12px}
.m-bild{display:block;width:100%;margin:0 0 12px;padding:0;border:0;border-radius:16px;overflow:hidden;break-inside:avoid;background:none;cursor:zoom-in}
.m-bild img{width:100%;height:auto;transition:transform .5s var(--sanft),filter .4s}
.m-bild:hover img{transform:scale(1.05);filter:brightness(1.1)}
.m-lightbox{position:fixed;inset:0;z-index:9400;display:grid;place-items:center;padding:5vh 5vw;background:rgba(4,4,10,.85);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);cursor:zoom-out}
.m-lightbox img{max-width:min(1100px,90vw);max-height:80vh;border-radius:18px;box-shadow:0 40px 100px -30px rgba(0,0,0,.8)}
.m-lightbox p{margin:14px 0 0;text-align:center;color:#fff;font-size:14px}
.m-lb-zu{position:absolute;top:20px;right:20px;width:44px;height:44px;border:0;border-radius:50%;font-size:20px;color:#fff;background:rgba(255,255,255,.12)}
::view-transition-group(lb-bild){animation-duration:.5s;animation-timing-function:cubic-bezier(.2,.7,.1,1)}

/* 3D-Ring */
.m-ring-buehne{width:100%;height:280px;display:grid;place-items:center;perspective:1100px;touch-action:pan-y;cursor:grab}
.m-ring{position:relative;width:120px;height:160px;transform-style:preserve-3d;transform:translateZ(-210px) rotateX(-8deg) rotateY(var(--w,0deg))}
.m-ring-karte{position:absolute;inset:0;border-radius:16px;overflow:hidden;backface-visibility:visible;box-shadow:0 0 0 1px rgba(255,255,255,.12);
  transform:rotateY(calc(var(--i) * 45deg)) translateZ(210px)}
.m-ring-karte img{width:100%;height:100%;object-fit:cover;pointer-events:none}

/* 3D-Wand */
.m-wand{position:relative;width:100%;height:100%;min-height:300px;overflow:hidden}
.m-wand-ebene{position:absolute;left:50%;top:50%;display:flex;gap:14px;transform:translate(-50%,-50%) rotateX(52deg) rotateZ(-38deg) scale(1.15)}
.m-wand-spalte{display:flex;flex-direction:column;gap:14px;animation:wand 16s linear infinite}
.m-wand-spalte:nth-child(even){animation-direction:reverse;animation-duration:20s}
.m-wand-spalte img{width:130px;aspect-ratio:4/3;border-radius:12px;object-fit:cover;box-shadow:0 10px 30px -10px rgba(0,0,0,.8)}
@keyframes wand{to{transform:translateY(-50%)}}
.m-wand::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(70% 70% at 50% 50%,transparent 40%,#07070c)}

/* Bildspur */
.m-spurflaeche{position:relative;display:grid;place-items:center;width:100%;height:100%;min-height:300px;overflow:hidden;
  background-image:radial-gradient(var(--linie-2) 1px,transparent 1.5px);background-size:22px 22px}
.m-spurflaeche p{margin:0;font-size:14px;color:var(--text-3);pointer-events:none}
.m-spurbild{position:absolute;width:120px;aspect-ratio:3/4;border-radius:12px;object-fit:cover;pointer-events:none;box-shadow:0 14px 30px -10px rgba(0,0,0,.6);
  animation:spurbild 1s var(--sanft) forwards}
@keyframes spurbild{0%{transform:translate(-50%,-50%) scale(.4) rotate(var(--r));opacity:0}15%{transform:translate(-50%,-50%) scale(1) rotate(var(--r));opacity:1}70%{opacity:1}100%{transform:translate(-50%,-30%) scale(.7) rotate(var(--r));opacity:0}}

/* Geräte */
.m-geraete{position:relative;width:100%;max-width:400px;height:250px}
.m-browser{position:absolute;left:0;top:10px;width:84%;border-radius:12px;overflow:hidden;background:var(--bg-3);box-shadow:inset 0 0 0 1px var(--linie-2),0 30px 60px -30px rgba(0,0,0,.7)}
.m-browser-leiste{display:flex;align-items:center;gap:6px;padding:9px 12px;border-bottom:1px solid var(--linie)}
.m-browser-leiste i{width:10px;height:10px;border-radius:50%;background:#ff5f57}
.m-browser-leiste i:nth-child(2){background:#febc2e}.m-browser-leiste i:nth-child(3){background:#28c840}
.m-browser-leiste span{flex:1;margin-left:10px;padding:3px 10px;border-radius:6px;font:500 10px var(--mono);color:var(--text-3);background:var(--linie);text-align:center}
.m-browser-inhalt{aspect-ratio:16/9}
.m-browser-inhalt img{width:100%;height:100%;object-fit:cover}
.m-iphone{position:absolute;right:0;bottom:-6px;width:108px;aspect-ratio:9/19.5;padding:5px;border-radius:24px;background:#1a1a20;box-shadow:0 0 0 2px #3a3a44,0 30px 50px -15px rgba(0,0,0,.8)}
.m-iphone img{width:100%;height:100%;border-radius:19px;object-fit:cover}
.m-iphone-insel{position:absolute;left:50%;top:11px;z-index:2;width:34px;height:10px;margin-left:-17px;border-radius:10px;background:#000}

/* Ken Burns */
.m-ken{position:relative;width:100%;height:100%;min-height:300px;overflow:hidden;background:#000}
.m-ken img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.6s ease}
.m-ken img.aktiv{opacity:1;animation:kenburns 7s ease-out forwards}
.m-ken img:nth-child(even).aktiv{animation-name:kenburns2}
@keyframes kenburns{from{transform:scale(1) translate(0,0)}to{transform:scale(1.22) translate(-3%,-2%)}}
@keyframes kenburns2{from{transform:scale(1.22) translate(3%,2%)}to{transform:scale(1) translate(0,0)}}
.m-ken-punkte{position:absolute;left:0;right:0;bottom:14px;display:flex;justify-content:center;gap:6px;z-index:2}
.m-ken-punkte i{width:26px;height:3px;border-radius:3px;background:rgba(255,255,255,.35);overflow:hidden}
.m-ken-punkte i.aktiv::after{content:"";display:block;height:100%;background:#fff;animation:ken-zeit 5s linear forwards}
@keyframes ken-zeit{from{width:0}to{width:100%}}

/* Pixel */
.m-pixel{position:relative;width:100%;height:100%;min-height:300px}
.m-pixel canvas{position:absolute;inset:0;width:100%;height:100%}

/* Bild-Parallax */
.m-px-reihe{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;width:100%}
.m-pxbild{position:relative;margin:0;height:300px;border-radius:20px;overflow:hidden}
.m-pxbild img{position:absolute;left:0;top:-20%;width:100%;height:140%;object-fit:cover;transform:translateY(var(--py,0%));will-change:transform}
@media (max-width:700px){.m-px-reihe{grid-template-columns:1fr}.m-pxbild{height:220px}}