/* ==========================================================
   Hochzeits-DJ Subdomain: eigene Ergänzungen zum Live-Design.
   Wird nach den CSS-Dateien der Live-Seite geladen. Farben,
   Schriften und Abstände kommen aus helpers/css/live/.
   ========================================================== */

:root {
  --ok:        #2f7d32;
  --ok-bg:     #e8f5e1;
  --fehler:    #b3261e;
  --fehler-bg: #fdecea;
  --info-bg:   #f1f1f1;
  --gold-soft: #fbf6dc;
  --radius:    var(--r-lg, 14px);
  --radius-s:  var(--r, 8px);
  --shadow:    var(--shadow-md, 0 8px 24px rgba(0, 0, 0, .07));
}

/* hidden muss gegen display-Regeln der Live-CSS gewinnen */
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; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- Karten und Buttons (eigene Varianten) ---------- */

.hdj-card { background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow); padding: 24px; }

.btn--dunkel { background: var(--charcoal); color: var(--white); }
.btn--dunkel:hover:not(:disabled) { background: var(--charcoal-2); color: var(--white); }
.btn--rahmen { background: var(--white); color: var(--charcoal); border: 2px solid var(--gold); }
.btn--rahmen:hover:not(:disabled) { background: var(--gold-soft); }
.btn--klein { padding: 9px 14px; font-size: .76rem; background: var(--charcoal); color: var(--white); }
.btn--klein:hover:not(:disabled) { background: var(--charcoal-2); color: var(--white); }
.btn--chip { padding: 6px 12px; margin: 4px 6px 0 0; font-size: .8rem; background: var(--gold-soft); color: var(--charcoal); border: 1px solid var(--gold); }
.btn--gross { padding: 16px 26px; font-size: .92rem; }
.btn--pfeil::after { content: "›"; font-size: 1.3em; line-height: 1; }
.btn--zurueck::before { content: "‹"; font-size: 1.3em; line-height: 1; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.konfig .btn, .schritt .btn, .hdj-anfrage .btn { white-space: normal; text-align: center; justify-content: center; }

/* ---------- Hero: Einsatzgebiete ---------- */

.hdj-hero-regionen { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 14px; margin-top: 22px; font-size: .9rem; }
.hdj-hero-regionen__titel { color: #fff !important; text-shadow: 0 1px 3px rgba(0, 0, 0, .6); font-weight: 700; text-transform: uppercase; letter-spacing: .12em; font-size: .72rem; }
.hdj-hero-regionen a { color: var(--white); font-weight: 700; text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, .45); text-shadow: 0 2px 8px rgba(0, 0, 0, .8); }
.hdj-hero-regionen a:hover { color: var(--gold-light); border-bottom-color: var(--gold-light); }

/* ---------- Unternavigation unter dem Hero ---------- */

.subnav { position: sticky; top: var(--nav-h); z-index: 900; background: var(--white); border-bottom: 1px solid var(--gray-mid); box-shadow: 0 2px 6px rgba(0, 0, 0, .05); }
.subnav__list { display: flex; justify-content: center; gap: 4px; list-style: none; margin: 0 auto; overflow-x: auto; }
.subnav__link { display: block; padding: 14px 16px; font-size: .9rem; font-weight: 700; color: var(--charcoal); text-decoration: none; white-space: nowrap; border-bottom: 3px solid transparent; }
.subnav__link:hover { color: var(--gold-dark); border-bottom-color: var(--gold); }
html { scroll-padding-top: calc(var(--nav-h) + 56px); }

/* ---------- Kontrast-Abschnitt (Passen wir zusammen) ---------- */

.hdj-kontrast { background: var(--charcoal); }
.hdj-kontrast .wedding-section-head h2 { color: var(--white); }
.hdj-kontrast .wedding-section-head p { color: rgba(255, 255, 255, .82); }
.hdj-kontrast .eyebrow { color: var(--gold-light); }

/* ---------- Abschluss-CTA ---------- */

.hdj-cta__inner { text-align: center; max-width: 820px; }
.hdj-cta__inner p { margin: 10px auto 22px; }

/* ---------- Formularfelder ---------- */

.feld { display: flex; flex-direction: column; gap: 4px; }
.feld__label { font-size: .82rem; font-weight: 700; color: var(--charcoal); }
.feld__label small, .feld__optional { font-weight: 400; color: var(--gray-muted); }
.feld__input {
  width: 100%; min-height: 46px; padding: 10px 14px;
  font-family: var(--font); font-size: 1rem; color: var(--charcoal-2);
  background: var(--white); border: 1px solid #c9c9c9; border-radius: 8px;
}
textarea.feld__input { min-height: 110px; resize: vertical; }
.feld__input:focus { border-color: var(--gold); outline: 2px solid var(--gold-soft); }
.feld__input:disabled { background: var(--gray-light); color: var(--gray-muted); }
.feld__input[aria-invalid="true"] { border-color: var(--fehler); }
.feld__hilfe { font-size: .76rem; color: var(--gray-muted); }
.feld__fehler { min-height: 1em; font-size: .78rem; color: var(--fehler); }
.feld--versteckt { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.meldung { padding: 10px 14px; border-radius: 8px; }
.meldung--fehler { background: var(--fehler-bg); color: var(--fehler); }

/* ---------- Zugangsschutz Testumgebung ---------- */

.zugang { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 16px; }
.zugang__form { width: 100%; max-width: 380px; display: flex; flex-direction: column; gap: 14px; }
.zugang__titel { font-size: 1.4rem; margin: 0; }

/* ---------- Startseite: Hero füllt den sichtbaren Bereich ---------- */
/* Die Navigation ist wie live fixiert (.nav), .page-body hat oben var(--nav-h) Abstand.
   Die Live-CSS setzt feste Höhen mit !important, daher ebenfalls !important. */

body.page--geburtstags-dj .wedding-hero {
  height: auto !important;
  max-height: none !important;
  min-height: calc(100vh - var(--nav-h)) !important;
  min-height: calc(100svh - var(--nav-h)) !important;
  padding: 32px 0 !important;
}
@media (max-width: 767px) {
  body.page--geburtstags-dj .wedding-hero { min-height: calc(100svh - var(--nav-h) - var(--mob-bar-h, 0px)) !important; padding: 20px 0 !important; }
}

/* Kernbotschaft auch mobil zeigen (Live-CSS blendet den Untertitel dort aus) */
@media (max-width: 767px) {
  body.page--geburtstags-dj .wedding-hero__subtitle { display: block !important; font-size: 1.05rem !important; margin: 6px 0 12px !important; }
  .subnav__list { justify-content: flex-start; }
}

/* Euro-Felder: Platz für das Euro-Zeichen (nach .feld__input) */
.feld__input.feld__input--euro { padding-right: 64px; text-align: right; font-size: 1.15rem; font-weight: 700; }
.extra--verlaengerung .feld__input.feld__input--euro { padding-right: 84px; }
.feld__suffix { height: 46px; }

/* ---------- Platzhalter Wunschpreis (Geburtstag) ---------- */
.wp-platzhalter { padding: 20px 22px; background: var(--gold-soft); border-left: 4px solid var(--gold); border-radius: 8px; }
.wp-platzhalter__titel { font-size: 1.15rem; font-weight: 700; color: var(--charcoal-2); margin: 0 0 8px; }
.wp-platzhalter p { margin: 0 0 10px; }
.wp-platzhalter .btn-group { margin-top: 6px; }

/* ---------- Geburtstag: Hero-Texte und Fakten ---------- */
body.page--geburtstags-dj .wedding-hero__subtitle {
  font-size: clamp(1.25rem, 2.2vw, 1.7rem) !important; font-weight: 700 !important;
  color: var(--white) !important; margin: 6px 0 14px !important; display: block !important;
  text-shadow: 0 4px 18px rgba(0, 0, 0, .72), 0 1px 3px rgba(0, 0, 0, .85);
}
body.page--geburtstags-dj .wedding-hero .lead { font-size: 1.02rem !important; font-weight: 400 !important; max-width: 900px; margin-left: auto; margin-right: auto; }
body.page--geburtstags-dj .wedding-hero__stats {
  display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  width: min(900px, 100%) !important; max-width: 900px !important; margin-left: auto !important; margin-right: auto !important;
}
@media (max-width: 767px) {
  body.page--geburtstags-dj .wedding-hero .lead,
  body.page--geburtstags-dj .wedding-hero__copy { display: none !important; }
  body.page--geburtstags-dj .wedding-hero__stats { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
/* Platz für den KI-Hinweis am unteren Hero-Rand */
body.page--geburtstags-dj .hdj-hero-regionen { margin-bottom: 34px; }

/* ---------- HOME (Haus-Icon) zur Hauptseite, erster Menüpunkt ---------- */
.site-nav .site-nav__thema { font-weight: 700; }
.site-nav-mobile a.site-nav-mobile__thema { font-weight: 700; color: #e1ca22 !important; }

/* 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;
  }
}

/* Button "DJ Startseite" neben "Direkt anfragen": nur Rahmen, unauffällig */
.site-nav .site-nav__main {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  height: 38px; padding: 0 14px; margin: 0 8px 0 auto;
  border: 1px solid rgba(225, 202, 34, .55); border-radius: 4px; background: transparent;
  color: rgba(255, 255, 255, .85); font-size: 12px; font-weight: 700; letter-spacing: .02em;
  text-transform: uppercase; white-space: nowrap; text-decoration: none; line-height: 1;
  transition: border-color .2s, color .2s;
}
.site-nav .site-nav__main:hover, .site-nav .site-nav__main:focus-visible { border-color: #e1ca22; color: #e1ca22; }
.site-nav-mobile .site-nav-mobile__main {
  display: flex !important; align-items: center; justify-content: center; margin-top: 10px;
  padding: 12px 14px !important; border: 1px solid rgba(225, 202, 34, .55) !important; border-radius: 4px;
  background: transparent; color: rgba(255, 255, 255, .85) !important; font-size: 13px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .02em;
}
@media (max-width: 1180px) { .site-nav .site-nav__main { display: none !important; } }
#region-links .region-links__alle { text-align: center; }

/* 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; } }