/* ═══════════════════════════════════════════
   Brühwerk Verkostungs-Seite
   The most beautiful page in the shop.
   ═══════════════════════════════════════════ */

/* ── Hero ── */
.vk-hero {
  position: relative !important;
  min-height: 85vh !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  background: url('/wp-content/uploads/2026/04/showroom-hero.jpg') center 40% / cover no-repeat !important;
  overflow: hidden !important;
}
.vk-hero__overlay {
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(180deg, rgba(10,10,12,0.75) 0%, rgba(10,10,12,0.6) 35%, rgba(10,10,12,0.82) 100%) !important;
  pointer-events: none !important;
}
.vk-hero__content { position: relative !important; z-index: 1 !important; }
.vk-hero__kicker {
  display: block !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  color: var(--bw-accent) !important;
  margin-bottom: 16px !important;
  text-shadow: 0 1px 8px rgba(0,0,0,0.5) !important;
}
.vk-hero__title {
  font-family: var(--bw-font-serif) !important;
  font-size: clamp(2.8rem, 6vw, 5rem) !important;
  font-weight: 700 !important;
  font-style: italic !important;
  color: #fff !important;
  line-height: 1.1 !important;
  margin: 0 0 20px !important;
  text-shadow: 0 2px 20px rgba(0,0,0,0.4) !important;
}
.vk-hero__sub {
  font-size: 1.1rem !important;
  line-height: 1.75 !important;
  color: rgba(255,255,255,0.85) !important;
  max-width: 460px !important;
  margin: 0 auto 32px !important;
  text-shadow: 0 1px 10px rgba(0,0,0,0.4) !important;
}
.vk-hero__actions {
  display: flex !important;
  gap: 16px !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
}

/* ── Intro ── */
.vk-intro {
  padding: 100px 0 80px !important;
}
.vk-intro__text {
  font-family: var(--bw-font-serif) !important;
  font-size: 1.25rem !important;
  line-height: 1.85 !important;
  color: rgba(255,255,255,0.7) !important;
  margin-bottom: 24px !important;
}
.vk-intro__text:last-child { margin-bottom: 0 !important; }

/* ── Section Titles ── */
.vk-section__title {
  font-size: clamp(1.8rem, 3vw, 2.4rem) !important;
  font-weight: 700 !important;
  color: #fff !important;
  margin: 0 0 12px !important;
}
.vk-section__sub {
  font-size: 1rem !important;
  color: rgba(255,255,255,0.6) !important;
  max-width: 480px !important;
  margin: 0 auto 40px !important;
}

/* ── Steps — alternating image rows ── */
.vk-steps {
  padding: 100px 0 80px !important;
  background: var(--bw-bg-elevated) !important;
}
.vk-steps__kicker {
  text-align: center !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.18em !important;
  color: var(--bw-accent) !important;
  margin-bottom: 56px !important;
}

/* Step row: image + text side by side */
.vk-step-row {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 48px !important;
  align-items: center !important;
  margin-bottom: 64px !important;
}
.vk-step-row:last-child { margin-bottom: 0 !important; }
.vk-step-row--reverse { direction: rtl !important; }
.vk-step-row--reverse > * { direction: ltr !important; }

.vk-step-row__img {
  border-radius: 16px !important;
  overflow: hidden !important;
  box-shadow: 0 12px 40px rgba(0,0,0,0.35) !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
}
.vk-step-row__img img {
  width: 100% !important;
  height: 340px !important;
  object-fit: cover !important;
  display: block !important;
  transition: transform 0.4s ease !important;
}
.vk-step-row__img:hover img {
  transform: scale(1.03) !important;
}

.vk-step-row__num {
  font-family: var(--bw-font-serif) !important;
  font-size: 3.5rem !important;
  font-weight: 700 !important;
  color: rgba(200,149,108,0.65) !important;
  line-height: 1 !important;
  margin-bottom: 12px !important;
}
.vk-step-row__text h3 {
  font-family: var(--bw-font-serif) !important;
  font-size: 1.6rem !important;
  font-weight: 700 !important;
  color: #fff !important;
  margin: 0 0 14px !important;
}
.vk-step-row__text p {
  font-size: 15px !important;
  line-height: 1.8 !important;
  color: rgba(255,255,255,0.7) !important;
  margin: 0 !important;
  max-width: 400px !important;
}

/* ── Trust Strip ── */
.vk-trust {
  padding: 48px 0 !important;
  background: rgba(200,149,108,0.04) !important;
  border-top: 1px solid rgba(200,149,108,0.1) !important;
  border-bottom: 1px solid rgba(200,149,108,0.1) !important;
}
.vk-trust__grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 32px !important;
  text-align: center !important;
}
.vk-trust__item strong {
  display: block !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #fff !important;
  margin-bottom: 6px !important;
}
.vk-trust__item span {
  font-size: 13px !important;
  color: rgba(255,255,255,0.55) !important;
  line-height: 1.5 !important;
}

/* ── Features Grid ── */
.vk-features {
  padding: 80px 0 !important;
}
.vk-features__grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 32px !important;
  margin-top: 48px !important;
}
.vk-feature {
  padding: 32px !important;
  background: var(--bw-bg-elevated) !important;
  border: 1px solid var(--bw-border) !important;
  border-radius: var(--bw-r-lg) !important;
  transition: border-color var(--bw-t-normal) !important;
}
.vk-feature:hover { border-color: rgba(200,149,108,0.3) !important; }
.vk-feature__icon {
  font-size: 1.6rem !important;
  margin-bottom: 16px !important;
}
.vk-feature__title {
  font-size: 1rem !important;
  font-weight: 700 !important;
  color: var(--bw-text) !important;
  margin: 0 0 8px !important;
}
.vk-feature__text {
  font-size: 14px !important;
  line-height: 1.6 !important;
  color: var(--bw-text-muted) !important;
  margin: 0 !important;
}

/* ── Events ── */
.vk-events {
  padding: 80px 0 !important;
  background: var(--bw-bg-elevated) !important;
}
.vk-events__grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 24px !important;
  margin-top: 48px !important;
}
.vk-event__title {
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  color: var(--bw-text) !important;
  margin: 12px 0 8px !important;
}
.vk-event__text {
  font-size: 14px !important;
  line-height: 1.6 !important;
  color: var(--bw-text-muted) !important;
  margin: 0 0 16px !important;
}
.vk-event__meta {
  font-size: 13px !important;
  color: var(--bw-text-faint) !important;
}

/* ── Booking Form ── */
.vk-booking {
  padding: 100px 0 !important;
  background: var(--bw-bg) !important;
}
.vk-form {
  margin-top: 40px !important;
  padding: 40px !important;
  background: var(--bw-bg-elevated) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 20px !important;
  box-shadow: 0 16px 48px rgba(0,0,0,0.25) !important;
}
.vk-form__row {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 20px !important;
}
.vk-form__note {
  text-align: center !important;
  font-size: 13px !important;
  color: var(--bw-text-faint) !important;
  margin-top: 16px !important;
}

/* ── FAQ ── */
.vk-faq {
  padding: 80px 0 !important;
  background: var(--bw-bg-elevated) !important;
}
.vk-faq .bw-accordion__trigger {
  color: rgba(255,255,255,0.9) !important;
}
.vk-faq .bw-accordion__content {
  color: rgba(255,255,255,0.6) !important;
}
.vk-faq .bw-container,
.vk-faq > div {
  max-width: 960px !important;
  margin-inline: auto !important;
  padding-inline: 24px !important;
}
.vk-faq .bw-accordion {
  max-width: 100% !important;
}

/* ── Location ── */
.vk-location {
  padding: 80px 0 !important;
}
.vk-location__grid {
  display: grid !important;
  grid-template-columns: 1fr 1.2fr !important;
  gap: 48px !important;
  align-items: start !important;
}
.vk-location__address {
  font-style: normal !important;
  font-size: 16px !important;
  line-height: 1.8 !important;
  color: var(--bw-text-muted) !important;
  margin-bottom: 24px !important;
}
.vk-location__address a {
  color: var(--bw-accent) !important;
  text-decoration: none !important;
}
.vk-location__address a:hover { text-decoration: underline !important; }
.vk-location__hours {
  font-size: 15px !important;
  line-height: 1.8 !important;
  color: var(--bw-text-muted) !important;
}
.vk-location__map-placeholder {
  width: 100% !important;
  height: 360px !important;
  background: url('/wp-content/uploads/2026/04/vk-machine.jpg') center center / cover no-repeat !important;
  border: 1px solid var(--bw-border) !important;
  border-radius: var(--bw-r-lg) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--bw-text-faint) !important;
  font-size: 14px !important;
}

/* ── Closing CTA — with latte art background ── */
.vk-closing {
  padding: 100px 0 !important;
  background: url('/wp-content/uploads/2026/04/showroom-1.jpg') center 40% / cover no-repeat !important;
  position: relative !important;
}
.vk-closing::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background: rgba(14,14,16,0.82) !important;
  pointer-events: none !important;
}
.vk-closing > * {
  position: relative !important;
  z-index: 1 !important;
}
.vk-closing__title {
  font-size: clamp(2rem, 4vw, 2.8rem) !important;
  font-weight: 700 !important;
  font-style: italic !important;
  color: #fff !important;
  margin: 0 0 28px !important;
  text-shadow: 0 2px 15px rgba(0,0,0,0.4) !important;
}

/* ── Responsive ── */
@media (max-width: 768px) {
  .vk-step-row { grid-template-columns: 1fr !important; gap: 20px !important; margin-bottom: 40px !important; }
  .vk-step-row--reverse { direction: ltr !important; }
  .vk-step-row__img img { height: 200px !important; }
  .vk-trust__grid { grid-template-columns: 1fr 1fr !important; gap: 16px !important; }
  .vk-form__row { grid-template-columns: 1fr !important; }
  .vk-form { padding: 20px !important; }
  .vk-hero { min-height: 70vh !important; }
  .vk-hero__actions { flex-direction: column !important; align-items: stretch !important; }
}