.bm{aspect-ratio:3/2;border-radius:var(--radius);border:1px solid var(--line);background:var(--c-onyx);width:100%;color:var(--c-floral);font-family:var(--font-body);font-weight:400;line-height:1.3;position:relative;overflow:hidden;container-type:inline-size}.bm ul{margin:0;padding:0;list-style:none}.bm-beispiel{letter-spacing:.08em;text-transform:uppercase;background:var(--c-white);color:var(--c-onyx);border:1px solid var(--line);white-space:nowrap;border-radius:999px;padding:.5cqi 1.8cqi;font-size:2.9cqi;font-weight:600}.bm-kopfzeile{justify-content:space-between;align-items:center;gap:2cqi;display:flex}.bm-kopfzeile b{font-weight:600}.bm-haken{background:color-mix(in srgb,var(--c-verdigris) 16%,var(--c-white));width:4cqi;height:4cqi;color:var(--c-verdigris-text);border-radius:50%;flex:none;place-items:center;display:grid}.bm-haken svg{width:60%;height:60%}@keyframes bm-hoch{0%{opacity:0;transform:translateY(4cqi)}}@keyframes bm-pop{0%{opacity:0;transform:scale(.3)}}@keyframes bm-wachsen{0%{transform:scaleX(0)}}@keyframes bm-von-rechts{0%{opacity:0;transform:translate(6cqi)}}@keyframes bm-von-links{0%{opacity:0;transform:translate(-6cqi)}}.bm-zahlblock{align-content:center;justify-items:start;gap:2cqi;display:grid;position:absolute;top:0;bottom:0;left:8cqi}.bm-zahlblock--rechts{justify-items:end;left:auto;right:7cqi}.bm-zahl{letter-spacing:-.03em;font-size:17cqi;font-weight:600;line-height:.9}.bm-unter{color:color-mix(in srgb,var(--c-floral) 70%,transparent);font-size:3.1cqi}.bm-karte{background:var(--c-white);color:var(--c-onyx);border-radius:3cqi;align-content:start;gap:2.4cqi;padding:4.4cqi;font-size:2.9cqi;display:grid;position:absolute}.bm-karte>.bm-beispiel{position:absolute;top:-1.8cqi;right:3cqi}.bm-balken{height:2.3cqi;width:var(--b);opacity:.14;transform-origin:0;background:currentColor;border-radius:1.2cqi;display:block}.bm-sterne{color:var(--c-tiger);gap:.5cqi;font-size:5.2cqi;line-height:1;display:flex}.bm-sterne i{font-style:normal;display:block}.bm-karte--rechts{top:12cqi;left:43cqi;right:6cqi}.bm-name{margin-bottom:.6cqi;font-size:4cqi;font-weight:600;line-height:1.15}.bm-antwort{background:var(--c-tint);border-radius:2cqi;gap:1.5cqi;margin-top:1.6cqi;padding:2.8cqi 3cqi;display:grid}.bm-antwort b{font-size:2.8cqi;font-weight:600}:is(.post:hover,.post:focus-within,.bm.in) .bm-karte--rechts{animation:.5s ease-out 50ms both bm-von-rechts}:is(.post:hover,.post:focus-within,.bm.in) .bm-zahlblock:not(.bm-zahlblock--rechts) .bm-zahl{animation:.5s ease-out .1s both bm-hoch}:is(.post:hover,.post:focus-within,.bm.in) .bm-sterne i{animation:.3s cubic-bezier(.3,1.6,.5,1) .4s both bm-pop}:is(.post:hover,.post:focus-within,.bm.in) .bm-sterne i:nth-child(2){animation-delay:.5s}:is(.post:hover,.post:focus-within,.bm.in) .bm-sterne i:nth-child(3){animation-delay:.6s}:is(.post:hover,.post:focus-within,.bm.in) .bm-sterne i:nth-child(4){animation-delay:.7s}:is(.post:hover,.post:focus-within,.bm.in) .bm-sterne i:nth-child(5){animation-delay:.8s}:is(.post:hover,.post:focus-within,.bm.in) .bm-karte--rechts>.bm-balken{animation:.45s ease-out .45s both bm-wachsen}:is(.post:hover,.post:focus-within,.bm.in) .bm-karte--rechts>.bm-balken+.bm-balken{animation-delay:.55s}:is(.post:hover,.post:focus-within,.bm.in) .bm-antwort{animation:.45s ease-out 1s both bm-hoch}:is(.post:hover,.post:focus-within,.bm.in) .bm-antwort .bm-balken{animation:.4s ease-out 1.3s both bm-wachsen}:is(.post:hover,.post:focus-within,.bm.in) .bm-antwort .bm-balken+.bm-balken{animation-delay:1.4s}.bm--website-kosten{background:var(--c-onyx)}.bm-drucker{background:color-mix(in srgb,var(--c-floral) 24%,var(--c-onyx));border-radius:999px;width:52cqi;height:3.6cqi;position:absolute;top:59cqi;left:24cqi;box-shadow:inset 0 .5cqi #00000059}.bm-schacht{flex-direction:column;justify-content:flex-end;width:46cqi;height:60.8cqi;display:flex;position:absolute;top:0;left:27cqi;overflow:hidden}.bm-bon{--zacke:2.4cqi;background:var(--c-floral);color:var(--c-onyx);padding:calc(2.6cqi + var(--zacke)) 3cqi 3.4cqi;font-variant-numeric:tabular-nums;-webkit-mask:conic-gradient(from 135deg at top,#0000,#000 1deg 89deg,#0000 90deg) 50% 100%/var(--zacke) calc(100% + 1px);mask:conic-gradient(from 135deg at top,#0000,#000 1deg 89deg,#0000 90deg) 50% 100%/var(--zacke) calc(100% + 1px);gap:1.3cqi;font-size:2.7cqi;display:grid}.bm-bontitel{text-align:center;font-size:3.8cqi;font-weight:600;line-height:1.1}.bm-bon .bm-beispiel{background:0 0;justify-self:center}.bm-bon ul{border-block:.35cqi dashed color-mix(in srgb,var(--c-onyx) 30%,transparent);gap:1.4cqi;padding:1.8cqi 0;display:grid}.bm-bon li{white-space:nowrap;justify-content:space-between;align-items:center;gap:2cqi;display:flex}.bm-gewicht{flex:none;gap:.7cqi;display:flex}.bm-gewicht i{border:.3cqi solid color-mix(in srgb,var(--c-onyx) 50%,transparent);border-radius:.4cqi;width:1.9cqi;height:1.9cqi}.bm-gewicht i.an{background:var(--c-onyx);border-color:var(--c-onyx)}.bm-summe{align-items:baseline;gap:1.6cqi;font-size:3.6cqi;display:flex}.bm-summe span{color:#6f6b62}.bm-summe b{font-weight:600;position:relative}.bm-strich{background:var(--c-tiger);transform-origin:0;border-radius:.4cqi;height:.8cqi;position:absolute;bottom:-.9cqi;left:0;right:0}@keyframes bm-drucken{0%{transform:translateY(100%)}}@keyframes bm-strich{0%{transform:scaleX(0)}}:is(.post:hover,.post:focus-within,.bm.in) .bm-bon{animation:1.3s cubic-bezier(.25,.6,.3,1) .15s both bm-drucken}:is(.post:hover,.post:focus-within,.bm.in) .bm-strich{animation:.45s ease-out 1.5s both bm-strich}.bm-karte--links{width:52cqi;top:10cqi;left:6cqi}.bm-karte--links .bm-kopfzeile b{font-size:3.5cqi}.bm-monat{background:var(--c-tiger);color:var(--c-onyx);border-radius:999px;padding:.5cqi 1.6cqi;font-size:2.3cqi;font-weight:600}.bm-karte--links ul{gap:2.3cqi;margin-top:.6cqi;display:grid}.bm-karte--links li{align-items:center;gap:2.2cqi;display:flex}.bm-punkte{gap:1.4cqi;display:flex}.bm-punkte .bm-haken{background:color-mix(in srgb,var(--c-verdigris) 30%,var(--c-onyx));width:4.2cqi;height:4.2cqi;color:color-mix(in srgb,var(--c-verdigris) 60%,var(--c-white))}:is(.post:hover,.post:focus-within,.bm.in) .bm-karte--links{animation:.5s ease-out 50ms both bm-von-links}:is(.post:hover,.post:focus-within,.bm.in) :is(.bm-karte--links li:first-child .bm-haken,.bm-punkte>.bm-haken:first-child){animation:.3s cubic-bezier(.3,1.6,.5,1) .35s both bm-pop}:is(.post:hover,.post:focus-within,.bm.in) .bm-karte--links li:first-child .bm-balken{animation:.4s ease-out .4s both bm-wachsen}:is(.post:hover,.post:focus-within,.bm.in) :is(.bm-karte--links li:nth-child(2) .bm-haken,.bm-punkte>.bm-haken:nth-child(2)){animation:.3s cubic-bezier(.3,1.6,.5,1) .53s both bm-pop}:is(.post:hover,.post:focus-within,.bm.in) .bm-karte--links li:nth-child(2) .bm-balken{animation:.4s ease-out .58s both bm-wachsen}:is(.post:hover,.post:focus-within,.bm.in) :is(.bm-karte--links li:nth-child(3) .bm-haken,.bm-punkte>.bm-haken:nth-child(3)){animation:.3s cubic-bezier(.3,1.6,.5,1) .71s both bm-pop}:is(.post:hover,.post:focus-within,.bm.in) .bm-karte--links li:nth-child(3) .bm-balken{animation:.4s ease-out .76s both bm-wachsen}:is(.post:hover,.post:focus-within,.bm.in) :is(.bm-karte--links li:nth-child(4) .bm-haken,.bm-punkte>.bm-haken:nth-child(4)){animation:.3s cubic-bezier(.3,1.6,.5,1) .89s both bm-pop}:is(.post:hover,.post:focus-within,.bm.in) .bm-karte--links li:nth-child(4) .bm-balken{animation:.4s ease-out .94s both bm-wachsen}:is(.post:hover,.post:focus-within,.bm.in) :is(.bm-karte--links li:nth-child(5) .bm-haken,.bm-punkte>.bm-haken:nth-child(5)){animation:.3s cubic-bezier(.3,1.6,.5,1) 1.07s both bm-pop}:is(.post:hover,.post:focus-within,.bm.in) .bm-karte--links li:nth-child(5) .bm-balken{animation:.4s ease-out 1.12s both bm-wachsen}:is(.post:hover,.post:focus-within,.bm.in) :is(.bm-karte--links li:nth-child(6) .bm-haken,.bm-punkte>.bm-haken:nth-child(6)){animation:.3s cubic-bezier(.3,1.6,.5,1) 1.25s both bm-pop}:is(.post:hover,.post:focus-within,.bm.in) .bm-karte--links li:nth-child(6) .bm-balken{animation:.4s ease-out 1.3s both bm-wachsen}:is(.post:hover,.post:focus-within,.bm.in) .bm-zahlblock--rechts .bm-zahl{animation:.45s cubic-bezier(.3,1.4,.5,1) 1.45s both bm-pop}:is(.post:hover,.post:focus-within,.bm.in) .bm-zahlblock--rechts .bm-unter{animation:.4s ease-out 1.6s both bm-hoch}
