/* ═══════════════════════════════════════════════════════════════
   redesign-neu.css — NUR für das Muster index-neu.html.
   Liegt ÜBER redesign.css; die echte Seite lädt diese Datei nicht.
   Farben/Fonts: bestehende Tokens (Weinrot #7A000C, Anthrazit
   #1D1F2A, Papier #F9F6F1, Wash #F2EDE5, Linie #E7E7E4).
   ═══════════════════════════════════════════════════════════════ */

*,*::before,*::after{box-sizing:border-box;}
h1,h2,h3{letter-spacing:-.015em;}

/* ── Bewegungs-Grundlagen ─────────────────────────────────────── */
@keyframes nb-kenburns{0%{transform:scale(1.04)}50%{transform:scale(1.12) translate3d(-1.6%,-1.2%,0)}100%{transform:scale(1.04)}}
@keyframes nb-reveal{from{clip-path:inset(100% 0 0 0);transform:translateY(26px)}to{clip-path:inset(0 0 0 0);transform:none}}
@keyframes nb-rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes nb-pulse{0%,100%{transform:scaleX(1);opacity:.95}50%{transform:scaleX(.42);opacity:.5}}

/* Scroll-Reveals: ohne JS voll sichtbar; .nbjs blendet weich ein */
.nbjs .nbr{opacity:0;transform:translateY(22px);transition:opacity .9s var(--ease),transform .9s var(--ease);}
.nbjs .nbr.nbin{opacity:1;transform:none;}
.nbjs .nb-mask{clip-path:inset(12% 0 12% 0);transition:clip-path 1.1s var(--ease);}
.nbjs .nb-mask.nbin{clip-path:inset(0 0 0 0);}
[data-nbp]{will-change:transform;}

/* ── Header ───────────────────────────────────────────────────── */
.nav{padding:18px 44px;background:var(--paper);border-bottom:1px solid var(--ink);box-shadow:none;}
.nav.sc{padding:11px 44px;border-bottom:1px solid var(--ink);box-shadow:none;}
.nlinks a{font-size:.76rem;font-weight:500;letter-spacing:.13em;text-transform:uppercase;}
.ncta,.nlinks a.ncta{padding:14px 24px;letter-spacing:.13em;}
.hd-search input{border:1px solid var(--line);background:var(--card);border-radius:0;font-size:.82rem;padding:11px 14px;}
.hd-search input:focus{border-color:var(--wine);outline:none;}
.hd-icons a{transition:color .25s,transform .3s var(--ease);}
.hd-icons a:hover{color:var(--wine);transform:translateY(-2px);}

.nbrand-logo-neu{height:52px;width:auto;filter:none;}
/* ── Buttons / Links ─────────────────────────────────────────── */
.btn{border-radius:0;letter-spacing:.12em;font-size:.74rem;padding:17px 28px;min-height:52px;white-space:nowrap;
  transition:background .28s,color .28s,border-color .28s,transform .32s var(--ease);}
.btn:hover{transform:translateY(-3px);}
.btn:focus-visible{outline:2px solid var(--wine);outline-offset:3px;}
.btn-sm{padding:13px 24px;min-height:46px;font-size:.7rem;}
.btn-stage-primary{background:var(--wine);color:#fff;border:1px solid var(--wine);}
.btn-stage-primary:hover{background:var(--wine-deep);border-color:var(--wine-deep);color:#fff;}
.nb-quietlink{align-self:center;font-family:var(--font-sans);font-size:.82rem;font-weight:500;letter-spacing:.04em;color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line);padding:4px 2px;transition:color .25s,border-color .25s;}
.nb-quietlink:hover{color:var(--wine);border-color:var(--wine);}
.nb-wrap{max-width:1200px;margin:0 auto;padding:0 32px;}
.eyebrow{color:var(--wine);letter-spacing:.2em;}

/* ── 1 · HERO-Collage ────────────────────────────────────────── */
.nb-hero{background:var(--paper);padding:120px 0 0;overflow:hidden;}
.nb-hero-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(32px,4vw,72px);max-width:1520px;margin:0 auto;padding:40px 44px 0;align-items:center;}
.nb-clip{overflow:hidden;}
.nb-hero-txt .hero-tag{margin-bottom:22px;display:block;}
.nb-hero h1{font-family:var(--font-serif);font-weight:400;font-size:clamp(4.2rem,9.6vw,8.8rem);line-height:.86;letter-spacing:-.025em;color:var(--ink);margin:0;}
.nb-sub{font-family:var(--font-serif);font-style:italic;font-size:clamp(1.3rem,1.9vw,1.8rem);line-height:1.3;color:var(--wine);margin:18px 0 0;max-width:26ch;}
.nb-hero .stage-rule{width:130px;height:2px;background:var(--wine);margin:28px 0 0;transform-origin:left;animation:nb-pulse 5s ease-in-out infinite;}
.nb-lead{font-size:1.03rem;line-height:1.8;color:var(--muted-deep);max-width:54ch;margin:26px 0 30px;text-wrap:pretty;}
.nb-hero-ctas{display:flex;flex-wrap:wrap;gap:18px;align-items:center;margin-bottom:34px;}
/* Einstiegs-Choreografie */
.nb-h-1{animation:nb-rise .8s .05s var(--ease) both;}
.nb-h-2{animation:nb-reveal 1.15s .12s var(--ease) both;}
.nb-h-3{animation:nb-reveal 1.05s .3s var(--ease) both;}
.nb-h-4{animation:nb-pulse 5s ease-in-out infinite,nb-rise .8s .45s var(--ease) both;}
.nb-h-5{animation:nb-rise .9s .5s var(--ease) both;}
.nb-h-6{animation:nb-rise .9s .6s var(--ease) both;}
.nb-h-7{animation:nb-rise .9s .72s var(--ease) both;}
/* Proof-Zeile ohne Kästen */
.stage-stats{display:flex;flex-wrap:wrap;margin:0;padding:22px 0 40px;border-top:1px solid var(--line);border-bottom:0;}
.stage-stats>div{display:flex;align-items:baseline;gap:10px;padding:0 26px;border-left:1px solid var(--line);}
.stage-stats>div:first-child{padding-left:0;border-left:0;}
.stage-stats .ss-num{font-family:var(--font-serif);font-weight:400;font-size:1.9rem;line-height:1;color:var(--ink);}
.stage-stats .ss-lbl{font-family:var(--font-sans);font-size:.62rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--muted-deep);}
/* Bildbühne rechts */
.nb-hero-stage{position:relative;min-height:640px;}
.nb-hero-main{position:absolute;top:0;right:0;width:78%;height:100%;overflow:hidden;background:var(--wash);}
.nb-hero-main img{width:100%;height:100%;object-fit:cover;object-position:center 12%;display:block;animation:nb-kenburns 26s ease-in-out infinite;}
.nb-hero-sm{position:absolute;overflow:hidden;background:var(--wash);box-shadow:0 18px 50px rgba(29,31,42,.18);}
.nb-hero-sm img{width:100%;height:100%;object-fit:cover;display:block;}
.nb-hero-sm1{left:0;top:9%;width:38%;aspect-ratio:3/2;}
.nb-hero-sm2{left:6%;bottom:6%;width:34%;aspect-ratio:3/2;}

/* ── 2 · Parallax-Band ───────────────────────────────────────── */
.nb-band{position:relative;height:74vh;min-height:460px;overflow:hidden;background:var(--ink);}
.nb-band-img{position:absolute;inset:-12% 0;}
.nb-band-img img{width:100%;height:100%;object-fit:cover;object-position:center 40%;display:block;opacity:.82;}
.nb-band::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(29,31,42,.35),rgba(29,31,42,.55));}
.nb-band-txt{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 24px;}
.nb-band-kicker{font-family:var(--font-sans);font-size:.68rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:rgba(249,246,241,.85);}
.nb-band-line{font-family:var(--font-serif);font-weight:400;font-size:clamp(1.9rem,4.6vw,3.8rem);line-height:1.12;color:var(--paper);max-width:22ch;margin:16px 0 0;}

/* ── 3 · Sticky Über-mich ────────────────────────────────────── */
.nb-about{background:var(--paper);padding:var(--sec-pad-s) 0;}
.nb-about-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(36px,5vw,80px);max-width:1300px;margin:0 auto;padding:0 32px;align-items:start;}
.nb-about-sticky{position:sticky;top:110px;}
.nb-about-img{overflow:hidden;aspect-ratio:4/5;background:var(--wash);}
.nb-about-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.3s var(--ease);}
.nb-about-img:hover img{transform:scale(1.05);}
.nb-about-flow h2{font-size:clamp(2rem,3.6vw,3rem);line-height:1.06;margin:14px 0 8px;}
.nb-point{padding:32px 0;border-bottom:1px solid var(--line);}
.nb-point:last-child{border-bottom:0;}
.nb-no{font-family:var(--font-sans);font-size:.66rem;font-weight:600;letter-spacing:.2em;color:var(--wine);}
.nb-point h3{font-family:var(--font-serif);font-weight:400;font-size:1.6rem;margin:12px 0 10px;color:var(--ink);}
.nb-point p{font-size:.98rem;line-height:1.8;color:var(--muted-deep);margin:0;max-width:56ch;}

/* ── 4 · Mix-Collage ─────────────────────────────────────────── */
.nb-mix{background:var(--wash);padding:var(--sec-pad-s) 0 calc(var(--sec-pad-s) + 30px);overflow:hidden;}
.nb-mix-head{max-width:760px;margin-bottom:52px;}
.nb-mix-head h2{font-size:clamp(2.1rem,3.8vw,3.2rem);line-height:1.04;margin:14px 0 0;}
.nb-mix-collage{display:grid;grid-template-columns:repeat(12,1fr);gap:20px;max-width:1300px;margin:0 auto;padding:0 32px;align-items:start;}
.nb-mc{margin:0;overflow:hidden;background:var(--card);}
.nb-mc img{width:100%;height:auto;display:block;transition:transform 1.25s var(--ease);}
.nb-mc:hover img{transform:scale(1.05);}
.nb-mc figcaption{font-family:var(--font-sans);font-size:.66rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted-deep);padding:12px 2px 0;background:transparent;}
.nb-mc1{grid-column:1/span 5;margin-top:70px;}
.nb-mc2{grid-column:6/span 3;}
.nb-mc3{grid-column:9/span 4;margin-top:110px;}
.nb-mc4{grid-column:3/span 4;margin-top:26px;}

/* ── 5 · Story-Rail (horizontal) ─────────────────────────────── */
.nb-stories{background:var(--paper);padding:var(--sec-pad-s) 0;}
.nb-stories-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:40px;}
.nb-stories-head h2{font-size:clamp(2rem,3.6vw,3rem);margin:12px 0 0;}
.nb-rail{display:flex;gap:26px;overflow-x:auto;padding:6px max(32px,calc((100vw - 1200px)/2 + 32px)) 26px;scroll-snap-type:x mandatory;scrollbar-width:thin;scrollbar-color:var(--wine) var(--line);}
.nb-rail:focus-visible{outline:2px solid var(--wine);outline-offset:4px;}
.nb-story{flex:0 0 auto;width:min(340px,78vw);display:flex;flex-direction:column;gap:13px;text-decoration:none;border-bottom:0;scroll-snap-align:start;}
.nb-story-img{display:block;overflow:hidden;aspect-ratio:3/2;background:var(--wash);}
.nb-story-img.nb-tall{aspect-ratio:4/5;}
.nb-story-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.2s var(--ease);}
.nb-story:hover .nb-story-img img{transform:scale(1.06);}
.nb-story-meta{font-family:var(--font-sans);font-size:.64rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--wine);}
.nb-story-title{font-family:var(--font-serif);font-weight:400;font-size:1.3rem;line-height:1.35;color:var(--ink);transition:color .25s;}
.nb-story:hover .nb-story-title{color:var(--wine);}

/* ── 6 · Multikulturell ──────────────────────────────────────── */
.nb-multi{background:var(--paper);padding:var(--sec-pad-s) 0;overflow:hidden;border-top:1px solid var(--line);}
.nb-multi-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,5vw,80px);max-width:1300px;margin:0 auto;padding:0 32px;align-items:center;}
.nb-multi-imgs{position:relative;min-height:560px;}
.nb-multi-img{position:absolute;top:0;left:0;width:76%;aspect-ratio:4/5;overflow:hidden;background:var(--wash);}
.nb-multi-img img{width:100%;height:100%;object-fit:cover;display:block;}
.nb-multi-img2{position:absolute;right:0;bottom:0;width:46%;aspect-ratio:3/2;overflow:hidden;background:var(--wash);box-shadow:0 18px 50px rgba(29,31,42,.18);}
.nb-multi-img2 img{width:100%;height:100%;object-fit:cover;display:block;}
.nb-multi-txt h2{font-size:clamp(2.2rem,3.8vw,3.4rem);line-height:1.02;margin:14px 0 22px;}
.nb-multi-txt p{font-size:1.02rem;line-height:1.85;color:var(--muted-deep);max-width:var(--measure);margin:0 0 18px;}
.nb-multi-txt p strong{color:var(--ink);}

/* ── Bewertungen (bestehende Klassen, nur Feinschliff) ───────── */
.rev-sec{background:var(--wash);}
.rev-q{font-family:var(--font-serif);font-style:italic;font-weight:300;font-size:clamp(1.5rem,2.8vw,2.3rem);line-height:1.4;max-width:52ch;margin:0 auto;color:var(--ink);}
.rev-attr{letter-spacing:.16em;text-transform:uppercase;font-size:.68rem;margin-top:24px;}
.rev-dot{border-radius:0;width:9px;height:9px;background:var(--line);border:0;transition:background .25s;}
.rev-dot.on{background:var(--wine);}
.stars,.cta-stars{color:#d9ba90;letter-spacing:.3em;}

/* ── Facts ───────────────────────────────────────────────────── */
.facts{background:var(--paper);border-top:1px solid var(--line);}
.facts .frow{padding:20px 8px;transition:background .3s;}
.facts .frow:hover{background:rgba(122,0,12,.04);}

/* ── Wer ist DJ SAM? (persönlich) ────────────────────────────── */
.nb-who{background:var(--wash);padding:var(--sec-pad-s) 0;overflow:hidden;border-top:1px solid var(--line);}
.nb-who-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(36px,5vw,84px);max-width:1300px;margin:0 auto;padding:0 32px;align-items:center;}
/* Bilder VOLLSTÄNDIG zeigen: keine Beschnitte, kein object-fit */
.nb-who-imgs{display:grid;grid-template-columns:1.25fr 1fr;gap:18px;align-items:start;}
.nb-who-f{margin:0;overflow:hidden;background:var(--card);}
.nb-who-f img{width:100%;height:auto;display:block;transition:transform 1.3s var(--ease);}
.nb-who-f:hover img{transform:scale(1.03);}
.nb-who-f1{grid-row:1/span 2;}
.nb-who-f2{margin-top:34px;}
.nb-who-f3{}
.nb-who-txt h2{font-size:clamp(2.2rem,3.8vw,3.4rem);line-height:1.02;margin:14px 0 22px;}
.nb-who-txt p{font-size:1.03rem;line-height:1.85;color:var(--muted-deep);max-width:var(--measure);margin:0 0 18px;}
.nb-who-txt p a{color:var(--ink);border-bottom:1px solid var(--br2);text-decoration:none;transition:color .25s,border-color .25s;}
.nb-who-txt p a:hover{color:var(--wine);border-color:var(--wine);}
.nb-who-proof{display:flex;flex-direction:column;gap:12px;margin-top:30px;padding-top:24px;border-top:1px solid var(--line);}
.nb-who-proof span{font-family:var(--font-sans);font-size:.68rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted-deep);}
.nb-who-proof span::before{content:"";display:inline-block;width:18px;height:1px;background:var(--wine);vertical-align:middle;margin-right:12px;}
.nbjs .nb-who-proof span:nth-child(1){transition-delay:.05s;}
.nbjs .nb-who-proof span:nth-child(2){transition-delay:.18s;}
.nbjs .nb-who-proof span:nth-child(3){transition-delay:.31s;}
.nbjs .nb-who-txt p:nth-of-type(2){transition-delay:.1s;}
.nbjs .nb-who-txt p:nth-of-type(3){transition-delay:.2s;}

/* ── 8b · Einsatzgebiet ──────────────────────────────────────── */
.nb-areas{background:var(--paper);padding:var(--sec-pad-s) 0;border-top:1px solid var(--line);}
.nb-areas h2{font-size:clamp(1.9rem,3.2vw,2.7rem);margin:14px 0 16px;max-width:26ch;}
.nb-areas-p{font-size:1rem;line-height:1.8;color:var(--muted-deep);max-width:64ch;margin:0 0 28px;}
.nb-areas-links{display:flex;flex-wrap:wrap;gap:10px;}
.nb-areas-links a{font-family:var(--font-sans);font-size:.8rem;font-weight:500;letter-spacing:.02em;color:var(--ink);background:var(--card);border:1px solid var(--line);padding:12px 18px;text-decoration:none;transition:background .25s,color .25s,border-color .25s,transform .3s var(--ease);}
.nb-areas-links a:hover{background:var(--wine);border-color:var(--wine);color:#fff;transform:translateY(-2px);}
.nb-areas-links a:focus-visible{outline:2px solid var(--wine);outline-offset:3px;}

/* ── 9 · Finale + Persönlich ─────────────────────────────────── */
.nb-finale{position:relative;background:var(--ink);overflow:hidden;}
.nb-finale-txt{display:flex;align-items:center;justify-content:center;text-align:center;padding:clamp(64px,11vh,132px) 24px;}
.nb-finale-line{font-family:var(--font-serif);font-weight:400;font-size:clamp(2rem,5vw,4.2rem);line-height:1.12;color:var(--paper);margin:0;}
.nb-finale-img{position:relative;height:52vh;min-height:360px;overflow:hidden;}
.nb-finale-img img{position:absolute;left:0;top:-12%;width:100%;height:124%;object-fit:cover;object-position:center 58%;display:block;}
.nb-personal{background:var(--ink);}
.nb-personal-grid{display:grid;grid-template-columns:1.2fr 1fr;align-items:stretch;max-width:1680px;margin:0 auto;}
.nb-personal-txt{padding:clamp(60px,7vw,110px) clamp(32px,5vw,80px);display:flex;flex-direction:column;justify-content:center;}
.nb-personal-txt .eyebrow{color:rgba(249,246,241,.7);}
.nb-personal-txt h2{color:var(--paper);font-size:clamp(2.2rem,4vw,3.6rem);line-height:1.04;margin:16px 0 24px;}
.nb-personal-txt p{color:var(--night-tx);font-size:1.04rem;line-height:1.85;max-width:58ch;margin:0 0 16px;}
.nb-personal-grid{align-items:center;}
.nb-personal-img{overflow:hidden;background:var(--ink);padding:clamp(24px,4vw,56px);}
.nb-personal-img img{width:100%;height:auto;display:block;}

/* ── Formular ────────────────────────────────────────────────── */
.form-sec h2{font-size:clamp(2.2rem,4.2vw,3.4rem);}
.form-card{border-radius:0;border:1px solid var(--line);}
.form-grid label{font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink);}
.form-grid input,.form-grid select,.form-grid textarea{border-radius:0;border:1px solid var(--line);background:var(--paper);min-height:48px;padding:14px 16px;font-size:1rem;transition:border-color .25s,background .25s;}
.form-grid input:focus,.form-grid select:focus,.form-grid textarea:focus{border-color:var(--wine);background:var(--card);outline:none;}
.form-grid .helper{font-size:.74rem;line-height:1.55;}
.form-grid .cons input[type=checkbox]{accent-color:var(--wine);width:18px;height:18px;}
.btn-grn{background:var(--ink);border-color:var(--ink);color:#fff;min-height:56px;}
.btn-grn:hover{background:var(--wine);border-color:var(--wine);color:#fff;}
.prc>div{border-left:2px solid var(--wine);padding-left:20px;}
.prc .pn{color:var(--wine);letter-spacing:.18em;}

/* ── Interne Links / Footer ──────────────────────────────────── */
.intlinks{background:var(--wash);}
.intlinks a{border-radius:0;letter-spacing:.04em;transition:background .25s,color .25s,border-color .25s,transform .3s var(--ease);}
.intlinks a:hover{background:var(--wine);border-color:var(--wine);color:#fff;transform:translateY(-2px);}
.ft-soc a{border-radius:0;width:48px;height:48px;transition:background .28s,border-color .28s,color .28s,transform .3s var(--ease);}
.ft-soc a:hover{background:var(--wine);border-color:var(--wine);color:#fff;transform:translateY(-3px);}
.ft-badges img{border-radius:0;transition:opacity .3s,transform .3s var(--ease);}
.ft-badges a:hover img{opacity:1;transform:translateY(-3px);}

/* ── Responsiv ───────────────────────────────────────────────── */
@media (max-width:1100px){
  .nb-mc1{grid-column:1/span 6;margin-top:40px;}
  .nb-mc2{grid-column:7/span 6;}
  .nb-mc3{grid-column:2/span 5;margin-top:24px;}
  .nb-mc4{grid-column:7/span 5;margin-top:80px;}
}
@media (max-width:900px){
  .nb-hero{padding-top:96px;}
  .nb-hero-grid{grid-template-columns:1fr;padding:24px 24px 0;}
  .nb-hero-stage{min-height:0;height:auto;display:grid;grid-template-columns:2fr 1fr;gap:14px;margin-top:8px;}
  .nb-hero-main{position:static;width:auto;aspect-ratio:3/4;}
  .nb-hero-sm{position:static;width:auto;box-shadow:none;}
  .nb-hero-sm1{aspect-ratio:3/4;}
  .nb-hero-sm2{display:none;}
  .nb-band{height:56vh;}
  .nb-about-grid{grid-template-columns:1fr;}
  .nb-about-sticky{position:static;}
  .nb-about-img{aspect-ratio:3/2;}
  .nb-mix-collage{grid-template-columns:1fr 1fr;gap:14px;padding:0 24px;}
  .nb-mc1,.nb-mc2,.nb-mc3,.nb-mc4{grid-column:auto;margin-top:0;}
  .nb-multi-grid{grid-template-columns:1fr;}
  .nb-multi-imgs{min-height:0;display:block;}
  .nb-multi-img{position:static;width:auto;aspect-ratio:3/2;box-shadow:none;}
  .nb-multi-img2{display:none;}
  .nb-who-grid{grid-template-columns:1fr;}
  .nb-who-f2{margin-top:0;}
  .nb-personal-grid{grid-template-columns:1fr;}
  .nb-personal-img{max-height:60vh;}
  .nb-rail{padding-left:24px;padding-right:24px;}
}
@media (max-width:600px){
  .nb-hero h1{font-size:clamp(3.4rem,17vw,4.6rem);}
  .stage-stats>div{padding:0 14px;}
  .nb-mix-collage{grid-template-columns:1fr;}
}

/* ── Reduzierte Bewegung: alles sichtbar, nichts bewegt ──────── */
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;}
  .nbjs .nbr,.nbjs .nb-mask{opacity:1;transform:none;clip-path:none;}
  [data-nbp]{transform:none!important;}
}


/* ═══ MOBILE KINO (≤740px) ═══════════════════════════════════ */
@media (max-width:740px){
  /* 1 · Hero: bildschirmfüllend, Foto als Bühne, Text darüber */
  .nb-hero{padding:0;position:relative;min-height:100svh;display:flex;align-items:flex-end;}
  .nb-hero-grid{display:block;padding:0;width:100%;}
  .nb-hero-stage{position:absolute;inset:0;display:block;margin:0;height:auto;min-height:0;}
  .nb-hero-main{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;}
  .nb-hero-main img{object-fit:cover;object-position:50% 14%;animation:nb-kenburns 30s ease-in-out infinite;}
  .nb-hero-stage::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(29,31,42,.42) 0%,rgba(29,31,42,.05) 32%,rgba(29,31,42,.22) 58%,rgba(29,31,42,.88) 100%);}
  .nb-hero-sm1,.nb-hero-sm2{display:none;}
  .nb-hero-txt{position:relative;z-index:2;padding:0 22px calc(24px + env(safe-area-inset-bottom));}
  .nb-hero-txt .hero-tag{color:#F9F6F1;opacity:.85;}
  .nb-hero h1{color:#F9F6F1;font-size:clamp(4rem,20vw,5.6rem);}
  .nb-sub{color:#F9F6F1;opacity:.92;}
  .nb-lead{color:rgba(249,246,241,.88);max-width:none;margin:20px 0 24px;}
  .nb-hero .stage-rule{background:#F9F6F1;opacity:.85;}
  .nb-hero-ctas{gap:12px;margin-bottom:22px;}
  .nb-hero-ctas .btn{flex:1 1 100%;justify-content:center;text-align:center;}
  .nb-quietlink{color:#F9F6F1;border-color:rgba(249,246,241,.5);}
  .nb-quietlink:hover{color:#F9F6F1;border-color:#F9F6F1;}
  .stage-stats{border-top:1px solid rgba(249,246,241,.28);padding:16px 0 0;}
  .stage-stats .ss-num{color:#F9F6F1;font-size:1.4rem;}
  .stage-stats .ss-lbl{color:rgba(249,246,241,.75);}
  .stage-stats>div{border-color:rgba(249,246,241,.28);padding:0 16px;}

  /* 2 · Bänder: volle Höhe, filmisch */
  .nb-band{height:88svh;min-height:380px;}
  .nb-band-line{font-size:clamp(1.7rem,8vw,2.6rem);}
  .nb-finale{height:auto;min-height:0;}
  .nb-finale-txt{padding:clamp(48px,9vh,88px) 20px;}
  .nb-finale-line{font-size:clamp(1.9rem,9vw,3rem);}
  .nb-finale-img{height:42vh;min-height:260px;}
  .nb-finale-img img{top:-8%;bottom:-8%;left:0;right:0;width:auto;height:auto;object-fit:cover;object-position:center 58%;}

  /* 3 · Mixing-Collage → wischbare Bildfolge */
  .nb-mix-collage{display:flex;overflow-x:auto;gap:14px;padding:0 22px 18px;scroll-snap-type:x mandatory;scrollbar-width:none;}
  .nb-mix-collage::-webkit-scrollbar{display:none;}
  .nb-mc,.nb-mc1,.nb-mc2,.nb-mc3,.nb-mc4{flex:0 0 78vw;margin:0;scroll-snap-align:center;}
  .nb-mc img{width:100%;height:56vw;object-fit:cover;}
  .nb-mc2 img{object-position:center 20%;}

  /* 4 · Wer ist DJ SAM: volle Bilder, ruhige Folge */
  .nb-who-imgs{grid-template-columns:1fr 1fr;gap:12px;}
  .nb-who-f1{grid-column:1/-1;grid-row:auto;}
  .nb-who-f2{margin-top:0;}

  /* 5 · Stories: größere Karten, sauberes Snapping */
  .nb-rail{gap:16px;padding:6px 22px 22px;scroll-padding-left:22px;}
  .nb-story{width:82vw;}

  /* 6 · Personal: Bild vollständig, Text zuerst */
  .nb-personal-img{padding:0 22px 40px;}

  /* 7 · Touch-Komfort */
  .btn{min-height:52px;}
  .nb-areas-links a{padding:14px 18px;}
}

/* Mobile Navigation: filmisch einblenden */
.mob{transition:opacity .4s var(--ease),visibility .4s;}
.mob a{transition:opacity .5s var(--ease),transform .5s var(--ease);}
.mob:not(.op) a{opacity:0;transform:translateY(14px);}
.mob.op a{opacity:1;transform:none;}
.mob.op a:nth-child(2){transition-delay:.05s}
.mob.op a:nth-child(3){transition-delay:.1s}
.mob.op a:nth-child(4){transition-delay:.15s}
.mob.op a:nth-child(5){transition-delay:.2s}
.mob.op a:nth-child(6){transition-delay:.25s}
.mob.op a:nth-child(7){transition-delay:.3s}
.mob.op a:nth-child(8){transition-delay:.35s}
.mob.op a:nth-child(9){transition-delay:.4s}
.mob.op a:nth-child(10){transition-delay:.45s}

@media (prefers-reduced-motion:reduce){
  .mob:not(.op) a{opacity:1;transform:none;}
}


/* ═══ VERBINDLICHE BILDREGEL: Semih immer vollständig ═══════════ */
/* Personenbilder: nie beschneiden, nie zoomen, nie maskieren */
img.nb-person{object-fit:contain !important;object-position:center !important;background:var(--wash);}
.nb-hero-main img.nb-person,.nb-about-img img.nb-person{animation:none !important;}
.nb-who-f:hover img.nb-person,.nb-about-img:hover img.nb-person,.nb-story:hover img.nb-person,
.nb-mc:hover img.nb-person,.nb-who-main:hover img.nb-person{transform:none !important;}

/* Container folgen dem Bildformat (Hero-Portrait ist 2:3) */
.nb-hero-main{left:auto;right:0;width:auto;height:100%;aspect-ratio:2/3;background:var(--wash);}
.nb-about-img{aspect-ratio:4/5;background:var(--wash);}
/* Story-Karte mit Semih: volle Figur, Creme-Letterbox statt Beschnitt */
.nb-story-img img.nb-person{background:var(--wash);}
/* Multi-Zweitbild: echtes 3:2 beibehalten */
.nb-multi-img2{aspect-ratio:3/2;}

@media (max-width:740px){
  /* Hero mobil: volles Portrait (contain) auf unscharfer Bühne, Text darunter */
  .nb-hero{min-height:0;display:block;background:var(--ink);}
  .nb-hero-stage{position:relative;inset:auto;height:auto;}
  .nb-hero-stage::before{content:"";position:absolute;inset:0;background:url("images/djsam-hero-lederjacke-640.webp") center/cover no-repeat;filter:blur(22px) brightness(.55);transform:scale(1.15);}
  .nb-hero-stage::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(29,31,42,.25),rgba(29,31,42,.55));}
  .nb-hero-main{position:relative;inset:auto;width:100%;height:auto;aspect-ratio:2/3;max-height:78svh;margin:0 auto;z-index:1;background:transparent;}
  .nb-hero-main img{position:relative;z-index:1;width:100%;height:100%;object-fit:contain;animation:none;}
  .nb-hero-txt{position:relative;z-index:2;background:var(--ink);padding:26px 22px calc(28px + env(safe-area-inset-bottom));}
  .nb-mc img.nb-person{object-fit:contain;background:var(--wash);}
}
@media (max-width:900px) and (min-width:741px){
  .nb-hero-main{position:static;aspect-ratio:2/3;max-height:none;}
  .nb-hero-main img{object-fit:contain;animation:none;}
}


/* ═══ AUSNAHME (Wunsch): Hero-Startbild wie vorher — Mann in der Schrift ═══ */
.nb-hero-main{position:absolute;top:0;right:0;left:auto;width:78%;height:100%;aspect-ratio:auto;background:var(--wash);}
.nb-hero-main img.nb-person{object-fit:cover !important;object-position:center 12% !important;animation:nb-kenburns 26s ease-in-out infinite !important;}
@media (max-width:740px){
  .nb-hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;background:var(--paper);}
  .nb-hero-stage{position:absolute;inset:0;height:100%;}
  .nb-hero-stage::before{content:none;}
  .nb-hero-stage::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(29,31,42,.42) 0%,rgba(29,31,42,.05) 32%,rgba(29,31,42,.22) 58%,rgba(29,31,42,.88) 100%);}
  .nb-hero-main{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;max-height:none;}
  .nb-hero-main img.nb-person{object-fit:cover !important;object-position:50% 14% !important;animation:nb-kenburns 30s ease-in-out infinite !important;}
  .nb-hero-txt{background:transparent;padding:0 22px calc(24px + env(safe-area-inset-bottom));}
}
@media (max-width:900px) and (min-width:741px){
  .nb-hero-main{position:static;aspect-ratio:3/4;}
  .nb-hero-main img{object-fit:cover;animation:nb-kenburns 26s ease-in-out infinite;}
}
@media (prefers-reduced-motion:reduce){
  .nb-hero-main img.nb-person{animation:none !important;}
}


/* Hero-Nebenbild: GANZES Foto, Format folgt dem Bild */
.nb-hero-sm1{aspect-ratio:auto;top:7%;width:36%;}
.nb-hero-sm1 img{width:100%;height:auto;object-fit:contain;background:transparent;}
@media (max-width:740px){
  .nb-hero-sm1{display:none;}
}

/* H1-Zusatz nur für SEO/Screenreader – visuell versteckt, „DJ SAM" bleibt groß */
.nb-h1-more{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}

/* ── Hero mobil (Wunsch 29.07.): weißer Text lesbar + roter Button höher ── */
@media (max-width:740px){
  /* Foto MUSS den Hero füllen (sonst Creme-Ränder → weiße Schrift auf hell = unsichtbar) */
  .nb-hero-stage{position:absolute !important;inset:0 !important;height:100% !important;}
  .nb-hero-main{position:absolute !important;inset:0 !important;width:100% !important;height:100% !important;max-height:none !important;aspect-ratio:auto !important;margin:0 !important;}
  .nb-hero-main img,.nb-hero-main img.nb-person{width:100% !important;height:100% !important;object-fit:cover !important;object-position:50% 16% !important;background:transparent !important;}
  /* Scrim: oben ein klares Sicht-Fenster auf Semih, unten satt dunkel → weiße Schrift lesbar */
  .nb-hero-stage::after{background:linear-gradient(180deg,
    rgba(29,31,42,.48) 0%,
    rgba(29,31,42,.10) 22%,
    rgba(29,31,42,.62) 44%,
    rgba(29,31,42,.90) 66%,
    rgba(29,31,42,.97) 100%) !important;}
  /* Textblock vom unteren Rand abheben → roter Button direkt sichtbar, nicht abgeschnitten */
  .nb-hero-txt{padding-bottom:calc(60px + env(safe-area-inset-bottom)) !important;}
  .nb-lead{margin:16px 0 22px !important;}
  /* Schrift-Absicherung gegen helle Bildstellen */
  .nb-hero-txt .hero-tag,.nb-hero h1,.nb-sub,.nb-lead{
    text-shadow:0 2px 6px rgba(29,31,42,.85), 0 2px 22px rgba(29,31,42,.7);}
  .nb-lead{color:#F9F6F1 !important;}
  /* 72x/Dorsten-Zeile im Mobil-Hero entfernt (Semih 04.08.: "das soll weg") */
  .nb-hero .stage-stats{display:none !important;}
  /* "Echte Hochzeitsgeschichten": dunkler Schrift-Rand gegen helle Bildstellen (Semih) */
  .nb-hero-ctas .nb-quietlink{color:#F9F6F1 !important;border-bottom-color:rgba(249,246,241,.65) !important;
    text-shadow:0 0 4px rgba(29,31,42,.95), 0 2px 6px rgba(29,31,42,.9), 0 2px 18px rgba(29,31,42,.75);}
}


/* Quick-Links-Plus: unsichtbar bis man scrollt */
#ql-wrap{opacity:0;visibility:hidden;transform:translateY(14px);transition:opacity .45s var(--ease),transform .45s var(--ease),visibility .45s;}
#ql-wrap.nb-ql-on{opacity:1;visibility:visible;transform:none;}
@media (prefers-reduced-motion:reduce){
  #ql-wrap{transform:none;}
}


/* Burger: drei gleich dicke Streifen */
.burger{gap:5px;}
.burger span{width:22px !important;height:2px !important;border-radius:1px;background:var(--ink);}

/* Burger als fester Kreis — bleibt beim Scrollen IMMER erreichbar */
.burger.nb-fab{display:flex !important;position:fixed !important;top:12px !important;right:14px !important;
  left:auto !important;bottom:auto !important;transform:none !important;margin:0 !important;z-index:1200;
  width:52px;height:52px;border-radius:50%;background:var(--paper);border:1px solid var(--line);
  box-shadow:0 8px 24px rgba(29,31,42,.16);align-items:center;justify-content:center;opacity:1;transition:opacity .3s var(--ease);}
body:has(.mob.op) .burger.nb-fab{opacity:0;pointer-events:none;}
.burger.nb-fab.nb-fab-wait{opacity:0 !important;pointer-events:none !important;transform:translateY(-10px) !important;}
@media (min-width:1081px){.burger.nb-fab{display:none !important;}}

/* ── Hero-Loop-Intro (Semih 04.08.): mobil erster Anblick. Seit 04.08. NORMALER
   Block im Seitenfluss — die fruehere sticky-Wipe-Schichtung (z-index 1/2, Seite
   schiebt sich drueber) erzeugte auf echtem iOS Render-Artefakte (leere Bloecke
   beim Scrollen) und ist komplett entfernt. ── */
#samloop{display:none;}
@media (max-width:740px){
  #samloop{display:block;position:relative;height:100svh;min-height:520px;background:#050505;overflow:hidden;}
  @keyframes slHint{0%,100%{transform:translateY(0);opacity:.7}50%{transform:translateY(6px);opacity:1}}
}

/* ── Intro-Film „GIF" (Semih 04.08., Design c5bb7536): mobil STATT Parallax-Band ──
   REINE CSS-KEYFRAMES, NULL JavaScript: laeuft auf jedem iPhone garantiert an,
   loopt endlos (5s Film + 0.9s Standzeit = 5.9s Zyklus). Bewusst OHNE
   prefers-reduced-motion-Weiche: dezente Foto-Montage unterhalb des Folds. */
:root{--di-bg:#1C1815;--di-wine:#241419;--di-accent:#E97435;}
.djsam-intro{display:none;}
@media (max-width:740px){
  .nb-band{display:none !important;}
  .djsam-intro{display:block;position:relative;width:min(100%,56.25vh);margin:0 auto;
    height:177.78vw;max-height:100vh;background:var(--di-bg);overflow:hidden;container-type:inline-size;}
  @supports (aspect-ratio:9/16){.djsam-intro{height:auto;max-height:none;aspect-ratio:9/16;}}
  .di-stage{position:absolute;inset:0;will-change:transform;animation:diStage 5.9s linear infinite;}
  .di-bg{position:absolute;inset:0;background:radial-gradient(130% 95% at 50% 12%, var(--di-wine) 0%, var(--di-bg) 62%);}
  .di-bg-warm{position:absolute;inset:0;background:
    radial-gradient(58% 52% at 50% 47%, rgba(233,116,53,.10) 0%, rgba(233,116,53,0) 68%),
    radial-gradient(125% 105% at 50% 38%, var(--di-wine) 0%, var(--di-bg) 78%);
    animation:diWarm 5.9s linear infinite;}
  .di-frame{position:absolute;margin:0;overflow:hidden;background:var(--di-wine);box-shadow:0 22px 70px rgba(0,0,0,.45);will-change:transform,clip-path,opacity;}
  .di-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;will-change:transform;}
  .di-shade{position:absolute;inset:0;background:var(--di-bg);}
  .di-f1{inset:0;box-shadow:none;animation:diF1 5.9s linear infinite;} .di-f1 img{object-position:42% 40%;animation:diI1 5.9s linear infinite;}
  .di-f1 .di-shade{animation:diS1 5.9s linear infinite;}
  .di-f2{top:7%;right:5%;width:74%;height:42%;animation:diF2 5.9s linear infinite;} .di-f2 img{object-position:55% 32%;animation:diI2 5.9s linear infinite;}
  .di-f3{left:5%;bottom:8%;width:58%;height:30%;animation:diF3 5.9s linear infinite;} .di-f3 img{object-position:50% 38%;animation:diI3 5.9s linear infinite;}
  .di-f4{inset:0;box-shadow:none;animation:diF4 5.9s linear infinite;} .di-f4 img{object-position:45% 42%;animation:diI4 5.9s linear infinite;}
  .di-f4 .di-shade{animation:diS4 5.9s linear infinite;}
  .di-f5{top:6%;right:5%;width:66%;height:34%;animation:diF5 5.9s linear infinite;} .di-f5 img{object-position:36% 40%;animation:diI5 5.9s linear infinite;}
  .di-f6{inset:0;box-shadow:none;animation:diF6 5.9s linear infinite;} .di-f6 img{object-position:50% 40%;animation:diI6 5.9s linear infinite;}
  .di-f7{left:6%;top:26%;width:54%;height:46%;animation:diF7 5.9s linear infinite;} .di-f7 img{object-position:30% 42%;animation:diI7 5.9s linear infinite;}
  .di-accent{position:absolute;left:6%;top:74.5%;width:16%;height:2px;background:var(--di-accent);transform-origin:left center;animation:diAcc 5.9s linear infinite;}
  .di-vignette{position:absolute;inset:0;pointer-events:none;background:radial-gradient(118% 118% at 50% 44%, rgba(0,0,0,0) 60%, rgba(16,11,9,.45) 100%);}
  .di-scrim{position:absolute;inset:0;pointer-events:none;background:radial-gradient(70% 34% at 50% 50%, rgba(18,13,11,.62) 0%, rgba(18,13,11,.30) 52%, rgba(18,13,11,0) 74%);}
  .di-text{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:0 8%;animation:diText 5.9s linear infinite;}
  .di-text-inner{display:flex;flex-direction:column;align-items:center;gap:clamp(12px,4vw,22px);gap:clamp(12px,4cqw,22px);}
  .di-eyebrow{margin:0;font-family:"Inter",-apple-system,"Helvetica Neue",system-ui,sans-serif;font-weight:500;
    font-size:clamp(10px,3.2vw,14px);font-size:clamp(10px,3.2cqw,14px);letter-spacing:.3em;text-indent:.3em;color:rgba(235,229,223,.72);}
  .di-claim{margin:0;font-family:"Cormorant Garamond",Georgia,serif;font-weight:500;
    font-size:clamp(22px,8.6vw,46px);font-size:clamp(22px,8.6cqw,46px);line-height:1.22;letter-spacing:.005em;color:#F4EDE6;
    max-width:14ch;text-wrap:balance;}

  /* Timeline: 5900ms-Zyklus. Easings: OUT=cubic-bezier(.16,1,.3,1) IN=(.55,0,.72,.2)
     INOUT=(.72,0,.22,1) SOFT=(.33,1,.68,1) ZOOM=(.25,1,.5,1) */
  @keyframes diF1{
    0%{clip-path:inset(0 100% 0 0);-webkit-clip-path:inset(0 100% 0 0);transform:translateX(0) scale(1);opacity:1;animation-timing-function:cubic-bezier(.72,0,.22,1)}
    11.53%{clip-path:inset(0 0 0 0);-webkit-clip-path:inset(0 0 0 0)}
    11.86%{transform:translateX(0) scale(1);animation-timing-function:cubic-bezier(.33,1,.68,1)}
    27.12%{transform:translateX(-2.5%) scale(.988)}
    35.25%{opacity:1;animation-timing-function:linear}
    37.8%,100%{opacity:0;transform:translateX(-2.5%) scale(.988);clip-path:inset(0 0 0 0);-webkit-clip-path:inset(0 0 0 0)}}
  @keyframes diI1{0%{transform:scale(1.14);animation-timing-function:cubic-bezier(.25,1,.5,1)}32.2%,100%{transform:scale(1.05)}}
  @keyframes diS1{0%,11.86%{opacity:0;animation-timing-function:ease}25.42%,100%{opacity:.34}}
  @keyframes diStage{0%,11.86%{transform:scale(1);animation-timing-function:linear}64.41%{transform:scale(1.012);animation-timing-function:cubic-bezier(.16,1,.3,1)}76.27%,100%{transform:scale(1)}}
  @keyframes diF2{
    0%,11.86%{transform:translateX(26%);clip-path:inset(0 0 0 100%);-webkit-clip-path:inset(0 0 0 100%);animation-timing-function:cubic-bezier(.16,1,.3,1)}
    21.36%{transform:translateX(0);clip-path:inset(0 0 0 0);-webkit-clip-path:inset(0 0 0 0)}
    25.42%{transform:translateX(0);clip-path:inset(0 0 0 0);-webkit-clip-path:inset(0 0 0 0);animation-timing-function:cubic-bezier(.55,0,.72,.2)}
    32.54%,100%{transform:translateX(7%);clip-path:inset(0 0 0 100%);-webkit-clip-path:inset(0 0 0 100%)}}
  @keyframes diI2{0%,11.86%{transform:scale(1.10) translateX(3%);animation-timing-function:cubic-bezier(.25,1,.5,1)}33.9%,100%{transform:scale(1.04) translateX(0)}}
  @keyframes diF3{
    0%,16.95%{transform:translateY(26%) rotate(-1.2deg);clip-path:inset(100% 0 0 0);-webkit-clip-path:inset(100% 0 0 0);animation-timing-function:cubic-bezier(.16,1,.3,1)}
    25.76%{transform:translateY(0) rotate(-1.2deg);clip-path:inset(0 0 0 0);-webkit-clip-path:inset(0 0 0 0)}
    26.78%{transform:translateY(0) rotate(-1.2deg);clip-path:inset(0 0 0 0);-webkit-clip-path:inset(0 0 0 0);animation-timing-function:cubic-bezier(.55,0,.72,.2)}
    33.22%,100%{transform:translateY(9%) rotate(-1.2deg);clip-path:inset(100% 0 0 0);-webkit-clip-path:inset(100% 0 0 0)}}
  @keyframes diI3{0%,16.95%{transform:scale(1.12);animation-timing-function:cubic-bezier(.25,1,.5,1)}37.29%,100%{transform:scale(1.05)}}
  @keyframes diF4{
    0%,24.58%{clip-path:inset(0 100% 0 0);-webkit-clip-path:inset(0 100% 0 0);opacity:1;animation-timing-function:cubic-bezier(.72,0,.22,1)}
    35.08%{clip-path:inset(0 0 0 0);-webkit-clip-path:inset(0 0 0 0)}
    54.41%{opacity:1;animation-timing-function:linear}
    56.95%,100%{opacity:0;clip-path:inset(0 0 0 0);-webkit-clip-path:inset(0 0 0 0)}}
  @keyframes diI4{0%,24.58%{transform:scale(1.12) translateX(-2.5%);animation-timing-function:cubic-bezier(.25,1,.5,1)}50%,100%{transform:scale(1.03) translateX(0)}}
  @keyframes diS4{0%,34.75%{opacity:0;animation-timing-function:ease}44.92%,100%{opacity:.3}}
  @keyframes diF5{
    0%,34.24%{transform:translateY(-24%) rotate(1.1deg);clip-path:inset(0 0 100% 0);-webkit-clip-path:inset(0 0 100% 0);animation-timing-function:cubic-bezier(.16,1,.3,1)}
    42.71%{transform:translateY(0) rotate(1.1deg);clip-path:inset(0 0 0 0);-webkit-clip-path:inset(0 0 0 0)}
    44.07%{transform:translateY(0) rotate(1.1deg);clip-path:inset(0 0 0 0);-webkit-clip-path:inset(0 0 0 0);animation-timing-function:cubic-bezier(.55,0,.72,.2)}
    50.51%,100%{transform:translateY(-10%) rotate(1.1deg);clip-path:inset(0 0 100% 0);-webkit-clip-path:inset(0 0 100% 0)}}
  @keyframes diI5{0%,34.24%{transform:scale(1.12);animation-timing-function:cubic-bezier(.25,1,.5,1)}51.69%,100%{transform:scale(1.04)}}
  @keyframes diF6{
    0%,44.07%{clip-path:inset(100% 0 0 0);-webkit-clip-path:inset(100% 0 0 0);transform:scale(1);opacity:1;animation-timing-function:cubic-bezier(.72,0,.22,1)}
    54.24%{clip-path:inset(0 0 0 0);-webkit-clip-path:inset(0 0 0 0)}
    66.1%{clip-path:inset(0 0 0 0);-webkit-clip-path:inset(0 0 0 0);transform:scale(1);animation-timing-function:cubic-bezier(.72,0,.22,1)}
    72.71%{opacity:1;animation-timing-function:ease-out}
    74.92%{clip-path:inset(0 50% 0 50%);-webkit-clip-path:inset(0 50% 0 50%);transform:scale(.985)}
    75.08%,100%{opacity:0;clip-path:inset(0 50% 0 50%);-webkit-clip-path:inset(0 50% 0 50%);transform:scale(.985)}}
  @keyframes diI6{0%,44.07%{transform:scale(1.12) translateY(3%);animation-timing-function:cubic-bezier(.25,1,.5,1)}66.1%,100%{transform:scale(1.02) translateY(0)}}
  @keyframes diF7{
    0%,51.69%{transform:translateX(-26%) rotate(-1deg);clip-path:inset(0 100% 0 0);-webkit-clip-path:inset(0 100% 0 0);animation-timing-function:cubic-bezier(.16,1,.3,1)}
    60.85%{transform:translateX(0) rotate(-1deg);clip-path:inset(0 0 0 0);-webkit-clip-path:inset(0 0 0 0)}
    64.41%{transform:translateX(0) rotate(-1deg);clip-path:inset(0 0 0 0);-webkit-clip-path:inset(0 0 0 0);animation-timing-function:cubic-bezier(.55,0,.72,.2)}
    71.19%,100%{transform:translateX(-9%) rotate(-1deg);clip-path:inset(0 100% 0 0);-webkit-clip-path:inset(0 100% 0 0)}}
  @keyframes diI7{0%,51.69%{transform:scale(1.14);animation-timing-function:cubic-bezier(.25,1,.5,1)}71.19%,100%{transform:scale(1.06)}}
  @keyframes diAcc{
    0%,55.93%{transform:scaleX(0);animation-timing-function:cubic-bezier(.16,1,.3,1)}
    63.05%{transform:scaleX(1)}
    64.75%{transform:scaleX(1);animation-timing-function:cubic-bezier(.55,0,.72,.2)}
    69.83%,100%{transform:scaleX(0)}}
  @keyframes diText{0%{opacity:0;transform:scale(.975);animation-timing-function:cubic-bezier(.33,1,.68,1)}13.56%,100%{opacity:1;transform:scale(1)}}
  @keyframes diWarm{0%,72.03%{opacity:0;animation-timing-function:ease}83.05%,100%{opacity:1}}
}

/* Ausnahme: Die Intro-Montage laeuft auch bei "Bewegung reduzieren" (iOS-Einstellung).
   Zwei globale reduce-Regeln (redesign.css Z.610 Dauer .01ms; redesign-neu.css Z.268
   animation:none) wuergen sonst ALLE Animationen ab - genau deshalb sah Semih auf
   seinem iPhone nie die Animation. Volle Shorthands noetig, weil animation:none den
   Namen loescht. Dezente Montage unterm Fold -> bewusste Uebersteuerung. */
@media (max-width:740px) and (prefers-reduced-motion:reduce){
  .djsam-intro .di-stage{animation:diStage 5.9s linear infinite !important;}
  .djsam-intro .di-bg-warm{animation:diWarm 5.9s linear infinite !important;}
  .djsam-intro .di-text{animation:diText 5.9s linear infinite !important;}
  .djsam-intro .di-accent{animation:diAcc 5.9s linear infinite !important;}
  .djsam-intro .di-f1{animation:diF1 5.9s linear infinite !important;}
  .djsam-intro .di-f1 img{animation:diI1 5.9s linear infinite !important;}
  .djsam-intro .di-f1 .di-shade{animation:diS1 5.9s linear infinite !important;}
  .djsam-intro .di-f2{animation:diF2 5.9s linear infinite !important;}
  .djsam-intro .di-f2 img{animation:diI2 5.9s linear infinite !important;}
  .djsam-intro .di-f3{animation:diF3 5.9s linear infinite !important;}
  .djsam-intro .di-f3 img{animation:diI3 5.9s linear infinite !important;}
  .djsam-intro .di-f4{animation:diF4 5.9s linear infinite !important;}
  .djsam-intro .di-f4 img{animation:diI4 5.9s linear infinite !important;}
  .djsam-intro .di-f4 .di-shade{animation:diS4 5.9s linear infinite !important;}
  .djsam-intro .di-f5{animation:diF5 5.9s linear infinite !important;}
  .djsam-intro .di-f5 img{animation:diI5 5.9s linear infinite !important;}
  .djsam-intro .di-f6{animation:diF6 5.9s linear infinite !important;}
  .djsam-intro .di-f6 img{animation:diI6 5.9s linear infinite !important;}
  .djsam-intro .di-f7{animation:diF7 5.9s linear infinite !important;}
  .djsam-intro .di-f7 img{animation:diI7 5.9s linear infinite !important;}
}