/* Hero benefits (24.10.2026, draft): three benefit checks under the H1 of the image-row header (.lh.ls), full container width,
   three columns. Christian: "ich brauch noch 3 vorteil checks unter der headline [...] full width", then "nur paar worte. keine linen",
   then (25.10.2026) "doch keine icons sondern nur links von jedem einen kleinen schwarzen strich. und texte etwas kleiner und sans font", then "noch kleiner [...] strich weniger width und nicht so schwarz, und immer 2 zeilen [...] maxwidth".
   Sizes in rem only: the site scales html font-size with the viewport, px would not shrink with it. */
/* 25.10.2026, Christian: "bei grossen bildschirmen aber linksbuendig mit 4 rem abstand, also dass die 3 dinger nicht fullwidth sind" */
.lh_benefits { display: grid; grid-template-columns: repeat(3, max-content); justify-content: start; gap: 4rem; margin: 4rem 0 0; padding: 0; list-style: none; text-align: left; }
.lh_benefit { position: relative; margin: 0; padding: 0 0 0 1.1rem; }
.lh_benefit::before { content: ""; position: absolute; left: 0; top: .2em; bottom: .2em; width: 1px; background: rgba(17,17,17,.35); }
.lh_benefit-title { margin: 0; font-family: var(--_typography---font-styles--body); font-size: .9375rem; font-weight: 500; line-height: 1.45; letter-spacing: -0.01em; color: #111; max-width: 24ch; }
.lh_benefits ~ .galerie-rahmen { margin-top: 6rem; }
@media (max-width: 719px) {
  /* 25.10.2026, Christian: "bei den breakpoint die striche weg, und so verkleinern dass es horizontal alles nebeneinander passt" */
  .lh_benefits { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-top: 2.5rem; }
  .lh_benefit { padding-left: 0; }
  .lh_benefit::before { display: none; }
  .lh_benefit-title { max-width: none; font-size: .875rem; line-height: 1.4; }
  .lh_benefits ~ .galerie-rahmen { margin-top: 4rem; }
}
/* 25.10.2026, Christian: "ab dem moment wo hier in 3 zeilen rutscht, pack die untereinander, icon links daneben und horizontal
   getrennt durch strich". The third text wraps to three lines at about 530px; the list stacks from 599px down, with margin. */
.lh_benefit-icon { display: none; }
@media (max-width: 599px) {
  .lh_benefits { grid-template-columns: 1fr; gap: 0; }
  .lh_benefit { display: flex; align-items: center; gap: .875rem; padding: .875rem 0; }
  .lh_benefit + .lh_benefit { border-top: 1px solid rgba(17,17,17,.12); }
  .lh_benefit-icon { display: flex; flex: none; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; background: #f3f2ee; color: #111; }
  .lh_benefit-icon svg { width: 1.125rem; height: 1.125rem; }
  .lh_benefit-title { font-size: 1rem; }
  .lh_benefit-title br { display: none; }
}