/* ============================================================================
   Projekte - Schaufenster für Grimmaer Projekte
   ----------------------------------------------------------------------------
   Wird per <link> im head_extra der Projekt-Templates geladen (Pattern wie
   altstadtdialog.css), nicht über main.css. BEM, Tokens aus 02-tokens.css.
   Enthält:
     .projekte-hero / .projekte-grid / .projekt-card   (Übersichtsseite)
     .projekt-hero / .projekt-section / .projekt-*     (Detailseite)
     .kng-gallery / .kng-lightbox                      (Galerie + Lightbox)
   ============================================================================ */

/* --- Lese-Breite als lokaler Container-Modifier --- */
.container--prose {
  max-width: calc(var(--w-prose) + 2 * var(--gutter));
}

/* ============================================================
   Übersichtsseite /projekte
   ============================================================ */

.projekte-hero {
  padding: 4rem 0 2.5rem;
}
.projekte-hero__lead {
  max-width: var(--w-prose);
  color: var(--c-ink-soft);
  font-size: 1.1rem;
}

.projekte-liste {
  padding: 1rem 0 5rem;
}
.projekte-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1.25rem;
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .projekte-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1100px) {
  .projekte-grid { grid-template-columns: repeat(3, 1fr); }
}

.projekt-card {
  /* Hintergrundfarbe des Projekt-Logos (aus logo.png gesampelt, #F7F7F7).
     Fremde Brand-Fläche, deshalb lokales Token statt KNG-Palette. */
  --projekt-card-media-bg: #F7F7F7;

  position: relative;
  background: var(--c-white);
  border: 1px solid var(--c-hairline);
  padding: 2rem 1.75rem 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.projekt-card__bar {
  position: absolute;
  left: 0; top: 0; right: 0;
  height: var(--card-bar);
  background: linear-gradient(90deg, var(--c-pink), var(--c-orange));
}
/* Logo-Kopf: zieht sich bündig unter den Farbbalken über die volle
   Card-Breite (hebt das Card-Padding per negativer Margin auf). */
.projekt-card__media {
  margin: calc(var(--card-bar) - 2rem) -1.75rem 0;
  padding: 1.75rem 1rem;
  background: var(--projekt-card-media-bg);
  border-bottom: 1px solid var(--c-hairline);
  display: grid;
  place-items: center;
}
.projekt-card__media img {
  width: min(190px, 62%);
  height: auto;
  display: block;
}
.projekt-card__eyebrow {
  margin: 0.5rem 0 0;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--c-orange-btn);
}
.projekt-card__title { margin: 0; }
.projekt-card__text {
  margin: 0;
  color: var(--c-ink-soft);
  flex: 1;
}
.projekt-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--c-pink-ink);
  text-decoration: none;
}
/* Ganze Card klickbar (Stretched-Link, Pattern aus stromkasten.css) */
.projekt-card__cta::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

.projekte-liste__hinweis {
  margin-top: 2rem;
  color: var(--c-ink-soft);
  font-size: 0.95rem;
}

/* ============================================================
   Detailseite /projekte/kuenstlerviertel
   ============================================================ */

.projekt-hero {
  position: relative;
  padding: 4rem 0 3rem;
  background: var(--c-bg-light);
}
.projekt-hero__inner {
  display: grid;
  gap: 2rem;
  align-items: center;
  grid-template-columns: 1fr;
}
@media (min-width: 900px) {
  .projekt-hero__inner { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
}
.projekt-hero__lead {
  max-width: var(--w-prose);
  color: var(--c-ink-soft);
  font-size: 1.1rem;
}
.projekt-hero__visual {
  justify-self: center;
}
.projekt-hero__visual img {
  max-width: min(280px, 70vw);
  height: auto;
  display: block;
}
.projekt-hero__accent {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: var(--bar-width);
  background: linear-gradient(90deg, var(--c-pink), var(--c-orange));
}

.projekt-section {
  padding: 3.5rem 0;
}
.projekt-section--alt {
  background: var(--c-bg-light);
}
.projekt-section h2 {
  margin-top: 0;
}

/* --- Zitat des Initiators --- */
.projekt-quote {
  margin: 2rem 0 0;
  padding: 1.5rem 1.75rem;
  border-left: var(--bar-width) solid var(--c-orange);
  background: var(--c-bg-light);
}
.projekt-quote p {
  margin: 0 0 0.75rem;
  font-style: italic;
}
.projekt-quote footer {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--c-ink-soft);
}

/* --- Format-Karten --- */
.projekt-formate {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  display: grid;
  gap: 1.25rem;
  grid-template-columns: 1fr;
}
@media (min-width: 850px) {
  .projekt-formate { grid-template-columns: repeat(3, 1fr); }
}
.projekt-format {
  position: relative;
  background: var(--c-white);
  border: 1px solid var(--c-hairline);
  padding: 2rem 1.5rem 1.5rem;
}
.projekt-format__bar {
  position: absolute;
  left: 0; top: 0; right: 0;
  height: var(--card-bar);
}
.projekt-format__bar--orange { background: var(--c-orange); }
.projekt-format__bar--green  { background: var(--c-green); }
.projekt-format__bar--blue   { background: var(--c-blue); }
.projekt-format h3 {
  margin: 0.5rem 0 0.25rem;
}
.projekt-format__meta {
  margin: 0 0 0.75rem;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--c-ink-soft);
}
.projekt-format p:last-child {
  margin: 0;
  color: var(--c-ink-soft);
}

/* --- Terminliste Impresario --- */
.projekt-termine {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  border-top: 1px solid var(--c-hairline);
}
.projekt-termine li {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  align-items: baseline;
  padding: 0.7rem 0.25rem;
  border-bottom: 1px solid var(--c-hairline);
}
.projekt-termine__datum {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--c-pink-ink);
  min-width: 3.5em;
}
.projekt-termine__ort {
  margin-left: auto;
  color: var(--c-ink-soft);
  font-size: 0.9rem;
}

/* --- Highlight-Box --- */
.projekt-highlight {
  margin-top: 2rem;
  padding: 1.5rem 1.75rem;
  background: var(--c-bg-light);
  border: 1px solid var(--c-hairline);
  border-left: var(--bar-width) solid var(--c-blue);
}
.projekt-highlight h3 { margin-top: 0; }
.projekt-highlight p:last-child { margin-bottom: 0; }

/* --- Orte-Liste --- */
.projekt-orte {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.5rem 1.5rem;
  grid-template-columns: 1fr;
}
@media (min-width: 600px) {
  .projekt-orte { grid-template-columns: repeat(2, 1fr); }
}
.projekt-orte li {
  padding: 0.5rem 0.75rem;
  background: var(--c-white);
  border: 1px solid var(--c-hairline);
  border-left: 4px solid var(--c-orange);
}
.projekt-section--alt .projekt-orte li {
  background: var(--c-white);
}

/* ============================================================
   Galerie + Lightbox
   ============================================================ */

.projekt-galerie__hinweis {
  color: var(--c-ink-soft);
  font-size: 0.95rem;
}

.kng-gallery {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 700px) {
  .kng-gallery { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1100px) {
  .kng-gallery { grid-template-columns: repeat(4, 1fr); }
}
.kng-gallery__link {
  display: block;
  border: 1px solid var(--c-hairline);
  background: var(--c-white);
}
.kng-gallery__link img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: top center;
}

/* --- Lightbox-Overlay (vom JS erzeugt) --- */
.kng-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(26, 15, 46, 0.92);   /* --c-bg-dark mit Alpha */
}
.kng-lightbox[hidden] { display: none; }

.kng-lightbox__figure {
  margin: 0;
  max-width: min(900px, 100%);
  max-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  min-height: 0;
}
.kng-lightbox__img {
  max-width: 100%;
  max-height: calc(100vh - 7rem);
  object-fit: contain;
  display: block;
  background: var(--c-white);
}
.kng-lightbox__caption {
  color: var(--c-white);
  font-size: 0.95rem;
  text-align: center;
}

.kng-lightbox__btn {
  position: absolute;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 50%;
  background: rgba(26, 15, 46, 0.6);
  color: var(--c-white);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
}
.kng-lightbox__btn:hover,
.kng-lightbox__btn:focus-visible {
  background: var(--c-pink-ink);
  border-color: var(--c-pink-ink);
}
.kng-lightbox__btn--close { top: 1rem; right: 1rem; }
.kng-lightbox__btn--prev  { left: 1rem;  top: 50%; transform: translateY(-50%); }
.kng-lightbox__btn--next  { right: 1rem; top: 50%; transform: translateY(-50%); }

@media (prefers-reduced-motion: no-preference) {
  .kng-lightbox {
    animation: kng-lightbox-fade 160ms ease-out;
  }
  @keyframes kng-lightbox-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
  }
}