.feature-hub{--hub-bg:var(--paint-night);--hub-card:var(--paint-night-surface);--hub-ink:var(--paint-night-ink);--hub-muted:var(--paint-night-muted);--hub-accent:var(--paint-night-accent);--hub-rule:var(--paint-night-rule);color:var(--hub-ink);background:radial-gradient(ellipse at 80% 38%,var(--paint-hub-tone-68) 0%,transparent 57%),linear-gradient(180deg,var(--paint-hub-tone-69) 0%,var(--paint-hub-tone-70) 19%,var(--hub-bg) 49%);padding:var(--space-100) 0 var(--space-110);overflow:clip;}
.feature-hub ::selection{background:var(--hub-accent);color:var(--hub-bg);}
.feature-hub :focus-visible{outline:2px solid var(--hub-accent);outline-offset:6px;}
.feature-hub .hub-layout{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);grid-template-areas:'intro wheel' 'detail wheel';gap:var(--space-28) var(--space-72);align-items:start;}
.hub-intro{grid-area:intro;}
.feature-hub h2{font-family:var(--body);font-weight:400;font-size:clamp(40px,4.4vw,62px);line-height:1.08;letter-spacing:-.04em;}
.hub-intro>p{color:var(--hub-muted);font-size:15px;line-height:1.75;margin-top:var(--space-20);max-width:44ch;}
.feature-hub .module-detail{grid-area:detail;max-width:none;padding:var(--space-24);border:1px solid var(--hub-rule);border-radius:16px;background:var(--hub-card);}
.module-heading{display:flex;align-items:center;gap:var(--space-14);margin-bottom:var(--space-20);}
.module-heading>span{width:44px;height:44px;display:grid;place-items:center;flex:none;border-radius:12px;background:var(--hub-accent);color:var(--hub-bg);}
.module-heading strong{font-size:16px;font-weight:650;}
.feature-hub .module-detail h3{font-family:var(--body);font-size:24px;line-height:1.3;letter-spacing:-.025em;font-weight:500;min-height:0;}
.module-features{list-style:none;padding:0;margin:var(--space-20) 0 0;}
.module-features li{font-size:12px;line-height:1.6;padding:var(--space-11) 0 var(--space-11) var(--space-17);border-top:1px solid var(--paint-hub-tone-71);position:relative;}
.module-features li::before{content:'';position:absolute;left:1px;top:18px;width:4px;height:4px;background:var(--hub-accent);border-radius:50%;}
.module-connections{border-top:1px solid var(--paint-hub-tone-71);margin-top:var(--space-2);padding-top:var(--space-16);}
.module-connections>p{font-size:11px;color:var(--hub-muted);margin-bottom:var(--space-7);}
.module-related{display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-18);}
.module-related button{background:none;color:var(--hub-ink);padding:var(--space-6) 0;min-height:44px;font-size:12px;text-decoration:underline;text-underline-offset:5px;text-decoration-color:var(--paint-hub-tone-72);}
.module-related button:hover{color:var(--hub-accent);}
.feature-hub .module-detail .button{margin-top:var(--space-17);background:var(--hub-accent);color:var(--hub-bg);width:100%;justify-content:space-between;min-height:48px;transform:none;}
.feature-hub .module-detail .button:hover{background:var(--paint-hub-tone-73);}
.hub-diagram{grid-area:wheel;align-self:center;min-width:0;}
.feature-hub .module-hub{max-width:600px;aspect-ratio:1;}
.feature-hub .hub-lines{position:absolute;inset:0;stroke:none;}
.feature-hub .hub-lines circle{fill:none;stroke:var(--paint-hub-tone-74);stroke-dasharray:2 8;stroke-width:1;}
.feature-hub .hub-lines .hub-inner-ring{stroke:var(--paint-hub-tone-75);stroke-dasharray:none;}
.hub-link-base{fill:none;stroke:var(--paint-hub-tone-76);stroke-width:1.4;stroke-dasharray:2 7;}
.hub-link-trail{fill:none;stroke:var(--paint-night-accent);stroke-width:1.5;opacity:0;transition:opacity .35s ease;}
.hub-link-flow{fill:none;stroke:var(--paint-night-ink);stroke-linecap:round;stroke-width:2.5;stroke-dasharray:1 24;opacity:0;}
[data-hub-link][data-state=active] .hub-link-trail,[data-hub-link][data-state=related] .hub-link-trail{opacity:.7;}
[data-hub-link][data-state=active] .hub-link-flow,[data-hub-link][data-state=related] .hub-link-flow{opacity:.85;animation:hub-flow 2.5s linear infinite;}
[data-hub-link][data-state=active] .hub-link-flow{animation-direction:reverse;}
.feature-hub .hub-center{width:32%;height:auto;background:none;border:0;border-radius:0;box-shadow:none;pointer-events:none;}
.feature-hub .hub-center img{width:100%;height:auto;object-fit:contain;}
.feature-hub .hub-node{background:none;border:0;border-radius:0;width:110px;min-width:0;translate:-50% -28px;padding:0;color:var(--hub-muted);font:500 12px/1.4 var(--body);gap:var(--space-10);transition:color .2s ease;}
.feature-hub .hub-node:hover{transform:none;border:0;color:var(--hub-ink);}
.feature-hub .hub-node>.hub-node-icon{width:56px;height:56px;display:grid;place-items:center;border-radius:50%;border:1px solid var(--paint-hub-tone-77);background:var(--paint-hub-tone-78);color:var(--paint-hub-tone-79);transition:background .25s ease,border-color .25s ease,transform .4s cubic-bezier(.2,.8,.2,1);}
.feature-hub .hub-node>.hub-node-label{display:block;width:auto;height:auto;background:none;border:0;color:inherit;border-radius:0;font:inherit;}
.feature-hub .hub-node svg{width:21px;height:21px;}
.feature-hub .hub-node:hover>.hub-node-icon{transform:scale(1.07);border-color:var(--hub-accent);}
.feature-hub .hub-node[aria-pressed=true]{background:none;color:var(--hub-ink);}
.feature-hub .hub-node[aria-pressed=true]>.hub-node-icon{background:var(--hub-accent);border-color:var(--hub-accent);color:var(--hub-bg);transform:scale(1.1);outline:6px solid var(--paint-hub-tone-80);}
.feature-hub .hub-node[data-related=true]>.hub-node-icon{border-color:var(--paint-hub-tone-81);outline:4px solid var(--paint-hub-tone-82);}
.feature-hub .node-0{left:50%;top:15%;}.feature-hub .node-1{left:74.75%;top:25.25%;}.feature-hub .node-2{left:85%;top:50%;}.feature-hub .node-3{left:74.75%;top:74.75%;}.feature-hub .node-4{left:50%;top:85%;}.feature-hub .node-5{left:25.25%;top:74.75%;}.feature-hub .node-6{left:15%;top:50%;}.feature-hub .node-7{left:25.25%;top:25.25%;}


.hub-hint{font-size:12px;line-height:1.65;color:var(--hub-muted);margin-top:var(--space-4);max-width:44ch;}
.feature-hub[data-paused=true] .hub-link-flow{animation-play-state:paused;}
@keyframes hub-flow{to{stroke-dashoffset:-50;}}
@media(max-width:1050px){.feature-hub .hub-layout{gap:var(--space-24) var(--space-38);}.feature-hub{padding-block:var(--space-80);}.feature-hub .module-detail{padding:var(--space-20);}.feature-hub .hub-node{font-size:11px;width:100px;translate:-50% -24px;}.feature-hub .hub-node>.hub-node-icon{width:48px;height:48px;}}
@media(max-width:760px){.feature-hub{padding-block:var(--space-64);background:linear-gradient(180deg,var(--paint-hub-tone-83) 0%,var(--paint-hub-tone-70) 15%,var(--hub-bg) 40%);}.feature-hub .hub-layout{grid-template-columns:minmax(0,1fr);grid-template-areas:'intro' 'wheel' 'detail';gap:var(--space-24);}.feature-hub h2{font-size:clamp(36px,8.7vw,52px);}.hub-intro>p{font-size:14px;margin-top:var(--space-16);}.hub-diagram{width:100%;max-width:480px;justify-self:center;}.feature-hub .module-hub{max-width:none;}.feature-hub .hub-node{width:96px;font-size:11px;translate:-50% -22px;gap:var(--space-7);}.feature-hub .hub-node>.hub-node-icon{width:44px;height:44px;}.feature-hub .hub-node svg{width:18px;height:18px;}.feature-hub .module-detail{width:100%;max-width:480px;justify-self:center;}.module-features li{font-size:13px;}.hub-hint{font-size:11px;}.feature-hub .hub-center{width:31%;}}
@media(prefers-reduced-motion:reduce){.feature-hub .hub-link-flow{animation:none;}.feature-hub .hub-node>.hub-node-icon,.feature-hub .hub-link-trail{transition:none;}.feature-hub .hub-node:hover>.hub-node-icon{transform:none;}}

/* The top label sits outside the wheel, clear of the vertical connection. */
.feature-hub .hub-node.node-0{display:flex;flex-direction:column-reverse;align-items:center;translate:-50% calc(-100% + 28px);}
@media(max-width:1050px){.feature-hub .hub-node.node-0{translate:-50% calc(-100% + 24px);}}
@media(max-width:760px){.feature-hub .hub-node.node-0{translate:-50% calc(-100% + 22px);}}

/* Keep module selection reachable alongside the detailed feature lists. */
@media(min-width:761px){.feature-hub .hub-diagram{align-self:start;}}
@media(min-width:761px) and (min-height:820px){.feature-hub .hub-diagram{position:sticky;top:100px;}}

/* Karte: Titel, Import/Export mit Pfeilen, die drei Schritte als kleiner Weg (Zahlen untereinander,
   durch eine feine Linie verbunden, Stichworte als ruhiger Text), Hinweis und alle geprüften
   Funktionssätze zum Aufklappen. Der Hinweis unter dem Kreis ist eine Zeile. */
#funktionen .hub-hint{margin-top:var(--space-18);font-size:12px;}
#funktionen .hub-hint strong{color:var(--hub-ink);font-weight:600;}
#funktionen .module-detail{padding:var(--space-28);}
#funktionen .module-io{display:grid;gap:var(--space-6);list-style:none;margin:var(--space-14) 0 0;padding:0;}
#funktionen .module-io[hidden],#funktionen .module-note[hidden]{display:none;}
#funktionen .module-io li{display:flex;align-items:baseline;gap:var(--space-10);color:var(--hub-ink);font-size:13px;line-height:1.5;}
#funktionen .module-io li::before{content:"";flex:none;align-self:center;width:16px;height:16px;background:var(--hub-accent);-webkit-mask:var(--hub-io) center / contain no-repeat;mask:var(--hub-io) center / contain no-repeat;}
#funktionen .module-io li[data-kind=import]{--hub-io:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v11m-4.5-4.5L12 14l4.5-4.5'/%3E%3Cpath d='M4 15v5h16v-5'/%3E%3C/svg%3E");}
#funktionen .module-io li[data-kind=export]{--hub-io:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 14V3M7.5 7.5 12 3l4.5 4.5'/%3E%3Cpath d='M4 15v5h16v-5'/%3E%3C/svg%3E");}
#funktionen .module-io span{min-width:52px;color:var(--hub-accent);font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;}
#funktionen .module-groups{counter-reset:hub-step;margin-top:var(--space-24);padding-top:var(--space-20);border-top:1px solid var(--paint-hub-tone-71);}
#funktionen .module-group{position:relative;padding:0 0 var(--space-20) 40px;}
#funktionen .module-group:last-child{padding-bottom:0;}
#funktionen .module-group:not(:last-child)::before{content:"";position:absolute;left:11px;top:24px;bottom:3px;width:1px;background:linear-gradient(var(--hub-accent),var(--paint-hub-tone-71));opacity:.7;}
#funktionen .module-group h4{counter-increment:hub-step;margin:0 0 var(--space-6);color:var(--hub-muted);font:600 11px/1.4 var(--body);letter-spacing:.14em;text-transform:uppercase;}
#funktionen .module-group h4::before{content:counter(hub-step);position:absolute;left:0;top:-4px;display:grid;place-items:center;width:22px;height:22px;border:1px solid var(--hub-accent);border-radius:50%;background:var(--hub-card);color:var(--hub-accent);font-size:11px;letter-spacing:0;}
#funktionen .module-group ul{list-style:none;margin:0;padding:0;}
#funktionen .module-group li{display:inline;color:var(--hub-ink);font-size:14px;line-height:1.7;}
#funktionen .module-group li:not(:last-child)::after{content:"\00a0\00b7\0020";color:var(--hub-accent);font-weight:700;}

/* Lichterkette um den Kreis: der äußere Ring als Draht, daran warme Lämpchen wie im Gästebuch.
   Am gewählten Bereich leuchten sie hell und funkeln, an verwandten Bereichen halb, sonst gedämpft. */
#funktionen .hub-lines .hub-wire{stroke:#c4a0ad;stroke-opacity:.5;stroke-width:1.2;stroke-dasharray:none;}
#funktionen .hub-lines .hub-glass{fill:#ffe7c4;stroke:#e6b27a;stroke-width:1;stroke-dasharray:none;}
#funktionen .hub-lines .hub-halo{fill:url(#hub-glow);stroke:none;stroke-dasharray:none;}
#funktionen .hub-lines .hub-cap{stroke:#a8838f;stroke-width:2.5;}
#funktionen [data-hub-light] .hub-bulb{opacity:.45;transition:opacity .45s ease;}
#funktionen [data-hub-light][data-state=related] .hub-bulb{opacity:.8;}
#funktionen [data-hub-light][data-state=active] .hub-bulb{opacity:1;}
#funktionen [data-hub-light] .hub-halo{opacity:.3;transition:opacity .45s ease;}
#funktionen [data-hub-light][data-state=related] .hub-halo{opacity:.7;}
#funktionen [data-hub-light][data-state=active] .hub-halo{opacity:1;animation:hub-twinkle 2.8s ease-in-out infinite;}
#funktionen [data-hub-light] .hub-bulb:nth-child(2) .hub-halo{animation-delay:-.7s;}
#funktionen [data-hub-light] .hub-bulb:nth-child(3) .hub-halo{animation-delay:-1.4s;}
#funktionen [data-hub-light] .hub-bulb:nth-child(4) .hub-halo{animation-delay:-2.1s;}
#funktionen[data-paused=true] .hub-halo{animation-play-state:paused;}
@keyframes hub-twinkle{50%{opacity:.5;}}
#funktionen .module-note{display:flex;align-items:flex-start;gap:var(--space-8);margin:var(--space-16) 0 0;color:var(--hub-muted);font-size:12px;line-height:1.6;}
#funktionen .module-note::before{content:"i";display:grid;place-items:center;flex:none;width:18px;height:18px;border:1px solid currentColor;border-radius:50%;font:600 11px/1 var(--body);}
#funktionen .module-more{margin-top:var(--space-20);border-top:1px solid var(--paint-hub-tone-71);}
#funktionen .module-more summary{display:flex;align-items:center;justify-content:space-between;gap:var(--space-12);min-height:48px;padding:var(--space-8) 0;list-style:none;color:var(--hub-ink);font-size:13px;font-weight:600;cursor:pointer;}
#funktionen .module-more summary::-webkit-details-marker{display:none;}
#funktionen .module-more summary svg{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:rotate .2s ease;}
#funktionen .module-more[open] summary svg{rotate:180deg;}
#funktionen .module-more .module-features{margin-top:0;}
@media(max-width:760px){
 #funktionen .hub-diagram{max-width:340px;}
 #funktionen .hub-hint{text-align:center;}
 #funktionen .module-detail{padding:var(--space-20);}
 #funktionen .module-group{padding-left:36px;}
}
@media(prefers-reduced-motion:reduce){#funktionen .module-more summary svg,#funktionen [data-hub-light] :is(.hub-bulb,.hub-halo){transition:none;}#funktionen [data-hub-light] .hub-halo{animation:none;}}

/* Die Lichter gehen beim ersten Hineinscrollen der Reihe nach an, im Uhrzeigersinn ab oben. */
#funktionen[data-lights=off] .hub-lamp{opacity:.12;}
#funktionen[data-lights=on] .hub-lamp{animation:hub-lamp-on .7s ease-out both;}
@keyframes hub-lamp-on{from{opacity:.12;}55%{opacity:1;}75%{opacity:.7;}to{opacity:1;}}

/* Blättern in der Karte: vorheriger und nächster Bereich in der Reihenfolge des Kreises. */
#funktionen .module-pager{display:flex;justify-content:space-between;gap:var(--space-12);margin:calc(-1 * var(--space-12)) calc(-1 * var(--space-10)) var(--space-8);}
#funktionen .module-pager button{display:inline-flex;align-items:center;gap:var(--space-6);min-height:44px;padding:var(--space-6) var(--space-10);border:0;border-radius:999px;background:none;color:var(--hub-muted);font:600 12px/1.3 var(--body);cursor:pointer;transition:background-color .2s ease,color .2s ease;}
#funktionen .module-pager button:hover{background:var(--paint-hub-tone-78);color:var(--hub-ink);}
#funktionen .module-pager svg{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
@media(prefers-reduced-motion:reduce){#funktionen .hub-lamp{animation:none!important;opacity:1!important;}#funktionen .module-pager button{transition:none;}}

/* Überschrift wie auf einer Einladungskarte: „Das steckt in eurem“ als kleine, gesperrte Zeile in Rosé, darunter
   „Hochzeitsplaner.“ groß in Cormorant mit warmem Verlauf von Lampenlicht zu Rosé; der Schein darum geht zusammen mit
   den Lämpchen an. Am Wortende wächst ein kleiner Kirschblütenzweig wie auf der Gästeeinladung (nur Dekoration,
   als SVG in --hub-sprig). Geladen ist nur die aufrechte Cormorant, deshalb keine Kursive. */
#funktionen .hub-title-lead{display:block;margin-bottom:.9em;color:var(--hub-accent);font:600 clamp(13px,.25vw + 11px,15px)/1.4 var(--body);letter-spacing:.24em;text-transform:uppercase;}
#funktionen .hub-title-word{position:relative;display:inline-block;font-family:var(--display);font-size:clamp(42px,5.8vw,78px);font-weight:500;line-height:1;letter-spacing:-.01em;color:#ffe3cf;filter:drop-shadow(0 0 .32em rgba(255,201,138,.42));transition:filter 1.4s ease .6s;}
#funktionen .hub-title-word::after{content:"";position:absolute;left:calc(100% + .02em);bottom:.14em;width:.9em;aspect-ratio:90/110;background:var(--hub-sprig) center / contain no-repeat;pointer-events:none;}
#funktionen .hub-title-word{--hub-sprig:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 90 110' fill='none' stroke='%23f3d4df' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 107C10 94 12 82 20 72' stroke-width='2.4'/%3E%3Cpath d='M20 72C30 60 44 56 52 44C59 34 60 24 68 14' stroke-width='1.6'/%3E%3Cpath d='M52 44C60 44 68 48 74 54M36 60C30 52 28 44 30 36M20 72C14 70 10 66 8 60' stroke-width='1.1'/%3E%3Cpath d='M40 58c8-6 17-6 22-2-7 6-16 7-22 2z' fill='%236c3c52' stroke-width='1'/%3E%3Cellipse cx='8' cy='57' rx='3' ry='4.6' transform='rotate(-20 8 57)' fill='%23f2aec5' stroke='%23fbe3ea' stroke-width='1'/%3E%3Cellipse cx='70' cy='11' rx='3' ry='4.6' transform='rotate(35 70 11)' fill='%23f2aec5' stroke='%23fbe3ea' stroke-width='1'/%3E%3Cg transform='translate(30 31) rotate(8) scale(1.55)' fill='%23f2aec5' stroke='%23fbe3ea' stroke-width='0.71'%3E%3Cpath d='M0 0C-5-2.5-6-8-2.5-10L0-8.6L2.5-10C6-8 5-2.5 0 0Z' transform='rotate(0)'/%3E%3Cpath d='M0 0C-5-2.5-6-8-2.5-10L0-8.6L2.5-10C6-8 5-2.5 0 0Z' transform='rotate(72)'/%3E%3Cpath d='M0 0C-5-2.5-6-8-2.5-10L0-8.6L2.5-10C6-8 5-2.5 0 0Z' transform='rotate(144)'/%3E%3Cpath d='M0 0C-5-2.5-6-8-2.5-10L0-8.6L2.5-10C6-8 5-2.5 0 0Z' transform='rotate(216)'/%3E%3Cpath d='M0 0C-5-2.5-6-8-2.5-10L0-8.6L2.5-10C6-8 5-2.5 0 0Z' transform='rotate(288)'/%3E%3Ccircle r='2.2' fill='%23ffe2bd' stroke='none'/%3E%3C/g%3E%3Cg transform='translate(76 57) rotate(-20) scale(1.1)' fill='%23f2aec5' stroke='%23fbe3ea' stroke-width='1.00'%3E%3Cpath d='M0 0C-5-2.5-6-8-2.5-10L0-8.6L2.5-10C6-8 5-2.5 0 0Z' transform='rotate(0)'/%3E%3Cpath d='M0 0C-5-2.5-6-8-2.5-10L0-8.6L2.5-10C6-8 5-2.5 0 0Z' transform='rotate(72)'/%3E%3Cpath d='M0 0C-5-2.5-6-8-2.5-10L0-8.6L2.5-10C6-8 5-2.5 0 0Z' transform='rotate(144)'/%3E%3Cpath d='M0 0C-5-2.5-6-8-2.5-10L0-8.6L2.5-10C6-8 5-2.5 0 0Z' transform='rotate(216)'/%3E%3Cpath d='M0 0C-5-2.5-6-8-2.5-10L0-8.6L2.5-10C6-8 5-2.5 0 0Z' transform='rotate(288)'/%3E%3Ccircle r='2.2' fill='%23ffe2bd' stroke='none'/%3E%3C/g%3E%3Cg transform='translate(58 24) rotate(40) scale(1.2)' fill='%23f2aec5' stroke='%23fbe3ea' stroke-width='0.92'%3E%3Cpath d='M0 0C-5-2.5-6-8-2.5-10L0-8.6L2.5-10C6-8 5-2.5 0 0Z' transform='rotate(0)'/%3E%3Cpath d='M0 0C-5-2.5-6-8-2.5-10L0-8.6L2.5-10C6-8 5-2.5 0 0Z' transform='rotate(72)'/%3E%3Cpath d='M0 0C-5-2.5-6-8-2.5-10L0-8.6L2.5-10C6-8 5-2.5 0 0Z' transform='rotate(144)'/%3E%3Cpath d='M0 0C-5-2.5-6-8-2.5-10L0-8.6L2.5-10C6-8 5-2.5 0 0Z' transform='rotate(216)'/%3E%3Cpath d='M0 0C-5-2.5-6-8-2.5-10L0-8.6L2.5-10C6-8 5-2.5 0 0Z' transform='rotate(288)'/%3E%3Ccircle r='2.2' fill='%23ffe2bd' stroke='none'/%3E%3C/g%3E%3C/svg%3E");}
@media(max-width:760px){#funktionen .hub-title-word{font-size:clamp(38px,12vw,56px);}}
@supports ((-webkit-background-clip:text) or (background-clip:text)){#funktionen .hub-title-word{background:linear-gradient(100deg,#ffe7c4 10%,#f8cada 55%,#f2aec5 95%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}#funktionen .hub-title-word::selection{-webkit-text-fill-color:var(--hub-bg);}}
#funktionen[data-lights=off] .hub-title-word{filter:drop-shadow(0 0 0 rgba(255,201,138,0));}
@media(forced-colors:active){#funktionen .hub-title-word{background:none;-webkit-text-fill-color:currentColor;filter:none;}}

/* Weiche Lichtpunkte wie eine Lichterkette in der Ferne: ein Bogen über dem Abschnitt, dazu drei große, blasse Punkte
   am Rand. Sie gehen beim ersten Hineinscrollen von links nach rechts an und bleiben dann ruhig stehen. */
#funktionen{position:relative;isolation:isolate;}
#funktionen .hub-bokeh{--band:92px;--k:1;position:absolute;inset:0;z-index:-1;pointer-events:none;}
#funktionen .hub-bokeh span{position:absolute;left:var(--x);top:calc(var(--y) * var(--band));width:calc(var(--s) * var(--k));aspect-ratio:1;translate:-50% -50%;border-radius:50%;background:radial-gradient(circle closest-side,rgba(255,226,186,.95) 0 45%,rgba(255,211,150,.45) 75%,rgba(255,201,138,0));opacity:var(--o);}
#funktionen .hub-bokeh span:nth-child(1){--x:3%;--y:.38;--s:22px;--o:.42;--d:.25s;}
#funktionen .hub-bokeh span:nth-child(2){--x:12%;--y:.51;--s:30px;--o:.5;--d:.37s;}
#funktionen .hub-bokeh span:nth-child(3){--x:20%;--y:.57;--s:15px;--o:.32;--d:.48s;}
#funktionen .hub-bokeh span:nth-child(4){--x:30%;--y:.7;--s:26px;--o:.45;--d:.62s;}
#funktionen .hub-bokeh span:nth-child(5){--x:39%;--y:.74;--s:34px;--o:.55;--d:.75s;}
#funktionen .hub-bokeh span:nth-child(6){--x:49%;--y:.8;--s:17px;--o:.3;--d:.89s;}
#funktionen .hub-bokeh span:nth-child(7){--x:58%;--y:.75;--s:26px;--o:.42;--d:1.01s;}
#funktionen .hub-bokeh span:nth-child(8){--x:67%;--y:.71;--s:31px;--o:.5;--d:1.14s;}
#funktionen .hub-bokeh span:nth-child(9){--x:77%;--y:.67;--s:15px;--o:.3;--d:1.28s;}
#funktionen .hub-bokeh span:nth-child(10){--x:87%;--y:.52;--s:28px;--o:.46;--d:1.42s;}
#funktionen .hub-bokeh span:nth-child(11){--x:96%;--y:.36;--s:20px;--o:.36;--d:1.54s;}
#funktionen .hub-bokeh span:nth-child(n+12){--band:100%;background:radial-gradient(circle closest-side,rgba(255,214,160,.75),rgba(255,201,138,.25) 55%,rgba(255,201,138,0));}
#funktionen .hub-bokeh span:nth-child(12){--x:0%;--y:.47;--s:110px;--o:.16;--d:1.3s;}
#funktionen .hub-bokeh span:nth-child(13){--x:100%;--y:.3;--s:140px;--o:.14;--d:1.6s;}
#funktionen .hub-bokeh span:nth-child(14){--x:100%;--y:.86;--s:100px;--o:.14;--d:1.9s;}
#funktionen[data-lights=off] .hub-bokeh span{opacity:0;}
#funktionen[data-lights=on] .hub-bokeh span{animation:hub-bokeh-on 1.6s ease-out var(--d) both;}
@keyframes hub-bokeh-on{from{opacity:0;}}
@media(max-width:760px){#funktionen .hub-bokeh{--band:58px;--k:.72;}#funktionen .hub-bokeh span:nth-child(n+12){display:none;}}

/* Details: Häkchen statt Punkt, das Stichwort hell und kräftig, der Satz ruhiger, feinere Linien und mehr Luft.
   Zwei Spalten wären in der Karte (höchstens rund 450 px Textbreite) zu schmal für die Sätze, daher bleibt es eine Spalte. */
#funktionen .module-features{--hub-check:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E");}
#funktionen .module-features li{padding:var(--space-14) 0 var(--space-14) 28px;border-top-color:var(--paint-hub-tone-74);color:var(--hub-muted);font-size:13px;line-height:1.65;}
#funktionen .module-features li::before{left:0;top:calc(var(--space-14) + .825em - 8px);width:16px;height:16px;border-radius:0;background:var(--hub-accent);-webkit-mask:var(--hub-check) center / contain no-repeat;mask:var(--hub-check) center / contain no-repeat;}
#funktionen .module-features strong{color:var(--hub-ink);font-weight:650;}
@media(max-width:760px){#funktionen .module-features li{font-size:14px;}}
@media(prefers-reduced-motion:reduce){#funktionen .hub-bokeh span{animation:none!important;}#funktionen .hub-title-word{transition:none;}}
