/* fan.css – Bilderfächer wie auf /webseiten/ („Unsere Projekte")  ·  21.09.2026
   Verwendet auf der Startseite (Mitarbeiterfotos, Bilder rechts) und auf
   /shooting/ (Videoausschnitte, Bilder links). Eigene Datei, damit sich die
   beiden Seiten einzeln nachladen lassen.
   Nur ab 62em aktiv – auf dem Handy bleiben die bestehenden Reihen. */

.fa-grid { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 62em) {
  .fa-grid { grid-template-columns: minmax(0, 4.4fr) minmax(0, 5.6fr); gap: clamp(2.5rem, 1rem + 4vw, 4.5rem); }
  /* Liegt der Fächer links, braucht er auch die breitere Spalte */
  .fa-grid.fa-links { grid-template-columns: minmax(0, 5.6fr) minmax(0, 4.4fr); }
  .fa-grid.fa-links .fa-text { order: 2; }
  .fa-grid.fa-links .fa-stapel { order: 1; }
}

.fa-text .fa-eyebrow { margin: 0 0 .75rem; font-size: .75rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: #0A6EBD; }
.fa-text h2 { margin: 0 0 1rem; }
.fa-text p { margin: 0 0 1.25rem; font-size: 1.0625rem; line-height: 1.7; color: #4B5563; max-width: 34rem; }
.fa-liste { list-style: none; margin: 0 0 1.75rem; padding: 0; border-top: 1px solid #E7EAEF; }
.fa-liste li { border-bottom: 1px solid #E7EAEF; }
.fa-liste button { display: flex; align-items: center; gap: .9rem; width: 100%; padding: .85rem .25rem; background: none; border: 0;
  text-align: left; cursor: pointer; color: #111827; font: inherit; transition: color .2s, padding-left .3s cubic-bezier(.22,.61,.36,1); }
.fa-liste button:hover, .fa-liste button:focus-visible, .fa-liste button[aria-current="true"] { color: #0A6EBD; padding-left: .6rem; }
.fa-liste .fa-pfeil { flex: none; width: 1.05rem; height: 1.05rem; color: #9CA3AF; transition: transform .25s, color .2s; }
.fa-liste button:hover .fa-pfeil, .fa-liste button:focus-visible .fa-pfeil, .fa-liste button[aria-current="true"] .fa-pfeil { transform: translateX(4px); color: #0A6EBD; }
.fa-liste strong { display: block; font-size: 1.0625rem; font-weight: 700; letter-spacing: -.01em; }
.fa-liste small { display: block; margin-top: 2px; font-size: .84rem; font-weight: 600; color: #6B7280; }

/* Der Fächer selbst */
/* Der Fächer beginnt immer links und legt sich nach rechts auf – die vorderste
   Karte (--k:0) liegt also links (Wunsch Nevio, 21.09.2026). */
.fa-stapel { position: relative; aspect-ratio: 5 / 4; perspective: 1700px; perspective-origin: 88% 42%; --n: 5; }
.fa-karte { --k: 0; --lift: 0; position: absolute; left: 0; top: 50%; width: 39%; display: block; overflow: hidden;
  border-radius: 1rem; background: #fff; border: 1px solid rgba(10, 37, 64, .08); padding: 0; cursor: pointer;
  box-shadow: 0 34px 60px -28px rgba(10, 37, 64, .45), 0 10px 20px -12px rgba(10, 37, 64, .25);
  transform-origin: 0 50%;
  transform: translate3d(calc(var(--k) * 178% / (var(--n) - 1)), calc(-50% - var(--k) * 11% / (var(--n) - 1) - var(--lift) * 7%), calc(var(--k) * -170px / (var(--n) - 1)))
             rotateY(17deg) rotateZ(-3.5deg);
  transition: transform .8s cubic-bezier(.22,.61,.36,1), box-shadow .45s, filter .45s;
  transition-delay: calc(var(--k) * 70ms); z-index: calc(20 - var(--k)); }
.fa-karte img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; }
.fa-stapel.fa-hoch .fa-karte img { aspect-ratio: 9 / 16; }

/* Vorne holen: beim Überfahren der Karte selbst oder über die Liste */
.fa-karte:hover, .fa-karte:focus-visible, .fa-karte.is-vorn { --lift: 1; z-index: 30;
  box-shadow: 0 44px 70px -30px rgba(10, 60, 120, .55), 0 0 0 1px rgba(58, 159, 232, .35); transition-delay: 0s; }
.fa-stapel:has(.fa-karte:hover) .fa-karte:not(:hover),
.fa-stapel.hat-aktiv .fa-karte:not(.is-vorn) { filter: brightness(.94) saturate(.9); }

.fa-bild-titel { position: absolute; left: .75rem; right: .75rem; bottom: .75rem; padding: .4rem .7rem; border-radius: .6rem;
  background: rgba(3, 7, 18, .72); color: #fff; font-size: .8125rem; font-weight: 700; line-height: 1.35;
  opacity: 0; transform: translateY(6px); transition: opacity .3s, transform .3s; pointer-events: none; }
.fa-karte:hover .fa-bild-titel, .fa-karte:focus-visible .fa-bild-titel, .fa-karte.is-vorn .fa-bild-titel { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  .fa-karte { transition: none; transition-delay: 0s; }
  .fa-bild-titel { transition: none; }
}
/* Unter 62em: kein Fächer. Wo es eine eigene Reihe gibt (Startseite), wird der
   Fächer ausgeblendet; wo nicht (Shooting), wird er zur wischbaren Reihe. */
@media (max-width: 61.99em) {
  /* Auf dem Handy zuerst lesen, dann sehen */
  .fa-grid.fa-links .fa-text { order: 1; }
  .fa-grid.fa-links .fa-stapel { order: 2; }
  .fa-stapel:not(.fa-mobil-reihe) { display: none; }
  .fa-liste { display: none; }

  .fa-stapel.fa-mobil-reihe { display: flex; gap: .75rem; aspect-ratio: auto; perspective: none;
    overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
    padding-bottom: .5rem; scrollbar-width: none; }
  .fa-stapel.fa-mobil-reihe::-webkit-scrollbar { display: none; }
  .fa-stapel.fa-mobil-reihe .fa-karte { position: relative; top: auto; right: auto; left: auto; width: auto; flex: 0 0 min(15rem, 58vw);
    transform: none; transition: none; z-index: auto; scroll-snap-align: center;
    box-shadow: 0 12px 28px -18px rgba(10, 37, 64, .5); }
  .fa-stapel.fa-mobil-reihe .fa-bild-titel { opacity: 1; transform: none; }
}

/* Wenn die Liste eine Karte nach vorn holt (per JS gesetztes .is-vorn) */
.fa-stapel.hat-aktiv .fa-karte.is-vorn { --lift: 1; z-index: 30; }

/* Startseite: ab 62em ersetzt der Fächer die bestehende Bilderreihe */
@media (min-width: 62em) { .mf-bilder { display: none; } }
@media (max-width: 61.99em) { .fa-text { text-align: center; } .fa-text .mf-lead { margin-left: auto; margin-right: auto; } }

/* Weg zur Shooting-Seite: ab 62em unter dem Text, darunter unter der Bilderreihe (23.09.2026, Wunsch Nevio).
   Es ist immer nur einer der beiden Knöpfe im Dokument sichtbar. */
.mf-knopf { margin-top: 1.75rem; width: fit-content; }
.mf-knopf-unten { display: none; }
@media (max-width: 61.99em) {
  .fa-text .mf-knopf { display: none; }
  /* display:flex statt inline-flex: nur so zentrieren die automatischen Seitenränder den Knopf */
  .mf-knopf-unten { display: flex; width: fit-content; margin: 2rem auto 0; }
  /* Luft zwischen Text und Bilderreihe (vorher klebte der Knopf auf den Bildern) */
  .mf-bilder { margin-top: 1.75rem; }
}