/* Projektordner: mehr Raum für vier Referenzen, ohne den Ordner-Look zu ändern. */
main[data-route="home"] .fold {
  max-width: 740px;
  height: 260px;
  cursor: default;
  transition: height .65s cubic-bezier(.2,.9,.2,1);
}
main[data-route="home"] .fold.open { height: 430px; }
main[data-route="home"] .fold .front {
  width: 100%;
  border: 0;
  padding: 0;
  font-family: inherit;
  cursor: pointer;
}
main[data-route="home"] .fold .front:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 4px;
}
main[data-route="home"] .fold .cs {
  width: 66%;
  opacity: 0;
  visibility: hidden;
  transition: transform .8s cubic-bezier(.2,.9,.2,1), translate .8s cubic-bezier(.2,.9,.2,1), width .8s cubic-bezier(.2,.9,.2,1), top .8s cubic-bezier(.2,.9,.2,1), left .8s cubic-bezier(.2,.9,.2,1), opacity .3s ease;
}
main[data-route="home"] .fold.open .cs { width: 42%; opacity: 1; visibility: visible; }
main[data-route="home"] .fold.open .cs:nth-of-type(1) { --y: -20px; --r: -5deg; translate: -125% 0; }
main[data-route="home"] .fold.open .cs:nth-of-type(2) { --y: -36px; --r: -2deg; translate: -42% 0; }
main[data-route="home"] .fold.open .cs:nth-of-type(3) { --y: -36px; --r: 2deg; translate: 42% 0; }
main[data-route="home"] .fold.open .cs:nth-of-type(4) { --y: -20px; --r: 5deg; translate: 125% 0; }

@media (max-width: 1159px) {
  main[data-route="home"] .fold:not(.open) .cs { width: 78%; }
  main[data-route="home"] .fold.open {
    --project-card-height: clamp(190px, calc(25vw + 110px), 275px);
    height: calc(2 * var(--project-card-height) + 105px);
  }
  main[data-route="home"] .fold.open .cs {
    width: calc(50% - 10px);
    height: var(--project-card-height);
    padding: 12px;
    top: 0;
    left: 0;
    translate: none;
    transform: none;
  }
  main[data-route="home"] .fold.open .cs b {
    font-size: clamp(.8rem, 3.8vw, 1rem);
    line-height: 1.25;
  }
  main[data-route="home"] .fold.open .cs span {
    display: block;
    font-size: clamp(.74rem, 3.3vw, .875rem);
    line-height: 1.25;
  }
  main[data-route="home"] .fold.open .cs img,
  main[data-route="home"] .fold.open .cs video {
    height: auto;
    aspect-ratio: 16 / 9;
    margin-top: 10px;
  }
  main[data-route="home"] .fold.open .cs:nth-of-type(1) { left: 0; top: 0; translate: none; transform: rotate(-2deg); }
  main[data-route="home"] .fold.open .cs:nth-of-type(2) { left: calc(50% + 10px); top: 0; translate: none; transform: rotate(2deg); }
  main[data-route="home"] .fold.open .cs:nth-of-type(3) { left: 0; top: calc(var(--project-card-height) + 15px); translate: none; transform: rotate(-2deg); }
  main[data-route="home"] .fold.open .cs:nth-of-type(4) { left: calc(50% + 10px); top: calc(var(--project-card-height) + 15px); translate: none; transform: rotate(2deg); }
  main[data-route="home"] .fold.open .front { height: 140px; transform: translateY(40px); }
}

@media (max-width: 500px) {
  main[data-route="home"] #referenzen > .wrap { padding-left: 16px; padding-right: 16px; }
}

/* Auf sehr schmalen Displays verhindern kompaktere Schalter seitliches Scrollen. */
@media (max-width: 360px) {
  main[data-route="home"] .tabs button { padding: 10px; font-size: .875rem; min-height: 44px; }
}