/* KDS Portfolio – Frontend (monochrom, auf kds-base-Tokens). */

.kpf-archive{ padding-block:clamp(40px,7vh,90px) var(--sec,110px); }
.kpf-archive__head{ margin-bottom:clamp(28px,4vh,52px); max-width:760px; }
.kpf-archive__head h1{ font-size:clamp(2.5rem,1.6rem + 3.2vw,4.1rem); line-height:1.05; margin:.15em 0 0; }

/* ---------- Filter ---------- */
.kpf-filter{ display:flex; flex-wrap:wrap; gap:0 30px; margin:0 0 44px; border-bottom:1px solid var(--line); }
.kpf-filter__btn{ appearance:none; background:none; border:0; cursor:pointer; position:relative;
  padding:0 0 16px; font-family:var(--font); font-size:13px; font-weight:500;
  letter-spacing:.12em; text-transform:uppercase; color:var(--muted); transition:color .2s; }
.kpf-filter__btn:hover{ color:var(--ink); }
.kpf-filter__btn.is-active{ color:var(--ink); }
.kpf-filter__btn.is-active::after{ content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px; background:var(--ink); }

/* ---------- Grid ---------- */
.kpf-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:50px 36px; }
@media(max-width:900px){ .kpf-grid{ grid-template-columns:repeat(2,1fr); gap:36px 24px; } }
@media(max-width:560px){ .kpf-grid{ grid-template-columns:1fr; } }

.kpf-card{ display:flex; flex-direction:column; text-decoration:none; border:0; color:inherit; }
.kpf-card[hidden]{ display:none; }
.kpf-card__media{ position:relative; display:block; overflow:hidden; background:var(--tint); aspect-ratio:4/3; }
.kpf-card__img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .7s var(--ease), filter .5s var(--ease); }
.kpf-card:hover .kpf-card__img{ transform:scale(1.06); }
/* Hover: dunkler Verlauf + „Ansehen"-Cue */
.kpf-card__media::after{ content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg,rgba(12,12,12,0) 45%,rgba(12,12,12,.55)); opacity:0; transition:opacity .45s var(--ease); }
.kpf-card:hover .kpf-card__media::after{ opacity:1; }
.kpf-card__media::before{ content:"Ansehen \2197"; position:absolute; z-index:1; left:18px; bottom:15px; pointer-events:none;
  color:#fff; font-size:12px; letter-spacing:.16em; text-transform:uppercase;
  opacity:0; transform:translateY(10px); transition:opacity .45s var(--ease), transform .45s var(--ease); }
.kpf-card:hover .kpf-card__media::before{ opacity:1; transform:none; }
.kpf-card__body{ padding:18px 2px 0; }
.kpf-card__cat{ display:block; font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin-bottom:9px; }
.kpf-card__title{ display:block; font-family:var(--font-display); font-size:1.72rem; line-height:1.12; color:var(--ink); }
.kpf-card__meta{ display:block; margin-top:7px; font-size:13.5px; color:var(--muted); }
.kpf-empty{ color:var(--muted); }

/* ---------- Einzelansicht ---------- */
.kpf-single{ padding-bottom:var(--sec,110px); }
.kpf-back{ display:inline-block; margin-top:30px; font-size:13px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); text-decoration:none; border:0; }
.kpf-back:hover{ color:var(--ink); }
.kpf-single__head{ padding:26px 0 38px; max-width:780px; }
.kpf-single__head h1{ font-size:clamp(2.5rem,1.6rem + 3.2vw,4.2rem); line-height:1.04; margin:.15em 0 0; }
.kpf-single__meta{ margin-top:18px; color:var(--muted); font-size:15px; }

.kpf-hero{ margin:0; background:var(--tint); }
.kpf-hero__img{ width:100%; max-height:78vh; object-fit:cover; display:block; }

.kpf-single__body{ display:grid; grid-template-columns:1.6fr .9fr; gap:56px; padding-block:54px; }
@media(max-width:820px){ .kpf-single__body{ grid-template-columns:1fr; gap:34px; } }
.kpf-content{ font-size:1.05rem; line-height:1.75; color:var(--text); }
.kpf-content p{ margin:0 0 1.2em; max-width:62ch; }
.kpf-content h2,.kpf-content h3{ margin-top:1.4em; }

.kpf-facts dl{ margin:0; display:grid; grid-template-columns:auto 1fr; gap:13px 22px; border-top:1px solid var(--line); padding-top:26px; }
.kpf-facts dt{ font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
.kpf-facts dd{ margin:0; color:var(--ink); font-size:14.5px; }
.kpf-credit{ margin-top:22px; font-size:12.5px; color:var(--muted); }

/* ---------- Galerie ---------- */
.kpf-gallery{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
@media(min-width:760px){ .kpf-gallery{ grid-template-columns:repeat(3,1fr); } }
.kpf-gallery__item{ appearance:none; border:0; margin:0; padding:0; cursor:zoom-in; overflow:hidden; background:var(--tint); aspect-ratio:4/3; }
.kpf-gallery__item img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s var(--ease); }
.kpf-gallery__item:hover img{ transform:scale(1.03); }

/* ---------- Lightbox ---------- */
.kpf-lb{ position:fixed; inset:0; z-index:9999; background:rgba(8,8,8,.95);
  display:flex; align-items:center; justify-content:center; opacity:0; visibility:hidden; transition:opacity .25s; }
.kpf-lb.is-open{ opacity:1; visibility:visible; }
.kpf-lb__img{ max-width:92vw; max-height:88vh; object-fit:contain; }
.kpf-lb__btn{ position:absolute; background:none; border:0; color:#fff; cursor:pointer; line-height:1; padding:12px; }
.kpf-lb__close{ top:14px; right:18px; font-size:30px; }
.kpf-lb__prev{ left:8px; top:50%; transform:translateY(-50%); font-size:46px; }
.kpf-lb__next{ right:8px; top:50%; transform:translateY(-50%); font-size:46px; }
.kpf-lb__btn:focus-visible{ outline:2px solid #fff; outline-offset:3px; }

/* =====================================================================
   Korrekturen
   1) Unterlängen der Archiv-Überschrift ragten in die Filterzeile.
   2) Karten mit zweizeiligem Titel schoben ihre Meta-Zeile aus der Linie.
   ===================================================================== */

/* 1 · Luft zwischen Überschrift und Filter (Descender von „g", „ä") */
.kpf-archive__head h1{ margin-bottom:.28em; padding-bottom:.06em; }
.kpf-filter{ margin-top:clamp(18px,2.4vw,34px); }

/* 2 · Karteninhalt sauber ausrichten: Titel darf wachsen,
      Ort/Meta steht bei allen Karten auf gleicher Höhe. */
.kpf-grid{ align-items:stretch; }
.kpf-card__body{ display:flex; flex-direction:column; flex:1 1 auto; }
.kpf-card__title{ flex:1 1 auto; text-wrap:balance; }
.kpf-card__meta{ margin-top:auto; }