/* ============================================================
   VCI Design — Arbeiten-Teaser
   Ausschnitt aus der Sitemap in Abschnitt 2. Nur Startseite.

   Grenzt sich bewusst von den Leistungen darueber ab, ohne neue
   Farben oder Tokens: einspaltig statt zweispaltig, Eintraege
   auf display-medium statt heading-medium, kleines Label statt
   grossem Sektionstitel, und die ganze Zeile ist ein Link.
   Sonst staenden hier zwei fast gleiche Bloecke hintereinander.
   ============================================================ */

.teaser__kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-s) var(--space-l);
  padding-bottom: var(--space-l);
}

/* Sektionstitel als kleines Label. Bei einem Index sollen die
   Projekte dominieren, nicht das Etikett der Sektion. */
.teaser__label {
  font-family: var(--font-text);
  font-size: var(--text-small);
  font-weight: var(--weight-regular);
  line-height: var(--leading-text);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-fg-muted);
}

.teaser__alle {
  font-size: var(--text-small);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  text-decoration: none;
  padding-bottom: var(--space-xs);
  border-bottom: 2px solid var(--color-accent);
  transition: transform var(--duration-short) var(--ease-base);
}

.teaser__alle:hover {
  transform: translateX(var(--space-xs));
}

/* --- Projektzeilen ------------------------------------------
   Keine Karten. Die Trennlinie sitzt oben, damit auch die erste
   Zeile eine bekommt und die Liste unten offen bleibt.
   ------------------------------------------------------------ */
.projekt {
  border-top: 1px solid var(--color-border);
}

/* Die ganze Zeile ist der Link: ein Tabstopp je Projekt und ein
   grosses Klickziel, statt eines kleinen Links in der Zeile. */
.projekt__link {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--space-s) var(--space-m);
  padding-block: var(--space-l);
  text-decoration: none;
  /* Nur transform, damit die Bewegung auf der GPU bleibt. */
  transition: transform var(--duration-short) var(--ease-base);
}

.projekt__link:hover {
  transform: translateX(var(--space-s));
}

/* h3 statt span: die Projekte sollen fuer die Navigation per
   Ueberschrift auffindbar sein, so wie die Leistungen darueber.
   Ein Heading im Link ist zulaessig, solange darin nichts
   Interaktives steckt. */
.projekt__name {
  grid-column: 1;
  font-family: var(--font-display);
  font-size: var(--text-display-medium);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
  font-weight: var(--weight-semibold);
  color: var(--color-fg);
}

.projekt__meta {
  grid-column: 1;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs) var(--space-m);
  margin-top: var(--space-xs);
  font-size: var(--text-small);
  color: var(--color-fg-muted);
}

.projekt__jahr {
  font-variant-numeric: tabular-nums;
}

/* Eine Zeile, worum es geht. Ohne sie stand hier nur ein
   Firmenname und ein Jahr, und nichts sagte, warum man klicken
   sollte. Der Satz ist der Anfang des Einstiegs auf arbeiten.html,
   hier gekuerzt auf seine erste Haelfte.

   Unter der Metazeile und in der Grundschrift: der Name bleibt die
   grosse Stimme, das Jahr die kleine Angabe, und der Satz liegt
   dazwischen. Volle Textfarbe, weil er eine Aussage ist und keine
   Randnotiz wie das Jahr. */
.projekt__einstieg {
  grid-column: 1;
  display: block;
  margin-top: var(--space-xs);
  font-size: var(--text-medium);
  color: var(--color-fg);
}

/* --- Indikator ------------------------------------------------
   Bewusst ein Inline-SVG und kein Textpfeil. Ein gezeichneter
   Pfeil bleibt ueber alle Systeme und ueber einen Schriftwechsel
   hinweg identisch, ein Textzeichen sieht bei jedem Fallback
   anders aus.

   Hier stand bis zum Wechsel auf Playfair ein zweiter Grund: der
   unicode-range der Geist-Datei liess U+2197 gar nicht zu. Den
   unicode-range gibt es nicht mehr, und Playfair enthaelt das
   Zeichen. Die Entscheidung bleibt trotzdem, aus dem ersten
   Grund.
   ---------------------------------------------------------------- */
.projekt__indikator {
  grid-column: 2;
  /* Ueber alle drei Zeilen der linken Spalte: Name, Jahr, Satz.
     So steht der Pfeil mittig neben dem ganzen Eintrag und nicht
     nur neben dessen oberen zwei Dritteln. */
  grid-row: 1 / span 3;
  width: var(--space-l);
  height: var(--space-l);
  flex: none;
  /* Ruhezustand ueber Deckkraft abgedunkelt, nicht ueber eine
     zweite Farbe. So bleibt der Uebergang bei transform und
     opacity, wie CLAUDE.md es vorschreibt. Ein Wechsel der
     color-Eigenschaft waere zwar kein Layout, aber eben auch
     nicht eine der beiden erlaubten Eigenschaften. */
  color: var(--color-fg);
  opacity: 0.45;
  transition: transform var(--duration-short) var(--ease-base),
              opacity var(--duration-short) var(--ease-base);
}

.projekt__link:hover .projekt__indikator {
  opacity: 1;
  transform: translate(var(--space-xs), calc(var(--space-xs) * -1));
}

/* --- Mobil ----------------------------------------------------
   Breakpoint deckungsgleich mit tokens.css. Der Einrueck-Effekt
   entfaellt, auf Touch gibt es keinen Hover und der Platz nach
   rechts fehlt ohnehin.
   ---------------------------------------------------------------- */
@media (max-width: 768px) {
  .projekt__link:hover,
  .teaser__alle:hover {
    transform: none;
  }

  .projekt__indikator {
    width: var(--space-m);
    height: var(--space-m);
    align-self: start;
    margin-top: var(--space-xs);
  }
}

/* --- Reduzierte Bewegung -------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .projekt__link:hover,
  .teaser__alle:hover,
  .projekt__link:hover .projekt__indikator {
    transform: none;
  }
}