/* 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%, var(--lagune-tief) 0%, transparent 60%),
              linear-gradient(160deg, var(--granit-tief) 0%, var(--granit) 45%, var(--granit-hell) 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: #e2f0ef; 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: #7fd9d4; }

.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: #e4f1f0; color: #0e9c9c; }
.fx-group.c2 .hfeat-ic { background: #fbf2e2; color: #8a6418; }
.fx-group.c3 .hfeat-ic { background: #eef5f5; color: #0a6e70; }
.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; }
}
.fx-show{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:22px;align-items:center;margin-top:22px;padding:14px;border:1px solid var(--line);border-radius:14px;background:#fff;color:inherit;text-decoration:none;transition:transform .2s ease,box-shadow .2s ease}
.fx-show:hover{transform:translateY(-2px);box-shadow:0 18px 40px -24px rgba(12,35,64,.45)}
.fx-show img{width:100%;height:auto;border-radius:10px;display:block}
.fx-show span{color:var(--muted);line-height:1.55}.fx-show b{display:block;color:var(--ink,#333e44);font-size:1.1rem;margin-bottom:6px}.fx-show u{color:var(--accent);text-decoration:none;font-weight:600}
@media (max-width:760px){.fx-show{grid-template-columns:1fr}}