/* =========================================================
   HOCHZEITS-DJ – baut auf style.css + dem Startseiten-System (main.home) auf.
   Eigene Stimmung: warmes Rosé-Grau statt Kaltgrau. Keine Cards, Icons, Schatten.
   ========================================================= */
.lp-hochzeit{
  --mist:#f5ebe8;      /* Hero / Kontakt / getönte Abschnitte */
  --line:#e9d8d4;
  --muted:#6f6461;
  --ink:#231c1b;
  --warm:#fdfbfa;      /* Grundfläche */
  background:var(--warm);color:var(--ink);
}
#navMenu a[aria-current="page"]::after{width:100%}

/* ---------- Hero: gleiche Anordnung wie die Startseite, längere Headline ---------- */
.lp .hero .roles{margin:0 0 1.1em}
.lp .hero h1{white-space:normal;font-size:clamp(34px,3.1vw,52px);line-height:1.1;letter-spacing:-.025em;text-wrap:balance;max-width:13em}
.lp .hero .lead{margin-top:1.1em}
.hero-links{display:flex;flex-wrap:wrap;gap:.6rem 2rem}
.text-link.quiet{border-bottom-color:var(--line)}
.text-link.quiet:hover{border-bottom-color:var(--ink)}
@media (max-width:940px){.lp .hero h1{font-size:clamp(30px,8vw,38px)}}

/* ---------- Gemeinsame Abschnitte ---------- */
.lp .sec{padding-block:var(--section-md)}
.lp .sec.tint{background:var(--mist)}
.sec-title{font-size:clamp(26px,1.2vw + 15px,36px);font-weight:600;letter-spacing:-.02em;line-height:1.15;margin-bottom:.6em;text-wrap:balance;max-width:24em}
.sec-title span{color:var(--red)}
.sec-lead{color:var(--muted);max-width:40em;margin-bottom:2.2rem}
.lp .cols3{margin-top:2rem}
.lp .cols3 > div{border-top-color:var(--line)}
@media (min-width:941px){
  /* innere Achse wie auf der Startseite */
  .lp .sec .wrap,.lp .lp-dark .wrap{padding-inline:calc(var(--page-gutter) + var(--indent))}
}

/* ---------- Vorstellung: Text links, Zitat rechts (unter dem Hero-Foto) ---------- */
.lp-about{padding-block:var(--section-md) var(--section-sm)}
.lp-about .wrap{display:grid;gap:2.5rem}
.lp-about h2{font-size:clamp(28px,1.6vw + 17px,40px);font-weight:600;letter-spacing:-.025em;line-height:1.12;margin-bottom:.8em;text-wrap:balance}
.lp-about h2 span{color:var(--red)}
.about-text p:not(.kicker){font-size:clamp(16px,.3vw + 13.5px,18px);line-height:1.7;max-width:34em}
.about-text p + p{margin-top:.9em}
.pull{margin:0;align-self:center}
.pull blockquote{margin:0;font-size:clamp(22px,.9vw + 14px,30px);font-weight:500;line-height:1.35;letter-spacing:-.015em}
.pull blockquote::before{content:'„';display:block;font-size:2.4em;line-height:.6;color:var(--red);font-weight:600;margin-bottom:.15em}
.pull figcaption{margin-top:1em;font-size:14px;color:var(--muted)}
@media (min-width:941px){
  /* Zitat-Spalte = Breite des Hero-Porträts (fester Token), steht damit genau darunter */
  .lp .lp-about .wrap{padding-inline:calc(var(--page-gutter) + var(--indent));
    grid-template-columns:minmax(0,1fr) var(--hero-photo-w);column-gap:var(--gap-xl)}
}

/* ---------- Medienblock: asymmetrisch, editorial ----------
   Desktop/Tablet: drei versetzte Spalten (Hauptfoto + Setup | Video 9:16 | Gäste-Foto).
   Versätze in % der Blockbreite → Komposition skaliert proportional, ab --tiles-max bleibt sie gleich.
   Mobile: horizontaler Media-Stream mit Scroll-Snap. */
.lp .intro{background:var(--warm)}
.lp-media{padding-block:var(--gap-md) var(--section-sm)}   /* mehr Luft bis „Was mir bei eurer Hochzeit wichtig ist.“ */
.media{max-width:calc(var(--tiles-max) + 2 * var(--page-gutter));margin-inline:auto;padding-inline:var(--page-gutter);
  display:grid;grid-template-columns:minmax(0,46fr) minmax(0,24fr) minmax(0,24fr);column-gap:clamp(10px,1.1vw,18px);align-items:center}   /* alle Spalten um eine gemeinsame Mittellinie */
.m{margin:0;overflow:hidden;background:var(--mist)}
.m img,.m video{display:block;width:100%;height:100%;object-fit:cover}
.m-col-a{display:flex;flex-direction:column;gap:clamp(10px,1.1vw,18px)}
.m-a{aspect-ratio:3/2}
.m-a img{object-position:50% 35%}
.m-c{aspect-ratio:4/3;width:62%;align-self:flex-end}
.m-v{aspect-ratio:9/16;margin-top:0;
  /* Standbild hinter dem Video, solange es lädt */
  background:center/cover no-repeat url('../images/hochzeit/highlight-poster.jpg'),var(--ink)}
.m-v video{background:transparent}
.m-b{aspect-ratio:4/5;margin-top:0}

@media (max-width:700px){
  .lp-media{padding-top:var(--gap-sm)}
  .media{display:flex;align-items:center;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
    padding-inline:var(--page-gutter);scroll-padding-inline:var(--page-gutter);scrollbar-width:none}
  .media::-webkit-scrollbar{display:none}
  .m-col-a{display:contents}                     /* A und C werden eigene Stream-Elemente */
  .m{flex:0 0 auto;scroll-snap-align:start;margin:0;align-self:center}
  /* Seitenverhältnisse bleiben erhalten – unterschiedliche Höhen sind gewollt */
  .m-a{width:84vw;aspect-ratio:4/5}              /* erstes Element ~84vw; mobil im Hochformat, damit neben dem Video keine Leerfläche entsteht */
  .m-v{order:2;width:min(58vw,300px)}
  .m-b{order:3;width:min(70vw,380px)}
  .m-c{order:4;width:78vw}
}

/* ---------- Paket: Preis als Aussage ---------- */
.kicker{font-size:13px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--red-text);margin-bottom:1em}
.kicker.muted{color:var(--muted)}
.price-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,6vw,110px);align-items:start}
.price{font-size:clamp(42px,2.64vw + 14.5px,62px);font-weight:600;letter-spacing:-.035em;line-height:1;margin:.35em 0 .2em}
.price-note{font-size:15px;color:var(--muted)}
.price-pay{margin:1.4em 0 1.8em;max-width:30em;color:var(--ink)}
.price-incl{padding-top:.3em}
.price-incl ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;column-gap:clamp(20px,2.5vw,40px)}
.price-incl li{padding:.85em 0 .85em 1.1em;border-top:1px solid var(--line);position:relative;font-size:16px;line-height:1.4}
.price-incl li::before{content:'';position:absolute;left:0;top:1.45em;width:.45em;height:2px;background:var(--red)}
.lp .extras{margin-top:clamp(3rem,5vw,4.5rem);border-top:0;padding-top:0}
.extras ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(16px,2vw,32px)}
.extras li{border-top:2px solid var(--ink);padding-top:1rem;display:flex;flex-direction:column;gap:.2em}
.extras b{font-size:20px;font-weight:600;letter-spacing:-.01em}
.extras span{font-weight:500;line-height:1.35}
.extras small{font-size:14px;color:var(--muted);line-height:1.45}
@media (max-width:1100px){.extras ul{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:860px){.price-grid{grid-template-columns:minmax(0,1fr);row-gap:var(--gap-xl)}}
@media (max-width:560px){.price-incl ul{grid-template-columns:minmax(0,1fr)}.extras ul{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:1.4rem}}
@media (max-width:400px){.extras ul{grid-template-columns:minmax(0,1fr)}}   /* ganz schmal: untereinander */

/* ---------- Dunkles Band: Livemusik + DJ ---------- */
.lp-dark{background:var(--ink);color:#fff;padding-block:var(--section-md)}
.lp-split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,6vw,100px);align-items:center}
.lp-split figure{margin:0;aspect-ratio:4/5;overflow:hidden}
.lp-split figure img{width:100%;height:100%;object-fit:cover}
.lp-dark .roles{display:flex;gap:.2em .6em;font-size:13px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;margin-bottom:1em}
.lp-dark .roles i{font-style:normal;color:var(--red);font-weight:400}
.lp-dark p{color:rgba(255,255,255,.78);max-width:34em}
.lp-dark .text-link{color:#fff}
@media (max-width:860px){.lp-split{grid-template-columns:minmax(0,1fr);row-gap:var(--gap-lg)}.lp-split figure{aspect-ratio:4/4.4}}   /* mobil bildstärker */

/* ---------- Ablauf ---------- */
.steps4{list-style:none;margin:2rem 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(24px,3vw,48px);counter-reset:s}
.steps4 li{counter-increment:s;border-top:1px solid var(--line);padding-top:1.1rem}
.steps4 li::before{content:'0' counter(s);display:block;font-size:13px;font-weight:600;letter-spacing:.14em;color:var(--red);margin-bottom:.6em}
.steps4 h3{font-size:18px;font-weight:600;margin-bottom:.4em}
.steps4 p{color:var(--muted);font-size:15px}
@media (max-width:980px){.steps4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.steps4{grid-template-columns:minmax(0,1fr);gap:var(--gap-lg)}}

/* ---------- Rezensionen: 3 Geschichten → kurze Stimmen → alle aufklappbar ---------- */
.rev{margin:0;padding-top:1.2rem;border-top:1px solid var(--line);break-inside:avoid;-webkit-column-break-inside:avoid}
.rev blockquote{margin:0;font-size:clamp(16px,.2vw + 14.5px,17px);line-height:1.7;max-width:36em}
.rev blockquote p + p{margin-top:.8em}
.rev figcaption{margin-top:1em;font-size:14px;font-weight:600;color:var(--ink)}
/* 1) drei vollständige Rezensionen: links die lange, rechts zwei kürzere übereinander */
.reviews-main{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);column-gap:clamp(40px,5vw,96px);row-gap:clamp(32px,3vw,48px);margin-top:2rem;align-items:start}
.reviews-main .rev-1{grid-row:span 2}
.reviews-main .rev-1 blockquote{font-size:clamp(17px,.3vw + 15px,19px)}
/* 2) kurze Originalaussagen */
.voices{list-style:none;margin:clamp(3rem,5vw,4.5rem) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:clamp(24px,3vw,48px)}
.voices li{border-top:1px solid var(--line);padding:1.1rem 0 1.6rem;font-size:clamp(18px,.5vw + 13px,21px);font-weight:500;line-height:1.4;letter-spacing:-.01em}
/* 3) weitere Rezensionen */
.more-reviews{margin-top:1.4rem}
.more-reviews summary{list-style:none;cursor:pointer;display:inline-block;font-size:16px;font-weight:600;padding-bottom:3px;border-bottom:2px solid var(--red)}
.more-reviews summary::-webkit-details-marker{display:none}
.more-reviews .when-open,.more-reviews[open] .when-closed{display:none}
.more-reviews[open] .when-open{display:inline}
.reviews{columns:2;column-gap:clamp(40px,5vw,96px);margin-top:2rem}
.reviews .rev{margin-bottom:clamp(32px,3vw,48px)}
.quotes-foot{margin-top:2rem;font-size:14px;color:var(--muted)}
.quotes-foot a{color:var(--ink);white-space:nowrap}
@media (max-width:980px){.voices{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:860px){
  .reviews-main{grid-template-columns:minmax(0,1fr)}
  .reviews-main .rev-1{grid-row:auto}
  .reviews{columns:1}
}
@media (max-width:560px){.voices{grid-template-columns:minmax(0,1fr)}.voices li{padding-bottom:1.1rem}}

/* ---------- FAQ (Basis-Styles .faq aus style.css) ---------- */
.lp .faq{margin-top:1.6rem;border-top-color:var(--line)}
.lp .faq details{border-bottom-color:var(--line)}

/* ---------- Anfrage-Formular (Optik wie .hb-form der Startseite) ---------- */
.hz-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.1rem 1rem}
.hz-form .field{min-width:0}
.hz-form input:not([type=checkbox]),.hz-form select,.hz-form textarea{font:inherit;font-size:16px;color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:8px;padding:.8em .9em;width:100%}
.hz-form input:focus,.hz-form select:focus,.hz-form textarea:focus{outline:none;border-color:var(--ink)}
.hz-form textarea{min-height:8em;resize:vertical}
.hz-form select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,#6f6461 50%),linear-gradient(135deg,#6f6461 50%,transparent 50%);
  background-position:calc(100% - 20px) 55%,calc(100% - 15px) 55%;background-size:5px 5px;background-repeat:no-repeat}
.hz-form input[type=date]{min-height:3.1em}
/* iOS Safari: Datumsfelder ignorieren sonst width:100% und bekommen eine eigene Mindestbreite
   aus ihrem Inhalt → Feld (und damit die Seite) wird breiter als der Bildschirm */
.hz-form input[type=date]{-webkit-appearance:none;appearance:none;display:block;min-width:0;max-width:100%;line-height:1.3;text-align:left}
.hz-form input[type=date]::-webkit-date-and-time-value{text-align:left;margin:0}
.hz-form input[type=date]::-webkit-calendar-picker-indicator{margin-left:auto}
.hz-form ::placeholder{color:#a3999a}
.hz-form .invalid{border-color:var(--red)}
.field-error{display:none;font-size:13px;color:var(--red-text)}
.field.has-error .field-error{display:block}
.hz-form .consent{grid-column:1/-1;display:flex;gap:.6rem;align-items:flex-start;font-size:13px;color:var(--muted)}
.hz-form .consent input{margin-top:.25em;accent-color:var(--red);width:17px;height:17px;flex-shrink:0}
.hz-form .consent a{color:var(--ink)}
.hz-form .consent.has-error{color:var(--red)}
.hz-form .btn{justify-self:start}
.hz-form .form-message a{color:inherit}
@media (max-width:520px){.hz-form{grid-template-columns:minmax(0,1fr)}.hz-form .btn{justify-self:stretch;justify-content:center;min-height:52px}}

/* ---------- Mobile-Feinschliff ---------- */
.lp .faq summary{min-height:48px;gap:1rem}
.lp .faq summary::after{flex-shrink:0}
@media (max-width:700px){
  .lp .faq summary{font-size:16px;padding:1rem 0}
  .lp .faq details p{padding:0 0 1.1rem}
  .lp-about .wrap{row-gap:var(--gap-xl)}              /* mehr Luft zwischen Vorstellungstext und Zitat */
  .pull blockquote{font-size:clamp(20px,5.6vw,24px)}
  .lp-dark .sec-title{font-size:clamp(28px,7.6vw,34px)} /* „Nachmittags live …“ bleibt stark */
  .sec-lead{margin-bottom:1.6rem}
  .price-pay{margin:1.1em 0 1.4em}
}
@media (max-width:400px){.lp .hero .roles{letter-spacing:.1em;column-gap:.45em}}   /* Kicker bleibt einzeilig */