:root{
  --fx-bedien:var(--navy,#002B49); --fx-akzent:var(--gold,#F4A900);
  --fx-grund:#F6F8FB; --fx-karte:#FFFFFF; --fx-tief:#050F24; --fx-tinte:#0B1B2E; --fx-leise:#5A6B7F;
  --fx-linie:rgba(11,27,46,.1); --fx-r:28px; --fx-r-k:18px;
  --fx-aussen:clamp(16px,5.2vw,80px); --fx-abstand:clamp(80px,10vw,152px);
  --fx-titel:'Barlow Condensed','HT Barlow Condensed','Arial Narrow',system-ui,sans-serif;
  --fx-satz:'Barlow','HT Barlow','Segoe UI',system-ui,sans-serif;
  --fx-weich:cubic-bezier(.16,1,.3,1);
  --fx-weg:64px; --fx-start:.9; --fx-dauer-ein:1000ms;
}
:is(#fx-v,html) .fx-s{ position:relative; padding-block:var(--fx-abstand); background:var(--fx-grund); color:var(--fx-tinte); font:400 17px/1.55 var(--fx-satz); overflow:clip }
:is(#fx-v,html) .fx-s-entlastung, :is(#fx-v,html) .fx-s-abwicklung, :is(#fx-v,html) .fx-s-fragen{ background:var(--fx-karte) }
:is(#fx-v,html) .fx-s :is(h2, :is(#fx-v,html) h3){ color:inherit!important }
:is(#fx-v,html) .fx-breite{ max-inline-size:1400px; margin-inline:auto; padding-inline:var(--fx-aussen) }
:is(#fx-v,html) .fx-dunkel{ background:var(--fx-tief)!important; color:#E9EEF5 }
:is(#fx-v,html) .fx-dunkel :is(h2, :is(#fx-v,html) h3){ color:#FFFFFF!important }

:is(#fx-v,html) .fx-s :is(button, :is(#fx-v,html) .fx-knopf) span{ color:inherit!important; font:inherit!important }
:is(#fx-v,html) .fx-s .fx-knopf{ min-block-size:56px!important; padding:0 28px!important; font:800 17px/1 var(--fx-satz)!important; border-radius:999px!important }
:is(#fx-v,html) .fx-dunkel::before{ content:""; position:absolute; inset:-20% -10% auto auto; inline-size:70vw; block-size:70vw; border-radius:50%;
  background:none; pointer-events:none }
:is(#fx-v,html) .fx-dunkel::after{ content:""; position:absolute; inset:auto auto -25% -15%; inline-size:60vw; block-size:60vw; border-radius:50%;
  background:none; pointer-events:none }
:is(#fx-v,html) .fx-dunkel .fx-breite{ position:relative; z-index:1 }
:is(#fx-v,html) .fx-sr{ position:absolute; inline-size:1px; block-size:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap }


:is(#fx-v,html) .fx-kopf{ max-inline-size:920px; margin-block-end:clamp(40px,5vw,72px) }
:is(#fx-v,html) .fx-auge{ margin:0 0 14px; font:800 12px/1 var(--fx-satz); letter-spacing:.16em; text-transform:uppercase; color:var(--fx-leise) }
:is(#fx-v,html) .fx-dunkel .fx-auge{ color:rgba(233,238,245,.62) }
:is(#fx-v,html) .fx-h2{ margin:0; font:900 clamp(40px,5.4vw,84px)/.96 var(--fx-titel); letter-spacing:-.01em; text-wrap:balance }
:is(#fx-v,html) .fx-riesig{ font-size:clamp(52px,8.4vw,136px) }
:is(#fx-v,html) .fx-hervor{ color:var(--fx-tinte); background:none;  background-clip:border-box }
:is(#fx-v,html) .fx-lead{ margin:22px 0 0; font:500 clamp(19px,1.7vw,24px)/1.4 var(--fx-satz); color:var(--fx-leise); max-inline-size:62ch; text-wrap:pretty }
:is(#fx-v,html) .fx-dunkel .fx-lead{ color:rgba(233,238,245,.74) }
:is(#fx-v,html) .fx-h3{ margin:0 0 20px; font:800 clamp(22px,2vw,28px)/1.15 var(--fx-satz) }
:is(#fx-v,html) .fx-klein{ margin:16px 0 0; font-size:14px; color:var(--fx-leise) }
:is(#fx-v,html) .fx-i{ flex:none }


:is(#fx-v,html) .fx-knopf{ display:inline-flex; align-items:center; gap:10px; min-block-size:56px; padding:0 28px; border-radius:999px; font:800 17px/1 var(--fx-satz);
  text-decoration:none; transition:transform .2s var(--fx-weich), box-shadow .2s }
:is(#fx-v,html) .fx-knopf-primaer{ background:var(--fx-akzent); color:var(--fx-bedien); box-shadow:0 10px 30px -10px rgba(244,169,0,.7) }
:is(#fx-v,html) .fx-knopf:hover{ transform:translateY(-2px) } :is(#fx-v,html) .fx-knopf:hover .fx-i{ transform:translateX(4px) } :is(#fx-v,html) .fx-knopf .fx-i{ transition:transform .2s }
:is(#fx-v,html) .fx-s :focus-visible{ outline:3px solid var(--fx-akzent); outline-offset:3px }


:is(#fx-v,html) .fx-lb{ position:relative; display:flex; align-items:center; min-inline-size:0 }
:is(#fx-v,html) .fx-lb-spur{ display:flex; inline-size:max-content; animation:fx-lauf var(--fx-dauer,40s) linear infinite }
:is(#fx-v,html) .fx-lb-reihe{ display:flex; align-items:center; gap:clamp(28px,4vw,64px); margin:0; padding:0 clamp(14px,2vw,32px) 0 0; list-style:none }
:is(#fx-v,html) .fx-lb:hover .fx-lb-spur, :is(#fx-v,html) .fx-lb.fx-halt .fx-lb-spur, :is(#fx-v,html) .fx-lb:focus-within .fx-lb-spur{ animation-play-state:paused }
:is(#fx-v,html) .fx-lb-el{ flex:none; display:grid; place-items:center; block-size:64px; min-inline-size:120px; padding:0 20px; border-radius:16px; background:#fff;
  box-shadow:0 1px 0 rgba(11,27,46,.06), 0 8px 24px -14px rgba(11,27,46,.25); transition:transform .3s var(--fx-weich) }
:is(#fx-v,html) .fx-lb-el:hover{ transform:translateY(-4px) scale(1.04) }
:is(#fx-v,html) .fx-lb-dunkel{ background:#101820 }
:is(#fx-v,html) .fx-lb-bild{ max-block-size:40px; max-inline-size:150px; inline-size:auto; block-size:auto; object-fit:contain }
:is(#fx-v,html) .fx-lb-wort{ font:800 16px/1 var(--fx-satz); letter-spacing:.02em; color:var(--fx-tinte); white-space:nowrap }
:is(#fx-v,html) .fx-lb-halt{ position:absolute; inset-inline-end:max(8px, calc(var(--fx-aussen) - 4px)); inset-block-start:50%; translate:0 -50%; z-index:2; display:grid; place-items:center;
  inline-size:44px; block-size:44px; border:0; border-radius:50%; background:var(--fx-bedien); color:#fff; cursor:pointer; box-shadow:0 6px 18px -6px rgba(0,0,0,.4) }
:is(#fx-v,html) .fx-lb-halt .fx-i-spiel, :is(#fx-v,html) .fx-lb.fx-halt .fx-lb-halt .fx-i-pause{ display:none } :is(#fx-v,html) .fx-lb.fx-halt .fx-lb-halt .fx-i-spiel{ display:block }
@keyframes fx-lauf{ to{ transform:translateX(-50%) } }


:is(#fx-v,html) .fx-s-vertrauen{ padding-block:clamp(48px,6vw,88px) }
:is(#fx-v,html) .fx-vt{ display:grid; gap:clamp(28px,3vw,44px) }
:is(#fx-v,html) .fx-zahlen{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(12px,2vw,28px); margin:0; padding:0; list-style:none }
:is(#fx-v,html) .fx-zahl{ padding:clamp(20px,2.4vw,32px); border-radius:var(--fx-r); background:var(--fx-karte); box-shadow:0 1px 0 var(--fx-linie), 0 30px 60px -40px rgba(11,27,46,.35) }
:is(#fx-v,html) .fx-zahl b{ display:block; font:900 clamp(56px,7vw,112px)/.9 var(--fx-titel); color:transparent;
  background:none;  background-clip:border-box }
:is(#fx-v,html) .fx-zahl:nth-child(2) b{ background:none }
:is(#fx-v,html) .fx-zahl:nth-child(3) b{ background:none }
:is(#fx-v,html) .fx-zahl span{ display:block; margin-top:10px; font:600 clamp(15px,1.3vw,18px)/1.3 var(--fx-satz); color:var(--fx-leise) }
:is(#fx-v,html) .fx-netz{ display:grid; grid-template-columns:auto 1fr; align-items:center; gap:clamp(16px,2.4vw,36px);
  margin-inline-end:calc(-1 * (max(0px, (100vw - 1400px) / 2) + var(--fx-aussen))) }
:is(#fx-v,html) .fx-netz-traeger{ display:grid; justify-items:start; padding-inline-end:clamp(16px,2.4vw,36px); border-inline-end:2px solid var(--fx-linie) }
:is(#fx-v,html) .fx-netz-traeger b{ font:900 clamp(30px,3vw,44px)/.9 var(--fx-titel); letter-spacing:.06em; color:var(--fx-tinte) }
:is(#fx-v,html) .fx-netz-traeger span{ font:800 12px/1 var(--fx-satz); letter-spacing:.2em; text-transform:uppercase; color:var(--fx-leise); margin-top:6px }
:is(#fx-v,html) .fx-lb-rand{ overflow:hidden; padding-block:14px; -webkit-mask-image:linear-gradient(90deg,#000 88%,transparent); mask-image:linear-gradient(90deg,#000 88%,transparent) }
:is(#fx-v,html) .fx-lb-rand .fx-lb-halt{ inset-inline-end:max(8px, var(--fx-aussen)) }


:is(#fx-v,html) .fx-vs{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,1.8vw,24px); margin:0; padding:0; list-style:none }
:is(#fx-v,html) .fx-vs-k a{ position:relative; display:flex; flex-direction:column; block-size:100%; border-radius:var(--fx-r); overflow:hidden; background:var(--fx-karte)!important; padding:0!important; color:inherit; text-decoration:none;
  box-shadow:0 1px 0 var(--fx-linie), 0 40px 80px -50px rgba(11,27,46,.45); transition:transform .45s var(--fx-weich), box-shadow .45s }
:is(#fx-v,html) .fx-vs-k a::after{ content:""; position:absolute; inset:0; border-radius:inherit; padding:2px; background:var(--fx-linie);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; opacity:0; transition:opacity .45s; pointer-events:none }
:is(#fx-v,html) .fx-vs-k a:hover{ transform:translateY(-10px); box-shadow:0 1px 0 var(--fx-linie), 0 60px 90px -40px rgba(11,27,46,.5) }
:is(#fx-v,html) .fx-vs-k a:hover::after{ opacity:1 }
:is(#fx-v,html) .fx-vs-bild{ display:block; aspect-ratio:4/3; overflow:hidden }
:is(#fx-v,html) .fx-vs-bild img{ inline-size:100%; block-size:100%; object-fit:cover; transform:scale(1.02); transition:transform 1.2s var(--fx-weich) }
:is(#fx-v,html) .fx-vs-k a:hover .fx-vs-bild img{ transform:scale(1.12) }
:is(#fx-v,html) .fx-vs-text{ display:grid; gap:8px; padding:clamp(20px,2.2vw,32px) clamp(20px,2.2vw,32px) 8px }
:is(#fx-v,html) .fx-vs-zahl{ font:900 clamp(64px,6.4vw,104px)/.85 var(--fx-titel); color:var(--fx-farbe) }
:is(#fx-v,html) .fx-vs-zahl small{ font-size:.5em; margin-inline-start:4px }
:is(#fx-v,html) .fx-vs-text strong{ font:800 clamp(19px,1.6vw,23px)/1.2 var(--fx-satz) }
:is(#fx-v,html) .fx-vs-s{ color:var(--fx-leise) }
:is(#fx-v,html) .fx-vs-k a > .fx-i{ position:static; translate:none; align-self:flex-end; margin:auto 24px 24px 0; inline-size:44px; block-size:44px; padding:12px; box-sizing:border-box; border-radius:50%; background:var(--fx-bedien); color:#fff;
  transition:transform .35s var(--fx-weich) }
:is(#fx-v,html) .fx-vs-k a:hover > .fx-i{ transform:translateX(6px) rotate(-45deg) }


:is(#fx-v,html) .fx-reiter{ margin-top:clamp(56px,7vw,104px) }
:is(#fx-v,html) .fx-reiter-kopf{ display:flex; gap:8px; overflow-x:auto; scrollbar-width:none; padding:6px; border-radius:999px; background:rgba(11,27,46,.06); inline-size:max-content; max-inline-size:100%; box-sizing:border-box }
:is(#fx-v,html) .fx-reiter-kopf::-webkit-scrollbar{ display:none }
:is(#fx-v,html) .fx-reiter-kopf button{ position:relative; flex:none; min-block-size:52px; padding:0 22px; border:0; border-radius:999px; background:transparent; color:var(--fx-tinte);
  font:700 16px/1 var(--fx-satz); cursor:pointer; overflow:hidden; transition:background .3s, color .3s }
:is(#fx-v,html) .fx-reiter-kopf button[aria-selected="true"], :is(#fx-v,html) .fx-reiter-kopf button[aria-selected="true"] span{ background:var(--fx-bedien); color:#fff!important }
:is(#fx-v,html) .fx-takt{ position:absolute; inset:auto 18px 7px; block-size:3px; border-radius:3px; background:var(--fx-akzent); transform:scaleX(0); transform-origin:left }
:is(#fx-v,html) .fx-reiter.fx-laeuft button[aria-selected="true"] .fx-takt{ animation:fx-takt var(--fx-takt,7s) linear forwards }
:is(#fx-v,html) .fx-reiter.fx-laeuft:hover button[aria-selected="true"] .fx-takt, :is(#fx-v,html) .fx-reiter.fx-laeuft:focus-within button[aria-selected="true"] .fx-takt{ animation-play-state:paused }
@keyframes fx-takt{ to{ transform:scaleX(1) } }
:is(#fx-v,html) .fx-punkte{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(12px,1.6vw,20px); margin:28px 0 0; padding:0; list-style:none }
:is(#fx-v,html) .fx-punkte li{ padding:26px; border-radius:var(--fx-r-k); background:var(--fx-karte); box-shadow:0 1px 0 var(--fx-linie), 0 24px 48px -36px rgba(11,27,46,.4); animation:fx-herein .7s var(--fx-weich) both; animation-delay:calc(var(--fx-i) * 90ms) }
:is(#fx-v,html) .fx-punkte em{ display:block; font:600 13px/1.35 var(--fx-satz); font-style:normal; color:#B0413E; text-decoration:line-through; text-decoration-color:rgba(176,65,62,.5) }
:is(#fx-v,html) .fx-punkte b{ display:block; margin-top:14px; font:800 19px/1.25 var(--fx-satz) }
:is(#fx-v,html) .fx-punkte p{ margin:8px 0 0; color:var(--fx-leise); font-size:15.5px }
@keyframes fx-herein{ from{ opacity:0; transform:translateY(28px) scale(.97) } }


:is(#fx-v,html) .fx-kopf-gross{ max-inline-size:1200px }
:is(#fx-v,html) .fx-nullen{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(12px,1.8vw,24px); margin:0 0 clamp(40px,5vw,72px); padding:0; list-style:none }
:is(#fx-v,html) .fx-nullen li{ display:flex; align-items:center; gap:18px; padding:24px 26px; border-radius:var(--fx-r-k); background:var(--fx-grund); color:var(--fx-tinte) }
:is(#fx-v,html) .fx-nullen li:nth-child(2){ background:var(--fx-grund); color:var(--fx-tinte) }
:is(#fx-v,html) .fx-nullen li:nth-child(3){ background:var(--fx-grund); color:var(--fx-tinte) }
:is(#fx-v,html) .fx-nullen b{ font:800 clamp(18px,1.6vw,22px)/1.2 var(--fx-satz) }
:is(#fx-v,html) .fx-zeichen{ flex:none; inline-size:56px; block-size:56px }
:is(#fx-v,html) .fx-zug{ stroke-dasharray:160; stroke-dashoffset:0 }
:is(#fx-v,html).fx-an [data-fx="auftauchen"]:not(.fx-da) .fx-zug{ stroke-dashoffset:160 }
:is(#fx-v,html) .fx-da .fx-zug{ transition:stroke-dashoffset 1s var(--fx-weich) .25s } :is(#fx-v,html) .fx-da .fx-zug-2{ transition-delay:.75s }
:is(#fx-v,html) .fx-zwei{ display:grid; grid-template-columns:1.25fr 1fr; gap:clamp(20px,3vw,48px); align-items:stretch }
:is(#fx-v,html) .fx-zwei-oben{ align-items:start }
:is(#fx-v,html) .fx-rechner{ padding:clamp(24px,3vw,44px); border-radius:var(--fx-r); background:var(--fx-karte); box-shadow:0 1px 0 var(--fx-linie), 0 40px 80px -50px rgba(11,27,46,.45) }
:is(#fx-v,html) .fx-regler{ display:grid; gap:10px; margin-bottom:22px; font-weight:600 }
:is(#fx-v,html) .fx-regler > span{ display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap }
:is(#fx-v,html) .fx-regler output{ font:900 22px/1 var(--fx-titel); color:var(--fx-tinte) }
:is(#fx-v,html) .fx-regler input{ inline-size:100%; block-size:44px; accent-color:var(--fx-bedien); cursor:pointer }
:is(#fx-v,html) .fx-rechner-erg{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:8px }
:is(#fx-v,html) .fx-rechner-erg > div{ position:relative; display:grid; gap:6px; padding:20px; border-radius:var(--fx-r-k); background:#F3F5F8; overflow:hidden }
:is(#fx-v,html) .fx-rechner-erg span{ font:700 13px/1.2 var(--fx-satz); text-transform:uppercase; letter-spacing:.08em; color:var(--fx-leise) }
:is(#fx-v,html) .fx-rechner-erg b{ font:900 clamp(30px,3vw,44px)/1 var(--fx-titel) }
:is(#fx-v,html) .fx-erg-heute b{ color:#B0413E } :is(#fx-v,html) .fx-erg-wir b{ color:#0B7A53 }
:is(#fx-v,html) .fx-balken{ display:block; block-size:8px; border-radius:8px; background:var(--fx-bedien); transform-origin:left; transform:scaleX(var(--fx-anteil,.6)); transition:transform .5s var(--fx-weich) }
:is(#fx-v,html) .fx-balken-null{ background:#18B26B; transform:scaleX(.02) }
:is(#fx-v,html) .fx-beweis{ display:flex; flex-direction:column; justify-content:center; padding:clamp(28px,3.4vw,52px); border-radius:var(--fx-r); color:#fff;
  background:var(--fx-bedien) }
:is(#fx-v,html) .fx-beweis .fx-auge{ color:rgba(255,255,255,.7) }
:is(#fx-v,html) .fx-beweis b{ font:900 clamp(64px,7.4vw,120px)/.9 var(--fx-titel); letter-spacing:-.01em }
:is(#fx-v,html) .fx-beweis p{ margin:14px 0 0; font:600 clamp(17px,1.5vw,21px)/1.4 var(--fx-satz) }
:is(#fx-v,html) .fx-beweis .fx-offen{ margin-top:22px; padding-top:18px; border-top:1px solid rgba(255,255,255,.2); color:rgba(255,255,255,.72); font-weight:400 }


:is(#fx-v,html) .fx-story{ display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr); gap:clamp(24px,4vw,72px) }
:is(#fx-v,html) .fx-story-schritte{ margin:0; padding:0; list-style:none }
:is(#fx-v,html) .fx-story-schritt{ min-block-size:72vh; display:flex; flex-direction:column; justify-content:center; opacity:.28; transition:opacity .5s }
:is(#fx-v,html) .fx-story-schritt.fx-aktiv{ opacity:1 }
:is(#fx-v,html) .fx-story-schritt em{ font:900 20px/1 var(--fx-titel); font-style:normal; color:var(--fx-akzent); letter-spacing:.1em }
:is(#fx-v,html) .fx-story-schritt h3{ margin:12px 0 0; font:900 clamp(32px,3.4vw,52px)/1 var(--fx-titel) }
:is(#fx-v,html) .fx-story-schritt p{ margin:16px 0 0; font-size:clamp(17px,1.4vw,20px); color:rgba(233,238,245,.74); max-inline-size:44ch }
:is(#fx-v,html) .fx-story-mobilbild{ display:none }
:is(#fx-v,html) .fx-story-buehne{ position:sticky; inset-block-start:calc(50vh - min(34vw,440px) / 2 - 20px); block-size:min(34vw,440px) }
:is(#fx-v,html) .fx-story-rahmen{ --fx-p:1; position:relative; block-size:100%; border-radius:calc(56px - 36px * var(--fx-p)); overflow:hidden; background:#0E1D3A;
  transform:scale(calc(.72 + .28 * var(--fx-p))) rotate(calc(-4deg + 4deg * var(--fx-p))); transform-origin:50% 60%;
  box-shadow:0 60px 120px -40px rgba(0,0,0,.8), 0 0 0 1px rgba(255,255,255,.08) }
:is(#fx-v,html) .fx-story-bild{ position:absolute; inset:0; margin:0; opacity:0; transform:scale(1.08); transition:opacity .6s var(--fx-weich), transform 1.1s var(--fx-weich) }
:is(#fx-v,html) .fx-story-bild.fx-aktiv{ opacity:1; transform:none }
:is(#fx-v,html) .fx-story-bild img{ inline-size:100%; block-size:100%; object-fit:cover; object-position:top left }
:is(#fx-v,html) .fx-buendel{ position:absolute; inset:0; display:grid; align-content:center; justify-items:center; gap:18px; padding:8%;
  background:var(--fx-bedien) }
:is(#fx-v,html) .fx-b-teil{ display:flex; justify-content:space-between; align-items:center; inline-size:calc(var(--fx-w) * 100%); min-inline-size:44%; padding:14px 18px; border-radius:14px; box-sizing:border-box;
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.18); color:#fff; font-size:15px }
:is(#fx-v,html) .fx-b-teil small, :is(#fx-v,html) .fx-b-summe small{ font:900 22px/1 var(--fx-titel) }
:is(#fx-v,html) .fx-b-summe{ display:flex; justify-content:space-between; align-items:center; inline-size:100%; padding:18px 22px; border-radius:16px; box-sizing:border-box; background:var(--fx-bedien); color:#1B1200 }
:is(#fx-v,html) .fx-b-stufe{ display:flex; align-items:center; gap:10px; color:#6CF0B8; font-size:17px }
:is(#fx-v,html) .fx-b-stufe .fx-zeichen{ inline-size:36px; block-size:36px }
:is(#fx-v,html) .fx-story-bild.fx-aktiv .fx-b-teil{ animation:fx-buendel 1.1s var(--fx-weich) both; animation-delay:calc(var(--fx-j) * 160ms) }
:is(#fx-v,html) .fx-story-bild.fx-aktiv .fx-b-summe{ animation:fx-summe .8s var(--fx-weich) .7s both }
:is(#fx-v,html) .fx-story-bild.fx-aktiv .fx-b-stufe{ animation:fx-herein .7s var(--fx-weich) 1.3s both }
@keyframes fx-buendel{ from{ opacity:0; transform:translateX(calc((var(--fx-j) - 1) * 60%)) translateY(-30px) scale(.9) } }
@keyframes fx-summe{ from{ opacity:0; transform:scaleX(.3) } }


:is(#fx-v,html) .fx-s-band{ padding-block:clamp(40px,5vw,72px); color:var(--fx-tinte);
  background:var(--fx-karte)!important }
:is(#fx-v,html) .fx-s-band .fx-breite{ max-inline-size:none; padding-inline:0 }
:is(#fx-v,html) .fx-band-innen{ display:grid; gap:22px }
:is(#fx-v,html) .fx-band-marke{ display:flex; align-items:center; gap:18px; padding-inline:var(--fx-aussen); max-inline-size:1400px; margin-inline:auto; inline-size:100%; box-sizing:border-box; font:900 clamp(24px,2.6vw,38px)/1 var(--fx-titel) }
:is(#fx-v,html) .fx-band-logo{ block-size:clamp(30px,3vw,44px)!important; inline-size:auto!important; max-inline-size:none!important; background:none; object-fit:contain }
:is(#fx-v,html) .fx-lb-band{ overflow:hidden }
:is(#fx-v,html) .fx-lb-band .fx-lb-el{ block-size:88px; min-inline-size:150px; border-radius:20px }
:is(#fx-v,html) .fx-lb-band .fx-lb-bild{ max-block-size:60px; max-inline-size:170px }
:is(#fx-v,html) .fx-lb-band .fx-lb-halt{ background:#fff; color:var(--fx-bedien) }


:is(#fx-v,html) .fx-achse{ position:relative; display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin:44px 0 0; padding:26px 0 0; list-style:none; --fx-p:1 }
:is(#fx-v,html) .fx-achse-linie{ position:absolute; inset:0 0 auto; block-size:6px; border-radius:6px; background:rgba(11,27,46,.1) }
:is(#fx-v,html) .fx-achse-linie i{ position:absolute; inset:0; border-radius:inherit; background:var(--fx-bedien); transform-origin:left; transform:scaleX(var(--fx-p)) }
:is(#fx-v,html) .fx-achse li{ position:relative; display:grid; gap:6px; opacity:calc(.3 + .7 * clamp(0, (var(--fx-p) * 3 - var(--fx-i)), 1)) }
:is(#fx-v,html) .fx-achse li::before{ content:""; position:absolute; inset-block-start:-30px; inset-inline-start:0; inline-size:14px; block-size:14px; border-radius:50%; background:#fff; border:4px solid #0A58CA }
:is(#fx-v,html) .fx-achse-bild{ display:block; aspect-ratio:4/3; border-radius:var(--fx-r-k); overflow:hidden }
:is(#fx-v,html) .fx-achse-bild img{ inline-size:100%; block-size:100%; object-fit:cover; transform:scale(calc(1.3 - .3 * clamp(0, (var(--fx-p) * 3 - var(--fx-i)), 1))) }
:is(#fx-v,html) .fx-achse b{ font:900 clamp(28px,2.6vw,40px)/1 var(--fx-titel); margin-top:8px }
:is(#fx-v,html) .fx-achse span{ color:var(--fx-leise); font-weight:600 }
:is(#fx-v,html) .fx-weiche{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-bottom:18px }
:is(#fx-v,html) .fx-weiche-t{ font:800 12px/1 var(--fx-satz); letter-spacing:.14em; text-transform:uppercase; color:var(--fx-leise); margin-inline-end:6px }
:is(#fx-v,html) .fx-weiche button{ min-block-size:44px; padding:0 18px; border:1.5px solid var(--fx-linie); border-radius:999px; background:#fff; color:var(--fx-tinte); font:700 15px/1 var(--fx-satz); cursor:pointer; transition:background .25s, color .25s, border-color .25s }
:is(#fx-v,html) .fx-weiche button[aria-pressed="true"]{ background:var(--fx-bedien); border-color:var(--fx-bedien); color:#fff }
:is(#fx-v,html) .fx-wege{ display:grid; gap:10px; margin:0; padding:0; list-style:none }
:is(#fx-v,html) .fx-wege li{ display:flex; justify-content:space-between; gap:16px; align-items:center; padding:20px 22px; border-radius:var(--fx-r-k); background:var(--fx-karte);
  box-shadow:0 1px 0 var(--fx-linie), 0 20px 40px -32px rgba(11,27,46,.45); transition:transform .3s var(--fx-weich) }
:is(#fx-v,html) .fx-wege li[hidden]{ display:none }
:is(#fx-v,html) .fx-wege li:hover{ transform:translateX(6px) }
:is(#fx-v,html) .fx-wege li.fx-neu{ animation:fx-herein .55s var(--fx-weich) both; animation-delay:calc(var(--fx-n,0) * 70ms) }
:is(#fx-v,html) .fx-wege li > div:first-child{ display:grid; gap:4px }
:is(#fx-v,html) .fx-wege b{ font:800 18px/1.2 var(--fx-satz) } :is(#fx-v,html) .fx-wege span{ color:var(--fx-leise); font-size:15px }
:is(#fx-v,html) .fx-wege-ziel{ display:grid; justify-items:end; gap:6px; text-align:end }
:is(#fx-v,html) .fx-wege-ziel strong{ font:700 15px/1.3 var(--fx-satz) }
:is(#fx-v,html) .fx-marke-inco{ padding:5px 10px; border-radius:999px; background:#EEF3FF; color:#123E8C; font:800 11px/1 var(--fx-satz); letter-spacing:.1em }


:is(#fx-v,html) .fx-weg{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,1.8vw,24px); margin:0; padding:0; list-style:none }
:is(#fx-v,html) .fx-weg-k{ display:flex; flex-direction:column; border-radius:var(--fx-r); overflow:hidden; background:var(--fx-karte); box-shadow:0 1px 0 var(--fx-linie), 0 40px 80px -50px rgba(11,27,46,.45) }
:is(#fx-v,html) .fx-weg-bild{ display:block; aspect-ratio:16/10; overflow:hidden }
:is(#fx-v,html) .fx-weg-bild img{ inline-size:100%; block-size:100%; object-fit:cover; transition:transform 1.2s var(--fx-weich) }
:is(#fx-v,html) .fx-weg-k:hover .fx-weg-bild img{ transform:scale(1.1) }
:is(#fx-v,html) .fx-weg-text{ padding:clamp(22px,2.4vw,32px) }
:is(#fx-v,html) .fx-weg-text em{ font:900 48px/1 var(--fx-titel); font-style:normal; color:var(--fx-akzent) }
:is(#fx-v,html) .fx-weg-text h3{ margin:10px 0 0; font:800 22px/1.2 var(--fx-satz) } :is(#fx-v,html) .fx-weg-text p{ margin:8px 0 0; color:var(--fx-leise) }
:is(#fx-v,html) .fx-pruef{ display:grid; grid-template-columns:1fr auto; gap:8px; margin-top:18px }
:is(#fx-v,html) .fx-pruef-feld{ display:flex; align-items:center; gap:8px; min-block-size:52px; padding:0 14px; border:1.5px solid var(--fx-linie); border-radius:14px; background:#fff }
:is(#fx-v,html) .fx-pruef-feld:focus-within{ border-color:var(--fx-bedien) }
:is(#fx-v,html) .fx-pruef input{ flex:1; min-inline-size:0; min-block-size:44px; border:0; outline:0; background:transparent; font:600 16px/1 var(--fx-satz); color:var(--fx-tinte) }
:is(#fx-v,html) .fx-pruef button{ min-block-size:52px; padding:0 20px; border:0; border-radius:14px; background:var(--fx-bedien); color:#fff; font:800 16px/1 var(--fx-satz); cursor:pointer }
:is(#fx-v,html) .fx-pruef-antwort{ grid-column:1/-1; margin:4px 0 0; min-block-size:1.4em; font-weight:700 }
:is(#fx-v,html) .fx-pruef-antwort.fx-frei{ color:#0B7A53 } :is(#fx-v,html) .fx-pruef-antwort.fx-belegt, :is(#fx-v,html) .fx-pruef-antwort.fx-fehler{ color:#8F6300 }
:is(#fx-v,html) .fx-pruef-antwort:not(:empty){ animation:fx-herein .4s var(--fx-weich) }
:is(#fx-v,html) .fx-zusage{ display:flex; flex-wrap:wrap; align-items:center; gap:18px 28px; margin-top:clamp(28px,3.4vw,48px); padding:clamp(24px,3vw,40px); border-radius:var(--fx-r);
  background:var(--fx-bedien); color:#fff }
:is(#fx-v,html) .fx-zusage > p{ flex:1 1 380px; margin:0; font:800 clamp(20px,2vw,28px)/1.25 var(--fx-satz) }
:is(#fx-v,html) .fx-zusage .fx-zeichen{ color:#6CF0B8 }
:is(#fx-v,html) .fx-zusage-ruf{ display:grid; gap:8px; justify-items:start } :is(#fx-v,html) .fx-zusage-ruf small{ color:rgba(255,255,255,.75) }


@media (min-width:1025px){
  :is(#fx-v,html) .fx-s-fragen .fx-breite{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.5fr); gap:72px; align-items:start }
  :is(#fx-v,html) .fx-s-fragen .fx-kopf{ position:sticky; inset-block-start:120px }
  :is(#fx-v,html) .fx-s-fragen .fx-fragen{ max-inline-size:none }
}
:is(#fx-v,html) .fx-fragen{ max-inline-size:880px; border-top:1px solid var(--fx-linie) }
:is(#fx-v,html) .fx-fragen details{ border-bottom:1px solid var(--fx-linie) }
:is(#fx-v,html) .fx-fragen summary{ display:flex; align-items:center; gap:16px; min-block-size:72px; padding:14px 4px; cursor:pointer; list-style:none }
:is(#fx-v,html) .fx-fragen summary::-webkit-details-marker{ display:none }
:is(#fx-v,html) .fx-frage{ flex:1; font:800 clamp(18px,1.6vw,22px)/1.3 var(--fx-satz) }
:is(#fx-v,html) .fx-frage-kurz{ flex:none; padding:8px 14px; border-radius:999px; background:#EEF3FF; color:#123E8C; font:800 14px/1 var(--fx-satz) }
:is(#fx-v,html) .fx-plus{ position:relative; flex:none; inline-size:44px; block-size:44px; border-radius:50%; background:rgba(11,27,46,.06); transition:transform .35s var(--fx-weich), background .3s }
:is(#fx-v,html) .fx-plus::before, :is(#fx-v,html) .fx-plus::after{ content:""; position:absolute; inset:50% auto auto 50%; inline-size:16px; block-size:2.5px; border-radius:2px; background:var(--fx-bedien); translate:-50% -50% }
:is(#fx-v,html) .fx-plus::after{ rotate:90deg }
:is(#fx-v,html) details[open] .fx-plus{ transform:rotate(135deg); background:var(--fx-akzent) }
:is(#fx-v,html) .fx-fragen details p{ margin:0 0 22px; padding-inline-end:60px; max-inline-size:66ch; font-size:17px; color:var(--fx-leise) }
:is(#fx-v,html) .fx-fragen details[open] p{ animation:fx-herein .45s var(--fx-weich) }


:is(#fx-v,html) [data-fx-bestand] img{ transition:transform 1.1s var(--fx-weich) }
:is(#fx-v,html) [data-fx-bestand] a:hover img, :is(#fx-v,html) [data-fx-bestand] figure:hover img{ transform:scale(1.08) }


:is(#fx-v,html).fx-an [data-fx="auftauchen"]{ transition:opacity var(--fx-dauer-ein) var(--fx-weich), transform var(--fx-dauer-ein) var(--fx-weich); transition-delay:calc(var(--fx-i,0) * 130ms) }
:is(#fx-v,html).fx-an [data-fx="auftauchen"]:not(.fx-da){ opacity:0; transform:translateY(var(--fx-weg)) scale(var(--fx-start)) }


@media (max-width:1024px){
  :is(#fx-v,html) .fx-zahlen{ gap:10px }
  :is(#fx-v,html) .fx-zahl{ padding:16px 14px; border-radius:20px }
  :is(#fx-v,html) .fx-zahl span{ font-size:13.5px }
  :is(#fx-v,html) .fx-netz{ grid-template-columns:1fr; gap:12px; margin-inline-end:calc(-1 * var(--fx-aussen)) }
  :is(#fx-v,html) .fx-netz-traeger{ grid-auto-flow:column; justify-content:start; align-items:baseline; gap:10px; padding:0; border:0 }
  :is(#fx-v,html) .fx-vs, :is(#fx-v,html) .fx-nullen, :is(#fx-v,html) .fx-punkte{ grid-template-columns:1fr }
  :is(#fx-v,html) .fx-vs-bild{ aspect-ratio:16/9 }
  :is(#fx-v,html) .fx-reiter-kopf{ inline-size:auto; margin-inline:calc(-1 * var(--fx-aussen)); padding-inline:var(--fx-aussen); border-radius:0; background:transparent; max-inline-size:none }
  :is(#fx-v,html) .fx-reiter-kopf button{ background:rgba(11,27,46,.06) }
  :is(#fx-v,html) .fx-punkte li{ padding:20px }
  :is(#fx-v,html) .fx-zwei{ grid-template-columns:1fr }
  :is(#fx-v,html) .fx-story{ grid-template-columns:1fr }
  :is(#fx-v,html) .fx-story-buehne{ display:none }
  :is(#fx-v,html) .fx-story-schritt{ min-block-size:0; opacity:1; padding-block:18px }
  :is(#fx-v,html) .fx-story-mobilbild{ display:block; margin-top:20px; border-radius:20px; overflow:hidden; aspect-ratio:16/10; background:#0E1D3A }
  :is(#fx-v,html) .fx-story-mobilbild img{ inline-size:100%; block-size:100%; object-fit:cover; object-position:top left }
  :is(#fx-v,html) .fx-story-mobilbild:empty{ display:none }
  :is(#fx-v,html) .fx-achse{ grid-template-columns:1fr; gap:22px; padding:0 0 0 26px }
  :is(#fx-v,html) .fx-achse-linie{ inset:0 auto 0 0; inline-size:6px; block-size:auto }
  :is(#fx-v,html) .fx-achse-linie i{ transform-origin:top; transform:scaleY(var(--fx-p)) }
  :is(#fx-v,html) .fx-achse li::before{ inset-block-start:4px; inset-inline-start:-30px }
  :is(#fx-v,html) .fx-wege li{ flex-direction:column; align-items:flex-start }
  :is(#fx-v,html) .fx-wege-ziel{ justify-items:start; text-align:start }
  :is(#fx-v,html) .fx-weg{ grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:85%; overflow-x:auto; scroll-snap-type:x mandatory; margin-inline:calc(-1 * var(--fx-aussen)); padding:4px var(--fx-aussen) 24px; scrollbar-width:none }
  :is(#fx-v,html) .fx-weg-k{ scroll-snap-align:center }
  :is(#fx-v,html) .fx-fragen details p{ padding-inline-end:0 }
  :is(#fx-v,html) .fx-frage-kurz{ display:none }
  :is(#fx-v,html) .fx-lb-el{ block-size:54px; min-inline-size:100px; padding:0 14px }
  :is(#fx-v,html) .fx-lb-bild{ max-block-size:32px; max-inline-size:120px }
  :is(#fx-v,html) .fx-lb-band .fx-lb-el{ block-size:70px; min-inline-size:120px } :is(#fx-v,html) .fx-lb-band .fx-lb-bild{ max-block-size:46px }
  :root{ --fx-weg:40px }
}
@media (max-width:600px){
  :is(#fx-v,html) .fx-zahl{ padding:14px 10px }
  :is(#fx-v,html) .fx-zahl span{ font-size:12.5px; hyphens:auto; overflow-wrap:anywhere }
  :is(#fx-v,html) .fx-lb-rand .fx-lb-halt{ inset-block-start:-26px; translate:0 -50% }
  :is(#fx-v,html) .fx-zahl b{ font-size:clamp(40px,12vw,56px) }
  :is(#fx-v,html) .fx-rechner-erg{ grid-template-columns:1fr }
  :is(#fx-v,html) .fx-pruef{ grid-template-columns:1fr }
}


@media (prefers-reduced-motion:reduce){
  :is(#fx-v,html) .fx-lb-spur{ animation:none } :is(#fx-v,html) .fx-lb{ overflow-x:auto }
  :is(#fx-v,html).fx-an [data-fx="auftauchen"]:not(.fx-da){ opacity:1; transform:none }
  :is(#fx-v,html) .fx-story-rahmen{ transform:none; border-radius:20px }
  :is(#fx-v,html) .fx-punkte li, :is(#fx-v,html) .fx-story-bild.fx-aktiv *, :is(#fx-v,html) .fx-wege li.fx-neu{ animation:none }
  :is(#fx-v,html) .fx-zug{ stroke-dashoffset:0!important }
  :is(#fx-v,html) .fx-achse{ --fx-p:1!important }
}

/* ---------- Einstiegsseite 29.09.2026: Wer dahinter steht, verdichtet; Werkzeug als Scrollgeschichte ---------- */
:is(#fx-v,html) .fx-s-wir{ background:var(--fx-karte) }
:is(#fx-v,html) .fx-wir{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); gap:clamp(24px,4.5vw,80px); align-items:center }
:is(#fx-v,html) .fx-wir-bild{ margin:0; border-radius:var(--fx-r); overflow:hidden; aspect-ratio:4/3; background:var(--fx-grund) }
:is(#fx-v,html) .fx-wir-bild img{ display:block; inline-size:100%; block-size:100%; object-fit:cover; transform:scale(1.12); transition:transform 1.6s var(--fx-weich) }
:is(#fx-v,html) .fx-wir-bild.fx-da img, html:not(.fx-an) .fx-wir-bild img{ transform:none }
:is(#fx-v,html) .fx-wir-karten{ list-style:none; margin:clamp(28px,3vw,40px) 0 0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:16px }
:is(#fx-v,html) .fx-wir-karten li{ background:var(--fx-grund); border-radius:var(--fx-r-k); padding:clamp(20px,2vw,28px) }
:is(#fx-v,html) .fx-wir-karten small{ display:block; font:800 12px/1 var(--fx-satz); letter-spacing:.14em; text-transform:uppercase; color:var(--fx-leise) }
:is(#fx-v,html) .fx-wir-karten li > b{ display:block; margin-top:12px; font:900 clamp(24px,2.2vw,32px)/1.05 var(--fx-titel); color:var(--fx-tinte) }
:is(#fx-v,html) .fx-wir-karten p{ margin:10px 0 0; font-size:15.5px; color:var(--fx-leise) }
:is(#fx-v,html) .fx-wir-z{ color:var(--fx-tinte); font-weight:800 }
:is(#fx-v,html) .fx-s-werkzeug .fx-story-schritt{ min-block-size:58vh }
@media (max-width:1024px){
  :is(#fx-v,html) .fx-wir{ grid-template-columns:1fr }
  :is(#fx-v,html) .fx-wir-bild{ aspect-ratio:16/10 }
  :is(#fx-v,html) .fx-wir-karten{ grid-template-columns:1fr }
}
@media (max-width:1024px){
  :is(#fx-v,html) .fx-achse li{ grid-template-columns:88px minmax(0,1fr); column-gap:14px; row-gap:2px; align-items:center }
  :is(#fx-v,html) .fx-achse-bild{ grid-row:span 3; aspect-ratio:1 }
  :is(#fx-v,html) .fx-achse b{ margin-top:0 }
}