/* Startseite (Elementor-Ablösung Bundle B) — Sektions-Styles, BEM.
   Tokens/Hex aus docs/lovable-reference.md. Pixel-Feintuning: Visual-Review-Session.
   Pro-Block-Styles werden in den jeweiligen Block-Tasks an diese Datei angehängt. */

/* Tokens kommen aus der SSoT global.css (:root --ketex-*) — im Frontend global,
   im Block-Editor-Canvas via home-blocks.php (global.css als Canvas-Dependency).
   Das frühere lokale kh-Präfix-Token-Set (Drift, u.a. abweichender Muted-Wert) ist getilgt. */

/* Gemeinsamer Sektions-Rhythmus (Standard 80) + Außenrand 40.
   Vertikale Ausnahmen (Trust-Bar 12 / Features 60 / Damit-gelingts+Newsletter 64) je Sektion überschrieben. */
.ketex-home > * {
  padding-block: clamp(48px, 6vw, 80px);
  padding-inline: clamp(20px, 5vw, 40px);
}
.ketex-home-hero { padding-block: 0; } /* Hero positioniert via flex, kein Sektions-Padding */
.ketex-home__inner {
  max-width: var(--ketex-content-max);
  margin-inline: auto;
}
.ketex-home__kicker {
  font-family: var(--ketex-font-ui);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--ketex-primary);
  margin: 0 0 12px;
}
.ketex-home__title {
  font-family: var(--ketex-font-title);
  font-weight: 400;
  color: var(--ketex-dark);
  margin: 0 0 16px;
}
/* Zentrierter Sektions-Header (Kategorien / Damit gelingt's / Bestseller). */
.ketex-home__head--center { text-align: center; }
.ketex-home__head--center .ketex-home__kicker { margin-inline: auto; }

/* --- Hero (ketex/hero) --- */
.ketex-home-hero {
  position: relative;
  min-height: 82vh;
  display: flex;
  align-items: center;
  color: #fff;
  overflow: hidden;
  padding-inline: clamp(20px, 5vw, 40px);
  padding-block: clamp(40px, 6vh, 72px);
}
.ketex-home-hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.ketex-home-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(42,38,34,0.45), rgba(42,38,34,0.55));
  z-index: 1;
}
.ketex-home-hero__inner {
  position: relative;
  z-index: 2;
  max-width: var(--ketex-content-max);
  margin-inline: auto;
  width: 100%;
}
.ketex-home-hero__kicker {
  font-family: var(--ketex-font-ui);
  font-size: 14px;
  letter-spacing: 4.2px;
  text-transform: uppercase;
  color: rgba(252,250,248,0.8);
  margin: 0 0 16px;
}
.ketex-home-hero__headline {
  font-family: var(--ketex-font-title);
  font-weight: 400;
  font-size: clamp(2.5rem, 6vw, 5rem);
  line-height: 1.05;
  margin: 0 0 20px;
  max-width: 620px;
}
.ketex-home-hero__subtext {
  font-size: 1.125rem;
  max-width: 460px;
  margin: 0 0 28px;
}
.ketex-home-hero__actions { display: flex; flex-wrap: wrap; gap: 14px; }
.ketex-home-hero__cta {
  display: inline-block;
  background: var(--ketex-primary);
  color: #fff;
  padding: 14px 28px;
  border-radius: 6px;
  text-decoration: none;
  font-family: var(--ketex-font-ui);
}
.ketex-home-hero__cta--secondary {
  background: transparent;
  border: 1px solid rgba(252,250,248,0.6);
}
@media (max-width: 767px) {
  .ketex-home-hero { min-height: 70vh; }
}

/* --- Trust-Bar (ketex/trust-bar) — schmales Band, zentrierte Icon/Text-Einheit --- */
.ketex-trust-bar { background: var(--ketex-bg-warm); padding-block: 12px; }
.ketex-trust-bar__inner {
  max-width: var(--ketex-content-max); margin-inline: auto;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
}
.ketex-trust-bar__item { display: flex; align-items: center; justify-content: center; gap: 12px; }
.ketex-trust-bar__icon { width: 22px; height: 22px; color: var(--ketex-primary); flex: 0 0 auto; }
.ketex-trust-bar__body { display: flex; flex-direction: column; }
.ketex-trust-bar__title { font-family: var(--ketex-font-ui); font-weight: 500; color: var(--ketex-dark); font-size: 0.95rem; line-height: 1.2; }
.ketex-trust-bar__text { color: var(--ketex-text-muted); font-size: 0.8rem; }
@media (max-width: 1024px) { .ketex-trust-bar__inner { grid-template-columns: 1fr; gap: 12px; } .ketex-trust-bar { padding-block: 16px; } }

/* --- Feature-Karten (ketex/feature-cards) — beige Sektion, weiße klickbare Karten (Lovable) --- */
/* Das beige Band gehört zum Sektions-Rhythmus der Startseite, nicht zum Block:
   sein Innenabstand kommt aus `.ketex-home > *`, seine volle Breite aus dem
   randlosen Startseiten-Wrapper. Ungebunden trug der Block den Hintergrund in
   jede Inhaltsseite mit — auf /kontakt/ als beiges Rechteck ohne Innenabstand,
   hart abgeschnitten an der Textbreite. Auf Inhaltsseiten tragen die Karten
   ihren eigenen Hintergrund, ein Band braucht es dort nicht. */
.ketex-home .ketex-feature-cards { background: var(--ketex-bg-warm); }
.ketex-feature-cards__grid {
  max-width: var(--ketex-content-max); margin-inline: auto;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px;
}
.ketex-feature-card {
  display: block; text-decoration: none; color: inherit;
  background: var(--ketex-bg); border: 1px solid var(--ketex-border);
  border-radius: 12px; padding: 32px; text-align: center;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  transition: box-shadow .2s ease, transform .2s ease;
}
.ketex-feature-card:hover { box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08); transform: translateY(-2px); }
.ketex-feature-card__icon-wrap {
  display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; border-radius: 999px;
  background: rgba(184, 69, 46, 0.10); margin-bottom: 16px;
}
.ketex-feature-card__icon { width: 26px; height: 26px; color: var(--ketex-primary); }
.ketex-feature-card__title { font-family: var(--ketex-font-title); font-weight: var(--ketex-title-weight); color: var(--ketex-dark); margin: 0 0 8px; font-size: var(--ketex-title-card); }
.ketex-feature-card__text { color: var(--ketex-text-muted); margin: 0; }
@media (max-width: 767px) { .ketex-feature-cards__grid { grid-template-columns: 1fr; } }

/* --- Ketex-Prinzip (ketex/prinzip) --- */
.ketex-prinzip { background: var(--ketex-bg); }
.ketex-prinzip__inner {
  max-width: var(--ketex-content-max); margin-inline: auto;
  display: grid; grid-template-columns: 0.85fr 1fr; gap: 56px; align-items: center;
}
.ketex-prinzip__media { aspect-ratio: 4 / 5; max-height: 540px; border-radius: 16px; overflow: hidden; }
.ketex-prinzip__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ketex-prinzip__body { color: var(--ketex-text-muted); margin: 0 0 20px; }
.ketex-prinzip__badges { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 20px; }
.ketex-prinzip__badge {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--ketex-dark); font-family: var(--ketex-font-ui); font-size: 0.9rem;
}
.ketex-prinzip__badge-icon { width: 18px; height: 18px; color: var(--ketex-primary); flex: 0 0 auto; }
@media (max-width: 1024px) { .ketex-prinzip__inner { grid-template-columns: 1fr; } }
/* Ohne Bild: einspaltig + zentriert (kein halbleeres 2-Spalten-Layout). */
.ketex-prinzip--solo .ketex-prinzip__inner { grid-template-columns: 1fr; max-width: 760px; text-align: center; }
.ketex-prinzip--solo .ketex-prinzip__badges { justify-content: center; }

/* --- Damit gelingt's (ketex/tips) --- */
.ketex-tips { background: var(--ketex-bg-warm); }
.ketex-tips__grid {
  max-width: var(--ketex-content-max); margin-inline: auto;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
}
.ketex-tip {
  display: flex; flex-direction: column; gap: 8px;
  background: var(--ketex-bg-light); border: 1px solid var(--ketex-border);
  border-radius: 12px; padding: 24px; text-decoration: none; color: inherit;
}
.ketex-tip__icon { width: 28px; height: 28px; color: var(--ketex-primary); }
.ketex-tip__title { font-family: var(--ketex-font-ui); font-weight: 500; color: var(--ketex-dark); }
.ketex-tip__text { color: var(--ketex-text-muted); font-size: 0.9rem; }
@media (max-width: 767px) { .ketex-tips__grid { grid-template-columns: 1fr; } }

/* --- Newsletter-CTA (ketex/newsletter-cta) — dunkle Vollbreite-Sektion --- */
.ketex-newsletter-cta { background: var(--ketex-dark); padding-block: clamp(48px, 5vw, 64px); }
.ketex-newsletter-cta__card {
  max-width: 760px; margin-inline: auto; text-align: center;
  background: #36302B; /* einmaliger Sonderton: innere Newsletter-Card, minimal heller als --ketex-dark (kein Foundation-Token) */
  color: #fff; border-radius: 16px;
  padding: clamp(32px, 5vw, 56px);
}
.ketex-newsletter-cta__kicker { font-family: var(--ketex-font-ui); letter-spacing: 2.5px; text-transform: uppercase; font-size: var(--ketex-kicker); color: rgba(255,255,255,0.7); margin: 0 0 12px; }
.ketex-newsletter-cta__headline { font-family: var(--ketex-font-title); font-weight: var(--ketex-title-weight); margin: 0 0 12px; }
.ketex-newsletter-cta__body { color: rgba(255,255,255,0.8); margin: 0 0 24px; }

/* --- Kategorie-Grid (ketex/category-grid) --- */
.ketex-category-grid { background: var(--ketex-bg-warm); }
.ketex-category-grid__inner { max-width: var(--ketex-content-max); margin-inline: auto; }
.ketex-category-grid__grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
}
.ketex-category-card { position: relative; }
.ketex-category-card__link { position: relative; display: block; text-decoration: none; color: #fff; }
.ketex-category-card__media { position: relative; display: block; aspect-ratio: 1 / 1; overflow: hidden; border-radius: 12px; background: var(--ketex-bg-warm); }
.ketex-category-card__img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
.ketex-category-card__link:hover .ketex-category-card__img { transform: scale(1.04); }
.ketex-category-card__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(42,38,34,0) 38%, rgba(42,38,34,0.72)); }
.ketex-category-card__name { position: absolute; left: 18px; right: 18px; bottom: 16px; margin: 0; z-index: 2; text-align: left; color: #FCFAF8; font-family: var(--ketex-font-title); font-weight: var(--ketex-title-weight); font-size: var(--ketex-title-card); }
@media (max-width: 1024px) { .ketex-category-grid__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .ketex-category-grid__grid { grid-template-columns: 1fr; } }

/* --- Rezept des Monats (ketex/featured-recipe) — eigene Aufmacher-Karte mit 2 Buttons --- */
.ketex-featured-recipe__inner { max-width: var(--ketex-content-max); margin-inline: auto; }
.ketex-featured-recipe__card {
  display: grid; grid-template-columns: 1.1fr 1fr; gap: 0;
  background: var(--ketex-bg-light); border: 1px solid var(--ketex-border); border-radius: 16px; overflow: hidden;
  min-width: 0;
}
.ketex-featured-recipe__card > * { min-width: 0; }
.ketex-featured-recipe__media { display: block; min-height: 320px; }
.ketex-featured-recipe__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ketex-featured-recipe__body { padding: clamp(28px, 4vw, 48px); display: flex; flex-direction: column; justify-content: center; }
.ketex-featured-recipe__meta { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; color: var(--ketex-text-muted); font-family: var(--ketex-font-ui); font-size: 0.9rem; }
.ketex-featured-recipe__badge { background: var(--ketex-bg-warm); color: var(--ketex-dark); border-radius: 999px; padding: 3px 12px; }
.ketex-featured-recipe__title { font-family: var(--ketex-font-title); font-weight: var(--ketex-title-weight); font-size: var(--ketex-title-section); color: var(--ketex-dark); margin: 0 0 14px; }
.ketex-featured-recipe__desc { color: var(--ketex-text-muted); margin: 0 0 24px; }
.ketex-featured-recipe__actions { display: flex; flex-wrap: wrap; gap: 14px; }
.ketex-featured-recipe__btn { display: inline-block; background: var(--ketex-primary); color: #fff; padding: 12px 24px; border-radius: 6px; text-decoration: none; font-family: var(--ketex-font-ui); }
.ketex-featured-recipe__btn--outline { background: transparent; color: var(--ketex-dark); border: 1px solid var(--ketex-border); }
@media (max-width: 767px) { .ketex-featured-recipe__card { grid-template-columns: 1fr; } }
@media (max-width: 359px) {
  .ketex-featured-recipe__title,
  .ketex-featured-recipe__desc { overflow-wrap: anywhere; }
}

/* --- Bestseller (ketex/product-grid) --- */
/* Der .woocommerce-Wrapper im render.php aktiviert die identische Shop-Archiv-Card-Optik
   (weiße Karte/Schatten/Wishlist/Button aus global.css). Die globale Regel
   `.woocommerce ul.products{display:flex !important}` würde aber unsere Karten voll-breit
   stapeln — daher hier ein höher-spezifisches Grid-Override (mit !important auf display).

   auto-FILL, nicht auto-fit: auto-fit kollabiert leere Spuren, dadurch dehnte sich eine
   einzelne Karte (Teilauflösung der gepflegten IDs) über die vollen 1400 px. Die
   Untergrenze 300 px ist zugleich die Obergrenze der Spaltenzahl — floor((1400+24)/324) = 4,
   passend zu SLIMWOO_PRODUCT_GRID_COLUMNS['full'] im Fallback-Modul. Mit den alten 260 px
   entstanden ab fünf Karten fünf Spalten à 261 px, ein Raster, das die Pflege (vier Slots)
   nie erzeugt. Vier gepflegte Karten stehen unverändert bei 332 px. */
.ketex-product-grid { background: var(--ketex-bg); }
.ketex-product-grid--warm { background: var(--ketex-bg-warm); }
.ketex-product-grid__inner { max-width: var(--ketex-content-max); margin-inline: auto; }
.ketex-product-grid .woocommerce ul.products.ketex-product-grid__list {
  list-style: none; margin: 28px 0 0; padding: 0;
  display: grid !important; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 24px; align-items: stretch;
}
@media (max-width: 1024px) { .ketex-product-grid .woocommerce ul.products.ketex-product-grid__list { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .ketex-product-grid .woocommerce ul.products.ketex-product-grid__list { grid-template-columns: 1fr; } }

/* --- product-grid compact (Damit gelingt's) — kompakte Mini-Produkt-Cards --- */
.ketex-product-grid--compact { background: var(--ketex-bg-light); }
.ketex-mini-grid {
  list-style: none; margin: 28px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
}
.ketex-mini-card {
  background: #fff; border: 1px solid var(--ketex-border); border-radius: 12px; overflow: hidden;
}
.ketex-mini-card__link { display: flex; align-items: center; gap: 16px; padding: 14px; text-decoration: none; color: inherit; }
.ketex-mini-card__media { flex: 0 0 auto; width: 72px; height: 72px; border-radius: 8px; overflow: hidden; background: var(--ketex-bg-light); }
.ketex-mini-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ketex-mini-card__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ketex-mini-card__name { font-family: var(--ketex-font-title); font-weight: var(--ketex-title-weight); color: var(--ketex-dark); font-size: 0.95rem; }
.ketex-mini-card__rating { display: inline-flex; align-items: center; gap: 6px; font-size: 0.8rem; color: var(--ketex-text-muted); }
.ketex-stars { display: inline-flex; gap: 1px; }
.ketex-star { width: 13px; height: 13px; color: #D8D2C8; }
.ketex-star.is-on { color: #E0A500; fill: #E0A500; }
.ketex-mini-card__price { font-family: var(--ketex-font-ui); font-weight: 600; color: var(--ketex-secondary); }
.ketex-mini-card__price del { color: var(--ketex-text-muted); font-weight: 400; margin-right: 6px; }
@media (max-width: 900px) { .ketex-mini-grid { grid-template-columns: 1fr; } }

/* „Alle Produkte entdecken" unter den Bestseller-Karten */
.ketex-product-grid__more { text-align: center; margin: 28px 0 0; }
.ketex-product-grid__more a { color: var(--ketex-primary); text-decoration: none; font-family: var(--ketex-font-ui); font-weight: 600; }
.ketex-product-grid__more a:hover { text-decoration: underline; }