:root {
--rls-angebot-blue: #006ab3; --rls-angebot-blue-dark: #00507f; --rls-angebot-blue-soft: #eaf4fb; --rls-angebot-border: #e2e8ee; --rls-angebot-bg-soft: #f4f8fb; --rls-angebot-text-muted: #5b6672; --rls-angebot-ink: #1d232b; --rls-angebot-radius: 8px;
} .rls-angebot-quote-page,
.rls-angebot-form,
[data-rls-angebot-basket],
.rls-angebot-mini-cart__dropdown,
.rls-angebot-demo-grid,
.rls-angebot-toast,
.rls-angebot-add,
.rls-angebot-submit {
font-family: "Lato", ui-sans-serif, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
color: var(--rls-angebot-ink);
} .rls-angebot-add,
.rls-angebot-submit {
display: inline-flex;
align-items: center;
justify-content: center;
gap: .5em;
background: var(--rls-angebot-blue);
color: #fff;
border: 2px solid transparent;
border-radius: 100px;
padding: .62em 1.5em;
font-weight: 700;
line-height: 1.2;
cursor: pointer;
transition: background .16s ease, transform .05s ease;
text-decoration: none;
}
.rls-angebot-add:hover,
.rls-angebot-submit:hover { background: var(--rls-angebot-blue-dark); color: #fff; }
.rls-angebot-add:active,
.rls-angebot-submit:active { transform: translateY(1px); }
.rls-angebot-add[disabled],
.rls-angebot-submit[disabled] { opacity: .6; cursor: default; }
.rls-angebot-add::before { content: "+"; font-weight: 700; font-size: 1.1em; } .rls-angebot-quote-page {
display: block;
max-width: 1040px;
margin: 0 auto;
}
.rls-angebot-quote-col { margin: 0 0 2rem; }
.rls-angebot-quote-col:last-child { margin-bottom: 0; }
.rls-angebot-quote-title {
font-size: 1.25rem;
margin: 0 0 .75rem;
padding-bottom: .5rem;
border-bottom: 3px solid var(--rls-angebot-blue);
}
.rls-angebot-quote-intro { color: var(--rls-angebot-text-muted); margin: 0 0 1rem; }
.rls-angebot-quote-col--form {
background: var(--rls-angebot-bg-soft);
border: 1px solid var(--rls-angebot-border);
border-radius: var(--rls-angebot-radius);
padding: 1.5rem;
}
@media (max-width: 600px) {
.rls-angebot-quote-col { margin-bottom: 1.5rem; }
.rls-angebot-quote-col--form { padding: 1.1rem; }
.rls-angebot-quote-title { font-size: 1.15rem; }
} .rls-angebot-mini-cart { position: relative; display: inline-block; line-height: 1; }
.rls-angebot-mini-cart__trigger { font: inherit; color: inherit; text-decoration: none; cursor: pointer;
display: inline-block;
}
.rls-angebot-mini-cart__trigger:hover { color: inherit; text-decoration: none; }
.rls-angebot-mini-cart__count { font: inherit; color: inherit; } .rls-angebot-mini-cart__dropdown {
display: block;
position: absolute; top: calc(100% + 14px); right: 0; z-index: 9999;
min-width: 300px; max-width: 90vw;
background: #fff; color: #222;
border: 1px solid var(--rls-angebot-border); border-radius: var(--rls-angebot-radius);
box-shadow: 0 10px 30px rgba(0,0,0,.15);
padding: .8em; text-align: left; font-weight: 400;
opacity: 0; visibility: hidden; transform: translateY(6px);
transition: opacity .15s ease, transform .15s ease, visibility .15s;
} .rls-angebot-mini-cart__dropdown::before {
content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px;
}
.rls-angebot-mini-cart:hover .rls-angebot-mini-cart__dropdown,
.rls-angebot-mini-cart:focus-within .rls-angebot-mini-cart__dropdown {
opacity: 1; visibility: visible; transform: translateY(0);
}
.rls-angebot-mini-cart__empty { display: block; color: var(--rls-angebot-text-muted); font-style: italic; margin: .2em 0; }
.rls-angebot-mini-cart__list { display: block; margin: 0 0 .7em; padding: 0; max-height: 340px; overflow-y: auto; }
.rls-angebot-mini-cart__row {
display: flex; align-items: center; gap: .6em;
padding: .5em 0; border-bottom: 1px solid var(--rls-angebot-border); font-size: .9rem;
}
.rls-angebot-mini-cart__row:last-child { border-bottom: none; }
.rls-angebot-mini-cart__thumb img { width: 40px; height: auto; border-radius: 5px; border: 1px solid var(--rls-angebot-border); display: block; }
.rls-angebot-mini-cart__name { flex: 1; overflow-wrap: anywhere; }
.rls-angebot-mini-cart__qty { color: var(--rls-angebot-text-muted); white-space: nowrap; }
.rls-angebot-mini-cart__go {
display: block; text-align: center; background: var(--rls-angebot-blue); color: #fff;
padding: .6em; border-radius: 100px; text-decoration: none; font-weight: 700; cursor: pointer;
}
.rls-angebot-mini-cart__go:hover { background: var(--rls-angebot-blue-dark); color: #fff; }
.rls-angebot-mini-cart__trigger { cursor: pointer; }
.rls-angebot-mini-cart .rls-angebot-remove { cursor: pointer; } [data-rls-angebot-basket] { }
.rls-angebot-basket-list { display: flex; flex-direction: column; gap: 10px; }
.rls-angebot-row {
display: flex; align-items: center; gap: 14px;
width: 100%; box-sizing: border-box;
background: var(--rls-angebot-bg-soft);
border: 1px solid var(--rls-angebot-border);
border-radius: 10px;
padding: 12px 15px;
} .rls-angebot-col-name { flex: 1 1 auto; display: flex; align-items: center; gap: 14px; min-width: 0; }
.rls-angebot-thumb { flex: none; }
.rls-angebot-thumb img {
width: 54px; height: 54px; object-fit: contain; background: #fff;
border-radius: 8px; border: 1px solid var(--rls-angebot-border);
display: block; padding: 3px;
}
.rls-angebot-col-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; } .rls-angebot-basket-list a.rls-angebot-item-name,
.rls-angebot-basket-list .rls-angebot-item-name {
font-size: 16px; font-weight: 700; color: var(--rls-angebot-ink);
text-decoration: none; overflow-wrap: anywhere; word-break: break-word; line-height: 1.25;
}
.rls-angebot-basket-list a.rls-angebot-item-name:hover { color: var(--rls-angebot-blue); text-decoration: none; }
.rls-angebot-item-sku { font-size: 13px; color: var(--rls-angebot-text-muted); } .rls-angebot-col-qty { flex: none; }
.rls-angebot-qtybox {
display: inline-flex; align-items: center; gap: 0;
border: 1.5px solid var(--rls-angebot-border); border-radius: 100px;
background: #fff; overflow: hidden; padding: 0;
}
.rls-angebot-basket-list .rls-angebot-qtybox button.rls-angebot-qtybtn {
width: 30px; height: 30px; min-width: 0; display: inline-flex; align-items: center; justify-content: center;
border: none; background: none; color: var(--rls-angebot-blue);
font-size: 18px; font-weight: 700; line-height: 1; cursor: pointer;
padding: 0; margin: 0; box-shadow: none;
transition: background .12s ease;
}
.rls-angebot-basket-list .rls-angebot-qtybox button.rls-angebot-qtybtn:hover { background: var(--rls-angebot-blue-soft); color: var(--rls-angebot-blue); }
.rls-angebot-qtyval {
min-width: 1.9em; padding: 0 .25em; text-align: center;
font-weight: 700; font-size: 15px; color: var(--rls-angebot-ink);
font-variant-numeric: tabular-nums; user-select: none;
} .rls-angebot-col-remove { flex: none; }
.rls-angebot-basket-list button.rls-angebot-remove {
width: 30px; height: 30px; min-width: 0; display: inline-flex; align-items: center; justify-content: center;
border-radius: 50%; background: #fff; border: 1.5px solid var(--rls-angebot-border);
color: var(--rls-angebot-text-muted); font-size: 18px; line-height: 1; cursor: pointer;
padding: 0; margin: 0; box-shadow: none;
transition: border-color .12s ease, color .12s ease, background .12s ease;
}
.rls-angebot-basket-list button.rls-angebot-remove:hover { border-color: #df0029; color: #df0029; background: #fdecec; }
@media (max-width: 600px) {
.rls-angebot-row { gap: 9px; padding: 10px 11px; }
.rls-angebot-col-name { gap: 9px; }
.rls-angebot-thumb img { width: 44px; height: 44px; }
.rls-angebot-basket-list .rls-angebot-qtybox button.rls-angebot-qtybtn { width: 27px; height: 27px; font-size: 16px; }
.rls-angebot-qtyval { min-width: 1.6em; font-size: 14px; }
.rls-angebot-basket-list button.rls-angebot-remove { width: 27px; height: 27px; font-size: 16px; }
}
.rls-angebot-empty { color: var(--rls-angebot-text-muted); font-style: italic; padding: 1em 0; }
.rls-angebot-basket-actions { margin-top: 1em; } .rls-angebot-basket-actions button.rls-angebot-clear {
background: #fff; border: 2px solid var(--rls-angebot-blue); color: var(--rls-angebot-blue);
border-radius: 100px; padding: .5em 1.2em; cursor: pointer; font-size: .9em; font-weight: 700;
box-shadow: none; text-shadow: none; text-transform: none; letter-spacing: normal;
transition: background .14s ease, color .14s ease, border-color .14s ease;
}
.rls-angebot-basket-actions button.rls-angebot-clear:hover { border-color: var(--rls-angebot-blue); color: var(--rls-angebot-blue); background: var(--rls-angebot-blue-soft); } .rls-angebot-form { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem 1rem; }
.rls-angebot-form .rls-angebot-form-messages,
.rls-angebot-form .rls-angebot-field-strasse,
.rls-angebot-form .rls-angebot-field-kommentar,
.rls-angebot-form .rls-angebot-type-checkbox,
.rls-angebot-form .rls-angebot-turnstile,
.rls-angebot-form .rls-angebot-form-actions { grid-column: 1 / -1; }
@media (max-width: 600px) { .rls-angebot-form { grid-template-columns: 1fr; } }
.rls-angebot-form-row { margin: 0; display: flex; flex-direction: column; gap: .3em; }
.rls-angebot-form label { font-weight: 600; font-size: .85rem; color: #333; }
.rls-angebot-form input[type="text"],
.rls-angebot-form input[type="email"],
.rls-angebot-form input[type="tel"],
.rls-angebot-form textarea {
width: 100%; padding: .55em .7em; font-size: .95rem;
border: 1px solid #c7ccd1; border-radius: 6px; background: #fff;
transition: border-color .15s ease, box-shadow .15s ease;
}
.rls-angebot-form input:focus,
.rls-angebot-form textarea:focus {
outline: none; border-color: var(--rls-angebot-blue);
box-shadow: 0 0 0 3px rgba(0,105,179,.15);
}
.rls-angebot-form .rls-angebot-type-checkbox .rls-angebot-checkbox-label {
flex-direction: row; font-weight: 400; font-size: .82rem;
display: flex; gap: .55em; align-items: flex-start; color: #444; line-height: 1.4;
}
.rls-angebot-req { color: #b00; }
.rls-angebot-form .rls-angebot-has-error input,
.rls-angebot-form .rls-angebot-has-error textarea { border-color: #b00; background: #fff7f7; }
.rls-angebot-field-error { display: block; color: #b00; font-size: .82rem; margin-top: .3em; }
.rls-angebot-form-messages:empty { display: none; }
.rls-angebot-form-error {
background: #fdecec; color: #b00; border: 1px solid #f5c2c2;
padding: .6em .8em; border-radius: 6px; font-weight: 600;
}
.rls-angebot-success {
background: #eaf7ee; color: #1a7f37; border: 1px solid #b7e0c3;
padding: .8em 1em; border-radius: var(--rls-angebot-radius); font-weight: 600;
}
.rls-angebot-turnstile { margin: .2em 0; }
.rls-angebot-form-actions { margin-top: .4rem; }
.rls-angebot-submit { width: auto; padding: .55em 1.4em; font-size: .95rem; }
@media (max-width: 600px) { .rls-angebot-submit { width: 100%; } } .rls-angebot-hp {
position: absolute !important; left: -9999px !important;
width: 1px; height: 1px; overflow: hidden;
} .rls-angebot-demo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5em; align-items: start; }
@media (max-width: 860px) { .rls-angebot-demo-grid { grid-template-columns: 1fr; } }
.rls-angebot-demo-product { display: flex; gap: .8em; align-items: center; padding: .6em 0; border-bottom: 1px solid var(--rls-angebot-border); }
.rls-angebot-demo-product .rls-angebot-thumb img { width: 60px; }
.rls-angebot-demo-product__body { display: flex; flex-direction: column; gap: .3em; }
.rls-angebot-demo-product__body small { color: var(--rls-angebot-text-muted); }
.rls-angebot-demo-basket { background: var(--rls-angebot-bg-soft); border: 1px solid var(--rls-angebot-border); border-radius: var(--rls-angebot-radius); padding: 1.2em; }
.rls-angebot-demo-hint { color: var(--rls-angebot-text-muted); font-size: .9em; } .rls-angebot-toast {
position: fixed; left: 50%; bottom: 2em;
transform: translate(-50%, 1em);
background: var(--rls-angebot-blue); color: #fff;
padding: .7em 1.2em; border-radius: var(--rls-angebot-radius);
box-shadow: 0 4px 16px rgba(0,0,0,.2);
opacity: 0; transition: opacity .3s, transform .3s;
z-index: 99999; pointer-events: none; font-weight: 600;
}
.rls-angebot-toast--show { opacity: 1; transform: translate(-50%, 0); }:root {
--rls-kontakt-blue: #0069b3;
--rls-kontakt-blue-dark: #005494;
--rls-kontakt-radius: 8px;
}
.rls-kontakt-form {
display: flex;
flex-direction: column;
gap: .9rem;
max-width: 640px;
}
.rls-kontakt-form-row { margin: 0; display: flex; flex-direction: column; gap: .3em; }
.rls-kontakt-form label { font-weight: 600; font-size: .85rem; color: #333; }
.rls-kontakt-form input[type="text"],
.rls-kontakt-form input[type="email"],
.rls-kontakt-form input[type="tel"],
.rls-kontakt-form textarea {
width: 100%; padding: .55em .7em; font-size: .95rem;
border: 1px solid #c7ccd1; border-radius: 6px; background: #fff;
transition: border-color .15s ease, box-shadow .15s ease;
}
.rls-kontakt-form input:focus,
.rls-kontakt-form textarea:focus {
outline: none; border-color: var(--rls-kontakt-blue);
box-shadow: 0 0 0 3px rgba(0,105,179,.15);
}
.rls-kontakt-type-checkbox .rls-kontakt-checkbox-label {
flex-direction: row; font-weight: 400; font-size: .82rem;
display: flex; gap: .55em; align-items: flex-start; color: #444; line-height: 1.4;
}
.rls-kontakt-req { color: #b00; }
.rls-kontakt-has-error input,
.rls-kontakt-has-error textarea { border-color: #b00; background: #fff7f7; }
.rls-kontakt-field-error { display: block; color: #b00; font-size: .82rem; margin-top: .3em; }
.rls-kontakt-form-messages:empty { display: none; }
.rls-kontakt-form-error {
background: #fdecec; color: #b00; border: 1px solid #f5c2c2;
padding: .6em .8em; border-radius: 6px; font-weight: 600;
}
.rls-kontakt-success {
background: #eaf7ee; color: #1a7f37; border: 1px solid #b7e0c3;
padding: .8em 1em; border-radius: var(--rls-kontakt-radius); font-weight: 600;
}
.rls-kontakt-turnstile { margin: .2em 0; }
.rls-kontakt-form-actions { margin-top: .4rem; }
.rls-kontakt-submit {
display: inline-flex; align-items: center; justify-content: center;
background: var(--rls-kontakt-blue); color: #fff; border: none;
border-radius: var(--rls-kontakt-radius); padding: .6em 1.5em;
font-weight: 600; font-size: .95rem; cursor: pointer;
transition: background .15s ease;
}
.rls-kontakt-submit:hover { background: var(--rls-kontakt-blue-dark); }
.rls-kontakt-submit[disabled] { opacity: .6; cursor: default; }
@media (max-width: 600px) { .rls-kontakt-submit { width: 100%; } } .rls-kontakt-hp {
position: absolute !important; left: -9999px !important;
width: 1px; height: 1px; overflow: hidden;
}