/* ══════════════════════════════════════════════════════════════════════════
   PROJEKT-DETAILSEITEN — David Haumann Foto- & Mediendesign
   ──────────────────────────────────────────────────────────────────────────
   Gemeinsames Stylesheet für die sieben Fallstudien unter /projekte/*.html.

   Layout seit 7.9.2026: kompakter Zweispalter – links die Beschreibung
   (bleibt beim Scrollen der rechten Spalte stehen), rechts die Bildstrecke.

   Seit dem Audit vom 5.10.2026 im selben Seitenrahmen wie alle anderen
   Seiten (main#inhalt aus ci.css), mit den Schriftgrößen der Skala --fs-*
   und den Abständen des Rasters. Die Bildstrecke hat wie das Portfolio
   der Startseite Panel-Radius und 3px-Fugen. Der Stand davor liegt in
   _archiv/website-vor-audit-2026-10-05/.

   Navigation, Footer, Eyebrow, Buttons kommen aus ci.css.
   ══════════════════════════════════════════════════════════════════════════ */

.projekt-layout {
  display: grid;
  grid-template-columns: minmax(320px, 36%) 1fr;
  align-items: start;
}

/* ─── LINKE SPALTE: TEXT ───
   Bleibt beim Scrollen der Bildstrecke stehen. Text außen auf der
   gemeinsamen Kante (--gutter), oben bündig mit dem ersten Bild. */
.projekt-info {
  position: sticky;
  top: calc(var(--nav-h) + var(--page-margin));
  max-height: calc(100vh - var(--nav-h) - 2 * var(--page-margin));
  overflow-y: auto;
  padding: 0 var(--gutter) var(--gutter);
  display: flex;
  flex-direction: column;
}

.page-title {
  font-family: var(--font-display);
  font-weight: 900;
  text-transform: uppercase;
  font-size: var(--fs-h3);
  line-height: 1.05;
  letter-spacing: -0.015em;
  overflow-wrap: break-word;
  hyphens: auto;
}

.projekt-intro {
  font-size: var(--fs-md);
  line-height: 1.65;
  color: var(--grey-dark);
  margin-top: var(--space-md);
}

.projekt-facts {
  list-style: none;
  margin-top: var(--space-lg);
  padding-top: var(--space-md);
  border-top: 1px solid var(--grey-mid);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-sm) var(--space-md);
}

.projekt-facts li {
  font-size: var(--fs-sm);
  color: var(--grey-dark);
}

.projekt-facts strong {
  display: block;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--black);
  margin-bottom: 4px;
}

.projekt-body {
  margin-top: var(--space-lg);
  padding-top: var(--space-md);
  border-top: 1px solid var(--grey-mid);
}

.projekt-body p {
  font-size: var(--fs-base);
  line-height: 1.75;
  color: var(--grey-dark);
}

.projekt-body p + p {
  margin-top: var(--space-sm);
}

/* Gleicher Hinweis-Stil wie die Rechtsgrundlagen in der Datenschutzerklärung. */
.projekt-body .projekt-credit {
  margin-top: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  border-left: 2px solid var(--accent);
  font-size: var(--fs-sm);
  font-style: italic;
}

.projekt-nav {
  margin-top: auto;
  padding-top: var(--space-lg);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm) var(--space-md);
}

/* ─── RECHTE SPALTE: BILDSTRECKE ─── */
.projekt-media {
  display: flex;
  flex-direction: column;
  gap: 3px;
  border-radius: var(--panel-radius);
  overflow: hidden;
}

.projekt-media figure {
  position: relative;
  overflow: hidden;
  background: var(--grey-light);
}

/* Höhe automatisch aus den width/height-Attributen der Bilder – der Browser
   reserviert damit schon vor dem Laden den richtigen Platz (kein Springen),
   ganz ohne Inline-aspect-ratio pro Bild. */
.projekt-media picture,
.projekt-media img {
  display: block;
  width: 100%;
  height: auto;
}

.projekt-media figcaption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: var(--space-xs) var(--space-sm);
  background: linear-gradient(to top, rgba(10,10,10,0.75), transparent);
  color: var(--white);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0;
  transition: opacity 0.25s;
  pointer-events: none;
}

.projekt-media figure:hover figcaption,
.projekt-media figure:focus-within figcaption {
  opacity: 1;
}

/* ─── UMBRÜCHE ───
   Unter 1000px (derselbe Punkt, an dem die Nav aufs Hamburger-Menü wechselt)
   lohnt sich die feststehende Spalte nicht mehr – dann normaler Lesefluss:
   erst der Text, danach die Bilder, mit --section-pad Abstand dazwischen
   (Textblock ohne Fläche -> Bildstrecke mit Kante). */
@media (max-width: 1000px) {
  .projekt-layout { display: block; }

  .projekt-info {
    position: static;
    max-height: none;
    overflow-y: visible;
    padding: 0 var(--gutter);
  }

  .projekt-intro,
  .projekt-facts,
  .projekt-body { max-width: 640px; }

  .projekt-media { margin-top: var(--section-pad); }

  /* Ohne stehende Spalte gibt es kein Hover-Erlebnis mehr – Bildunter-
     schriften dauerhaft zeigen (Touchgeräte haben ohnehin kein Hover). */
  .projekt-media figcaption { opacity: 1; }
}