/* =========================================================================
   KMP – Produkt-Archiv / Kategorie / Hersteller  (Redesign)
   Laedt nur auf /produkte/, /kategorie/<slug>/, /hersteller/<slug>/
   ========================================================================= */

/* ---------- Produkt-Grid + 1:1-Kachel ---------- */
.kmp-gridsec{ background:#fff; }
.produkt-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
@media (max-width:900px){ .produkt-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .produkt-grid{ grid-template-columns:1fr; } }

.p-card{ background:#fff; border-radius:20px; overflow:hidden; text-decoration:none; color:inherit; box-shadow:0 2px 16px rgba(13,11,46,.07); transition:transform .3s ease, box-shadow .3s ease; display:flex; flex-direction:column; position:relative; }
.p-card:hover{ transform:translateY(-6px); box-shadow:0 16px 40px rgba(127,119,221,.18); }
.p-card__new{ position:absolute; top:14px; right:14px; background:#7F77DD; color:#fff; font-size:11px; font-weight:700; letter-spacing:2px; text-transform:uppercase; padding:4px 10px; border-radius:6px; z-index:2; }
.p-card__media{ aspect-ratio:16/9; background:#F0EFFE; overflow:hidden; display:flex; align-items:center; justify-content:center; }
.p-card__media img{ width:100%; height:100%; object-fit:contain; padding:16px; transition:transform .4s ease; }
.p-card:hover .p-card__media img{ transform:scale(1.04); }
.p-card__body{ padding:24px; flex:1; display:flex; flex-direction:column; }
.p-card__kategorie{ color:#7F77DD; font-size:11px; font-weight:700; letter-spacing:3px; text-transform:uppercase; margin:0 0 8px; }
.p-card__title{ color:#0D0B2E; font-size:1.1rem; font-weight:800; margin:0 0 10px; line-height:1.25; }
.p-card__desc{ color:#666; font-size:13px; line-height:1.65; margin:0 0 14px; }
.p-card__punkte{ list-style:none; padding:0; margin:0 0 20px; display:flex; flex-direction:column; gap:6px; }
.p-card__punkte li{ color:#7F77DD; font-size:12px; font-weight:600; display:flex; align-items:flex-start; gap:6px; line-height:1.4; }
.p-card__punkte li::before{ content:'\25C6'; font-size:8px; margin-top:3px; flex-shrink:0; }
.p-card__link{ margin-top:auto; color:#0D0B2E; font-size:13px; font-weight:700; text-decoration:none; }
.p-card:hover .p-card__link{ color:#7F77DD; }

/* ---------- Gradient-Hero ---------- */
.kmp-hero{ position:relative; background:linear-gradient(135deg,#0D0B2E 0%,#534AB7 100%); overflow:hidden; }
.kmp-hero::before{ content:""; position:absolute; inset:0; background:radial-gradient(ellipse 60% 60% at 82% 38%,rgba(127,119,221,.3) 0%,transparent 70%); pointer-events:none; }
.kmp-hero__inner{ position:relative; z-index:1; max-width:var(--container-max,1200px); margin:0 auto; padding:58px var(--container-px,2rem) 62px; display:grid; grid-template-columns:1fr auto; gap:40px; align-items:center; }
.kmp-hero__eyebrow{ color:rgba(255,255,255,.62); font-size:12px; font-weight:700; letter-spacing:5px; text-transform:uppercase; margin:0 0 14px; }
.kmp-hero__title{ color:#fff; font-size:var(--fs-display,clamp(2.4rem,5vw,4rem)); font-weight:900; letter-spacing:-.03em; line-height:1.05; margin:0 0 18px; }
.kmp-hero__sub{ color:rgba(255,255,255,.78); font-size:1.05rem; line-height:1.7; max-width:520px; margin:0 0 28px; }
.kmp-hero__cta{ display:inline-block; background:#fff; color:#0D0B2E; padding:15px 30px; border-radius:12px; font-size:15px; font-weight:700; text-decoration:none; margin-bottom:26px; transition:transform .25s, box-shadow .25s; }
.kmp-hero__cta:hover{ transform:translateY(-2px); box-shadow:0 14px 34px rgba(0,0,0,.3); }
.kmp-hero__avail{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.kmp-hero__avail-lbl{ color:rgba(255,255,255,.6); font-size:13px; font-weight:600; }
.kmp-hero__her{ display:inline-flex; align-items:center; gap:7px; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.28); color:#fff; font-size:13px; font-weight:700; padding:8px 14px; border-radius:9px; text-decoration:none; transition:background .2s, border-color .2s; }
.kmp-hero__her:hover{ background:rgba(255,255,255,.24); border-color:rgba(255,255,255,.45); }
.kmp-hero__her svg{ opacity:.85; }
.kmp-hero__panel{ background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.2); border-radius:20px; padding:34px 40px; display:flex; flex-direction:column; align-items:center; gap:14px; min-width:200px; color:#fff; }
.kmp-hero__panel svg{ width:58px; height:58px; }
.kmp-hero__panel-n{ font-size:1.2rem; font-weight:900; letter-spacing:-.02em; text-align:center; }
@media (max-width:768px){ .kmp-hero__inner{ grid-template-columns:1fr; padding:44px var(--container-px,1.2rem) 48px; } .kmp-hero__panel{ display:none; } }

/* ---------- Kategorie-Navi (sticky) ---------- */
.kmp-katnav{ position:sticky; top:64px; z-index:40; background:rgba(245,245,247,.96); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); border-bottom:1px solid rgba(13,11,46,.1); }
.kmp-katnav__inner{ max-width:var(--container-max,1200px); margin:0 auto; padding:0 var(--container-px,2rem); display:flex; flex-wrap:wrap; justify-content:center; }
.kmp-katnav__item{ padding:15px 16px; font-size:14px; font-weight:600; color:#6b6b80; text-decoration:none; border-bottom:3px solid transparent; white-space:nowrap; transition:color .2s, border-color .2s; }
.kmp-katnav__item:hover{ color:#0D0B2E; }
.kmp-katnav__item.is-active{ color:#7F77DD; border-bottom-color:#7F77DD; }
@media (max-width:768px){ .kmp-katnav__inner{ justify-content:flex-start; overflow-x:auto; } .kmp-katnav__item{ padding:14px 12px; font-size:13px; } }

/* ---------- Sektions-Kopf (Homepage-Stil) ---------- */
.kmp-sec-head{ text-align:center; max-width:680px; margin:0 auto 44px; }
.kmp-sec-head .eyebrow{ margin-bottom:14px; }
.kmp-sec-h{ color:#0D0B2E; font-size:clamp(1.8rem,4vw,2.6rem); font-weight:800; letter-spacing:-.01em; line-height:1.2; margin:0; }
.kmp-sec-h .dot{ color:#7F77DD; }
.kmp-sec-lead{ color:#666; font-size:18px; line-height:1.6; margin:14px 0 0; }

/* ---------- Kriterien ---------- */
.kmp-krit{ background:#F5F5F7; }
.kmp-krit__row{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px; max-width:1000px; margin:0 auto; }
.kmp-krit__card{ background:#fff; border:1px solid rgba(13,11,46,.07); border-radius:16px; padding:22px; box-shadow:0 2px 12px rgba(13,11,46,.05); }
.kmp-krit__ic{ width:44px; height:44px; border-radius:12px; background:#F0EFFE; color:#7F77DD; display:flex; align-items:center; justify-content:center; margin-bottom:14px; }
.kmp-krit__t{ color:#0D0B2E; font-size:16px; font-weight:700; margin:0 0 6px; }
.kmp-krit__s{ color:#777; font-size:13.5px; line-height:1.6; margin:0; }

/* ---------- SEO-Prosa-Karte ---------- */
.kmp-seo{ background:#F5F5F7; }
.kmp-krit + .kmp-seo{ padding-top:0; }
.kmp-seo__card{ max-width:760px; margin:0 auto; background:#fff; border-radius:18px; padding:36px 40px; box-shadow:0 2px 14px rgba(13,11,46,.05); }
.kmp-seo__card > :first-child{ margin-top:0; }
.kmp-seo__card h2{ color:#0D0B2E; font-size:1.5rem; font-weight:800; margin:24px 0 10px; }
.kmp-seo__card h3{ color:#0D0B2E; font-size:1.2rem; font-weight:800; margin:22px 0 8px; }
.kmp-seo__card p{ color:#555; font-size:15.5px; line-height:1.8; margin:0 0 14px; }
.kmp-seo__card p:last-child{ margin-bottom:0; }
.kmp-seo__card ul,.kmp-seo__card ol{ color:#555; font-size:15.5px; line-height:1.8; padding-left:1.2em; margin:0 0 14px; }

/* ---------- Branchen-Gradient-Karten ---------- */
.kmp-branchen{ background:#F5F5F7; }
.kmp-branchen__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; max-width:1100px; margin:0 auto; }
@media (max-width:900px){ .kmp-branchen__grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .kmp-branchen__grid{ grid-template-columns:1fr; } }
.kmp-bcard{ position:relative; border-radius:20px; overflow:hidden; height:280px; display:block; text-decoration:none; background:#1a1440; transition:transform .35s ease, box-shadow .35s ease; }
.kmp-bcard:hover{ transform:translateY(-8px) scale(1.01); box-shadow:0 20px 50px rgba(13,11,46,.28); }
.kmp-bcard__ov{ position:absolute; inset:0; opacity:.92; }
.kmp-bcard__in{ position:relative; z-index:1; padding:30px 28px; height:100%; display:flex; flex-direction:column; justify-content:flex-end; }
.kmp-bcard__ic{ width:48px; height:48px; background:rgba(255,255,255,.15); border-radius:12px; display:flex; align-items:center; justify-content:center; margin-bottom:16px; }
.kmp-bcard__t{ color:#fff; font-size:20px; font-weight:700; margin:0 0 8px; }
.kmp-bcard__s{ color:rgba(255,255,255,.75); font-size:14px; line-height:1.6; margin:0 0 12px; }
.kmp-bcard__l{ font-size:13px; font-weight:600; }

/* ---------- FAQ (Homepage-Stil) ---------- */
.kmp-faq{ background:#F5F5F7; }
.kmp-faq__list{ max-width:800px; margin:0 auto; }
.kmp-faq__item{ background:#fff; border-radius:16px; margin-bottom:12px; box-shadow:0 2px 12px rgba(0,0,0,.06); overflow:hidden; }
.kmp-faq__q{ width:100%; background:none; border:0; cursor:pointer; padding:22px 26px; display:flex; justify-content:space-between; align-items:center; gap:16px; text-align:left; font:inherit; }
.kmp-faq__q > span:first-child{ color:#0D0B2E; font-size:17px; font-weight:600; }
.kmp-faq__pl{ color:#7F77DD; font-size:24px; font-weight:300; flex-shrink:0; line-height:1; transition:transform .3s ease; }
.kmp-faq__item.is-open .kmp-faq__pl{ transform:rotate(45deg); }
.kmp-faq__a{ max-height:0; overflow:hidden; transition:max-height .3s ease; }
.kmp-faq__a p{ color:#888; font-size:15px; line-height:1.7; padding:0 26px 24px; margin:0; }

/* ---------- Leerzustand ---------- */
.kmp-empty{ max-width:540px; margin:0 auto; text-align:center; padding:24px 20px; }
.kmp-empty__icon{ width:74px; height:74px; border-radius:20px; background:#F0EFFE; color:#7F77DD; display:flex; align-items:center; justify-content:center; margin:0 auto 22px; }
.kmp-empty__title{ color:#0D0B2E; font-size:clamp(1.4rem,2.4vw,1.7rem); font-weight:800; margin:0 0 12px; line-height:1.2; }
.kmp-empty__text{ color:#666; font-size:15px; line-height:1.7; margin:0 0 28px; }
.kmp-empty__actions{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.kmp-empty__btn{ padding:13px 24px; border-radius:11px; font-size:14px; font-weight:700; text-decoration:none; border:1px solid rgba(13,11,46,.15); color:#0D0B2E; transition:background .2s, border-color .2s, color .2s, transform .2s; }
.kmp-empty__btn:hover{ border-color:#7F77DD; color:#534AB7; background:#F0EFFE; }
.kmp-empty__btn--primary{ background:#0D0B2E; color:#fff; border-color:#0D0B2E; }
.kmp-empty__btn--primary:hover{ background:#7F77DD; border-color:#7F77DD; color:#fff; transform:translateY(-1px); }

/* ---------- Breadcrumb (falls sichtbar genutzt) ---------- */
.kmp-bc{ list-style:none; display:flex; flex-wrap:wrap; align-items:center; gap:8px; padding:0; margin:0 0 18px; font-size:13px; }
.kmp-bc li{ display:flex; align-items:center; gap:8px; color:rgba(255,255,255,.55); }
.kmp-bc a{ color:rgba(255,255,255,.8); text-decoration:none; }
.kmp-bc a:hover{ color:#fff; }

@media (prefers-reduced-motion:reduce){ .p-card,.kmp-bcard,.kmp-hero__cta,.kmp-empty__btn{ transition:none; } }