/* Seite /projekte/ -------------------------------------------------------------
   Lokale Styles ausschliesslich fuer src/projekte/index.njk (per Frontmatter-
   Feld extraCss in layouts/base.njk eingebunden). Alle neuen Klassen tragen
   das Praefix .project-/.projekte-, damit keine andere Seite betroffen sein
   kann (auch nicht die Projekt-Detailseiten, die weiterhin unveraendert
   .card/.card-media auf der Startseite nutzen).
   Wiederverwendet aus den globalen Styles: .hero/.hero--compact/.hero-media,
   .leistung-media-placeholder-label, .cta-final/.cta-media, .card/.card--dark/
   .icon-badge (Unser-Ansatz-Block, identisch zu Startseite/Leistungen),
   .grid/.grid--3, .btn, .eyebrow, .section-head. ------------------------------ */

/* Projekte-Hero: Komposition aus zwei echten Projektfotos statt eines
   Vollflaechenbilds. .hero-media wird hier bewusst NICHT verwendet - die
   dunkle Flaeche kommt stattdessen direkt von .projekte-hero, .hero/.hero--
   compact liefern weiterhin Grundabstand/-hoehe (min-height ab 1024px).
   Primary/Secondary sind KEINE festen Projekte, sondern Rollen: welches
   Projekt aktuell welche Rolle hat, rotiert alle 3 Tage (siehe index.njk
   und assets/js/projekte-rotation.js#renderHero) - die Geometrie unten
   bleibt dabei unveraendert, nur src/alt/object-position der Fotos wechseln.
   Mobile: nur das Primary-Foto (dominant, volle Breite) - das Secondary-
   Projekt folgt ohnehin direkt in den Projektkarten darunter. Ab 768px
   stehen beide Fotos nebeneinander; ab 1024px eine ruhige 45/55-Komposition
   mit dem Primary-Foto grossflaechig und dem Secondary-Foto als kleinerem,
   versetztem Einschubfoto (Ueberlagerung statt zwei gleich grosser
   Rechtecke). .is-hero-empty blendet das Secondary-Foto zusaetzlich auf
   allen Breiten aus, wenn (noch) kein zweites Projekt mit heroPhoto
   existiert - unabhaengig vom Mobile-display:none unten. */
.projekte-hero { background-color: var(--ink-900); }
.projekte-hero__grid {
  display: grid;
  gap: var(--space-4);
}
.projekte-hero__photo {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--ink-900);
}
.projekte-hero__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.projekte-hero__photo--primary { aspect-ratio: 4 / 3; }
.projekte-hero__photo--secondary { display: none; }
.projekte-hero__photo.is-hero-empty { display: none !important; }

@media (min-width: 768px) {
  .projekte-hero__visual {
    display: grid;
    grid-template-columns: 3fr 2fr;
    gap: var(--space-3);
    align-items: end;
  }
  .projekte-hero__photo--primary { aspect-ratio: 5 / 4; }
  .projekte-hero__photo--secondary { display: block; aspect-ratio: 3 / 4; }
}

@media (min-width: 1024px) {
  .projekte-hero__grid { grid-template-columns: 45fr 55fr; gap: var(--space-5); align-items: center; }
  .projekte-hero__text { padding-block: var(--space-3); }
  .projekte-hero__visual { display: block; position: relative; height: 380px; }
  .projekte-hero__photo--primary {
    position: absolute;
    inset: 0 0 0 14%;
    aspect-ratio: auto;
  }
  .projekte-hero__photo--secondary {
    position: absolute;
    left: 0;
    bottom: var(--space-3);
    width: 40%;
    aspect-ratio: 1 / 1;
    border: 4px solid var(--ink-900);
    box-shadow: var(--shadow-card);
  }
}

/* Projektraster: Mobile 1 Spalte, ab 768px 2 Spalten - erweitert sich
   automatisch um weitere Zeilen, sobald mehr Projekte hinzukommen. */
.projekte-grid {
  display: grid;
  gap: var(--space-4);
}
.projekte-grid > * { min-width: 0; }
@media (min-width: 768px) {
  .projekte-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Projektkarte: ganze Karte ist ein <a> - ein einzelner Tab-Stopp, native
   Tastaturbedienung. Grosses echtes Projektfoto oben (kein KI-Badge - hier
   ausschliesslich echte Fotos), darunter Kategorie/Ort, Titel, optionaler
   Teaser und Link-Hinweis. Hover bewusst dezent: leichte Anhebung, feine
   gruene Kontur, minimaler Bildzoom (gleiches Prinzip wie .card-media). */
.project-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  background: var(--paper-000);
  border: 1px solid var(--paper-line);
  border-radius: var(--radius-lg);
  color: inherit;
  text-decoration: none;
  transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.project-card:hover,
.project-card:focus-visible {
  border-color: var(--brand-500);
  transform: translateY(-3px);
  box-shadow: var(--shadow-card);
}
.project-card__media {
  position: relative;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--ink-900);
}
.project-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}
.project-card:hover .project-card__media img,
.project-card:focus-visible .project-card__media img { transform: scale(1.04); }
.project-card__media > .leistung-media-placeholder-label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.project-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: var(--space-3);
}
.project-card__meta {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--brand-600);
  margin-bottom: 0.5rem;
}
.project-card__title {
  font-size: var(--text-xl);
  margin: 0 0 0.4rem;
}
.project-card__desc {
  margin: 0;
  color: var(--paper-text-muted);
  flex: 1;
}
.project-card__link {
  display: inline-block;
  margin-top: var(--space-2);
  color: var(--brand-600);
  font-weight: 600;
  font-size: var(--text-sm);
}
.project-card__link::after {
  content: "\2192";
  display: inline-block;
  margin-left: 0.4em;
  transition: transform 0.15s ease;
}
.project-card:hover .project-card__link::after,
.project-card:focus-visible .project-card__link::after { transform: translateX(3px); }