/* ============================================================
   Projektseite. Setzt basis.css und bausteine.css voraus.
   ============================================================ */

/* Brotkrumen: klein, ruhig, keine Zierde */
.krumen {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  padding-top: 108px;
  font-size: 0.88rem; color: var(--ink-3);
}
.krumen a { transition: color 200ms var(--ease-out); }
.krumen a:hover { color: var(--ink); }
.krumen svg { width: 13px; height: 13px; opacity: 0.5; }
.krumen .hier { color: var(--ink-2); }

/* ---- Kopf ---- */
.fall-kopf { padding-block: clamp(28px, 4vw, 44px) clamp(32px, 4vw, 48px); max-width: 62ch; }
.fall-kopf h1 { font-size: clamp(2.1rem, 4.4vw, 3.4rem); font-weight: 700; line-height: 1.05; letter-spacing: -0.032em; margin: 16px 0 0; }
.fall-lead { margin-top: 20px; font-size: clamp(1.05rem, 1.5vw, 1.22rem); line-height: 1.55; color: var(--ink-2); }

/* Eckdaten als Haarlinien-Raster, dieselbe Sprache wie im Nutzen-Abschnitt */
.fall-daten {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin: clamp(32px, 4vw, 44px) 0 0;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.fall-daten > div { background: var(--bg); padding: 18px 20px; }
.fall-daten dt { font-family: var(--display); font-weight: 700; font-size: 0.72rem; letter-spacing: 0.13em; text-transform: uppercase; color: var(--accent); margin-bottom: 8px; }
.fall-daten dd { margin: 0; font-size: 0.97rem; color: var(--ink); }

/* ---- Hauptmedium ---- */
.fall-medium {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--surface);
  aspect-ratio: 16 / 9;
}
.fall-medium img { width: 100%; height: 100%; object-fit: cover; }
.fall-abspielen {
  position: absolute; inset: 0; margin: auto;
  width: 78px; height: 78px;
  display: grid; place-items: center;
  border: 1px solid var(--mat-edge);
  border-radius: var(--r-pill);
  background: rgba(12, 15, 19, 0.5);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  color: #fff;
  transition: background-color 320ms var(--ease-out), transform 140ms var(--ease-out);
}
.fall-abspielen:hover { background: var(--accent-deep); border-color: transparent; }
.fall-abspielen:active { transform: scale(0.94); }
.fall-abspielen svg { width: 28px; height: 28px; margin-left: 3px; }
.fall-hinweis {
  position: absolute; right: 14px; bottom: 14px;
  padding: 7px 14px; border-radius: var(--r-pill);
  background: rgba(12, 15, 19, 0.6);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  border: 1px solid var(--mat-edge);
  font-size: 0.8rem; color: #fff;
}

/* ---- Text: drei nummerierte Schritte, Trennlinien nur dazwischen ---- */
/* Mittig gesetzt: als schmale Spalte am linken Rand wirkt der Block verloren. */
.fall-text { margin: clamp(44px, 5vw, 68px) auto 0; display: grid; gap: 0; max-width: 74ch; }
.fall-block { display: grid; grid-template-columns: 3.2rem 1fr; gap: 22px; padding-block: 30px; }
.fall-block + .fall-block { border-top: 1px solid var(--line); }
.fall-block:first-child { padding-top: 0; }
.fall-nr { font-family: var(--display); font-weight: 700; font-size: 1.05rem; letter-spacing: -0.01em; color: var(--accent); padding-top: 0.2em; }
.fall-block h2 { font-size: clamp(1.2rem, 1.7vw, 1.42rem); font-weight: 600; line-height: 1.25; letter-spacing: -0.014em; margin-bottom: 11px; }
.fall-block p { color: var(--ink-2); }

/* ---- Galerie: Fotos ohne Rahmenlinie ---- */
/* Masonry ueber CSS-Spalten, wie auf der bestehenden Seite: die Bilder
   behalten ihre natuerliche Hoehe, statt auf ein Format beschnitten zu werden. */
.fall-galerie {
  columns: 3 220px;
  column-gap: 16px;
  margin-top: clamp(44px, 5vw, 64px);
}
.fall-galerie:empty { display: none; }   /* nicht jedes Projekt hat Galeriebilder */
.fall-galerie figure {
  margin: 0 0 16px;
  border-radius: var(--r);
  overflow: hidden;
  background: var(--surface);
  break-inside: avoid;
}
.fall-galerie img { width: 100%; height: auto; display: block; }

/* ---- Weiter im Portfolio ---- */
.fall-weiter { margin-top: clamp(64px, 8vw, 104px); padding-bottom: clamp(72px, 9vw, 120px); }
.fall-weiter .head { margin-bottom: clamp(28px, 3vw, 40px); }

/* ============================================================
   Bewegung. Dieselbe Sprache wie auf der Startseite: der Fortschritt
   kommt aus dem Scrollen, nicht aus einem Handler.
   ============================================================ */

/* Das Hauptmedium bekommt Tiefe: das Bild laeuft langsamer als der Rahmen. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .fall-medium img {
      animation: fall-tiefe linear both;
      animation-timeline: view();
      animation-range: entry 0% exit 100%;
      will-change: transform;
    }
    /* Die Eckdaten fuellen sich von links nach rechts. */
    .fall-daten > div {
      animation: fall-feld linear both;
      animation-timeline: view();
      animation-range: entry 10% entry 60%;
    }
    .fall-daten > div:nth-child(2) { animation-range: entry 14% entry 64%; }
    .fall-daten > div:nth-child(3) { animation-range: entry 18% entry 68%; }
    .fall-daten > div:nth-child(4) { animation-range: entry 22% entry 72%; }
  }
}
@keyframes fall-tiefe { from { transform: scale(1.06) translate3d(0, 12px, 0); } to { transform: scale(1) translate3d(0, -12px, 0); } }
@keyframes fall-feld { from { opacity: 0; transform: translate3d(0, 12px, 0); } to { opacity: 1; transform: none; } }

/* Die nummerierten Bloecke setzen sich Stueck fuer Stueck.
   Die Ziffer kommt zuerst, sie fuehrt den Blick in den Absatz. */
.js .fall-block .fall-nr,
.js .fall-block > div > * { opacity: 0; transform: translate3d(0, 14px, 0); }
.js .fall-block.is-in .fall-nr,
.js .fall-block.is-in > div > * {
  opacity: 1;
  transform: none;
  transition: opacity 620ms var(--ease-out), transform 620ms var(--ease-out);
}
.js .fall-block.is-in .fall-nr { transition-delay: 0ms; }
.js .fall-block.is-in > div > h2 { transition-delay: 90ms; }
.js .fall-block.is-in > div > p { transition-delay: 170ms; }

/* Galerie: die Bilder kommen versetzt, spaltenweise gestaffelt. */
.js .fall-galerie figure { opacity: 0; transform: translate3d(0, 20px, 0) scale(0.985); }
.js .fall-galerie.is-in figure {
  opacity: 1;
  transform: none;
  transition: opacity 700ms var(--ease-out), transform 800ms var(--ease-out);
  transition-delay: calc(var(--i, 0) * 70ms);
}
.fall-galerie img { transition: transform 900ms var(--ease-out); }
.fall-galerie figure:hover img { transform: scale(1.04); }

@media (prefers-reduced-motion: reduce) {
  .fall-abspielen { transition: background-color 200ms linear; }
  .fall-abspielen:active { transform: none; }
  .fall-medium img, .fall-daten > div { animation: none; }
  .js .fall-block .fall-nr, .js .fall-block > div > *,
  .js .fall-galerie figure { opacity: 1; transform: none; transition: none; }
  .fall-galerie img, .fall-galerie figure:hover img { transition: none; transform: none; }
}
@media (prefers-reduced-transparency: reduce) {
  .fall-abspielen, .fall-hinweis { background: #12161b; backdrop-filter: none; -webkit-backdrop-filter: none; }
}
@media (max-width: 860px) {
  .fall-daten { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 767px) {
  .krumen { padding-top: 92px; }
  .fall-daten { grid-template-columns: 1fr; }
  .fall-medium { aspect-ratio: 3 / 2; }
  .fall-abspielen { width: 62px; height: 62px; }
  .fall-abspielen svg { width: 22px; height: 22px; }
  .fall-block { grid-template-columns: 1fr; gap: 8px; }
  .fall-galerie { columns: 1; }
}