main{display:flex;flex-flow:column nowrap;justify-content:center;min-width:320px;min-height:100svh;max-width:calc(100vmin - 2rem);max-height:calc(100vmin - 2rem);margin:0 auto}main>div{width:100%;height:auto;aspect-ratio:1/1;min-height:320px;display:flex;flex-flow:column nowrap;align-items:stretch}main>div>svg{display:block;width:0;height:0}main>div>a{display:block;clip-path:polygon(50% 0,100% 100%,0 100%);background-color:var(--color-grey);text-align:center}main>div>a svg{display:inline-block;vertical-align:baseline;width:10%;height:auto;aspect-ratio:1/1;margin:2% 0 0}main>div>div{flex-grow:1}main>div>div:first-of-type{flex-grow:2;display:flex;flex-flow:row nowrap;align-items:stretch}main>div{--topic-padding-hover: 15% 20%;overflow:hidden}main>div:has(input:checked){--topic-padding-hover: calc(50% - 1em) 50%}main>div:has(input:checked) .topic:has(input:checked){padding:var(--topic-padding-hover);transition-duration:.4s;transition-timing-function:cubic-bezier(.39,.575,.565,1)}main>div:has(input:checked) .topic:has(input:checked) label{cursor:url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2232%22%20height%3D%2232%22%3E%3Cpath%20style%3D%22fill%3Anone;stroke%3A%23fff;stroke-width%3A3;stroke-linecap%3Around;stroke-linejoin%3Around%22%20d%3D%22m27%2016h-22m9-9l-9%209l9%209%22%2F%3E%3C%2Fsvg%3E) 0 0,auto}main>div:has(input:checked) .topic img,main>div:has(input:checked) .topic>h3{opacity:0!important;transition-duration:.2s}@media (hover: hover){main>div>div:has(.topic:focus,.topic:hover) .topic:not(:focus,:hover){padding-top:15%;padding-bottom:15%}main>div:has(.topic:focus,.topic:hover) .topic:not(:focus,:hover) img{translate:-50% -50%}main>div:has(.topic:focus,.topic:hover) .topic:not(:focus,:hover)>h3{opacity:0;translate:-50% 2em}}.topic{position:relative;overflow:hidden;display:flex;flex-flow:column nowrap;justify-content:center;align-items:center;flex-grow:1;padding:0;transition:padding .6s cubic-bezier(.39,.575,.565,1);font-size:max(3vmin,12px);user-select:none}@media (hover: hover){.topic:focus,.topic:hover{padding:var(--topic-padding-hover)}.topic:focus img,.topic:hover img{translate:-50% -60%;width:10em;transition:translate .8s cubic-bezier(.175,.885,.32,1.275),width .8s cubic-bezier(.175,.885,.32,1.275),opacity .8s cubic-bezier(.39,.575,.565,1)}.topic:focus>h3,.topic:hover>h3{translate:-50% 4em}}.topic.geldanlage-sparen{background-color:var(--color-geldanlage-sparen)}.topic.kredit-finanzen{background-color:var(--color-kredit-finanzen)}.topic.zukunft-vorsorge{background-color:var(--color-zukunft-vorsorge)}.topic.immobilie-wohnen{background-color:var(--color-immobilie-wohnen)}.topic.versicherung-schuetzen{background-color:var(--color-versicherung-schuetzen)}.topic.girokonto-bezahlen{background-color:var(--color-girokonto-bezahlen)}.topic>*:not(label){pointer-events:none}.topic img{position:absolute;top:50%;left:50%;display:block;width:4em;height:auto;aspect-ratio:1/1;border-radius:50%;translate:-50% calc(-50% - 1em);opacity:1;transition:translate .6s cubic-bezier(.39,.575,.565,1),width .6s cubic-bezier(.39,.575,.565,1),opacity .6s cubic-bezier(.39,.575,.565,1)}.topic>h3{position:absolute;top:50%;left:50%;color:var(--color-white);font-size:100%;font-weight:500;line-height:1;text-align:center;white-space:break-spaces;margin:1em 0 0;translate:-50% .5em;opacity:1;transition:translate .8s cubic-bezier(.175,.885,.32,1.275),opacity .6s cubic-bezier(.39,.575,.565,1)}.topic label{position:absolute;inset:0;cursor:pointer}.topic label input{display:block;width:0;height:0;opacity:0}.topic:has(input:checked)>div{opacity:1;transition:opacity .4s cubic-bezier(.445,.05,.55,.95) .3s}.topic:has(input:checked)>div ul li{opacity:1;transition:opacity .8s cubic-bezier(.39,.575,.565,1)}.topic:has(input:checked)>div ul li:nth-child(1){transition-delay:.1s}.topic:has(input:checked)>div ul li:nth-child(2){transition-delay:.2s}.topic:has(input:checked)>div ul li:nth-child(3){transition-delay:.3s}.topic:has(input:checked)>div ul li:nth-child(4){transition-delay:.4s}.topic:has(input:checked)>div ul li:nth-child(5){transition-delay:.5s}.topic:has(input:checked)>div ul li:nth-child(6){transition-delay:.6s}.topic:has(input:checked)>div ul li:nth-child(7){transition-delay:.7s}.topic:has(input:checked)>div ul li:nth-child(8){transition-delay:.8s}.topic:has(input:checked)>div ul li:nth-child(9){transition-delay:.9s}.topic>div{pointer-events:none;opacity:0;transition:opacity .3s cubic-bezier(.39,.575,.565,1);position:absolute;inset:0}.topic>div>h3{color:var(--color-white);font-size:150%;font-weight:500;line-height:1;text-align:center;margin:1em 0 .5em}.topic ul{list-style:none;display:flex;flex-flow:row wrap;justify-content:center;align-items:center;gap:0;min-height:60%;max-width:90%;padding:2em 0 0;margin:0 auto}.topic ul:has(li:first-child:last-child){font-size:135%}.topic ul:has(li:first-child:last-child) li{flex-basis:100%}.topic ul:has(li:last-child:nth-child(2)){gap:0 2em;font-size:115%}.topic ul:has(li:last-child:nth-child(4)){gap:0 2em}.topic ul:has(li:last-child:nth-child(4)) li{flex-basis:35%}.topic ul li{flex-basis:30%;text-align:center;opacity:0;transition:opacity 0ms cubic-bezier(.39,.575,.565,1) .4s}.topic ul svg{display:block;width:4em;height:auto;aspect-ratio:1/1;fill:var(--color-white);margin:0 auto}.topic ul h4{color:var(--color-white);min-height:4em;text-align:center;padding:0 4em;margin:.5em -4em 0}:root{--color-white: #fff;--color-grey: #e1e1e1;--color-black: #222;--color-geldanlage-sparen: #459635;--color-kredit-finanzen: #075da9;--color-zukunft-vorsorge: #b32761;--color-immobilie-wohnen: #604696;--color-versicherung-schuetzen: #eb6508;--color-girokonto-bezahlen: #039ad8;--color-font: var(--color-black);--color-background: var(--color-white)}@font-face{font-family:f;font-style:normal;src:url(./assets/font.woff2) format("woff2");font-weight:700;font-display:fallback}body{min-width:320px;color:var(--color-font);background-color:var(--color-background);margin:0;font-family:f,Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}