/* =========================================================
   Erster Hund - Eigenes CSS (ergaenzt theme.json)
   Klassen werden in den Block-Patterns via "Zusaetzliche CSS-Klasse" gesetzt.
   ========================================================= */
:root{
  --eh-petrol:#2A3433;
  --eh-rost:#AD4E18;
  --eh-creme:#F6F7E5;
  --eh-honig:#E8A552;
  --eh-creme-card:#FBFBEF;
  --eh-petrol-12:rgba(42,52,51,.12);
  --eh-petrol-80:rgba(42,52,51,.80);
  --eh-rost-10:rgba(173,78,24,.10);
  --eh-radius:18px;
  --eh-radius-sm:12px;
  --eh-shadow:0 14px 40px -18px rgba(42,52,51,.35);
}

/* ---------- Header ---------- */
.eh-header{
  position:sticky;top:0;z-index:50;
  background:rgba(246,247,229,.88);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--eh-petrol-12);
}
.eh-header img{height:46px;width:auto}
.eh-header .wp-block-navigation{font-family:'Inter',sans-serif;font-weight:500;font-size:14.5px}

/* ---------- Eyebrow / Label ---------- */
.eh-eyebrow{
  display:inline-block;font-family:'Inter',sans-serif;font-size:13px;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;color:var(--eh-rost);
  background:var(--eh-rost-10);padding:6px 14px;border-radius:999px;
}

/* ---------- Hero ---------- */
.eh-hero{padding-block:60px}
.eh-hero h1{font-size:clamp(2.4rem,4.6vw,3.6rem)}
.eh-hero .eh-lead{font-size:1.18rem;color:var(--eh-petrol-80)}
.eh-figure{
  border-radius:var(--eh-radius);overflow:hidden;box-shadow:var(--eh-shadow);
}

/* ---------- Kategorie-Karten (Affiliate-Hub) ---------- */
.eh-cat-card{
  background:var(--eh-creme-card);border:1px solid var(--eh-petrol-12);
  border-radius:var(--eh-radius);padding:26px 24px;height:100%;transition:.18s;
}
.eh-cat-card:hover{transform:translateY(-3px);box-shadow:var(--eh-shadow)}
.eh-cat-card.is-hub{background:var(--eh-petrol);color:var(--eh-creme)}
.eh-cat-card.is-hub :where(h3,p,a){color:var(--eh-creme)}

/* =========================================================
   ★ EMPFEHLUNGS-BLOCK  (Pattern: "Empfehlungen zu diesem Kapitel")
   ========================================================= */
.eh-reco{
  background:var(--eh-creme-card);
  border:1px solid var(--eh-petrol-12);
  border-radius:var(--eh-radius);
  box-shadow:var(--eh-shadow);
  overflow:hidden;
  margin-block:54px;
  padding:0 !important;
}
.eh-reco .eh-reco-head{
  padding:24px 28px 18px;border-bottom:1px solid var(--eh-petrol-12);
}
.eh-reco .eh-reco-head h3{font-size:1.45rem;margin:.4em 0 .2em}
.eh-reco .eh-reco-head p{font-size:.95rem;color:var(--eh-petrol-80);margin:0}
.eh-ad-label{
  display:inline-block;font-family:'Inter',sans-serif;font-size:11px;font-weight:700;
  letter-spacing:.05em;text-transform:uppercase;color:var(--eh-petrol-80);
  background:var(--eh-petrol-12);padding:6px 11px;border-radius:8px;margin-top:6px;
}
.eh-reco .eh-reco-rows{padding:22px}
.eh-reco .wp-block-columns{margin-bottom:16px}
.eh-reco .wp-block-columns:last-of-type{margin-bottom:0}

/* Produktkarte */
.eh-product{
  background:var(--eh-creme);border:1px solid var(--eh-petrol-12);
  border-radius:var(--eh-radius-sm);padding:16px 16px 18px;height:100%;
  display:flex;flex-direction:column;
}
.eh-product img{
  border-radius:10px;border:1px solid var(--eh-petrol-12);
  aspect-ratio:1/1;object-fit:cover;width:100%;margin-bottom:12px;background:var(--eh-creme-card);
}
.eh-product h4{font-family:'Fraunces',serif;font-size:1.1rem;line-height:1.2;margin:0 0 7px}
.eh-product .eh-note{font-size:.9rem;line-height:1.55;color:var(--eh-petrol-80);margin:0 0 16px;flex:1}
.eh-product .eh-note strong{color:var(--eh-rost);font-weight:600}
.eh-product .wp-block-button{margin-top:auto;width:100%}
.eh-product .wp-block-button__link{display:block;text-align:center;font-size:14px;padding:11px 14px}

/* Transparenz-Fuss */
.eh-reco .eh-reco-foot{
  padding:14px 28px;background:#EFF0DC;border-top:1px solid var(--eh-petrol-12);
  font-size:12.5px;color:var(--eh-petrol-80);margin:0;
}

/* ---------- Footer ---------- */
.eh-footer{background:var(--eh-petrol);color:var(--eh-creme);padding-block:50px 28px}
.eh-footer :where(a,p,h5,li){color:rgba(246,247,229,.82)}
.eh-footer h5{font-family:'Inter',sans-serif;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--eh-honig)}
.eh-footer img{height:42px;width:auto}
.eh-footer .eh-footer-note{border-top:1px solid rgba(246,247,229,.16);padding-top:18px;font-size:12.5px;color:rgba(246,247,229,.6)}

/* ---------- Responsive: 3x2 bleibt erhalten, bricht sauber um ---------- */
@media(max-width:781px){
  .eh-product{margin-bottom:0}
}