/* ==========================================================================
   Referenzen: Filterleiste und Projektkacheln.

   Die Kachel ist bewusst dreiteilig: Bild, Etiketten mit Titel, und
   ganz unten die Domain als Fusszeile. Dadurch stehen die Links aller
   Kacheln auf einer Linie, auch wenn die Texte unterschiedlich lang
   sind -- ohne das franst ein Raster aus 12 Kacheln sichtbar aus.
   ========================================================================== */

.filter {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin-bottom: 2.5rem;
}

.filter-knopf {
  padding: .5rem 1.1rem;
  font-size: .88rem;
  font-weight: 700;
  color: var(--color-ink-soft);
  background: var(--color-bg-soft);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  transition: color .15s ease, border-color .15s ease, background .15s ease;
}

.filter-knopf:hover { color: var(--color-orange); border-color: var(--color-orange); }

.filter-knopf.ist-aktiv {
  color: var(--color-white);
  background: var(--gradient-brand);
  border-color: transparent;
}

/* === RASTER ============================================================== */
.ref-raster {
  display: grid;
  gap: 1.75rem;
  /* min(100%, ...) statt nur 20rem: Auf einem 320-px-Schirm bleiben
     nach dem Innenabstand 280 px -- eine 20rem-Spalte waere breiter
     als der Schirm, und weil html auf overflow-x:hidden steht, waere
     der Ueberhang nicht scrollbar, sondern abgeschnitten. */
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
  /* Alle Zeilen gleich hoch, nicht nur die Kacheln innerhalb einer
     Zeile: Ohne das richtet sich jede Zeile nach ihrem laengsten Text
     und das Raster wird von oben nach unten unruhig. */
  grid-auto-rows: 1fr;
}

.ref-karte {
  /* Fuellt die Rasterzeile, damit die Fusszeilen unten buendig sind. */
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

/* Ohne diese Zeile filtert die Seite nicht sichtbar: Das Skript setzt
   [hidden], aber die eigene display:flex-Regel schlaegt die
   Browser-Vorgabe display:none fuer [hidden] -- die "ausgeblendete"
   Kachel bliebe stehen. */
.ref-karte[hidden] { display: none; }

.ref-karte:hover {
  transform: translateY(-3px);
  border-color: rgba(237, 106, 83, .45);
  box-shadow: var(--shadow-lift);
}

/* === BILDFLAECHE ========================================================= */
/* Feste Hoehe statt Seitenverhaeltnis: Die Quellbilder reichen vom
   breiten Startseiten-Screenshot (2:1) bis zum hochformatigen Logo.
   Mit aspect-ratio haengt die Bildhoehe an der Spaltenbreite und
   springt zwischen den Umbruchpunkten -- mit fester Hoehe liegt die
   Kante ueber alle Kacheln auf derselben Linie. */
.ref-bild {
  position: relative;
  height: 12.5rem;
  flex: 0 0 12.5rem;
  background: var(--color-bg-soft);
  border-bottom: 1px solid var(--color-border);
}

.ref-bild img {
  width: 100%;
  height: 100%;
  /* Oben ausgerichtet: Bei einem Website-Screenshot ist der Kopfbereich
     der aussagekraeftige Teil, nicht die Mitte. */
  object-fit: cover;
  object-position: top center;
}

/* Logo oder Illustration statt Screenshot: ganz zeigen, nicht
   anschneiden. Der weisse Grund gehoert dazu -- beide vorhandenen
   Dateien sind fuer Weiss gemacht. */
.ref-bild--kontain { background: var(--color-white); }

.ref-bild--kontain img {
  object-fit: contain;
  object-position: center;
  padding: 1.5rem;
}

/* Platzhalter, solange kein Screenshot vorliegt. Er soll erkennbar
   leer sein und trotzdem etwas sagen -- deshalb steht die Domain drin.
   Sobald public/assets/referenzen/<slug>.webp existiert, ersetzt der
   Build ihn von selbst durch das Bild. */
.ref-platzhalter {
  position: absolute;
  inset: .75rem;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: .5rem;
  padding: 1rem;
  text-align: center;
  background:
    radial-gradient(60% 80% at 50% 0%, rgba(237, 106, 83, .10) 0%, transparent 70%),
    var(--color-bg-soft);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-md);
}

.ref-platzhalter-domain {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-navy);
  overflow-wrap: anywhere;
}

.ref-platzhalter-hinweis {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--color-muted);
}

/* Kennzeichnet die fuenf eigenen Produkte im gemischten Raster. */
.ref-marke {
  position: absolute;
  top: .75rem;
  left: .75rem;
  padding: .3rem .75rem;
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--color-white);
  background: var(--gradient-brand);
  border-radius: 999px;
  box-shadow: 0 4px 14px rgba(196, 45, 78, .3);
}

/* === TEXT ================================================================ */
.ref-karte-text {
  display: flex;
  flex-direction: column;
  gap: .55rem;
  padding: 1.4rem 1.5rem 1.5rem;
  /* Fuellt die restliche Kachelhoehe, damit die Fusszeile unten sitzt. */
  flex: 1 1 auto;
}

.ref-karte-text h2 { font-size: 1.15rem; line-height: 1.3; }
.ref-karte-text h2 a { transition: color .15s ease; }
.ref-karte-text h2 a:hover { color: var(--color-orange); }

.ref-kunde {
  margin-top: -.25rem;
  font-size: .82rem;
  color: var(--color-ink-soft);
}

.ref-karte-text > p:not(.ref-kunde):not(.ref-tags):not(.ref-fuss) {
  font-size: .93rem;
  color: var(--color-ink-soft);
}

.ref-tags { display: flex; flex-wrap: wrap; gap: .4rem; }

.ref-tag {
  padding: .2rem .6rem;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .03em;
  color: var(--color-orange);
  background: var(--color-bg-soft);
  border-radius: 999px;
}

.ref-fuss {
  margin-top: auto;
  padding-top: .9rem;
  font-size: .88rem;
  font-weight: 600;
  border-top: 1px solid var(--color-border);
}

.ref-fuss a { color: var(--color-orange); }
.ref-fuss a:hover { color: var(--color-red); }

.ref-leer {
  margin-top: 2rem;
  padding: 2rem;
  text-align: center;
  background: var(--color-bg-soft);
  border-radius: var(--radius-lg);
}

@media (prefers-reduced-motion: reduce) {
  .ref-karte:hover { transform: none; }
}