/* =========================================================
   TCLG event technology – Referenzen-Archiv und Referenz-Detail (Design „Saallicht“)
   Nach styles.css laden (referenzen.php, referenz.php).

   Eigene Klassen (archive-*, refd-*): Die Startseiten-Regeln der Referenz-Bühne (.ref-*) greifen hier nicht.
   Farben nur aus den Tokens der Lichtwelt (data-world="stage"). Ein Radius (4 px), keine Schatten, kein Glas.
   Schriften: Exo 2 für Titel und Buttons, DM Sans für Texte und alle Zahlen (tabular-nums),
   DM Mono nur für kleine Beschriftungen ohne Ziffern.
   ========================================================= */

.archive,
.refd {
  background: var(--ground);
  color: var(--text);
}

/* =========================================================
   Archiv
   ========================================================= */

/* Kopf wie ein Kapitelkopf der Startseite: großer Titel, Meta rechts, Haarlinie darunter */
.archive-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 16px 48px;
  padding-top: clamp(48px, 9vh, 104px);
  padding-bottom: clamp(22px, 3vh, 32px);
  border-bottom: 1px solid var(--line);
}

.archive-title {
  max-width: 17ch;
  font-size: clamp(2.375rem, 4.4vw, 4.25rem);
  line-height: 1.02;
  font-weight: 600;
  text-wrap: balance;
  overflow-wrap: break-word;
}

.archive-head .lead {
  margin-top: 20px;
  white-space: pre-line;
}

.archive-count {
  padding-bottom: 0.4em;
  color: var(--muted);
  font-size: 0.9375rem;
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

/* Filter: Rahmen-Buttons, die gewählte Kategorie gefüllt (aria-pressed) */
.archive-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding-block: clamp(24px, 3.4vh, 36px) clamp(8px, 1.4vh, 16px);
}

.archive-chip {
  gap: 8px;
}

.archive-chip-count {
  font-family: var(--font);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}

.archive-chip.btn--ghost .archive-chip-count {
  color: var(--muted);
}

/* Raster: Karten im Stil der News-Karten (Bild 16:10, Meta, Titel, Kunde), Zeilen per Subgrid ausgerichtet.
   Den Abstand zwischen den Kartenreihen trägt jede Karte selbst (padding): Ein row-gap am Raster würde das
   Subgrid übernehmen und Lücken zwischen Meta, Titel und Kunde reißen. */
.archive-grid {
  --card-gap: clamp(44px, 6.5vh, 64px);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: clamp(24px, 3vw, 44px);
  row-gap: 0;
  padding-top: clamp(16px, 2.4vh, 28px);
}

.archive-card {
  position: relative;
  grid-row: span 4;
  display: grid;
  grid-template-rows: subgrid;
  row-gap: 0;
  align-content: start;
  padding-bottom: var(--card-gap);
}

.archive-card-media {
  margin: 0 0 20px;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--surface);
  border-radius: var(--radius);
}

.archive-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 300ms var(--ease-out);
}

.archive-card-meta {
  margin: 0 0 8px;
  color: var(--subtle);
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
}

.archive-card-title {
  margin: 0 0 8px;
  font-size: clamp(1.25rem, 1.6vw, 1.5rem);
  line-height: 1.2;
  font-weight: 600;
  text-wrap: balance;
  overflow-wrap: break-word;
  hyphens: auto;
}

.archive-card-title a {
  color: inherit;
  text-decoration: none;
  transition: color 160ms ease;
}

/* Die ganze Karte ist klickbar, der Link bleibt im Titel (ein Ziel, ein Name für Screenreader) */
.archive-card-title a::after {
  content: "";
  position: absolute;
  inset: 0 0 var(--card-gap);
}

.archive-card-client {
  margin: 0;
  color: var(--muted);
  font-size: 0.9375rem;
  line-height: 1.5;
}

@media (hover: hover) and (pointer: fine) {
  .archive-card:hover .archive-card-title a {
    color: var(--accent);
  }

  .archive-card:hover .archive-card-media img {
    transform: scale(1.03);
  }
}

/* Tastatur: Fokus um die ganze Karte statt nur um den Titeltext */
@supports selector(:has(a)) {
  .archive-card-title a:focus-visible {
    outline: none;
  }

  .archive-card:has(.archive-card-title a:focus-visible)::after {
    content: "";
    position: absolute;
    inset: -8px -8px calc(var(--card-gap) - 8px);
    border: 2px solid var(--accent);
    border-radius: var(--radius);
    pointer-events: none;
  }
}

.archive-empty {
  padding-block: 48px 64px;
  color: var(--muted);
}

.archive-foot {
  padding-top: 24px;
  padding-bottom: clamp(80px, 12vh, 136px);
  border-top: 1px solid var(--line);
}

@media (max-width: 1099px) {
  .archive-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .archive-head {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }

  .archive-count {
    padding-bottom: 0;
    text-align: left;
  }

  .archive-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .archive-card {
    grid-row: auto;
    grid-template-rows: none;
  }
}

/* =========================================================
   Referenz-Detail
   ========================================================= */

/* Brotkrumen über dem Kopfbild: zurück zu Start und Archiv */
.refd-crumbs {
  padding-top: clamp(12px, 2vh, 24px);
  padding-bottom: clamp(4px, 1vh, 12px);
}

.refd-crumbs ol {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  color: var(--subtle);
  font-size: 0.9375rem;
}

.refd-crumbs li {
  display: flex;
  flex: none;
  align-items: center;
  gap: 10px;
}

.refd-crumbs li:last-child {
  flex: 0 1 auto;
  min-width: 0;
}

.refd-crumbs a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--text);
  text-decoration: none;
  transition: color 160ms ease;
}

.refd-crumb-current {
  overflow: hidden;
  color: var(--muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (hover: hover) and (pointer: fine) {
  .refd-crumbs a:hover {
    color: var(--accent);
  }
}

/* Kopfbild wie die Bühnenbilder der Leistungen: breit, oben leicht aus dem Dunkel, unten ins Dunkel.
   Titel liegt auf dem ausgeblendeten unteren Teil. Bildausschnitt per data-focus (links | mitte | rechts). */
/* Kopfbild und Titel liegen im selben Rasterfeld: Der Titel beginnt bei 70 % der Bildhöhe (auf dem ausgeblendeten Teil),
   das Feld reicht immer mindestens bis zur Bildunterkante. So kreuzt die Haarlinie darunter nie das Foto.
   Der Kasten ist nie höher als das Foto selbst (--refd-img-h setzt referenz.php aus den Bildmaßen): Sonst würde
   object-fit: cover flache Fotos allein wegen der Höhe hochskalieren und seitlich beschneiden (z. B. Panorama 800 × 306). */
.refd-head {
  --refd-media-h: min(clamp(340px, 68vh, 760px), var(--refd-img-h, 760px));
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

.refd-head--schmal {
  --refd-media-h: min(clamp(340px, 60vh, 600px), var(--refd-img-h, 600px));
}

.refd-media {
  position: relative;
  grid-row: 2;
  grid-column: 1;
  height: var(--refd-media-h);
  margin: 0;
  overflow: hidden;
  background: var(--ground);
}

.refd-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}

.refd-media[data-focus="links"] img {
  object-position: 15% 50%;
}

.refd-media[data-focus="rechts"] img {
  object-position: 85% 50%;
}

.refd-media::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to bottom,
    var(--stage) 0%,
    rgb(14 15 17 / 0) 16%,
    rgb(14 15 17 / 0) 38%,
    rgb(14 15 17 / 0.8) 70%,
    var(--stage) 100%);
}

/* Fotos unter 1000 px Breite nicht vollflächig hochskalieren: an der Inhaltskante, höchstens 960 px breit,
   nach rechts zusätzlich ins Dunkel ausgeblendet */
.refd-media--schmal {
  width: min(960px, 100% - 2 * var(--pad-x));
  margin-inline-start: max(var(--pad-x), (100% - var(--wrap)) / 2);
}

.refd-media--schmal::after {
  background:
    linear-gradient(to right,
      rgb(14 15 17 / 0) 0%,
      rgb(14 15 17 / 0) 64%,
      var(--stage) 100%),
    linear-gradient(to bottom,
      var(--stage) 0%,
      rgb(14 15 17 / 0) 14%,
      rgb(14 15 17 / 0) 38%,
      rgb(14 15 17 / 0.8) 70%,
      var(--stage) 100%);
}

.refd-head-body {
  position: relative;
  z-index: 1;
  grid-row: 2;
  grid-column: 1;
  align-self: start;
  display: grid;
  gap: 14px;
  margin-top: calc(var(--refd-media-h) * 0.7);
}

.refd-head--plain .refd-head-body {
  margin-top: clamp(24px, 5vh, 56px);
}

/* Auf dem ausgeblendeten Foto: Meta in Textfarbe (Kontrast), Zahlen in DM Sans */
.refd-meta {
  color: var(--text);
  font-size: 0.9375rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.refd-title {
  max-width: 22ch;
  font-size: clamp(2.25rem, 4.6vw, 4.25rem);
  line-height: 1.04;
  font-weight: 600;
  text-wrap: balance;
  overflow-wrap: break-word;
  hyphens: auto;
}

/* Beschreibung und Fakten */
.refd-body {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(20px, 2.4vw, 32px);
  row-gap: 44px;
  margin-top: clamp(32px, 5vh, 56px);
  padding-top: clamp(28px, 4vh, 40px);
  border-top: 1px solid var(--line);
}

.refd-text {
  grid-column: 1 / span 7;
  display: grid;
  gap: 18px;
  align-content: start;
  max-width: 64ch;
}

.refd-body--ohne-fakten .refd-text {
  grid-column: 1 / span 8;
}

.refd-text p {
  color: var(--muted);
  font-size: 1.125rem;
  line-height: 1.65;
  overflow-wrap: break-word;
}

.refd-text p.refd-credit {
  color: var(--subtle);
  font-size: 0.875rem;
  font-variant-numeric: tabular-nums;
}

.refd-facts-wrap {
  grid-column: 9 / span 4;
  align-self: start;
}

.refd-facts {
  display: grid;
}

.refd-facts > div {
  display: grid;
  gap: 4px;
  padding-block: 14px;
  border-top: 1px solid var(--line);
}

.refd-facts > div:first-child {
  padding-top: 0;
  border-top: 0;
}

.refd-facts dt {
  color: var(--subtle);
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  letter-spacing: 0;
}

/* Beschriftungen mit Ziffern (z. B. „3 Standorte“) in DM Sans: DM Mono nur ohne Ziffern */
.refd-facts dt.refd-fact-label--zahl {
  font-family: var(--font);
  font-variant-numeric: tabular-nums;
}

.refd-facts dd {
  color: var(--text);
  font-size: 1.125rem;
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
  overflow-wrap: break-word;
}

.refd-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: clamp(48px, 7vh, 80px);
  padding-top: 24px;
  padding-bottom: clamp(80px, 12vh, 136px);
  border-top: 1px solid var(--line);
}

/* Nicht gefunden */
.refd-missing {
  display: grid;
  gap: 20px;
  justify-items: start;
  padding-bottom: clamp(80px, 12vh, 136px);
}

.refd-missing .refd-title {
  margin-top: clamp(32px, 7vh, 80px);
}

.refd-missing .refd-foot {
  margin-top: 16px;
  padding-bottom: 0;
  border-top: 0;
  padding-top: 0;
}

@media (max-width: 899px) {
  .refd-text,
  .refd-body--ohne-fakten .refd-text,
  .refd-facts-wrap {
    grid-column: 1 / -1;
  }
}

@media (max-width: 767px) {
  .refd-head,
  .refd-head--schmal {
    --refd-media-h: min(clamp(260px, 50vh, 440px), var(--refd-img-h, 440px));
  }

  .refd-media--schmal {
    width: 100%;
    margin-inline-start: 0;
  }

  .refd-media--schmal::after {
    background: linear-gradient(to bottom,
      var(--stage) 0%,
      rgb(14 15 17 / 0) 16%,
      rgb(14 15 17 / 0) 38%,
      rgb(14 15 17 / 0.8) 70%,
      var(--stage) 100%);
  }

  .refd-head-body {
    gap: 10px;
  }

  .refd-text p {
    font-size: 1.0625rem;
  }

  .refd-foot .btn {
    flex: 1 1 auto;
  }
}