/* ===========================================================================
   ARTEFAKT-KARTE — nackter Link im Chat wird zur Karte
   Werte nur aus dem Token-Satz von agora.css :root.
   Kein eigenes Hex, keine freien px.
   =========================================================================== */

a.artefakt-karte {
  display: grid;
  gap: var(--luft);
  align-items: center;
  max-width: min(100%, var(--karten-min));
  margin: var(--luft) 0;
  padding: var(--karte-innen);
  background: var(--flaeche);
  border: var(--linie) solid var(--rahmen);
  border-radius: var(--radius);
  color: var(--text);
  text-decoration: none;
  overflow: hidden;
  min-width: 0;
  transition: border-color var(--einfach), background var(--einfach);
}

@media (hover: hover) {
  a.artefakt-karte:hover {
    text-decoration: none;
    border-color: var(--akzent);
    background: var(--flaeche-hoch);
  }
}

/* Mit Bild: Miniatur links, Text rechts. --chatbild-kachel ist die einzige
   vorhandene Bildkante für eine Kachel; eine eigene Vorschauhöhe fehlt. */
a.artefakt-karte[data-stand="mit-bild"] {
  grid-template-columns: var(--chatbild-kachel) minmax(0, 1fr);
}

a.artefakt-karte[data-stand="ohne-bild"],
a.artefakt-karte[data-stand="ohne-meta"],
a.artefakt-karte[data-stand="unbekannt"] {
  grid-template-columns: minmax(0, 1fr);
}

/* Unbekannte URL: gestrichelt, wie .datei-ohne — kein erfundenes Icon. */
a.artefakt-karte[data-stand="unbekannt"] {
  border-style: dashed;
  color: var(--gedaempft);
}

a.artefakt-karte[data-stand="ohne-meta"] .artefakt-karte-titel {
  color: var(--gedaempft);
}

.artefakt-karte-bild {
  display: block;
  width: var(--chatbild-kachel);
  height: var(--chatbild-kachel);
  object-fit: cover;
  object-position: top center;
  background: var(--blatt);
  border: var(--linie) solid var(--rahmen);
  border-radius: var(--radius);
}

.artefakt-karte-text {
  display: grid;
  gap: calc(var(--luft) * .25);
  min-width: 0;
}

.artefakt-karte-titel {
  font: inherit;
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.artefakt-karte-adresse {
  font-size: var(--schrift-klein);
  color: var(--gedaempft);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.blase a.artefakt-karte {
  color: var(--text);
}