/* ============================================================
   Hochzeitsseite — Formatierung über CSS-Klassen
   In Divi pro Modul eintragen unter:
   Modul bearbeiten → Erweitert → CSS-Klasse
   ============================================================ */

:root {
  --hz-citrus: #FFA62B;
  --hz-citrus-700: #B87200;
  --hz-cream: #F8E6A0;
  --hz-ocean: #2E5AA7;
  --hz-ocean-700: #24488A;
  --hz-ocean-900: #0E1738;
  --hz-panel: #1B3A72;
  --hz-bougainvillea: #F04E4E;
  --hz-olive: #6A7F3A;
  --hz-paper: #FBF6EA;
  --hz-ink: #2B2A26;
  --hz-muted: #5C564A;
  --hz-border: #DED2B4;
}

/* --- SEKTIONEN: Hintergrund + Rhythmus ---------------------- */
/* Klasse auf die SEKTION (blaue Leiste) */

.hz-sec { padding: 110px 64px !important; }
.hz-sec--weiss { background: #FFFFFF !important; }
.hz-sec--creme { background: var(--hz-paper) !important; }
.hz-sec--dunkel { background: var(--hz-ocean-900) !important; }
.hz-sec--citrusrand { border-top: 3px solid var(--hz-citrus) !important; }
.hz-sec--voll { padding: 0 !important; }

@media (max-width: 980px) {
  .hz-sec { padding: 48px 20px !important; }
}

/* --- TEXTBAUSTEINE ------------------------------------------ */
/* Klasse auf das TEXT-Modul */

.hz-eyebrow p,
.hz-eyebrow {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.3em !important;
  text-transform: uppercase !important;
  color: var(--hz-citrus-700) !important;
  margin: 0 0 8px !important;
}
.hz-sec--dunkel .hz-eyebrow,
.hz-sec--dunkel .hz-eyebrow p { color: var(--hz-citrus) !important; }

.hz-title h2,
.hz-title h1 {
  font-family: 'Playfair Display', serif !important;
  font-size: clamp(28px, 4.6vw, 54px) !important;
  font-weight: 400 !important;
  line-height: 1.05 !important;
  color: var(--hz-ocean-900) !important;
  max-width: 20ch;
  margin: 0 0 16px !important;
}
.hz-sec--dunkel .hz-title h2 { color: var(--hz-paper) !important; }

.hz-lead p,
.hz-lead {
  font-family: 'Cormorant Garamond', serif !important;
  font-size: clamp(17px, 2.1vw, 22px) !important;
  line-height: 1.7 !important;
  color: var(--hz-ink) !important;
  max-width: 48ch;
}
.hz-sec--dunkel .hz-lead p { color: rgba(251,246,234,0.8) !important; }

.hz-quote p,
.hz-quote {
  font-family: 'Cormorant Garamond', serif !important;
  font-style: italic !important;
  font-size: 20px !important;
  color: var(--hz-ocean-700) !important;
}

/* --- KARTEN (Übernachtung) ---------------------------------- */
/* Klasse auf das BLURB- oder TEXT-Modul */

.hz-card {
  background: #FFFFFF !important;
  border: 1px solid var(--hz-border) !important;
  border-radius: 4px !important;
  padding: 30px !important;
  box-shadow: 0 1px 3px rgba(43,42,38,0.06) !important;
  height: 100%;
}
.hz-card h3,
.hz-card .et_pb_module_header {
  font-family: 'Playfair Display', serif !important;
  font-size: 24px !important;
  font-weight: 400 !important;
  color: var(--hz-ocean-900) !important;
  margin: 10px 0 0 !important;
}
.hz-card p {
  font-family: 'Cormorant Garamond', serif !important;
  font-size: 17px !important;
  line-height: 1.6 !important;
  color: var(--hz-muted) !important;
  margin: 10px 0 0 !important;
}
.hz-card .hz-tag {
  display: block;
  font-family: 'Montserrat', sans-serif;
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--hz-citrus-700);
}

/* --- INFOZEILEN (Location: Adresse, Flug, Parken) ------------ */

.hz-fakten p {
  display: flex;
  gap: 18px;
  padding: 16px 0;
  margin: 0 !important;
  border-top: 1px solid var(--hz-border);
  font-family: 'Cormorant Garamond', serif !important;
  font-size: 18px !important;
  color: var(--hz-ink) !important;
}
.hz-fakten p:last-child { border-bottom: 1px solid var(--hz-border); }
.hz-fakten strong {
  flex: 0 0 100px;
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #8C8578;
  padding-top: 4px;
}

/* --- FAQ ----------------------------------------------------- */

.hz-faq { border-top: 2px solid var(--hz-citrus); padding-top: 16px; }
.hz-faq h3 {
  font-family: 'Playfair Display', serif !important;
  font-size: 22px !important;
  font-weight: 400 !important;
  color: var(--hz-ocean-900) !important;
  margin: 0 !important;
}
.hz-faq p {
  font-family: 'Cormorant Garamond', serif !important;
  font-size: 17px !important;
  line-height: 1.6 !important;
  color: var(--hz-muted) !important;
  margin: 8px 0 0 !important;
}

/* --- GESCHENKE-FELD (volles Citrus) -------------------------- */

.hz-geschenke {
  background: var(--hz-citrus) !important;
  border-radius: 4px !important;
  padding: 40px !important;
}
.hz-geschenke .hz-eyebrow,
.hz-geschenke .hz-eyebrow p { color: var(--hz-ocean-900) !important; }
.hz-geschenke h2 { color: var(--hz-ink) !important; }
.hz-geschenke p { color: var(--hz-ink) !important; }

/* --- DRESSCODE-FARBFELDER ------------------------------------ */

.hz-swatches { display: flex; gap: 10px; margin-top: 24px; }
.hz-swatches i { width: 44px; height: 44px; border-radius: 2px; display: block; }

/* --- KONTAKTE ------------------------------------------------ */

.hz-kontakt .hz-rolle {
  font-family: 'Montserrat', sans-serif;
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--hz-citrus-700);
  display: block;
}
.hz-kontakt h3 {
  font-family: 'Playfair Display', serif !important;
  font-size: 22px !important;
  font-weight: 400 !important;
  color: var(--hz-ink) !important;
  margin: 8px 0 0 !important;
}
.hz-kontakt p {
  font-family: 'Cormorant Garamond', serif !important;
  font-size: 17px !important;
  color: var(--hz-muted) !important;
  margin: 6px 0 0 !important;
}
.hz-kontakt a { color: var(--hz-ocean) !important; }
.hz-kontakt a:hover { color: var(--hz-citrus-700) !important; }

/* --- HERO ---------------------------------------------------- */

.hz-hero {
  position: relative;
  min-height: 72vh;
  display: flex;
  align-items: flex-end;
  background-size: cover !important;
  background-position: center !important;
}
.hz-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(14,23,56,0.82) 0%, rgba(14,23,56,0.55) 46%, rgba(14,23,56,0.18) 100%);
}
.hz-hero .et_pb_row { position: relative; z-index: 2; }
.hz-hero-namen h1 {
  font-family: 'Parisienne', cursive !important;
  font-size: clamp(52px, 12vw, 150px) !important;
  font-weight: 400 !important;
  line-height: 0.92 !important;
  color: var(--hz-paper) !important;
  margin: 0 !important;
}
.hz-hero-meta p {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0.3em !important;
  text-transform: uppercase !important;
  color: var(--hz-paper) !important;
}

/* --- FOOTER -------------------------------------------------- */

.hz-footer-mono p {
  font-family: 'Parisienne', cursive !important;
  font-size: 38px !important;
  color: var(--hz-citrus) !important;
  margin: 0 !important;
}
.hz-footer-meta p {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 10px !important;
  letter-spacing: 0.26em !important;
  text-transform: uppercase !important;
  color: rgba(251,246,234,0.6) !important;
  margin: 14px 0 0 !important;
}

/* ============================================================
   FLUENT FORMS — RSVP
   Klasse .hz-rsvp auf das Text-/Code-Modul mit dem Shortcode
   ============================================================ */

.hz-rsvp .fluentform { max-width: 560px; margin: 0 auto; }

.hz-rsvp .ff-el-group { margin-bottom: 14px !important; }

.hz-rsvp .ff-el-input--label label {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0.24em !important;
  text-transform: uppercase !important;
  color: #8C8578 !important;
  margin-bottom: 6px !important;
}

.hz-rsvp input[type="text"],
.hz-rsvp input[type="email"],
.hz-rsvp input[type="number"],
.hz-rsvp textarea,
.hz-rsvp select {
  width: 100% !important;
  padding: 13px 16px !important;
  border: 1px solid var(--hz-border) !important;
  border-radius: 2px !important;
  background: #FFFFFF !important;
  box-shadow: none !important;
  font-family: 'Cormorant Garamond', serif !important;
  font-size: 18px !important;
  color: var(--hz-ink) !important;
  height: auto !important;
}
.hz-rsvp input:focus,
.hz-rsvp textarea:focus,
.hz-rsvp select:focus {
  border-color: var(--hz-ocean) !important;
  border-width: 1.5px !important;
  outline: none !important;
  box-shadow: none !important;
}
.hz-rsvp ::placeholder { color: #A79F8E !important; opacity: 1; }

/* Zu-/Absage als zwei große Flächen statt Radiobuttons */
.hz-rsvp .ff_item_selected_2 .ff-el-form-check,
.hz-rsvp .ff-el-group .ff-el-form-check-inline { display: inline-block; }

.hz-rsvp .ff-el-form-check {
  margin: 0 !important;
  padding: 0 !important;
}
.hz-rsvp .ff-el-form-check input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.hz-rsvp .ff-el-form-check label {
  display: block;
  padding: 14px 20px !important;
  border: 1.5px solid var(--hz-border);
  border-radius: 2px;
  background: transparent;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  color: var(--hz-muted) !important;
  text-align: center;
  cursor: pointer;
  transition: background 200ms ease, border-color 200ms ease, color 200ms ease;
}
.hz-rsvp .ff-el-form-check label::before,
.hz-rsvp .ff-el-form-check label::after { display: none !important; }

.hz-rsvp .ff-el-form-check input[type="radio"]:checked + label {
  background: var(--hz-olive);
  border-color: var(--hz-olive);
  color: #FFFFFF !important;
}
/* zweite Option (Absage) in Bougainvillea */
.hz-rsvp .ff-el-form-check:nth-child(2) input[type="radio"]:checked + label {
  background: var(--hz-bougainvillea);
  border-color: var(--hz-bougainvillea);
}

.hz-rsvp .ff-btn-submit {
  width: 100% !important;
  margin-top: 6px !important;
  padding: 16px !important;
  border: none !important;
  border-radius: 2px !important;
  background: var(--hz-ocean) !important;
  color: #FFFFFF !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  transition: background 200ms ease;
}
.hz-rsvp .ff-btn-submit:hover { background: var(--hz-ocean-700) !important; }

/* Danke-Meldung */
.hz-rsvp .ff-message-success {
  padding: 36px !important;
  border: 1px solid var(--hz-border) !important;
  border-radius: 4px !important;
  background: #FFFFFF !important;
  box-shadow: 0 1px 3px rgba(43,42,38,0.06);
  font-family: 'Cormorant Garamond', serif !important;
  font-size: 18px !important;
  color: var(--hz-muted) !important;
  text-align: center;
}
.hz-rsvp .ff-message-success::before {
  content: 'Grazie!';
  display: block;
  font-family: 'Parisienne', cursive;
  font-size: 44px;
  line-height: 1;
  color: var(--hz-ocean);
  margin-bottom: 12px;
}

.hz-rsvp .error, .hz-rsvp .text-danger {
  font-family: 'Cormorant Garamond', serif !important;
  font-size: 16px !important;
  color: var(--hz-bougainvillea) !important;
}