/* ============================================================
   Khushi Redesign v2 — modular Elementor build.
   Namespaced under .khx so it is fully independent of the
   legacy kh- component CSS in style.css. Purpose-built + lean.
   ============================================================ */

/* Typography (self-contained; does not depend on .kh-redesign) */
.khx h1, .khx h2, .khx h3, .khx h4,
.khx .elementor-heading-title { font-family: 'Fraunces', Georgia, serif; color: #101010; line-height: 1.1; }
.khx, .khx p, .khx .elementor-button { font-family: 'Libre Franklin', system-ui, sans-serif; }
.khx p { color: #5f5d5a; line-height: 1.7; }
.khx h1 { line-height: 1.04; }

/* Kicker */
.khx-kicker .elementor-heading-title,
.khx .khx-kicker,
.khx-kicker.elementor-widget-heading .elementor-heading-title {
  text-transform: uppercase; letter-spacing: .16em; font-size: .78rem; font-weight: 600;
  color: #A8030A !important; font-family: 'Libre Franklin', sans-serif;
}

/* Reusable responsive grid utilities (deterministic — no reliance on Elementor container width) */
.khx-grid { display: grid !important; gap: 24px; align-items: stretch; }
.khx-grid > * { width: auto !important; max-width: 100% !important; }
.khx-grid-4 { grid-template-columns: repeat(4, 1fr); }
.khx-grid-3 { grid-template-columns: repeat(3, 1fr); }
.khx-grid-2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 1024px) { .khx-grid-4, .khx-grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .khx-grid-4, .khx-grid-3, .khx-grid-2 { grid-template-columns: 1fr; } }

/* Lead paragraph */
.khx-lead .elementor-text-editor { font-size: 1.12rem; color: #4a4844; }
.khx-subline .elementor-heading-title { color: #A8030A; font-family: 'Libre Franklin', sans-serif; font-weight: 600; font-size: 1.15rem; }

/* Section head */
.khx-head--center { text-align: center; }
.khx-head--center .elementor-widget-container { text-align: center; }

/* Cards (dishes) */
.khx-card { background: #fff; border: 1px solid #ece3d6; border-radius: 14px; overflow: hidden;
  box-shadow: 0 10px 30px rgba(16,16,16,.06); transition: transform .3s ease, box-shadow .3s ease; height: 100%; }
.khx-card:hover { transform: translateY(-4px); box-shadow: 0 18px 44px rgba(16,16,16,.10); }
.khx-card .elementor-widget-image, .khx-card .elementor-widget-image .elementor-widget-container { margin: 0; line-height: 0; }
.khx-card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.khx-card__body { padding: 18px 20px 22px; }
.khx-card__body h3 .elementor-heading-title,
.khx-card__body h3 { margin: 2px 0 6px; font-size: 1.3rem; }
.khx-label .elementor-heading-title { color: #A8030A; text-transform: uppercase; letter-spacing: .12em; font-size: .72rem; font-weight: 700; font-family: 'Libre Franklin', sans-serif; }
.khx-card__body .elementor-widget-text-editor { font-size: .95rem; }
.khx-card__link .elementor-button { padding: 0 !important; background: transparent !important; color: #A8030A !important; font-weight: 600; }

/* Occasion cards (catering "für jeden Anlass") — image + overlapping round icon badge */
.khx-occasion-card { position: relative; }
.khx-occasion-card__media { position: relative; }
.khx-occasion-card__icon.elementor-widget-icon {
  position: absolute; left: 20px; bottom: -24px; z-index: 2;
  width: 48px; height: 48px; border-radius: 50%;
  box-shadow: 0 8px 20px rgba(16,16,16,.18);
}
.khx-occasion-card__icon .elementor-icon { width: 48px; height: 48px; }
.khx-occasion-card .khx-card__body { padding-top: 34px; }

/* Divider with center icon (section header ornament) */
.khx-divider-icon .elementor-divider-separator { max-width: 220px; margin-left: auto; margin-right: auto; }
.khx-divider-icon .elementor-icon { font-size: 14px; }

/* Food strip figure (image + caption) */
.khx-figure { border-radius: 12px; overflow: hidden; }
.khx-figure img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; display: block; border-radius: 12px; }
.khx-figcap .elementor-heading-title { font-size: 1.1rem; margin-top: .55rem; text-align: center; }

/* Category pills row */
.khx-tabs .elementor-button:hover { border-color: #A8030A !important; color: #A8030A !important; }

/* Buttons: consistent weight */
.khx .elementor-button { font-weight: 600; letter-spacing: .02em; }
.khx-btn-primary .elementor-button:hover { background: #7d0208 !important; }

/* Hero image framing */
.khx-hero__img img { border-radius: 16px; box-shadow: 0 24px 60px rgba(16,16,16,.14); width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block; }

/* Responsive: stack hero + tighten paddings handled by Elementor container widths */
@media (max-width: 767px) {
  .khx-hero__img img { aspect-ratio: 4 / 3; }
}

/* ===== v2 additional components (order band, story, occasions, aktuelles, testimonials, gallery, location, final) ===== */

/* Inverted (on red) */
.khx-invert h1, .khx-invert h2, .khx-invert h3, .khx-invert .elementor-heading-title { color: #fff; }
.khx-invert p, .khx-invert .elementor-text-editor { color: rgba(255,255,255,.9); }
.khx-kicker--light .elementor-heading-title { color: #F3D9C0 !important; }

/* Stat blocks */
.khx-stat-num .elementor-heading-title { font-size: 2.6rem; color: #A8030A; line-height: 1; }
.khx-stat-label .elementor-heading-title { font-size: .95rem; color: #5f5d5a; text-transform: uppercase; letter-spacing: .08em; }
.khx-small .elementor-text-editor { font-size: .92rem; color: #6b6660; }

/* Text cards (occasions) */
.khx-textcard { background: #fff; border: 1px solid #ece3d6; border-radius: 14px; padding: 26px 26px 28px; height: 100%; box-shadow: 0 8px 26px rgba(16,16,16,.05); transition: transform .3s, box-shadow .3s; }
.khx-textcard:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(16,16,16,.09); }
.khx-textcard h3 .elementor-heading-title { font-size: 1.35rem; margin-bottom: 8px; }
.khx-textcard .khx-card__link .elementor-button { padding: 0 !important; }

/* Aktuelles notes */
.khx-note { background: #FFF8EE; border: 1px solid #ece3d6; border-radius: 12px; padding: 22px 24px; height: 100%; }
.khx-note h4 .elementor-heading-title { color: #A8030A; font-size: 1.1rem; margin-bottom: 6px; }

/* Testimonials */
.khx-quote { background: #fff; border: 1px solid #ece3d6; border-radius: 14px; padding: 26px 26px 22px; height: 100%; box-shadow: 0 8px 26px rgba(16,16,16,.05); }
.khx-quote .elementor-text-editor { font-size: 1.05rem; color: #2b2926; font-style: italic; line-height: 1.55; }
.khx-quote-label .elementor-heading-title { color: #A8030A; font-size: .8rem; text-transform: uppercase; letter-spacing: .1em; margin-top: 12px; }

/* Gallery mosaic */
.khx-gallery img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 12px; display: block; }

/* Location */
.khx-loc-card { background: #fff; border: 1px solid #ece3d6; border-radius: 14px; padding: 26px; box-shadow: 0 10px 30px rgba(16,16,16,.06); }
.khx-loc-card h3 .elementor-heading-title { font-size: 1.5rem; margin: 4px 0; }
.khx-transit .elementor-icon-list-item { align-items: baseline; }
.khx-map iframe { width: 100%; min-height: 380px; border: 0; border-radius: 14px; display: block; }

/* Final CTA */
.khx-final { text-align: center; }
.khx-final .elementor-widget-heading, .khx-final .elementor-widget-text-editor { text-align: center; }

/* ============================================================
   Khushi Homepage v3
   Light editorial system for the real front page.
   Namespace: .khv
   ============================================================ */

.khv,
.khv-page {
  --khv-cream: #fff8ee;
  --khv-surface: #ffffff;
  --khv-border: #eadfd2;
  --khv-text: #23201c;
  --khv-muted: #67615b;
  --khv-red: #a8030a;
  --khv-red-dark: #860208;
  --khv-shadow: 0 18px 48px rgba(40, 26, 18, 0.08);
}

.khv-page,
.khv-page .elementor-widget-text-editor,
.khv-page .elementor-button {
  font-family: 'Libre Franklin', system-ui, sans-serif;
}

.khv-page h1,
.khv-page h2,
.khv-page h3,
.khv-page h4,
.khv-page .elementor-heading-title {
  font-family: 'Fraunces', Georgia, serif;
  color: var(--khv-text);
  line-height: 1.02;
  letter-spacing: 0;
}

.khv-page p {
  color: var(--khv-muted);
  line-height: 1.62;
}

.khv-kicker .elementor-heading-title,
.khv-page .khv-kicker {
  color: var(--khv-red) !important;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.78rem;
  font-weight: 700;
  font-family: 'Libre Franklin', sans-serif;
}

.khv-hero-keyword .elementor-heading-title {
  font-size: clamp(1.05rem, 1.8vw, 1.3rem);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  color: var(--khv-text);
}

.khv-hero-display .elementor-heading-title {
  font-size: clamp(3.5rem, 8vw, 6.4rem);
  line-height: 0.94;
  max-width: 9ch;
}

.khv-hero-subline .elementor-heading-title {
  font-family: 'Libre Franklin', sans-serif;
  font-size: 1.08rem;
  line-height: 1.4;
  color: var(--khv-muted);
  font-weight: 500;
}

.khv-lead .elementor-text-editor {
  max-width: 34rem;
  font-size: 1.1rem;
}

.khv-actions .elementor-button,
.khv-btn .elementor-button {
  min-height: 56px;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  box-shadow: none !important;
}

.khv-btn--primary .elementor-button,
.khv-actions .khv-btn--primary .elementor-button {
  background: var(--khv-red) !important;
  border-color: var(--khv-red) !important;
  color: #fff !important;
}

.khv-btn--primary .elementor-button:hover {
  background: var(--khv-red-dark) !important;
  border-color: var(--khv-red-dark) !important;
}

.khv-btn--ghost .elementor-button,
.khv-actions .khv-btn--ghost .elementor-button,
.khv-menu-link .elementor-button {
  background: transparent !important;
  color: var(--khv-red) !important;
  border-color: var(--khv-border) !important;
}

.khv-btn--ghost .elementor-button:hover,
.khv-menu-link .elementor-button:hover {
  border-color: var(--khv-red) !important;
  color: var(--khv-red) !important;
}

.khv-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  padding-top: 6px;
  font-size: 0.92rem;
  color: var(--khv-muted);
}

.khv-facts span {
  position: relative;
}

.khv-facts span:not(:last-child)::after {
  content: "";
  position: absolute;
  right: -13px;
  top: 50%;
  width: 1px;
  height: 14px;
  background: rgba(168, 3, 10, 0.22);
  transform: translateY(-50%);
}

.khv-hero-media {
  position: relative;
}

.khv-hero-media::after {
  content: "";
  position: absolute;
  left: 16px;
  right: -18px;
  bottom: -18px;
  height: 82%;
  background: rgba(168, 3, 10, 0.08);
  z-index: 0;
}

.khv-hero-photo,
.khv-hero-photo .elementor-widget-container {
  position: relative;
  z-index: 1;
}

.khv-hero-photo img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border: 14px solid #fff6eb;
  box-shadow: var(--khv-shadow);
}

.khv-title-large .elementor-heading-title {
  font-size: clamp(2.7rem, 5.2vw, 4.6rem);
  line-height: 0.98;
  max-width: 11ch;
}

.khv-title-center .elementor-heading-title {
  text-align: center;
  margin-inline: auto;
  max-width: 14ch;
  font-size: clamp(2.7rem, 5vw, 4.8rem);
}

.khv-title-tight .elementor-heading-title {
  max-width: 10ch;
}

.khv-center-copy-wrap .elementor-text-editor,
.khv-center-copy {
  text-align: center;
  margin-inline: auto;
  max-width: 42rem;
  font-size: 1.04rem;
}

.khv-benefit-list .elementor-widget-text-editor .elementor-widget-container,
.khv-benefit-list .elementor-widget-text-editor {
  margin: 0;
}

.khv-benefit {
  border-left: 4px solid var(--khv-red);
  background: #fffdf8;
  padding: 20px 22px;
  font-weight: 700;
  color: var(--khv-text);
  font-size: 1.15rem;
}

.khv-grid {
  display: grid !important;
  align-items: stretch;
  gap: 24px;
}

.khv-grid > * {
  width: auto !important;
  max-width: 100% !important;
}

.khv-grid--4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.khv-grid--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.khv-menu-card {
  height: 100%;
  background: var(--khv-surface);
  border: 1px solid var(--khv-border);
  box-shadow: 0 8px 24px rgba(45, 30, 17, 0.05);
}

.khv-menu-card img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.khv-menu-card-body {
  padding: 20px 22px 24px;
}

.khv-menu-card-body h3 .elementor-heading-title {
  font-size: 1.55rem;
  line-height: 1.06;
}

.khv-story-image img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  box-shadow: var(--khv-shadow);
}

.khv-stats .elementor-widget-text-editor {
  flex: 1 1 240px;
}

.khv-stat {
  border-top: 1px solid var(--khv-border);
  padding-top: 18px;
}

.khv-stat strong {
  display: block;
  font-family: 'Fraunces', Georgia, serif;
  font-size: 3rem;
  line-height: 0.95;
  color: var(--khv-red);
  margin-bottom: 6px;
}

.khv-stat span {
  display: block;
  font-weight: 700;
  font-size: 0.98rem;
  color: var(--khv-text);
  margin-bottom: 6px;
}

.khv-stat p {
  margin: 0;
  font-size: 0.95rem;
}

.khv-info-card {
  height: 100%;
  background: var(--khv-surface);
  border: 1px solid var(--khv-border);
  padding: 28px 26px 30px;
  box-shadow: 0 8px 24px rgba(45, 30, 17, 0.05);
}

.khv-info-card h3 {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.6rem;
  line-height: 1.06;
  color: var(--khv-text);
  margin-bottom: 10px;
}

.khv-info-card p {
  margin-bottom: 18px;
}

.khv-info-card a {
  color: var(--khv-red);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.82rem;
}

.khv-route-card {
  border: 1px solid var(--khv-border);
  background: #fff;
  padding: 34px 34px 32px;
  min-height: 100%;
}

.khv-route-label {
  color: #a8a3a0 !important;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.95rem;
  font-weight: 700;
  margin-bottom: 18px;
}

.khv-route-card h2 {
  font-size: clamp(2.3rem, 4vw, 3.5rem);
  line-height: 0.98;
  margin-bottom: 14px;
}

.khv-route-address {
  color: var(--khv-red) !important;
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.5;
  margin-bottom: 14px;
}

.khv-route-phone a {
  color: var(--khv-text);
  font-weight: 700;
  font-size: 1.2rem;
}

.khv-route-list {
  display: grid;
  gap: 14px;
  margin: 24px 0 20px;
}

.khv-route-row {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  gap: 16px;
  align-items: baseline;
  padding-bottom: 12px;
  border-bottom: 1px dotted rgba(103, 97, 91, 0.28);
}

.khv-route-row span {
  color: var(--khv-text);
  font-weight: 700;
  font-size: 0.95rem;
}

.khv-route-row strong {
  color: var(--khv-muted);
  font-size: 1rem;
  font-weight: 500;
}

.khv-route-note {
  margin: 0;
  font-size: 0.95rem;
}

.khv-map-frame {
  border: 1px solid var(--khv-border);
  background: #f7f4ef;
  padding: 0;
  height: 100%;
  min-height: 100%;
}

.khv-map-frame iframe {
  display: block;
  width: 100%;
  min-height: 620px;
  border: 0;
  filter: saturate(0.85) contrast(0.96);
}

.khv-location .elementor-widget-text-editor,
.khv-location .elementor-widget-text-editor .elementor-widget-container {
  height: 100%;
}

@media (max-width: 1024px) {
  .khv-grid--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .khv-grid--3 {
    grid-template-columns: 1fr;
  }

  .khv-hero-display .elementor-heading-title {
    max-width: 100%;
    font-size: clamp(3rem, 6vw, 4.7rem);
  }

  .khv-title-large .elementor-heading-title {
    max-width: 100%;
  }
}

@media (max-width: 767px) {
  .khv-section {
    padding-top: 56px !important;
    padding-bottom: 56px !important;
  }

  .khv-hero-media::after {
    left: 10px;
    right: -10px;
    bottom: -10px;
  }

  .khv-hero-photo img {
    aspect-ratio: 4 / 3;
    border-width: 10px;
  }

  .khv-facts {
    display: grid;
    gap: 8px;
  }

  .khv-facts span:not(:last-child)::after {
    display: none;
  }

  .khv-title-center .elementor-heading-title,
  .khv-title-large .elementor-heading-title {
    font-size: clamp(2.2rem, 9vw, 3.3rem);
  }

  .khv-route-card {
    padding: 24px 22px;
  }

  .khv-route-row {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .khv-map-frame iframe {
    min-height: 360px;
  }

  .khv-grid--4,
  .khv-grid--3 {
    grid-template-columns: 1fr;
  }
}

/* ===== Tandoori section ===== */
.khx-richtext { max-width: 820px; margin-left: auto; margin-right: auto; }
.khx-richtext .elementor-text-editor { font-size: 1.02rem; }
.khx-richtext h3 .elementor-heading-title { font-size: 1.6rem; text-align: center; margin-bottom: 4px; }
.khx-tandoori-band img { width: 100%; aspect-ratio: 21 / 7; object-fit: cover; border-radius: 14px; display: block; }
@media (max-width: 767px){ .khx-tandoori-band img { aspect-ratio: 4 / 3; } }

/* ===== Tandoori: robust centered columns (Elementor px-width unreliable) ===== */
.khx-tandoori .khx-cuisine-col { width: 720px; max-width: 100%; }
.khx-tandoori .khx-cuisine-col .elementor-widget-text-editor { text-align: left; }
.khx-tandoori .khx-spiess-col { width: 780px; max-width: 100%; }

/* ===== Tandoori: dark cinematic feature ===== */
.khx-tandoori.khx-invert { background: #17120f; }
.khx-tandoori .khx-timg img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 16px; box-shadow: 0 26px 60px rgba(0,0,0,.5); display: block; }
.khx-tandoori .khx-gold .elementor-heading-title { color: #cba55f !important; text-transform: uppercase; letter-spacing: .16em; font-size: .76rem; font-weight: 700; font-family: 'Libre Franklin', sans-serif; }
.khx-tandoori .khx-cgrid { border-top: 1px solid rgba(255,255,255,.14); padding-top: 40px; }
.khx-tandoori .khx-cgrid .elementor-text-editor { font-size: .95rem; }
.khx-tandoori .khx-btnlight .elementor-button { background: transparent !important; color: #fff !important; border: 1px solid rgba(255,255,255,.5) !important; }
.khx-tandoori .khx-btnlight .elementor-button:hover { background: #fff !important; color: #17120f !important; }

/* Khushi Reservation Form — einzige projektweite Custom-CSS-Ausnahme, da das Plugin-Widget keine nativen Style-Controls bietet (Nutzer-Zustimmung 2026-07-15) */
.kh-reservation-form {
  max-width: 720px;
}
.kh-reservation-form .kh-reservation-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 20px;
}
.kh-reservation-form label {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.kh-reservation-form label span {
  color: #101010;
  font-weight: 500;
  font-size: 14px;
  font-family: "Libre Franklin", sans-serif;
}
.kh-reservation-form input,
.kh-reservation-form textarea,
.kh-reservation-form select {
  border: 1px solid #D9D0C5;
  border-radius: 8px;
  background-color: #FFF8EE;
  color: #101010;
  padding: 12px 16px;
  font-family: "Libre Franklin", sans-serif;
  font-size: 15px;
  width: 100%;
  box-sizing: border-box;
}
.kh-reservation-form input:focus,
.kh-reservation-form textarea:focus,
.kh-reservation-form select:focus {
  outline: none;
  border-color: #A8030A;
  box-shadow: 0 0 0 2px rgba(168, 3, 10, 0.12);
}
.kh-reservation-form input[type="date"],
.kh-reservation-form input[type="time"],
.kh-reservation-form input[type="number"] {
  appearance: auto;
  -webkit-appearance: auto;
}
.kh-reservation-form textarea {
  min-height: 110px;
  resize: vertical;
}
.kh-reservation-form button[type="submit"] {
  background-color: #A8030A;
  color: #FFFFFF;
  border-radius: 8px;
  border: none;
  padding: 14px 28px;
  font-weight: 600;
  font-family: "Libre Franklin", sans-serif;
  cursor: pointer;
  margin-top: 18px;
  transition: background-color .2s ease;
}
.kh-reservation-form button[type="submit"]:hover {
  background-color: #8A0208;
}
.kh-reservation-form .kh-reservation-notice {
  margin-bottom: 18px;
  padding: 12px 16px;
  border-radius: 8px;
  background-color: #FFF8EE;
  border: 1px solid #D9D0C5;
  color: #101010;
}
@media (max-width: 640px) {
  .kh-reservation-form .kh-reservation-grid {
    grid-template-columns: 1fr;
  }
}