/* =====================================================================
   KCC NEWS – EDITORIAL / MAGAZIN DESIGN 1.2.2
   Gilt AUSSCHLIESSLICH für [kcc_news].
   Dieses Stylesheet wird NACH dem bisherigen News-CSS geladen.
   Individuell bearbeitbar unter KCC Publishing > News – Design & CSS.
   Startseiten-Shortcodes und Publishing-Funktionen bleiben unverändert.
   ===================================================================== */

.kccpm-nv-archive {
  --kcc-ed-ink: #141923;
  --kcc-ed-navy: #070b16;
  --kcc-ed-paper: #f7f5f0;
  --kcc-ed-gold: #b28c45;
  --kcc-ed-champagne: #ecd49c;
  --kcc-ed-serif: Georgia, "Times New Roman", serif;
  --kcc-ed-sans: Arial, Helvetica, sans-serif;
  --kcc-ed-hairline: rgba(34, 40, 50, .13);
  color: var(--kcc-ed-ink);
  background: var(--kcc-ed-paper);
  font-family: var(--kcc-ed-sans);
}

/* Schmalerer Header – harmoniert mit dem Rest der KCC-Webseite. */
.kccpm-nv-archive .kccpm-nv-archive__hero {
  margin-bottom: 48px;
  background: linear-gradient(112deg, #050814 0%, #0b0e19 59%, #1c1915 100%);
}
.kccpm-nv-archive .kccpm-nv-archive__hero-inner {
  max-width: 1250px;
  padding: 51px 30px 55px;
}
.kccpm-nv-archive .kccpm-nv-archive__hero h1 {
  margin-top: 15px !important;
  font: 400 clamp(40px,4.5vw,58px)/1.08 var(--kcc-ed-serif);
  letter-spacing: -.036em;
}
.kccpm-nv-archive .kccpm-nv-archive__hero p {
  margin-top: 16px !important;
  max-width: 590px;
  font-size: 14px;
  line-height: 1.7;
}

/* Rechte Spalte sitzt exakt auf Höhe des ersten Beitrags. */
.kccpm-nv-archive .kccpm-nv-archive__layout {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(240px,285px);
  grid-template-areas: "sectionhead ." "main sidebar";
  align-items: start;
  gap: 23px clamp(26px,3.6vw,50px);
  width: min(1210px, calc(100% - 54px));
  margin: 0 auto;
}
.kccpm-nv-archive .kccpm-nv-archive__sectionhead {
  grid-area: sectionhead;
  padding-bottom: 17px;
  margin: 0;
  border-bottom: 1px solid rgba(34,40,50,.15);
}
.kccpm-nv-archive .kccpm-nv-archive__sectionhead > span {
  color: #a07937;
  font-size: 10px;
  letter-spacing: .19em;
  font-weight: 700;
}
.kccpm-nv-archive .kccpm-nv-archive__sectionhead h2 {
  margin: 7px 0 0 !important;
  font: 400 clamp(30px,3.4vw,42px)/1.14 var(--kcc-ed-serif);
  letter-spacing: -.034em;
  color: #172031 !important;
}
.kccpm-nv-archive .kccpm-nv-archive__main {
  grid-area: main;
  min-width: 0;
}
.kccpm-nv-archive .kccpm-nv-archive__list {
  display: grid;
  gap: 0;
  margin: 0;
}

/* Jüngster Beitrag – großzügig, aber nur EIN Hauptmotiv. */
.kccpm-nv-archive .kccpm-nv-archive__card {
  display: grid;
  grid-template-columns: minmax(170px,34%) minmax(0,1fr);
  min-height: 178px;
  overflow: hidden;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--kcc-ed-hairline);
  border-radius: 0;
  box-shadow: none;
  transition: none;
}
.kccpm-nv-archive .kccpm-nv-archive__card:hover {
  transform: none;
  box-shadow: none;
  border-color: var(--kcc-ed-hairline);
}
.kccpm-nv-archive .kccpm-nv-archive__card:not(.kccpm-nv-archive__card--lead) {
  padding: 22px 0;
}
.kccpm-nv-archive .kccpm-nv-archive__card--lead {
  grid-template-columns: minmax(0,48%) minmax(0,52%);
  min-height: 295px;
  margin: 0 0 7px;
  color: #fff;
  background: var(--kcc-ed-navy);
  border: 1px solid rgba(214,168,79,.27);
  border-radius: 14px;
  box-shadow: 0 16px 35px rgba(10,16,29,.12);
}
.kccpm-nv-archive .kccpm-nv-archive__visual {
  position: relative;
  min-height: 0;
  height: 160px;
  display: block;
  overflow: hidden;
  background: #111723;
  border-radius: 7px;
}
.kccpm-nv-archive .kccpm-nv-archive__card--lead .kccpm-nv-archive__visual {
  height: 100%;
  min-height: 295px;
  border-radius: 0;
}
.kccpm-nv-archive .kccpm-nv-archive__visual img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .35s ease;
}
.kccpm-nv-archive .kccpm-nv-archive__visual:focus-visible,
.kccpm-nv-archive .kccpm-nv-archive__copy a:focus-visible,
.kccpm-nv-archive .kccpm-nv-archive__side-item:focus-visible {
  outline: 2px solid var(--kcc-ed-gold);
  outline-offset: 3px;
}
.kccpm-nv-archive .kccpm-nv-archive__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 8px 0 8px 24px;
  min-width: 0;
}
.kccpm-nv-archive .kccpm-nv-archive__card--lead .kccpm-nv-archive__copy {
  padding: clamp(24px,3vw,38px);
}
.kccpm-nv-archive .kccpm-nv-archive__feature-kicker {
  display: block;
  margin-bottom: 18px;
  color: var(--kcc-ed-champagne);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
}
.kccpm-nv-archive .kccpm-nv-archive__feature-kicker::before {
  content: '';
  display: inline-block;
  width: 21px;
  height: 1px;
  margin: 0 9px 3px 0;
  background: currentColor;
}
.kccpm-nv-archive .kccpm-nv-archive__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
  color: #a27d39;
  font-size: 10px;
  letter-spacing: .05em;
  font-weight: 700;
}
.kccpm-nv-archive .kccpm-nv-archive__card--lead .kccpm-nv-archive__meta {
  color: var(--kcc-ed-champagne);
}
.kccpm-nv-archive .kccpm-nv-archive__copy h3 {
  margin: 10px 0 0 !important;
  padding: 0 !important;
  color: var(--kcc-ed-ink) !important;
  font: 400 clamp(22px,2.3vw,28px)/1.2 var(--kcc-ed-serif);
  letter-spacing: -.026em;
  overflow-wrap: anywhere;
}
.kccpm-nv-archive .kccpm-nv-archive__card--lead .kccpm-nv-archive__copy h3 {
  margin-top: 12px !important;
  color: #fff !important;
  font-size: clamp(25px,2.6vw,35px);
}
.kccpm-nv-archive .kccpm-nv-archive__copy h3 a {
  color: inherit !important;
  text-decoration: none !important;
}
.kccpm-nv-archive .kccpm-nv-archive__copy h3 a:hover {
  color: #9b7434 !important;
}
.kccpm-nv-archive .kccpm-nv-archive__card--lead .kccpm-nv-archive__copy h3 a:hover {
  color: var(--kcc-ed-champagne) !important;
}
.kccpm-nv-archive .kccpm-nv-archive__copy > p {
  margin: 10px 0 0 !important;
  padding: 0 !important;
  color: #5d6470 !important;
  background: transparent !important;
  font-size: 13px;
  line-height: 1.68;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.kccpm-nv-archive .kccpm-nv-archive__card--lead .kccpm-nv-archive__copy > p {
  color: rgba(255,255,255,.68) !important;
  -webkit-line-clamp: 3;
}
.kccpm-nv-archive .kccpm-nv-archive__read {
  display: inline-flex;
  align-items: center;
  margin-top: 13px;
  padding-top: 0;
  color: #946f32 !important;
  text-decoration: none !important;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .025em;
}
.kccpm-nv-archive .kccpm-nv-archive__card--lead .kccpm-nv-archive__read {
  margin-top: 19px;
  color: var(--kcc-ed-champagne) !important;
}
.kccpm-nv-archive .kccpm-nv-archive__read span {
  margin-left: 9px;
  transition: transform .2s ease;
}
.kccpm-nv-archive .kccpm-nv-archive__read:hover span {
  transform: translate(3px,-2px);
}

/* Sidebar – offene Magazinliste statt schwerem dunklen Block. */
.kccpm-nv-archive .kccpm-nv-archive__sidebar {
  grid-area: sidebar;
  position: sticky;
  top: calc(var(--wp-admin--admin-bar--height, 0px) + 20px);
  align-self: start;
  min-width: 0;
  max-height: calc(100vh - var(--wp-admin--admin-bar--height, 0px) - 40px);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(140,116,72,.24) transparent;
  background: transparent;
  color: var(--kcc-ed-ink);
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.kccpm-nv-archive .kccpm-nv-archive__sidebar header {
  padding: 0 0 17px;
  border-bottom: 1px solid rgba(34,40,50,.20);
}
.kccpm-nv-archive .kccpm-nv-archive__sidebar header > span {
  color: #a07937;
  font-size: 10px;
  letter-spacing: .18em;
}
.kccpm-nv-archive .kccpm-nv-archive__sidebar header h2 {
  margin: 9px 0 0 !important;
  color: #172031 !important;
  font: 400 28px/1.16 var(--kcc-ed-serif);
  letter-spacing: -.03em;
}
.kccpm-nv-archive .kccpm-nv-archive__side-list {
  display: flex;
  flex-direction: column;
}
.kccpm-nv-archive .kccpm-nv-archive__side-item {
  display: grid;
  grid-template-columns: 60px minmax(0,1fr);
  align-items: center;
  gap: 12px;
  padding: 15px 0;
  border-bottom: 1px solid var(--kcc-ed-hairline);
  background: transparent;
  color: var(--kcc-ed-ink) !important;
  text-decoration: none !important;
}
.kccpm-nv-archive .kccpm-nv-archive__side-item:hover {
  background: transparent;
}
.kccpm-nv-archive .kccpm-nv-archive__thumb {
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
  overflow: hidden;
  border-radius: 5px;
  background: #111723;
  color: var(--kcc-ed-champagne);
}
.kccpm-nv-archive .kccpm-nv-archive__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.kccpm-nv-archive .kccpm-nv-archive__sidecopy {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.kccpm-nv-archive .kccpm-nv-archive__sidecopy time {
  color: #967235;
  font-size: 10px;
}
.kccpm-nv-archive .kccpm-nv-archive__sidecopy strong {
  color: #252c38;
  font: 400 16px/1.34 var(--kcc-ed-serif);
  letter-spacing: -.01em;
  overflow-wrap: anywhere;
}
.kccpm-nv-archive .kccpm-nv-archive__side-item:hover .kccpm-nv-archive__sidecopy strong {
  color: #936f36;
}

.kccpm-nv-archive .kccpm-nv-archive__pagination {
  margin-top: 28px;
}
.kccpm-nv-archive .kccpm-nv-archive__pagination .page-numbers {
  border-radius: 5px;
}

@media (max-width: 1050px) {
  .kccpm-nv-archive .kccpm-nv-archive__layout {
    grid-template-columns: minmax(0,1fr) minmax(215px,245px);
    column-gap: 24px;
  }
  .kccpm-nv-archive .kccpm-nv-archive__card--lead {
    grid-template-columns: minmax(0,44%) minmax(0,56%);
  }
}

@media (max-width: 900px) {
  .kccpm-nv-archive .kccpm-nv-archive__layout {
    grid-template-columns: minmax(0,1fr);
    grid-template-areas: "sectionhead" "main" "sidebar";
    width: min(760px, calc(100% - 38px));
    row-gap: 23px;
  }
  .kccpm-nv-archive .kccpm-nv-archive__sidebar {
    position: static;
    top: auto;
    max-height: none;
    overflow: visible;
    margin-top: 18px;
  }
  .kccpm-nv-archive .kccpm-nv-archive__side-list {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    column-gap: 28px;
  }
}

@media (max-width: 680px) {
  .kccpm-nv-archive .kccpm-nv-archive__hero {
    margin-bottom: 34px;
  }
  .kccpm-nv-archive .kccpm-nv-archive__hero-inner {
    padding: 42px 22px 45px;
  }
  .kccpm-nv-archive .kccpm-nv-archive__hero h1 {
    font-size: 39px;
  }
  .kccpm-nv-archive .kccpm-nv-archive__layout {
    width: calc(100% - 30px);
    gap: 18px;
  }
  .kccpm-nv-archive .kccpm-nv-archive__sectionhead h2 {
    font-size: 33px;
  }
  .kccpm-nv-archive .kccpm-nv-archive__card--lead,
  .kccpm-nv-archive .kccpm-nv-archive__card {
    grid-template-columns: 1fr;
  }
  .kccpm-nv-archive .kccpm-nv-archive__card--lead .kccpm-nv-archive__visual {
    height: 210px;
    min-height: 210px;
  }
  .kccpm-nv-archive .kccpm-nv-archive__card--lead .kccpm-nv-archive__copy {
    padding: 24px 23px 25px;
  }
  .kccpm-nv-archive .kccpm-nv-archive__card:not(.kccpm-nv-archive__card--lead) {
    grid-template-columns: minmax(110px,34%) minmax(0,1fr);
    gap: 13px;
    padding: 17px 0;
    min-height: 0;
  }
  .kccpm-nv-archive .kccpm-nv-archive__card:not(.kccpm-nv-archive__card--lead) .kccpm-nv-archive__visual {
    height: 122px;
    min-height: 122px;
  }
  .kccpm-nv-archive .kccpm-nv-archive__card:not(.kccpm-nv-archive__card--lead) .kccpm-nv-archive__copy {
    padding: 0;
  }
  .kccpm-nv-archive .kccpm-nv-archive__card:not(.kccpm-nv-archive__card--lead) .kccpm-nv-archive__copy h3 {
    font-size: 19px;
  }
  .kccpm-nv-archive .kccpm-nv-archive__card:not(.kccpm-nv-archive__card--lead) .kccpm-nv-archive__copy > p {
    display: none;
  }
  .kccpm-nv-archive .kccpm-nv-archive__card:not(.kccpm-nv-archive__card--lead) .kccpm-nv-archive__read {
    font-size: 10px;
  }
  .kccpm-nv-archive .kccpm-nv-archive__side-list {
    grid-template-columns: 1fr;
  }
  .kccpm-nv-archive .kccpm-nv-archive__sidebar header h2 {
    font-size: 26px;
  }
}

@media (max-width: 390px) {
  .kccpm-nv-archive .kccpm-nv-archive__card:not(.kccpm-nv-archive__card--lead) {
    grid-template-columns: minmax(96px,35%) minmax(0,1fr);
  }
  .kccpm-nv-archive .kccpm-nv-archive__card:not(.kccpm-nv-archive__card--lead) .kccpm-nv-archive__copy h3 {
    font-size: 17px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .kccpm-nv-archive .kccpm-nv-archive__visual img,
  .kccpm-nv-archive .kccpm-nv-archive__read span { transition: none; }
}
