/* ------------------------------------------------------------------
   Projekte im Menü (Entwurf, Branch projekte-unterseite)
   Rein additiv: nichts in styles.css oder app.js wurde geändert.
   Das Menüblatt weitet sich auf, die übrigen Einträge blenden
   gestaffelt aus, die Projekte erscheinen als nummerierte Einträge
   unter dem Wort PROJEKTE.
   ------------------------------------------------------------------ */

.site-menu {
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  transition:
    transform 360ms var(--ease),
    width 480ms var(--ease),
    visibility 0s linear 360ms;
}

.site-menu.is-open {
  transition-delay: 0s, 0s, 0s;
}

/* Breite im Projekte Zustand: Mobil ein schmaler Streifen der Seite bleibt sichtbar */
@media (max-width: 767px) {
  body.projects-open {
    --side-sheet-width: 90vw;
  }
}

@media (min-width: 768px) {
  body.projects-open {
    --side-sheet-width: min(88vw, 600px);
  }

  /* Statt die Seite zusammenzuquetschen, liegt das Blatt über ihr. */
  body.projects-open .page {
    width: 100%;
    margin-left: 0;
    transform: none;
    opacity: 0.62;
  }
}

/* Der Abstand liegt jetzt je Eintrag statt im Container, damit er mit einklappen kann. */
.site-menu .menu-links {
  gap: 0;
}

.site-menu .dictionary-entry {
  margin-bottom: clamp(21px, 2.8vh, 26px);
}

.site-menu .menu-title {
  --d: 0ms;
  max-height: 120px;
}

.site-menu .menu-links > :nth-child(1) { --d: 40ms; }
.site-menu .menu-links > :nth-child(4) { --d: 80ms; }
.site-menu .menu-links > :nth-child(5) { --d: 120ms; }
.site-menu .menu-links > :nth-child(6) { --d: 160ms; }

/* Rückweg: erst Platz schaffen, dann einblenden. */
.site-menu .menu-title,
.site-menu .dictionary-entry:not(.is-projects-entry) {
  max-height: 120px;
  transition:
    max-height 380ms var(--ease),
    margin 380ms var(--ease),
    padding 380ms var(--ease),
    opacity 240ms ease calc(180ms + var(--d, 0ms)),
    transform 240ms ease calc(180ms + var(--d, 0ms));
}

/* Hinweg: erst leise ausblenden (gestaffelt), dann Platz zusammenziehen. */
.site-menu.is-projects .menu-title,
.site-menu.is-projects .dictionary-entry:not(.is-projects-entry) {
  max-height: 0;
  margin-top: 0;
  margin-bottom: 0;
  padding-top: 0;
  padding-bottom: 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transform: translateX(-12px);
  transition:
    opacity 200ms ease var(--d, 0ms),
    transform 260ms ease var(--d, 0ms),
    max-height 420ms var(--ease) calc(140ms + var(--d, 0ms)),
    margin 420ms var(--ease) calc(140ms + var(--d, 0ms)),
    padding 420ms var(--ease) calc(140ms + var(--d, 0ms));
}

.site-menu .menu-legal {
  transition: opacity 240ms ease 200ms;
}

.site-menu.is-projects .menu-legal {
  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms ease;
}

/* Einleitung und Projektliste: gleiche Ein und Ausblendlogik */
.projects-intro,
.projects-list {
  flex-shrink: 0;
  align-self: stretch;
  max-height: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transition:
    max-height 420ms var(--ease),
    margin-top 420ms var(--ease),
    opacity 160ms ease,
    visibility 0s linear 420ms;
}

.projects-list { list-style: none; }

.projects-intro p {
  max-width: 52ch;
  margin: 0;
  color: #6f716d;
  font-size: 15px;
  line-height: 1.6;
}

.projects-intro p + p { margin-top: 14px; }

.site-menu.is-projects .projects-intro {
  max-height: 90vh;
  margin-top: clamp(24px, 4vh, 34px);
  opacity: 1;
  visibility: visible;
  transition:
    max-height 520ms var(--ease) 160ms,
    margin-top 520ms var(--ease) 160ms,
    opacity 360ms ease 300ms,
    visibility 0s;
}

.site-menu.is-projects .projects-list {
  max-height: 80vh;
  margin-top: clamp(30px, 5vh, 42px);
  opacity: 1;
  visibility: visible;
  transition:
    max-height 520ms var(--ease) 160ms,
    margin-top 520ms var(--ease) 160ms,
    opacity 300ms ease 340ms,
    visibility 0s;
}

@media (max-width: 767px) {
  /* Auf dem Handy soll die Auswahl ohne Scrollen sichtbar sein. */
  .site-menu.is-projects .is-projects-entry { margin-bottom: 0; }
  .site-menu.is-projects .projects-intro { margin-top: 16px; }
  .projects-intro p { font-size: 14px; line-height: 1.5; }
  .projects-intro p + p { margin-top: 10px; }
  .site-menu.is-projects .projects-list { margin-top: 18px; }
  .project-row { padding-top: 12px; padding-bottom: 12px; }
  .project-text { margin-top: 6px; }
}

/* Projektzeile: Nummer, Name, Beschreibung, kleiner Pfeil; die ganze Zeile ist der Link */
.project-item {
  border-top: 1px solid rgb(23 23 23 / 11%);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 200ms ease, transform 200ms ease;
}

.project-item:first-child { border-top: 0; }

.site-menu.is-projects .project-item {
  opacity: 1;
  transform: none;
  transition:
    opacity 380ms ease calc(380ms + var(--i, 0) * 110ms),
    transform 380ms var(--ease) calc(380ms + var(--i, 0) * 110ms);
}

.project-item:nth-child(2) { --i: 1; }

.project-row {
  display: grid;
  grid-template-columns: 2.1em minmax(0, 1fr);
  column-gap: 10px;
  align-items: start;
  padding: clamp(22px, 3.4vh, 30px) 0;
  color: inherit;
  text-decoration: none;
}

.project-row:focus-visible {
  outline: 1px solid rgb(23 23 23 / 35%);
  outline-offset: 2px;
  border-radius: 4px;
}

.project-no {
  padding-top: 0.5em;
  color: #a9aca6;
  font-size: 14px;
  font-weight: 300;
  line-height: 1.3;
  font-variant-numeric: tabular-nums;
}

.project-title {
  display: block;
  color: var(--ink);
  font-size: 17px;
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.03em;
}

.project-text {
  display: block;
  margin-top: 8px;
  color: #707070;
  font-size: 14px;
  line-height: 1.45;
}

.project-arrow {
  display: inline-block;
  width: 0.78em;
  height: 0.78em;
  margin-left: 0.4em;
  vertical-align: -0.02em;
  fill: none;
  stroke: #ff694a;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 200ms ease;
}

.project-row:hover .project-arrow,
.project-row:focus-visible .project-arrow { transform: translate(2px, -2px); }

/* Zurück Pfeil: nur im Projekte Zustand, auf Höhe des Menü Kreuzes, rechts */
.projects-back {
  position: absolute;
  top: max(20px, env(safe-area-inset-top));
  right: 14px;
  display: grid;
  place-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition: opacity 200ms ease, visibility 0s linear 200ms;
}

.projects-back svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.site-menu.is-projects .projects-back {
  opacity: 1;
  visibility: visible;
  transition: opacity 260ms ease 260ms, visibility 0s;
}

.projects-back:focus-visible {
  outline: 0;
  color: var(--rolodex-active-dot);
}

.dictionary-entry.is-projects-entry:focus-visible {
  outline: 0;
}

/* Das Rad am rechten Rand würde im sichtbaren Streifen nur ablenken. */
body.projects-open .rolodex-edge {
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease;
}

/* Beim Schließen des ganzen Menüs ohne Animation zurücksetzen. */
.site-menu.is-resetting,
.site-menu.is-resetting * {
  transition: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .site-menu,
  .site-menu *,
  .projects-back {
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
  }
}

@media (min-width: 768px) {
  .project-title { font-size: 19px; }
}