:root {
--wrb-color: #000000;
--wrb-text: #ffffff;
--wrb-hover: #444444;
--wrb-hover-text: #ffffff;
--wrb-label: #ffffff;
--wrb-tip-bg: #000000;
--wrb-tip-color: #ffffff;
--wrb-footer-bg: #1f2937;
} .wrb-fab {
position: fixed;
z-index: 99990;
display: inline-flex;
align-items: center;
gap: 8px;
padding: 12px 18px;
border: 0;
border-radius: 999px;
background: var(--wrb-color);
color: var(--wrb-text);
font-size: 15px;
font-weight: 600;
line-height: 1;
cursor: pointer;
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.wrb-fab:hover {
background: var(--wrb-hover);
color: var(--wrb-hover-text);
transform: translateY(-2px);
box-shadow: 0 10px 26px rgba(0, 0, 0, 0.3);
} .wrb-fab:focus-visible {
outline: 3px solid #ffffff;
outline-offset: 2px;
box-shadow: 0 0 0 6px #1f2937, 0 6px 20px rgba(0, 0, 0, 0.25);
}
.wrb-fab__icon {
flex: 0 0 auto;
} .wrb-fab__label {
color: var(--wrb-label);
} .wrb-fab:hover .wrb-fab__label,
.wrb-footer-bar:hover .wrb-fab__label {
color: var(--wrb-hover-text);
} .wrb-fab__tip {
position: absolute;
left: 50%;
bottom: calc(100% + 10px);
transform: translateX(-50%);
padding: 7px 12px;
border-radius: 8px;
background: var(--wrb-tip-bg);
color: var(--wrb-tip-color);
font-size: 13px;
font-weight: 600;
line-height: 1.2;
white-space: nowrap;
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);
opacity: 0;
pointer-events: none;
transition: opacity 0.25s ease;
display: none;
}
.wrb-fab__tip::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
border: 6px solid transparent;
border-top-color: var(--wrb-tip-bg);
} .wrb-pos-top-left .wrb-fab__tip,
.wrb-pos-top-right .wrb-fab__tip {
bottom: auto;
top: calc(100% + 10px);
}
.wrb-pos-top-left .wrb-fab__tip::after,
.wrb-pos-top-right .wrb-fab__tip::after {
top: auto;
bottom: 100%;
border-top-color: transparent;
border-bottom-color: var(--wrb-tip-bg);
} .wrb-pos-bottom-left .wrb-fab__tip,
.wrb-pos-top-left .wrb-fab__tip {
left: 0;
transform: none;
}
.wrb-pos-bottom-left .wrb-fab__tip::after,
.wrb-pos-top-left .wrb-fab__tip::after {
left: 20px;
transform: none;
}
.wrb-pos-bottom-right .wrb-fab__tip,
.wrb-pos-top-right .wrb-fab__tip {
left: auto;
right: 0;
transform: none;
}
.wrb-pos-bottom-right .wrb-fab__tip::after,
.wrb-pos-top-right .wrb-fab__tip::after {
left: auto;
right: 20px;
transform: none;
}
.wrb-fab__tip--show {
opacity: 1;
}
.wrb-pos-bottom-right  { right: var(--wrb-offset-right, 24px);  bottom: var(--wrb-offset-bottom, 24px); }
.wrb-pos-bottom-left   { left: var(--wrb-offset-left, 24px);   bottom: var(--wrb-offset-bottom, 24px); }
.wrb-pos-top-right     { right: var(--wrb-offset-right, 24px);  top: var(--wrb-offset-top, 24px); }
.wrb-pos-top-left      { left: var(--wrb-offset-left, 24px);   top: var(--wrb-offset-top, 24px); }
.wrb-pos-bottom-center { left: 0; right: 0; bottom: var(--wrb-offset-bottom, 24px); margin: 0 auto; width: fit-content; } .wrb-size-small.wrb-fab  { padding: 8px 14px;  font-size: 13px; }
.wrb-size-large.wrb-fab  { padding: 16px 26px; font-size: 18px; }
.wrb-size-small .wrb-fab__icon { width: 18px; height: 18px; }
.wrb-size-large .wrb-fab__icon { width: 28px; height: 28px; } .wrb-footer-bar {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 99990;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
width: 100%;
margin: 0;
padding: 16px 20px;
border: 0;
background: var(--wrb-footer-bg);
color: var(--wrb-text);
font-size: 16px;
font-weight: 600;
line-height: 1.2;
cursor: pointer;
box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.15);
-webkit-appearance: none;
appearance: none;
transition: filter 0.15s ease;
}
.wrb-footer-bar:hover { filter: brightness(0.92); }
.wrb-footer-bar:focus-visible { outline: 3px solid #ffffff; outline-offset: -5px; }
.wrb-size-small.wrb-footer-bar { padding: 10px 16px; font-size: 14px; }
.wrb-size-large.wrb-footer-bar { padding: 22px 24px; font-size: 19px; } .wrb-reveal {
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity 0.25s ease, visibility 0.25s ease;
}
.wrb-reveal.wrb-reveal--shown {
opacity: 1;
visibility: visible;
pointer-events: auto;
} .wrb-inline-btn {
display: inline-block;
padding: 4px 14px;
border: 0;
border-radius: 6px;
background: var(--wrb-color);
color: var(--wrb-text);
font: inherit;
font-weight: 600;
line-height: 1.4;
cursor: pointer;
vertical-align: baseline;
-webkit-appearance: none;
appearance: none;
}
.wrb-inline-btn:hover {
background: var(--wrb-hover);
color: var(--wrb-hover-text);
}
.wrb-inline-btn:focus-visible {
outline: 3px solid #ffffff;
outline-offset: 2px;
box-shadow: 0 0 0 6px #1f2937;
} .wrb-modal {
position: fixed;
inset: 0;
z-index: 99999;
display: none;
align-items: flex-start;
justify-content: center;
padding: 24px;
overflow-y: auto;
}
.wrb-modal.is-open {
display: flex;
}
.wrb-modal__overlay {
position: fixed;
inset: 0;
background: rgba(15, 23, 42, 0.55);
backdrop-filter: blur(1px);
}
.wrb-modal__dialog {
position: relative;
z-index: 1;
width: 100%;
max-width: 520px;
margin: auto;
background: #fff;
border-radius: 14px;
box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
padding: 28px 28px 18px;
font-family: inherit;
color: #1f2937;
} .wrb-modal .wrb-modal__close {
position: absolute;
top: 12px;
right: 14px;
display: flex;
align-items: center;
justify-content: center;
width: 36px !important;
height: 36px !important;
min-width: 0 !important;
min-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
border-radius: 8px !important;
background: transparent !important;
box-shadow: none !important;
color: #64748b;
font-size: 26px;
line-height: 1;
cursor: pointer;
-webkit-appearance: none;
appearance: none;
}
.wrb-modal .wrb-modal__close:hover {
color: #1f2937;
background: #f1f5f9 !important;
}
.wrb-modal__title {
margin: 0 0 8px;
font-size: 22px;
font-weight: 700;
}
.wrb-modal__intro {
margin: 0 0 18px;
font-size: 14px;
color: #64748b;
} .wrb-field { margin-bottom: 14px; }
.wrb-field label {
display: block;
margin-bottom: 5px;
font-size: 14px;
font-weight: 600;
}
.wrb-field input[type="text"],
.wrb-field input[type="email"],
.wrb-field select,
.wrb-field textarea {
width: 100%;
padding: 10px 12px;
border: 1px solid #cbd5e1;
border-radius: 9px;
font-size: 15px;
font-family: inherit;
box-sizing: border-box;
background: #fff;
color: #1f2937;
}
.wrb-field input:focus,
.wrb-field select:focus,
.wrb-field textarea:focus {
outline: 2px solid #1f2937;
outline-offset: 1px;
border-color: var(--wrb-color);
box-shadow: none;
}
.wrb-field--check label {
display: flex;
align-items: flex-start;
gap: 8px;
font-weight: 500;
}
.wrb-field--check input { margin-top: 3px; }
.wrb-req { color: var(--wrb-color); }
.wrb-error {
display: none;
margin-top: 4px;
font-size: 13px;
color: #dc2626;
}
.wrb-field.has-error input,
.wrb-field.has-error select { border-color: #dc2626; }
.wrb-field.has-error .wrb-error { display: block; }
.wrb-belehrung {
margin: 16px 0;
font-size: 14px;
} .wrb-fstep[data-fstep="1"] .wrb-belehrung {
margin-bottom: 0;
}
.wrb-belehrung a { color: var(--wrb-color); text-decoration: underline; }
.wrb-form__error {
display: none;
margin: 0 0 12px;
padding: 10px 12px;
border-radius: 8px;
background: #fef2f2;
color: #b91c1c;
font-size: 14px;
}
.wrb-form__error.is-visible { display: block; } .wrb-modal .wrb-submit,
.wrb-modal .wrb-next {
width: 100%;
min-height: 0 !important;
padding: 13px 18px !important;
border: 0 !important;
border-radius: 10px !important;
background: var(--wrb-color) !important;
color: var(--wrb-text) !important;
font-size: 16px;
font-weight: 700;
line-height: 1.2;
cursor: pointer;
-webkit-appearance: none;
appearance: none;
box-shadow: none;
}
.wrb-modal .wrb-submit:hover,
.wrb-modal .wrb-next:hover { background: var(--wrb-hover) !important; color: var(--wrb-hover-text) !important; }
.wrb-modal .wrb-submit:disabled { opacity: 0.6; cursor: progress; } .wrb-modal .wrb-back {
min-height: 0 !important;
padding: 13px 18px !important;
border: 1px solid #cbd5e1 !important;
border-radius: 10px !important;
background: #fff !important;
color: #475569 !important;
font-size: 15px;
font-weight: 600;
line-height: 1.2;
cursor: pointer;
-webkit-appearance: none;
appearance: none;
box-shadow: none;
}
.wrb-modal .wrb-back:hover { background: #f8fafc !important; } .wrb-step-indicator {
margin: 0 0 14px;
font-size: 13px;
font-weight: 600;
letter-spacing: 0.02em;
color: #586374;
text-transform: uppercase;
}
.wrb-fstep[hidden] { display: none; }
.wrb-step-actions {
display: flex;
gap: 10px;
margin-top: 4px;
}
.wrb-step-actions .wrb-back { flex: 0 0 auto; }
.wrb-step-actions .wrb-submit { flex: 1 1 auto; } .wrb-hp {
position: absolute;
left: -9999px;
width: 1px;
height: 1px;
overflow: hidden;
} .wrb-step--success { text-align: center; padding: 8px 0; } .wrb-step--success .wrb-modal__title:focus { outline: none; }
.wrb-success__icon {
width: 64px;
height: 64px;
margin: 8px auto 16px;
border-radius: 50%;
background: #16a34a;
color: #fff;
font-size: 34px;
line-height: 64px;
}
.wrb-success__time {
font-weight: 700;
margin: 0 0 10px;
}
@media (max-width: 600px) {
.wrb-modal__dialog { padding: 22px 18px 14px; } .wrb-fab:not(.wrb-fab--mobile-label) .wrb-fab__label { display: none; }
.wrb-fab:not(.wrb-fab--mobile-label) { padding: 14px; } .wrb-fab:not(.wrb-fab--mobile-label) .wrb-fab__tip { display: block; }
} @media (prefers-reduced-motion: reduce) {
.wrb-fab,
.wrb-footer-bar,
.wrb-reveal,
.wrb-fab__tip {
transition: none;
}
.wrb-fab:hover {
transform: none;
}
}