/* F9 Nr. 29: zwei Schaltflächen nebeneinander, mobil untereinander in voller Breite */
main .actions { align-items: center; }
main .actions > .btn { white-space: normal; text-align: center; }
@media (max-width: 560px) {
  main .actions { flex-direction: column; align-items: stretch; gap: 14px; }
  main .actions > .btn { width: 100%; }
  main .actions > .tlink { align-self: flex-start; }
}

/* F10 Nr. 40/44: Systeme als Raster, drei Gruppen je Zeile, grössere Gruppenüberschriften */
.sec .tgruppen { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 40px; margin-top: 36px; }
.sec .tgruppen .tg > .tg-t { font-size: clamp(22px, 2.1vw, 30px); line-height: 1.15; letter-spacing: -.01em; padding: 6px 0 16px; }
.sec .tgruppen .tg-l { gap: 8px; }
.sec .tg-mehr { grid-column: 1 / -1; margin-top: 32px; }
@media (max-width: 900px) { .sec .tgruppen { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 28px; } }
@media (max-width: 720px) {
  .sec .tgruppen { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .sec .tgruppen .tg > .tg-t { padding: 6px 0 12px; }
  .sec .tgruppen .tg > summary::after { margin-left: auto; }
}

/* F10 Nr. 41: Spalte "Lösung" breiter, lange Lösungsnamen ab 1024 px in einer Zeile */
@media (min-width: 1024px) {
  .sec .tbl tbody th { width: 26%; }
  .sec .tbl td:last-child { width: 30%; white-space: nowrap; }
}