:root{--ink:#151310;--paper:#f4f0e8;--cream:#fbf9f4;--gold:#b79b62;--muted:#766f64;--line:rgba(21,19,16,.14);--serif:"Cormorant Garamond",Georgia,serif;--sans:"DM Sans",Arial,sans-serif}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-weight:300;line-height:1.7}a{color:inherit;text-decoration:none}img{display:block;width:100%;height:100%;object-fit:cover}.wrap{width:min(1180px,calc(100% - 48px));margin:auto}.eyebrow{font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);font-weight:500}.serif{font-family:var(--serif);font-weight:500}.btn{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:0 24px;border:1px solid currentColor;letter-spacing:.12em;text-transform:uppercase;font-size:.7rem;font-weight:500;transition:.25s}.btn:hover{background:var(--ink);color:var(--cream)}.btn.gold{background:var(--gold);border-color:var(--gold);color:#17130d}.btn.gold:hover{background:#c7ad78;border-color:#c7ad78}.reveal{opacity:0;transform:translateY(22px);transition:opacity .8s ease,transform .8s ease}.reveal.visible{opacity:1;transform:none}

header{position:absolute;z-index:10;left:0;right:0;top:0;color:white}.nav{height:92px;display:flex;align-items:center;justify-content:space-between}.brand{font-family:var(--serif);font-size:1.55rem;letter-spacing:.06em}.brand small{display:block;font-family:var(--sans);font-size:.55rem;letter-spacing:.24em;text-transform:uppercase;color:#ddd;margin-top:-5px}.navlinks{display:flex;gap:28px;font-size:.68rem;letter-spacing:.13em;text-transform:uppercase}.navlinks a{opacity:.9}.navlinks a:hover{color:#d9bd83}.navcta{border-bottom:1px solid rgba(255,255,255,.65);padding-bottom:4px}

.hero{min-height:94vh;position:relative;background:#171512;overflow:hidden;color:white;display:flex;align-items:flex-end}.hero:before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 42% 38% at 0 0,rgba(0,0,0,.99) 0%,rgba(0,0,0,.96) 48%,rgba(0,0,0,0) 100%),linear-gradient(90deg,rgba(0,0,0,.65),rgba(0,0,0,.18) 65%,rgba(0,0,0,.38)),linear-gradient(0deg,rgba(0,0,0,.7),transparent 55%);z-index:1}.hero-media{position:absolute;inset:0;background-image:url("images/hero.jpg");background-size:118% auto;background-position:38% center;animation:slowzoom 18s ease-in-out infinite alternate}.hero-logo{position:absolute;z-index:2;top:145px;left:4%;right:auto;width:min(225px,22vw);height:auto;object-fit:contain;filter:drop-shadow(0 10px 24px rgba(0,0,0,.28));pointer-events:none}.hero-inner{position:relative;z-index:2;padding:150px 0 90px}.hero h1{font-family:var(--serif);font-size:clamp(4rem,9vw,8.8rem);font-weight:400;line-height:.82;letter-spacing:-.035em;margin:18px 0 30px;max-width:900px}.hero h1 span{display:block;color:#dbc18b;font-style:italic}.hero p{max-width:590px;font-size:1.05rem;color:#eee6d9;margin:0 0 32px}.hero-actions{display:flex;gap:12px;flex-wrap:wrap}.hero .btn:first-child{background:var(--cream);color:var(--ink);border-color:var(--cream)}.hero .btn:first-child:hover{background:white}.hero-note{position:absolute;right:0;bottom:94px;z-index:2;font-family:var(--serif);font-size:1.35rem;color:#eee;max-width:230px;line-height:1.15}.hero-note:before{content:"";display:block;width:42px;border-top:1px solid var(--gold);margin-bottom:14px}
@keyframes slowzoom{from{transform:scale(1)}to{transform:scale(1.06)}}

.intro{padding:115px 0 100px}.intro-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:90px;align-items:end}.intro h2{font-family:var(--serif);font-size:clamp(2.7rem,5vw,5.3rem);line-height:.95;font-weight:400;margin:18px 0}.intro p{font-size:1.05rem;color:#4e4942;max-width:620px}.signature{font-family:var(--serif);font-size:2rem;font-style:italic;margin-top:28px}.fact{border-top:1px solid var(--line);padding-top:18px;color:var(--muted);font-size:.88rem}.fact strong{display:block;color:var(--ink);font-family:var(--serif);font-size:2.4rem;font-weight:500;line-height:1}

.offerings{background:var(--ink);color:var(--cream);padding:110px 0}.section-head{display:flex;justify-content:space-between;gap:40px;align-items:end;margin-bottom:52px}.section-head h2{font-family:var(--serif);font-size:clamp(2.8rem,5vw,5rem);font-weight:400;line-height:.95;margin:12px 0 0}.section-head p{max-width:390px;color:#bcb4a8;margin:0}.cards{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid rgba(255,255,255,.18);border-left:1px solid rgba(255,255,255,.18)}.card{min-height:330px;padding:30px 26px;border-right:1px solid rgba(255,255,255,.18);border-bottom:1px solid rgba(255,255,255,.18);display:flex;flex-direction:column;justify-content:space-between;transition:.3s}.card:hover{background:#201e1a}.card .num{font-size:.65rem;letter-spacing:.2em;color:var(--gold)}.card h3{font-family:var(--serif);font-size:2.55rem;font-weight:400;line-height:.95;margin:0 0 15px}.card p{font-size:.86rem;color:#c5beb2;margin:0}.card .tag{font-size:.64rem;letter-spacing:.13em;text-transform:uppercase;color:var(--gold);margin-top:24px}

.instruments{padding:115px 0}.instrument-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);margin-top:55px}.instrument{background:var(--paper);padding:48px;min-height:260px;display:flex;flex-direction:column;justify-content:space-between}.instrument h3{font-family:var(--serif);font-size:3.3rem;font-weight:400;margin:0}.instrument p{max-width:430px;color:#5e574e;margin:0}.instrument .mini{font-size:.65rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold)}

.wedding{background:#e8e0d3;padding:110px 0}.feature-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:70px;align-items:center}.feature-image{height:650px;position:relative}.feature-image img{object-position:center}.feature-copy h2{font-family:var(--serif);font-size:clamp(3rem,5vw,5.2rem);font-weight:400;line-height:.9;margin:16px 0 25px}.feature-copy p{color:#544d44;max-width:580px}.feature-list{list-style:none;padding:0;margin:30px 0;display:grid;grid-template-columns:1fr 1fr;gap:9px 24px}.feature-list li:before{content:"— ";color:var(--gold)}.quote{border-left:1px solid var(--gold);padding-left:20px;margin:35px 0;font-family:var(--serif);font-size:1.55rem;line-height:1.2}

.memorial{padding:110px 0}.memorial-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:80px}.memorial h2,.singalong h2{font-family:var(--serif);font-size:clamp(3rem,5vw,5.3rem);font-weight:400;line-height:.9;margin:15px 0 25px}.memorial p,.singalong p{max-width:620px;color:#575047}.instrument-pills{display:flex;flex-wrap:wrap;gap:8px;margin-top:30px}.pill{border:1px solid var(--line);padding:9px 14px;font-size:.68rem;letter-spacing:.12em;text-transform:uppercase}.memorial-aside{border-top:1px solid var(--line);padding-top:18px}.memorial-aside h3{font-family:var(--serif);font-size:2rem;font-weight:400;margin:0 0 12px}

.singalong{background:#171512;color:var(--cream);padding:110px 0}.sing-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:90px;align-items:center}.singalong p{color:#c2baad}.sing-title{font-family:var(--serif);font-size:clamp(3.8rem,7vw,7.2rem);line-height:.8;font-style:italic;color:#dcc18b}.sing-box{border:1px solid rgba(255,255,255,.18);padding:38px}.sing-box h3{font-family:var(--serif);font-size:2.1rem;font-weight:400;margin-top:0}.sing-box ul{padding-left:18px;color:#c9c1b5}.sing-box li{margin:7px 0}

.audio{padding:110px 0}.audio-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:50px}.audio-card{background:var(--cream);border:1px solid var(--line);padding:28px}.audio-card h3{font-family:var(--serif);font-size:1.8rem;font-weight:500;margin:0 0 12px}.audio-card audio{width:100%}.audio-note{font-size:.78rem;color:var(--muted);margin-top:8px}

.contact{background:#e5ddcf;padding:110px 0}.contact-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:90px}.contact h2{font-family:var(--serif);font-size:clamp(3.2rem,6vw,6.3rem);line-height:.85;font-weight:400;margin:14px 0 28px}.contact p{max-width:570px;color:#554e45}.contact-details{border-top:1px solid var(--line);padding-top:20px;margin-top:40px}.contact-details a{font-family:var(--serif);font-size:1.7rem}.contact-form{display:grid;gap:12px}.contact-form input,.contact-form textarea{width:100%;border:0;border-bottom:1px solid rgba(21,19,16,.25);background:transparent;padding:15px 0;font:inherit;outline:none}.contact-form textarea{min-height:130px;resize:vertical}.contact-form button{margin-top:12px;cursor:pointer}

footer{background:var(--ink);color:#aaa298;padding:30px 0;font-size:.7rem;letter-spacing:.08em}.footer-row{display:flex;justify-content:space-between;gap:20px}.footer-links{display:flex;gap:20px}



/* Fotos für die vier Anlässe */
.card.card-photo{position:relative;overflow:hidden;min-height:420px;padding:0;background:#161411}
.card.card-photo > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .7s ease}
.card.card-photo .card-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(9,8,7,.94) 0%,rgba(9,8,7,.48) 48%,rgba(9,8,7,.08) 100%)}
.card.card-photo .card-content{position:absolute;inset:0;padding:28px 26px;display:flex;flex-direction:column;justify-content:flex-end}
.card.card-photo .card-content .num{position:absolute;top:28px;left:26px}
.card.card-photo:hover > img{transform:scale(1.04)}
.audio-placeholder{min-height:145px;display:flex;flex-direction:column;justify-content:center}
.audio-placeholder h3{margin-bottom:8px}
@media(max-width:900px){.navlinks{display:none}.wrap{width:min(100% - 32px,1180px)}.hero{min-height:88vh}.hero-inner{padding:140px 0 70px}.hero-note{display:none}.intro-grid,.feature-grid,.memorial-grid,.sing-grid,.contact-grid{grid-template-columns:1fr;gap:45px}.cards{grid-template-columns:1fr 1fr}.instrument-grid,.audio-row{grid-template-columns:1fr}.feature-image{height:480px}.section-head{display:block}.section-head p{margin-top:22px}.footer-row{flex-direction:column}}
@media(max-width:560px){.hero-logo{top:68px;right:16px;width:190px}.hero h1{font-size:4rem}.cards{grid-template-columns:1fr}.card{min-height:260px}.instrument{padding:32px;min-height:220px}.feature-image{height:360px}.feature-list{grid-template-columns:1fr}.intro,.offerings,.instruments,.wedding,.memorial,.singalong,.audio,.contact{padding:78px 0}.nav{height:74px}}

.mobile-toggle{display:none;background:none;border:0;color:inherit;font:inherit;font-size:.68rem;letter-spacing:.13em;text-transform:uppercase;cursor:pointer}
@media(max-width:900px){
  .nav{position:relative}
  .mobile-toggle{display:block}
  .navlinks{display:none;position:absolute;top:74px;left:0;right:0;background:rgba(17,16,14,.97);padding:18px 16px;flex-direction:column;gap:0;border-top:1px solid rgba(255,255,255,.12)}
  .navlinks.open{display:flex}
  .navlinks a{padding:12px 0}
  .navlinks .navcta{border-bottom:0}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

/* Hero: bewusst etwas weiter herausgezoomt, damit das Piano sichtbar bleibt */
.hero-media{background-size:cover;background-position:center 55%}

/* FINAL HERO-FRAMING
   Das Foto soll Kopf/Haare, Oberkörper und einen deutlichen Teil des Flügels zeigen. */
.hero-media{background-size:82% auto;background-repeat:no-repeat;background-position:center center;background-color:#171512}
@media(max-width:900px){
  .hero-media{background-size:cover;background-position:center 55%}
}
@media(max-width:560px){
  .hero-media{background-size:cover;background-position:center 54%}
}

/* FINAL HERO: Originalfoto 6668 '22rgb.jpg
   Das komplette Hochformat bleibt sichtbar – inklusive Haare, Oberkörper
   und Flügel. Auf Mobilgeräten wird der Ausschnitt etwas kompakter. */
.hero-media{
  background-size:auto 100%;
  background-repeat:no-repeat;
  background-position:center center;
  background-color:#090807;
}
@media(max-width:900px){
  .hero-media{
    background-size:auto 100%;
    background-position:center center;
  }
}
@media(max-width:560px){
  .hero-media{
    background-size:cover;
    background-position:center 46%;
  }
}

.wedding-details{background:#efe8dd;padding:110px 0}.wedding-detail-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);margin-top:45px}.detail-card{background:#efe8dd;padding:38px;min-height:275px}.detail-card .mini{font-size:.64rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold)}.detail-card h3{font-family:var(--serif);font-size:2.5rem;line-height:.95;font-weight:400;margin:14px 0 18px}.detail-card p{color:#575047;max-width:520px}.wedding-extra{display:grid;grid-template-columns:.8fr 1.2fr;gap:55px;margin-top:1px;padding:38px;background:#e4dccf}.wedding-extra h3{font-family:var(--serif);font-size:2.4rem;font-weight:400;line-height:.95;margin:10px 0}.wedding-extra p{color:#575047;margin:0}.repertoire{padding:110px 0}.repertoire-list{display:flex;flex-wrap:wrap;gap:9px;margin-top:45px}.repertoire-list span{border:1px solid var(--line);padding:10px 14px;font-size:.72rem}.repertoire-note{color:var(--muted);font-size:.82rem;margin-top:20px}.wedding-faq{background:var(--ink);color:var(--cream);padding:110px 0}.faq-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:rgba(255,255,255,.14);margin-top:45px}.faq-grid details{background:var(--ink);padding:24px 26px}.faq-grid summary{cursor:pointer;font-family:var(--serif);font-size:1.65rem;line-height:1.05}.faq-grid p{color:#c3bbb0;font-size:.88rem;margin:15px 0 0}.faq-grid summary::marker{color:var(--gold)}@media(max-width:760px){.wedding-detail-grid,.faq-grid,.wedding-extra{grid-template-columns:1fr}.detail-card{min-height:0;padding:30px}.wedding-details,.repertoire,.wedding-faq{padding:78px 0}}

.fact{display:grid;gap:22px}
.fact-stat{border-top:1px solid var(--line);padding-top:14px}
.fact-stat strong{display:block;color:var(--ink);font-family:var(--serif);font-size:2.35rem;font-weight:500;line-height:1}
.fact-stat span{display:block;margin-top:5px;color:var(--muted);font-size:.78rem;letter-spacing:.04em}


@media(max-width:1050px){
  .cards{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:600px){
  .cards{grid-template-columns:1fr}
  .card.card-photo{min-height:390px}
}

/* Clickable Anlass-Karten */
.card.card-photo{color:inherit;text-decoration:none;cursor:pointer}
.card.card-photo:focus-visible{outline:2px solid var(--gold);outline-offset:-2px}

/* Bilder auch in den einzelnen Anlass-Bereichen */
.event-feature{padding:110px 0;background:#efe8dd}
.event-feature .feature-grid{align-items:center}
.event-feature .feature-image img{object-fit:cover;object-position:center}
.memorial .feature-grid{align-items:center}
.memorial .feature-image img{object-fit:cover;object-position:center}
.memorial-aside{margin-top:32px;border-left:1px solid var(--gold);padding-left:20px}
.memorial-aside h3{font-family:var(--serif);font-size:2rem;font-weight:400;margin:0 0 10px}
.memorial-aside p{margin:0 0 10px}
.sing-photo{height:420px;overflow:hidden}
.sing-photo img{width:100%;height:100%;object-fit:cover;object-position:center 28%}
@media(max-width:900px){
  .hero-media{background-size:135% auto;background-position:34% center}
  .event-feature{padding:85px 0}
  .sing-photo{height:360px;grid-column:1 / -1;grid-row:2}
}
@media(max-width:560px){
  .hero-media{background-size:auto 115%;background-position:39% center}
  .sing-photo{height:300px}
}


/* HERO FINAL: vollständiges Originalfoto, kein seitlicher Beschnitt */
.hero-media{
  background-size:100% auto;
  background-position:center center;
  background-repeat:no-repeat;
  background-color:#090807;
}
@media(max-width:900px){
  .hero-media{
    background-size:100% auto;
    background-position:center center;
  }
}
@media(max-width:560px){
  .hero-media{
    background-size:cover;
    background-position:center 46%;
  }
}


/* Hörproben: bewusst als 2x2-Muster */
.audio-grid-2x2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
}
@media (max-width: 560px) {
  .audio-grid-2x2 {
    grid-template-columns: 1fr;
  }
}

/* Final mobile hero/logo placement */
@media (max-width: 560px){
  .hero-logo{top:145px;left:4%;right:auto;width:205px;max-width:43vw;}
}
.video-link-wrap{text-align:center;margin-top:1.5rem;}
.top-link{
  position:fixed;right:18px;bottom:18px;z-index:50;
  display:inline-flex;align-items:center;justify-content:center;
  min-width:112px;padding:10px 14px;border:1px solid rgba(255,255,255,.45);
  background:rgba(10,9,8,.82);color:#fff;text-decoration:none;
  font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;
  backdrop-filter:blur(8px);
}
.top-link:hover{background:rgba(10,9,8,.95);}
.legal-footer{text-align:center;margin-top:14px;}

/* FINAL MOBILE HERO OVERRIDE
   On small screens the portrait is shifted to the upper-left so the face
   stays clear of the headline. The logo remains on the right. */
@media (max-width:560px){
  .hero-media{
    background-size:cover !important;
    background-position:26% 24% !important;
    background-repeat:no-repeat !important;
  }
  .hero-logo{
    top:68px !important;
    right:16px !important;
    left:auto !important;
    width:190px !important;
    max-width:43vw !important;
  }
}

/* FINAL MOBILE HERO VARIANT: logo instead of text brand */
.mobile-brand-logo{display:none;}
@media (max-width:560px){
  .brand span,.brand small{display:none !important;}
  .brand{display:block !important;width:205px;height:92px;}
  .mobile-brand-logo{
    display:block !important;
    width:205px !important;
    height:auto !important;
    max-width:44vw !important;
    object-fit:contain !important;
    filter:drop-shadow(0 8px 18px rgba(0,0,0,.35));
  }
  .hero-logo{
    top:68px !important;
    right:16px !important;
    left:auto !important;
    width:170px !important;
    max-width:38vw !important;
  }
  .hero-media{
    background-size:135% auto !important;
    background-position:31% 31% !important;
  }
}

/* Mobile hero: much larger portrait */
@media (max-width:560px){
  .hero-media{
    background-size:165% auto !important;
    background-position:30% 30% !important;
  }
}

/* Mobile hero: very large portrait framing */
@media (max-width:560px){
  .hero-media{
    background-size:300% auto !important;
    background-position:29% 28% !important;
  }
}

/* Mobile hero final positioning */
@media (max-width:560px){
  .hero-media{
    background-size:300% auto !important;
    background-position:23% 23% !important;
  }
}

/* HERO FINAL: one clean logo position in the upper-left on desktop and mobile */
.brand span,.brand small{display:none !important;}
.brand{display:block !important;width:225px;height:auto;}
.mobile-brand-logo{display:block !important;width:225px !important;height:auto !important;max-width:42vw !important;object-fit:contain !important;filter:drop-shadow(0 8px 18px rgba(0,0,0,.35));}
.hero-logo{display:none !important;}

@media (max-width:560px){
  .brand{width:205px;height:auto;}
  .mobile-brand-logo{width:205px !important;max-width:44vw !important;}
}

/* Final logo positioning: keep the full logo visible at the top-left */
.brand{
  align-self:flex-start !important;
  margin-top:12px !important;
  line-height:0;
}
@media (max-width:560px){
  .brand{
    margin-top:10px !important;
  }
}


.form-status{margin:6px 0 0;font-size:.82rem;color:#554e45;line-height:1.5}
.contact-form button:disabled{opacity:.65;cursor:wait}
.hp-field{position:absolute!important;left:-10000px!important;width:1px!important;height:1px!important;opacity:0!important;pointer-events:none!important;}