/* ============================================================
   KIMSEN v5 — Werke & Einzelwerke
   Kollektionen-Karten + Masonry-Galerie mit Leuchtkasten (Lightbox).
   Lädt NACH kimsen-v4*.css auf werke.html.
   ============================================================ */

/* ---------- Filterleiste ---------- */
.wk-leiste {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 12px 14px;
  margin-top: clamp(28px, 3.5vw, 44px);
}
.wk-zaehl {
  margin-left: auto;
  font-family: var(--f-hand);
  font-size: 19px; line-height: 1.2;
  color: var(--muted);
  transform: rotate(-1.2deg);
}

/* ---------- Kartenraster (Masonry) ---------- */
.wk-karten {
  columns: 250px 4;
  column-gap: clamp(20px, 2.2vw, 28px);
  margin-top: clamp(30px, 4vw, 52px);
}
.wk-card {
  display: block;
  break-inside: avoid;
  margin: 0 0 clamp(22px, 2.6vw, 34px);
}
.wk-card .print {
  transition: transform .5s cubic-bezier(.2, .8, .25, 1), box-shadow .4s ease;
}
/* Streuung: jede Karte hängt leicht anders */
.wk-card:nth-child(4n+1) .print { transform: rotate(calc(-1.3deg * var(--tilt))); }
.wk-card:nth-child(4n+2) .print { transform: rotate(calc(1.1deg * var(--tilt))); }
.wk-card:nth-child(4n+3) .print { transform: rotate(calc(-.6deg * var(--tilt))); }
.wk-card:nth-child(4n) .print { transform: rotate(calc(1.4deg * var(--tilt))); }
.wk-card:hover .print, .wk-card:focus-visible .print {
  transform: rotate(0deg) translateY(-8px);
  box-shadow:
    0 20px 44px rgba(62, 52, 30, .24);
}

.wk-bild { display: block; overflow: hidden; border-radius: 2px; }
.wk-bild img { transition: transform .8s cubic-bezier(.2, .7, .2, 1); }
.wk-card:hover .wk-bild img { transform: scale(1.045); }

.wk-info {
  display: grid; gap: 5px;
  padding: 13px 6px 5px;
  text-align: left;
}
.wk-titel {
  font-family: var(--f-hand);
  font-size: clamp(24px, 2vw, 28px);
  line-height: 1.08;
  color: var(--ink);
  transition: color .2s ease;
}
.wk-card:hover .wk-titel, .wk-card:focus-visible .wk-titel { color: var(--accent); }
.wk-zeile {
  font-family: var(--f-sans);
  font-size: 14.5px; line-height: 1.55;
  color: var(--muted);
  text-wrap: pretty;
}
.wk-fuss {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px;
  margin-top: 3px;
}
.wk-meta {
  font-family: var(--f-hand);
  font-size: 16.5px; line-height: 1.2;
  color: var(--pencil);
}
.wk-go {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--f-hand);
  font-size: 16.5px; line-height: 1;
  color: var(--accent);
  opacity: 0; transform: translateX(-8px);
  transition: opacity .25s ease, transform .35s cubic-bezier(.34, 1.56, .5, 1);
}
.wk-go .ki { width: 17px; --ki-stroke: 2.4; }
.wk-card:hover .wk-go, .wk-card:focus-visible .wk-go { opacity: 1; transform: none; }
@media (hover: none) { .wk-go { opacity: 1; transform: none; } }

/* ---------- Filtern: sanftes Neu-Einsortieren ---------- */
.wk-aus { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .wk-neu { animation: wkNeu .55s cubic-bezier(.2, .7, .2, 1) both; }
}
@keyframes wkNeu {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

/* ---------- Leuchtkasten (Einzelwerke) ---------- */
.lb {
  border: 0; padding: 0;
  background: transparent;
  max-width: min(92vw, 1040px);
  overflow: visible;
  margin: auto;
}
.lb::backdrop { background: rgba(42, 37, 28, .55); }
@media (prefers-reduced-motion: no-preference) {
  .lb[open] { animation: lbAuf .32s ease both; }
}
@keyframes lbAuf {
  from { opacity: 0; transform: translateY(12px) scale(.985); }
  to { opacity: 1; transform: none; }
}
.lb .print {
  transform: none;
  padding: clamp(10px, 1.4vw, 16px) clamp(10px, 1.4vw, 16px) clamp(6px, 1vw, 10px);
  box-shadow: 0 30px 80px rgba(30, 25, 15, .42);
}
.lb .print img {
  width: auto; max-width: 100%;
  max-height: min(72vh, 860px);
  height: auto;
  margin-inline: auto;
}
.lb .handcap { padding-block: 10px 6px; }
.lb-x {
  position: absolute; top: -18px; right: -14px; z-index: 5;
  display: grid; place-items: center;
  width: 52px; height: 52px;
  border: 0; cursor: pointer;
  background: var(--ink); color: #fffefa;
  border-radius: 46% 54% 48% 52% / 52% 46% 54% 48%;
  box-shadow: 0 8px 18px rgba(30, 25, 15, .35);
  transform: rotate(4deg);
  transition: transform .3s cubic-bezier(.34, 1.56, .5, 1), background-color .2s ease;
}
.lb-x:hover, .lb-x:focus-visible { background: var(--accent); transform: rotate(-4deg) scale(1.07); }
.lb-x .ki { width: 22px; --ki-stroke: 2.2; }
.lb-reihe {
  display: flex; align-items: center; justify-content: center;
  gap: 20px;
  margin-top: 16px;
}
.lb-btn {
  display: grid; place-items: center;
  width: 54px; height: 54px;
  cursor: pointer;
  background: var(--card); color: var(--ink);
  border: 1.5px solid rgba(64, 55, 42, .42);
  border-radius: 46% 54% 48% 52% / 52% 46% 54% 48%;
  box-shadow: 0 6px 14px rgba(30, 25, 15, .3);
  transition: transform .3s cubic-bezier(.34, 1.56, .5, 1), background-color .2s ease;
}
.lb-btn:hover, .lb-btn:focus-visible { background: var(--paper-hi); transform: translateY(-3px); }
.lb-btn:active { transform: translateY(1px) scale(.95); }
.lb-btn .ki { width: 24px; --ki-stroke: 2.2; }
.lb-zaehler {
  font-family: var(--f-hand);
  font-size: 19px; line-height: 1;
  color: var(--paper-lo);
  min-width: 74px; text-align: center;
}
.lb:focus-visible { outline: none; }

/* Einzelwerke-Karten: Link statt nur Bild */
a.ew-card { display: block; }
a.ew-card .print { transition: transform .5s cubic-bezier(.2, .8, .25, 1), box-shadow .4s ease; }
a.ew-card:hover .wk-bild img { transform: scale(1.045); }

/* ---------- Responsive & Bewegung ---------- */
@media (max-width: 700px) {
  .wk-zaehl { width: 100%; margin-left: 2px; order: 9; }
  .lb-x { top: -14px; right: -6px; width: 46px; height: 46px; }
}
@media (prefers-reduced-motion: reduce) {
  .wk-bild img, .wk-go, .wk-card .print, .lb-x, .lb-btn { transition: none; }
  .wk-neu, .lb[open] { animation: none; }
}

/* ---------- Mobil ---------- */
@media (max-width: 640px) {
  .wk-karten { margin-top: 26px; }
  .wk-titel { font-size: 23px; }
  .wk-info { padding: 12px 4px 4px; }
  .wk-zeile { font-size: 14px; }
  .lb { max-width: 94vw; touch-action: pan-y; }
  .lb .print img { max-height: 70vh; max-height: 64svh; }
  .lb-reihe { gap: 14px; margin-top: 14px; }
  .lb-btn { width: 50px; height: 50px; }
}