.rd-captcha {
display: flex;
flex-direction: row;
gap: 16px;
border: 2px solid #ccc;
border-radius: 8px;
padding: 8px 16px;
align-items: center;
}
.rd-captcha__row {
margin: 8px 0;
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
align-items: center;
flex-basis: 0;
flex-grow: 1;
}
.rd-captcha__input {
max-width: 100%;
}
.rd-captcha__refresh {
cursor: pointer;
}
.rd-captcha__hp {
position: absolute;
left: -9999px;
width: 1px;
height: 1px;
overflow: hidden;
}
.rd-captcha__refresh--plain {
background: none;
border: 0;
padding: 0;
margin: 0;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 6px;
color: inherit;
font: inherit;
text-decoration: underline; }
.rd-captcha__refresh--plain:hover {
opacity: .85;
}
.rd-captcha__refresh--plain:focus-visible {
outline: 2px solid currentColor;
outline-offset: 2px;
border-radius: 4px;
}
.rd-captcha__refreshIcon svg {
display: block;
fill: currentColor;
}section.teaser.micropayment{
padding: 64px 0 0 0;
}
section.teaser.micropayment picture.bg_image img {
object-position: center;
}
section.teaser div.teaser-wrapper {
position: relative;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
z-index: 1;
}
section.teaser::before {
width: 80%;
z-index: 2;
left: 0;
background: rgba( var(--micropayment_secondary), 0.4);
}
section.teaser::after {
width: 64%;
left: 0;
opacity: 0.3;
}
section.teaser div.flex {
height: 100%;
gap: 0;
position: relative;
z-index: 9;
align-items: stretch;
}
section.teaser.text-align-center div.flex {
justify-content: center;
position: relative;
}
.micropayment section.teaser .flex div.text {
position: relative;
z-index: 9;
}
.micropayment section.teaser .flex div.text.asset-type-empty {
flex: 1;
width: 100%;
max-width: 100%;
}
.micropayment section.teaser .flex div.assets {
flex-direction: initial;
position: relative;
display: flex;
top: auto;
max-height: 700px;
position: absolute;
right: 0;
bottom: 0;
height: 100%;
width: 50%;
z-index: 1;
}
.micropayment section.teaser .flex div.assets div.image {
height: 100%;
width: 100%;
}
section.teaser div.image picture,
section.teaser div.image picture img {
object-fit: contain;
object-position: bottom;
position: relative;
z-index: 9;
}
section.teaser div.image.image-position-center picture,
section.teaser div.image.image-position-center picture img {
align-items: center;
}
section.teaser div.image.image-position-top picture,
section.teaser div.image.image-position-top picture img {
align-items: flex-start;
}
section.teaser div.image.image-position-bottom picture,
section.teaser div.image.image-position-bottom picture img {
align-items: flex-end;
}
section.teaser div.image picture {
z-index: 6;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
}
.micropayment section.teaser div.image picture img {
width: auto;
max-height: 100%;
height: initial;
object-fit: contain;
}
section+section.teaser div.image picture {
height: 100%;
z-index: 6;
}
section+section.teaser div.image.image-position-center picture,
section+section.teaser div.image.image-position-center picture img {
padding: 80px 0;
}
section.teaser div.text {
display: flex;
align-items: flex-start;
flex-direction: column;
padding: 64px 0 96px 0;
position: relative;
z-index: 9;
align-self: center;
}
section.teaser.teaser-height-small div.text {
padding: 80px 0 40px;
}
section.teaser.text-align-center div.text {
justify-content: center;
align-items: center;
}
section+section.teaser div.text {
padding: 80px 0;
}
section.teaser div.text {
max-width: calc(var(--micropayment_maxWidth) / 1.8 );
}
section.teaser div.text h1,
section.teaser div.text h2 {
position: relative;
z-index: 1;
width: 125%;
letter-spacing: -2px
}
section.teaser div.text.asset-type-empty h1,
section.teaser div.text.asset-type-empty h2 {
width: 100%;
}
section.teaser div.text p:not(.subheadline) {
font-size: var(--micropayment_text_medium_fontSize);
line-height: var(--micropayment_text_medium_lineHeight);
font-weight: var(--micropayment_text_medium_fontWeight);
}
section.teaser div.text p.lead {
font-size: var(--micropayment_text_large_fontSize);
line-height: var(--micropayment_text_large_lineHeight);
font-weight: var(--micropayment_text_medium_fontWeight);
}
section.teaser div.text div.buttons {
padding: 24px 0;
}   section.teaser.teaser-height-full {
height: calc( 100vh - 88px);
padding-bottom: 0;
}
section.teaser.teaser-height-full .content {
height: 100%;
}
@media ( max-width: 768px ) {
section.teaser.teaser-height-full {
height: auto;
}	
}   section.teaser.image-type-logo .flex {
gap: 64px;
}
section.teaser.image-type-logo div.text {
max-width: 100%;
}
section.teaser.image-type-logo div.text h1,
section.teaser.image-type-logo div.text h2 {
width: 100%;
}
section.teaser.image-type-logo div.text p {
width: 80%;
}
section.teaser.image-type-logo div.image {
display: flex;
justify-content: flex-end;
align-items: center;
}
section.teaser.image-type-logo div.image div.image-content {
height: auto;
display: inline-flex;
position: relative;
left: auto;
top: auto;
justify-content: center;
}
section.teaser.image-type-logo div.image picture {
padding: 48px;
height: auto;
max-height: 50%;
width: 100%;
position: relative;
left: auto;
bottom: auto;
width: auto;
transform: none;
}
section.teaser.image-type-logo div.image picture img {
width: 100%;
height: 100%;
object-fit: contain;
position: relative;
left: auto;
bottom: auto;
border-radius: 0;
}
section.teaser.image-type-logo div.image picture.vector img {
min-width: 100%;
max-width: 100%;
}
section.teaser.image-type-logo div.image div.image-content div.bg {
border-radius: var(--micropayment_borderRadiusBigs);
}
@media ( max-width: 1200px ) {
section.teaser div.flex {
align-items: initial;
flex-direction: column;
}
section.teaser div.text h1,
section.teaser div.text h2 {
font-size: 72px;
line-height: 80px;
width: 100%;
}
.micropayment section.teaser div.flex {
flex-direction: column;
}
.micropayment section.teaser div.flex div.text {
flex: 1 1 100%;
padding-bottom: 0;
max-width: 100%;
}
.micropayment section.teaser .flex div.assets {
flex-direction: initial;
display: flex;
top: auto;
max-height: inherit;
position: relative;
right: auto;
bottom: auto;
height: initial;
width: 100%;
z-index: 1;
display: block;
}
.micropayment section.teaser .flex div.assets div.image {
max-height: 100%;
display: block;
}
.micropayment section.teaser .flex div.assets div.image picture {
width: 100%;
height: 100%;
display: block;
}
.micropayment section.teaser .flex div.assets div.image picture img {
width: 100%;
height: 100%;
object-fit: contain;
object-position: center;
display: block;
}
}
@media ( max-width: 768px ) {
section.teaser div.flex {
flex-direction: column;
}
section.teaser div.text {
padding: 48px 0 0 0;
}
section.teaser div.text h1,
section.teaser div.text h2,
section.teaser div.text .headline {
font-size: var(--micropayment_headline_h1_fontSize);
line-height: var(--micropayment_headline_h1_lineHeight);
width: 100%;
}
section.teaser div.content {
padding: 0;
}
section.teaser div.image {
order: -1;
justify-content: center;
}
section.teaser div.image div.image-content {
position: relative;
left: initial;
bottom: initial;
height: 32vh;
width: initial;
}
section.teaser div.image div.image-content picture {
width: initial;
}
.micropayment section.teaser div.flex div.text {
padding: 48px 24px 24px 24px;
border-radius: 32px 32px 0 0;
background: rgba( var(--micropayment_white), 1);
}
.micropayment section.teaser div.flex div.text article {
max-width: 100%;
}
section.teaser p.subheadline {
color: rgba(var(--micropayment_black), .72);
}
section.teaser div.text .headline {
color: rgba(var(--micropayment_dark), 1);
}
section.teaser div.text p:not(.subheadline) {
color: var(--micropayment_textColor);
}
.micropayment section.teaser .flex div.assets {
position: relative;
right: auto;
bottom: auto;
width: 100%;
height: auto;
max-height: 400px;
padding: 0 24px;
}
.micropayment section.teaser .flex div.assets div.image {
max-height: 40vh;
display: block;
}
.micropayment section.teaser .flex div.assets div.image  picture img {
max-height: 40vh !important;
}
.micropayment section.teaser .flex .flexbox.assets.right.assets.right {
order: -1;
}
}
@media ( max-width: 589px ) {
section.teaser div.text h1,
section.teaser div.text h2 {
font-size: 40px;
line-height: 48px;
}
section.teaser.teaser-height-small div.flex {
min-height: initial;
}
section.teaser div.image div.image-content {
height: 72vh;
}
}section.micropayment.offer div.content > div.flex {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 0px;
}
section.micropayment.offer div.text article,
section.micropayment.offer div.assets.form {
max-width: calc( var(--micropayment_maxWidth) * 0.4 );
flex: 1 1 100%;
display: block;
width: 100%;
}
section.micropayment.offer div.text article {
text-align: center;
}
section.micropayment.offer div.text article .buttons {
justify-content: center;
}
section.micropayment.offer div.assets.form {
max-width: 800px;
}
section.micropayment.offer div.steps {
position: relative;
padding: 24px;
}
section.micropayment.offer div.step {
padding: 24px;
background: rgba( var(--micropayment_white), 1);
border-radius: var(--micropayment_borderRadius);
box-shadow: var(--micropayment_boxShadow);
display: none;
border: 1px solid rgba( var(--micropayment_white), 1);
position: relative;
z-index: 9;
}
section.micropayment.offer div.step.active {
display: block;
}
section.micropayment.offer div.step.success {
border-color: var(--micropayment_success);
color: var(--micropayment_success);
background: var(--micropayment_successLight);
}
section.micropayment.offer div.step.success h2,
section.micropayment.offer div.step.success p {
color: var(--micropayment_success);	
}
section.micropayment.offer div.step.error {
border-color: var(--micropayment_error);
color: var(--micropayment_error);
background: var(--micropayment_errorLight);
}
section.micropayment.offer div.step.error h2,
section.micropayment.offer div.step.error p {
color: var(--micropayment_error);	
}
section.micropayment.offer div.step.info {
border-color: var(--micropayment_info);
background: var(--micropayment_infoLight);
}
section.micropayment.offer div.step.info h2,
section.micropayment.offer div.step.info p {
color: var(--micropayment_blue);	
}
section.micropayment.offer div.alert {
display: none;
}
section.micropayment.offer div.step h3 {
padding: 24px 0 8px;
text-align: center;
color: var(--micropayment_textColor);
}
section.micropayment.offer div.step p {
text-align: center;
color: rgba(var(--micropayment_black), 0.6);
}
section.micropayment.offer div.step div.card {
padding: 0;
margin-bottom: 24px;
}
section.micropayment.offer div.step div.flex{
max-width: inherit;
justify-content: center;
flex-wrap: wrap;
gap: 0;
margin: 0 -12px;
}
section.micropayment.offer div.step div.flex.buttons {
margin: 0;
}
section.micropayment.offer div.step div.flex div.flexbox.box {
max-width: 33.3%;
min-width: 33.3%;
}
section.micropayment.offer div.step div.flex.presets div.flexbox {
max-width: 25%;
min-width: 25%;
}
section.micropayment.offer div.step div.flex div.flexbox.row {
padding: 0;
max-width: 100%;
min-width: 100%;
position: relative;
text-align: left;
border: none;
}
section.micropayment.offer div.step div.card div.flexbox.text{
display: flex;
flex-direction: column;
padding: 8px 12px;
width: 100%;
}
section.micropayment.offer div.step div.card div.flexbox.box {
width: 100%;
margin: 0;
padding: 12px;
border: none;
box-shadow: none;
}
section.micropayment.offer div.step div.card div.flexbox.box.link a,
section.micropayment.offer div.step div.card div.flexbox.box label {
border-radius: var(--micropayment_borderRadius);
border: 2px solid rgba( var(--micropayment_black), 0.1);
width: 100%;
height: 100%;
padding: 24px;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
cursor: pointer;
text-align: left;
}
section.micropayment.offer div.step div.card div.flexbox.box.link a {
font-size: var(--micropayment_text_small_fontSize);
font-weight: var(--micropayment_text_small_fontWeight);
line-height: var(--micropayment_text_small_lineHeight);
color: var(--micropayment_textColor);
}
section.micropayment.offer div.step div.card div.flexbox.box.link a:hover,
section.micropayment.offer div.step div.card div.flexbox.box label:hover {
border-color:  rgba( var(--micropayment_black), 1);
text-decoration: none;
}
section.micropayment.offer div.step div.card div.flexbox.box label .h3 {
padding-bottom: 8px;
}
section.micropayment.offer div.step div.flex.presets div.flexbox label {
padding: 8px;
}
section.micropayment.offer div.step div.card div.flexbox.box label.checked,
section.micropayment.offer div.step div.card div.flexbox.box label.checked .h3 {
border-color: rgba( var(--micropayment_black), 1);
background: rgba( var(--micropayment_black), 1);
color: rgba( var(--micropayment_white), 1);
}
section.micropayment.offer div.step div.card div.flexbox.box .visually-hidden {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0, 0, 0, 0);
border: 0;
}
.flexbox.checkbox > input.visually-hidden:focus-visible + label {
outline: 2px solid rgba( var(--micropayment_primary), 1);
outline-offset: 2px;
border-color: rgba( var(--micropayment_primary), 1);
}
.flexbox.checkbox > input.visually-hidden:checked + label {
background-color: rgba( var(--micropayment_black), 1);
border-color: rgba( var(--micropayment_primary), 1);
}
.flexbox.checkbox > input.visually-hidden:checked + label * {
color: rgba( var(--micropayment_white), 1);
}
.flexbox.checkbox > label:hover {
border-color: rgba( var(--micropayment_primary), 1);
}
section.micropayment.offer div.step div.card div.flexbox.error label {
color: var(--micropayment_error);
border-color: var(--micropayment_error);
}
section.micropayment.offer div.step div.card div.flexbox.checkbox.error label,
section.micropayment.offer div.step div.card div.flexbox.radiopl.error label {
background: var(--micropayment_errorLight);
}
section.micropayment.offer div.step div.flex div.flexbox.row label {
font-size: 12px;
line-height: 16px;
cursor: pointer;
text-align: left;
border: none;
justify-content: flex-start;
align-items: flex-start;
padding: 8px 12px 8px 32px;
display: inline-block;
}
section.micropayment.offer div.step div.flex div.flexbox.box.row label input {
position: absolute;
left: 20px;
top: 20px;
display: block;
}
section.micropayment.offer div.step .error input,
section.micropayment.offer div.step .error select {
border-color: var(--micropayment_error);
background: var(--micropayment_errorLight);
}
section.micropayment.offer div.step div.card div.flexbox.headline {
width: 100%;
min-width: 100%;
font-weight: 500;
padding: 24px 12px 0 12px;
}
section.micropayment.offer div.step div.card div.flexbox.box label picture,
section.micropayment.offer div.step div.card div.flexbox.box label i {
display: flex;
justify-content: center;
padding-bottom: 12px;
}
section.micropayment.offer div.step div.card div.flexbox.box label picture img,
section.micropayment.offer div.step div.card div.flexbox.box label i {
height: 40px;
width: auto;
}
section.micropayment.offer div.step div.card div.flexbox.box label i {
height: auto;
text-align: center;
font-size: 40px;
line-height: 40px;
}
section.micropayment.offer div.step div.card div.flexbox.text.top.center label {
text-align: center;
justify-content: center;
}
section.micropayment.offer div.step div.card div.flexbox.text.append,
section.micropayment.offer div.step div.card div.flexbox.text.prepend {
flex-direction: row;
justify-content: center;
}
section.micropayment.offer div.step div.card div.flexbox.text.append label {
order: 999;
background: rgba(var(--micropayment_light), 1);
padding: 0 8px;
display: flex;
align-content: center;
align-items: center;
justify-content: center;
width: auto;
border-radius: 0 var(--micropayment_borderRadius) var(--micropayment_borderRadius) 0;
}
section.micropayment.offer div.step div.card div.flexbox.text.append input {
border-radius: var(--micropayment_borderRadius) 0 0 var(--micropayment_borderRadius);
}
section.micropayment.offer div.step div.card div.flexbox.text.prepend label {
border-radius: var(--micropayment_borderRadius) 0 0 var(--micropayment_borderRadius);
}
section.micropayment.offer div.step div.card div.flexbox.text.prepend input {
border-radius: 0 var(--micropayment_borderRadius) var(--micropayment_borderRadius) 0;
}
section.micropayment.offer div.step div.card div.flexbox.textarea {
padding: 8px 12px;
}
section.micropayment.offer div.step div.card div.flexbox.textarea textarea {
width: 100%;
height: 124px;
}
section.micropayment.offer div.step div.card div.flexbox.textarea.error textarea {
border-color: var(--micropayment_error); 
}
@media ( max-width: 768px ) {
section.micropayment.offer div.step div.flex {
flex-direction: row;
}
section.micropayment.offer div.step div.flex div.flexbox {
max-width: 100%;
text-align: left;
}
section.micropayment.offer div.step div.flex.buttons {
justify-content: flex-end;
width: 100%;
padding: 0 12px;
}
section.micropayment.offer div.assets.form {
order: 99;
}
}
@media ( max-width: 589px ) {
section.micropayment.offer div.step div.flex div.flexbox {
max-width: inherit;
}
section.micropayment.offer div.step div.flex.buttons,
section.micropayment.offer div.step div.flex {
flex-direction: row;
}
section.micropayment.offer div.step div.flex.presets div.flexbox {
max-width: 50%;
min-width: 40%;
}
section.micropayment.offer div.step div.flex div.flexbox.box {
max-width: 100% !important;
min-width: 100% !important;
}
section.micropayment.offer div.step div.flex div.flexbox.box.checkbox.row {
max-width: 100%;
min-width: 100%;
}
section.micropayment.offer div.step div.flex.buttons {
flex-wrap: nowrap;
}
section.micropayment.offer div.step div.flex.buttons .flexbox + .flexbox {
padding: 0;
}
section.micropayment.offer div.step div.card div.flexbox.text {
min-width: 100% !important;
max-width: 100% !important;
}
}   div.processBar {
position: relative;
margin: 0 0 24px 0;
}
div.processBar div.text {
text-align: right;
font-size: 12px;
opacity: 0.6;
}
div.processBar div.processBarLine {
width: 100%;
position: relative;
border-radius: var(--micropayment_borderRadius);
height: 6px;
background: rgba(var(--micropayment_light), 1);
overflow: hidden;
}
.bg-color-light div.processBar div.processBarLine {
background: rgba( var(--micropayment_white), 1);
}
div.processBar div.processBarLine div.fill {
background: rgba( var(--micropayment_primary), 1);
position: absolute;
left: 0;
top: 0;
height: 100%;
border-radius: var(--micropayment_borderRadius);
transition: var(--micropayment_transition);
}   section.micropayment.offer div.steps picture.bg {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 1;
border-radius: var(--micropayment_borderRadius);
}
section.micropayment.offer div.steps picture.bg img {
width: 100%;
height: 100%;
border-radius: var(--micropayment_borderRadius);
object-fit: cover;
}   section.micropayment.offer div.step .rd-captcha {
border: 2px solid rgba( var(--micropayment_black), 0.1);
border-radius: var(--micropayment_borderRadius);
}
@media ( max-width: 768px ) {
section.micropayment.offer div.step .rd-captcha {
flex-direction: column;
align-items: center;
justify-content: center;
}	
}   form#customer-support {
padding: 24px;
background: rgba(var(--micropayment_white), 1);
border-radius: var(--micropayment_borderRadius);
box-shadow: var(--micropayment_boxShadow);
border: 1px solid rgba(var(--micropayment_white), 1);
margin-bottom: 24px;
}
form#customer-support .payments .grid {
gap: 8px;
}
form#customer-support .payment {
position: relative;
}
form#customer-support .payment input {
opacity: 0;
position: absolute;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
z-index: 1;
}
form#customer-support .payment label {
border: 2px solid var(--micropayment_borderColor);
border-radius: var(--micropayment_borderRadius);
padding: 16px;
text-align: center;
position: relative;
z-index: 9;
cursor: pointer;
height: 100%;
}
form#customer-support .payment label:hover {
background-color: rgba( var(--micropayment_black), .05);
}
form#customer-support .payment > input:checked + label {
background-color: rgba( var(--micropayment_black), .05);
border-color: rgba( var(--micropayment_black), 1);
}
form#customer-support .payment label picture {
width: 100%;
height: 32px;
}
form#customer-support .payment label picture img {
width: 100%;
height: 100%;
object-fit: contain;
object-position: center;
}
form#customer-support .payment-token {
display: none;
}
form#customer-support .payment-token {
padding: 16px 24px;
border-radius: var(--micropayment_borderRadius);
background-color: rgba( var(--micropayment_light), 1);
}
form#customer-support textarea {
height: 240px;
}
form#customer-support .hint {
font-size: 14px;
line-height: 20px;
color: rgba( var(--micropayment_black), .56);
padding-left: 24px;
position: relative;
display: inline-flex;
}
form#customer-support .hint::before {
content: "\f05a";
font-family: "Font Awesome 6 Pro"; 
font-display: swap;
font-weight: 900;
position: absolute;
top: 0;
left: 0;
}
@media ( max-width: 768px ) {
.grid.grid-block .gridbox {
grid-column: span 12 !important;
}
.payments .grid .gridbox {
grid-column: span 4 !important;
}
form#customer-support .payment label {
padding: 16px 8px;
}
form#customer-support .payment label picture {
height: 24px;
}
form#customer-support .payment label span {
font-size: 12px;
line-height: 14px;
}
}