greift sie wieder und gibt jedem umgestellten Icon 5px links und rechts, die
es als Sprite nie hatte (gemessen auf der Artikelseite: Glyphe 5px/5px,
nachgebautes Sprite im selben Slot 0/0). Betroffen u. a. #back-to-top, die
Zurueck-Pfeile der Konto-Templates, der Optionen-Chevron. Die .fas-Sprites
der PHP-Schiene stecken in denselben Buttons und sollen weiter ohne
Seitenabstand stehen — deshalb wird hier nur die Glyphe zurueckgesetzt und
die alte Regel nicht angefasst. */
.custom-btn .fa-sharp {
margin: 0;
}
.btn-outline-primary.custom-btn {
font-family: 'own Open Sans', helvetica, arial, sans-serif;
color: #117A88;
border-color: #117A88;
}
.btn-primary.custom-btn {
font-family: 'own Open Sans', helvetica, arial, sans-serif;
background-color: #117A88;
border-color: #117A88;
color: white;
/* margin-bottom:15px; */
}
.btn-primary.custom-btn:hover,
.btn-outline-primary.custom-btn:hover {
background-color: #0d646f;
border-color: #0d646f;
color: white;
text-decoration: none;
}
/* BS5: .btn.active/.btn:active now sets text via var(--bs-btn-active-color) at
specificity .btn.active (2 classes) — same as .btn-outline-primary.custom-btn above,
so on a tie the later cascade rule wins and the teal text color leaks into the active/
pressed teal-filled state (invisible pill label, e.g. index.html "Steckdose"-Pill,
.collapse-btn in module/product_info/*). BS4's own .active rule had a much higher-
specificity :not(:disabled):not(.disabled) selector that always won; BS5 dropped that,
so we restore it explicitly here (same specificity tier as the :hover rule above). */
.btn-outline-primary.custom-btn.active,
.btn-outline-primary.custom-btn:active {
color: white;
}
/* Nur noch die Typografie, wie bei den custom-btn-Geschwistern darueber. Die
Farben standen hier auf dem alten Bootstrap-Rot und haben $danger ueberstimmt;
ohne sie erben die Knoepfe die Rolle. */
.btn-danger.custom-btn {
font-family: 'own Open Sans', helvetica, arial, sans-serif;
}
.btn-danger.custom-btn:hover {
text-decoration: none;
}
.wrapper {
background-color: #ffffff;
margin: auto;
margin-bottom: 10px;
padding: 5px 10px 50px 10px;
}
@media (max-width: 1199px) {
.wrapper {
width: 100%;
margin-bottom: 0;
padding-bottom: 80px;
}
}
@media (max-width: 767px) {
.wrapper {
width: 100%;
margin-top: 45px;
margin-bottom: 0;
padding-top: 0;
padding-bottom: 80px;
}
}
.slogan {
font-weight: 400;
line-height: 20px;
}
.info-img {
padding-left: 0;
}
.logo-small img {
height: 28px;
}
@media (max-width: 1140px) {
.slogan {
padding-left: 10px;
padding-right: 0;
font-size: 12px;
line-height: 18px;
}
}
@media (max-width: 920px) {
.slogan {
font-size: 10px;
line-height: 16px;
}
}
.logo-small {
display:none;
}
#nav-icons {
display:none;
}
.phone-info, .search-icon {
cursor: pointer;
}
.phone-info:hover, .search-icon:hover {
color: #1499aa;
}
button.navbar-toggler:focus {
outline: none;
}
.navbar-toggler>.close-ico {
display:inline;
}
.navbar-toggler.collapsed>.close-ico,
.navbar-toggler:not(.collapsed)>.navbar-toggler-ico {
display: none;
}
@media (max-width: 767px) {
.navbar-light .navbar-toggler {
padding-left: 0;
border: none;
}
}
@media(max-width: 320px) {
.phone-info {
display: none;
}
}
/* iPad */
@media(min-width: 415px) and (max-width: 767px) {
.phone-info {
display: none;
}
.search-icon {
display: none;
}
ul.navbar-nav {
margin-top: 0;
}
}
.line {
margin-top: 4px;
padding: 0 15px;
}
.line div {
border-bottom: 1px solid #cccccc;
}
.collapsing {
-webkit-transition: all 0.01s ease-out;
-o-transition: all 0.01s ease-out;
transition: all 0.01s ease-out;
}
#discount-banner-container {
position: fixed;
left:0;
top: 0;
height: 100%;
width: 100%;
z-index:1040;
display: flex;
justify-content: center;
align-items: center;
}
#discount-banner {
position: relative;
padding:0;
background-color: #fafafa;
border-radius: 5px;
box-shadow: 0 14px 22px 0 rgba(0, 0, 0, 0.6), 0 15px 35px 0 rgba(0, 0, 0, 0.6);
}
.discount-banner-image {
width: 345px;
overflow: hidden;
}
.discount-banner-text {
width: 345px;
padding: 25px;
text-align: center;
font-weight: bold;
}
@media(max-width: 767px) {
.discount-banner-image {
display: none;
}
}
#discount-banner .head {
font-size: 1.5rem;
color: #117A88;
}
#discount-banner button {
width: 100%;
}
#discount-banner > .discount-banner-closing {
position: absolute;
display:inline-block;
width: 30px;
height: 30px;
right: 0px;
top: 0px;
cursor: pointer;
}
#discount-banner > .discount-banner-closing:before,
#discount-banner > .discount-banner-closing:after {
position: absolute;
left: 13px;
top: 5px;
content: "";
height: 18px;
width: 2px;
background-color: black;
}
.countdown { opacity: 0; transition: opacity 0.3s ease-in-out; }
.countdown.show { opacity: 1; }
#notice-container {
/* position: fixed; */
left: 0;
bottom: 0;
padding: 0;
margin: 0;
width: 100%;
font-size: 0.8rem;
line-height: 1.1rem;
color: black;
z-index: 1100;
}
@media (max-width: 767px) {
#discountNotice {
top: 46px;
}
}
#notice-container > div {
padding: 15px 10px;
}
#discountNotice, .discountNotice {
position: relative;
padding: 0.8rem 0.6rem;
background: #b10000;
color: #fff;
font-size: 1rem;
}
#discountNotice p {
margin-bottom: 8px;
}
#discountNotice > .closeing {
position: absolute;
display:inline-block;
width: 30px;
height: 30px;
right: 15px;
top: 50%;
transform: translateY(-50%);
border-radius: 100%;
border: 1px solid #595959;
background-color: #134e5e;
cursor: pointer;
}
#discountNotice > .closeing:hover {
border-color: #000;
}
#discountNotice > .closeing:before,
#discountNotice > .closeing:after {
position: absolute;
left: 13px;
top: 5px;
content: "";
height: 18px;
width: 2px;
background-color: #fff;
}
#discountNotice > .closeing:before,
#discount-banner > .discount-banner-closing:before {
transform: rotate(45deg);
}
#discountNotice > .closeing:after,
#discount-banner > .discount-banner-closing:after {
transform: rotate(-45deg);
}
#discountNotice > .closeing:hover:before,
#discountNotice > .closeing:hover:after {
background-color: #000;
}
/* ===== Staffelrabatt-Banner (Desktop: alles · Mobil: Stufen bleiben, Zusatz wechselt) ===== */
#discountTiers {
position: relative;
background: #117A88;
color: #fff;
font-size: 1rem;
padding: 0.7rem 2.7rem;
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 0.6rem;
}
#discountTiers .dt-main {
display: inline-flex;
align-items: baseline;
flex-wrap: wrap;
justify-content: center;
gap: 0.5rem;
}
#discountTiers .dt-lead {
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.05em;
text-transform: uppercase;
opacity: 0.72;
}
#discountTiers .dt-stages {
display: inline-flex;
align-items: baseline;
flex-wrap: wrap;
justify-content: center;
gap: 0.5rem;
}
#discountTiers .dt-sep { opacity: 0.4; }
#discountTiers .dt-seg {
display: inline-flex;
align-items: baseline;
gap: 0.28rem;
padding: 0.14rem 0.5rem;
border-radius: 0.3rem;
opacity: 0.7;
transition: opacity 0.25s, background 0.25s;
}
#discountTiers .dt-seg b { font-size: 1.05rem; font-weight: 700; }
#discountTiers .dt-seg i { font-style: normal; font-size: 0.74rem; opacity: 0.85; white-space: nowrap; }
#discountTiers .dt-seg.dt-active { opacity: 1; background: #fff; color: #0c5d68; }
#discountTiers .dt-vrule { width: 1px; height: 22px; background: rgba(255,255,255,0.32); }
#discountTiers .dt-extra {
display: inline-flex;
align-items: center;
gap: 0.55rem;
}
#discountTiers .dt-ex {
display: inline-flex;
align-items: center;
gap: 0.35rem;
white-space: nowrap;
}
#discountTiers .dt-ex-cd { font-weight: 600; }
#discountTiers .dt-fomo {
font-weight: 700;
font-size: 0.74rem;
text-transform: uppercase;
letter-spacing: 0.03em;
background: #ffd27a;
color: #5a3d00;
padding: 0.16rem 0.7rem;
border-radius: 1rem;
white-space: nowrap;
}
#discountTiers .dt-clock { font-weight: 700; font-variant-numeric: tabular-nums; }
#discountTiers > .dt-info {
position: absolute;
display: inline-flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
right: 55px;
top: 50%;
transform: translateY(-50%);
border-radius: 50%;
border: 1px solid rgba(255, 255, 255, 0.55);
background-color: rgba(255, 255, 255, 0.08);
color: #fff;
font-size: 0.95rem;
font-weight: 700;
line-height: 1;
cursor: pointer;
transition: background-color 0.2s, border-color 0.2s, transform 0.2s;
user-select: none;
}
#discountTiers > .dt-info:hover {
background-color: rgba(255, 255, 255, 0.22);
border-color: rgba(255, 255, 255, 0.9);
transform: translateY(-50%) scale(1.08);
}
#discountTiers > .closeing {
position: absolute;
display: inline-block;
width: 30px;
height: 30px;
right: 15px;
top: 50%;
transform: translateY(-50%);
border-radius: 100%;
border: 1px solid #595959;
background-color: #134e5e;
cursor: pointer;
}
#discountTiers > .closeing:before,
#discountTiers > .closeing:after {
position: absolute;
left: 13px;
top: 5px;
content: "";
height: 18px;
width: 2px;
background-color: #fff;
}
#discountTiers > .closeing:before { transform: rotate(45deg); }
#discountTiers > .closeing:after { transform: rotate(-45deg); }
#discountTiers > .closeing:hover { border-color: #000; }
#discountTiers > .closeing:hover:before,
#discountTiers > .closeing:hover:after { background-color: #000; }
/* Mobil: Stufen bleiben in Zeile 1, FOMO/Countdown wechseln in Zeile 2 */
@media (max-width: 767px) {
/* Banner sitzt unter der fixed Mobile-Nav (47px hoch) — Nav bleibt sauber bei top:0 */
body.has-discount-tiers #notice-container { padding-top: 47px; }
/* Wrapper hat normalerweise margin-top:45px (für fixed Mobile-Nav-Offset).
Mit aktivem Banner sitzt der wrapper schon unterm Banner — margin entfernen,
sonst doppelte Lücke zwischen Banner und Hero. */
body.has-discount-tiers .wrapper { margin-top: 0; }
/* Erstes sichtbares Mobile-Element im wrapper ist `.row.mt-3.row-full-width.d-block.d-sm-none`.
Bootstrap's `.mt-3` = 1rem (!important) kollabiert mit wrapper margin-top und
erzeugt 16px Lücke zwischen Banner und Hero. Bei aktivem Banner überschreiben. */
body.has-discount-tiers .row.row-full-width.d-block.d-sm-none.mt-3 {
margin-top: 0 !important;
}
#discountTiers {
flex-direction: column;
gap: 0.25rem;
padding: 0.55rem 2.5rem;
font-size: 0.9rem;
}
#discountTiers .dt-vrule { display: none; }
#discountTiers .dt-lead { display: none; }
#discountTiers .dt-stages { gap: 0.35rem; }
#discountTiers .dt-seg { padding: 0.12rem 0.4rem; }
#discountTiers .dt-seg b { font-size: 0.95rem; }
#discountTiers .dt-extra {
position: relative;
width: 100%;
min-height: 1.5rem;
}
#discountTiers .dt-ex {
position: absolute;
left: 0; right: 0;
top: 50%;
transform: translateY(-50%);
justify-content: center;
transition: opacity 0.5s ease;
}
#discountTiers .dt-ex-cd { opacity: 0; }
#discountTiers.dt-flip .dt-ex-fomo { opacity: 0; }
#discountTiers.dt-flip .dt-ex-cd { opacity: 1; }
/* Info-Icon auf Mobile: kleiner + näher am Close-X */
#discountTiers > .dt-info {
right: 50px;
width: 22px;
height: 22px;
font-size: 0.85rem;
}
}
/* Staffelrabatt-Modal */
.dt-modal {
display: none;
position: fixed;
inset: 0;
z-index: 2000;
background: rgba(0, 0, 0, 0.55);
align-items: center;
justify-content: center;
padding: 1rem;
animation: dt-modal-fade 0.2s ease;
}
.dt-modal.is-open { display: flex; }
@keyframes dt-modal-fade {
from { background: rgba(0, 0, 0, 0); }
to { background: rgba(0, 0, 0, 0.55); }
}
.dt-modal-content {
background: #fff;
border-radius: 10px;
max-width: 460px;
width: 100%;
padding: 2rem 1.75rem 1.5rem;
position: relative;
box-shadow: 0 12px 50px rgba(0, 0, 0, 0.28);
animation: dt-modal-pop 0.25s ease;
text-align: center;
}
@keyframes dt-modal-pop {
from { transform: translateY(20px) scale(0.96); opacity: 0; }
to { transform: translateY(0) scale(1); opacity: 1; }
}
.dt-modal-close {
position: absolute;
top: 0.6rem;
right: 0.8rem;
background: none;
border: none;
font-size: 1.8rem;
line-height: 1;
color: #888;
cursor: pointer;
padding: 0.2rem 0.5rem;
transition: color 0.2s;
}
.dt-modal-close:hover { color: #000; }
.dt-modal-content h3 {
margin: 0 0 0.5rem;
font-size: 1.45rem;
color: #117A88;
font-weight: 700;
}
.dt-modal-lead {
margin: 0 0 1.25rem;
color: #555;
font-size: 0.95rem;
}
.dt-modal-tiers {
list-style: none;
padding: 0;
margin: 0 0 1.25rem;
}
.dt-modal-tiers li {
display: flex;
align-items: baseline;
justify-content: center;
gap: 0.5rem;
padding: 0.6rem 0.75rem;
border-bottom: 1px solid #eef2f3;
font-size: 1rem;
}
.dt-modal-tiers li:last-child { border-bottom: none; }
.dt-modal-pct {
display: inline-block;
min-width: 3.2rem;
font-weight: 700;
font-size: 1.3rem;
color: #117A88;
}
.dt-modal-pct-label { color: #666; font-size: 0.9rem; }
.dt-modal-th { color: #333; }
.dt-modal-note {
margin: 0 0 0.5rem;
font-size: 0.92rem;
color: #444;
line-height: 1.45;
}
.dt-modal-validity {
margin: 0 0 1.25rem;
font-size: 0.85rem;
color: #777;
}
.dt-modal-cta {
display: block;
width: 100%;
background: #117A88;
color: #fff;
border: none;
padding: 0.85rem;
border-radius: 6px;
font-weight: 700;
font-size: 1rem;
cursor: pointer;
transition: background 0.2s;
}
.dt-modal-cta:hover { background: #0c5d68; }
@media (max-width: 480px) {
.dt-modal-content { padding: 1.5rem 1.25rem 1.25rem; }
.dt-modal-content h3 { font-size: 1.25rem; }
.dt-modal-tiers li { font-size: 0.95rem; padding: 0.5rem 0.25rem; }
.dt-modal-pct { font-size: 1.15rem; min-width: 2.8rem; }
}
#cookieNotice {
background: rgba(245,245,245,0.8);
font-size: 0.8rem;
}
.top-info-right span,
.top-info-right a{
padding-left: 10px;
}
.top-info-right span:first-child {
padding-left: 0;
}
.top-claim {
padding-top: 15px;
}
.top-claim h3 {
font-family: 'own Open Sans', helvetica, arial, sans-serif;
font-size: 14px;
margin-top: 20px;
}
.topsearchfield::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
color: #d0d0d0;
opacity: 1; /* Firefox */
}
.topsearchfield:-ms-input-placeholder { /* Internet Explorer 10-11 */
color: #d0d0d0;
}
.topsearchfield::-ms-input-placeholder { /* Microsoft Edge */
color: #d0d0d0;
}
.navbar {
margin-top: 5px;
justify-content:flex-start;
}
.navbar a.nav-link.dropdown-toggle {
font-size: 18px;
line-height: 20px;
color: #595959;
padding: 2px 30px 2px 0;
}
.navbar div.dropdown-menu {
margin-top:0;
padding:0;
border-radius: 0;
min-width: 160px;
}
.navbar .navbar-nav a.dropdown-item {
color: #595959;
font-size: 13px;
line-height: 26px;
padding: 3px 10px;
border-bottom: 1px solid #eeeeee;
white-space: nowrap;
}
.navbar div.dropdown-menu a:last-child {
border: none;
}
.navbar a.dropdown-item:hover {
color: white;
background-color: #117A88;
}
.dropdown:hover>.dropdown-menu {
display: block;
}
@media (max-width:767px) {
.navbar {
margin-top:0px;
padding: 0;
}
.navbar .navbar-collapse {
background-color: white;
z-index: 1039 !important;
max-width: 80%;
}
.navbar a.nav-link.dropdown-toggle {
padding: 10px;
}
.navbar a.nav-link.dropdown-toggle::after {
margin-top:5px;
float: right;
}
.navbar div.dropdown-menu {
border: none;
}
.navbar div.dropdown-menu a:last-child {
border-bottom: 1px solid #eeeeee;
}
.navbar .navbar-nav a.dropdown-item {
padding-left: 35px;
}
}
.custom-carousel-control {
width:5% !important;
}
.custom-carousel-indicators {
margin-bottom: 0.5rem;
}
.main-content .breadcrumb-info .breadcrumb-text {
margin: 13px 0;
font-size: 0.875em;
line-height: 1.7em;
color: #595959;
text-decoration: none;
padding-left: 15px;
text-indent: -1.1em;
}
.main-content .breadcrumb-info hr {
margin: 0;
}
@media (max-width:767px) {
.main-content .breadcrumb-info {
margin-top:4px;
}
.main-content .breadcrumb-info .fas.fa-home {
margin-left: 0;
}
}
.main-content .breadcrumb-info a {
color: #595959;
text-decoration: none;
}
.main-content .breadcrumb-info a:hover {
text-decoration: none;
}
.main-content .box {
padding: 16px 0;
margin-left: 0;
margin-right: 0;
font-size: 16px;
font-weight: bold;
background-color: #f3f3f3;
}
.main-content a:hover, span.mz:hover {
color: #117A88;
text-decoration: underline;
cursor:pointer;
}
.main-content .categories_description h2,
.main-content .categories_description h3,
.main-content .categories_description h4 {
margin-top: 0;
}
span.link {
color: #117a88;
text-decoration: underline;
cursor: pointer;
}
.content a, .content span.a, .categories_description a {
text-decoration: underline;
}
.content a:hover, .content span.a:hover, .categories_description a:hover, span.link:hover, span.link:hover {
color: #02778e;
text-decoration: none;
}
.categories-listing .card {
height:100%;
cursor: pointer;
}
.categories-listing {
margin: 10px 0;
}
.categories-listing a:hover {
text-decoration: none;
}
.categories-listing .card {
min-height: 240px;
height: 100%;
padding: 15px;
/* cursor: pointer; */
}
.categories-listing a {
text-decoration: none;
}
.categories-listing a:hover {
color: #1499aa;
}
.xsell .card-title {
padding-bottom: 0;
border: none;
}
.product-info .tax-info {
font-size: 0.75em;
line-height: 1em;
font-weight: normal;
color: #595959;
}
.product-info .tax-info a {
color: #595959;
}
@media(max-width:575px) {
.categories-listing.left {
padding-right: 2px;
margin: 2px 0;
}
.categories-listing.right {
padding-left: 2px;
margin: 2px 0;
}
.categories-listing .card {
padding: 6px;
}
}
.product-info .img-info,
.image-info-section {
font-size: 11px;
line-height: 15px;
}
.pagination-info {
margin-top:22px;
width: 100%;
}
.pagination .page-item {
margin-right:10px;
}
.pagination .page-item:last {
margin-right: 0;
}
.product-info hr {
margin: 10px 0;
}
.product-info .info-section {
margin-bottom: 16px;
}
.product-info .info-section a, .product-info span.mz, .product-info span.link {
line-height: 1.8em;
}
.info-section .fas,
.image-info-section .fas {
fill: #117A88;
}
.product-info .energielabel {
max-width: 68px;
padding-top: 4px;
}
.product-info .price {
/*color: #117A88;*/
font-size: 25px;
line-height: 130%;
font-weight: bold;
margin: 0 0 5px 0;
}
@media (min-width: 768px) and (max-width: 970px) {
.product-info .price {
font-size: 20px;
}
}
.product-info .shippingtime {
line-height: 22px;
font-weight: normal;
color: #595959;
}
.product-info .shippingtime a, .product-info .shippingtime .a {
color: #595959;
}
@media (min-width:576px) {
.product-image {
margin-top: 10px;
}
}
.more-product-images > div {
margin-top: 10px;
}
#optionen label {
font-size: 1em;
line-height: 1em;
padding-top: 0.4em;
}
#optionen select,
#optionen input,
#optionen textarea {
font-size: 1em;
line-height: 1em;
padding: 2px 8px;
margin: 0;
}
#optionen select,
#optionen input {
height: 1.85em;
padding: 2px 8px;
margin: 0;
}
/* The ID selector above wins over .form-select's own "padding: 2px 25px 2px 8px"
(which reserves room for the BS5 chevron background-image), collapsing the
right padding back to 8px. Restore just the right inset here so long option
text doesn't run under the arrow (product option dropdowns, #optionen select). */
#optionen select {
padding-right: 25px;
}
#optionen hr {
margin: 0 0 5px 0;
}
#optionen p {
margin: 5px 0;
}
#optionen div.form-group {
margin-bottom: 5px;
}
#optionen .input-validation-error {
border-color: red;
}
#optionen .config-error {
color: red;
margin-left: 18px;
}
.addtobasket {
margin-top: 25px;
}
.footer {
/* Nur margin-top setzen — das margin-Shorthand haette margin-left/right auf 0
gesetzt und damit die .container-Auto-Margins (Zentrierung) ueberschrieben. */
margin-top: 20px;
font-size: 13px;
}
.footer-headline {
font-size: 20px;
font-weight: bold;
color: #595959;
margin-top: 20px;
line-height: 23px;
}
.footer .nav a, .footer .nav span {
color: #595959;
font-size: 13px;
padding: 6px 0;
border-bottom: 1px solid #dddddd;
}
.footer .nav a:hover, .footer .nav span:hover {
color: #117A88;
}
.footer .social a {
margin-left: 25px;
}
.footer .social a:first-child {
margin-left:0;
}
#errorDialog .modal-title h5 {
margin: 0;
color: #1499aa;
}
#errorDialog .modal-title i {
color: #ee0000;
}
.errormessage p,
.infomessage p {
margin: 2px 0;
}
.required {
color: #ee0000;
}
.shopping_card_btn .btn.custom-btn {
margin-top: 3px;
}
.addtobasket-button .btn.custom-btn {
background-color: #117A88;
border-color: #117A88;
padding: 12px;
}
.addtobasket-button .btn.custom-btn:hover {
background-color: #117A88;
border-color: #117A88;
}
.shipping-costs {
font-weight: 700;
}
.checkoutnavigation .title {
padding-left: 23px;
color: #999;
vertical-align: bottom;
}
.checkoutnavigation .active {
font-weight: bold;
color: #595959;
}
.listfilter {
margin: 5px 0 10px 0;
padding: .25rem .5rem .5rem .5rem;
border-radius: 5px;
}
.order-details li {
line-height: 25px;
}
.btn-circle.btn-xl {
width: 48px;
height: 48px;
padding: 7px 8px;
border-radius: 30px;
line-height: 1.33;
}
.btn-circle {
width: 30px;
height: 30px;
padding: 6px 0px;
border-radius: 15px;
text-align: center;
font-size: 12px;
line-height: 1.42857;
}
.back-to-top {
cursor: pointer;
position: fixed;
opacity: 0.8;
bottom: 66px;
right: 22px;
display: none;
}
@media (max-width:1010px) {
.back-to-top {
bottom: 10px;
right: 10px;
}
#lz_overlay_wm {
margin: 0 10px 65px 0 !important;
}
}
@media all and (min-width:576px) {
.listfilter,
#collapseMoreOptions {
display: block;
}
}
@media screen and (max-width:575px) {
.listfilter:not(.collapse),
#collapseMoreOptions:not(.collapse) {
display: none;
}
}
@media print {
.listfilter:not(.collapse),
#collapseMoreOptions:not(.collapse) {
display: block;
}
}
.amazonBoxes1 {
width: 100%;
}
.amazonBoxes1 > #addressBookWidgetDiv,
.amazonBoxes1 > #walletWidgetDiv {
height:250px;
}
.amz-checkout-product-actions a:hover{
text-decoration: none;
}
.cba_item_img {
width: 60px;
display: block;
float: left;
clear: left;
margin-right:4px;
}
.cba_item_img img {
width: 60px;
max-width: 60px;
}
.priceSpalte {
width: 90px;
display: block;
float: right;
}
.cba_clearer {
clear: both;
font-size: 0;
line-height:0;
}
.cba_item_qty {
font-size: 10px;
width: 25px;
float: left;
}
.cba_item_title {
font-size: 11px;
float:left;
clear:both;
}
.cba_item_price {
font-size: 11px;
text-align:right;
padding-bottom: 5px;
padding-top: 2px;
}
.cba_cart_value {
text-align: right;
font-size:12px;
font-weight: bold;
margin-bottom:15px;
}
.cba_item_list_odd {
background-color: #efefef;
}
#AmazonOrderTotals{
float:right;
padding-top:5px;
margin-top:5px;
border-top:1px solid #ddd;
}
#AmazonProducts table{
width:100%;
}
#AmazonProducts table tr:first-child td{
padding-left:5px;
}
#AmazonOrderTotals{
width:66%;
}
#AmazonOrderTotals > table{
width:100%;
}
.amzOtPrice{
white-space:nowrap;
text-align:right;
padding-left:8px;
}
@media (min-width:769px){
.amazonCheckoutFinal1{
float:right;
width:49%;
}
#AmazonPartRight{
margin-top:0;
}
}
@media (max-width:600px){
#AmazonProducts tr td:nth-child(3),
#AmazonProducts tr td:nth-child(5){
display:none;
}
}
.rating {
float:left;
}
.rating:not(:checked) > input {
position:absolute;
top:-9999px;
clip:rect(0,0,0,0);
}
.rating:not(:checked) > label {
float:right;
width:1em;
padding:0 .1em;
overflow:hidden;
white-space:nowrap;
cursor:pointer;
font-size:200%;
line-height:1.2;
color:#ddd;
}
.rating:not(:checked) > label:before {
content: '★ ';
}
.rating > input:checked ~ label {
color: #f9f900;
text-shadow:1px 1px goldenrod, 1px 1px #b5b500, .1em .1em .2em rgba(0,0,0,.5);
}
.rating:not(:checked) > label:hover,
.rating:not(:checked) > label:hover ~ label {
color: #f9f900;
text-shadow:1px 1px goldenrod, 1px 1px #b5b500, .1em .1em .2em rgba(0,0,0,.5);
}
.rating > input:checked + label:hover,
.rating > input:checked + label:hover ~ label,
.rating > input:checked ~ label:hover,
.rating > input:checked ~ label:hover ~ label,
.rating > label:hover ~ input:checked ~ label {
color: #f9f900;
text-shadow:1px 1px goldenrod, 1px 1px #b5b500, .1em .1em .2em rgba(0,0,0,.5);
}
a.customer-reviews {
color: #595959;
}
a.customer-reviews:hover {
text-decoration: none;
}
.textfeld-info {
padding: 12px 15px 5px 32px;
}
.z:hover {
color: #117a88;
text-decoration: none;
}
.z {
cursor:pointer;
/* Containing block for .energielabel-overlay/.germany-overlay (both
position:absolute, siblings inside this span in module/product_info/*.html).
Under BS4 something upstream (never found in this stylesheet — likely an
implicit BS4 default that BS5 dropped) gave this span a positioned ancestor;
without it the badges escape to the initial containing block (page top-left)
instead of anchoring to the product thumbnail. Verified live: PDP A++ badge +
Made-in-Germany overlay both re-anchor correctly with this one rule. */
position: relative;
}
.contactcenter-link.z:hover {
color: white;
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
}
.germany-overlay {
position: absolute;
bottom: 20px;
right: 10px ;
height: 100%;
width: 100%;
/* Containment guard: this box's own height:100% resolves against .z's
collapsed inline box when the product photo is missing/broken (test
stack) — the nested ohne Geometrie:
.video hat height:0, und die absolute Positionierung darueber gilt nur fuer
iframe/video - die Flaeche bliebe unsichtbar statt sichtbar defekt.
Die drei Bloecke sind aus youtube_player.css hierher VERSCHOBEN, nicht
kopiert; dort steht weiterhin das Erscheinungsbild (Poster-Bild, Hover/Fokus,
Fehlerzustand, Fortschrittsleiste, Galerie). */
.pytv-ratio {
position: relative;
width: 100%;
height: 0;
overflow: hidden;
border-radius: .25rem;
background: #000;
}
[data-pytv="facade"] {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
cursor: pointer;
background: #000;
overflow: hidden;
}
/* Der Abspielknopf holte seine Positionierung bisher aus der Bootstrap-Utility
.position-absolute (build.css) plus Inline-Stil. Damit die Flaeche auch dann
stimmt, wenn nur dieses Stylesheet da ist, steht die Geometrie jetzt hier -
ebenfalls verschoben, nicht kopiert. pointer-events:none sorgt dafuer, dass
der Klick immer auf der Fassade landet. */
[data-pytv="play"] {
width: auto !important;
height: auto !important;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 2;
border-radius: 50rem;
transition: opacity .15s ease-in-out, background-color .15s ease-in-out;
pointer-events: none;
}
@media (min-width: 576px){
.sharelinks {
text-align: right;
}
}
@media (max-width: 767px) {
.text-xs-center {
text-align: center;
}
}
@media (max-width:576px) {
body {
font-size: 1rem;
line-height: 1.55rem;
}
.wrapper {
padding: 0 0 120px 0;
}
#mainNav .navbar-toggler {
padding-top: 0;
padding-bottom: 0;
}
.logo-small img {
height: 47px;
padding-top:5px;
padding-bottom: 5px;
margin-left: 5px
}
.row {
margin: 0 -12px;
}
.col, .col-1, .col-10, .col-11, .col-12, .col-2, .col-3, .col-4, .col-5,
.col-6, .col-7, .col-8, .col-9, .col-auto, .col-lg, .col-lg-1, .col-lg-10,
.col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6,
.col-lg-7, .col-lg-8, .col-lg-9, .col-lg-auto, .col-md, .col-md-1, .col-md-10,
.col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6,
.col-md-7, .col-md-8, .col-md-9, .col-md-auto, .col-sm, .col-sm-1, .col-sm-10,
.col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6,
.col-sm-7, .col-sm-8, .col-sm-9, .col-sm-auto, .col-xl, .col-xl-1, .col-xl-10,
.col-xl-11, .col-xl-12, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6,
.col-xl-7, .col-xl-8, .col-xl-9, .col-xl-auto {
padding-right: 10px;
padding-left: 10px;
}
.navbar .navbar-nav a.dropdown-item {
font-size: 1em;
line-height: 1.6em;
}
.col-form-label {
margin-top: 5px;
font-weight: bold;
}
.footer .fas,
.info-section .fas,
.info-image-section .fas {
margin-right: 5px;
}
/* Schwester zur Regel darueber. Gilt nur unterhalb 576px und war deshalb bei
den 500px-Messungen der Umstellung zwar im Bereich, aber im Screenshot
nicht als Unterschied zu erkennen — 5px Luft neben einem Icon liest sich
nicht als Diff. Gemessen bei 390px: Glyphe margin-right 0, nachgebautes
Sprite im selben Slot 5px. Betrifft im Footer die Telefon- und
Mail-Icons; die beiden anderen Arme des Selektors sind mitgezogen, weil
.info-section Inhalte aus der Datenbank rendert und dort beide Formen
nebeneinander stehen koennen (.info-image-section hat im ganzen Shop kein
Markup, bleibt aber als Paar zur Regel darueber erhalten). */
.footer .fa-sharp,
.info-section .fa-sharp,
.info-image-section .fa-sharp {
margin-right: 5px;
}
.footer, .footer .nav a, .footer .nav span {
font-size: 1em;
}
.footer-headline {
font-size: 1em;
line-height: 1.2em;
}
}
/* Das :not(.fa-sharp) ist der eigentliche Inhalt dieser beiden Regeln, nicht
eine Verschaerfung nebenbei. Sie stammen aus der Zeit vor den SVG-Sprites und
schrieben einem leeren
im Aufklapp-Button den Chevron per Codepoint vor.
Seit die Icons waren, lagen sie brach; mit der Rueckkehr
zum greifen sie wieder — und zwar staerker als die Font-Awesome-Klasse
des Icons selbst: (0,2,2) schlaegt .fa-chevron-down::before mit (0,1,1),
auch wenn icons.css zuletzt geladen wird. Gemessen an
module/includes/options/more_options_button.html: zugeklappt U+f078,
aufgeklappt U+f077 — das Icon wechselte also, obwohl seine Klasse
unveraendert fa-chevron-down heisst. Als Sprite stand derselbe Chevron in
beiden Zustaenden still.
Der Wechsel waere fuer sich genommen eine Verbesserung, aber keine, die
jemand entschieden hat, und er nimmt dem Icon die Kontrolle ueber sein
eigenes Aussehen. Deshalb hier zurueck auf den Stand vor der Umstellung; ein
gewollter Wechsel gehoerte an dieselbe Stelle wie beim Aufklapp-Chevron der
Artikelseite (.product-info-details-container … :not(.collapsed) .fa-sharp)
— als transform auf .fa-sharp, nicht als content.
Die Regeln bleiben stehen, weil sie fuer ein ohne eigene Icon-Klasse
weiterhin das einzige sind, was dort ueberhaupt ein Zeichen erzeugt. */
[data-toggle="collapse"].collapseButton > i:not(.fa-sharp):before,
[data-bs-toggle="collapse"].collapseButton > i:not(.fa-sharp):before {
content: "\f077";
}
[data-toggle="collapse"].collapseButton.collapsed i:not(.fa-sharp):before,
[data-bs-toggle="collapse"].collapseButton.collapsed i:not(.fa-sharp):before {
content: "\f078";
}
.collapseButton {
width: 100%;
}
[data-toggle="collapse"].filterbutton > span:after,
[data-bs-toggle="collapse"].filterbutton > span:after {
content: " ausblenden ";
}
[data-toggle="collapse"].filterbutton.collapsed span:after,
[data-bs-toggle="collapse"].filterbutton.collapsed span:after {
content: " anzeigen ";
}
[data-toggle="collapse"].moreOptionsButton > span:before,
[data-bs-toggle="collapse"].moreOptionsButton > span:before {
content: "Weniger ";
}
[data-toggle="collapse"].moreOptionsButton.collapsed span:before,
[data-bs-toggle="collapse"].moreOptionsButton.collapsed span:before {
content: "Mehr ";
}
[data-csscontent]:before {
content: attr(data-csscontent);
}
hr.ci {
margin: 0 auto;
width: 50%;
height: 1px;
border: 0;
border-top: #117A88 solid 1px;
margin: 2em auto;
display: block;
}
.card-body-small {
padding: 1.25rem 0 0 0;
}
.block {
display: block;
text-align: center;
padding: 4px 5px;
}
.navbar-light .navbar-toggler{color:#595959;}
/* Anchor not underlined */
.anu {
color: #117A88;
text-decoration: none !important;
}
.anu:hover {
text-decoration: underline !important;
cursor: pointer;
}
.r {
text-align: right;
}
@media (max-width: 576px) {
.categories-listing .card-body {
padding: 1em 0;
}
.categories-listing .card-title {
margin: 0;
}
}
ul.row {
padding: 0;
margin-top: 0;
}
li.product-listing {
list-style: none;
padding: 0;
}
.addtobasket-button button {
width:100%;
}
/* Sharing Buttons */
#share {
text-align: right;
}
@media (max-width: 440px) {
.resp-sharing-button span {
display: none;
}
.resp-sharing-button__icon svg {
margin-right: 0 !important;
}
}
.resp-sharing-button__link,
.resp-sharing-button__icon {
display: inline-block
}
.resp-sharing-button__link {
text-decoration: none;
color: #fff !important;
margin: 0.5em 0 0.5em 0.5em;
}
.resp-sharing-button {
border-radius: 5px;
transition: 25ms ease-out;
padding: 0.5em 0.75em;
font-family: Helvetica Neue,Helvetica,Arial,sans-serif
}
.resp-sharing-button__icon svg {
width: 1em;
height: 1em;
margin-right: 0.4em;
vertical-align: top
}
.resp-sharing-button--small svg {
margin: 0;
vertical-align: middle
}
/* Non solid icons get a stroke */
.resp-sharing-button__icon {
stroke: #fff;
fill: none
}
/* Solid icons get a fill */
.resp-sharing-button__icon--solid,
.resp-sharing-button__icon--solidcircle {
fill: #fff;
stroke: none
}
.resp-sharing-button--twitter {
background-color: #55acee
}
.resp-sharing-button--twitter:hover {
background-color: #2795e9
}
.resp-sharing-button--pinterest {
background-color: #bd081c
}
.resp-sharing-button--pinterest:hover {
background-color: #8c0615
}
.resp-sharing-button--facebook {
background-color: #3b5998
}
.resp-sharing-button--facebook:hover {
background-color: #2d4373
}
.resp-sharing-button--tumblr {
background-color: #35465C
}
.resp-sharing-button--tumblr:hover {
background-color: #222d3c
}
.resp-sharing-button--reddit {
background-color: #5f99cf
}
.resp-sharing-button--reddit:hover {
background-color: #3a80c1
}
.resp-sharing-button--google {
background-color: #dd4b39
}
.resp-sharing-button--google:hover {
background-color: #c23321
}
.resp-sharing-button--linkedin {
background-color: #0077b5
}
.resp-sharing-button--linkedin:hover {
background-color: #046293
}
.resp-sharing-button--email {
background-color: #777
}
.resp-sharing-button--email:hover {
background-color: #5e5e5e
}
.resp-sharing-button--xing {
background-color: #1a7576
}
.resp-sharing-button--xing:hover {
background-color: #114c4c
}
.resp-sharing-button--whatsapp {
background-color: #25D366
}
.resp-sharing-button--whatsapp:hover {
background-color: #1da851
}
.resp-sharing-button--hackernews {
background-color: #FF6600
}
.resp-sharing-button--hackernews:hover, .resp-sharing-button--hackernews:focus { background-color: #FB6200 }
.resp-sharing-button--vk {
background-color: #507299
}
.resp-sharing-button--vk:hover {
background-color: #43648c
}
.resp-sharing-button--facebook {
background-color: #3b5998;
border-color: #3b5998;
}
.resp-sharing-button--facebook:hover,
.resp-sharing-button--facebook:active {
background-color: #2d4373;
border-color: #2d4373;
}
.resp-sharing-button--twitter {
background-color: #55acee;
border-color: #55acee;
}
.resp-sharing-button--twitter:hover,
.resp-sharing-button--twitter:active {
background-color: #2795e9;
border-color: #2795e9;
}
.resp-sharing-button--pinterest {
background-color: #bd081c;
border-color: #bd081c;
}
.resp-sharing-button--pinterest:hover,
.resp-sharing-button--pinterest:active {
background-color: #8c0615;
border-color: #8c0615;
}
.resp-sharing-button--linkedin {
background-color: #0077b5;
border-color: #0077b5;
}
.resp-sharing-button--linkedin:hover,
.resp-sharing-button--linkedin:active {
background-color: #046293;
border-color: #046293;
}
.resp-sharing-button--xing {
background-color: #1a7576;
border-color: #1a7576;
}
.resp-sharing-button--xing:hover
.resp-sharing-button--xing:active {
background-color: #114C4C;
border-color: #114C4C;
}
#share a, #share span {
line-height: 1em !important;
cursor: pointer;
}
.test {
padding-right: 15px;
padding-left: 15px;
display: flex;
flex-wrap: wrap;
}
.rowtest {
padding-right: 0px;
padding-left: 0px;
}
@media (max-width: 576px) {
.test {
padding-right: 10px;
padding-left: 10px;
}
}
.t1 {
order: 1;
}
.t2 {
order: 2;
}
.t3 {
order: 3;
}
.t4 {
order: 4;
}
.t5 {
order: 5;
}
dl, ol {
margin-top: 1rem;
margin-bottom: 1rem;
}
.btn {
white-space: normal !important;
}
h1, h2, h3, h4, p {
width: 100% !important;
}
.interactive li {
min-height: 48px;
margin: 16px 0;
}
.input-group {
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
}
/* Bleibt bewusst stehen (geprueft 2026-08-04). Die Regel faerbt nur, sie nimmt
nichts weg — und sie erreicht auch nur das, was noch einen Browser-Fokusring
hat. An Formularfeldern und Buttons kommt sie nicht an: deren eigenes
`outline: 0` aus Bootstrap ist (0,2,0) und schlaegt `*:focus` mit (0,1,0).
A/B im Browser gemessen, indem die Regel zur Laufzeit im CSSOM an- und
ausgeschaltet wurde: an -Elementen wird aus Chromiums Standardring
rgb(0,95,204) der Markenton rgb(17,122,136); an input.form-control, button
und .btn aendert sich nichts, in keine Richtung. Beide Toene liegen deutlich
ueber den 3:1 aus WCAG 1.4.11 — Chromium-Blau 5.99:1, Tuerkis 5.05:1 auf
Weiss und 4.51:1 auf dem Papierton der Seite —, und der Ring bleibt sichtbar
(screenshot-geprueft, `outline-style: auto` zeichnet weiter).
Massstab fuer die noch folgenden Partials: eine Regel, die eine Fokusanzeige
nur EINFAERBT, darf bleiben; eine, die sie ABSCHALTET (`outline: none/0` oder
`box-shadow: none` im Fokuszustand), muss weg. Nach diesem Massstab ist
`button.navbar-toggler:focus { outline: none }` in Zeile 884 offen — gehoert
zum Navbar-Schritt, nicht hierher.
NACHTRAG 2026-08-04: der Navbar-Schritt ist inzwischen gelaufen (Commit
dab08edf, scss/custom/_navbar.scss) und hat diese Zeile nicht angefasst. Der
Punkt wird hier GESCHLOSSEN, nicht weitergereicht, weil er materiell
gegenstandslos ist: `navbar-toggler` kommt in diesem Shop nirgends vor —
0 Treffer in Templates, PHP, JS und content_manager —, die Regel kann also
keine Anzeige abschalten. Sollte je ein Toggler auftauchen, liefert
`.navbar .navbar-toggler:focus-visible { box-shadow: … }` (0,3,0) aus dem
Partial bereits eine gueltige ERSATZ-Anzeige im Sinne des Massstabs oben.
Warnung fuers Nachmessen: Chromium serialisiert `*:focus` im CSSOM als
`:focus`. Wer im DevTools-Skript nur auf `*:focus` prueft, findet die Regel
nicht und haelt sie faelschlich fuer tot. */
*:focus {
outline-color: #117a88;
}
/* Hier stand bis 2026-08-04:
.form-control:focus {
border-color: #117a88 !important;
box-shadow: none !important;
}
Beide Haelften sind entfallen, aus zwei verschiedenen Gruenden.
Das `box-shadow: none !important` stammt aus dem Initial Commit von 2020 und
damit aus der Bootstrap-4-Zeit (die 2026-07-13 daran sichtbare Aenderung war
nur ein entferntes Leerzeichen am Zeilenende — per git blame und git log -S
geprueft). BS 4.3.1, das damals hier vendort lag, gab jedem fokussierten Feld
`border-color:#80bdff; box-shadow:0 0 0 .2rem rgba(0,123,255,.25)` — also
Bootstrap-Blau. Aus einem Stylesheet liess sich dieser Schein nicht umfaerben,
nur abschalten; genau das war der Zweck der Zeile, und die Zeile darueber hat
die blaue Randfarbe durch das Tuerkis ersetzt.
In BS 5.3 faellt dieser Zweck weg: der Ring rechnet sich aus $primary und ist
dadurch von sich aus tuerkis, rgba(17,122,136,.25). Was blieb, war eine Regel,
die den einzigen Fokusring des Feldes abschaltet und als Anzeige nur noch
einen Farbwechsel uebrig laesst — unsichtbar fuer alle, die Tuerkis nicht von
Grau trennen koennen, und im Forced-Colours-Modus gar nichts. Gemessen am
2026-08-04 bei Tastaturfokus: box-shadow none UND outline-style none an
Login-, Kontaktcenter-, Warenkorb- und Filterfeldern. Dieselbe Begruendung wie
bei der Sonderangebots-Regel in Zeile 3504-3505, nur eine Ebene tiefer.
Das `border-color: #117a88 !important` ist nicht ersatzlos weg, sondern
umgezogen: scss/custom/_forms.scss setzt `.form-control:focus { border-color:
var(--bs-primary) }`, und --bs-primary ist derselbe Wert #117a88. Der Rand ist
vorher wie nachher tuerkis. Das `!important` wurde dabei nicht gebraucht — es
stand gegen nichts: die einzige spaetere Regel dieser Datei, die Formularfelder
anfasst, ist `.form-check-input:checked` in Zeile 4318, und die betrifft weder
.form-control noch den Fokuszustand.
Ein Feld verliert dadurch seinen Ring trotzdem: `.search-hero__bar
.form-control:focus { box-shadow: none }` in scss/_search.scss ist (0,3,0) und
gewinnt weiterhin. Das ist eine eigene, seitenbezogene Entscheidung und gehoert
zu diesem Partial, nicht hierher — vermerkt, damit es nicht als Nebenwirkung
dieser Aenderung gelesen wird.
NACHTRAG 2026-08-04: "gehoert zu diesem Partial" ist KEIN benannter Task, und
Klausel 3 der Fokus-Regel dieser Runde verlangt genau den. Zwei LIVE-Felder
sind betroffen — `.search-hero__bar .form-control` und `.form-select` auf
/advanced_search.php haben bei :focus-visible weder outline noch box-shadow
noch border. Kein Regress (scss/_search.scss wurde in dieser Runde nicht
angefasst, und vorher toetete das entfernte `box-shadow: none !important`
den Ring ohnehin auf jedem Feld), aber unbesitzt. Jetzt gebucht auf
docs/superpowers/specs/2026-08-04-theme-slots-design.md, wo bereits der
Fokusring-Halo liegt. Damit ist der Punkt einem benannten Task zugeordnet und
darf getragen werden. */
.bluebox {
margin-top: 15px;
border: 2px solid #ccc;
}
.bluebox a {
padding: 30px 10px;
text-align: center;
display: block;
color: #ccc;
text-decoration: none;
}
.inview {
position: sticky;
position: -webkit-sticky; /* Safari */
top: -12px;
z-index: 1019;
background: #fff;
border-bottom: 1px solid #ccc;
margin-bottom: 20px;
padding-bottom: 10px;
font-size: 1.15em;
}
@media (max-width: 767px) {
.inview {
top: -8px;
}
}
.modal-header {
background-color: #fff;
position: sticky;
top: 0;
z-index: 1019;
}
.notice {
padding: 15px;
background:rgb(220, 220, 220);
}
@media print {
.noprint, footer, #cookieNotice, #back-to-top, .navbar,
.info-section > span, .image-info-section > span,
.info-section > a, .image-info-section > a,
.info-section > p, .image-info-section > p {
display: none;
}
.info-section p.img-info,
.image-info-section p.img-info {
display: block !important;
}
#txt139 {
height: 220px;
}
}
#tabs input {
display: none;
}
#tabs label {
display: inline-block;
margin: 0 0 -1px;
padding: 15px 25px;
font-weight: 600;
text-align: center;
color: #000;
border: 1px solid transparent;
}
#tabs label:hover {
color: #117A88;
cursor: pointer;
}
#tabs input:checked + label {
color: #117A88;;
border: 1px solid #117A88;
border-top: 2px solid #117A88;
border-bottom: 1px solid #fff;
}
#tabs section {
border-top: 1px solid #abc;
}
.table-scrollable {
width: 100%;
overflow-y: auto;
margin: 0 0 1em;
}
.table-scrollable::-webkit-scrollbar {
-webkit-appearance: none;
width: 14px;
height: 14px;
}
.table-scrollable::-webkit-scrollbar-thumb {
border-radius: 8px;
border: 3px solid #fff;
background-color: rgba(0, 0, 0, .3);
}
@media (min-width: 767px) {
.hidden-md {
display: none !important;
}
}
.b {
font-weight: bold;
}
.sr-only {
white-space: normal;
}
.imagemap a {
color: transparent;
}
#discountNotice a, .discountNotice a {
color: #fff !important
}
@media print {
.inview {
position: static;
}
}
.toc {
margin: 0 0 1em 0;
padding: 1em;
border: #ccc 1px solid;
background: #eee;
}
@media (min-width: 767px) {
.toc {
float: right;
margin: 0 0 1em 2em;
}
}
.toc ol {
padding: 0 0 0 2em;
margin: 1em 0 0 0;
line-height: 150%;
}
#CybotCookiebotDialogBody {
max-width: 1170px !important;
}
#CybotCookiebotDialogBodyLevelButtonLevelOptinAllowAll, #CybotCookiebotDialogBodyLevelButtonLevelOptinAllowallSelection, #CybotCookiebotDialogBodyLevelButtonLevelOptinDeclineAll {
background-color: #117A88 !important;
border: 1px solid #117A88 !important;
padding: 10px 15px !important;
}
@media (min-width: 767px) {
#CybotCookiebotDialog {
padding: 30px 0 !important;
}
}
hr.bold-hr {
border-top: 1px solid rgba(0,0,0, 0.6);
}
#job {
border-top: 10px solid #65b5b2;
margin-top: 30px;
background-color: #eee;
line-height: 250%;
}
#job aside {
background-color: #ddd;
padding: auto 5px;
line-height: 150%;
}
#job figure {
margin: 10px 0 0 0;
}
#job aside p {
padding: 10px;
}
#job footer {
background-color: #ccc;
padding: 25px;
margin: 25px 0;
}
a#CybotCookiebotDialogBodyLevelButtonLevelOptinAllowAll {
-webkit-animation: shake-horizontal 0.8s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;
animation: shake-horizontal 0.8s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;
}
a#CybotCookiebotDialogBodyLevelButtonLevelOptinAllowallSelection {
color: #ccc !important;
background-color: #fff !important;
border: 1px solid #ccc !important;
}
a#CybotCookiebotDialogBodyLevelButtonLevelOptinAllowallSelection:hover {
color: #ccc !important;
background-color: #fff !important;
border: 1px solid #ccc !important;
}
/* ----------------------------------------------
* Generated by Animista on 2022-7-15 13:7:10
* Licensed under FreeBSD License.
* See http://animista.net/license for more info.
* w: http://animista.net, t: @cssanimista
* ---------------------------------------------- */
/**
* ----------------------------------------
* animation shake-horizontal
* ----------------------------------------
*/
@-webkit-keyframes shake-horizontal {
0%,
100% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
10%,
30%,
50%,
70% {
-webkit-transform: translateX(-10px);
transform: translateX(-10px);
}
20%,
40%,
60% {
-webkit-transform: translateX(10px);
transform: translateX(10px);
}
80% {
-webkit-transform: translateX(8px);
transform: translateX(8px);
}
90% {
-webkit-transform: translateX(-8px);
transform: translateX(-8px);
}
}
@keyframes shake-horizontal {
0%,
100% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
10%,
30%,
50%,
70% {
-webkit-transform: translateX(-10px);
transform: translateX(-10px);
}
20%,
40%,
60% {
-webkit-transform: translateX(10px);
transform: translateX(10px);
}
80% {
-webkit-transform: translateX(8px);
transform: translateX(8px);
}
90% {
-webkit-transform: translateX(-8px);
transform: translateX(-8px);
}
}
#CybotCookiebotDialogBodyLevelButtonLevelOptinAllowallSelectionWrapper {
max-width: 100% !important;
}
a#CybotCookiebotDialogBodyLevelButtonLevelOptinAllowAll,
a#CybotCookiebotDialogBodyLevelButtonLevelOptinAllowallSelection,a#CybotCookiebotDialogBodyLevelButtonLevelOptinDeclineAll {
max-width: 100% !important;
}
a.no-hover:hover, a.no-hover:focus {
text-decoration: none;
}
a.default-color {
color: #595959;
}
/* Allgemeine Styles */
.ss-1 {
border-right: 1px solid rgba(0,0,0,.1);
}
/* :not(.lead) narrows this to what it is for — the home hero h1 — without
silently defeating the design system. build.css emits `h1.lead` at
specificity (0,1,1), which this rule tied exactly; stylesheet.css loads
after build.css, so the tie went to this rule and an
inside .ss-1 would have rendered at the hero size instead of the lead size.
No such markup exists today, so this is a no-op for rendering (verified at
390px and 1400px) and only removes the trap. Same edit on the <768px twin
below. */
.ss-1 h1:not(.lead) {
display: inline-block;
margin-top: 15px;
font-size: 2rem;
line-height: 2.2rem;
}
.ss-1 span.tuerkis {
display: inline-block;
margin-top: 10px;
font-family: 'Caveat';
font-size: 2.4rem;
line-height: 1.6em;
}
@media (max-width: 767px) {
.ss-1 {
border-right: none;
}
.ss-1 h1:not(.lead) {
font-size: 1.45rem;
line-height: 1.55rem;
margin-bottom: 0;
}
.ss-1 span.tuerkis {
margin-top: 5px;
margin-bottom: 5px;
font-size: 1.65rem;
line-height: 1.75rem;
}
}
.ss-2 {
font-size: 1.1rem;
line-height: 3rem;
}
.ss-2 div.col-md-12 {
margin-top: 15px;
}
.ss-2 .headline {
font-size: 3rem;
line-height: 3rem;
}
.ss-2 > div > div:first-child .headline {
display: inline-block;
padding-right: 15px;
}
.ss-2 .link {
text-align: right;
padding-top: 10px;
}
.ss-2 .link .fas {
height: 20px;
width: 20px;
}
/* Schwester zur Regel darueber. Achtung: beide Regeln greifen derzeit ins Leere.
Der Container .ss-2 rendert (Startseite, Feature-Kacheln), sein .link-Kind aber
nicht: die beiden „link"-Spalten stehen in index.html in einem HTML-Kommentar.
Gegengeprueft am ausgelieferten HTML — 'col-md-1 link' kommt zweimal vor und
nach dem Entfernen aller Kommentare keinmal. Gemessen daher an einem
nachgebauten Knoten, nicht an einer gerenderten Stelle. */
.ss-2 .link .fa-sharp {
font-size: 20px;
}
@media (max-width: 767px) {
.ss-2 {
text-align: center;
font-size: .8rem;
line-height: .9rem;
}
.ss-2 > div > div:first-child .headline {
display: inline;
padding-right: 0;
}
.ss-2 div .col-md-12 {
margin-top: 0;
}
.ss-2 .headline{
font-size: 3rem;
line-height: 3.6rem;
}
.ss-2 span {
font-size: 1.3rem;
line-height: 1.8rem;
display: block;
}
.ss-2 .link {
text-align: center;
}
}
.background-color-white {
background-color: white;
}
.background-color-tuerkis {
background-color: #117A88;
}
.text-white {
color: white;
}
.text-black {
color: black;
}
.row-full-width {
margin-left: -25px;
margin-right: -25px;
}
@media (max-width: 767px) {
.row-full-width {
margin-left: -15px;
margin-right: -15px;
}
}
/* Produkt Multi Slider */
.bestseller {
background-color: #eee;
padding: 20px;
}
.bestseller-header {
font-size: 2em;
line-height: 2.2em;
}
.bestseller-menu {
padding-left: 185px;
padding-right: 185px;
margin-bottom: 20px;
}
.bestseller-menu > div {
border: 1px solid #117A88;
border-radius: 30px;
padding: 8px
}
.bestseller-menu .custom-btn {
cursor: pointer;
font-size: 1.4em;
padding: 15px 40px;
border-radius: 30px;
}
.bestseller-menu .custom-btn.active {
background-color:#117A88;
color: white;
}
.cards-wrapper {
display: flex;
justify-content: center;
}
.cards-wrapper .carousel-inner {
margin: 1em;
}
.product-card {
margin: .8em;
padding: .8em;
border: 1px solid rgba(0,0,0,.1);
background-color: white;
cursor: pointer;
}
.product-card:hover {
box-shadow: 2px 3px 10px #999999;
}
.product-card .card-footer {
background-color: white;
padding: 0;
border: none;
}
.product-card .card-title {
padding: 8px 0;
border-bottom: 1px solid rgba(0,0,0,.1);
}
.product-card .card-title a {
font-weight: bold;
font-size: .85rem;
line-height: .95rem;
}
.product-card .card-footer .discount {
display: inline-block;
background-color: red;
color: white;
font-size: 1.2em;
margin-left: -.8em;
padding: .4em .8em;
min-width: 90px;
text-align: right;
}
.product-card .card-footer .features {
font-size: .9em;
line-height: 1.6em;
}
.product-card .card-footer .price:not(span) {
font-size: 16px;
font-weight: bold;
position: absolute;
bottom: .8rem;
right: .8rem;
}
.product-card .card-footer .old-price {
font-size: .8em;
font-weight: normal;
text-decoration: line-through;
}
.product-card.category-card {
min-height: 305px;
}
.product-card.category-card .card-title {
border: none;
}
.bestseller-controls,
.bestseller-controls .carousel-indicators {
position: relative;
}
/* REMOVED 2026-08-04 with the port of scss/custom/_carousel.scss:
.bestseller-controls .carousel-indicators [data-bs-target] {
background-color: #117A88;
}
Its purpose was to make Bootstrap's white indicator bars visible on this
shop's light backgrounds, by pinning them to the brand teal. That purpose is
now served properly by custom/_carousel.scss, which puts a paper rail behind
the markers and gives the pair two different colours.
Leaving it would not have been harmless. Both selectors are (0,3,0) — three
compound parts each, .bestseller-controls/.carousel-indicators/[data-bs-target]
against .carousel/.carousel-indicators/[data-bs-target] — so specificity is a
tie and load order decides; css/stylesheet.css loads after css/build.css and
would win. But only for background-color: the partial's `opacity: 1` is
(0,3,0) against Bootstrap's own (0,2,0) `.carousel-indicators [data-bs-target]
{opacity:.5}`, so THAT lands regardless. Built and measured both ways at 390px
and 1400px: with this rule in place the inactive and the active marker both
render teal at opacity 1, 40x1px, pixel-identical — the carousel loses its
position indicator entirely. Without it: inactive #8a9094 on the rail,
active #117a88.
Same diagnosis as the Bootstrap-4-era rules retired in ebf523b6 and ac422a58 —
a rule whose original job is now done better elsewhere, and whose remaining
effect is harm. */
.bestseller-controls .carousel-control-prev,
.bestseller-controls .carousel-control-next {
width: 20px;
}
.bestseller-controls .carousel-control-prev {
left: unset;
right: 3.5em;
}
.bestseller-controls .carousel-control-next {
right: .8em;
}
.bestseller-controls .carousel-control-prev-icon {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='rgb(17,122,136)' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E");
}
.bestseller-controls .carousel-control-next-icon {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='rgb(17,122,136)' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E");
}
@media (max-width: 767px) {
.bestseller {
padding: 10px;
}
.bestseller-header {
font-size: 1.2em;
line-height: 1.3em;
margin-bottom: 12px;
}
.bestseller-menu {
padding-left: 5px;
padding-right: 5px;
margin-bottom: 10px;
}
.bestseller-menu > div {
padding: 4px
}
.bestseller-menu .custom-btn {
cursor: pointer;
font-size: .95em;
padding: 10px 15px;
border-radius: 30px;
}
.bestseller-menu button:last-child {
display: none;
}
.product-card {
min-height: 350px;
margin: .4em;
padding: .4em;
}
.product-card .card-title,
.product-card .card-title a {
font-size: 12px;
line-height: 14px;
}
.product-card .card-footer .discount {
display: inline-block;
background-color: red;
color: white;
font-size: 1em;
margin-left: -8px;
padding: .2em .5em;
min-width: 70px;
text-align: right;
}
.product-card .card-footer .features {
font-size: .7em;
line-height: 1.4em;
}
.product-card .card-footer .price {
font-size: 14px;
bottom: 5px;
right: 10px;
}
.product-card.category-card {
min-height: 230px;
}
}
@media (min-width: 768px) and (max-width: 1200px) {
.product-card {
min-height: 450px;
}
.bestseller-menu {
padding-left: 10px;
padding-right: 10px;
}
.bestseller-menu > div {
padding: 6px
}
.bestseller-menu .custom-btn {
cursor: pointer;
font-size: 16px;
padding: 12px 20px;
border-radius: 30px;
}
}
/* Maßanfertigung Bad */
.row.ss-3{
margin-top: 40px;
}
.ss-3 .headline {
font-size: 2em;
line-height: 2.2em;
}
figcaption.ss-3 {
margin-top: 5px;
font-size: 1.3em;
line-height: 1.4em;
}
@media (max-width: 767px) {
.row.ss-3{
margin-top: 20px;
}
.ss-3 .headline {
font-size: 1.2em;
line-height: 1.4em;
}
figcaption.ss-3 {
font-size: .9em;
line-height: 1.1em;
}
}
/* Special gefällig */
.row.special {
margin-top: 40px;
margin-bottom: 40px;
}
.special .headline {
font-size: 2em;
line-height: 2.2em;
margin-bottom: 10px;
}
.special-text {
margin-top: 10px;
}
/* Hier stand bis 2026-08-04:
.special .btn.btn-outline-primary:focus,
.special .btn.btn-outline-primary:active { box-shadow: none; }
Entfernt, weil die Regel aus der Bootstrap-4-Zeit stammt und ihr urspruenglicher
Zweck seit dem BS5-Umstieg nicht mehr existiert. BS4 legte bei :focus einen
Schein um jeden Button; auf diesen vier Pillen war der unerwuenscht, und das
hat die Regel weggenommen.
In BS5 mit $enable-shadows: false gibt es an einem Button ueberhaupt nur noch
einen einzigen box-shadow, naemlich den Fokusring aus
.btn:focus-visible / .btn:active:focus-visible. Die :active-Haelfte war damit
wirkungslos, und die :focus-Haelfte (0,3,0) ueberstimmte den Ring (0,2,0):
gemessen am 2026-08-04 auf der Startseite hatte der Sonderangebots-Knopf bei
Tastaturfokus box-shadow: none UND outline-style: none, obwohl er
:focus-visible erfuellt — also gar keine sichtbare Fokusanzeige, ein Verstoss
gegen WCAG 2.4.7. Ohne die Regel kommt Bootstraps eigener Ring zurueck; am
Ruhe-, Hover- und Aktiv-Zustand aendert sich nichts, weil dort in diesem Build
ohnehin kein Schatten liegt. */
.special .btn.btn-outline-primary.active {
background-color: #117A88;
border-color: #117A88;
}
.special .btn.btn-outline-primary:hover {
background-color: #0d646f;
}
@media (max-width: 555px) {
.row.special {
margin-top: 20px;
}
.special .headline {
font-size: 1.2em;
line-height: 1.4em;
}
.special-images {
margin-left: -15px;
margin-right: -15px;
}
.special-buttons {
margin-top: 20px;
}
.special-text {
padding: 0 10px;
}
}
@media (min-width: 556px) and (max-width: 767px) {
.row.special {
margin-top: 20px;
}
.special .headline {
font-size: 1.2em;
line-height: 1.4em;
}
.special-images {
text-align: center;
}
.special-buttons {
margin-top: 20px;
}
.special-text {
padding: 0 10px;
}
}
/* Geschäftsführer */
.gf .headline {
font-size: 2em;
line-height: 2.2em;
}
.gf-comment {
padding-left:70px;
padding-top:40px;
font-size:2.2em;
line-height: 2.2rem;
}
.gf-container {
position: relative;
min-height:200px
}
.gf-name {
display: inline-block;
position: absolute;
bottom: 40px;
left: 30px;
font-size: .9em;
line-height: 1.3em;
}
.gf-image {
display: inline-block;
position: absolute;
right:100px;
}
@media (max-width: 767px) {
.gf .headline {
font-size: 1.2em;
line-height: 1.4em;
}
.gf-comment {
padding: 20px 30px;
font-size: 1em;
line-height: 1.1em;
}
.gf-name {
bottom: 35px;
left: 16px;
font-size: .8em;
line-height: 1.2em;
}
.gf-image {
right: 10px;
}
.gf-image img {
height: 130px;
}
}
@media (min-width: 768px) and (max-width: 900px){
.gf-name {
bottom: 35px;
left: 70px;
font-size: .8em;
line-height: 1.2em;
}
.gf-image {
right: 30px;
}
.gf-image img {
height: 130px;
}
}
@media (min-width: 901px) and (max-width: 1200px){
.gf-name {
bottom: 35px;
left: 120px;
font-size: .8em;
line-height: 1.2em;
}
.gf-image {
right: 30px;
}
.gf-image img {
height: 130px;
}
}
/* Erklärung Bestellablauf */
.order-process {
background-color: #eee;
overflow: auto;
white-space: nowrap;
padding: 25px 20px 20px 20px;
}
.order-process-container {
white-space: normal;
display: flex;
}
.order-process-number-container {
float: left;
position: relative;
width: 80px;
height: 80px;
background-color: #117A88;
border-radius: 40px;
}
.order-process-number {
display: flex;
width: fit-content;
min-width: 90px;
padding: .5rem;
align-items: center;
justify-content: center;
aspect-ratio: 1 / 1;
border-radius: 50%;
background: #117A88;
color: white;
font-size: 1.8em;
font-weight: bold;
text-align: center;
}
.order-process-text {
font-size: 1.2em;
line-height: 1.3em;
width: 290px;
padding: 10px;
}
@media(max-width: 767px) {
.order-process-number {
min-width: 70px;;
font-size: 1.2em;
}
.order-process-text {
width: 190px;
font-size: .8em;
line-height: 1em;
}
}
/* Maße, Optik, Bedienung */
.ss-4 > div {
display: flex;
}
.ss-4-text {
padding-left: 10px;
}
@media (max-width: 767px) {
.ss-4 {
font-size: 0.8rem;
}
}
/* Fertigungsvideo*/
.ss-5 .headline {
font-size: 2em;
line-height: 2.2em;
}
@media(max-width: 767px) {
.ss-5 .headline {
font-size: 1.2em;
line-height: 1.4em;
}
}
/* welt der wunder — centered logo card (logo, claim, CTA) */
.welt-der-wunder-card {
display: flex;
flex-direction: column;
align-items: center;
gap: 1rem;
max-width: 640px;
margin: 0 auto;
padding: clamp(2rem, 5vw, 3.25rem);
text-align: center;
background: #fff;
border: 1px solid rgba(0, 0, 0, 0.10);
box-shadow: 0 0.5rem 2rem rgba(8, 12, 14, 0.08);
}
.welt-der-wunder-logo {
display: block;
height: 100px;
width: auto;
}
.welt-der-wunder-text {
margin: 0;
max-width: 44ch;
font-size: 1.2em;
line-height: 1.4em;
color: #000;
}
.welt-der-wunder-cta {
margin-top: 0.25rem;
}
@media (max-width: 767px) {
.welt-der-wunder-logo {
height: 60px;
}
.welt-der-wunder-card {
padding: 1.75rem 1.25rem;
}
.welt-der-wunder-text {
font-size: .95rem;
line-height: 1.35rem;
}
}
/* beratung und hilfe */
.beratung-hilfe .headline {
font-size: 2em;
line-height: 2.2em;
}
@media (max-width: 767px) {
.beratung-hilfe {
font-size: 0.9rem;
line-height: 1.3rem;
}
.beratung-hilfe .headline {
font-size: 1.2rem;
line-height: 1.3rem;
}
}
/* individuelle Spiegel*/
.individuelle-spiegel .headline {
font-size: 2em;
line-height: 2.2em;
}
@media (max-width: 767px) {
.individuelle-spiegel .headline {
font-size: 1.2rem;
line-height: 1.4rem;
}
}
/* neu im Sortiment */
.neu-im-sortiment .headline {
font-size: 2em;
line-height: 2.2em;
}
@media (max-width: 767px) {
.neu-im-sortiment .headline {
font-size: 1.2rem;
line-height: 1.4rem;
}
}
/* weiterlesen Funktion */
.read-more .collapse:not(.show) {
height: 42px !important;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
}
.product-info .read-more .collapse:not(.show) {
height: 100px !important;
}
.read-more .collapsing {
min-height: 42px;
}
@media (max-width: 767px) {
.read-more .collapse:not(.show) {
height: 50px !important;
}
}
.read-more a.collapsed:after {
content: ' + weiterlesen';
}
.read-more a:not(.collapsed):after {
content : ''
}
/* Spiegelslider auf Kategorieseite */
.spiegel-slider {
overflow: auto;
white-space: nowrap;
}
.spiegel-slider > div {
position: relative
}
.spiegel-slider > div a {
display: inline-block;
margin: 0 20px;
}
.spiegel-slider-item {
display: flex;
}
.spiegel-slider-text {
padding-left:10px;
padding-top: 10px;
}
@media screen and (max-width: 767px) {
.spiegel-slider a > div {
flex-direction: column;
}
.spiegel-slider > div a {
margin: 0 15px 10px 15px;
font-size: 0.8rem;
line-height: 0.9rem;
text-align: center;
}
.spiegel-slider img {
height: 50px;
margin-bottom: 5px;
}
.spiegel-slider-text {
padding:0;
}
}
.spiegel-slider > div a:first-child {
margin-left: 0;
}
/* Kategorieseite */
/* Spiegel-special */
.k-special-container .headline {
font-size: 1.6rem;
line-height: 1.7rem;
display: flex;
align-items: center;
}
.k-special > div {
background-color: #117A88;
border: 1px solid #117A88;
height: 100%;
border-radius: 10px;
color: white;
padding: 15px;
}
.k-special svg.fas {
width: 35px;
height: 35px;
margin-bottom: 5px;
}
/* Schwester zur Regel darueber. Die .fas-Regel deckte urspruenglich drei Sprites
ab (#bluetooth, #steckdose, #wifi in module/includes/product_listing_include-neu.html);
#bluetooth und #wifi sind in Task 3 zur Glyphe geworden und ihre Symbole in
Task 4 aus dem Sheet entfernt — diese Regel haelt die beiden auf 35px, sonst
fielen sie auf die geerbte Schriftgroesse (14px) zurueck. #steckdose ist als
einziges ein Sprite geblieben und braucht die .fas-Regel weiterhin — die
beiden Regeln stehen hier also dauerhaft nebeneinander. margin-bottom gehoert
mit hierher, es stand in derselben Regel. */
.k-special .fa-sharp {
font-size: 35px;
margin-bottom: 5px;
}
@media (max-width: 767px) {
.k-special-container .headline {
font-size: 1rem;
line-height: 1.55rem;
display: block;
margin-bottom: 10px;
}
.k-special > div {
padding: 8px;
margin: 0;
font-size: 0.8rem;
line-height: 0.9rem;
}
.k-special svg.fas {
width: 25px;
height: 25px;
margin-bottom: 10px;
}
/* Schwester zur Regel darueber, gleiche Begruendung — hier die Mobilgroesse. */
.k-special .fa-sharp {
font-size: 25px;
margin-bottom: 10px;
}
}
/* Erster Stopper */
.ks-1,
.pl-1 {
color: black;
font-weight: bold;
}
.ks-1 .d-flex,
.pl-1 .d-flex {
align-items: center;
justify-content: center;
}
.pl-1 {
font-size: 1em;
line-height: 110%;
}
.ks-1,
.pl-1-text {
padding-left: 5px;
}
@media (max-width: 767px) {
.ks-1,
.pl-1 {
font-size: 0.8rem;
line-height: 0.9rem;
}
.ks-1 img,
.pl-1 img {
height: 25px;
}
}
/* Möglichkeiten Konfiguration & Ausstattung */
.ks-3-container .headline{
font-size: 1.6rem;
line-height: 1.7rem;
display: flex;
align-items: center;
}
.ks-3 {
background-color: #e7f2f3;
padding: 20px;
}
/* Maße, Optik, Bedienung */
.ks-3 div.col-12 {
display: flex;
margin-bottom: 10px;
}
.ks-3-text {
padding-left: 10px;
}
.ks-3 .fas {
color: black;
height: 20px;
width: 20px;
}
/* Schwester zur Regel darueber. Die .fas-Regel bleibt hier dauerhaft: drei der
vier Icons (#width, #light-bulb, #main-switch) sind Eigenzeichnungen ohne
Font-Awesome-Pendant und bleiben Sprites; das vierte (eye) ist inzwischen
eine Glyphe und faellt unter die .fa-sharp-Regel darunter. color gehoert mit
hierher, es stand in derselben Regel.
Beide Regeln sind live: der Block steht auf jeder Kategorieliste, die als
listing_template spiegel-infinitescroll.html fuehrt (19 Kategorien), ab dem
zwoelften Produkt — nachgemessen am 2026-08-03 auf
/Spiegel/Badspiegel-LED:::1_11.html: 3 Sprites (.ks-3 use) und 1 Glyphe
(.ks-3 .fa-sharp), bei 1400 wie bei 390 px. Die frueher hier notierten
"4 Sprites" stammen aus der Messung vor der Font-Umstellung. */
.ks-3 .fa-sharp {
color: black;
font-size: 20px;
}
@media (max-width: 767px) {
.ks-3 {
font-size: 0.8rem;
}
.ks-3-container .headline{
font-size: 1rem;
line-height: 1.55rem;
display: block;
margin-bottom: 10px;
}
}
@media (min-width:768px) and (max-width: 991px) {
.ks-3-container .headline,
.k-special-container .headline,
.lighting-container .headline {
margin-bottom: 10px;
}
}
/* Welche Beleuchtug */
.lighting-container {
font-size: 1.6rem;
line-height: 1.7rem;
display: flex;
align-items: center;
}
.lighting div.col-12 {
display: flex;
margin-bottom: 10px;
}
.lighting-text {
text-align: center;
font-size: 16px;
line-height: 100%;
margin-top: 10px;
}
@media(max-width: 767px) {
.lighting-container {
font-size: 1rem;
line-height: 1.55rem;
display: block;
margin-bottom: 10px;
}
.lighting-text {
font-size: 12px;
line-height: 100%;
margin-top: 5px;
}
}
/* mögliche konfigurationen */
.options-slider-container .headline {
font-size: 1.6rem;
line-height: 1.7rem;
display: flex;
align-items: center;
}
.options-slider {
overflow: auto;
white-space: nowrap;
}
.options-slider > a {
display: inline-block;
margin: 0 8px 8px 8px;
}
.options-slider-text {
background-color: #117A88;
color: white;
padding: 5px;
}
@media (max-width: 767px) {
.options-slider-container .headline {
font-size: 1rem;
line-height: 1.55rem;
display: block;
margin-bottom: 10px;
}
.options-slider > a {
margin: 0 5px 2px 2px;
font-size: 0.8rem;
line-height: 0.9rem;
}
}
.options-slider > a:first-child {
margin-left: 0;
}
.options-slider > a:last-child {
margin-right: 0;
}
/* Produktinfo */
.product-info #productname.d-md-block {
font-size: 25px;
line-height: 115%;
margin-top: 0;
margin-bottom: 5px;
}
.energielabel-overlay {
position: absolute;
top: 20px;
left: 15px;
}
.product-info .pl-1 .d-flex{
padding-top: 20px;
padding-bottom: 20px;
}
.product-info .headline {
font-size: 2em;
line-height: 120%;
font-weight: normal;
margin-top: 20px;
margin-bottom: 10px;
}
.product-info .headline-info {
font-size: 1.1em;
line-height: 140%;
}
.product-info .options-container {
background-color: #f5f5f5;
border-radius: 15px;
padding: 20px 20px
}
.product-info .included {
background-color: #e7f2f3;
padding: 20px;
}
.product-info .included p:first-child {
font-size: 1.1em;
font-weight: bold;
}
.product-info .tab-headline {
font-size: 1.2rem;
line-height: 120%;
font-weight: bold;
}
.product-info .tab-button {
font-weight: bold;
text-align: right;
}
.product-info-details-container a[data-toggle="collapse"]:not(.collapsed) svg,
.product-info-details-container a[data-bs-toggle="collapse"]:not(.collapsed) svg {
transform: rotate(180deg);
}
/* Schwester zur Regel darueber, und die einzige der Umstellung, die kein
Aussehen betraf, sondern Verhalten: die Regel haengt am Element svg, und der
Chevron der Detail-Panels ist jetzt ein . 18 Aufklapper in fuenf
Artikelseiten-Templates drehten sich dadurch beim Oeffnen nicht mehr — und
der Chevron ist dort das einzige, was auf/zu ueberhaupt anzeigt (aria-expanded
am war nie betroffen, fuer Screenreader hat also nichts gefehlt).
Gemessen auf einer Artikelseite: Glyphe transform: none in beiden Zustaenden,
nachgebautes Sprite im selben Slot matrix(-1,0,0,-1,0,0) im geoeffneten.
Auf .fa-sharp gescoped und nicht einfach svg gestrichen: ohne Element- oder
Klassenanker traefe der Selektor auch die Beschriftung im Nachbar- und
drehte die Zeile mit. */
.product-info-details-container a[data-toggle="collapse"]:not(.collapsed) .fa-sharp,
.product-info-details-container a[data-bs-toggle="collapse"]:not(.collapsed) .fa-sharp {
transform: rotate(180deg);
}
.tab-panel {
margin-top: 10px;
}
.product-info .tab-panel .special {
margin-top: 10px;
}
@media (max-width: 767px) {
.energielabel-overlay {
position: absolute;
top: 15px;
left: 10px;
}
.product-info .pl-1 .d-flex{
padding-top: 10px;
padding-bottom: 10px;
}
.product-info .headline-info {
font-size: 0.9em;
}
.product-info .taxinfo {
font-size: 0.8em;
line-height: 110%;
}
.shipping-costs,
.shippingtime-new {
font-size: 0.8em;
line-height: 110%;
}
.product-info .included {
font-size: 0.8em;
line-height: 110%;
}
.product-info .tab-headline {
font-size: 1rem;
line-height: 110%;
font-weight: bold;
}
}
/* Navigations Icons */
.main-nav-menu svg.fas {
margin-right: 6px;
width: 20px;
height: 20px;
}
/* Canvas Fix - Glas Konfigurator im Dekstop View brach ein - Temporärer Fix, da die Skalierung nun verzerrt ist - Arnd fragen welche JS Datei für die Generierung zuständig ist */
.product-info-details-container+canvas {
position: relative;
width: 100%;
padding-right: 15px;
padding-left: 15px;
-ms-flex: 0 0 100%;
flex: 0 0 100%;
max-width: 100%;
}
@media (min-width: 768px) {
.product-info-details-container+canvas {
-ms-flex: 0 0 50%;
flex: 0 0 50%;
max-width: 50%;
}
}
/* Tab Label Styling auf Produktseiten - Tab Button wurde UX technisch optimiert und ist jetzt komplett klickbar */
.tab-label {
font-size: 1.175rem;
color: #595959;
}
/* Info Content Styling Helpers */
#contentbox h1 {
display: none;
}
#contentbox p:not(:last-child) {
margin-bottom: 1rem;
}
#contentbox p:last-child {
margin-bottom: 0 !important;
}
#contentbox .lead {
line-height: 1.5;
}
@media (max-width: 767px) {
.products-sold {
font-size: 80%;
}
}
.form-check-input:checked {
background-color: #117A88;
border-color: #117A88;
}
/* 3D Configurator Button - Shimmer & Sparkle */
.s21-sparkle-gw{position:relative;display:inline-flex;border-radius:16px;padding:2.5px;background:#016a6b;width:100%}
.s21-sparkle-gw::before{content:'';position:absolute;inset:0;border-radius:inherit;background:linear-gradient(105deg,transparent 0%,transparent 30%,#03a5a6 42%,#4eeaec 50%,#03a5a6 58%,transparent 70%,transparent 100%);background-size:250% 100%;animation:s21-shimmer 5s ease-in-out infinite}
@keyframes s21-shimmer{0%{background-position:100% 0}100%{background-position:-50% 0}}
.s21-sparkle-gw .s21-btn{position:relative;z-index:2;display:inline-flex;align-items:center;gap:12px;padding:16px 28px;width:100%;justify-content:center;font-family:inherit;font-size:15px;font-weight:700;letter-spacing:.3px;color:#fff;text-decoration:none;border:none;cursor:pointer;background-color:#028889;border-radius:14px;transition:background-color .3s ease}
.s21-sparkle-gw .s21-btn:hover{background-color:#D4901E;color:#fff;text-decoration:none}
.s21-sparkle-gw .s21-btn:active{background-color:#B87A18;color:#fff}
.s21-sparkle-gw .s21-btn .s21-ico{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;transition:transform .3s ease}
.s21-sparkle-gw .s21-btn .s21-ico svg{width:100%;height:100%;fill:currentColor}
.s21-sparkle-gw .s21-btn:hover .s21-ico:first-child{transform:rotate(12deg) scale(1.1)}
.s21-sparkle-gw .s21-btn .s21-arr{width:14px;height:14px;opacity:0;transform:translateX(-8px);transition:opacity .3s ease,transform .3s ease}
.s21-sparkle-gw .s21-btn:hover .s21-arr{opacity:1;transform:translateX(0)}
.s21-sparkle-container{position:absolute;inset:-10px;z-index:4;pointer-events:none;overflow:visible}
.s21-spark{position:absolute;background:#fff;border-radius:50%;box-shadow:0 0 6px 2px #fff,0 0 12px 5px #4eeaec,0 0 24px 8px rgba(78,234,236,0.3);opacity:0;animation:s21-spark-pop 2s ease-out forwards}
@keyframes s21-spark-pop{0%{transform:scale(0);opacity:0}10%{transform:scale(1.4);opacity:1}25%{transform:scale(1);opacity:.85}55%{transform:scale(.85);opacity:.5}100%{transform:scale(0);opacity:0}}
/* Ueber-uns-Timeline (Firmengeschichte): die Timeline-CSS liegt als inline