/* ============================================================
   DJ Dennz – Design-Politur
   Zielt auf die sprechenden Block-classNames der Seiten.
   Hält den Editor-Inhalt sauber; Schatten/Hover/Feinschliff hier.
   Editierbar unter: Design → Zusätzliches CSS
   ============================================================ */

/* --- Karten: weicher Schatten + Hover-Lift --- */
.card, .step, .review {
  box-shadow: 0 14px 34px rgba(40, 32, 12, .09);
  transition: transform .15s ease, box-shadow .15s ease;
}
.card:hover, .step:hover, .review:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 44px rgba(40, 32, 12, .14);
}

/* --- Hero: Bewertungs-Badge als schwebende Pille --- */
.hero__badge {
  width: fit-content;
  margin-inline: auto;
  padding: 9px 18px;
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: 99px;
  background: rgba(255, 255, 255, .10);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* --- Über mich: Namenskärtchen schwebend über der Bildecke --- */
.ueber-mich .wp-block-image { position: relative; }
.ueber-mich .wp-block-image img {
  border-radius: 18px;
  box-shadow: 0 24px 60px rgba(40, 32, 12, .18);
}
.ueber-mich figcaption.wp-element-caption {
  position: absolute;
  left: 18px;
  bottom: 18px;
  margin: 0;
  padding: 12px 18px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .94);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 10px 28px rgba(40, 32, 12, .18);
  color: #221E15;
  font-weight: 700;
  font-size: 13.5px;
}

/* --- Technik-Teaser: Schatten am dunklen Panel --- */
.technik-teaser > .wp-block-group {
  box-shadow: 0 28px 60px rgba(30, 24, 10, .30);
}

/* --- Gold-Buttons (Gradient): weicher Gold-Schatten --- */
.wp-block-button__link.has-background {
  box-shadow: 0 12px 28px rgba(191, 155, 68, .40);
  transition: box-shadow .15s ease;
}
.wp-block-button__link.has-background:hover {
  box-shadow: 0 14px 34px rgba(191, 155, 68, .55);
}

/* --- Icon-Badges bei fester Größe halten --- */
.anlaesse .wp-block-image img { width: 58px; height: 58px; }

/* --- Header: sticky + Feinschliff --- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 #EFE9DC, 0 6px 24px rgba(40, 32, 12, .05);
}
.site-header .wp-block-navigation a { color: #55503F; }
.site-header .wp-block-navigation a:hover { color: #A8842F; }
.site-header .wp-block-navigation .current-menu-item > a,
.site-header .wp-block-navigation .current_page_item > a { color: #A8842F; font-weight: 700; }

/* --- Footer: Farben + Links --- */
.site-footer, .site-footer p { color: #A79F8C; }
.site-footer a { color: #A79F8C; text-decoration: none; }
.site-footer a:hover { color: #E4C368; }

/* --- WhatsApp-FAB (fix unten rechts) --- */
.wa-fab {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 200;
  margin: 0;
}
.wa-fab .wp-block-button__link { box-shadow: 0 10px 26px rgba(0, 0, 0, .3); }

/* --- Timeline (Hochzeit / Weihnachtsfeier) --- */
.timeline-item { position: relative; padding-left: 30px; padding-bottom: 34px; border-left: 2px solid #EDE5D2; margin-left: 6px; }
.timeline-item:last-child { border-left-color: transparent; padding-bottom: 0; }
.timeline-item::before {
  content: ""; position: absolute; left: -9px; top: 3px;
  width: 16px; height: 16px; border-radius: 50%;
  background: linear-gradient(135deg, #CBA84F, #A8842F);
  box-shadow: 0 4px 10px rgba(191, 155, 68, .4);
}

/* --- FAQ-Akkordeon (details/summary) --- */
.faq .wp-block-details { box-shadow: 0 8px 22px rgba(40, 32, 12, .05); }
.faq .wp-block-details summary {
  list-style: none; cursor: pointer; padding: 20px 26px;
  font-weight: 700; font-size: 16px;
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
}
.faq .wp-block-details summary::-webkit-details-marker { display: none; }
.faq .wp-block-details summary::after {
  content: "+"; color: #A8842F; font-size: 22px; font-weight: 400; transition: transform .2s;
}
.faq .wp-block-details[open] summary::after { transform: rotate(45deg); }
.faq .wp-block-details > :not(summary) { margin: 0 26px 22px; font-size: 15px; line-height: 1.7; color: #6C6659; }

/* --- Leistungen: Checkmark-Karten --- */
.check-badge {
  flex: none; width: 28px; height: 28px; border-radius: 50%;
  background: linear-gradient(135deg, #CBA84F, #A8842F);
  color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 14px;
}
.incl-card > .wp-block-group { flex: 1; }

/* --- Musik-Genre-Pills --- */
.pill {
  background: #F7F1E3; color: #8A6D28; border-radius: 99px;
  padding: 10px 20px; font-size: 14px; font-weight: 700; margin: 0;
}

/* --- Equipment: Bild-Platzhalter & Mietkarten --- */
.rent-card { overflow: hidden; }
.img-slot {
  min-height: 200px; background: #F1EBDD;
  display: flex; align-items: center; justify-content: center;
  padding: 16px; text-align: center;
}
.img-slot p { color: #9A937F; font-size: 13px; font-weight: 600; }

/* --- Video-Übersicht (Vimeo, vertikal 9:16) --- */
.impressionen .video-slot {
  aspect-ratio: 9 / 16;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  background: linear-gradient(160deg, #2a251b, #1b1811);
  border: 1px solid rgba(228, 195, 104, 0.22);
  border-radius: 16px;
}
.video-slot .vs-play {
  width: 54px; height: 54px; border-radius: 50%; margin-inline: auto;
  background: rgba(228, 195, 104, 0.14); border: 1.5px solid #E4C368;
  color: transparent; position: relative; font-size: 0;
}
.video-slot .vs-play::after {
  content: ""; position: absolute; top: 50%; left: 55%; transform: translate(-50%, -50%);
  border-style: solid; border-width: 9px 0 9px 15px;
  border-color: transparent transparent transparent #E4C368;
}
.video-slot .vs-lbl { font-size: 12.5px; color: #a49e8f; line-height: 1.4; }
@media (max-width: 600px) {
  .impressionen > .wp-block-group.is-layout-grid { grid-template-columns: 1fr 1fr !important; }
}

/* --- Bit Form: Absende-Button auf Marken-Gold + Fokus-Farbe --- */
.bf-form button[type="submit"],
.bf-form .bf-btn {
  background: linear-gradient(135deg, #CBA84F, #A8842F) !important;
  border: none !important;
  border-radius: 12px !important;
  color: #fff !important;
  font-weight: 700 !important;
  box-shadow: 0 12px 28px rgba(191, 155, 68, .40) !important;
}
.bf-form button[type="submit"]:hover,
.bf-form .bf-btn:hover {
  box-shadow: 0 14px 34px rgba(191, 155, 68, .55) !important;
}
.bf-form input:focus,
.bf-form select:focus,
.bf-form textarea:focus {
  outline: 2px solid #C9A94F !important;
  outline-offset: 0 !important;
}

/* --- Kontakt: Direktkontakt-Karte --- */
.direktkontakt .kontakt-row { border-bottom: 1px solid rgba(255, 255, 255, .12); padding: 16px 0; position: relative; }
.direktkontakt .kontakt-row:last-child { border-bottom: none; padding-bottom: 0; }
.direktkontakt .kontakt-row::after { content: "\2192"; position: absolute; right: 0; top: 16px; color: #E4C368; font-size: 20px; }
.direktkontakt .kontakt-row a { color: #fff; text-decoration: none; font-weight: 700; font-size: 16px; }
.direktkontakt .kontakt-row a:hover { color: #E4C368; }
.direktkontakt .kontakt-row .sub { color: rgba(255, 255, 255, .55); font-size: 13px; }

/* --- Kontakt: Formular-Platzhalter --- */
.form-slot { border: 2px dashed #D8CEB6; border-radius: 12px; padding: 28px; text-align: center; background: #FDFBF6; }
.form-slot p { color: #8A7F63; }

/* ============================================================
   Korrekturen (Review-Runde)
   ============================================================ */

/* Karten, die den Hero überlappen, nach vorn holen (sonst deckt das Hero-Overlay sie ab) */
.anlaesse { position: relative; z-index: 2; }

/* Kein weißer Strich zwischen Header und Inhalt (Theme-Grundabstand über main) */
.wp-site-blocks > main { margin-block-start: 0 !important; }

/* Gefüllte Buttons (Gold-Gradient & grüner WhatsApp) immer mit weißer Schrift */
.wp-block-button__link.has-background { color: #ffffff; }

/* ============================================================
   Mobile App-Tab-Leiste (unten am Rand, wie in einer App)
   ============================================================ */
.app-tabbar { display: none; }
@media (max-width: 781.98px) {
  .app-tabbar {
    display: flex; justify-content: space-around; align-items: stretch;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 300;
    background: rgba(255, 255, 255, 0.97);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border-top: 1px solid #EFE9DC;
    box-shadow: 0 -4px 22px rgba(40, 32, 12, 0.09);
    padding: 8px 2px calc(6px + env(safe-area-inset-bottom, 0px));
  }
  .app-tabbar .app-tab {
    flex: 1; min-width: 0; padding: 4px 2px;
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    text-decoration: none; color: #837D6C;
    font-size: 10.5px; font-weight: 600; line-height: 1.1;
  }
  .app-tabbar .app-tab svg { width: 23px; height: 23px; display: block; }
  .app-tabbar .app-tab span { white-space: nowrap; }
  .app-tabbar .tab-wa { color: #1FAF5E; }
  .home .app-tabbar .tab-home,
  .page-id-21 .app-tabbar .tab-home,
  .page-id-35 .app-tabbar .tab-leistungen,
  .page-id-37 .app-tabbar .tab-technik,
  .page-id-39 .app-tabbar .tab-kontakt { color: #A8842F; }
  /* Floating-WhatsApp weg (steckt jetzt in der Leiste) + Platz unten schaffen */
  .wa-fab { display: none !important; }
  body { padding-bottom: 70px; }
}

/* ============================================================
   Bewegung – Scroll-Reveals, Hero-Einblendung, Mikro-Interaktionen
   Alles rücksichtsvoll hinter prefers-reduced-motion: no-preference.
   Reveal-Klassen setzt assets/js/djdennz.js; ohne JS bleibt alles sichtbar.
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {

  /* --- Scroll-Reveal: Grundzustand + Einblendung (Stagger über --i) --- */
  .djd-reveal {
    opacity: 0;
    transform: translateY(26px);
    transition:
      opacity .7s cubic-bezier(.16, .7, .3, 1),
      transform .7s cubic-bezier(.16, .7, .3, 1);
    transition-delay: calc(var(--i, 0) * 85ms);
  }
  .djd-reveal.is-in {
    opacity: 1;
    transform: none;
  }

  /* --- Hero: gestaffelte Einblendung beim Laden --- */
  .hero .wp-block-cover__inner-container > * {
    opacity: 0;
    transform: translateY(22px);
    animation: djdHeroIn .85s cubic-bezier(.16, .7, .3, 1) forwards;
  }
  .hero .wp-block-cover__inner-container > *:nth-child(1) { animation-delay: .10s; }
  .hero .wp-block-cover__inner-container > *:nth-child(2) { animation-delay: .24s; }
  .hero .wp-block-cover__inner-container > *:nth-child(3) { animation-delay: .40s; }
  .hero .wp-block-cover__inner-container > *:nth-child(4) { animation-delay: .56s; }
  .hero .wp-block-cover__inner-container > *:nth-child(5) { animation-delay: .70s; }
  @keyframes djdHeroIn { to { opacity: 1; transform: none; } }

  /* --- Hero-Bild: langsamer Ken-Burns-Zoom --- */
  /* Ken-Burns entfernt (Compositing-Bug: Hero-Bild rendert beim Laden grau) */

  /* --- Buttons: Gold-Glanz-Sweep beim Hover --- */
  .wp-block-button__link { position: relative; overflow: hidden; }
  .wp-block-button__link.has-background::after {
    content: "";
    position: absolute; top: 0; bottom: 0; left: -80%;
    width: 45%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .45), transparent);
    transform: skewX(-20deg);
    pointer-events: none;
    opacity: 0;
  }
  .wp-block-button__link.has-background:hover::after { animation: djdShine .75s ease; }
  @keyframes djdShine {
    0%   { left: -80%; opacity: 1; }
    100% { left: 130%; opacity: 1; }
  }

  /* --- Anlass-Karten: Icon zoomt beim Hover sanft an --- */
  .anlaesse .card .wp-block-image img { transition: transform .25s ease; }
  .anlaesse .card:hover .wp-block-image img { transform: scale(1.12) rotate(-3deg); }

  /* --- App-Tab-Leiste schiebt sich mobil sanft von unten ein --- */
  @media (max-width: 781.98px) {
    .app-tabbar { animation: djdTabbarIn .5s .3s ease both; }
    @keyframes djdTabbarIn {
      from { transform: translateY(100%); }
      to   { transform: translateY(0); }
    }
  }
}


/* --- Vimeo-Reels (Impressionen, 9:16 vertikal) --- */
.impressionen .reel { aspect-ratio: 9 / 16; border-radius: 16px; overflow: hidden; background: #1b1811; box-shadow: 0 14px 34px rgba(40, 32, 12, .14); }
.impressionen .reel iframe { width: 100%; height: 100%; border: 0; display: block; }
.impressionen .reel .djd-embed-block { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 0; border-radius: 0; padding: 18px; }

/* --- Impressionen-Reels: Desktop eine 5er-Reihe, Mobile Swipe-Strip --- */
@media (min-width: 860px) {
  .impressionen .is-layout-grid { grid-template-columns: repeat(5, 1fr) !important; }
}
@media (max-width: 600px) {
  .impressionen .is-layout-grid {
    display: flex !important;
    grid-template-columns: none !important;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 12px !important;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 10px;
    scrollbar-width: none;
  }
  .impressionen .is-layout-grid::-webkit-scrollbar { display: none; }
  .impressionen .reel { flex: 0 0 70%; scroll-snap-align: center; }
}

/* --- Hero-Text lesbar über Foto-Hintergrund --- */
.hero__title, .hero .wp-block-cover__inner-container p { text-shadow: 0 2px 20px rgba(0, 0, 0, .5); }

/* --- Hero-Overlay robust: RGBA statt opacity-Layer (behebt Compositing-Bug, Bild blieb beim Laden grau) --- */
.hero .wp-block-cover__background { opacity: 1 !important; background-color: rgba(28, 23, 13, .5) !important; }

/* --- Hero-Bild robust als CSS-Background (umgeht Chrome-Paint-Bug des Cover-<img>) --- */
.hero { background-size: cover; background-position: center; background-repeat: no-repeat; }
/* --- Pro Seite ein eigenes Header-Bild (Cover-Heroes) --- */
body.page-id-21 .hero { background-image: url(/wp-content/uploads/2026/07/Dennis-Brandenbur.jpg); background-position: 66% 26%; }
body.page-id-31 .hero { background-image: url(/wp-content/uploads/2026/07/WhatsApp-Image-2026-07-05-at-12.18.58-scaled.jpeg); }
body.page-id-34 .hero { background-image: url(/wp-content/uploads/2026/07/WhatsApp-Image-2026-07-05-at-12.18.49-1.jpeg); }
.hero img.wp-block-cover__image-background { display: none !important; }

/* --- Footer: Original-Logo weiß auf dunklem Grund --- */
.site-footer .footer-logo { margin: 0 0 4px; }
.site-footer .footer-logo img { filter: brightness(0) invert(1); height: auto; }

/* --- Technik-Seite: Foto-Header auf Miet-Karten --- */
.rent-card .rent-photo { margin: 0; }
.rent-card .rent-photo img { width: 100%; height: 190px; object-fit: cover; border-radius: 18px 18px 0 0; display: block; }
/* Technik: Showcase-Bild */
.technik-showcase { margin: 0; }
.technik-showcase img { display: block; width: 100%; max-height: 440px; object-fit: cover; }
/* Technik: PA & Licht Aufbaupakete (Desktop 3 Spalten, Mobile Swipe) */
.paket-card { overflow: hidden; box-shadow: 0 14px 34px rgba(40, 32, 12, .08); }
.paket-card .paket-photo { margin: 0; }
.paket-card .paket-photo img { width: 100%; height: 210px; object-fit: cover; border-radius: 18px 18px 0 0; display: block; }
@media (max-width: 700px) {
  .pakete .pakete-grid { display: flex !important; grid-template-columns: none !important; overflow-x: auto; scroll-snap-type: x mandatory; gap: 16px !important; -webkit-overflow-scrolling: touch; padding-bottom: 10px; scrollbar-width: none; }
  .pakete .pakete-grid::-webkit-scrollbar { display: none; }
  .paket-card { flex: 0 0 84%; scroll-snap-align: center; }
}

/* --- Fix Chrome-Paint-Bug bei object-fit-cover-Bildern: eigener GPU-Layer --- */
.rent-photo img, .paket-photo img, .technik-showcase img { transform: translateZ(0); }

/* --- Technik: freigestellte Ausstattungs-Fotos (weißer BG verschwindet via multiply) --- */
.ausstattung .produkt-foto { margin: 0; }
.ausstattung .produkt-foto img { max-width: 240px; height: 190px; object-fit: contain; margin-inline: auto; mix-blend-mode: multiply; display: block; }
.ausstattung .produkt { padding: 8px; }

/* --- Footer: Instagram-Platzhalter (@dj.dennz) --- */
.insta { max-width: 1200px; margin: 0 auto; padding-bottom: 40px; border-bottom: 1px solid #ffffff1a; }
.insta__head { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 16px; margin-bottom: 22px; }
.insta__eyebrow { color: #E4C368; font-size: 11.5px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; margin: 0 0 4px; }
.insta__handle { color: #fff; font-size: 22px; font-weight: 800; margin: 0; font-family: "Clash Display", "Space Grotesk", sans-serif; }
.insta__btn { display: inline-block; border: 1px solid #E4C368; color: #E4C368; border-radius: 99px; padding: 10px 20px; font-size: 13.5px; font-weight: 700; text-decoration: none; transition: background .15s, color .15s; }
.insta__btn:hover { background: #E4C368; color: #1E1A12; }
.insta__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.insta__tile { aspect-ratio: 1; border-radius: 14px; background: #26221A; border: 1px solid rgba(228, 195, 104, .18); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: #8a8272; }
.insta__tile svg { color: #E4C368; opacity: .85; }
.insta__tile span { font-size: 12px; }

/* --- Gradient-Heroes -> Foto-Header (Leistungen, Technik, Kontakt) --- */
body.page-id-35 .leistungen-hero, body.page-id-37 .equipment-hero, body.page-id-39 .kontakt-hero { background-size: cover !important; background-position: center !important; background-repeat: no-repeat !important; }
body.page-id-35 .leistungen-hero { background-image: linear-gradient(180deg, rgba(20,16,8,.5), rgba(20,16,8,.68)), url(/wp-content/uploads/2026/07/WhatsApp-Image-2026-07-05-at-12.19.01-scaled.jpeg) !important; }
body.page-id-37 .equipment-hero { background-image: linear-gradient(180deg, rgba(20,16,8,.5), rgba(20,16,8,.68)), url(/wp-content/uploads/2026/07/WhatsApp-Image-2026-07-05-at-12.19.00-2-scaled.jpeg) !important; }
body.page-id-39 .kontakt-hero { background-image: linear-gradient(180deg, rgba(20,16,8,.5), rgba(20,16,8,.68)), url(/wp-content/uploads/2026/07/WhatsApp-Image-2026-07-05-at-12.18.53-scaled.jpeg) !important; }
body.page-id-35 .leistungen-hero :is(h1,h2,p), body.page-id-37 .equipment-hero :is(h1,h2,p), body.page-id-39 .kontakt-hero :is(h1,h2,p) { color: #f4efe6 !important; text-shadow: 0 2px 16px rgba(0,0,0,.5); }
body.page-id-35 .leistungen-hero mark span, body.page-id-37 .equipment-hero mark span, body.page-id-39 .kontakt-hero mark span { color: #E4C368 !important; }

/* Instagram-Feed (Smash Balloon) im Footer an das .insta-Design angleichen */
.insta__feed { margin-top: 2px; }
.insta__feed #sb_instagram { padding: 0 !important; margin: 0 !important; width: 100% !important; }
.insta__feed #sb_instagram #sbi_images { gap: 14px !important; margin: 0 !important; }
.insta__feed #sb_instagram .sbi_item { border-radius: 14px !important; overflow: hidden !important; }
.insta__feed #sb_instagram .sbi_item .sbi_photo,
.insta__feed #sb_instagram .sbi_item img { border-radius: 14px !important; }
.insta__feed #sb_instagram .sbi_loader { filter: invert(1); opacity:.4; }

/* Impressum: Kontaktzeile (Telefon/E-Mail per JS entschlüsselt) */
.legal-contact { color:#5C574A; font-size:16px; line-height:1.9; margin:0 0 28px; }
.legal-contact a { color:#221E15; text-decoration:none; border-bottom:1px solid rgba(34,30,21,.22); transition:color .15s, border-color .15s; }
.legal-contact a:hover { color:#A8842F; border-color:#A8842F; }