/* =========================================================
   DJ BUCHEN + LIVEMUSIK – bauen auf style.css + hochzeits-dj.css (.lp-System) auf.
   Nur die zusätzlichen Bausteine dieser beiden Seiten. Keine Cards, Icons, Schatten.
   ========================================================= */

/* DJ: kühles Grau der Startseite (Standard-Tokens aus style.css) */
.lp-dj{background:var(--paper)}
/* Livemusik: warmes Sand-Grau – ruhiger, akustischer */
.lp-live{
  --mist:#f2eee8;
  --line:#e3dcd2;
  --muted:#6a635a;
  --ink:#1f1c19;
  background:#fdfcfa;color:var(--ink);
}

/* ---------- Hero: Kennzahlen als Textzeile ---------- */
.lp .hero .facts-line{margin-top:2.2rem;padding-top:1.2rem;border-top:1px solid var(--line);gap:.3rem 2.4rem;max-width:30em}
.lp .hero .facts-line span{display:block}

/* ---------- Anlässe: vier Textspalten ---------- */
.cols4{list-style:none;margin:2rem 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.6rem clamp(20px,2.5vw,40px)}
.cols4 li{border-top:1px solid var(--line);padding-top:1rem}
.cols4 h3{font-size:17px;font-weight:600;letter-spacing:-.01em;margin-bottom:.35em}
.cols4 p{color:var(--muted);font-size:15px;line-height:1.55}
@media (max-width:980px){.cols4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:480px){.cols4{grid-template-columns:minmax(0,1fr);gap:1.2rem}}

/* ---------- Galerie: ruhiges 3er-Raster, mobil Media-Stream ---------- */
.lp-gal{padding-block:var(--gap-md) var(--section-sm)}
/* DJ-Galerie: eigene, etwas lebendigere Komposition im 12er-Raster (nicht die von Hochzeit/Livemusik).
   Oben: großes Querformat als Anker, daneben ein Hochformat tiefer gesetzt und ein kleines Quadrat noch tiefer (Treppe nach rechts).
   Unten: breites, flaches Bild eingerückt, schmales Hochformat, mittleres Querformat – jeweils versetzt.
   Mobile: horizontaler Stream mit Scroll-Snap, nur die Galerie scrollt. */
.gal{max-width:calc(var(--tiles-max) + 2 * var(--page-gutter));margin-inline:auto;padding-inline:var(--page-gutter);
  display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(10px,1.1vw,18px);align-items:start}
.gal figure{margin:0;overflow:hidden;background:var(--mist)}
.gal img{display:block;width:100%;height:100%;object-fit:cover}
/* Desktop: feines 24er-Raster mit Zeilen-Einheit – die Bilder greifen ineinander statt in zwei Reihen zu stehen */
.gal.djg{grid-template-columns:repeat(24,minmax(0,1fr));grid-auto-rows:clamp(14px,1.9vw,30px);column-gap:clamp(8px,1.1vw,16px);row-gap:0;align-items:stretch}
.djg figure{height:100%}
.djg .g1{grid-column:1/12;grid-row:1/16}     /* Anker, groß links */
.djg .g2{grid-column:13/18;grid-row:3/16}    /* Hochformat, tiefer gesetzt */
.djg .g4{grid-column:3/10;grid-row:17/25}    /* breit und flach, eingerückt unter dem Anker */
.djg .g5{grid-column:11/16;grid-row:18/29}   /* Hochformat, fällt weiter nach unten */
.djg .g5 img{object-position:center 35%}
.djg .gv{grid-column:19/25;grid-row:6/23}    /* Video: vertikales Gegengewicht zum Anker links */
.djg .gv{background:center/cover no-repeat url('../images/dj/video-poster.jpg'),var(--ink)}
.djg .gv video{display:block;width:100%;height:100%;object-fit:cover;background:transparent}
@media (max-width:700px){
  .gal{display:flex;align-items:center;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
    scroll-padding-inline:var(--page-gutter);scrollbar-width:none}
  .gal::-webkit-scrollbar{display:none}
  .gal figure{flex:0 0 auto;scroll-snap-align:start;margin:0}
  .gal.djg{align-items:center}
  .djg figure{height:auto}
  .djg .g1{width:84vw;aspect-ratio:4/5}
  .djg .g2{width:68vw;aspect-ratio:3/4}
  .djg .g4{width:84vw;aspect-ratio:3/2}
  .djg .g5{width:66vw;aspect-ratio:4/5}
  .djg .gv{width:min(58vw,300px);aspect-ratio:9/16}
}

/* ---------- Musikrichtungen / kurze Hinweise ---------- */
.sec-note{margin-top:2.2rem;max-width:44em;color:var(--muted);font-size:16px}
.sec-note strong{color:var(--ink);font-weight:600}
.sec-cta{margin-top:2rem;display:flex;flex-wrap:wrap;gap:.6rem 2rem}
.sec-cta .text-link{margin-top:0}

/* ---------- Ablauf mit drei Schritten ---------- */
.steps4.steps3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:860px){.steps4.steps3{grid-template-columns:minmax(0,1fr);gap:var(--gap-lg)}}

/* ---------- Hörproben: Videos ohne Rahmen ---------- */
.videos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(28px,3vw,48px) clamp(16px,2vw,32px);margin-top:2rem}
.vid{margin:0}
.vid-frame{position:relative;display:block;width:100%;aspect-ratio:16/9;padding:0;border:0;background:var(--ink);cursor:pointer;overflow:hidden}
.vid-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.vid-frame:hover img{transform:scale(1.02)}
.vid-frame::after{content:'';position:absolute;left:50%;top:50%;width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:50%;background:rgba(255,255,255,.94)}
.vid-frame::before{content:'';position:absolute;left:50%;top:50%;z-index:1;margin:-10px 0 0 -6px;border-style:solid;border-width:10px 0 10px 17px;border-color:transparent transparent transparent var(--red)}
.vid-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.vid-frame.playing::before,.vid-frame.playing::after{display:none}
.vid-note{margin-top:1.2rem;font-size:13px;color:var(--muted);max-width:60ch}
.vid-note a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.vid figcaption{margin-top:.9rem}
.vid h3{font-size:17px;font-weight:600;letter-spacing:-.01em}
.vid p{color:var(--muted);font-size:14px;margin-top:.2em}
@media (max-width:700px){.videos{grid-template-columns:minmax(0,1fr)}}

/* ---------- Setlist: nummerierte Liste in vier Spalten ---------- */
.setlist-block{margin-top:0}
.setlist{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:clamp(20px,2.5vw,40px);counter-reset:song}
.setlist li{counter-increment:song;display:grid;grid-template-columns:2.2em minmax(0,1fr);border-top:1px solid var(--line);padding:.7rem 0;line-height:1.35}
.setlist li::before{content:counter(song,decimal-leading-zero);font-size:12px;font-weight:600;letter-spacing:.08em;color:var(--red);padding-top:.25em}
.setlist b{display:block;font-size:15px;font-weight:600}
.setlist span{font-size:13px;color:var(--muted)}
.setlist-toggle{display:none;margin-top:1rem;background:none;border:0;padding:0 0 3px;font:600 16px/1.3 var(--font);color:var(--ink);border-bottom:2px solid var(--red);cursor:pointer}
@media (max-width:980px){.setlist{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){
  .setlist{grid-template-columns:minmax(0,1fr)}
  .setlist:not(.open) li:nth-child(n+7){display:none}
  .setlist-toggle{display:inline-block}
}

/* ---------- Livemusik-Pakete: vier Spalten, Linie statt Karte ---------- */
.pkgs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(32px,3vw,48px) clamp(20px,2.5vw,40px);margin-top:2.2rem}
.pkg{display:flex;flex-direction:column;border-top:2px solid var(--ink);padding-top:1.4rem}
.pkg-price{font-size:clamp(28px,1vw + 18px,36px);font-weight:600;letter-spacing:-.03em;line-height:1}
.pkg-price small{font-size:.5em;font-weight:500;letter-spacing:0;color:var(--muted);margin-right:.25em}
.pkg h3{font-size:18px;font-weight:600;letter-spacing:-.01em;margin:.9em 0 .3em}
.pkg .pkg-desc{color:var(--muted);font-size:15px}
.pkg .pkg-desc strong{display:block;color:var(--ink);font-weight:600;margin-bottom:.2em}
.pkg .pkg-ideal{font-size:14px;color:var(--muted);margin-top:1em}
.pkg .pkg-ideal b{display:block;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);margin-bottom:.2em}
.pkg ul{list-style:none;margin:1.1rem 0 0;padding:0}
.pkg li{position:relative;padding:.6em 0 .6em 1.1em;border-top:1px solid var(--line);font-size:15px;line-height:1.4}
.pkg li::before{content:'';position:absolute;left:0;top:1.2em;width:.45em;height:2px;background:var(--red)}
.pkg .text-link{margin-top:1.2rem;align-self:flex-start;font-size:16px}
@media (max-width:1100px){.pkgs{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.pkgs{grid-template-columns:minmax(0,1fr)}}

/* ---------- Kontakt: Hinweiszeile unter dem Formular ---------- */
.form-note{grid-column:1/-1;font-size:13px;color:var(--muted);margin-top:-.2rem}

/* Gewollter Zeilenumbruch in Headlines – nur wo genug Breite da ist */
@media (max-width:374px){.br-wide{display:none}}

/* Längeres Kundenzitat im Vorstellungsbereich: gleiche Gestaltung, etwas kleiner wegen der Textlänge */
.pull-long blockquote{font-size:clamp(20px,.6vw + 14px,26px);line-height:1.4}
@media (max-width:700px){.pull-long blockquote{font-size:clamp(19px,5.2vw,22px)}}

/* Livemusik: Kontakt auf der hellen Grundfläche, damit er sich vom getönten FAQ absetzt.
   Feldrahmen einen Hauch kräftiger, damit weiße Felder auf hellem Grund klar erkennbar bleiben. */
.lp-live .contact,.lp-dj .contact{background:transparent}
.lp-live .contact .hz-form input:not([type=checkbox]),.lp-live .contact .hz-form select,.lp-live .contact .hz-form textarea{border-color:#d3cabd}
.lp-dj .contact .hz-form input:not([type=checkbox]),.lp-dj .contact .hz-form select,.lp-dj .contact .hz-form textarea{border-color:#c9ced3}
.lp-live .contact .hz-form input:focus,.lp-live .contact .hz-form select:focus,.lp-live .contact .hz-form textarea:focus,.lp-dj .contact .hz-form input:focus,.lp-dj .contact .hz-form select:focus,.lp-dj .contact .hz-form textarea:focus{border-color:var(--ink)}

/* ---------- Livemusik: Foto-Strip ----------
   Visueller Break zwischen Anlässen und Paketen. Eigene Komposition (nicht die der Hochzeitsseite):
   12er-Raster – großes Querformat links, Hochformat und kleines Detail rechts daneben leicht versetzt,
   darunter ein mittleres Querformat eingerückt und ein breites, niedriges Foto rechts, ebenfalls versetzt.
   Mobile: horizontaler Stream mit Scroll-Snap, nur der Strip scrollt. */
.lp-strip{padding-block:0 var(--section-md)}
.strip{max-width:calc(var(--tiles-max) + 2 * var(--page-gutter));margin-inline:auto;padding-inline:var(--page-gutter);
  display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(10px,1.1vw,18px);row-gap:clamp(10px,1.1vw,18px);align-items:start}
.s{margin:0;overflow:hidden;background:var(--mist)}
.s img{display:block;width:100%;height:100%;object-fit:cover}
.s-a{grid-column:1/7;grid-row:1;aspect-ratio:3/2}
.s-b{grid-column:7/9;grid-row:1/3;aspect-ratio:2/5;margin-top:clamp(28px,4vw,72px)}   /* schmales Hochformat 2:5 */
.s-c{grid-column:9/13;grid-row:1;aspect-ratio:1/1;width:62%;justify-self:end}
.s-e{grid-column:3/6;grid-row:2;aspect-ratio:4/3;margin-top:clamp(0px,1vw,16px)}
.s-d{grid-column:9/13;grid-row:2;aspect-ratio:3/2;margin-top:clamp(20px,3vw,56px)}
.s-a img{object-position:50% 35%}
.s-c img{object-position:50% 70%}   /* Ausschnitt etwas tiefer */
.s-e img{object-position:center 30%}
@media (max-width:700px){
  .strip{display:flex;align-items:center;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
    scroll-padding-inline:var(--page-gutter);scrollbar-width:none}
  .strip::-webkit-scrollbar{display:none}
  .s{flex:0 0 auto;scroll-snap-align:start;margin:0;width:auto}
  .s-a{width:84vw;aspect-ratio:4/5}
  .s-b{width:42vw;aspect-ratio:2/5}
  .s-c{width:58vw}
  .s-e{width:82vw}
  .s-d{width:84vw;aspect-ratio:3/2}
}

/* Livemusik: dunkles Band – das Bild ist eine Querformat-Datei (4:3) mit zwei Fotos nebeneinander.
   Im 4:5-Hochformat-Rahmen der Hochzeitsseite wurden links und rechts rund 40 % abgeschnitten.
   Daher hier: Bildspalte breiter, Rahmen im Seitenverhältnis der Datei – auch mobil. */
.lp-live .lp-split,.lp-dj .lp-split{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,88px)}
.lp-live .lp-split figure,.lp-dj .lp-split figure{aspect-ratio:4/3}
@media (max-width:860px){.lp-live .lp-split,.lp-dj .lp-split{grid-template-columns:minmax(0,1fr)}.lp-live .lp-split figure,.lp-dj .lp-split figure{aspect-ratio:4/3}}


/* ---------- DJ buchen ---------- */
/* Anlässe in drei Spalten */
.cols4.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:860px){.cols4.cols-3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:480px){.cols4.cols-3{grid-template-columns:minmax(0,1fr)}}
.sec-note a{color:var(--ink);text-underline-offset:3px;text-decoration-color:var(--red)}
/* Technik und Umfang: zwei schlichte Listen */
.scope{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(28px,4vw,72px);max-width:960px}
.scope h3{font-size:18px;font-weight:600;letter-spacing:-.01em;padding-bottom:.7rem;border-bottom:2px solid var(--ink)}
.scope ul{list-style:none;margin:0;padding:0}
.scope li{position:relative;padding:.75em 0 .75em 1.1em;border-bottom:1px solid var(--line);font-size:16px;line-height:1.4}
.scope li::before{content:'';position:absolute;left:0;top:1.4em;width:.45em;height:2px;background:var(--red)}
@media (max-width:600px){.scope{grid-template-columns:minmax(0,1fr)}}
/* Musikrichtungen: ruhige Liste mit feinen Linien (wie die Setlist), keine Tags */
.genres{list-style:none;margin:1.8rem 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:clamp(20px,2.5vw,40px);max-width:1000px}
.genres li{border-top:1px solid var(--line);padding:.7rem 0;font-size:clamp(18px,.4vw + 14px,21px);font-weight:600;letter-spacing:-.01em;line-height:1.3}
@media (max-width:760px){.genres{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* DJ buchen: Einstiegspreis im Bereich „Technik und Umfang“ – sichtbar, aber ohne Preis-Karte */
.lp-dj .from-price{margin:.2rem 0 1rem;font-size:clamp(20px,.6vw + 15px,24px);letter-spacing:-.01em;color:var(--ink)}
.lp-dj .from-price b{font-size:1.5em;font-weight:600;letter-spacing:-.03em;margin:0 .1em}
.lp-dj .from-price small{font-size:15px;color:var(--muted);margin-left:.2em;white-space:nowrap}
.lp-dj .from-price b{white-space:nowrap}