/* ============================================================
   Marcus Stroph — Hochzeits-DJ · V5
   Mittelachse: eine vertikale Gold-&-Silber-Waveform als
   roter Faden des Abends. Design ringsum, hell & luftig.
   ============================================================ */

@font-face{font-family:'Fraunces';src:url('../fonts/fraunces.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:'Fraunces';src:url('../fonts/fraunces-italic.woff2') format('woff2');font-weight:100 900;font-style:italic;font-display:swap}
@font-face{font-family:'Inter';src:url('../fonts/inter.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap}

:root{
  --cream:#F8F4ED;--ivory:#FCFAF5;--sand:#EFE7DA;--blush:#F1E4DA;--sage:#DBE0D3;
  --ink:#2B2722;--ink-soft:#4A443C;--smoke:#8C8275;
  --gold:#C5A572;--gold-d:#A9854F;--silver:#AEB3BA;--silver-l:#D7DBE0;
  --champagne:#C5A572;--champagne-d:#A9854F;--paper:var(--cream);
  --maxw:1200px;--measure:62ch;--gutter:clamp(22px,5vw,60px);--pad-sec:clamp(96px,14vw,210px);
  --ease:cubic-bezier(.22,1,.36,1);
  --line:rgba(43,39,34,.10);--gold-line:rgba(197,165,114,.5);
  --shadow:0 40px 90px -50px rgba(43,39,34,.32);--shadow-sm:0 20px 50px -28px rgba(43,39,34,.28);--r:5px;
  /* (4) Einheitliches warmes Gold-Grading aller Fotos – bewusst zart, hier
     zentral feintunbar. Höher = wärmer/goldener (z.B. sepia .14). */
  --photo-grade:saturate(1.06) contrast(1.015) brightness(1.015) sepia(.10);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{background:var(--cream);color:var(--ink);font-family:'Inter',system-ui,sans-serif;font-size:18px;line-height:1.78;font-weight:400;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden;position:relative}
img,video,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
::selection{background:var(--gold);color:#fff}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:2px}

/* ---- Mittelachse (Signatur-Waveform) ---- */
.spine{position:fixed;inset-block-start:0;inset-inline-start:50%;transform:translateX(-50%);width:min(520px,70vw);height:100vh;z-index:0;pointer-events:none}
main,.footer{position:relative;z-index:1}
.header{z-index:90}

/* ---- Typo ---- */
h1,h2,h3,.display{font-family:'Fraunces',Georgia,serif;font-weight:330;line-height:1.07;letter-spacing:-.012em;color:var(--ink);font-optical-sizing:auto}
.eyebrow{font-family:'Inter';font-weight:600;font-size:.72rem;letter-spacing:.3em;text-transform:uppercase;color:var(--gold-d);display:inline-flex;align-items:center;gap:.85em}
.eyebrow::before{content:'';width:30px;height:1px;background:linear-gradient(90deg,var(--gold),var(--silver))}
.lead{color:var(--smoke);font-size:1.16rem;line-height:1.65;max-width:44ch}
em,.it{font-style:italic}

/* ---- Überschriften: Gold/Silber-Schimmer ---- */
/* Basis IMMER mit fester Farbe – damit Text auf iOS-Safari/WebKit nie unsichtbar
   bleibt (bekannter background-clip:text-Bug). Der Verlauf kommt nur dort, wo der
   Browser background-clip:text wirklich beherrscht. */
.shine{color:var(--ink);line-height:1.18;padding-bottom:.14em}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .shine{background-image:linear-gradient(100deg,var(--ink) 0%,var(--ink) 36%,var(--gold) 45%,var(--silver-l) 50%,var(--gold) 55%,var(--ink) 64%,var(--ink) 100%);
    background-size:280% 100%;background-position:135% 0;background-repeat:repeat;
    -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
    -webkit-transform:translateZ(0);transform:translateZ(0)}
}
.shine.lit{animation:shineSweep 1.5s var(--ease) forwards}
@keyframes shineSweep{to{background-position:-35% 0}}

/* ---- Layout ---- */
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.sec{padding-block:var(--pad-sec);position:relative;z-index:1}
.sec--ivory{background:rgba(252,250,245,.55)}
.sec--sand{background:rgba(239,231,218,.5)}
.sec--blush{background:radial-gradient(120% 90% at 80% 0%,rgba(241,228,218,.66),transparent 60%)}
.sec--sage{background:radial-gradient(120% 90% at 20% 10%,rgba(219,224,211,.66),transparent 62%)}
.sec-head{max-width:760px;margin-bottom:clamp(48px,7vw,88px)}
.sec-head.center{margin-inline:auto;text-align:center}
.sec-head.center .eyebrow{justify-content:center}
.sec-head h2{font-size:clamp(2.2rem,5.6vw,3.7rem);margin-top:22px}
.sec-head .lead{margin-top:24px}
.sec-head.center .lead{margin-inline:auto}
.hairline{height:1px;background:var(--line);border:0;max-width:var(--maxw);margin-inline:auto}

/* ---- Buttons ---- */
.btn{font-family:'Inter';font-weight:600;font-size:.95rem;display:inline-flex;align-items:center;gap:.6em;padding:1.05rem 1.9rem;border-radius:100px;border:1px solid transparent;cursor:pointer;transition:transform .45s var(--ease),background .3s,color .3s,border-color .3s,box-shadow .45s var(--ease)}
.btn--primary{background:var(--ink);color:var(--cream)}
.btn--primary:hover{transform:translateY(-2px);background:#1f1c18;box-shadow:var(--shadow-sm)}
.btn--gold{background:transparent;color:var(--gold-d);border-color:var(--gold)}
.btn--gold:hover{transform:translateY(-2px);background:var(--gold);color:#fff;box-shadow:0 14px 30px -16px rgba(197,165,114,.75)}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn--ghost:hover{transform:translateY(-2px);border-color:var(--ink)}
.btn--block{width:100%;justify-content:center}
.btn .ar{transition:transform .4s var(--ease)}
.btn:hover .ar{transform:translateX(4px)}
.ul{position:relative;display:inline-block}
.ul::after{content:'';position:absolute;left:0;bottom:-3px;height:1px;width:100%;background:linear-gradient(90deg,var(--gold),var(--silver));transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease)}
.ul:hover::after,.ul:focus-visible::after{transform:scaleX(1)}

/* ---- Header ---- */
.header{position:fixed;inset-block-start:0;inset-inline:0;transition:background .4s,border-color .4s,backdrop-filter .4s;border-block-end:1px solid transparent}
.header.scrolled{background:rgba(248,244,237,.84);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-block-end-color:var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;height:80px;color:var(--ink)}
.brand{font-family:'Fraunces';font-size:1.18rem;letter-spacing:.03em;display:flex;align-items:center;gap:.6em}
.brand .dot{width:6px;height:6px;border-radius:50%;background:linear-gradient(135deg,var(--gold),var(--silver))}
.nav-links{display:flex;align-items:center;gap:32px}
.nav-links a{font-size:.9rem;font-weight:500}
.nav-links .btn--gold{padding:.65rem 1.25rem}
.burger{display:none;background:none;border:0;width:30px;height:20px;position:relative;cursor:pointer}
.burger span{position:absolute;left:0;width:100%;height:1.5px;background:var(--ink);transition:.3s var(--ease)}
.burger span:nth-child(1){top:0}.burger span:nth-child(2){top:9px}.burger span:nth-child(3){top:18px}
.burger.open span:nth-child(1){top:9px;transform:rotate(45deg)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){top:9px;transform:rotate(-45deg)}
/* Header hell über dem dunklen Video-Hero (nur Startseite, solange ungescrollt) */
.home .header:not(.scrolled) .nav{color:#F8F4ED}
.home .header:not(.scrolled) .burger span{background:#F8F4ED}
.home .header:not(.scrolled) .nav-links .btn--gold{color:#F8F4ED;border-color:rgba(255,255,255,.5)}
.home .header:not(.scrolled) .nav-links .btn--gold:hover{background:var(--gold);border-color:var(--gold);color:#1a1610}

/* ---- HERO (Breitbild-Video) ---- */
.hero{position:relative;min-height:580px;height:clamp(580px,90vh,860px);display:flex;align-items:center;overflow:hidden;background:#0a0a0c}
.hero--video{align-items:flex-start;padding-block-start:80px}
.hero-bg{position:absolute;inset:0;z-index:0}
.hero-bg video{width:100%;height:100%;object-fit:cover;object-position:66% 38%}
.hero-scrim{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(102deg,rgba(8,8,11,.94) 0%,rgba(8,8,11,.8) 27%,rgba(8,8,11,.45) 50%,rgba(8,8,11,.08) 72%,rgba(8,8,11,0) 88%)}
.hero .wrap{position:relative;z-index:2}
.hero-copy{max-width:700px}
.hero .eyebrow{color:var(--gold)}
.hero h1{font-family:'Fraunces',Georgia,serif;font-size:clamp(2.6rem,6.4vw,5rem);font-weight:300;line-height:1.05;letter-spacing:-.012em;margin-top:22px;max-width:15ch}
.hero--video h1,.hero--video .shine{background:none;-webkit-background-clip:border-box;background-clip:border-box;color:#F8F4ED;-webkit-text-fill-color:#F8F4ED}
.hero--video h1 em{font-style:italic;color:var(--gold);-webkit-text-fill-color:var(--gold)}
.hero .sub{margin-top:26px;color:rgba(248,244,237,.85);font-size:1.18rem;max-width:42ch}
.hero-cta{margin-top:36px;display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.hero-trust{margin-top:32px;display:flex;flex-wrap:wrap;gap:9px 22px;font-size:.82rem;color:rgba(248,244,237,.72)}
.hero-trust span{display:inline-flex;align-items:center;gap:9px}
.hero-trust span::before{content:'';width:5px;height:5px;border-radius:50%;background:linear-gradient(135deg,var(--gold),var(--silver-l))}
.hero--video .btn--primary{background:var(--gold);color:#1a1610}
.hero--video .btn--primary:hover{background:#d4b783;box-shadow:0 18px 40px -18px rgba(197,165,114,.85)}
.hero--video .btn--ghost{color:#F8F4ED;border-color:rgba(255,255,255,.42)}
.hero--video .btn--ghost:hover{border-color:#fff;background:rgba(255,255,255,.07)}
.hero-signatur{position:absolute;z-index:2;inset-inline-end:clamp(18px,5vw,72px);inset-block-end:clamp(16px,3.4vw,40px);width:clamp(170px,24vw,290px);aspect-ratio:1408/768;background:var(--gold);
  -webkit-mask:url(../img/signatur.svg) right bottom/contain no-repeat;mask:url(../img/signatur.svg) right bottom/contain no-repeat;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.95)) drop-shadow(0 0 14px rgba(0,0,0,.8));pointer-events:none}
[data-hero]{will-change:transform,opacity}
.arch{position:relative;border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow);aspect-ratio:4/5;background:var(--sand)}
.arch::after{content:'';position:absolute;inset:0;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
.arch img{width:100%;height:100%;object-fit:cover;object-position:center 22%}
.arch--video{background:#0b0b0d}
.arch video{display:block;width:100%;height:100%;object-fit:cover;object-position:center}
.figcap{margin-top:10px;font-family:'Fraunces';font-style:italic;color:var(--smoke);font-size:.9rem;text-align:center}

/* ---- Handschrift-Signatur (dunkelgrau, statisch) ---- */
.signatur{
  width:clamp(280px,92%,420px);aspect-ratio:1408/768;margin:20px auto 0;
  background:#3a3a3a;
  -webkit-mask:url(../img/signatur.svg) center/contain no-repeat;
  mask:url(../img/signatur.svg) center/contain no-repeat;
}

/* ---- Trio ---- */
.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(28px,4vw,64px)}
.trio-item{padding-block-start:26px;border-block-start:1px solid var(--gold-line)}
.trio-ic{width:34px;height:34px;margin-bottom:20px}
.trio-ic svg{width:100%;height:100%;fill:none;stroke:var(--gold-d);stroke-width:1.3}
.trio-item h3{font-size:1.5rem;margin-bottom:10px}
.trio-item p{color:var(--smoke);font-size:.98rem}

/* ---- Andere Events ---- */
.events-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.6vw,40px)}
.event{padding-block-start:22px;border-block-start:1px solid var(--gold-line)}
.event h4{font-family:'Fraunces';font-weight:420;font-size:1.3rem;margin-bottom:8px}
.event p{color:var(--smoke);font-size:.95rem}
@media(max-width:900px){.events-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.events-grid{grid-template-columns:1fr}}

/* ---- USP ---- */
.usp{display:grid;grid-template-columns:1fr 1.08fr;gap:clamp(40px,6vw,96px);align-items:start}
.usp .big{font-family:'Fraunces';font-weight:320;font-size:clamp(1.8rem,3.6vw,2.7rem);line-height:1.22}
.usp .big em{color:var(--gold-d)}
.usp-body p{color:var(--smoke);margin-bottom:20px}
.usp-body p:last-child{margin-bottom:0}
.usp-sign{margin-top:30px;font-family:'Fraunces';font-style:italic;font-size:1.2rem;color:var(--ink)}

/* ---- Abend / Phasen (Achse läuft mittig hindurch) ---- */
.phases{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,2.6vw,34px);margin-top:8px}
.phase{position:relative;padding-block-start:32px;display:flex;flex-direction:column}
.phase .pdot{position:absolute;inset-block-start:-6px;inset-inline-start:0;width:11px;height:11px;border-radius:50%;background:var(--cream);border:1.5px solid var(--gold)}
.phase .pt{font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-d);margin-bottom:12px;min-height:2.7em;line-height:1.35;display:flex;align-items:flex-end}
.phase h3{font-size:clamp(1.4rem,2.6vw,1.9rem);margin-bottom:10px}
.phase p:not(.pt){color:var(--smoke);font-size:.96rem;flex:1 0 auto}
.phase .pimg{margin-top:20px;aspect-ratio:4/3;overflow:hidden;border-radius:var(--r);box-shadow:var(--shadow-sm)}
.phase .pimg img{width:100%;height:100%;object-fit:cover}

/* ---- Wunschmusik & Foto ---- */
.feature{display:grid;grid-template-columns:1.04fr .96fr;gap:clamp(40px,6vw,88px);align-items:center}
.soon{display:inline-flex;align-items:center;gap:9px;font-size:.7rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-d);background:rgba(197,165,114,.12);border:1px solid var(--gold-line);border-radius:100px;padding:7px 15px;margin-bottom:22px}
.soon::before{content:'';width:6px;height:6px;border-radius:50%;background:linear-gradient(135deg,var(--gold),var(--silver))}
.feature-steps{margin-top:30px;display:flex;flex-direction:column;gap:22px}
.fstep{display:flex;gap:20px;align-items:flex-start}
.fstep .n{flex:none;width:42px;height:42px;border-radius:50%;border:1px solid var(--gold);color:var(--gold-d);display:grid;place-items:center;font-family:'Fraunces';font-size:1.15rem}
.fstep h4{font-family:'Inter';font-weight:600;font-size:1.05rem;margin-bottom:3px}
.fstep p{color:var(--smoke);font-size:.96rem}
.mock{background:var(--ivory);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);overflow:hidden}
.mock-bar{display:flex;align-items:center;gap:7px;padding:14px 18px;border-block-end:1px solid var(--line)}
.mock-bar i{width:10px;height:10px;border-radius:50%;background:var(--sand)}
.mock-bar .url{margin-inline-start:12px;font-size:.72rem;color:var(--smoke);background:var(--cream);border-radius:100px;padding:5px 15px}
.mock-body{padding:28px}
.mock-body .mk{font-family:'Fraunces';font-size:1.4rem}
.qr{width:88px;height:88px;border-radius:10px;background:conic-gradient(from 0deg,var(--ink) 0 25%,transparent 0 50%,var(--ink) 0 75%,transparent 0);background-size:22px 22px;border:7px solid #fff;box-shadow:var(--shadow-sm);flex:none}
.song{display:flex;align-items:center;gap:13px;padding:12px 15px;border:1px solid var(--line);border-radius:9px;margin-bottom:11px;background:var(--cream)}
.song .play{width:28px;height:28px;border-radius:50%;background:var(--gold);flex:none;display:grid;place-items:center}
.song .play::after{content:'';border-left:7px solid #fff;border-top:4.5px solid transparent;border-bottom:4.5px solid transparent;margin-left:2px}
.song .meta b{display:block;font-weight:600;font-size:.9rem}
.song .meta span{font-size:.78rem;color:var(--smoke)}
.song .tag{margin-inline-start:auto;font-size:.66rem;text-transform:uppercase;letter-spacing:.06em;color:var(--gold-d);border:1px solid var(--gold-line);border-radius:100px;padding:2px 11px}

/* ---- Galerie ---- */
.gallery{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(12px,1.8vw,22px);grid-auto-rows:clamp(280px,31vw,440px)}
.g-item{position:relative;overflow:hidden;border-radius:var(--r);box-shadow:var(--shadow-sm)}
.g-item img,.g-item video{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)}
.g-item:hover img,.g-item:hover video{transform:scale(1.045)}
.g-item figcaption{position:absolute;inset-inline:0;inset-block-end:0;padding:24px 18px 15px;color:#fff;font-style:italic;font-size:.84rem;background:linear-gradient(0deg,rgba(30,24,18,.5),transparent)}
.g-a{grid-column:span 7}.g-b{grid-column:span 5}.g-c{grid-column:span 5}.g-d{grid-column:span 7}

/* ---- Pakete ---- */
.pakete{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.2vw,30px);align-items:stretch}
.paket{background:var(--ivory);border:1px solid var(--line);border-radius:8px;padding:clamp(30px,3.4vw,46px);display:flex;flex-direction:column;transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.paket:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.paket--feat{border-color:var(--gold);box-shadow:var(--shadow);position:relative}
.paket--feat::before{content:'Meistgebucht';position:absolute;inset-block-start:-13px;inset-inline-start:50%;transform:translateX(-50%);background:linear-gradient(135deg,var(--gold),var(--gold-d));color:#fff;font-weight:600;font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;padding:5px 16px;border-radius:100px;white-space:nowrap}
.paket .pname{font-family:'Fraunces';font-size:1.7rem;margin-bottom:7px}
.paket .ptag{color:var(--smoke);font-size:.92rem;min-height:2.8em}
.paket .pprice{font-family:'Fraunces';font-size:1.9rem;margin:20px 0 4px;color:var(--ink);line-height:1.15}
.paket .pprice small{display:block;font-family:'Inter';font-weight:400;font-size:.86rem;color:var(--smoke);margin-top:5px;letter-spacing:.01em}
.paket ul{list-style:none;margin:22px 0 28px;border-block-start:1px solid var(--line);padding-block-start:22px}
.paket li{display:flex;gap:12px;padding:8px 0;color:var(--ink-soft);font-size:.95rem}
.paket li::before{content:'';flex:none;width:16px;height:16px;margin-top:5px;border-radius:50%;border:1px solid var(--gold-d);background:radial-gradient(circle at center,var(--gold-d) 0 2.5px,transparent 3px)}
.paket .btn{margin-top:auto}
.pakete--two{grid-template-columns:repeat(2,1fr);max-width:940px;margin-inline:auto}
.pakete--two .paket--feat::before{content:'Immer enthalten'}
.paket li{flex-wrap:wrap}
.paket .ul--two{display:grid;grid-template-columns:1fr 1fr;gap:0 26px}
.paket .li-note{flex-basis:100%;padding-inline-start:28px;margin-top:3px;color:var(--smoke);font-size:.8rem;font-style:italic}
.pakete-note{text-align:center;color:var(--smoke);font-size:.92rem;margin-top:34px}
.addons-wrap{margin-top:clamp(46px,6vw,72px);text-align:center}
.addons-wrap .eyebrow{justify-content:center;margin-bottom:26px}
.addons{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;max-width:920px;margin-inline:auto}
.addon{font-family:'Inter';font-size:.82rem;font-weight:500;color:var(--ink-soft);background:var(--ivory);
  border:1px solid var(--line);border-radius:4px;padding:9px 14px;cursor:default;
  transition:border-color .3s,color .3s,background .3s,transform .35s var(--ease),box-shadow .35s var(--ease)}
.addon:hover{border-color:var(--gold);color:var(--gold-d);transform:translateY(-2px);box-shadow:var(--shadow-sm)}

/* ---- Stimmen ---- */
.stimmen{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(30px,4.5vw,66px);align-items:stretch}
.stimme{display:flex;flex-direction:column;height:100%}
.stimme blockquote{font-family:'Fraunces';font-style:italic;font-weight:330;font-size:clamp(1.35rem,2.5vw,1.85rem);line-height:1.42;color:var(--ink);flex:1 0 auto}
.stimme blockquote::before{content:'„';color:var(--gold-d)}
.stimme .who{margin-top:20px;color:var(--smoke);font-size:.9rem;display:flex;align-items:center;gap:12px}
.stimme .who::before{content:'';width:26px;height:1px;background:linear-gradient(90deg,var(--gold),var(--silver))}
.stimme .who b{color:var(--ink);font-weight:600}

/* ---- Über ---- */
.ueber{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(40px,6vw,90px);align-items:center}
.ueber-body h2{font-size:clamp(2rem,4.8vw,3rem)}
.ueber-body p{color:var(--smoke);margin:20px 0}
.ueber-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:18px 22px;margin-top:32px;padding-block-start:28px;border-block-start:1px solid var(--line)}
.ueber-stats .num{font-family:'Fraunces';font-size:clamp(1.7rem,3.2vw,2.5rem);color:var(--gold-d);line-height:1;white-space:nowrap}
.ueber-stats .lbl{font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;color:var(--smoke);margin-top:8px}
@media(max-width:560px){.ueber-stats{grid-template-columns:1fr 1fr;gap:26px 18px}}

/* ---- FAQ ---- */
.faq{max-width:860px;margin-inline:auto}
.faq details{border-block-end:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;padding:28px 50px 28px 0;position:relative;font-family:'Fraunces';font-weight:400;font-size:clamp(1.12rem,2.1vw,1.4rem)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';position:absolute;inset-inline-end:6px;inset-block-start:50%;transform:translateY(-50%);font-family:'Inter';font-weight:300;font-size:1.7rem;color:var(--gold-d);transition:transform .3s}
.faq details[open] summary::after{content:'–'}
.faq p.answer{color:var(--smoke);padding:0 50px 30px 0;margin-top:-6px}

/* ---- Verfügbarkeit ---- */
.check-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(40px,6vw,90px);align-items:start}
.check-aside h2{font-size:clamp(2.1rem,4.8vw,3.2rem)}
.check-aside .lead{margin:22px 0 26px}
.check-assure{list-style:none;margin-top:24px}
.check-assure li{display:flex;gap:13px;padding:8px 0;color:var(--ink-soft);font-size:.96rem}
.check-assure li::before{content:'';flex:none;width:18px;height:18px;margin-top:4px;border-radius:50%;border:1px solid var(--gold);background:radial-gradient(circle,var(--gold) 0 2.5px,transparent 3px)}
.form{background:var(--ivory);border:1px solid var(--line);border-radius:10px;padding:clamp(28px,3.6vw,44px);box-shadow:var(--shadow-sm)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.field{margin-bottom:18px}
.field label{display:block;font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;color:var(--smoke);margin-bottom:8px}
.field input,.field textarea{width:100%;font-family:'Inter';font-size:1rem;color:var(--ink);background:var(--cream);border:1px solid var(--line);border-radius:6px;padding:14px 16px;transition:border-color .3s,box-shadow .3s}
.field input::placeholder,.field textarea::placeholder{color:#b3aa9b}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(197,165,114,.16)}
.field textarea{resize:vertical;min-height:108px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form .legal{font-size:.78rem;color:var(--smoke);margin-top:10px}
.form .legal a{color:var(--gold-d)}
.form-status{display:none;margin-top:16px;padding:14px 16px;border-radius:6px;font-size:.92rem}
.form-status.ok{display:block;background:rgba(197,165,114,.14);border:1px solid var(--gold);color:var(--ink)}
.form-status.err{display:block;background:rgba(178,92,74,.12);border:1px solid #c08374;color:#7a4034}
.field.invalid input,.field.invalid textarea{border-color:#c08374}
.field .ferr{display:none;color:#b3604f;font-size:.78rem;margin-top:6px}
.field.invalid .ferr{display:block}

/* ---- Footer ---- */
.footer{background:var(--sand);color:var(--smoke);padding-block:clamp(64px,9vw,108px) 42px}
.footer-top{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:40px}
.footer .brand{color:var(--ink);font-size:1.4rem;margin-bottom:16px}
.footer .tag{max-width:32ch;font-size:.95rem;color:var(--smoke)}
.footer h4{font-family:'Inter';font-weight:600;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-d);margin-bottom:18px}
.footer a{color:var(--ink-soft)}
.footer .fcol p,.footer .fcol a{display:block;margin-bottom:10px;font-size:.95rem}
.footer-social{display:flex;gap:14px;margin-top:8px}
.footer-social img{width:22px;height:22px;opacity:.7;transition:opacity .3s}
.footer-social a:hover img{opacity:1}
.footer-bottom{margin-top:54px;padding-block-start:26px;border-block-start:1px solid var(--line);display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;font-size:.82rem}

/* ---- Sticky-CTA ---- */
.sticky-cta{position:fixed;z-index:80;opacity:0;visibility:hidden;transition:opacity .4s var(--ease),transform .4s var(--ease)}
.sticky-cta.show{opacity:1;visibility:visible}
@media(min-width:781px){.sticky-cta{inset-block-end:28px;inset-inline-end:28px;transform:translateY(12px)}.sticky-cta.show{transform:none}.sticky-cta .btn{box-shadow:var(--shadow-sm)}}
@media(max-width:780px){.sticky-cta{inset-block-end:0;inset-inline:0;transform:translateY(100%);background:var(--cream);padding:12px var(--gutter);border-block-start:1px solid var(--line)}.sticky-cta.show{transform:none}.sticky-cta .btn{width:100%;justify-content:center}}

/* ---- Platzhalter / Marker ---- */
.ph{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:13px;padding:26px;width:100%;height:100%;background:repeating-linear-gradient(135deg,transparent 0 16px,rgba(197,165,114,.06) 16px 17px),var(--blush);border:1.5px dashed var(--gold-line);border-radius:var(--r);color:var(--gold-d)}
.ph svg{width:36px;height:36px;stroke:currentColor;fill:none;stroke-width:1.3;opacity:.8}
.ph .pht{font-size:.9rem;line-height:1.45;color:#7a6f5e;max-width:30ch;font-weight:500}
.ph .phl{font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;border:1px solid currentColor;border-radius:100px;padding:3px 11px}
.bsp{font-family:'Inter';font-style:normal;font-size:.56em;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--gold-d);border:1px solid var(--gold-line);border-radius:100px;padding:.15em .6em;vertical-align:middle;margin-inline-start:.5em;white-space:nowrap;opacity:.75}

/* ---- Reveal ---- */
.js .reveal{opacity:0;transform:translateY(26px)}
.gsap-done .reveal{opacity:1;transform:none}

/* ---- Responsive ---- */
@media(max-width:920px){
  .usp,.feature,.ueber,.check-grid{grid-template-columns:1fr}
  .trio{grid-template-columns:1fr;gap:34px}
  .phases{grid-template-columns:1fr 1fr;gap:36px 24px}
  .pakete,.pakete--two{grid-template-columns:1fr;gap:32px}.paket--feat{order:-1}
  .paket .ul--two{grid-template-columns:1fr}
  .stimmen{grid-template-columns:1fr}
  .gallery{grid-auto-rows:auto}
  .gallery .g-a,.gallery .g-b,.gallery .g-c,.gallery .g-d{grid-column:span 12;aspect-ratio:16/10}
  .footer-top{grid-template-columns:1fr 1fr}.footer .fcol--brand{grid-column:1/-1}
  .spine{width:min(360px,82vw);opacity:.82}
}
@media(max-width:780px){
  body{font-size:17px}
  .nav-links{display:none;position:fixed;inset-block-start:80px;inset-inline:0;flex-direction:column;align-items:flex-start;gap:2px;background:var(--cream);color:var(--ink);padding:20px var(--gutter) 28px;border-block-end:1px solid var(--line);box-shadow:var(--shadow-sm)}
  /* Mobile-Menü liegt auf Creme – Text immer dunkel, auch über dem Hero */
  .home .header:not(.scrolled) .nav-links.open{color:var(--ink)}
  .home .header:not(.scrolled) .nav-links.open .btn--gold{color:var(--gold-d);border-color:var(--gold)}
  .nav-links.open{display:flex}
  .nav-links a{padding:11px 0;font-size:1.05rem;width:100%}
  .burger{display:block}
  .form-row{grid-template-columns:1fr}
  .footer-top{grid-template-columns:1fr}
  /* Hero mobil: Video als Banner oben (Signatur drauf), Text darunter – kein Überlappen */
  .hero{display:block;height:auto;min-height:0;align-items:stretch;background:#0a0a0c;padding-block-start:0;padding-block-end:clamp(46px,11vw,68px)}
  .hero-bg{position:relative;inset:auto;height:56vh;min-height:330px;overflow:hidden}
  .hero-bg video{object-position:72% 36%;transform:scale(1.12);transform-origin:72% 32%}
  .hero-scrim{display:none}
  .hero .wrap{position:relative;z-index:2;padding-block-start:clamp(30px,7vw,46px)}
  .hero-copy{max-width:none;margin-block-start:0}
  .hero h1{font-size:clamp(2rem,8vw,3rem);max-width:20ch;margin-top:18px}
  .hero .sub{font-size:1.05rem;margin-top:20px}
  .hero-cta{margin-top:28px}.hero-trust{margin-top:26px}
  .hero-signatur{inset-block-start:calc(52vh - clamp(66px,18vw,96px));inset-block-end:auto;inset-inline-end:clamp(14px,5vw,26px);width:clamp(140px,40vw,200px)}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .js .reveal{opacity:1!important;transform:none!important}
  [data-hero]{opacity:1!important;transform:none!important}
  .shine{background:none;-webkit-text-fill-color:var(--ink);color:var(--ink)}
}

/* ============================================================
   Cross-Browser- / iOS-WebKit-Hardening  (v5.1)
   Marcus' iPhone nutzt – wie jeder Browser auf iOS – die
   Safari/WebKit-Engine. Diese Regeln sichern die Darstellung
   auf allen Handys & Browsern ab.
   ============================================================ */

/* 1) Reveal-Sicherheitsnetz: Sollte das Script (z.B. durch Brave-Shields
      oder einen JS-Fehler) nicht laufen, bleibt Inhalt trotzdem sichtbar. */
.no-js .reveal,.no-js [data-hero]{opacity:1;transform:none}

/* 2) Handschrift-Signatur: Wird per CSS-Maske aus der Gold-Fläche
      „ausgestanzt". Kann ein Browser keine Masken, zeigen wir lieber
      gar nichts statt eines vollen Gold-Rechtecks. */
@supports not ((-webkit-mask-image:url("x")) or (mask-image:url("x"))){
  .hero-signatur,.signatur{display:none!important}
}

/* 3) Viewport-Höhe: iOS rechnet 100vh inkl. ein-/ausblendender Adressleiste,
      was zu Sprüngen führt. dvh nutzen, wo verfügbar. */
.spine{height:100vh;height:100dvh}

/* 4) Videos auf WebKit zuverlässig formatfüllend + ruckelfrei. */
.hero-bg video,.arch video,.g-item video{-webkit-transform:translateZ(0);transform:translateZ(0)}

/* 5) Tap-Highlight auf iOS entfernen (sonst graue Kästen bei Buttons/Links). */
a,button,summary,.btn{-webkit-tap-highlight-color:transparent}

/* 6) Formularfelder: iOS zoomt bei <16px in Inputs hinein -> 16px erzwingen,
      und das native iOS-Styling abschalten. */
.field input,.field textarea,.btn{-webkit-appearance:none;appearance:none}
@media(max-width:780px){
  .field input,.field textarea{font-size:16px}
}

/* 7) Kein horizontales Verschieben/Überlaufen (Mobil): Wurzel + Body hart
      abklemmen. overflow-x:clip vermeidet die iOS-Nebenwirkungen von hidden;
      hidden bleibt als Fallback für ältere Browser stehen. */
html{overflow-x:hidden;overflow-x:clip;max-width:100%}
body{overflow-x:hidden;overflow-x:clip;max-width:100%}

/* 8) Hero-Eyebrow: Font-Awesome-Kopfhörer statt Strich. Über align-items:center
      vertikal zentriert -> Desktop (1 Zeile) mittig auf der Zeile, Mobil (2 Zeilen)
      mittig zwischen beiden Zeilen. Icon erbt die Goldfarbe der Eyebrow. */
.hero .eyebrow{align-items:center}
.hero .eyebrow::before{display:none}
/* doppelt so groß + sanfter Pulse-Glow (per reduced-motion automatisch aus) */
.hero .eyebrow .fa-headphones{font-size:2.4em;line-height:1;color:var(--gold);
  animation:hpPulseGlow 2.4s var(--ease) infinite;will-change:transform,filter;transform-origin:center}
@keyframes hpPulseGlow{
  0%,100%{transform:scale(1);filter:drop-shadow(0 0 3px rgba(255,255,255,.45))}
  50%{transform:scale(1.09);filter:drop-shadow(0 0 13px rgba(255,255,255,.95))}
}

/* 9) Wortmarke: "DJ" in Gold statt des Punkts vor "Marcus Stroph". */
.brand .brand-dj{font-weight:600;color:var(--gold);letter-spacing:.04em}
.home .header:not(.scrolled) .brand .brand-dj{color:var(--gold)}

/* 10) Signatur: animierter weißer Glanz-Strich. Ein diagonaler Lichtstreifen
       läuft links->rechts, pausiert, läuft zurück – per Maske nur auf den
       Signatur-Linien sichtbar. */
.hero-signatur::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(115deg,transparent 42%,rgba(255,255,255,.92) 50%,transparent 58%);
  background-size:260% 100%;background-repeat:no-repeat;background-position:-30% 0;
  -webkit-mask:url(../img/signatur.svg) right bottom/contain no-repeat;
  mask:url(../img/signatur.svg) right bottom/contain no-repeat;
  animation:sigShine 6s ease-in-out infinite;
}
@keyframes sigShine{
  0%   {background-position:-30% 0}
  32%  {background-position:130% 0}   /* Lauf links->rechts (~1,9s, 30% langsamer) */
  50%  {background-position:130% 0}   /* Pause rechts (~1,1s, doppelt so lang) */
  82%  {background-position:-30% 0}   /* Lauf zurück rechts->links */
  100% {background-position:-30% 0}   /* Pause links (~1,1s) */
}

/* 11b) Mode-Switch (Hochzeiten / Firmenevents) im Kopfmenü – führt in die
       eigenständige Firmenevent-Welt und wieder zurück. */
.modeswitch-w{display:inline-flex;align-items:center;border:1px solid var(--gold-line);border-radius:100px;padding:3px;gap:2px}
.modeswitch-w a{font-family:'Inter';font-weight:600;font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;
  padding:.42rem .8rem;border-radius:100px;color:var(--smoke);white-space:nowrap;transition:background .25s,color .25s}
.modeswitch-w a.on{background:var(--gold);color:#fff}
.modeswitch-w a:not(.on):hover{color:var(--gold-d)}
/* Wortmarke nie umbrechen/schrumpfen ("DJ Marcus Stroph" bleibt einzeilig). */
.nav .brand{flex:none;white-space:nowrap}
.nav-links a{white-space:nowrap}
.modeswitch-w--m{display:none}
/* Switch im linken Cluster: gleicher Abstand Brand↔Switch und Switch↔1. Menüpunkt.
   Die Menülinks füllen die Restbreite, nur der Gäste-Login-Button rückt an den
   rechten Rand. */
@media(min-width:781px){
  .nav .modeswitch-w--top{margin-inline-start:32px}
  .nav .nav-links{margin-inline-start:32px;flex:1 1 auto}
  .nav-links .btn--gold{margin-inline-start:auto}
}
.home .header:not(.scrolled) .modeswitch-w{border-color:rgba(255,255,255,.32)}
.home .header:not(.scrolled) .modeswitch-w a:not(.on){color:rgba(248,244,237,.82)}
.home .header:not(.scrolled) .modeswitch-w a:not(.on):hover{color:#fff}
@media(max-width:780px){
  /* Mobil: Top-Switch aus, Switch erscheint im aufklappenden Menü */
  .modeswitch-w--top{display:none}
  .modeswitch-w--m{display:inline-flex;margin-bottom:8px}
  .home .header:not(.scrolled) .nav-links.open .modeswitch-w{border-color:var(--gold-line)}
  .home .header:not(.scrolled) .nav-links.open .modeswitch-w a:not(.on){color:var(--smoke)}
  .home .header:not(.scrolled) .nav-links.open .modeswitch-w a.on{color:#fff}
}

/* 12) Pakete-Listen: Hängeeinzug. Bullet absolut links, Text mit Einzug ->
       mehrzeilige Punkte bleiben rechts neben dem Bullet (nicht darunter). */
.paket li{display:block;position:relative;padding:8px 0 8px 28px}
.paket li::before{position:absolute;left:0;top:13px;margin-top:0}
.paket .li-note{display:block;padding-inline-start:0;margin-top:3px}

/* ============ Glamour / Edler Glanz ============ */

/* (1) Goldener Scroll-Fortschrittsbalken ganz oben */
.scrollprog{position:fixed;inset-block-start:0;inset-inline-start:0;height:3px;width:0;z-index:200;
  background:linear-gradient(90deg,var(--gold-d),var(--gold),var(--silver-l),var(--gold));
  box-shadow:0 0 10px rgba(197,165,114,.65);transition:width .12s linear;pointer-events:none}

/* (2) Feines Film-Korn + zarte Vignette über der ganzen Seite (edler Print-Look) */
.fx-overlay{position:fixed;inset:0;z-index:95;pointer-events:none;
  background:radial-gradient(135% 130% at 50% 36%,transparent 56%,rgba(26,20,14,.17) 100%)}
.fx-overlay::before{content:'';position:absolute;inset:0;opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:180px 180px}

/* (3) Schimmer auf den Statistik-Zahlen, ausgelöst beim Hochzählen */
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .ueber-stats .num.shimmer{
    background-image:linear-gradient(100deg,var(--gold-d) 0%,var(--gold-d) 38%,#fff7e8 50%,var(--gold-d) 62%,var(--gold-d) 100%);
    background-size:280% 100%;background-position:135% 0;background-repeat:repeat;
    -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
    animation:shineSweep 1.6s var(--ease) forwards}
}

/* (5) Art-Déco-Ornament (Gold-Gem) über zentrierten Section-Titeln */
.sec-head.center::before{
  content:'\f3a5';font-family:'Font Awesome 7 Free';font-weight:900;
  display:block;width:-moz-fit-content;width:fit-content;margin:0 auto clamp(14px,2vw,22px);
  color:var(--gold);font-size:.95rem;line-height:1;
  filter:drop-shadow(0 0 6px rgba(197,165,114,.45))}

/* Eyebrow-Labels ("Euer Abend" etc.): Strich davor entfernen – wirkt cleaner. */
.eyebrow::before{display:none}

/* (10) Buttons: weicher Licht-Sweep beim Hover (Glanz über „Metall") */
.btn{position:relative;overflow:hidden}
.btn::after{content:'';position:absolute;inset-block-start:-10%;inset-inline-start:-130%;width:55%;height:120%;pointer-events:none;
  background:linear-gradient(100deg,transparent 0,rgba(255,255,255,.5) 50%,transparent 100%);
  transform:skewX(-18deg);opacity:0}
.btn:hover::after{opacity:1;animation:btnSheen .75s var(--ease)}
@keyframes btnSheen{from{inset-inline-start:-130%}to{inset-inline-start:160%}}

/* ============ Veredelung Runde 2 ============ */

/* (6) Drop-Caps: schmückende Serifen-Initiale im ersten Editorial-Absatz.
       Jeweils der echte Fließtext-Absatz (nicht das inline-flex-Eyebrow). */
.usp-body p:first-of-type::first-letter,   /* Der Unterschied */
.ueber-body h2 + p::first-letter,          /* Ich bin Marcus. */
.feature-copy .lead::first-letter,         /* Das Wunschmusik- & Foto-Erlebnis */
.check-aside .lead::first-letter{          /* Ist euer Tag noch frei? */
  font-family:'Fraunces',Georgia,serif;float:left;
  font-size:3.5em;line-height:.78;font-weight:340;
  color:var(--gold-d);margin:.05em .14em -.02em 0}

/* (2) Champagner-Bokeh: weiche, aufsteigende Goldlichtpunkte im Hintergrund */
.bokeh-fx{position:relative;overflow:hidden}
.bokeh-fx > .wrap{position:relative;z-index:1}
.bokeh-fx::before,.bokeh-fx::after{
  content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background-repeat:no-repeat;filter:blur(1px);will-change:transform,opacity;
  animation:bokehRise 15s linear infinite}
.bokeh-fx::before{background-image:
  radial-gradient(circle 7px at 10% 70%,rgba(197,165,114,.55),transparent 70%),
  radial-gradient(circle 4px at 26% 88%,rgba(220,202,168,.5),transparent 70%),
  radial-gradient(circle 10px at 44% 60%,rgba(197,165,114,.4),transparent 70%),
  radial-gradient(circle 5px at 63% 82%,rgba(232,214,170,.55),transparent 70%),
  radial-gradient(circle 8px at 80% 66%,rgba(197,165,114,.45),transparent 70%),
  radial-gradient(circle 4px at 93% 86%,rgba(220,202,168,.5),transparent 70%)}
.bokeh-fx::after{animation-delay:-7.5s;background-image:
  radial-gradient(circle 5px at 17% 78%,rgba(232,214,170,.5),transparent 70%),
  radial-gradient(circle 9px at 35% 64%,rgba(197,165,114,.4),transparent 70%),
  radial-gradient(circle 4px at 54% 90%,rgba(220,202,168,.55),transparent 70%),
  radial-gradient(circle 7px at 72% 72%,rgba(197,165,114,.5),transparent 70%),
  radial-gradient(circle 5px at 88% 84%,rgba(232,214,170,.5),transparent 70%)}
@keyframes bokehRise{
  0%{transform:translateY(14%);opacity:0}
  18%{opacity:1}
  82%{opacity:1}
  100%{transform:translateY(-16%);opacity:0}
}

/* (3) Wunderkerzen-Funken: kleine goldene Sternfunken über der Galerie/Finale */
.sparks{position:absolute;inset:0;z-index:4;pointer-events:none}
.spark{position:absolute;width:18px;height:18px;opacity:0;transform:scale(.3);
  background:radial-gradient(circle,#fff 0 22%,rgba(255,224,158,1) 38%,transparent 66%);
  filter:drop-shadow(0 0 9px rgba(255,205,120,1));
  animation:spark 3.2s ease-in-out infinite}
.spark::before{content:'';position:absolute;inset:-48%;
  background:
    linear-gradient(90deg,transparent 45%,rgba(255,240,205,.95) 50%,transparent 55%),
    linear-gradient(0deg,transparent 45%,rgba(255,240,205,.95) 50%,transparent 55%)}
@keyframes spark{0%,100%{opacity:0;transform:scale(.3) rotate(0)}42%,58%{opacity:1;transform:scale(1) rotate(45deg)}}
.spark:nth-child(1){left:8%;top:62%;animation-delay:0s}
.spark:nth-child(2){left:22%;top:80%;animation-delay:.5s}
.spark:nth-child(3){left:36%;top:54%;animation-delay:1.1s}
.spark:nth-child(4){left:48%;top:86%;animation-delay:1.7s}
.spark:nth-child(5){left:60%;top:60%;animation-delay:.3s}
.spark:nth-child(6){left:71%;top:82%;animation-delay:2.1s}
.spark:nth-child(7){left:83%;top:56%;animation-delay:1.4s}
.spark:nth-child(8){left:91%;top:76%;animation-delay:.8s}
.spark:nth-child(9){left:50%;top:42%;animation-delay:2.4s}

/* Stimmen: Strich vor dem Namen durch Eheringe-Icon (zwei verschlungene Ringe,
   wie in der Linien-Animation) ersetzen, dezentes Dunkelgold. */
.stimme .who::before{
  width:30px;height:19px;flex:none;border-radius:0;
  background:var(--gold-d);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 18' fill='none' stroke='%23000' stroke-width='1.8'%3E%3Ccircle cx='10' cy='9' r='7'/%3E%3Ccircle cx='18' cy='9' r='7'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 18' fill='none' stroke='%23000' stroke-width='1.8'%3E%3Ccircle cx='10' cy='9' r='7'/%3E%3Ccircle cx='18' cy='9' r='7'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* Kontaktformular: Anlass-Tabs (Hochzeit / Event) */
.formtabs{display:flex;gap:8px;margin-bottom:12px}

/* WhatsApp-Button unter den Tabs – gleiche Optik wie die Tabs (Höhe/Schrift/Farbe),
   Hintergrund transparent (bleibt), nur Icon + Hover in WhatsApp-Grün. */
.btn--wa{display:flex;width:100%;align-items:center;justify-content:center;gap:.5em;
  font-family:'Inter';font-weight:600;font-size:.9rem;line-height:1;color:var(--smoke);
  padding:.78rem 1rem;border:1px solid var(--line);border-radius:8px;background:transparent;
  cursor:pointer;margin-bottom:22px;
  transition:background .25s,color .25s,border-color .25s,box-shadow .25s,transform .25s}
.btn--wa i{color:#25D366;font-size:1.2em;transition:color .25s}
.btn--wa:hover{border-color:#25D366;color:#0e7a52;background:rgba(37,211,102,.06);transform:translateY(-1px);box-shadow:var(--shadow-sm)}
.btn--wa:hover i{color:#1aa953}
.formtab{flex:1;font-family:'Inter';font-weight:600;font-size:.9rem;line-height:1;
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  padding:.78rem 1rem;border-radius:8px;border:1px solid var(--line);
  background:var(--cream);color:var(--smoke);cursor:pointer;
  transition:background .25s,color .25s,border-color .25s,box-shadow .25s,transform .25s}
.formtab i{font-size:.95em;color:var(--gold-d);transition:color .25s}
.formtab:hover{border-color:var(--gold);color:var(--gold-d);transform:translateY(-1px);box-shadow:var(--shadow-sm)}
.formtab.is-active{background:var(--ink);color:var(--cream);border-color:var(--ink);box-shadow:var(--shadow-sm);cursor:default;transform:none}
.formtab.is-active i{color:var(--gold)}
.formtab.is-active:hover{transform:none;box-shadow:var(--shadow-sm)}


/* ============ Veredelung Runde 3 (Glamour-Backlog) ============ */

/* (1) Goldener Unterstrich-Sweep unter der Hero-H1 – zarter Lichtstrich, der
       einmal nach dem Laden „durchläuft" (von 0 auf volle Länge gezeichnet). */
.hero h1{position:relative}
.hero--video h1::after{
  content:'';position:absolute;inset-inline-start:0;inset-block-end:-.34em;height:2px;width:0;border-radius:2px;
  background:linear-gradient(90deg,var(--gold-d),var(--gold) 34%,#fff3da 50%,var(--gold) 66%,var(--gold-d));
  box-shadow:0 0 14px rgba(197,165,114,.6);opacity:0;
  animation:heroRule 1.6s var(--ease) 1s forwards}
@keyframes heroRule{0%{width:0;opacity:0}22%{opacity:1}100%{width:clamp(150px,22vw,290px);opacity:1}}

/* (7) Schimmer-Wipe übers „DJ Marcus Stroph"-Wortmarke beim Laden – ein
       diagonaler Lichtstreif wandert einmal über die Kopf-Wortmarke. */
.header .brand{position:relative;overflow:hidden}
.header .brand::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.72) 50%,transparent 62%);
  transform:translateX(-140%);animation:brandWipe 1.5s var(--ease) .7s 1}
@keyframes brandWipe{0%{transform:translateX(-140%)}100%{transform:translateX(160%)}}

/* (4) Warmes Gold-Grading auf die inhaltlichen Fotos (Videos bleiben unberührt,
       sie sind bereits gegradet). Zentrale Stärke per --photo-grade. */
.pimg img,.g-item img,.arch img{filter:var(--photo-grade)}

/* (5) Lightbox-Galerie mit Ken-Burns-Zoom + edlem Gold-Rahmen.
       Galerie-Bilder werden per JS klick-/tastaturfähig gemacht. */
.gallery .g-item img{cursor:zoom-in}
.lightbox{position:fixed;inset:0;z-index:300;display:flex;align-items:center;justify-content:center;
  padding:clamp(18px,5vw,60px);opacity:0;visibility:hidden;
  background:rgba(16,12,8,.88);backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px);
  transition:opacity .4s var(--ease),visibility .4s}
.lightbox.open{opacity:1;visibility:visible}
.lb-frame{position:relative;display:flex;flex-direction:column;max-width:min(1100px,94vw);
  background:var(--cream);padding:clamp(10px,1.4vw,18px);border-radius:6px;border:1px solid var(--gold);
  box-shadow:0 60px 130px -40px rgba(0,0,0,.85);transform:scale(.94);transition:transform .45s var(--ease)}
.lightbox.open .lb-frame{transform:scale(1)}
.lb-stage{position:relative;overflow:hidden;border-radius:3px;background:#0b0b0d;
  box-shadow:inset 0 0 0 1px rgba(197,165,114,.5)}
.lb-img{display:block;width:auto;max-width:100%;max-height:calc(86vh - 96px);margin-inline:auto;
  filter:var(--photo-grade);transform-origin:center;
  animation:kenburns 17s ease-in-out infinite alternate}
@keyframes kenburns{0%{transform:scale(1.04) translate(0,0)}100%{transform:scale(1.17) translate(-1.6%,-2.2%)}}
.lb-cap{margin-top:12px;text-align:center;font-family:'Fraunces';font-style:italic;color:var(--smoke);font-size:.92rem}
.lb-close,.lb-nav{position:fixed;background:rgba(0,0,0,.32);border:1px solid rgba(255,255,255,.4);color:#fff;
  cursor:pointer;display:grid;place-items:center;z-index:310;
  transition:background .25s,border-color .25s,color .25s,transform .25s}
.lb-close{inset-block-start:clamp(16px,3vw,30px);inset-inline-end:clamp(16px,3vw,30px);
  width:46px;height:46px;border-radius:50%;font-size:1.55rem;line-height:1}
.lb-close:hover{background:var(--gold);border-color:var(--gold);color:#1a1610;transform:rotate(90deg)}
.lb-nav{inset-block-start:50%;width:52px;height:52px;margin-block-start:-26px;border-radius:50%;font-size:1.9rem;line-height:1}
.lb-prev{inset-inline-start:clamp(12px,3vw,34px)}
.lb-next{inset-inline-end:clamp(12px,3vw,34px)}
.lb-nav:hover{background:var(--gold);border-color:var(--gold);color:#1a1610}
@media(max-width:560px){.lb-nav{width:44px;height:44px;margin-block-start:-22px;font-size:1.6rem}.lb-img{max-height:calc(82vh - 90px)}}

@media(prefers-reduced-motion:reduce){
  /* Statt Animation: Unterstrich gleich sichtbar, Ken-Burns aus (Bild ruhig). */
  .hero--video h1::after{width:clamp(150px,22vw,290px);opacity:1;animation:none}
  .lb-img{transform:scale(1.02)}
}