/* ============================================================
   PROJEKT-KACHELN (Startseite)
   Quadratische Bildkacheln, der Titel faehrt erst beim
   Ueberfahren mit der Maus von unten ein.

   Zusatzdatei zu style.css, wird in index.html NACH style.css
   eingebunden. Bewusst als eigene Datei, damit die 40 KB grosse
   style.css nicht komplett neu geschrieben werden muss. Kann bei
   Gelegenheit von Hand in style.css uebernommen werden, dann
   diese Datei und die Einbindung in index.html entfernen.

   Die alten Regeln fuer ".project-cards" / ".project-card" stehen
   weiterhin in style.css. Sie werden von der Startseite nicht mehr
   benutzt, koennten aber auf anderen Seiten noch gebraucht werden
   und bleiben deshalb vorerst stehen.
   ============================================================ */

/* --- STELLSCHRAUBEN -----------------------------------------
   Alles, was man an dieser Sektion sinnvoll verstellen will.
   Weiter unten muss nichts angefasst werden.
   ------------------------------------------------------------ */
:root {
  --kachel-steg: 12px;                          /* Abstand zwischen den Kacheln */
  --kachel-titel-farbe: var(--color-accent);    /* Balken mit dem Titel */
  --kachel-titel-schrift: 1.05rem;
  --kachel-zoom: 1.06;                          /* wie stark das Bild beim Ueberfahren anzieht */
}

/* Raster: eine Spalte auf dem Handy, zwei ab Tablet, drei ab Desktop.
   Der Steg ist bewusst schmaler als der uebliche Sektionsabstand,
   damit die sechs Bilder als zusammenhaengende Flaeche wirken. */
.projekt-kacheln {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--kachel-steg);
  grid-template-columns: 1fr;
}
@media (min-width: 600px) { .projekt-kacheln { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 981px) { .projekt-kacheln { grid-template-columns: repeat(3, 1fr); } }

/* Die Kachel selbst ist der Link, damit die ganze Flaeche klickbar ist.
   aspect-ratio haelt sie quadratisch, egal wie breit die Spalte wird. */
.projekt-kachel a {
  display: block;
  position: relative;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  background: var(--color-bg-light);
}

/* Bild fuellt die quadratische Flaeche, egal welches Seitenverhaeltnis
   die Datei mitbringt, und zieht beim Ueberfahren leicht an. */
.projekt-kachel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.45s ease;
}
.projekt-kachel a:hover img,
.projekt-kachel a:focus-visible img { transform: scale(var(--kachel-zoom)); }

/* Titelbalken: steht unterhalb der Kachel geparkt und faehrt beim
   Ueberfahren oder bei Tastaturfokus herein. */
.projekt-kachel-titel {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  background: var(--kachel-titel-farbe);
  color: var(--color-white);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--kachel-titel-schrift);
  line-height: 1.3;
  padding: 0.85em 1em;
  transform: translateY(100%);
  transition: transform 0.3s ease;
}
.projekt-kachel a:hover .projekt-kachel-titel,
.projekt-kachel a:focus-visible .projekt-kachel-titel { transform: translateY(0); }

/* Touchgeraete koennen nicht ueberfahren: dort steht der Titel fest,
   sonst waere die Sektion eine Reihe unbeschrifteter Bilder. */
@media (hover: none) {
  .projekt-kachel-titel { transform: translateY(0); }
}

/* Wer Bewegung im Betriebssystem abgeschaltet hat, bekommt den Titel
   ohne Einfahrt und das Bild ohne Zoom. */
@media (prefers-reduced-motion: reduce) {
  .projekt-kachel img,
  .projekt-kachel-titel { transition: none; }
  .projekt-kachel a:hover img,
  .projekt-kachel a:focus-visible img { transform: none; }
}