/* =========================================================================
   Nexus-Office · katalog.css  ·  Katalog-Hub (hell, galerie-artig)
   Kontrast zur dunklen Startseite. Jede Kachel deutet die Palette ihrer Demo an.
   ========================================================================= */
body.katalog{background:var(--nx-bone);color:#1a1c20;font-family:var(--nx-font-body)}
.kwrap{width:100%;max-width:1280px;margin-inline:auto;padding-inline:clamp(1.25rem,5vw,3rem)}

.khead{padding-block:clamp(3rem,7vw,5.5rem) clamp(1.5rem,3vw,2.5rem);max-width:820px}
.khead .eyebrow{font-family:var(--nx-font-mono);font-size:.76rem;letter-spacing:.22em;text-transform:uppercase;color:var(--nx-accent-deep)}
.khead h1{font-family:var(--nx-font-display);font-weight:600;letter-spacing:-.03em;font-size:clamp(2.4rem,6.5vw,4.6rem);line-height:1;margin:.9rem 0 1.1rem}
.khead p{color:#54585f;font-size:clamp(1.05rem,1.8vw,1.28rem);line-height:1.6;max-width:60ch}

/* Filter */
.kfilter{position:sticky;top:var(--nx-shell-h);z-index:40;display:flex;flex-wrap:wrap;gap:.5rem;
  padding:1rem 0;background:color-mix(in srgb,var(--nx-bone) 88%,transparent);backdrop-filter:blur(8px);
  border-bottom:1px solid rgba(0,0,0,.08)}
.chip{font-size:.86rem;font-weight:600;padding:.5rem 1rem;border-radius:999px;border:1px solid rgba(0,0,0,.14);
  color:#3a3d43;transition:all .25s var(--nx-ease)}
.chip:hover{border-color:#1a1c20}
.chip[aria-pressed="true"]{background:#1a1c20;color:var(--nx-bone);border-color:#1a1c20}

/* Grid */
.kgrid{display:grid;gap:1.15rem;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));padding-block:2rem clamp(4rem,8vw,6rem)}
.kcard{position:relative;border-radius:22px;overflow:hidden;background:#fff;border:1px solid rgba(0,0,0,.08);
  display:flex;flex-direction:column;min-height:340px;text-decoration:none;color:inherit;
  transition:transform .5s var(--nx-ease),box-shadow .5s var(--nx-ease);will-change:transform}
.kcard:hover{transform:translateY(-6px);box-shadow:0 30px 60px -30px rgba(0,0,0,.35)}
.kcard.hide{display:none}
.kcard__art{position:relative;height:180px;overflow:hidden;background:var(--c1,#222)}
.kcard__art svg{position:absolute;inset:0;width:100%;height:100%}
.kcard__body{padding:1.3rem 1.4rem 1.5rem;display:flex;flex-direction:column;flex:1}
.kcard__cat{font-family:var(--nx-font-mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:#8a8f98}
.kcard__body h2{font-family:var(--nx-font-display);font-size:1.4rem;font-weight:600;letter-spacing:-.01em;margin:.35rem 0 .5rem}
.kcard__body p{color:#54585f;font-size:.95rem;line-height:1.5;flex:1}
.kcard__go{margin-top:1rem;display:inline-flex;align-items:center;gap:.5rem;font-weight:600;font-size:.92rem;color:#1a1c20}
.kcard__go svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;transition:transform .3s var(--nx-ease)}
.kcard:hover .kcard__go svg{transform:translateX(4px)}
.kcard__badge{position:absolute;top:1rem;left:1rem;z-index:2;background:rgba(255,255,255,.9);color:#1a1c20;
  font-size:.7rem;font-weight:700;letter-spacing:.04em;padding:.3rem .6rem;border-radius:999px}

@media (prefers-color-scheme:dark){
  body.katalog{background:#101215;color:#eceae4}
  .khead p{color:#a9adb4}
  .kfilter{background:color-mix(in srgb,#101215 88%,transparent);border-bottom-color:rgba(255,255,255,.1)}
  .chip{border-color:rgba(255,255,255,.16);color:#c8ccd2}
  .chip:hover{border-color:#eceae4}
  .chip[aria-pressed="true"]{background:var(--nx-accent);color:#1a1c20;border-color:var(--nx-accent)}
  .kcard{background:#181b20;border-color:rgba(255,255,255,.08)}
  .kcard__body h2{color:#f3f0ea}
  .kcard__body p{color:#a9adb4}
  .kcard__go{color:#f3f0ea}
  .kcard__badge{background:rgba(20,22,26,.85);color:#f3f0ea}
}