/* Seite „Alle Funktionen“: Kopf wie die Startseite, darunter die Bereiche als ruhige Listen */
.fx { position: relative; overflow: hidden; color: #fff; padding: 64px 0 56px;
  background: radial-gradient(1000px 460px at 85% -10%, #125a63 0%, transparent 60%),
              linear-gradient(160deg, #0a1d36 0%, var(--navy) 45%, #0f3050 100%); }
.fx-in { position: relative; }
.fx-in > * { max-width: 980px; }
.fx h1 { color: #fff; font-size: clamp(2rem, 4.4vw, 3.1rem); line-height: 1.08; letter-spacing: -.02em; margin: 0 0 16px; font-weight: 800; }
.fx .hx-lead { margin-bottom: 30px; }
.fx-jump { display: flex; flex-wrap: wrap; gap: 8px; }
.fx-jump a { display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px 7px 10px; border-radius: 999px; font-size: .92rem; font-weight: 600;
  color: #e2ecf5; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.18); }
.fx-jump a:hover { background: rgba(255,255,255,.14); text-decoration: none; }
.fx-jump svg { width: 17px; height: 17px; color: #7dd3c7; }

.fx-body { padding-top: 24px; }
.fx-group { display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: 20px 56px; padding: 52px 0; border-bottom: 1px solid var(--line); scroll-margin-top: 80px; }
.fx-group:first-child { padding-top: 28px; }
.fx-group:last-child { border-bottom: 0; }
.fx-head { display: flex; flex-direction: column; gap: 14px; align-self: start; position: sticky; top: 90px; }
.fx-head h2 { margin: 0 0 6px; font-size: clamp(1.4rem, 2.3vw, 1.8rem); letter-spacing: -.01em; }
.fx-head p { margin: 0; color: var(--muted); line-height: 1.55; }
.fx-group.c1 .hfeat-ic { background: #e8eefb; color: #1d4ed8; }
.fx-group.c2 .hfeat-ic { background: #fdf2e3; color: #b45309; }
.fx-group.c3 .hfeat-ic { background: #f1ecfb; color: #6d28d9; }
.fx-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 36px; }
.fx-list li { position: relative; padding-left: 26px; }
.fx-list li::before { content: ""; position: absolute; left: 0; top: 4px; width: 16px; height: 16px; border-radius: 50%;
  background: var(--accent-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.3 2.3 4.7-5' fill='none' stroke='%230d9488' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat; }
.fx-list b { display: block; margin-bottom: 3px; font-size: 1rem; }
.fx-list span { display: block; color: var(--muted); font-size: .93rem; line-height: 1.5; }

@media (max-width: 900px) {
  .fx-group { grid-template-columns: 1fr; padding: 40px 0; }
  .fx-head { position: static; flex-direction: row; align-items: flex-start; }
}
@media (max-width: 620px) {
  .fx { padding: 44px 0 40px; }
  .fx-list { grid-template-columns: 1fr; gap: 20px; }
  .fx-jump a { font-size: .85rem; }
}