/* The contents menu /inhalte (assets/js/app/menu.js): one column per topic. It flows from the top,
   so the page grows with its lists. */

.menu {
  display: flow-root; padding: 61px 0 80px var(--gut);
  background: var(--dark); color: #fff; --side: #373737;
}
.menu .col { min-width: 0; }
.menu .col-head { width: 100%; margin-bottom: 20px; }
.menu .btn { transition: opacity .2s ease, transform .2s ease; }
/* three columns between the left margin and the same margin on the right (Figma: 3 × 295 in 125–1155) */
.menu-cols {
  width: calc(var(--w) - 2 * var(--gut)); margin-top: 53px;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: calc(var(--w) * 72.5 / 1280);
}

/* entries: kind diamond at the left, text kept inside the column (long words are broken) */
.menu .item {
  display: flex; align-items: flex-start; gap: 12px; padding: 18px 0; border-top: 1px solid rgba(255, 255, 255, .22);
  transition: opacity .2s ease, transform .2s ease;
}
.menu .item:hover { opacity: .75; }
.menu .list .item:last-child { border-bottom: 1px solid rgba(255, 255, 255, .22); }
/* the 52px diamond scaled to 70 %; negative margins shrink its layout box to the visible size */
.menu .item .icon { position: relative; flex: none; margin: -4px -16px -16px -8px; transform: scale(.7); transform-origin: top left; }
.menu .item .item-text { flex: 1; min-width: 0; overflow-wrap: anywhere; font-size: 20px; line-height: 1.3; }
.menu .item b { font-style: italic; }
.menu .item .sub { display: block; margin-top: 4px; font-size: 15px; line-height: 1.4; opacity: .8; }
.menu .empty { margin: 0; padding: 18px 0; border-top: 1px solid rgba(255, 255, 255, .22); font-size: 15px; font-style: italic; opacity: .55; }