/* =========================================================
   Hochzeits-Galerie – Design
   Palette aus der Abendstimmung des Headerfotos:
     ink     #1b1220   plum-schwarz, Sektionen/Nav
     plum    #3a2240   tiefes Beerenviolett
     blush   #e2588f   magenta-rosa Akzent (Neon)
     gold    #e8a13c   warmes Laternenlicht
     cream   #f7efe8   helle Flächen / Text auf dunkel
     ink-2   #2a1d33
   Display: Fraunces · Body: Mulish
   ========================================================= */

:root{
  --ink:#1b1220; --plum:#3a2240; --ink2:#2a1d33;
  --blush:#e2588f; --gold:#e8a13c; --cream:#f7efe8;
  --line:rgba(247,239,232,.14);
  --shadow:0 18px 50px -22px rgba(0,0,0,.55);
  --r:18px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
html{overflow-x:hidden}
body{
  margin:0; background:var(--cream); color:#241a2b; overflow-x:hidden;
  font-family:"Mulish",system-ui,sans-serif; font-size:16px; line-height:1.6;
}
img{max-width:100%; display:block}
a{color:var(--blush); text-decoration:none}
a:hover{text-decoration:underline}

h1,h2,h3,.wd-brand{font-family:"Fraunces",Georgia,serif; font-weight:500; letter-spacing:.2px}

/* ---------- Navigation ---------- */
.wd-nav{position:sticky; top:0; z-index:40; background:rgba(27,18,32,.92);
  backdrop-filter:blur(10px); border-bottom:1px solid var(--line)}
.wd-nav__inner{max-width:1140px; margin:0 auto; padding:.7rem 1.1rem;
  display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap}
.wd-brand{color:var(--cream); font-size:1.35rem; text-decoration:none}
.wd-brand:hover{text-decoration:none; color:#fff}
.wd-nav__links{display:flex; gap:.4rem .25rem; flex-wrap:wrap; align-items:center}
.wd-nav__links a{color:rgba(247,239,232,.82); padding:.4rem .7rem; border-radius:999px;
  font-size:.93rem; text-decoration:none}
.wd-nav__links a:hover{color:#fff; background:rgba(247,239,232,.08)}
.wd-nav__admin{border:1px solid var(--line)}

.wd-main{max-width:1140px; margin:0 auto; padding:1.6rem 1.1rem 3rem}
.wd-foot{text-align:center; padding:2rem 1rem; color:#7c6a86; font-size:.9rem}

/* ---------- Hero / Header mit Foto ---------- */
.hero{position:relative; border-radius:24px; overflow:hidden; min-height:62vh;
  display:flex; align-items:flex-end; box-shadow:var(--shadow)}
.hero__img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  filter:saturate(1.05)}
.hero__veil{position:absolute; inset:0;
  background:
    radial-gradient(120% 80% at 80% 10%, rgba(226,88,143,.28), transparent 55%),
    linear-gradient(to top, rgba(20,12,24,.92) 6%, rgba(20,12,24,.25) 45%, rgba(20,12,24,.05) 75%)}
/* schwebende Lichtpunkte (Laternen-Bokeh) */
.hero__veil::after{content:""; position:absolute; inset:0; opacity:.5;
  background:
    radial-gradient(7px 7px at 18% 30%, var(--gold), transparent 60%),
    radial-gradient(5px 5px at 30% 22%, #ffd58a, transparent 60%),
    radial-gradient(9px 9px at 70% 18%, var(--gold), transparent 60%),
    radial-gradient(4px 4px at 86% 34%, #ffe0a6, transparent 60%);
  filter:blur(.4px); animation:glow 5s ease-in-out infinite alternate}
@keyframes glow{to{opacity:.85}}
.hero__content{position:relative; padding:2.4rem 2rem; color:var(--cream); width:100%}
.hero__eyebrow{font-family:"Mulish"; letter-spacing:.32em; text-transform:uppercase;
  font-size:.72rem; color:var(--gold); margin-bottom:.5rem}
.hero h1{font-size:clamp(2.4rem,7vw,4.6rem); line-height:1.02; margin:0; color:#fff}
.hero__date{font-size:1.05rem; margin-top:.6rem; color:rgba(247,239,232,.9)}
.hero__sub{margin-top:.2rem; color:rgba(247,239,232,.72)}
.hero__cta{margin-top:1.4rem; display:flex; gap:.6rem; flex-wrap:wrap}

/* ---------- Buttons ---------- */
.btn-blush{background:var(--blush); border:none; color:#fff; font-weight:600;
  padding:.7rem 1.3rem; border-radius:999px}
.btn-blush:hover{background:#d23f7e; color:#fff}
.btn-ghost{background:transparent; border:1px solid rgba(247,239,232,.5); color:#fff;
  padding:.7rem 1.3rem; border-radius:999px; font-weight:600}
.btn-ghost:hover{background:rgba(247,239,232,.12); color:#fff}
.btn-gold{background:var(--gold); border:none; color:#3a2240; font-weight:700;
  padding:.6rem 1.2rem; border-radius:999px}
.btn-gold:hover{background:#d98f28}

/* ---------- Abschnitts-Titel ---------- */
.section-head{display:flex; align-items:baseline; gap:.6rem .8rem; margin:2.6rem 0 1.1rem; flex-wrap:wrap}
.section-head h2{font-size:1.8rem; margin:0}
.section-head__action{margin-left:auto}
.section-head .ey{color:var(--gold); letter-spacing:.28em; text-transform:uppercase;
  font-size:.7rem; font-weight:700}

/* ---------- Karten / Galerie ---------- */
.card-soft{background:#fff; border:1px solid #efe3dc; border-radius:var(--r);
  box-shadow:0 10px 30px -20px rgba(58,34,64,.4)}

.grid{display:grid; gap:.8rem;
  grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.tile{position:relative; aspect-ratio:1; border-radius:14px; overflow:hidden;
  background:var(--ink2); box-shadow:0 8px 20px -14px rgba(0,0,0,.5)}
.tile img,.tile video{width:100%; height:100%; object-fit:cover; display:block}
.tile__badge{position:absolute; top:.4rem; left:.4rem; background:rgba(27,18,32,.7);
  color:#fff; font-size:.68rem; padding:.15rem .5rem; border-radius:999px}
.tile__fav{position:absolute; top:.4rem; right:.4rem; font-size:1.05rem; line-height:1;
  background:rgba(27,18,32,.55); border:none; color:#fff; border-radius:999px;
  width:30px; height:30px; cursor:pointer}
.tile__fav.is-on{color:var(--gold)}
.tile__pick{position:absolute; bottom:.4rem; left:.4rem; transform:scale(1.25)}
.tile__del{position:absolute; bottom:.4rem; right:.4rem; background:rgba(210,63,126,.92);
  border:none; color:#fff; border-radius:999px; padding:.15rem .55rem; font-size:.72rem; cursor:pointer}
.tile__video-flag{position:absolute; bottom:.4rem; right:.4rem; background:rgba(27,18,32,.7);
  color:#fff; border-radius:999px; padding:.1rem .5rem; font-size:.7rem}

/* Favoriten-Streifen auf der Startseite */
.fav-strip{display:grid; gap:.7rem; grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}
.fav-strip .tile{aspect-ratio:4/5}

/* Album-Block */
.album{margin-bottom:2.2rem}
.album__bar{display:flex; align-items:center; gap:.7rem; flex-wrap:wrap; margin-bottom:.7rem}
.album__name{font-family:"Fraunces"; font-size:1.3rem; margin:0}
.album__meta{color:#8a7891; font-size:.85rem}
.pill{font-size:.72rem; padding:.12rem .6rem; border-radius:999px; font-weight:700}
.pill-public{background:#e7f6ec; color:#1d7a44}
.pill-admin{background:#fbe7ef; color:#b02a66}

/* ---------- Formulare ---------- */
.panel{max-width:680px; margin:1.5rem auto; padding:1.8rem; }
.panel h1{font-size:2rem; margin:0 0 .3rem}
.lead{color:#6c5a76; margin-bottom:1.4rem}
.form-label{font-weight:600}
.dropzone{border:2px dashed #d9c7d3; border-radius:16px; padding:2rem 1rem; text-align:center;
  background:#fdf8f5; cursor:pointer; transition:.15s}
.dropzone:hover,.dropzone.drag{border-color:var(--blush); background:#fdeef4}
.hint{font-size:.85rem; color:#8a7891}
.toast-ok{background:#e7f6ec; color:#1d7a44; border-radius:12px; padding:.8rem 1rem; margin:.6rem 0}
.toast-err{background:#fbe7ef; color:#b02a66; border-radius:12px; padding:.8rem 1rem; margin:.6rem 0}

/* schwebende Download-Leiste */
.actionbar{position:sticky; bottom:0; z-index:30; margin-top:1.5rem;
  background:rgba(27,18,32,.95); color:#fff; border-radius:16px;
  padding:.8rem 1rem; display:flex; gap:.8rem; align-items:center; flex-wrap:wrap;
  box-shadow:var(--shadow)}
.actionbar .count{font-weight:700}

@media (max-width:600px){
  .hero{min-height:64vh}
  .hero__content{padding:1.5rem 1.2rem}
  .hero h1{font-size:clamp(2rem,9vw,3rem)}
  .hero__cta .btn{flex:1 1 auto; text-align:center}
  .section-head{margin-top:2rem}
  .section-head h2{font-size:1.45rem}
  /* ZIP-Button auf dem Handy in eigene Zeile, volle Breite */
  .section-head__action{margin-left:0; width:100%}
  .section-head__action .btn{width:100%}
  /* Lieblingsmomente: immer 2 nebeneinander, kompakter */
  .fav-strip{grid-template-columns:repeat(2,1fr); gap:.5rem}
  .fav-strip .tile{aspect-ratio:1}
}
@media (prefers-reduced-motion:reduce){
  .hero__veil::after{animation:none}
  html{scroll-behavior:auto}
}

/* ---------- Foto/Video-Kennzeichnung in der Vorschau ---------- */
.tile__type{position:absolute; top:.4rem; left:.4rem; z-index:2;
  display:inline-flex; align-items:center; gap:.28rem;
  background:rgba(27,18,32,.74); color:#fff; font-size:.7rem; font-weight:600;
  padding:.16rem .5rem; border-radius:999px; line-height:1}
.tile__type svg{width:13px; height:13px; display:block}
/* Play-Kreis mittig auf Video-Vorschauen */
.tile__play{position:absolute; inset:0; display:grid; place-items:center; pointer-events:none; z-index:1}
.tile__play i{width:48px; height:48px; border-radius:50%; background:rgba(27,18,32,.5);
  border:2px solid rgba(255,255,255,.85); display:grid; place-items:center; backdrop-filter:blur(1px)}
.tile__play i::before{content:""; width:0; height:0; margin-left:4px;
  border-left:15px solid #fff; border-top:9px solid transparent; border-bottom:9px solid transparent}

/* ---------- Fortschrittsbalken beim Upload ---------- */
.progress-box{margin-top:1rem}
.bar{height:14px; border-radius:999px; background:#efe1ea; overflow:hidden}
.bar__fill{height:100%; width:0; border-radius:999px;
  background:linear-gradient(90deg,var(--blush),var(--gold)); transition:width .15s ease}
#progress-text{margin-top:.45rem; text-align:center; font-weight:600}

/* ---------- Lightbox ---------- */
.tile{cursor:pointer}
.lb{position:fixed; inset:0; z-index:1000; background:rgba(15,9,18,.95);
  display:none; align-items:center; justify-content:center}
.lb.open{display:flex}
.lb__stage{max-width:92vw; max-height:86vh; display:flex; align-items:center; justify-content:center}
.lb__stage img,.lb__stage video{max-width:92vw; max-height:86vh; border-radius:10px;
  box-shadow:0 24px 70px rgba(0,0,0,.6)}
.lb__close{position:absolute; top:12px; right:18px; background:none; border:none; color:#fff;
  font-size:2.6rem; line-height:1; cursor:pointer; opacity:.85}
.lb__nav{position:absolute; top:50%; transform:translateY(-50%); background:rgba(255,255,255,.12);
  border:none; color:#fff; font-size:2.2rem; width:54px; height:66px; border-radius:12px; cursor:pointer}
.lb__prev{left:14px}
.lb__next{right:14px}
.lb__nav:hover,.lb__close:hover{opacity:1; background:rgba(255,255,255,.22)}
.lb__counter{position:absolute; bottom:16px; left:50%; transform:translateX(-50%); color:#fff;
  font-size:.85rem; background:rgba(0,0,0,.45); padding:.25rem .7rem; border-radius:999px}
@media (max-width:600px){ .lb__nav{font-size:1.7rem; width:42px; height:56px} }