/* assets/pz-impressionen.css — „Impressionen"-Card der Startseite.
   Explorer-Optik: Vorschaubilder nach Modell gruppiert links, größere Vorschau
   + Titel/Modell/Datum rechts. Breite folgt der Wortmarke (--pzi-w per JS).
   Nutzt ausschließlich Theme-Tokens (--pz-*) mit warmen Fallbacks. */

.pzi-card {
  position: relative;
  z-index: 2;
  width: var(--pzi-w, min(760px, 92vw));
  max-width: 94vw;
  margin: 0 auto;
  padding: 0.9rem 1rem 1rem;
  border: 1px solid var(--pz-border-strong, #6b4d2a);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(28, 18, 9, 0.72), rgba(12, 8, 4, 0.78));
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.5);
  color: #ffd9b0;
}

.pzi-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.6rem;
  margin-bottom: 0.6rem;
}
.pzi-heading {
  margin: 0;
  font-size: 0.82rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--pz-accent-text, #ffd9a0);
}

.pzi-body {
  display: flex;
  gap: 0.9rem;
  height: min(46vh, 320px);
}

/* ---------- Linke Spalte: nach Modell gruppiert --------------------------- */
.pzi-groups {
  flex: 0 0 50%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  overflow-y: auto;
  padding: 0 0.35rem 0 0;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 138, 42, 0.45) transparent;
}
.pzi-groups::-webkit-scrollbar { width: 8px; }
.pzi-groups::-webkit-scrollbar-thumb { background: rgba(255, 138, 42, 0.4); border-radius: 8px; }
.pzi-groups::-webkit-scrollbar-track { background: transparent; }

.pzi-group {
  border: 1px solid rgba(120, 76, 40, 0.55);
  border-radius: 10px;
  background: rgba(10, 6, 2, 0.4);
  padding: 0.45rem 0.5rem 0.55rem;
}
.pzi-group-title {
  margin: 0 0 0.4rem;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #ffc28a;
}
.pzi-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(78px, 1fr));
  gap: 0.45rem;
}
.pzi-item { margin: 0; }
.pzi-thumb {
  display: block;
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border: 2px solid rgba(120, 76, 40, 0.55);
  border-radius: 8px;
  background: rgba(10, 6, 2, 0.5);
  transition: border-color 0.15s, transform 0.15s;
}
.pzi-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.pzi-thumb:hover,
.pzi-thumb:focus-visible {
  border-color: var(--pz-accent-2, #ff8a2a);
  transform: translateY(-1px);
  outline: none;
}
.pzi-thumb.is-active {
  border-color: var(--pz-accent-2, #ff8a2a);
  box-shadow: 0 0 0 2px rgba(255, 138, 42, 0.35);
}

/* ---------- Rechte Spalte: abgesetzte Vorschau ---------------------------- */
.pzi-detail {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding-left: 0.9rem;
  border-left: 1px solid rgba(120, 76, 40, 0.5);
}
.pzi-preview-wrap {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  overflow: hidden;
  border-radius: 10px;
}
.pzi-preview-wrap > .pzi-preview { flex: 1 1 auto; width: 100%; }
.pzi-preview {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: 0.35rem;
  border: 1px solid rgba(255, 138, 42, 0.35);
  border-radius: 10px;
  background:
    radial-gradient(120% 120% at 50% 0%, rgba(255, 138, 42, 0.08), rgba(0, 0, 0, 0) 60%),
    rgba(0, 0, 0, 0.45);
  box-shadow: inset 0 0 0 1px rgba(255, 138, 42, 0.06), inset 0 6px 22px rgba(0, 0, 0, 0.55);
}
.pzi-preview:focus-visible { outline: 2px solid var(--pz-accent-2, #ff8a2a); outline-offset: 2px; }
.pzi-preview-img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  border-radius: 6px;
}
.pzi-meta { display: flex; flex-direction: column; gap: 0.1rem; }
.pzi-title { font-weight: 800; font-size: 0.95rem; color: #ffe0bd; line-height: 1.25; }
.pzi-sub { font-size: 0.72rem; color: #b89a7d; }
.pzi-model { color: #ffc28a; font-weight: 700; }
.pzi-signed {
  align-self: flex-start;
  margin-top: 0.15rem;
  padding: 0.05rem 0.45rem;
  border: 1px solid rgba(142, 240, 176, 0.4);
  border-radius: 999px;
  font-size: 0.62rem;
  letter-spacing: 0.4px;
  color: #8ef0b0;
}
.pzi-signed[hidden] { display: none; }
/* Schräge Banderole unten rechts über der Vorschau (öffnet den Artikel-Overlay). */
.pzi-ribbon {
  position: absolute;
  right: -2.6rem;
  bottom: 1.15rem;
  width: 9.5rem;
  padding: 0.24rem 0;
  transform: rotate(-45deg);
  text-align: center;
  background: linear-gradient(135deg, #ff8a2a, #ffcf7a);
  color: #1a120b;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
  z-index: 3;
}
.pzi-ribbon:hover { filter: brightness(1.08); }
.pzi-ribbon[hidden] { display: none; }

@media (max-width: 600px) {
  .pzi-body { height: min(56vh, 380px); gap: 0.6rem; }
  .pzi-groups { flex-basis: 46%; }
  .pzi-grid { grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); }
  .pzi-title { font-size: 0.86rem; }
  .pzi-detail { padding-left: 0.6rem; }
}