/* Katalog-Konfigurator (White Label). Nur unter .hpv2 .kk – kollidiert nicht mit site-v2 oder /taktflo.
   Farben kommen je Mandant aus der Tenant-Config (CSS-Variablen --kk-*). */
.hpv2 .kk{--kk-accent:#2563eb;--kk-bg:#10151f;--kk-card:#182233;--kk-text:#e8eef8;--kk-muted:#93a0b8;--kk-line:rgba(255,255,255,.1);
  color:var(--kk-text);background:var(--kk-bg);border:1px solid var(--kk-line);border-radius:22px;box-shadow:0 24px 60px rgba(0,0,0,.35);overflow:hidden;
  transition:background .25s ease}
.hpv2 .kk *{box-sizing:border-box}
.hpv2 .kk button,.hpv2 .kk input,.hpv2 .kk select,.hpv2 .kk textarea{font:inherit;color:inherit}
.hpv2 .kk h3{margin:0 0 10px;font-size:1.05rem;color:var(--kk-text)}
.hpv2 .kk-bar{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--kk-line);background:rgba(0,0,0,.2)}
.hpv2 .kk-brand{display:flex;align-items:center;gap:10px;min-width:0}
.hpv2 .kk-mark{width:38px;height:38px;border-radius:11px;background:var(--kk-accent);color:#fff;display:grid;place-items:center;font-family:var(--hpv2-display);font-weight:700;letter-spacing:-.03em;flex-shrink:0}
.hpv2 .kk-brand b{display:block;font-family:var(--hpv2-display);letter-spacing:-.03em;line-height:1.15}
.hpv2 .kk-brand span{color:var(--kk-muted);font-size:.82rem}
.hpv2 .kk-brand .kk-mark{color:#fff;font-size:inherit} /* QA 08.10.: Logo-Kürzel war grau auf Akzent (Kontrast 2,4) */
.hpv2 .kk-switch{display:flex;gap:6px;flex-wrap:wrap;align-items:center;font-size:.8rem;color:var(--kk-muted)}
.hpv2 .kk-switch button,.hpv2 .kk-chips button,.hpv2 .kk-ghost,.hpv2 .kk-primary,.hpv2 .kk-tabs button{border-radius:999px;border:1px solid var(--kk-line);background:transparent;padding:7px 12px;cursor:pointer;line-height:1.2}
.hpv2 .kk-switch button[aria-pressed="true"],.hpv2 .kk-chips button[aria-pressed="true"]{background:var(--kk-accent);border-color:var(--kk-accent);color:#fff}
.hpv2 .kk-tabs{display:flex;gap:6px;padding:12px 16px 0;flex-wrap:wrap}
.hpv2 .kk-tabs button{font-weight:600;font-size:.9rem}
.hpv2 .kk-tabs button[aria-selected="true"]{border-color:var(--kk-accent);color:#fff;background:color-mix(in srgb,var(--kk-accent) 28%,transparent)}
.hpv2 .kk-body{padding:14px 16px 16px}
.hpv2 .kk-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(280px,.9fr);gap:14px}
@media(max-width:860px){.hpv2 .kk-grid{grid-template-columns:1fr}}
.hpv2 .kk-card{background:var(--kk-card);border:1px solid var(--kk-line);border-radius:16px;padding:14px}
.hpv2 .kk-view{display:flex;flex-direction:column;align-self:start;position:sticky;top:12px}
@media(max-width:860px){.hpv2 .kk-view{position:static}}
.hpv2 .kk-svg{width:100%;height:auto;max-height:420px;display:block;color:var(--kk-muted)}
.hpv2 .kk-dimt{fill:var(--kk-muted);font-family:var(--hpv2-font)}
.hpv2 .kk-fields{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.hpv2 .kk-wide{grid-column:1 / -1}
.hpv2 .kk-field{display:flex;flex-direction:column;gap:5px;font-size:.8rem;color:var(--kk-muted);border:0;margin:0;padding:0;min-width:0}
.hpv2 .kk-field legend{padding:0;margin-bottom:5px}
.hpv2 .kk-field small{opacity:.8}
.hpv2 .kk-field input,.hpv2 .kk-field select,.hpv2 .kk-field textarea{background:rgba(0,0,0,.28);border:1px solid var(--kk-line);border-radius:10px;padding:9px 10px;color:var(--kk-text);font-size:.95rem;width:100%}
.hpv2 .kk-field input:focus,.hpv2 .kk-field select:focus,.hpv2 .kk-field textarea:focus{outline:2px solid var(--kk-accent);outline-offset:1px}
.hpv2 .kk-chips{display:flex;flex-wrap:wrap;gap:6px}
.hpv2 .kk-chips button{font-size:.85rem;color:var(--kk-text)}
.hpv2 .kk-toggle{display:flex;gap:8px;align-items:flex-start;font-size:.85rem;color:var(--kk-text);margin-top:4px}
.hpv2 .kk-toggle input{margin-top:3px;accent-color:var(--kk-accent)}
.hpv2 .kk-price{margin-top:14px;padding:14px;border-radius:14px;background:color-mix(in srgb,var(--kk-accent) 22%,rgba(0,0,0,.3));border:1px solid var(--kk-line);display:flex;flex-direction:column;gap:2px}
.hpv2 .kk-price b{font-family:var(--hpv2-display);font-size:2rem;letter-spacing:-.04em;line-height:1.1}
.hpv2 .kk-price span{color:var(--kk-muted);font-size:.86rem}
.hpv2 .kk-price .kk-tag{text-transform:uppercase;letter-spacing:.1em;font-size:.68rem}
.hpv2 .kk-price .kk-tax{color:var(--kk-text);opacity:.85;font-size:.8rem}
.hpv2 .kk-break{margin-top:8px;font-size:.84rem}
.hpv2 .kk-break summary{cursor:pointer;color:var(--kk-muted)}
.hpv2 .kk-break table,.hpv2 .kk-table{width:100%;border-collapse:collapse;margin-top:6px;font-size:.84rem}
.hpv2 .kk-break td,.hpv2 .kk-table th,.hpv2 .kk-table td{border-bottom:1px solid var(--kk-line);padding:6px 4px;text-align:left;vertical-align:top}
.hpv2 .kk-break td:last-child{text-align:right;white-space:nowrap}
.hpv2 .kk-table th{color:var(--kk-muted);font-weight:600;width:38%}
.hpv2 .kk-small{color:var(--kk-muted);font-size:.78rem;margin:.6rem 0 0}
.hpv2 .kk-warn{margin-top:10px;padding:9px 11px;border-radius:10px;background:rgba(250,204,21,.09);border:1px solid rgba(250,204,21,.28);color:#fde68a;font-size:.82rem}
.hpv2 .kk-warn ul{margin:4px 0 0;padding-left:1.1rem}
.hpv2 .kk-actions{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap;margin-top:12px}
.hpv2 .kk-primary{background:var(--kk-accent);border-color:var(--kk-accent);color:#fff;font-weight:650;padding:10px 18px}
.hpv2 .kk-primary:hover{filter:brightness(1.1)}
.hpv2 .kk-form{margin-top:14px}
.hpv2 .kk-err{color:#fca5a5;font-size:.84rem;min-height:1em;margin:.5rem 0 0}
.hpv2 .kk-ok{background:rgba(34,197,94,.1);border:1px solid rgba(134,239,172,.35);border-radius:12px;padding:10px 12px;color:#bbf7d0;font-size:.9rem}
.hpv2 .kk-cols{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:12px}
@media(max-width:860px){.hpv2 .kk-cols{grid-template-columns:1fr}}
.hpv2 .kk pre{white-space:pre-wrap;word-break:break-word;background:rgba(0,0,0,.35);color:var(--kk-text);padding:10px;border-radius:10px;font-size:.72rem;max-height:520px;overflow:auto;margin:0}
.hpv2 .kk-foot{padding:10px 16px 14px;color:var(--kk-muted);font-size:.76rem;border-top:1px solid var(--kk-line)}
@media(max-width:520px){
  .hpv2 .kk-fields{grid-template-columns:1fr 1fr}
  .hpv2 .kk-body{padding:12px}
  .hpv2 .kk-bar{padding:12px}
  .hpv2 .kk-price b{font-size:1.7rem}
}
/* Codebox auf der Produktseite */
.hpv2 .kk-code{background:#1a1d24;border:1px solid var(--hpv2-border);border-radius:12px;padding:12px 14px;font-size:.8rem;overflow:auto;color:#dbe3ee}
.hpv2 .kk button:disabled{opacity:.45;cursor:not-allowed} /* QA 08.10. */