/* ==========================================================
   Hauptseite: eigene Ergänzungen zum Live-Design.
   Farben, Schriften und Abstände kommen aus helpers/css/live/.
   ========================================================== */

html body [hidden][hidden][hidden] { display: none !important; }

.skip-link { position: absolute; left: 16px; top: -60px; z-index: 2000; background: var(--gold); color: var(--white); padding: 8px 14px; border-radius: 6px; }
.skip-link:focus { top: 8px; }

/* Bewertungen: Link-Zeile unter den Kundenstimmen */
.drc-bewertungen__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 24px; }

/* ---------- Leistungen: drei Bereiche als Kästen, Bild oben, Text unten ---------- */

.drc-bereiche { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.drc-bereich {
  display: flex; flex-direction: column;
  background: var(--white);
  border: 1px solid var(--gray-mid);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--shadow-sm, 0 2px 8px rgba(0, 0, 0, .06));
  transition: box-shadow var(--t), transform var(--t);
}
.drc-bereich:hover { box-shadow: var(--shadow-md, 0 8px 24px rgba(0, 0, 0, .1)); transform: translateY(-2px); }
.drc-bereich__bild { aspect-ratio: 3 / 2; overflow: hidden; background: var(--charcoal); }
.drc-bereich__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.drc-bereich__body { display: flex; flex-direction: column; gap: 8px; flex: 1; padding: 22px 24px 24px; }
.drc-bereich__tag { font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-dark); }
.drc-bereich h3 { margin: 0; font-size: 1.45rem; color: var(--charcoal-2); }
.drc-bereich__body p { margin: 0; font-size: 1rem; line-height: 1.6; color: var(--gray-text); }
.drc-bereich__link { margin-top: auto; padding-top: 10px; font-weight: 700; font-size: .95rem; color: var(--gold-dark); text-decoration: none; }
.drc-bereich__link:hover { color: var(--charcoal); text-decoration: underline; }

/* Hochzeit hervorgehoben */
.drc-bereich--highlight { border: 2px solid var(--gold); background: #fffbea; }
.drc-bereich--highlight .drc-bereich__tag { color: var(--charcoal-2); }
.drc-bereich--highlight .drc-bereich__link {
  align-self: flex-start; margin-top: auto; padding: 10px 16px;
  background: var(--gold); color: var(--white); border-radius: 6px;
}
.drc-bereich--highlight .drc-bereich__link:hover { background: var(--gold-dark); color: var(--white); text-decoration: none; }

@media (max-width: 900px) {
  .drc-bereiche { grid-template-columns: 1fr; }
}

/* ---------- DJ buchen, ganz einfach: vier Punkte statt drei Schritte ---------- */
.drc-einfach .steps-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1000px) { .drc-einfach .steps-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .drc-einfach .steps-grid { grid-template-columns: 1fr; } }

/* Mobiles Menü direkt unter der fixierten Leiste, damit kein Eintrag verdeckt wird */
@media (max-width: 1180px) {
  .site-nav-mobile.is-open {
    position: fixed; top: var(--nav-h, 62px); left: 0; right: 0; z-index: 999;
    max-height: calc(100vh - var(--nav-h, 62px)); overflow-y: auto;
  }
}

/* DJ Magazin: zwei Themen-Magazine nebeneinander */
.drc-mag-themen { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 24px !important; }
.drc-mag-themen > .hub-card { width: auto !important; max-width: none !important; grid-column: auto !important; }
@media (max-width: 767px) { .drc-mag-themen { grid-template-columns: 1fr !important; } }

/* DJ Magazin: Platzhalter-Beiträge */
.drc-dummy { max-width: 820px !important; }
.drc-dummy__bild { margin: 0 0 24px; }
.drc-dummy__bild img { width: 100%; height: auto; border-radius: 12px; display: block; }
.drc-dummy__hinweis { padding: 12px 16px; background: var(--gold-soft, #f7f1d0); border-left: 3px solid var(--gold, #b9a50b); border-radius: 6px; }

/* Suchsymbol in der Navigation */
.site-nav .site-nav__suche { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 40px; height: 40px; margin-right: 12px; border-radius: 50%; background: rgba(255, 255, 255, .08); color: #e1ca22; transition: background-color .2s ease; }
.site-nav .site-nav__suche:hover, .site-nav .site-nav__suche:focus-visible { background: rgba(255, 255, 255, .18); }
.site-nav .site-nav__suche svg { display: block; }
@media (max-width: 1180px) { .site-nav .site-nav__suche { margin-left: auto; } }