/* ===========================================================================
   projekte.css - Unterseite /projekte/
   Nutzt ausschliesslich die Tokens aus home.css (--warm, --cream, --ink, usw.).
   Praefix pj- fuer alle Komponenten dieser Seite. home.css bleibt unberuehrt.
   =========================================================================== */

/* ---- S1 Hero: Foto full-bleed, gleiche Basis wie der Start-Hero (.hero +
   body[data-hero=photo] aus home.css). Hier nur Bildausschnitt und die vertikale
   Mitte fuer den Textblock, weil dieser Hero keinen Kicker hat. ---- */
/* Unter der Knopfzeile liegt kein ausgebrannter Fleck mehr, der Ausschnitt
   bleibt wie von U4 gesetzt; Messwerte im U12-Report P2. */
.pj-hero .hero-bg img { filter: none; object-position: center 56%; }
/* U12: der aktive Unterstrich der Nav stand in --clay und war auf dem dunklen
   Holz des Foto-Heros nicht zu sehen. Solange die Nav noch auf dem Bild liegt,
   traegt er die helle Stufe; nach data-scrolled steht die Nav auf Cream und die
   Basisfarbe aus home.css gilt wieder. */
body[data-hero="photo"] nav:not([data-scrolled="true"]) .navlinks a:not(.nav-cta).active::after {
  background: var(--clay-light);
}
/* U12: beim Scrollen legte sich die opake Nav ueber die erste Kachel. */
.pj-arbeiten { scroll-margin-top: calc(var(--nav-h, 88px) + 24px); }
/* U12: H1, Sub und Knopf standen auf x=59/57/56. Die optische Linke des
   Versalbuchstabens holt die Headline auf die Kante der beiden darunter. */
.pj-hero .hero-main h1 { margin-left: -0.03em; }
.pj-hero .hero-inner { grid-template-rows: 1fr; align-items: center; }
main > .hero.pj-hero .hero-main { transform: none; }
/* K8 Mobil: Foto flacher als die 55vh-Basis (wie auf Start), damit H1 und der
   eine Knopf im ersten Screen stehen. */
@media (max-width: 640px) {
  .pj-hero { --hero-stack-pos: center 30%; }
  body[data-hero="photo"] .hero.pj-hero .hero-bg { height: 44vh; min-height: 260px; max-height: 420px; }
  body[data-hero="photo"] .hero.pj-hero .hero-inner { padding-top: 24px; padding-bottom: 40px; }
}

/* ---- Gemeinsamer Container und Sektionskopf ---- */
.pj-inner {
  max-width: var(--content-max);
  margin: 0 auto;
}
.pj-head {
  max-width: 820px;
  margin-bottom: 56px;
}
.pj-head .sec-mark {
  color: var(--muted);
  margin-bottom: 14px;
}
.pj-head h2 {
  color: var(--ink);
  margin: 0;
  max-width: 22ch;
}
.pj-head h2 em {
  font-style: italic;
  font-weight: 300;
  color: var(--clay);
}
.pj-head p {
  margin: 20px 0 0;
  max-width: 620px;
  font-size: var(--type-body-1);
  line-height: 1.6;
  color: var(--ink-soft);
}

/* ---- S2 Muster-Mehrfamilienhaus ---- */
.pj-mfh {
  background: var(--cream);
  padding: var(--section-pad-y) var(--page-pad);
  border-top: 1px solid var(--line);
}
/* Drei Beats untereinander: Kopf, Foto mit Eckdaten daneben, Video ueber die
   volle Breite. Frueher lief die rechte Spalte (Eckdaten plus Video) tiefer als
   das Foto und liess links eine leere Cream-Bahn stehen. */
.pj-mfh .pj-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  grid-template-areas:
    "head head"
    "figure .";
  column-gap: 56px;
  row-gap: 72px;
  align-items: start;
}
.pj-mfh .pj-head {
  grid-area: head;
  margin-bottom: 0;
}
.pj-mfh-figure {
  grid-area: figure;
  margin: 0;
  overflow: hidden;
  border-radius: 2px;
}
.pj-mfh-figure img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: center;
  transition: transform 1.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.pj-mfh-figure:hover img {
  transform: scale(1.05);
}
/* Die Figcaption traegt seit U10 das .spec-Bauteil (Geist Mono 11px); hier nur der Abstand. */
.pj-mfh-figure figcaption {
  padding-top: 13px;
}
/* Videonotiz statt Video-Slot: nur Text, kein Poster, kein Play-Symbol. */
.pj-mfh-video-note {
  margin-top: 18px;
  max-width: 52ch;
  font-size: var(--type-body-2);
  line-height: 1.6;
  color: var(--muted);
}

/* ---- S3 Weitere Arbeiten (K12): Reihe mit wechselnder Breite, keine 3x2-Kacheln.
   Erste Kachel breit (2/3), danach Drittel. Keine Captions (K2), Alt am Bild. ---- */
.pj-arbeiten {
  background: var(--warm);
  padding: var(--section-pad-y) var(--page-pad);
  border-top: 1px solid var(--line);
}
.pj-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  /* U12: minmax(0, 1fr) rundete gegen die festen aspect-ratio-Werte und machte
     aus der 20px-Fuge je nach Zeile 12, 15 oder 19 px. Mit auto bestimmt das
     Bild die Zeilenhoehe und die Fuge bleibt ueberall 20 px. */
  grid-auto-rows: auto;
  gap: 20px;
}
/* Der Rahmen schneidet das Bild, die Bildzeile steht darunter im Fluss. Weil
   die Kacheln einer Zeile verschiedene Formate tragen, fuellt der Rahmen die
   Rasterzeile; so stehen die Bildzeilen einer Zeile auf einer Grundlinie
   (U12, vorher 13 px Versatz). */
.pj-tile { display: flex; border-radius: 2px; }
.pj-tile figure { display: flex; flex-direction: column; width: 100%; margin: 0; }
.pj-tile-media {
  display: block;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  border-radius: 2px;
  background: var(--sand, var(--line));
}
.pj-tile-wide { grid-column: span 2; }
.pj-tile img {
  display: block;
  width: 100%;
  /* aspect-ratio setzt die Zeilenhoehe; min-height streckt das Bild auf die
     Hoehe der hoechsten Kachel derselben Zeile, damit die Bildzeilen darunter
     auf einer Grundlinie stehen. object-fit faengt den Mehrbeschnitt ab. */
  min-height: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: center;
  transition: transform 1.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.pj-tile-wide img { aspect-ratio: 3 / 2; }
.pj-tile:hover img { transform: scale(1.04); }

/* ---- S5 Kontakt-Abschluss ---- */
.pj-cta {
  display: block;
  text-align: left;
  padding: var(--section-pad-y) var(--page-pad);
  position: relative;
  overflow: hidden;
}
.pj-cta-inner {
  max-width: var(--content-max);
  margin: 0 auto;
  position: relative;
  z-index: 2;
}
.pj-cta-media {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 40%;
  max-width: 640px;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 1;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 34%);
  mask-image: linear-gradient(to right, transparent 0%, #000 34%);
}
.pj-cta .sec-mark {
  margin-bottom: 16px;
  color: rgba(var(--cream-rgb), 0.5);
}
.pj-cta h2 {
  margin: 0 0 22px;
  max-width: 22ch;
}
.pj-cta h2 em {
  color: var(--clay-light);
}
.pj-cta p {
  max-width: 560px;
  margin: 0 0 34px;
  font-size: var(--type-body-1);
  line-height: 1.6;
  text-wrap: pretty;
  color: rgba(var(--cream-rgb), 0.8);
}
/* U12: 12 px mit Tracking gegen die 13 px der .meta-Zeile auf Bauen. Die
   Mailzeile traegt jetzt dieselbe Stufe. */
.pj-cta-mail {
  margin-top: 18px;
  font-family: "Host Grotesk", system-ui, sans-serif;
  font-size: 13px;
  letter-spacing: normal;
  color: rgba(var(--cream-rgb), 0.66);
}
.pj-cta-mail a {
  color: var(--cream);
  text-decoration: none;
  border-bottom: 1px solid rgba(var(--clay-light-rgb), 0.5);
  padding-bottom: 1px;
  transition: color 0.35s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.pj-cta-mail a:hover {
  color: var(--clay-light);
  border-bottom-color: var(--clay-light);
}

/* ===========================  RESPONSIVE  ================================= */

@media (max-width: 1100px) {
  .pj-mfh .pj-inner {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "head"
      "figure";
    row-gap: 40px;
  }
  .pj-mfh-figure img {
    aspect-ratio: 4 / 3;
  }
  /* Das Zweier-Raster steht im zweiten 1100er-Block weiter unten, zusammen mit
     `.pj-tile-wide { grid-column: 1 / -1 }`. Hier keine Dublette (U12). */
}

@media (max-width: 900px) {
  .pj-mfh,
  .pj-arbeiten {
    padding: var(--section-pad-y-mobile) var(--page-pad-mobile);
  }
  .pj-head {
    margin-bottom: 40px;
  }
  /* U12: der Galeriekopf haelt 56 px, weil die Kachel-Fuge hier auf 16 px
     faellt und er sonst wie eine weitere Kachelzeile liest. */
  .pj-arbeiten .pj-head { margin-bottom: 56px; }
  .pj-cta {
    padding: var(--section-pad-y-mobile) var(--page-pad-mobile);
  }
  /* Mobil liegt das Foto hinter dem ganzen Block. Es bleibt sichtbar, wird aber
     nach unten ausgeblendet und mit einem Ink-Schleier unterlegt, damit Lead,
     Knopf und Mailzeile auf den hellen Stellen des Bildes lesbar bleiben. */
  .pj-cta-media {
    width: 100%;
    max-width: none;
    height: 62%;
    bottom: auto;
    opacity: 0.32;
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 0%, transparent 100%);
  }
  .pj-cta::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(
      to bottom,
      rgba(var(--ink-rgb), 0.35) 0%,
      rgba(var(--ink-rgb), 0.82) 46%,
      var(--ink) 78%
    );
    pointer-events: none;
  }
}

@media (max-width: 640px) {
  /* U12: einspaltig stapelte sich die Galerie auf 1605 px, und die Hochformate
     fielen dabei auf 4/3, wo von der Wendeltreppe nur Hand und Balken uebrig
     blieben. Zwei Spalten kommen aus dem 1100er-Block; hier faellt nur die Fuge
     und die Querformate laufen ueber beide Spalten. */
  .pj-grid {
    gap: 16px;
  }
  .pj-tile { grid-column: 1 / -1; }
  .pj-tile-portrait { grid-column: span 1; }
}

@media (prefers-reduced-motion: reduce) {
  .pj-mfh-figure img,
  /* U12 Fix-Runde 1: das Bild ist seit dem figure-Umbau kein direktes Kind der
     Kachel mehr, `.pj-tile > img` lief hier ins Leere. */
  .pj-tile img,
  .pj-cta-mail a {
    transition: none;
  }
}

/* === Bau 3 (03.09.) — G4/G5/G2 ===
   Quelle: handoff/KRITIK-2.md. */


/* G5: Kopf und Eckdaten stehen als eine Spalte neben dem Leadfoto und sind
   dort vertikal zentriert. Vorher lief der Kopf ueber die volle Breite und
   liess neben dem halben Dach eine leere Cream-Bahn stehen. */
.pj-mfh .pj-inner {
  grid-template-areas:
    "figure col";
  row-gap: var(--section-pad-y);
}
.pj-mfh-col {
  grid-area: col;
  align-self: center;
  display: flex;
  flex-direction: column;
  gap: 40px;
}
.pj-mfh .pj-head {
  margin-bottom: 0;
  max-width: none;
}
/* Das Leadfoto war als 3/4 hoeher als die Textspalte daneben und liess oben und
   unten je 145px Leerlauf stehen. 4/5 haelt das Foto gross und bringt den
   Leerlauf unter 120px (KRITIK-2 G5). */
.pj-mfh-figure img {
  aspect-ratio: 4 / 5;
}

@media (max-width: 1100px) {
  .pj-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .pj-tile-wide { grid-column: 1 / -1; }
  .pj-mfh .pj-inner {
    grid-template-areas:
      "figure"
      "col";
    row-gap: 40px;
  }
  .pj-mfh-col {
    align-self: start;
    gap: 32px;
  }
}

@media (max-width: 640px) {
  /* Querformate und die breite Kachel liegen flach, die Hochformate behalten
     ihr Format (U12). */
  .pj-tile img, .pj-tile-wide img { aspect-ratio: 4 / 3; }
  .pj-tile-portrait img { aspect-ratio: 3 / 4; }
}

/* === Bau 4 (04.09.) — G5 Projekte: MFH direkt unter dem Hero ===
   Quelle: Paket HOME+PROJEKTE+NAV. Der obere Abstand der Sektion bleibt
   var(--section-pad-y) (siehe .pj-mfh oben), zusaetzliche Margen gibt es nicht. */

/* Das Dach wurde oben angeschnitten: der Ausschnitt haengt jetzt an der
   Oberkante des Bildes, auf allen Breiten. */
.pj-mfh-figure img {
  object-position: top;
}

@media (min-width: 1101px) {
  /* Das Leadfoto war ein fixes Hochformat und damit hoeher als die Textspalte
     daneben: ober- und unterhalb des Textes stand eine leere Cream-Bahn. Jetzt
     bestimmt die Textspalte die Zeilenhoehe (Untergrenze 560px), das Foto
     fuellt sie ganz. Dazu traegt das Bild flex-basis 0, damit es die
     Zeilenhoehe nicht mehr selbst aufzieht; die Bildunterschrift bleibt im
     Fluss darunter. */
  .pj-mfh-figure {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    min-height: 560px;
  }
  .pj-mfh-figure img {
    flex: 1 1 0;
    min-height: 0;
    height: auto;
    aspect-ratio: auto;
  }
  .pj-mfh-figure figcaption {
    flex: 0 0 auto;
  }
  /* Text neben dem Foto vertikal zentriert. */
  .pj-mfh-col {
    align-self: center;
  }
}

/* U9 R12: Tap-Ziel 44 px fuer Inline-Links im Fliesstext. padding-block
   vergroessert die Klickflaeche, margin-block nimmt denselben Betrag wieder aus
   der Zeilenbox: die Zeile rueckt keinen Pixel, der Daumen trifft trotzdem. */
@media (max-width: 640px) {
  /* U12: auf dem Telefon lag der Bildhintergrund als Schleier unter dem ganzen
     Textblock. Ohne Bild steht der Abschluss auf reinem Ink, der Text hat
     keinen Fleck mehr unter sich. */
  .pj-cta-media { display: none; }
  .pj-cta::after { display: none; }
  .pj-cta-mail a {
    display: inline-block;
    padding-block: 13px;
    margin-block: -13px;
    min-height: 44px;
    /* Unterlaenge am Text statt am gepolsterten Kasten. */
    border-bottom: 0;
    padding-bottom: 13px;
    text-decoration: underline;
    text-decoration-color: rgba(var(--clay-light-rgb), 0.5);
    text-underline-offset: 0.2em;
  }
  .pj-cta-mail a:hover { text-decoration-color: var(--clay-light); }
}