@import url(https://fonts.googleapis.com/css2?family=Gloria+Hallelujah&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Staatliches&display=swap);
body {
margin: 0 auto;
padding: 0;
background: linear-gradient(180deg, #fff, gray);
font-size: 1rem;
color: #444;
text-align: center;
-ms-overflow-style: scrollbar;
font-family: "Open Sans", sans-serif
}
.tophead {
background: #fff
}
a,
h1,
h3,
h4 {
color: #220a09
}
h1 a {
color: #2a2a2a
}
h1.align-left {
text-align: left
}
a {
color: #5b2815;
text-decoration: none
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: "Playfair Display", serif;
margin: 0;
padding: 0;
color: #fff;
font-weight: 400;
line-height: 2rem;
letter-spacing: 1px
}
h2,
h3,
h4 {
color: #000
}
.slider__item_name h3 {
color: #fff
}
h2 a,
h3 a,
h4 a,
h5 a,
h6 a {
color: #fff;
transition: opacity .3s ease 0s;
opacity: 1
}
h1 a:hover,
h2 a:hover,
h3 a:hover,
h4 a:hover,
h5 a:hover,
h6 a:hover {
opacity: .6;
text-decoration: none
}
.footer-row h1,
.footer-row h1 a,
.footer-row h2,
.footer-row h2 a,
.footer-row h3,
.footer-row h3 a,
.footer-row h4,
.footer-row h4 a,
.footer-row h5,
.footer-row h5 a,
.footer-row h6,
.footer-row h6 a {
color: #fff
}
h1 {
font-size: 1.575rem;
line-height: 2.125rem;
color: #000;
margin-bottom: 1.25rem;
margin-top: 1.25rem
}
/* ===========================
Titel-Styling (Desktop)
=========================== */
.align-left.mobil.h1 {
display: block;
text-align: left; /* Desktop links */
margin: 0 0 10px;
font-weight: 700;
line-height: 1.2;
letter-spacing: 0.2px;
font-size: clamp(28px, 3.8vw, 42px);
color: #f2f2f2;
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
text-wrap: balance;
position: relative;
}
/* Unterstreichung unter dem Titel */
.align-left.mobil.h1::after {
content: "";
display: block;
width: 160px;
height: 4px;
margin-top: 10px;
border-radius: 4px;
background: linear-gradient(90deg, #ffb86c, #ff7c39);
transition: all 0.3s ease;
}
/* Beschreibungstext unter dem Titel */
.align-left.mobil.h1 + p {
margin: 14px 0 18px;
font-size: 16px;
line-height: 1.55;
color: #e9e9e9;
max-width: 60ch;
text-align: left;
}
/* ===========================
Mobile Anpassungen
=========================== */
@media (max-width: 768px) {
.align-left.mobil.h1 {
text-align: left; /* Mobil mittig */
font-size: clamp(22px, 6vw, 28px);
}
.align-left.mobil.h1::after {
width: 90px; /* kürzere Linie */
height: 3px;
text-align: left; /* mittig zentriert */
}
.align-left.mobil.h1 + p {
text-align: left;
padding: 0 14px;
margin: 12px auto 18px;
max-width: 38ch;
font-size: 15.5px;
}
}
/* ===========================
Option: Verlaufsschrift (wenn gewünscht)
=========================== */
.align-left.mobil.h1.gradient {
background: linear-gradient(90deg, #ffffff, #dcdcdc);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
text-shadow: none;
}
h2 {
font-size: 2.0625rem;
line-height: 2.75rem;
font-weight: 300
}
h3 {
font-size: 1.375rem;
line-height: 2.125rem;
font-weight: 400
}
h4 {
font-size: 1.3rem;
line-height: 1.75rem
}
h5 {
font-size: 1rem;
line-height: 1.6875rem
}
h2.widgettitle {
font-size: 1rem;
line-height: 1.5rem;
font-weight: 600
}
h1.box-header,
h2.box-header,
h3.box-header,
h4.box-header {
text-align: center;
color: #3c3635;
position: relative;
text-transform: uppercase;
font-family: "Playfair Display", serif
}
h1.box-header:before,
h2.box-header:before,
h3.box-header:before,
h4.box-header:before {
content: "";
position: absolute;
bottom: -5px;
left: 50%;
transform: translateX(-50%);
width: 50px;
height: 2px;
background-color: #8f2500;
transition: width .3s ease
}
h1.box-header:hover:before,
h2.box-header:hover:before,
h3.box-header:hover:before,
h4.box-header:hover:before {
width: 80%
}
h4.box-header,h3.box-header {
text-align: center;
color: #2a2a2a;
margin-bottom: 1.25rem
}
h1.box-header.align-left,
h2.box-header.align-left,
h3.box-header.align-left,
h4.box-header.align-left {
text-align: left
}
.box-header::after,
h2.widgettitle::after {
display: block;
content: "";
background: #8f2500;
width: 40px;
height: 2px;
margin-top: 13px
}
h1.box-header::after,
h2.box-header::after,
h3.box-header::after,
h4.box-header::after {
width: 80px;
margin-left: auto;
margin-right: auto;
margin-top: 1.25rem
}
.box-header.white,
h1.box-header.white:before,
h2.box-header.white:before,
h3.box-header.white:before,
h4.box-header.white:before {
color: #fff
}
.box-header.white::after,
h1.box-header.white:before,
h2.box-header.white:before,
h3.box-header.white:before,
h4.box-header.white:before {
background: #ffebe0
}
h2.box-header.align-left::after {
margin-left: 0
}
.box-header {
padding: 0 10px
}
h3 .more {
margin-left: 50px
}
#h6,
.h6,
dt,
h6 {
color: #363d49;
font-size: 1rem;
letter-spacing: 0;
padding-top: 15px;
padding-bottom: 5px;
font-weight: 700
}
@media screen and (max-width:767px) {
body {
font-size: 1rem
}
h1 {
font-size: 1.125rem
}
h2 {
font-size: 1.625rem
}
h3 {
font-size: 1.125rem
}
p {
font-size: 1rem
}
}
ol,
p,
ul {
margin-top: 0;
line-height: 180%
}
del {
position: relative;
text-decoration: none
}
del:before {
content: "";
width: 100%;
height: .1em;
background: #db7d76;
position: absolute;
top: 50%;
left: 0;
transform: rotate(-1deg)
}
#wrapper {
margin: 0 auto;
max-width: 100%
}
#header,
#header-wrapper {
max-width: 1600px;
margin: 0 auto
}
#header {
clear: both
}
#logo {
margin: 0;
padding: 90px 0 0 10px;
color: #000;
float: left;
text-transform: uppercase;
font-size: 1.625rem
}
@media (max-width:1000px) {
#logo {
display: none
}
}
#logor {
float: right;
text-transform: none;
font-weight: 400;
font-size: 1.1rem;
color: #e5a168;
text-align: right;
padding: 90px 30px 30px 0;
text-align: right;
font-family: "Open Sans", sans-serif
}
#logor ul {
list-style-type: none;
padding: 0;
margin: 0
}
#logor ul li {
padding-left: 0
}
@media (max-width:720px) {
#logor {
font-size: 1.125rem;
margin: 0 20px 0 20px
}
}
#logor .status-wrapper {
display: flex;
font-size: 1.1rem;
justify-content: space-between;
align-items: center;
width: 100%;
gap: 10px
}
#logor .tel {
font-size: 1rem;
font-weight: 600
}
#logor .tel a {
color: #3c3635;
text-decoration: none;
transition: color 0.3s ease
}
#logor .tel a:hover {
color: #e5a168
}
#logor .status {
font-size: 1rem;
font-weight: 500;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
padding: 5px 10px;
border-radius: 5px;
background-color: #dc3545;
color: white;
text-align: center;
max-width: 150px
}
@media (max-width:600px) {
#logor .status-wrapper {
flex-direction: column;
align-items: flex-end
}
#logor .tel {
text-align: right
}
#logor .status {
max-width: 150px
}
}
#logor .status.open {
background-color: #28a745
}
#logor .status.pause {
background-color: #ffc107
}
#logor .status.closed {
background-color: #dc3545
}
#logor div {
font-size: 1rem;
color: #3c3635;
margin-top: 5px
}
#page {
overflow: hidden;
max-width: 100%;
margin: 0 auto;
padding: 0
}
#content {
font-size: 1rem;
margin: 0 auto
}
#content,
#info,
.covid,
.post {
max-width: 100%;
margin: 0 auto
}
.twitters {
background-image: url('data:image/svg+xml;utf8,')
}
.whatsappss {
background-image: url('data:image/svg+xml;utf8,')
}
.facebooks {
background-image: url('data:image/svg+xml;utf8,')
}
.pinterests {
background-image: url('data:image/svg+xml;utf8,')
}
.linkedin {
background-image: url('data:image/svg+xml;utf8,')
}
.xing {
background-image: url('data:image/svg+xml;utf8,')
}
.tumblr {
background-image: url('data:image/svg+xml;utf8,')
}
.flattr {
background-image: url('data:image/svg+xml;utf8,')
}
.reddit {
background-image: url('data:image/svg+xml;utf8,')
}
#socialbookmarks {
padding-top: 30px;
text-align: center
}
#socialbookmarks a {
border: 1px solid #000;
background-color: #ccc;
background-image: none !important;
color: #000;
text-decoration: none;
padding: 5px 10px;
display: inline-block;
margin: 4px 10px 4px 0;
margin: 0 10px 0 0;
float: left;
border-radius: 6px;
border-radius: 50%;
height: 40px;
width: 40px;
overflow: hidden;
padding: 10px 10px;
border: 0 solid #000
}
#socialbookmarks a:hover {
background-color: red;
color: #fff
}
#socialbookmarks li,
#socialbookmarks ul {
display: inline-block;
padding-left: 0
}
#socialbookmarks span {
line-height: 22px
}
#socialbookmarks .ico_sob {
display: inline-block;
height: 20px;
margin-right: 5px;
vertical-align: top;
background-repeat: no-repeat;
padding-left: 25px;
padding-left: 35px
}
#socialbookmarks h4 {
width: 100%;
margin: 0 !important;
text-align: center
}
#tags {
margin: 0 auto;
background-color: #a88c7f;
padding: 50px 0;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, .1);
background-image: linear-gradient(145deg, #d1b29a, #a88c7f);
text-align: center
}
#tags p {
max-width: 1600px;
margin: 0 auto;
color: #fff;
font-size: 1rem;
line-height: 1.5;
padding-bottom: 20px
}
.management,
.qrcode {
float: left;
display: block;
margin-right: 15px;
margin-bottom: 20px;
margin-top: 20px;
max-width: 230px;
-webkit-filter: grayscale(1);
filter: grayscale(1);
box-shadow: 0 0 10px 0 rgba(0, 0, 0, .4);
border-radius: 5px
}
.management:hover,
.qrcode:hover {
filter: brightness(100%)
}
@media (max-width:576px) {
.management,
.qrcode {
max-width: 100%;
display: center;
padding-right: 0
}
}
.callback-btn {
background: #2a2a2a;
border: 2px solid #2a2a2a;
border-radius: 50%;
box-shadow: 0 8px 10px rgba(56, 163, 253, .3);
cursor: pointer;
height: 50px;
text-align: center;
width: 50px;
display: none;
position: fixed;
right: 5%;
bottom: 5%;
transition: all .5s ease-out;
z-index: 9999;
-webkit-animation: hoverWave linear 1s infinite;
animation: hoverWave linear 1s infinite
}
.callback-btn:hover i {
color: #38a3fd;
font-size: 2.5rem;
transition: .3s
}
.callback-btn i {
color: #fff;
font-size: 2.125rem;
transition: .3s;
line-height: 52px;
transition: .5s ease-in-out;
animation: 1.2s ease 0 normal none 1 running shake;
animation-iteration-count: infinite;
-webkit-animation: 1.2s ease 0 normal none 1 running shake;
-webkit-animation-iteration-count: infinite
}
.enscart_image_wrapper a i {
animation: 1.2s ease 0s normal none 1 running shake;
animation-iteration-count: infinite;
-webkit-animation: 1.2s ease 0s normal none 1 running shake;
-webkit-animation-iteration-count: infinite
}
@-webkit-keyframes hoverWave {
0% {
box-shadow: 0 8px 10px rgba(245, 72, 65, .3), 0 0 0 0 rgba(245, 72, 65, .2), 0 0 0 0 rgba(245, 72, 65, .2)
}
40% {
box-shadow: 0 8px 10px rgba(245, 72, 65, .3), 0 0 0 15px rgba(245, 72, 65, .2), 0 0 0 0 rgba(245, 72, 65, .2)
}
80% {
box-shadow: 0 8px 10px rgba(245, 72, 65, .3), 0 0 0 30px rgba(245, 72, 65, 0), 0 0 0 26.7px rgba(245, 72, 65, .067)
}
100% {
box-shadow: 0 8px 10px rgba(245, 72, 65, .3), 0 0 0 30px rgba(245, 72, 65, 0), 0 0 0 40px rgba(245, 72, 65, 0)
}
}
@keyframes hoverWave {
0% {
box-shadow: 0 8px 10px rgba(245, 72, 65, .3), 0 0 0 0 rgba(245, 72, 65, .2), 0 0 0 0 rgba(245, 72, 65, .2)
}
40% {
box-shadow: 0 8px 10px rgba(245, 72, 65, .3), 0 0 0 15px rgba(245, 72, 65, .2), 0 0 0 0 rgba(245, 72, 65, .2)
}
80% {
box-shadow: 0 8px 10px rgba(245, 72, 65, .3), 0 0 0 30px rgba(245, 72, 65, 0), 0 0 0 26.7px rgba(245, 72, 65, .067)
}
100% {
box-shadow: 0 8px 10px rgba(245, 72, 65, .3), 0 0 0 30px rgba(245, 72, 65, 0), 0 0 0 40px rgba(245, 72, 65, 0)
}
}
@keyframes shake {
0% {
transform: rotateZ(0);
-ms-transform: rotateZ(0);
-webkit-transform: rotateZ(0)
}
10% {
transform: rotateZ(-30deg);
-ms-transform: rotateZ(-30deg);
-webkit-transform: rotateZ(-30deg)
}
20% {
transform: rotateZ(15deg);
-ms-transform: rotateZ(15deg);
-webkit-transform: rotateZ(15deg)
}
30% {
transform: rotateZ(-10deg);
-ms-transform: rotateZ(-10deg);
-webkit-transform: rotateZ(-10deg)
}
40% {
transform: rotateZ(7.5deg);
-ms-transform: rotateZ(7.5deg);
-webkit-transform: rotateZ(7.5deg)
}
50% {
transform: rotateZ(-6deg);
-ms-transform: rotateZ(-6deg);
-webkit-transform: rotateZ(-6deg)
}
60% {
transform: rotateZ(5deg);
-ms-transform: rotateZ(5deg);
-webkit-transform: rotateZ(5deg)
}
70% {
transform: rotateZ(-4.28571deg);
-ms-transform: rotateZ(-4.28571deg);
-webkit-transform: rotateZ(-4.28571deg)
}
80% {
transform: rotateZ(3.75deg);
-ms-transform: rotateZ(3.75deg);
-webkit-transform: rotateZ(3.75deg)
}
90% {
transform: rotateZ(-3.33333deg);
-ms-transform: rotateZ(-3.33333deg);
-webkit-transform: rotateZ(-3.33333deg)
}
100% {
transform: rotateZ(0);
-ms-transform: rotateZ(0);
-webkit-transform: rotateZ(0)
}
}
@-webkit-keyframes shake {
0% {
transform: rotateZ(0);
-ms-transform: rotateZ(0);
-webkit-transform: rotateZ(0)
}
10% {
transform: rotateZ(-30deg);
-ms-transform: rotateZ(-30deg);
-webkit-transform: rotateZ(-30deg)
}
20% {
transform: rotateZ(15deg);
-ms-transform: rotateZ(15deg);
-webkit-transform: rotateZ(15deg)
}
30% {
transform: rotateZ(-10deg);
-ms-transform: rotateZ(-10deg);
-webkit-transform: rotateZ(-10deg)
}
40% {
transform: rotateZ(7.5deg);
-ms-transform: rotateZ(7.5deg);
-webkit-transform: rotateZ(7.5deg)
}
50% {
transform: rotateZ(-6deg);
-ms-transform: rotateZ(-6deg);
-webkit-transform: rotateZ(-6deg)
}
60% {
transform: rotateZ(5deg);
-ms-transform: rotateZ(5deg);
-webkit-transform: rotateZ(5deg)
}
70% {
transform: rotateZ(-4.28571deg);
-ms-transform: rotateZ(-4.28571deg);
-webkit-transform: rotateZ(-4.28571deg)
}
80% {
transform: rotateZ(3.75deg);
-ms-transform: rotateZ(3.75deg);
-webkit-transform: rotateZ(3.75deg)
}
90% {
transform: rotateZ(-3.33333deg);
-ms-transform: rotateZ(-3.33333deg);
-webkit-transform: rotateZ(-3.33333deg)
}
100% {
transform: rotateZ(0);
-ms-transform: rotateZ(0);
-webkit-transform: rotateZ(0)
}
}
#back-to-top {
background: #b99c8a;
color: #fff;
overflow: hidden;
text-align: center;
width: 60px;
height: 30px;
display: block;
margin: -2px auto 15px;
-webkit-border-radius: 0 0 3px 3px;
border-radius: 0 0 3px 3px;
-webkit-box-shadow: inset 0 1px 0 rgba(0, 0, 0, .05);
box-shadow: inset 0 1px 0 rgba(0, 0, 0, .05)
}
@media (max-width:720px) {
#back-to-top {
background: #b99c8a;
margin: -16px auto 15px;
color: #fff
}
#back-to-top:hover {
filter: brightness(1.2)
}
}
#back-to-top i {
font-size: 2rem;
position: relative;
top: -2px
}
#back-to-top:hover {
filter: brightness(1.2)
}
#back-to-top {
box-shadow: none !important
}
/* ===============================
Pagination / Navigation modern
=============================== */
.navigation {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
gap: 6px;
padding: 30px 15px;
font-size: 1rem;
color: #2a2a2a;
font-family: "Open Sans", sans-serif;
font-weight: 700;
width: 100%;
text-align: center;
}
/* Header (z. B. "Seiten:") */
.navigation_header {
margin-right: 8px;
font-weight: 700;
font-size: 0.95rem;
color: #2a2a2a;
}
/* Basis für Links & aktive Seite */
.navigation .link,
.navigation .this {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 36px;
height: 36px;
padding: 0 12px;
border-radius: 8px;
text-decoration: none;
font-size: 0.9rem;
font-weight: 600;
border: 1px solid #ddd;
background: #fff;
color: #2a2a2a;
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.08);
transition: all 0.25s ease;
}
/* Hover-Effekt */
.navigation .link:hover {
background: linear-gradient(135deg, #f9fafb 0%, #ececec 100%);
color: #111;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
border-color: #ccc;
}
/* Aktive Seite */
.navigation .this {
background: linear-gradient(135deg, #1d4ed8 0%, #2563eb 100%);
color: #fff;
border-color: #1d4ed8;
box-shadow: 0 4px 14px rgba(37, 99, 235, 0.3);
cursor: default;
transform: scale(1.03);
}
/* Hover auf aktiver Seite */
.navigation .this:hover {
filter: brightness(1.05);
}
/* Abstandshalter (z. B. „…“) */
.navigation .space {
color: #666;
font-weight: 400;
padding: 0 6px;
}
/* Mobile Darstellung */
@media (max-width: 600px) {
.navigation {
font-size: 0.9rem;
gap: 4px;
padding: 20px 10px;
}
.navigation .link,
.navigation .this {
min-width: 32px;
height: 32px;
padding: 0 10px;
font-size: 0.85rem;
border-radius: 6px;
}
}
/* ===============================
Pagination / Navigation modern
=============================== */
.navigation {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
gap: 6px;
padding: 30px 15px;
font-size: 1rem;
color: #2a2a2a;
font-family: "Open Sans", sans-serif;
font-weight: 700;
width: 100%;
text-align: center;
}
/* Header (z. B. "Seiten:") */
.navigation_header {
margin-right: 8px;
font-weight: 700;
font-size: 0.95rem;
color: #2a2a2a;
}
/* Basis für Links & aktive Seite */
.navigation .link,
.navigation .this {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 36px;
height: 36px;
padding: 0 12px;
border-radius: 8px;
text-decoration: none;
font-size: 0.9rem;
font-weight: 600;
border: 1px solid #ddd;
background: #fff;
color: #2a2a2a;
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.08);
transition: all 0.25s ease;
}
/* Hover-Effekt */
.navigation .link:hover {
background: linear-gradient(135deg, #f9fafb 0%, #ececec 100%);
color: #111;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
border-color: #ccc;
}
/* Aktive Seite */
.navigation .this {
background: linear-gradient(135deg, #1d4ed8 0%, #2563eb 100%);
color: #fff;
border-color: #1d4ed8;
box-shadow: 0 4px 14px rgba(37, 99, 235, 0.3);
cursor: default;
transform: scale(1.03);
}
/* Hover auf aktiver Seite */
.navigation .this:hover {
filter: brightness(1.05);
}
/* Abstandshalter (z. B. „…“) */
.navigation .space {
color: #666;
font-weight: 400;
padding: 0 6px;
}
/* Mobile Darstellung */
@media (max-width: 600px) {
.navigation {
font-size: 0.9rem;
gap: 4px;
padding: 20px 10px;
}
.navigation .link,
.navigation .this {
min-width: 32px;
height: 32px;
padding: 0 10px;
font-size: 0.85rem;
border-radius: 6px;
}
}
.desc {
position: relative
}
.suggestions {
position: block;
background-color: #000;
color: #fff;
width: 100%;
border: 1px solid #ccc;
max-height: 400px;
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: #888 #333
}
.suggestions::-webkit-scrollbar {
width: 12px
}
.suggestions::-webkit-scrollbar-track {
background: #333
}
.suggestions::-webkit-scrollbar-thumb {
background-color: #888;
border-radius: 6px;
border: 2px solid #333
}
.suggestion-item {
padding: 10px;
cursor: pointer
}
.suggestion-item:hover {
background-color: rgba(255, 255, 255, .2)
}
.search-form {
display: none;
position: absolute;
top: 100%;
left: 0;
width: 250px;
background: #fff;
border-radius: 5px;
color: #000;
box-shadow: 0 4px 8px rgba(0, 0, 0, .2);
padding: 10px;
z-index: 100
}
.suggestion-item {
color: #000
}
.clear-button {
color: #fff
}
.search-form input {
width: 70%;
padding: 10px;
height: 40px;
border: 1px solid #ccc;
border-radius: 5px 0 0 5px;
font-size: 1rem
}
.search-form button {
height: 40px;
border: none;
padding: 10px 15px;
cursor: pointer;
font-size: 1rem
}
.search-form button[type="submit"] {
background: #b74f1b;
color: white;
border-radius: 0 5px 5px 0
}
.search-form .clear-button {
background: #ccc;
color: #333;
margin-left: 5px;
font-size: 1rem;
padding: 10px;
border-radius: 5px;
height: 40px;
display: none
}
.search-form .clear-button:hover {
filter: brightness(1.2)
}
.search-form.active {
display: block
}
.suggestions-container {
position: absolute;
top: 50px;
left: 0;
width: 100%;
background: white;
border: 1px solid #ddd;
border-radius: 5px;
box-shadow: 0 4px 6px rgba(0, 0, 0, .2);
max-height: 200px;
overflow-y: auto;
display: none
}
.suggestion-item {
padding: 10px;
cursor: pointer;
border-bottom: 1px solid #eee
}
.suggestion-item:hover {
background: #f7f7f7
}
.search-container {
position: relative;
width: 100%;
margin-bottom: 0
}
@media (max-width:768px) {
.suggestions {
max-height: 3000px
}
}
.product-name {
display: flex;
align-items: center;
justify-content: center;
text-align: center;
width: 100%;
height: 120px;
/* feste Höhe für einheitliche Kachelgröße */
padding: 10px 15px;
box-sizing: border-box;
background: linear-gradient(180deg, #2f2f2f 0%, #1d1d1d 100%);
color: #f3f3f3;
font-size: 1.1rem;
font-weight: 600;
line-height: 1.3;
border-radius: 8px 8px 0 0;
overflow: hidden;
transition: all 0.25s ease;
}
.product-name a {
color: #f8fafc;
text-decoration: none;
display: -webkit-box;
-webkit-line-clamp: 3;
/* 🔸 max. 3 Zeilen */
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
white-space: normal;
width: 100%;
}
/* Hover-Effekt */
.product-name a:hover {
color: #a7f3d0;
text-shadow: 0 0 6px rgba(26, 176, 78, 0.4);
}
.product-img {
margin: 0
}
.product-img img {
width: 100% !important;
height: 350px !important;
/* gleiche Höhe für alle Produktbilder */
object-fit: cover !important;
/* kein Verzerren */
border-bottom: 2px solid #eee !important;
}
:root {
--price-tag-background: rgba(26, 176, 78, 1.9);
--price-tag-height: 2rem
}
#product-price {
background: linear-gradient(180deg, rgba(26, 176, 78, 1) 0%, rgba(18, 142, 60, 1) 100%);
color: #ecf0f1;
max-width: 100%;
padding: 20px;
border-radius: 0;
box-shadow: 0 4px 8px rgba(0, 0, 0, .1);
text-align: center
}
#price-label {
font-size: 1rem;
margin-right: 5px
}
#price-value {
font-size: 1.4em;
font-weight: 700
}
#price-currency {
font-size: 0.8rem
}
.info-icon {
color: #e9ffe7;
font-size: 0.95rem;
margin-left: 6px;
vertical-align: middle;
position: relative;
cursor: help;
transition: color .2s ease;
}
.info-icon:hover {
color: #b7f7ca;
}
.info-icon::after {
content: attr(data-tooltip);
position: absolute;
bottom: 130%;
left: 50%;
transform: translateX(-50%);
background: #1e1e1e;
color: #fafafa;
font-size: 0.78rem;
padding: 6px 8px;
border-radius: 6px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
opacity: 0;
pointer-events: none;
white-space: nowrap;
transition: opacity .2s ease, transform .2s ease;
z-index: 20;
}
.info-icon:hover::after {
opacity: 1;
transform: translateX(-50%) translateY(-4px);
}
.price-header {
font-size: 1.0rem;
font-weight: 500;
letter-spacing: 0.5px;
color: #fafafa
}
/* Mengenrabatt visuell trennen */
.price-discount {
margin-top: 16px;
background: rgba(0, 0, 0, .08);
border-radius: 10px;
padding: 10px 12px;
}
.price-discount .discount-title {
font-weight: 800;
font-size: clamp(16px, 4vw, 20px);
margin-bottom: 4px;
}
.price-discount .discount-line {
font-size: clamp(13px, 3.6vw, 16px);
}
/* Optional: dunkles Grün für Kontrast verbessern */
.product-price {
background: linear-gradient(180deg, #1a9f48 0%, #128e3c 100%);
}
/* Mengenrabatt-Box */
.price-discount {
margin-top: 16px;
padding: 14px;
background: rgba(0, 0, 0, 0.08);
border-radius: 10px;
text-align: center;
}
/* Mengenrabatt Titel */
.price-discount .discount-title {
font-weight: 800;
font-size: clamp(16px, 4vw, 20px);
margin-bottom: 4px;
}
/* Mengenrabatt Zahlen */
.price-discount .discount-line {
font-size: clamp(13px, 2.8vw, 16px);
margin-bottom: 8px;
}
/* Info Text (keine Box mehr - dezente Zeile) */
.price-discount p {
font-size: clamp(13px, 2.8vw, 16px);
margin-bottom: 8px;
}
/* "Information" label */
.price-discount p strong {
font-weight: 800;
font-size: clamp(16px, 4vw, 20px);
margin-bottom: 10px;
}
/* ===== Badges - Modern & Harmonisch ===== */
.badges {
display: flex;
flex-wrap: wrap;
gap: 10px;
justify-content: center;
margin-top: 10px;
}
/* Grundstruktur */
.badge {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
font-weight: 600;
font-size: 0.9rem;
border-radius: 999px;
padding: 8px 14px;
line-height: 1.4;
border: 1px solid rgba(255, 255, 255, 0.4);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
background: #f8f8f8;
color: #333;
transition: all 0.25s ease;
}
/* Symbol am Anfang */
.badge i {
font-style: normal;
opacity: 0.9;
font-size: 1rem;
line-height: 1;
}
/* ===== Varianten ===== */
/* Auf- und Abbau - grünlich, freundlich */
.badge--avail {
background: linear-gradient(145deg, #d7fce6 0%, #c5f6dd 100%);
color: #065f46;
border-color: #a7e5c8;
}
.badge--avail i {
content: "☑ï¸";
}
/* Kaution - zartblau / violett */
.badge--deposit {
background: linear-gradient(145deg, #e5e7ff 0%, #d1d5ff 100%);
color: #1e3a8a;
border-color: #c0c7ff;
}
.badge--deposit i {
content: "💰";
}
/* Hover-Effekt */
.badge:hover {
transform: translateY(-1px);
filter: brightness(1.06);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
}
/* Kleine Info-Icons (falls vorhanden) */
.badge .info-icon {
margin-left: 6px;
font-size: 0.85em;
color: rgba(0, 0, 0, 0.4);
cursor: help;
}
/* Mobile */
@media (max-width: 600px) {
.badge {
font-size: 0.85rem;
padding: 6px 12px;
}
}
/* Optional: dunkles Grün für Kontrast verbessern */
.product-price {
background: linear-gradient(180deg, #1a9f48 0%, #128e3c 100%);
color:#fff;
}
.thema button {
display: inline-flex;
align-items: center;
justify-content: center;
padding: .7rem 0srem;
border-radius: 12px;
text-decoration: none;
font-weight: 700;
border: 1px solid transparent;
}
.thema-container {
transition: transform 0.25s ease, box-shadow 0.25s ease !important;
}
.thema-container:hover {
transform: translateY(-4px) !important;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25) !important;
}
/* ==============================
DETAILS-BUTTON (modernisiert)
============================== */
.details-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: 8px 20px;
background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%);
color: #fff;
font-weight: 600;
border-radius: 10px;
font-size: 0.95rem;
text-decoration: none;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);
transition: all 0.25s ease;
}
.details-btn:hover {
background: linear-gradient(135deg, #1e40af 0%, #1d4ed8 100%);
transform: translateY(-2px);
color: #f0f9ff;
box-shadow: 0 6px 14px rgba(0, 0, 0, 0.2);
}
.details-btn i {
font-size: 0.9rem;
transition: transform 0.25s ease;
}
.details-btn:hover i {
transform: translateX(4px);
}
/* ==============================
MENGENRABATT-BOX
============================== */
.mengenrabatt-box {
background: linear-gradient(145deg, #059669 0%, #047857 100%);
color: #fff;
text-align: center;
border-radius: 16px;
padding: 18px 20px;
margin-top: 10px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.mengenrabatt-box:hover {
transform: translateY(-3px);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
}
.mengenrabatt-box h4 {
font-size: 1.2rem;
font-weight: 700;
margin-bottom: 6px;
}
.mengenrabatt-box p {
font-size: 0.95rem;
font-weight: 500;
opacity: 0.95;
margin: 0;
}
/* ==============================
PREISELEMENTE
============================== */
#item_price_nalog {
font-weight: 700;
font-size: 1.6em !important;
color: #fafafa;
}
#price-details {
font-weight: 700;
font-size: 1.4em;
color: #fafafa;
}
#item_price_nalog_comment {
font-size: 0.8em;
color: #fafafa;
}
#item_price_nalog_comment_mwst {
font-size: 1.4em;
color: #fafafa;
}
.tooltips {
background-color: #34495e;
color: #ecf0f1;
padding: 8px;
border-radius: 5px;
font-size: 1rem
}
.category a,
.product-list-button {
display: inline-block;
text-decoration: none;
margin: 10px
}
.category a:hover,
.category-list-button:hover,
.news_on_pages-cat-on-pages .item-cat-on-pages a:hover,
.product-list-button:hover {
width: auto;
font-size: 1rem !important;
text-transform: uppercase;
letter-spacing: 3px !important;
font-weight: 600 !important;
color: #fff !important;
position: relative;
display: inline-block;
height: 45px;
padding: 0 10px;
border: 0;
background-color: #a03704;
line-height: 44px;
text-decoration: none;
vertical-align: middle;
cursor: pointer;
border-radius: 0;
-webkit-appearance: none;
-webkit-border-radius: 0;
-webkit-transform: translateZ(0);
transform: translateZ(0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-moz-osx-font-smoothing: grayscale
}
.category {
text-align: center;
margin: 20px 0;
max-width: 100%
}
.category a {
width: auto;
font-family: "Open Sans", sans-serif;
position: relative;
display: inline-block;
height: 46px;
padding: 0 30px;
border: 0;
background-color: #2a2a2a;
font-size: 1rem;
line-height: 44px;
color: #fff !important;
text-decoration: none;
vertical-align: middle;
cursor: pointer;
border-radius: 0;
-webkit-appearance: none;
-webkit-border-radius: 0;
-webkit-transform: translateZ(0);
transform: translateZ(0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-moz-osx-font-smoothing: grayscale;
margin-left: 10px;
transition: background-color .3s, box-shadow .3s
}
.category a:hover {
background-color: rgba(56, 163, 253, .5);
box-shadow: 0 0 15px rgba(0, 0, 0, .6)
}
.category:after {
position: absolute;
top: 0;
right: 52%;
bottom: 0;
left: 52%;
z-index: -1;
border-bottom: 4px solid #fff;
background: rgba(255, 255, 255, .2);
content: '';
transition: background .3s
}
.category:focus:after,
.category:hover:after {
right: 0;
left: 0
}
.category .center {
margin: 0 auto
}
@media (max-width:720px) {
.category a {
display: block;
margin: 5px 0;
font-size: 1rem
}
.category a:hover,
.category-list-button:hover,
.product-list-button:hover {
filter: brightness(1.2)
}
}
.post {
color: #000;
background: linear-gradient(180deg, #fff, #b3b3b3)
}
.post h2 {
color: #2a2a2a;
font-size: 1.5rem;
text-align: center;
margin-bottom: 25px;
margin-top: 15px
}
.page-bgbtm,
.page-bgtop {
margin: 0 auto
}
/* --- Grundlayout --- */
.breadcrumb {
display: flex;
align-items: center;
gap: 8px;
font-size: 15px;
color: #555;
margin: 12px 0 20px;
padding: 10px 14px;
background: rgba(245,245,245,0.6);
border-radius: 8px;
box-shadow: inset 0 0 4px rgba(0,0,0,0.05);
overflow-x: auto;
white-space: nowrap;
-webkit-overflow-scrolling: touch;
scrollbar-width: none; /* Firefox */
max-width: 100%;
box-sizing: border-box;
}
.breadcrumb::-webkit-scrollbar {
display: none; /* Chrome, Safari */
}
/* "Du bist hier:" */
.breadcrumb::first-line {
font-weight: 500;
color: #777;
}
/* --- Liste --- */
.breadcrumb ol {
display: inline-flex;
align-items: center;
list-style: none;
margin: 0;
padding: 0;
gap: 6px;
}
/* --- Elemente --- */
.breadcrumb li {
display: inline-flex;
align-items: center;
color: #1a73e8;
}
/* --- Links --- */
.breadcrumb a {
text-decoration: none;
color: #1a73e8;
transition: color 0.2s ease;
}
.breadcrumb a:hover {
color: #0b5bd3;
text-decoration: underline;
}
/* --- Separator --- */
.breadcrumb .sep {
color: #aaa;
margin: 0 4px;
flex-shrink: 0;
}
/* --- Aktueller Eintrag --- */
.breadcrumb [aria-current="page"] {
color: #222;
font-weight: 600;
pointer-events: none;
}
/* --- Mobile Optimierung --- */
@media (max-width: 768px) {
.breadcrumb {
font-size: 14px;
padding: 8px 10px;
border-radius: 6px;
}
}
.post .title {
height: 38px;
margin-bottom: 10px;
padding: 12px 0 0;
font-size: 1rem
}
@media (max-width:720px) {
.post .title {
height: 38px;
margin-bottom: 10px;
padding: 12px 0 0;
font-size: 1rem
}
.content_container {
margin: 0 20px
}
}
.post .title a {
border: 0;
color: #3d2729
}
.post .meta {
margin-bottom: 30px;
padding: 5px 0 15px;
font-weight: 400
}
.post .meta .date {
float: left
}
.post .meta .posted {
float: right
}
.content_container,
.dienstleistungen,
.eventausstattung .wrapper,
.newsletter .wrapper,
.whatsapp {
margin: 0 auto;
justify-content: center
}
.produktkatalog {
background: #fff;
max-width: 100%;
box-shadow: 0 4px 8px rgba(0, 0, 0, .1)
}
.eventausstattung {
background: #f0f0f0;
box-shadow: 0 4px 8px rgba(0, 0, 0, .1)
}
.newsletter {
background: #f0f0f0
}
.content_container {
justify-content: center;
max-width: 1600px
}
.veranstaltung {
background: #4f8c57;
box-shadow: 0 4px 8px rgba(0, 0, 0, .1)
}
.veranstaltung p {
color: #e9e9e9 !important;
text-align: center;
font-weight: 300;
line-height: 1.7;
max-width: 850px; /* Begrenzte Zeilenlänge für bessere Lesbarkeit */
margin: 0 auto 20px; /* Zentriert + Abstand unten */
font-size: 1.05rem;
}
.whatsApp {
background: #f0f0f0
}
.veranstaltung .wrapper {
max-width: 1600px;
margin: 0 auto
}
.post .entry {
padding: 0;
text-align: justify;
min-height: 400px;
position: block;
margin: 0 auto
}
.post .msg {
margin-bottom: 30px;
padding: 5px 0 15px;
font-weight: 400;
text-align: center;
background-color: red
}
/* Sidebar */
.block-left{
float: left;
width: 20%;
box-sizing: border-box;
margin-right: 20px;
background: #f4f6f9;
border-radius: 14px;
overflow: hidden;
box-shadow: 0 4px 20px rgba(0,0,0,.18);
}
/* Header */
.block-left h2.widget-title{
margin: 0;
padding: 15px;
width: 100%;
font-weight: 700;
color: #fff;
text-align: center;
cursor: pointer;
background: #007bff;
border-radius: 14px 14px 0 0;
}
/* Scrollbereich */
.contentblockcat{
display: block;
max-height: 400px;
overflow-y: auto;
overflow-x: hidden;
padding: 12px 14px;
background: #f9f9f9;
white-space: normal;
}
/* Expanded State */
.contentblockcat.expanded{
max-height: none;
height: auto;
overflow: visible;
}
.contentblockcat.hidden{
max-height: 0;
opacity: 0;
transition: opacity .3s ease, max-height .5s ease-in-out;
}
/* Liste reset */
.block-left ul{
list-style: none;
margin: 0;
padding: 0;
}
/* Elemente kompakter + weniger "Wegdriften" */
.block-left ul li{
position: relative;
margin: 4px 0;
padding-left: 16px; /* Platz für Punkt */
}
/* Punkt: schön, aber nicht zu dominant */
.block-left ul li::before{
content: "";
position: absolute;
left: 0;
top: 11px; /* passt besser zu Textzeilenhöhe */
width: 5px;
height: 5px;
border-radius: 50%;
background: #1e73e8;
opacity: .65;
transition: transform .15s ease, opacity .15s ease;
}
.block-left ul li:hover::before{
transform: scale(1.35);
opacity: 1;
}
/* Links: Klickfläche + ruhiger */
.block-left ul li a{
display: block;
padding: 6px 10px;
border-radius: 8px;
color: #1e73e8;
text-decoration: none;
font-weight: 500;
transition: background .2s ease, color .2s ease;
}
.block-left ul li a:hover{
background: rgba(30,115,232,.08);
color: #0f4fbf;
}
/* Active (dein System nutzt .active) */
.contentblockcat a.active{
color: #cc0000 !important;
background: rgba(204,0,0,.08);
font-weight: 700;
}
/* Unterebenen: weniger Einrückung, klarere Linie */
.block-left ul ul{
margin: 6px 0 10px 10px;
padding-left: 10px;
border-left: 1px solid rgba(0,0,0,.10);
}
/* Unterpunkte etwas leichter */
.block-left ul ul li a{
font-size: 0.95em;
font-weight: 400;
}
/* Button */
.block-left #toggle-button{
margin: 15px;
border-radius: 25px;
padding: 8px 18px;
font-weight: 600;
background: #1e73e8;
color: #fff;
border: none;
box-shadow: 0 6px 16px rgba(30,115,232,.25);
transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease;
}
.block-left #toggle-button:hover{
transform: translateY(-2px);
box-shadow: 0 10px 22px rgba(30,115,232,.35);
}
/* Mobile */
@media (max-width:720px){
.block-left{
width: 100%;
margin-right: 0;
margin-bottom: 40px;
}
}
.container {
margin: 0 auto;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
max-width: 1600px;
width: 77%;
padding-top: 20px;
box-sizing: border-box
}
.rent .container,.produktkatalog-intro {
max-width: 900px;
margin: 0 auto!important;
}
.rent .rent-note {
color: #f5f5f5;
text-align: center;
line-height: 1.6;
font-weight: 300;
margin: 0;
text-align-last: center;
}
.produktkatalog .produktkatalog-intro {
color: #000;
text-align: center!important;
line-height: 1.6;
font-weight: 300;
margin: 0;
text-align-last: center;
}
/* Falls irgendwo global text-align: justify auf .container liegt, explizit überschreiben: */
.rent .container,
.rent .rent-note, .produktkatalog .produktkatalog-intro {
text-align: center;
}
@media screen and (max-width:1024px) {
.block-left {
width: 30%;
margin-right: 10px
}
.container {
width: 67%
}
}
@media screen and (max-width:768px) {
.block-left {
width: 100%;
margin-right: 0
}
.container {
width: 100%;
margin-left: -20x;
margin-right: 0
}
}
@media screen and (max-width:480px) {
.block-left {
width: 100%;
margin-right: 0;
padding: 10px
}
.container {
width: 100%;
padding-top: 10px;
margin-left: -20x;
margin-right: 0
}
}
.container table {
width: 1600px
}
@media (max-width:1600px) {
.container table {
width: 100%
}
}
.container p {
display: block
}
.thema {
background-color: #fff;
border-radius: 8px;
box-shadow: 0 0 20px 0 rgba(0, 0, 0, .3);
min-height: 720px;
text-align: center;
justify-content: center;
flex-direction: column;
align-items: stretch;
height: auto;
transition: transform .3s ease, box-shadow .3s ease;
width: calc(33.33% - 20px);
margin-top: 80px;
margin-right: 10px;
margin-left: 10px;
padding-bottom: 40px
}
@media (max-width:768px) {
.thema {
width: 100%
}
}
@media (min-width:768px) {
.container {
padding-left: 50px;
padding-right: 50px
}
}
@media (max-width:1100px) {
.thema {
width: 100%;
max-width: none
}
}
@media (max-width:767px) {
.thema {
border-radius: 0;
box-shadow: none
}
}
@media screen and (max-width:767px) {
.thema {
height: fit-content;
min-height: unset
}
}
.thema.alignleft:hover {
background-color: #2a2a2a;
color: #fff
}
.thema.alignleft:hover a {
color: #fff
}
.thema:active {
transform: scale(1.05);
box-shadow: 0 0 30px 0 rgba(0, 0, 0, .5)
}
.thema img {
height: 250px;
width: 100%;
object-fit: cover;
margin: 0 auto;
padding-top: 0;
display: block
}
@media (max-width:1024px) {
.thema img {
height: 300px
}
}
@media (max-width:768px) {
.thema img {
height: 300px;
width: 100%
}
}
.thema p.thema-text {
font-size: 1rem;
line-height: 1.5;
margin: 0 auto;
padding: .5em .3em 0
}
.produkt-categorie {
padding-top: 20px
}
.produkt-optionen-black {
border: 0 !important;
color: #fff !important;
background-color: #000 !important;
box-shadow: 0 0 10px 0 rgba(0, 0, 0, .4)
}
.produkt-optionen-bar {
width: 100%;
overflow: hidden
}
.produkt-optionen-bar-item {
padding: 8px 16px;
float: left;
width: auto;
border: 0 !important;
display: block;
outline: 0;
text-align: center;
font-size: 1.125rem;
position: relative
}
.produkt-optionen-bar-item:not(:last-child)::after {
content: "";
position: absolute;
top: 50%;
right: 0;
transform: translateY(-50%);
width: 1px;
height: 80%;
background-color: #ddd
}
.produkt-optionen-button {
white-space: normal;
border: 0 !important
}
.produkt-optionen-button:hover,
.produkt-optionen-gray:hover {
filter: brightness(1.2)
}
.produkt-optionen-button {
border: 0 !important;
display: inline-block;
padding: 8px 16px;
vertical-align: middle;
overflow: hidden;
text-decoration: none;
color: inherit;
background-color: inherit;
text-align: center;
cursor: pointer;
white-space: nowrap;
font-weight: 700
}
.produkt-optionen-container {
padding: 15px 16px;
box-shadow: 0 0 10px 0 rgba(0, 0, 0, .4);
word-wrap: break-word;
background-color: #fff
}
.produkt-optionen-container:after,
.produkt-optionen-container:before {
content: "";
display: table;
clear: both
}
@media screen and (max-width:767px) {
.produkt-optionen-bar-item {
float: none;
width: 100%
}
.produkt-optionen-bar-item:not(:last-child)::after {
display: none
}
}
.tabs {
padding-top: 40px;
padding-bottom: 40px
}
.tabs__title {
font-size: 1.5rem;
margin-bottom: 40px;
line-height: 1.5em
}
.tabs__content-item {
display: none
}
.tabs__content-item.is-active {
display: grid;
grid-row-gap: 20px
}
.tabs__img-wrapper {
overflow: hidden;
padding: 5px;
height: 450px;
background-color: #f2f2f2
}
.tabs__img {
-o-object-fit: cover;
object-fit: cover;
width: 100%;
height: 100%
}
.tabs__name {
margin-bottom: 20px
}
.tabs__text {
line-height: 1.5em;
color: #999
}
.tabs__block {
display: grid;
-webkit-box-align: start;
-webkit-align-items: start;
-ms-flex-align: start;
align-items: start;
grid-gap: 10px;
margin-bottom: 20px;
overflow-x: unset
}
.tabs__item {
border: 1px solid #f2f2f2;
padding: 20px;
cursor: pointer;
-webkit-transition: .1s ease background-color;
-o-transition: .1s ease background-color;
transition: .1s ease background-color
}
.tabs .tabs__item.is-active .tabs__number,
.tabs__item.is-active,
.tabs__item:hover,
.tabs__item:hover .tabs__number {
color: #fff
}
.tabs__item:focus {
outline: 0
}
.tabs__item-name {
display: grid;
grid-template-columns: -webkit-min-content 1fr;
grid-template-columns: min-content 1fr;
-webkit-box-align: start;
-webkit-align-items: start;
-ms-flex-align: start;
align-items: start;
grid-gap: 10px
}
.tabs__item-text {
font-weight: 400
}
.tabs__number {
display: inline;
color: #ccc
}
@media (min-width:768px) {
.tabs {
padding-top: 80px;
padding-bottom: 80px
}
.tabs__title {
font-size: 2.25rem
}
.tabs__wrapper {
display: grid;
grid-template-columns: 300px 3fr;
-webkit-box-align: start;
-webkit-align-items: start;
-ms-flex-align: start;
align-items: start;
grid-column-gap: 5%
}
.tabs__block {
margin-bottom: 0
}
.tabs__content-item.is-active {
grid-template-columns: 1fr
}
.tabs__img-wrapper {
height: 250px
}
}
@media (min-width:992px) {
.tabs__content-item.is-active {
grid-template-columns: 1fr 1fr;
grid-column-gap: 5%
}
.tabs__img-wrapper {
height: 450px
}
}
.tabs__block::-webkit-scrollbar {
width: 0;
height: 0
}
.golden .tabs__item.is-active,
.golden .tabs__item:hover {
background-color: #c8a86b
}
.golden .tabs__item:active {
background-color: #ba9246
}
.golden .tabs__item:focus {
border: 1px solid #c8a86b
}
.green .tabs__item.is-active,
.green .tabs__item:hover {
background-color: #6eaf49
}
.green .tabs__item:active {
background-color: #578b3a
}
.green .tabs__item:focus {
border: 1px solid #6eaf49
}
.orange .tabs__item.is-active,
.orange .tabs__item:hover {
background-color: #ea6a47
}
.orange .tabs__item:active {
background-color: #e4451a
}
.orange .tabs__item:focus {
border: 1px solid #ea6a47
}
.blue .tabs__item.is-active,
.blue .tabs__item:hover {
background-color: #136cb6
}
.blue .tabs__item:active {
background-color: #0e5188
}
.blue .tabs__item:focus {
border: 1px solid #136cb6
}
.red .tabs__item.is-active,
.red .tabs__item:hover {
background-color: #d02428
}
.red .tabs__item:active {
background-color: #a51c20
}
.red .tabs__item:focus {
border: 1px solid #d02428
}
.black .tabs__item.is-active,
.black .tabs__item:hover {
background-color: #2c343e
}
.black .tabs__item:active {
background-color: #171b20
}
.black .tabs__item:focus {
border: 1px solid #2c343e
}
.msg-form table tr td {
padding-bottom: 10px
}
table tbody tr {
padding-bottom: 10px
}
.msg-form ul li {
list-style: none
}
.msg-form {
text-align: left;
margin: 0 auto;
max-width: 1600px
}
.rent {
margin: 0 auto;
position: relative;
background: linear-gradient(135deg, rgba(54, 60, 65, .9), rgba(80, 40, 20, .8)), url(/modules/tpl.robotix/images/bg1.png) center/cover fixed;
border-bottom: 3px solid rgba(255, 255, 255, .2);
box-shadow: 0 10px 30px rgba(0, 0, 0, .5);
width: 100%;
color: #fff;
padding: 40px 20px
}
.rent .desc,
.rent h4 {
color: #f4f4f4
}
.margintd {
padding: 50px 0
}
.margintdlr {
padding: 50px 20px;
margin: 0 20px
}
.msg-form .mailsend {
color: red;
font-size: 1.125rem
}
.alignleft {
float: left
}
.links {
display: inline-block;
height: 30px;
padding: 30px 0 0;
font-size: 1.125rem;
font-weight: 400;
color: #1c1c1c
}
.button {
margin-top: 10px;
padding: 10px 15px;
font-size: 1em;
cursor: pointer;
border-radius: 10px;
background-color: #007bff;
color: #fff;
border: none;
transition: background-color .3s, transform .3s;
box-shadow: 0 4px 10px rgba(0, 0, 0, .2)
}
.button:hover {
filter: brightness(1.2)
}
.button:active {
transform: scale(.95)
}
#kontakt,
#tags {
box-shadow: 0 4px 8px rgba(0, 0, 0, .1);
overflow: hidden
}
#kontakt {
color: #3e3f43;
background: #fff;
min-height: 150px
}
#kontakt h2 {
font-size: 1.5rem;
text-align: center;
margin-bottom: 25px;
margin-top: 15px;
color: #2a2a2a
}
#tags {
color: #fff;
padding: 20px 20px 10px
}
@media (max-width:720px) {
#tags {
display: none
}
}
.googlebot-visible {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
border: 0;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap
}
form.example {
box-shadow: 0 6px 10px 0 rgba(0, 0, 0, .1);
border: 0;
overflow: hidden
}
form.example input[type=text] {
float: left;
height: 42px;
width: calc(100% - 120px);
border-radius: 0 !important
}
form.example input[type=text]:focus {
border: 0 !important;
background: #f2f2f2
}
form.example button {
float: left;
height: 42px;
width: 120px;
padding: 0 14px;
background: #4caf50;
color: #fff;
font-size: 1.0625rem;
border: none;
border-radius: 0 5px 5px 0;
cursor: pointer
}
form.example button:hover {
filter: brightness(1.2)
}
form.example::after {
content: "";
clear: both;
display: table
}
.popular-searches {
margin-top: 20px
}
.popular-searches p {
font-weight: 700;
margin-bottom: 5px
}
.popular-searches ul {
list-style: none;
padding: 0;
margin: 0
}
.popular-searches li {
display: inline-block;
margin-right: 10px
}
.popular-searches a {
color: #4c1c13;
text-decoration: none
}
.popular-searches a:hover {
text-decoration: underline
}
#form input,
#form textarea,
#input,
form input,
form select,
form textarea {
width: 100%;
min-width: 40px;
background: #fff;
color: #2a2a2a;
font: inherit;
box-shadow: 0 6px 10px 0 rgba(0, 0, 0, .1);
border: 0;
outline: 0;
padding: 14px 18px
}
#form input:focus,
#form textarea:focus,
#input:focus,
form input:focus,
form select:focus,
form textarea:focus {
border: 1px solid #2a2a2a
}
@media (max-width:800px) {
#form input,
#form textarea,
#input,
form input,
form select,
form textarea {
padding: 10px 10px;
font-size: 1rem
}
}
#datenschutz,
#input {
width: 100%
}
#feedback-submit,
.feedback-submit,
.form-reviews #form-button input[type=submit],
input[type=button],
input[type=submit] {
display: block;
font-family: "Open Sans", sans-serif;
font-size: 1rem;
width: auto;
font-weight: 400;
text-align: center;
white-space: nowrap;
vertical-align: middle;
border: 1px solid transparent;
padding: .375rem .75rem;
line-height: 1.5;
transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
color: #fff;
background-color: #363d49;
text-decoration: none;
border-radius: 5px;
cursor: pointer
}
#feedback-submit:hover,
.feedback-submit:hover,
.form-reviews #form-button input[type=submit]:hover,
input[type=button]:hover,
input[type=submit]:hover {
filter: brightness(1.2)
}
@media (max-width:768px) {
#feedback-submit,
.feedback-submit,
.form-reviews #form-button input[type=submit],
input[type=button],
input[type=submit] {
font-size: 1rem !important;
padding: .5rem 1rem;
width: 100%;
box-sizing: border-box
}
}
#footer {
height: auto;
width: 100%;
margin: 0 auto;
padding: 0 0;
position: relative;
border-top: 1px solid #e7dfd7;
background-color: #fff;
background-image: linear-gradient(145deg, #ffffff, #f1f1f1);
box-shadow: 0 5px 15px rgba(0, 0, 0, .05)
}
#footer img {
padding-bottom: 40px
}
#footer-content {
width: 1600px;
font-family: "Open Sans", sans-serif;
margin: 20px auto;
text-align: left;
padding: 0;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: flex-start
}
.footer-navigation,
.footer-navigation1 {
flex: 1 1 200px;
padding: 10px;
box-sizing: border-box
}
@media (min-width:1101px) {
#footer-content {
max-width: 100%;
margin: 20px auto
}
.footer-navigation,
.footer-navigation1 {
min-width: 200px
}
}
@media (max-width:1100px) {
#footer-content {
max-width: 100%;
flex-direction: column;
align-items: center
}
.footer-navigation,
.footer-navigation1 {
width: 100%;
margin-bottom: 20px
}
}
@media (max-width:600px) {
#footer {
padding: 15px 0
}
#footer-content {
align-items: center
}
.footer-navigation,
.footer-navigation1 {
padding: 5px
}
}
.footer-home-link img {
display: block;
width: auto;
height: 120px;
background: no-repeat;
background-size: contain;
font-size: 0;
margin-bottom: 25px;
color: transparent;
text-decoration: none
}
.copyright .footer-home-link img {
display: block;
width: auto;
height: 120px;
background: no-repeat;
background-size: contain;
font-size: 0;
margin-bottom: 0;
color: transparent;
text-decoration: none
}
.footer-info .copyright {
font-size: 1rem;
color: #333;
text-decoration: none;
cursor: default;
margin-top: 5px;
width: 300px
}
.footer-info .copyright p,
.footer-navigation>ul>li,
.last-footer-navigation>ul>li {
margin-bottom: 2px;
margin-top: 2px;
transition: all .3s ease;
margin-left: 5px
}
.footer-navigation>ul>li,
.last-footer-navigation>ul>li {
border-bottom: 1px solid #ddd
}
.footer-navigation>ul>li>a:before,
.last-footer-navigation>ul>li>a:before {
content: ">";
font-size: .75rem;
margin-right: 5px
}
.footer-info .copyright p:hover,
.footer-navigation>ul>li>a:hover,
.last-footer-navigation>ul>li>a:hover {
color: #e74c3c;
text-decoration: underline
}
.font-secondary {
margin-left: 0;
font-family: "Open Sans", sans-serif;
font-size: .625rem;
line-height: 1.78571;
-webkit-text-size-adjust: none;
font-weight: 400
}
.textwidget ul li {
float: left;
margin-top: 20px;
padding-right: 15px
}
@media (max-width:1100px) {
.footer-navigation {
max-width: 500px;
align-content: center;
padding-left: 0
}
}
@media (max-width:1100px) {
.footer-navigation {
width: 50%;
padding-left: 0
}
.footer-navigation1 {
width: 100%;
padding-left: 0
}
}
.footer-navigation h4,
.footer-navigation1 h4,
.last-footer-navigation h3 {
color: #000;
font-size: 1.275rem;
text-transform: uppercase;
font-weight: 700;
font-family: "Playfair Display", serif;
margin-bottom: 3px
}
.footer-navigation ul,
.footer-navigation1 ul,
.post-it-body ul {
list-style-type: none;
margin: 0;
padding: 0
}
.footer-navigation1 ul li i,
.post-it-body ul li i {
float: left;
padding-right: 15px
}
.footer-navigation li a,
.footer-navigation1 li a,
.post-it-body li a {
color: #000;
outline: 0;
text-decoration: none
}
.footer-navigation li a:hover,
.footer-navigation1 li a:hover,
.post-it-body li a:hover {
text-decoration: underline
}
.footer-navigation {
margin: 20px 0
}
.footer-navigation ul {
list-style-type: none;
margin: 0;
padding: 0
}
.footer-navigation li {
margin-bottom: 10px
}
.footer-social {
display: inline-flex;
gap: 10px
}
.footer-social a {
color: #8f2500;
text-decoration: none
}
.footer-navigation li a:before {
content: none
}
.footer-social a:hover {
color: gray
}
@media (max-width:600px) {
#footer {
padding: 15px 0
}
#footer-content {
display: block;
text-align: center
}
.footer-info .copyright {
width: 100%
}
.footer-info .copyright img {
width: 100%
}
.footer-navigation,
.footer-navigation1 {
width: 100%;
text-align: center;
margin-bottom: 20px
}
.footer-navigation ul,
.footer-navigation1 ul {
padding: 0
}
.footer-navigation li,
.footer-navigation1 li {
display: inline-block;
margin: 0 10px
}
.footer-social {
justify-content: center;
margin-bottom: 10px
}
.footer-info .copyright {
font-size: 1rem
}
.copyright .footer-home-link img {
height: 80px
}
.footer-navigation li {
margin-bottom: 15px
}
}
.footer-info {
margin: 20px
}
#footer .copyr {
background: #1c1c1c;
background-image: linear-gradient(145deg, #2a2a2a, #1c1c1c);
box-shadow: 0 0 15px 0 rgba(0, 0, 0, .6);
text-align: center;
color: #fff;
font-size: 1rem;
font-weight: 300;
line-height: 22px;
margin-top: 30px;
padding-top: 30px;
padding-bottom: 30px;
padding-left: 20px;
padding-right: 20px
}
#footer .copyr a {
color: #fff;
text-decoration: none
}
#footer .copyr a:hover {
text-decoration: underline
}
#mapContainer {
position: relative;
height: 200px;
width: 100%;
margin-top: 20px;
margin-bottom: -30px;
padding: 0
}
.mapOverlay {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-color: rgba(0, 0, 0, .5);
display: flex;
justify-content: center;
align-items: center
}
/* ===== Einheitlicher Stil für Kartenfreigabe-Button ===== */
#mapConsentBtn {
background: linear-gradient(135deg, var(--brand, #8f2500) 0%, #632000 100%);
color: #fff;
font-weight: 700;
font-size: 1rem;
border: none;
border-radius: 999px;
padding: 12px 24px;
cursor: pointer;
transition: all .25s ease;
box-shadow: 0 6px 18px rgba(143, 37, 0, 0.25);
display: inline-flex;
align-items: center;
justify-content: center;
}
/* Hover - heller und leicht angehoben */
#mapConsentBtn:hover {
filter: brightness(1.1);
transform: translateY(-1px);
box-shadow: 0 8px 24px rgba(143, 37, 0, 0.35);
}
/* Fokus für Barrierefreiheit */
#mapConsentBtn:focus-visible {
outline: 3px solid var(--brand, #8f2500);
outline-offset: 3px;
}
/* Mobile Anpassung */
@media (max-width: 600px) {
#mapConsentBtn {
font-size: 0.95rem;
padding: 10px 18px;
}
}
#mapIframe {
display: none
}
#mapContainer.showIframe #mapIframe {
display: block
}
#mapContainer.showIframe .mapOverlay {
display: none
}
#topimg {
width: 100%;
margin: -5px auto
}
#topimg img {
width: 1600px;
background: linear-gradient(180deg, #2a2a2a, #363d49);
z-index: 0;
max-height: 300px
}
@media (max-width:720px) {
#topimg img {
max-height: 130px;
max-width: 100%
}
}
.full {
display: block
}
.mobil {
display: none
}
@media only screen and (max-width:768px) {
.full {
display: none
}
.mobil {
display: block
}
}
.btn,
.galery a {
text-decoration: none
}
#share,
.btn {
display: block
}
.btn,
.product-list-button {
display: inline-block;
background: #5c463a;
color: white;
border: none;
padding: 10px 15px;
font-size: 1rem;
cursor: pointer;
border-radius: 5px;
transition: all 0.3s ease-in-out;
position: relative;
text-align: center;
font-weight: 700;
box-shadow: 0 2px 5px rgba(0, 0, 0, .2)
}
.toggle-news {
color: #b74f1b;
cursor: pointer;
font-weight: 700;
display: inline-flex;
align-items: center;
gap: 5px;
margin-bottom: 10px
}
.toggle-news:hover {
text-decoration: underline
}
.news-content {
margin-top: 5px;
padding: 10px;
background: #f8f8f8;
border: 1px solid #ddd;
border-radius: 5px
}
.category-microcopy{
margin: 6px 0 14px;
font-size: 0.95rem;
color: #6b6b6b;
line-height: 1.4;
}
.btn:focus,
.btn:hover,
.product-list-button:focus,
.product-list-button:hover {
filter: brightness(1.1);
background-color: inherit
}
.btn::after,
.product-list-button::after {
content: "";
position: absolute;
width: 100%;
height: 4px;
bottom: 0;
left: 0;
background: rgba(255, 255, 255, .3);
transition: transform 0.3s ease-in-out;
transform: scaleX(0)
}
.btn:hover::after,
.product-list-button:hover::after {
transform: scaleX(1)
}
.center {
margin: 0 auto;
justify-content: center
}
.btn.blue {
background: linear-gradient(to right, #b15e3b, #2a2a2a);
color: #fff
}
@media (max-width:767px) {
.btn,
.product-list-button {
font-size: .9rem;
padding: 8px 12px
}
}
#share {
width: 100%;
margin: 0 auto
}
.like {
font-size: 1.125rem;
font-weight: 700;
padding-top: 10px;
margin-bottom: 12px
}
#share,
.push {
text-align: center
}
.push {
display: inline-block;
min-width: 100px;
margin: 5px 2px 10px;
font-size: .9375rem;
color: #fff;
cursor: pointer;
padding: 5px
}
.facebook {
background-color: #3b5998
}
.instagram {
background: #d6249f;
background: radial-gradient(circle at 30% 107%, #fdf497 0, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%)
}
.facebook:hover,
.instagram:hover,
.pinterest:hover,
.viber:hover {
background-color: #2d4373;
color: #fff;
text-decoration: none
}
.pinterest:hover,
.viber:hover {
background-color: #881f12
}
.pinterest {
background-color: #bd081c
}
.viber {
background-color: #665cac
}
.twitter {
background-color: #55acee
}
.email:hover,
.twitter:hover,
.whatsapp:hover {
color: #fff;
text-decoration: none
}
.twitter:hover {
background-color: #2795e9
}
.whatsapp:hover {
background-color: #a05f20
}
.whatsapp {
background-color: #5cbe4a
}
.email {
background-color: #404040
}
.email:hover {
background-color: #333
}
#angle:before,
#email:before {
font-family: FontAwesome;
font-style: normal;
font-weight: 400;
text-decoration: inherit;
left: 0
}
#email:before {
padding-right: .5em
}
#email:before,
#facebook:before {
color: #000;
font-size: 1rem
}
#facebook:before,
#home:before {
font-family: FontAwesome;
font-style: normal;
font-weight: 400;
text-decoration: inherit;
left: 0
}
#instagram:before {
color: #000;
font-size: 1rem
}
#instagram:before,
#shares:before {
font-family: FontAwesome;
font-style: normal;
font-weight: 400;
text-decoration: inherit;
left: 0
}
.tel:before {
content: "\f095";
padding-right: .5em
}
.tel:before {
font-family: FontAwesome;
font-style: normal;
font-weight: 400;
text-decoration: inherit;
color: green;
font-size: 1rem;
left: 0
}
#time:before,
#twitter:before,
.whatsapps:before {
font-family: FontAwesome;
font-style: normal;
font-weight: 400;
text-decoration: inherit;
color: #00f;
font-size: 1rem;
left: 0
}
#email:before {
content: "\f003"
}
#facebook:before {
content: "\f230"
}
#facebook:before,
#instagram:before,
#time:before,
#twitter:before,
.whatsapps:before {
padding-right: .3em
}
#instagram:before {
content: "\f16d"
}
#time:before {
content: "\f017"
}
#twitter:before {
content: "\f099"
}
.whatsapps:before {
content: "\f232"
}
#angle:before {
padding-right: .5em
}
#home:hover::before {
content: "\f015";
color: #fff;
font-size: 1.125rem
}
#home:before {
content: "\f015";
color: #8f2500;
font-size: 1.125rem
}
#home:before,
#shares:before {
padding-right: .5em
}
#angle:before,
#shares:before {
color: #000;
font-size: 1rem
}
#shares:before {
content: "\f045"
}
#angle:before {
content: "\f103"
}
.galery {
display: flex;
flex-wrap: wrap;
justify-content: flex-start
}
.galery .gallery-thumb {
float: left;
background-color: #fff;
max-width: 100%;
text-align: center;
border-radius: 8px;
margin: 10px
}
.galery .gallery-thumb a img {
width: 250px;
height: auto;
box-shadow: 0 0 10px 0 rgba(0, 0, 0, .4);
border-radius: 8px;
float: left
}
@media (max-width:540px) {
.galery {
justify-content: center
}
.galery .gallery-thumb a img {
width: 100% !important;
box-shadow: 0 0 10px 0 rgba(0, 0, 0, .4);
border-radius: 8px
}
}
.p_avatar img {
width: 140px
}
.gallery.gallery-verleih,
.works.works-verleih {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center
}
.gallery-verleih .gallery-item {
overflow: hidden;
flex: auto
}
.gallery-verleih .gallery-item-sizer,
.works-verleih .works-item-sizer {
position: relative
}
.works-item-sizer {
margin: 0 10px
}
.gallery-verleih .gallery-item-contents {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-size: cover;
margin: 0
}
.gallery-verleih .gallery-item-contents img {
width: 100%;
height: 100%;
opacity: 0
}
#gallery-leistungen.gallery-verleih .gallery-item {
width: calc(25% - 10px - 10px);
margin: 10px;
min-width: 180px;
overflow: hidden;
flex: auto
}
#gallery-leistungen.gallery-verleih .gallery-item-sizer,
#gallery-leistungen.works-verleih .works-item-sizer {
padding-bottom: 100%;
position: relative
}
#gallery-leistungen.gallery .gallery-item {
transition: .3s ease-in-out opacity
}
.gallery-item-contents:hover:after {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin-top: 5px;
margin-left: 5px;
margin-right: 5px;
margin-bottom: 5px;
transition-duration: .3s
}
.gallery-item-contents:after {
z-index: 5;
position: absolute;
top: -20px;
bottom: -20px;
right: -20px;
left: -20px;
border-width: 1px;
border-style: solid;
border-image: linear-gradient(to right, #ffd2bd, #bfbdbd) 1;
border-top-width: 2px;
border-right-width: 2px;
border-bottom-width: 2px;
border-left-width: 2px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
margin-top: clamp(1.8rem, calc(1.8rem + ((1vw - .32rem) * 1.0714)), 2.5rem);
margin-left: clamp(1.8rem, calc(1.8rem + ((1vw - .32rem) * 1.0714)), 2.5rem);
margin-right: clamp(1.8rem, calc(1.8rem + ((1vw - .32rem) * 1.0714)), 2.5rem);
margin-bottom: clamp(1.8rem, calc(1.8rem + ((1vw - .32rem) * 1.0714)), 2.5rem);
transition-duration: .3s;
content: ""
}
.gallery-item-contents {
position: relative
}
.gallery-item:hover {
transform: scale(1.02, 1.02);
transition: .3s ease-in-out !important
}
.gallery-item {
transition-duration: .5s;
transition: .3s ease-in-out !important
}
.gallery-verleih .gallery-item-contents {
background-position: 50% 0
}
.gallery-verleih .gallery-item figcaption {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
font-size: 1rem;
font-weight: 700;
text-align: center;
background: rgba(0, 0, 0, .6);
padding: 10px 15px;
border-radius: 5px;
opacity: 0;
transition: opacity 0.3s ease-in-out
}
.gallery-verleih .gallery-item:hover figcaption {
opacity: 1
}
@media (max-width:768px) {
.gallery-verleih .gallery-item figcaption {
font-size: 1rem;
padding: 8px 12px
}
}
/* =========================================
Produktkatalog Layout wie im Screenshot
========================================= */
.produktkatalog .row{
display:flex;
flex-wrap:wrap;
gap:0;
}
.produktkatalog .col-2.article{
width:20%;
padding:0 18px;
box-sizing:border-box;
}
@media (max-width:1200px){
.produktkatalog .col-2.article{ width:33.33%; }
}
@media (max-width:800px){
.produktkatalog .col-2.article{ width:50%; }
}
@media (max-width:520px){
.produktkatalog .col-2.article{ width:100%; }
}
/* Card-Container: hier KEINE Box, nur saubere Spacing-Column */
.produktkatalog .col-2.article .how_it_works{
background:transparent;
border:none;
box-shadow:none;
padding:0;
display:flex;
flex-direction:column;
align-items:center;
text-align:center;
}
/* Bild oben: rechteckig, Schatten, kein Kreis, kein Hover-Rotate */
.produktkatalog .col-2.article .how_it_works > img{
width:100%;
height:auto;
aspect-ratio: 16 / 9;
object-fit:cover;
border-radius:0;
box-shadow:0 10px 22px rgba(0,0,0,.15);
margin:0 0 18px;
transition:transform .18s ease, box-shadow .25s ease;
}
.produktkatalog .col-2.article .how_it_works > img:hover{
transform:translateY(-2px);
box-shadow:0 14px 26px rgba(0,0,0,.18);
}
/* Titel: Caps + serif-artig wie im Screenshot */
.produktkatalog h3.box-header{
margin:4px 0 10px;
font-size:18px;
line-height:1.25;
letter-spacing:.6px;
text-transform:uppercase;
font-weight:800;
font-family: Georgia, "Times New Roman", Times, serif;
}
/* rote Linie unter Titel */
.produktkatalog h3.box-header::after{
content:"";
display:block;
width:60px;
height:3px;
background:#8f2500;
margin:10px auto 0;
border-radius:2px;
opacity:.9;
}
/* Microcopy: â links, wie im Screenshot */
.produktkatalog .category-microcopy{
margin:14px 0 14px;
font-size:14px;
font-weight:700;
color:#6c6c6c;
display:flex;
gap:8px;
align-items:flex-start;
justify-content:center;
}
/* Beschreibungstext */
.produktkatalog .desc{
color:#3a3a3a;
font-size:15px;
line-height:1.65;
width:100%;
max-width:360px;
display:flex;
flex-direction:column;
flex:1;
margin-bottom:20px;
}
/* Toggle (Beliebte Angebote) wie im Screenshot: weißes pill, feine Kante */
.produktkatalog .toggle-news{
-webkit-appearance:none;
appearance:none;
border:1px solid #ead9d3;
background:#fff;
color:#8f2500;
font-weight:800;
font-size:14px;
padding:9px 14px;
border-radius:999px;
display:inline-flex;
align-items:center;
justify-content:center;
gap:8px;
cursor:pointer;
box-shadow:0 8px 18px rgba(143,37,0,.10);
margin:18px auto 10px;
width: fit-content;
}
/* Pfeil als Chevron */
.produktkatalog .toggle-news .arrow{
font-size:0;
width:9px;height:9px;
display:inline-block;
border-right:2px solid currentColor;
border-bottom:2px solid currentColor;
transform:rotate(45deg);
transition:transform .2s ease;
}
.produktkatalog .toggle-news[aria-expanded="true"] .arrow{
transform:rotate(-135deg);
}
/* News-Liste: clean, nicht “glowig“ */
.produktkatalog .news-content{
margin:10px auto 8px;
width:100%;
max-width:360px;
padding:12px 14px;
border:1px solid #ead9d3;
border-radius:12px;
background:#fff;
box-shadow:0 10px 20px rgba(0,0,0,.06);
text-align:left;
max-height:220px;
overflow:auto;
}
/* CTA Button unten: braun pill */
.produktkatalog .btn.blue{
margin:10px auto 0;
background:#8f2500;
color:#fff;
font-weight:900;
border-radius:999px;
padding:10px 18px;
box-shadow:0 10px 20px rgba(143,37,0,.22);
display:inline-flex;
justify-content:center;
align-items:center;
border:none;
width: fit-content;
}
.produktkatalog .btn.blue:hover{
background:#a62e00;
transform:translateY(-1px);
}
/* WICHTIG: alte Kreis-Styles im Katalog deaktivieren */
.produktkatalog .how_it_works .image,
.produktkatalog .how_it_works .image:hover,
.produktkatalog .how_it_works .image img,
.produktkatalog .how_it_works .image:hover img{
all:unset;
}
/* ===== Fix: Karten bekommen gleiche Höhe + saubere Unterkante ===== */
.produktkatalog .col-2.article{
display:flex; /* macht die Spalte zum Flex-Item */
}
.produktkatalog .col-2.article .how_it_works{
width:100%;
height:100%;
padding-bottom:22px; /* Luft unter Button */
}
/* Inhalt füllt die Karte und drückt Button nach unten */
.produktkatalog .col-2.article .desc{
flex:1;
margin-bottom:0; /* raus, sonst verschiebt sich alles */
padding-bottom:14px; /* Abstand innerhalb der Karte */
}
/* CTA immer unten */
.produktkatalog .col-2.article .btn.blue{
margin-top:auto; /* klebt an die Unterkante */
}
/* =========================================
Responsive Feinschliff: Mobile / Tablet / iPad
(unter dein Produktkatalog-CSS setzen)
========================================= */
/* Desktop Default bleibt 5 Spalten (20%) */
/* ====== Large Tablet / iPad Querformat (>= 1024 bis 1200) ====== */
@media (max-width: 1200px){
.produktkatalog .col-2.article{
width:33.333%;
padding:0 16px;
margin-bottom:28px;
}
.produktkatalog h3.box-header{
font-size:17px;
}
.produktkatalog .desc{
max-width:420px;
font-size:15px;
}
}
/* ====== iPad Hochformat / Tablet (<= 1024) ====== */
@media (max-width: 1024px){
.produktkatalog .row{
gap:0;
}
.produktkatalog .col-2.article{
width:50%;
padding:0 14px;
margin-bottom:28px;
}
/* Bild etwas kompakter, damit weniger Scroll */
.produktkatalog .col-2.article .how_it_works > img{
aspect-ratio: 16 / 10;
margin-bottom:14px;
}
.produktkatalog h3.box-header{
font-size:16px;
line-height:1.25;
}
.produktkatalog .category-microcopy{
font-size:13.5px;
margin:12px 0 12px;
}
.produktkatalog .desc{
max-width:520px;
font-size:14.5px;
line-height:1.6;
}
/* Buttons etwas breiter für Touch */
.produktkatalog .toggle-news,
.produktkatalog .btn.blue{
min-height:44px; /* iOS Touch guideline */
padding:10px 16px;
}
.produktkatalog .news-content{
max-height:200px;
}
}
/* ====== Mobile (<= 768) ====== */
@media (max-width: 768px){
.produktkatalog .col-2.article{
width:100%;
padding:0 12px;
margin-bottom:26px;
}
/* Card-Spacer: mehr Luft, weniger „gequetscht“ */
.produktkatalog .col-2.article .how_it_works{
padding-bottom:6px;
}
.produktkatalog .col-2.article .how_it_works > img{
aspect-ratio: 16 / 9;
box-shadow:0 10px 18px rgba(0,0,0,.14);
}
/* Headline nicht zu fett groß auf Handy */
.produktkatalog h3.box-header{
font-size:15px;
letter-spacing:.4px;
margin:2px 0 8px;
}
.produktkatalog h3.box-header::after{
width:52px;
margin-top:8px;
}
/* Microcopy: schöner Zeilenumbruch */
.produktkatalog .category-microcopy{
max-width: 92%;
margin:12px auto 10px;
font-size:13px;
line-height:1.35;
}
.produktkatalog .desc{
max-width: 92%;
font-size:14px;
line-height:1.65;
}
/* Toggle + Button: volle Breite auf Mobile */
.produktkatalog .toggle-news,
.produktkatalog .btn.blue{
width: 92%;
max-width: 420px;
}
/* News Box */
.produktkatalog .news-content{
width:92%;
max-width:420px;
max-height: 190px;
}
}
/* ====== Sehr klein (<= 360) ====== */
@media (max-width: 360px){
.produktkatalog h3.box-header{
font-size:14px;
}
.produktkatalog .desc{
font-size:13.5px;
}
}
/* ====== iOS Safe Area (Notch) ====== */
@supports(padding: max(0px)){
.produktkatalog{
padding-left: max(0px, env(safe-area-inset-left));
padding-right:max(0px, env(safe-area-inset-right));
}
}
/* ====== Hover Effekte auf Touch-Geräten entschärfen ====== */
@media (hover: none){
.produktkatalog .col-2.article .how_it_works > img:hover{
transform:none;
box-shadow:0 10px 22px rgba(0,0,0,.15);
}
.produktkatalog .btn.blue:hover{
transform:none;
}
}
/* ====== Optional: Wenn die Schrift zu breit wird, sauber umbrechen ====== */
.produktkatalog h3.box-header,
.produktkatalog .desc,
.produktkatalog .category-microcopy{
overflow-wrap: anywhere;
word-break: normal;
}
@media (max-width: 1024px){
.produktkatalog .col-2.article .how_it_works > img{
border-radius:10px; /* modern, wirkt weniger hart */
}
}
.how_it_works {
text-align: center;
position: relative;
color: #2a2a2a
}
.how_it_works .image {
width: 250px;
height: 250px;
line-height: 194px;
text-align: center;
position: relative;
margin: 0 auto 15px;
background-color: #fff;
border-width: 2px;
border-style: solid;
border-radius: 100%;
border-color: rgba(255, 255, 255, .2);
transition: border-color 0.3s ease, transform 0.3s ease;
transform: scale(1)
}
.how_it_works .image:hover {
border-color: #fff;
transform: scale(1.1) rotate(360deg)
}
.how_it_works .image i {
color: #2a2a2a
}
.how_it_works .image.shadow {
box-shadow: 0 0 10px 0 rgba(0, 0, 0, .1)
}
.how_it_works .image img {
display: block;
margin: 0 auto;
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 50%;
vertical-align: middle;
transition: transform 0.3s ease
}
.how_it_works .image:hover img {
transform: scale(1.05)
}
.with_aside .how_it_works .image {
width: 146px;
height: 146px;
line-height: 144px
}
.with_aside .how_it_works .image img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 50%
}
.how_it_works.fill .image img {
border-radius: 100%;
max-width: 196px !important;
max-height: 196px !important
}
.with_aside .how_it_works.fill .image img {
max-width: 146px !important;
max-height: 146px !important
}
.how_it_works .desc p {
padding: 10px 0
}
.how_it_works img {
width: 100%;
height: 100%;
object-fit: cover;
box-shadow: 0 6px 20px rgba(0, 0, 0, .1);
transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
margin-bottom: 25px
}
.how_it_works img:hover {
transform: scale(1.05);
box-shadow: 0 8px 30px rgba(0, 0, 0, .2);
border-color: rgba(0, 0, 0, .2)
}
* {
box-sizing: border-box
}
/* ===== Beschreibung & Button im how_it_works-Block ===== */
.how_it_works .desc {
text-align: center;
color: #55413c;
font-size: 1rem;
line-height: 1.6;
margin: 0 auto;
}
/* ==============================
RENT / 4 Schritte - Patch CSS
(unter dein bestehendes CSS)
================================= */
/* Section spacing */
.rent.full{
padding: 40px 0;
}
/* Überschrift-Header sauber zentrieren + kein grauer Balken-Feeling */
.rent header,
.rent .revealator-zoomin{
max-width: 1200px;
margin: 0 auto 22px;
padding: 0 18px;
text-align: center;
}
/* ==============================
4 Schritte Layout (Grid)
================================= */
.rent .works.works-verleih{
max-width: 1400px;
margin: 0 auto;
padding: 0 18px;
display: grid !important;
grid-template-columns: repeat(4, minmax(0, 1fr)); /* ✅ 4 nebeneinander */
gap: 22px;
align-items: stretch;
}
/* Tablet / iPad: 2 Spalten */
@media (max-width: 1100px){
.rent .works.works-verleih{
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
/* Mobile: 1 Spalte */
@media (max-width: 680px){
.rent .works.works-verleih{
grid-template-columns: 1fr;
}
}
/* Artikel dürfen nicht mit alten floats/widths kämpfen */
.rent .works-item-sizer{
width: auto !important;
float: none !important;
}
/* Cards gleich hoch + Button bleibt unten */
.rent .works-verleih .how_it_works{
height: 100%;
display: flex;
flex-direction: column;
}
.rent .works-verleih .how_it_works .desc{
flex: 1;
display: flex;
flex-direction: column;
}
.rent .works-verleih .how_it_works .desc .btn{
margin-top: auto !important; /* ✅ CTA klebt nicht am nächsten Block */
}
/* rent-note soll unten über die ganze Breite, zentriert */
.rent .works.works-verleih .rent-note-wrap{
grid-column: 1 / -1; /* ✅ über alle Spalten */
width: 100%;
display: flex;
justify-content: center; /* ✅ zentriert */
margin-top: 10px;
}
.rent .rent-note{
max-width: 980px!important;
text-align: center!important;
margin: 0!important;
}
/* ==============================
FIX: Grauer Balken im RENT Header
(nur in .rent / keine Nebenwirkungen)
================================= */
.rent .revealator-zoomin,
.rent .revealator-zoomin *{
background: transparent !important;
box-shadow: none !important;
}
.rent h2.box-header.white{
background: transparent !important;
border: 0 !important;
padding: 0 !important;
margin: 0 auto !important;
display: block !important;
text-align: center !important;
}
/* falls du eine Linie/Box über ::before/::after bekommst */
.rent h2.box-header.white::before,
.rent h2.box-header.white::after{
background: transparent !important;
box-shadow: none !important;
}
/* Intro Text unter H2 */
.rent .rent-intro{
margin: 12px auto 0;
max-width: 920px;
font-size: 16px;
line-height: 1.6;
color: rgba(255,255,255,.88);
}
/* Works Grid: 2 Spalten auf Desktop, 1 auf Mobile */
.works-verleih{
max-width: 1200px;
margin: 0 auto;
padding: 0 18px;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 26px;
align-items: start;
}
/* Cards: gleiche Höhe, sauberer Abstand */
.works-verleih .works-item-sizer{
width: auto !important; /* falls irgendwo floats/width greifen */
float: none !important;
}
.works-verleih .how_it_works{
background: rgba(0,0,0,.18);
border: 1px solid rgba(255,255,255,.12);
border-radius: 18px;
padding: 26px 22px;
text-align: center;
min-height: 360px;
display: flex;
flex-direction: column;
justify-content: flex-start;
}
/* Kreis-Icon: figure statt div.image sauber behandeln */
.works-verleih .how_it_works figure.image{
width: 190px;
height: 190px;
margin: 0 auto 18px;
border-radius: 50%;
overflow: hidden;
box-shadow: 0 10px 26px rgba(0,0,0,.25);
border: 2px solid rgba(255,255,255,.18);
background: rgba(255,255,255,.06);
}
/* Bild im Kreis */
.works-verleih .how_it_works figure.image img{
width: 100%;
height: 100%;
object-fit: cover;
display: block;
border-radius: 50%;
}
/* Entfernt den nervigen alten rotate/scale hover nur im RENT Bereich */
.works-verleih .how_it_works .image:hover,
.works-verleih .how_it_works .image:hover img{
transform: none !important;
}
/* Step Titles: sauber, gleichmäßig, ohne “grauen Balken“ */
.works-verleih .how_it_works h3.box-header,
.works-verleih .how_it_works h4{
margin: 8px 0 10px;
color: #fff;
text-transform: uppercase;
letter-spacing: .6px;
font-family: Georgia, "Times New Roman", Times, serif;
font-weight: 800;
font-size: 18px;
line-height: 1.25;
}
/* rote Linie unter Titel */
.works-verleih .how_it_works h3.box-header::after,
.works-verleih .how_it_works h4::after{
content:"";
display:block;
width: 60px;
height: 3px;
background: #8f2500;
margin: 10px auto 0;
border-radius: 2px;
}
/* Text im Step */
.works-verleih .how_it_works .desc{
color: rgba(255,255,255,.90);
font-size: 15px;
line-height: 1.6;
max-width: 520px;
margin: 0 auto;
}
/* Button: immer unten in der Card, nicht zum nächsten Produkt rutschen */
.works-verleih .how_it_works .desc{
flex: 1;
display: flex;
flex-direction: column;
}
.works-verleih .how_it_works .desc .btn.blue{
margin-top: auto !important;
align-self: center;
}
/* rent-note: lesbar, “Karte“ */
.rent .rent-note{
margin: 18px auto 0;
max-width: 920px;
padding: 14px 16px;
border-radius: 14px;
background: rgba(0,0,0,.22);
border: 1px solid rgba(255,255,255,.12);
color: rgba(255,255,255,.92);
line-height: 1.65;
}
/* ==============================
Responsive: Tablet / iPad
================================= */
@media (max-width: 980px){
.works-verleih{
grid-template-columns: 1fr 1fr;
gap: 18px;
}
.works-verleih .how_it_works{
padding: 22px 16px;
min-height: 340px;
}
.works-verleih .how_it_works figure.image{
width: 165px;
height: 165px;
}
}
/* ==============================
Responsive: Mobile
================================= */
@media (max-width: 680px){
.works-verleih{
grid-template-columns: 1fr;
gap: 14px;
}
.rent .rent-intro{
font-size: 15px;
}
.works-verleih .how_it_works{
min-height: unset;
}
}
/* Falls irgendwo noch alte floats aus .row/[class*=col-] reingrätschen */
.rent .row, .rent [class*=col-]{
float: none !important;
width: auto !important;
}
/* Abstand zur Beschreibung */
.how_it_works .desc p {
padding: 10px 0 0;
margin: 0;
}
/* ==== Einheitlicher Button-Stil (wie im Popup) ==== */
.how_it_works .desc .btn.blue {
display: inline-flex;
align-items: center;
justify-content: center;
background-color: var(--brand, #8f2500);
color: #fff;
border: none;
border-radius: 999px;
padding: 10px 18px;
font-size: 15px;
font-weight: 700;
text-decoration: none;
cursor: pointer;
box-shadow: 0 6px 18px rgba(143, 37, 0, 0.18);
transition: background-color 0.25s ease, transform 0.15s ease, box-shadow 0.25s ease;
margin-top: 10px;
}
.how_it_works .desc .btn.blue:hover {
background-color: #a62e00;
transform: translateY(-1px);
box-shadow: 0 8px 22px rgba(143, 37, 0, 0.25);
}
.how_it_works .desc .btn.blue:focus-visible {
outline: 3px solid #8f2500;
outline-offset: 3px;
}
/* ==== Responsive Optimierung ==== */
@media (max-width: 600px) {
.how_it_works .desc {
font-size: 0.95rem;
line-height: 1.5;
}
.how_it_works .desc .btn.blue {
font-size: 14px;
padding: 8px 15px;
}
}
/* === Toggle-Button "Hier anzeigen" harmonisieren === */
.how_it_works .toggle-news{
-webkit-appearance:none;
appearance:none;
border:1px solid var(--muted, #e7dedb);
background:#fff;
color:var(--brand, #8f2500);
font-weight:700;
font-size:14px;
line-height:1;
padding:9px 14px;
border-radius:999px;
display:inline-flex;
align-items:center;
gap:8px;
cursor:pointer;
box-shadow:0 4px 14px rgba(143,37,0,.12);
transition:background-color .2s ease, border-color .2s ease, box-shadow .25s ease, transform .12s ease;
margin:10px auto 6px; /* sauberer Abstand unter dem Text */
}
.how_it_works .toggle-news:hover{
background:#fff4ef;
border-color:var(--brand, #8f2500);
box-shadow:0 6px 18px rgba(143,37,0,.18);
transform:translateY(-1px);
}
.how_it_works .toggle-news:active{ transform:translateY(0); }
.how_it_works .toggle-news:focus-visible{
outline:3px solid var(--brand, #8f2500);
outline-offset:2px;
}
/* Pfeil als CSS-Chevron (Emoji ausblenden) */
.how_it_works .toggle-news .arrow{
font-size:0; /* Emoji verstecken */
width:9px; height:9px;
display:inline-block;
border-right:2px solid currentColor;
border-bottom:2px solid currentColor;
transform:rotate(45deg); /* â–¼-Anmutung */
transition:transform .2s ease, border-color .2s ease;
}
/* gedreht, wenn geöffnet */
.how_it_works .toggle-news[aria-expanded="true"] .arrow{
transform:rotate(-135deg); /* Pfeil zeigt nach oben */
}
/* Optional: Box für die ausgeklappten Links etwas aufräumen */
.how_it_works .news-content{
margin-top:10px;
padding:10px 12px;
background:#fff;
border:1px solid var(--muted, #e7dedb);
border-radius:10px;
box-shadow:0 6px 16px rgba(0,0,0,.06);
}
@media (max-width:600px){
.how_it_works .toggle-news{ font-size:13px; padding:8px 12px; }
}
/* ==== Verfeinertes Styling für ausgeklappte Produktliste ==== */
.how_it_works .news-content {
margin-top: 12px;
padding: 14px 16px;
background: #fff;
border: 1px solid var(--muted, #e7dedb);
border-radius: 12px;
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06);
text-align: left;
max-height: 250px;
overflow-y: auto;
font-size: 0.95rem;
line-height: 1.5;
transition: all 0.3s ease;
}
/* dezentere Scrollbar */
.how_it_works .news-content::-webkit-scrollbar {
width: 6px;
}
.how_it_works .news-content::-webkit-scrollbar-thumb {
background-color: rgba(143, 37, 0, 0.4);
border-radius: 10px;
}
/* einzelne Zeilen */
.how_it_works .news-content span {
display: flex;
align-items: flex-start;
gap: 8px;
margin: 2px 0;
padding: 6px 0;
border-bottom: 1px dotted #eee;
}
/* Letzter Eintrag ohne Linie */
.how_it_works .news-content span:last-child {
border-bottom: none;
}
/* Icons optional kleiner + vertikal justiert */
.how_it_works .news-content span::before {
content: "-";
font-size: 1rem;
line-height: 1.2;
opacity: 0.85;
}
/* Falls Emoji im Link schon vorhanden -> kein eigenes Symbol */
.how_it_works .news-content span:has(a[href*='🎪']),
.how_it_works .news-content span:has(a[href*='🚀'])::before {
content: "";
}
/* Links modern & markenkonform */
.how_it_works .news-content a {
color: var(--brand, #8f2500);
text-decoration: none;
font-weight: 600;
transition: color 0.2s ease, text-shadow 0.2s ease;
}
.how_it_works .news-content a:hover {
color: #a63000;
text-shadow: 0 0 6px rgba(166, 48, 0, 0.15);
}
/* Slide-in Animation beim Öffnen */
.how_it_works .news-content {
opacity: 0;
transform: translateY(-6px);
animation: fadeSlideIn 0.35s ease forwards;
}
@keyframes fadeSlideIn {
to {
opacity: 1;
transform: translateY(0);
}
}
/* Mobile Feinschliff */
@media (max-width:600px) {
.how_it_works .news-content {
padding: 10px 12px;
font-size: 0.9rem;
max-height: 220px;
}
}
.row::after {
content: "";
clear: both;
display: table
}
[class*=col-] {
width: 100%;
float: left
}
@media only screen and (min-width:1000px) {
.col-1 {
width: 8.33%
}
.col-2 {
width: 20%
}
.col-3 {
width: 25%
}
.col-4 {
width: 33.33%
}
.col-5 {
width: 41.66%
}
.col-6 {
width: 50%
}
.col-7 {
width: 58.33%
}
.col-8 {
width: 66.66%
}
.col-9 {
width: 75%
}
.col-10 {
width: 83.33%
}
.col-11 {
width: 91.66%
}
.col-12 {
width: 100%
}
}
.article,
article {
border: none;
border-style: none;
padding: 30px 10px
}
kontakt .article {
min-width: 500px
}
.how_it_works.no-img .image {
height: 55px;
background: 0 0;
border-width: 0
}
.how_it_works.no-img .image .number {
left: 50%;
margin-left: -18px
}
.image .fa {
color: #2a2a2a
}
.benefits {
width: 100%;
background-color: gray;
box-shadow: 0 0 10px 0 rgba(0, 0, 0, .4);
color: #fff
}
.benefits__wrapper {
display: flex;
margin: 0 auto
}
.benefits__item {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 220px;
height: 220px;
margin: 50px auto;
border: 5px solid transparent;
border-radius: 50%;
background: linear-gradient(45deg, #ff7f50, #3f3835, #ff7f50, #3f3835);
background-size: 200% 200%;
animation: moveBackground 3s ease infinite, moveBorder 3s ease infinite;
transition: all 0.3s ease;
box-shadow: 0 0 20px rgba(0, 0, 0, .2)
}
@keyframes moveBackground {
0% {
background-position: 0% 50%
}
50% {
background-position: 100% 50%
}
100% {
background-position: 0% 50%
}
}
@keyframes moveBorder {
0% {
border-color: rgba(255, 127, 80, 0);
border-width: 5px
}
50% {
border-color: rgba(255, 127, 80, 1);
border-width: 10px
}
100% {
border-color: rgba(255, 127, 80, 0);
border-width: 5px
}
}
.benefits__item:hover {
background-color: coral;
transform: scale(1.1);
box-shadow: 0 0 30px rgba(0, 0, 0, .3)
}
@media (max-width:800px) {
.benefits__item {
margin: 5px;
width: 170px;
height: 170px;
font-size: .75rem
}
}
.benefits__number {
font-family: "Open Sans", sans-serif;
font-weight: 100;
font-size: 3.25rem;
color: #fff;
display: block;
text-align: center;
align-self: center
}
.benefits__item {
position: relative
}
.benefits__item[data-tooltip]:hover::after {
content: attr(data-tooltip);
position: absolute;
bottom: 100%;
left: 50%;
font-size: 1rem;
transform: translateX(-50%);
background-color: rgba(0, 0, 0, .75);
color: #fff;
padding: 5px;
border-radius: 5px;
white-space: normal;
word-wrap: break-word;
min-width: 250px;
z-index: 10;
opacity: 0;
pointer-events: none;
transition: opacity 0.3s
}
.benefits__item[data-tooltip]:hover::after {
opacity: 1
}
.prozent {
color: #ffebe0
}
.number {
line-height: 0;
margin: 0;
text-align: center;
align-self: center
}
.benefits__title {
max-width: 120px;
text-align: center;
align-self: center;
color: #fff
}
table td,
table th {
padding: 10px
}
.form-anfrage1 {
float: left;
width: 68%
}
.form-anfrage2 {
width: 18%;
margin-left: 10px
}
/* Grundlayout */
.pickup-time {
display:block;
max-width: 100%; /* verhindert zu breite Zeilen im Desktop-Table */
}
.pickup-time .req { color:#e11d48; } /* rot für Sternchen */
.pickup-time__hint{
font-size: .9em;
color:#6b7280;
display:block;
margin: 6px 0 10px;
line-height: 1.45;
}
/* Zeile mit Select + "Uhr" */
.pickup-time__row{
display:flex;
align-items:center;
gap:10px;
margin-top:6px;
}
/* Select - große Klickfläche, gute Lesbarkeit */
.pickup-time__select{
width: 180px;
max-width: 100%;
padding: 10px 12px;
font-size: 1rem;
line-height: 1.2;
}
.pickup-time__suffix{
color:#111827;
}
/* ------- Mobil (stacked) ------- */
@media (max-width: 640px){
.pickup-time{
max-width: 100%;
}
.pickup-time__row{
flex-direction: column;
align-items: stretch;
gap:8px;
}
.pickup-time__select{
width: 100%;
font-size: 16px; /* iOS: verhindert Zoom beim Fokus */
padding: 12px 14px;
}
.pickup-time__suffix{
align-self: flex-end;
opacity: .9;
}
}
/* Optional: in Tabellen die Zelle nicht „quetschen“ */
@media (max-width: 640px){
td .pickup-time { width: 100%; }
}
.bgslider {
position: relative;
background: linear-gradient(135deg, rgba(30, 30, 30, .9), rgba(80, 40, 20, .8)), url(/modules/tpl.robotix/images/bg1.png) center/cover fixed;
margin: 0 auto;
border-bottom: 3px solid rgba(255, 255, 255, .2);
box-shadow: 0 10px 30px rgba(0, 0, 0, .5);
padding-left:40px;
}
.bgslider p a{
color:white;
}
/* =========================================================
HERO: Keyword-Block (hero-title-sub) - Mobile Fix
Ziel: kompakt, sauber umbrechend, keine „komischen“ Zeilen
========================================================= */
@media (max-width: 760px){
.hero-title-sub{
display:block !important;
max-width: 100% !important;
/* Optik */
margin: 10px 0 14px !important;
padding: 10px 12px !important;
border-radius: 12px !important;
/* Lesbarkeit */
font-size: 13px !important;
line-height: 1.45 !important;
font-weight: 700 !important;
color: rgba(255,255,255,.92) !important;
/* leichte „Card“, aber unauffällig */
background: rgba(0,0,0,.18) !important;
border: 1px solid rgba(255,255,255,.10) !important;
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
/* wichtig: kein Zentrieren durch parent */
text-align: left !important;
/* sauberes Umbrechen bei langen Wörtern */
word-break: normal;
overflow-wrap: anywhere;
hyphens: auto;
}
/* Links im Keyword-Block: wie Text (nicht blau/unterstrichen) */
.hero-title-sub a{
color: inherit !important;
text-decoration: none !important;
border-bottom: 1px solid rgba(229,161,104,.28); /* dezenter Akzent */
padding-bottom: 1px;
}
.hero-title-sub a:active,
.hero-title-sub a:hover{
border-bottom-color: rgba(229,161,104,.55);
}
/* Punkte/Trenner ruhiger (damit sie nicht „laut“ wirken) */
.hero-title-sub{
letter-spacing: .1px;
}
/* Optional: wenn es immer noch zu “busy“ ist -> 2 Zeilen max (abschneiden) */
/*
.hero-title-sub{
display: -webkit-box !important;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
*/
}
.bgslider1 {
position: relative;
background: #363d49 url(/modules/tpl.robotix/images/bg1.png) 0 0 fixed;
margin: 0 auto;
border-bottom: 1px solid #ddd
}
.bgslider .slick-dots,
.bgslider1 .slick-dots {
position: absolute;
bottom: 20px
}
section {
position: relative;
transition: all 0.3s ease;
padding-top: 40px;
padding-bottom: 40px
}
@media (max-width:720px) {
#logor {
font-size: 1rem;
margin: 0 20px 0 20px
}
}
.bgslider section,
.bgslider1 section {
max-width: 1600px;
align-items: center;
margin: 30px auto;
box-sizing: border-box
}
.bgslider section p,
.bgslider1 section p {
color: #000
}
.bgslider section .flex,
.bgslider section .flex1 {
display: flex;
display: -webkit-flex;
align-items: center;
padding-top: 30px;
-webkit-align-items: center;
height: 85vh;
overflow: hidden
}
.bgslider section .flex1,
.bgslider1 section .flex1 {
height: 100%;
text-align: center;
display: flex;
justify-content: center;
align-items: center
}
.bgslider section .flex .i1,
.bgslider1 section .flex .i1 {
flex-basis: 55%;
-webkit-flex-basis: 55%
}
.left {
text-align: left
}
.bgslider section .flex .i1i,
.bgslider1 section .flex .i1i {
flex-basis: 100%;
-webkit-flex-basis: 100%;
align-items: center;
-webkit-align-items: center
}
.bgslider section .flex .i2,
.bgslider1 section .flex .i2 {
flex-basis: 45%;
-webkit-flex-basis: 45%;
box-sizing: border-box;
margin-bottom: 10px
}
.bgslider section h1,
.bgslider section p {
margin: 0
}
.bgslider section h1 {
font-weight: 700;
font-size: 2.5rem;
text-transform: uppercase;
padding: 20px 0;
color: #e5a168;
line-height: 1.5;
text-shadow: 4px 4px 8px rgba(0, 0, 0, .3);
letter-spacing: 1.5px;
margin-right: 40px;
font-family: "Playfair Display", serif
}
.bgslider1 section h1 {
font-size: 2.8rem;
font-weight: 700;
text-align: center;
margin: 0 auto;
color: #333;
text-shadow: 2px 2px 10px rgba(0, 0, 0, .25);
letter-spacing: .7px;
line-height: 1.5;
font-family: 'Roboto', sans-serif;
padding: 15px 30px;
transition: all 0.3s ease-in-out
}
.bgslider1 section h1:hover {
color: #a43e0b;
transform: scale(1.05);
text-shadow: 2px 2px 15px rgba(0, 0, 0, .3)
}
.bgslider section p,
.bgslider1 section p {
font-size: 1.1rem;
color: #f4f4f4;
line-height: 1.5;
text-align: left;
max-width: 800px;
font-family: "Open Sans", sans-serif;
text-shadow: 2px 2px 4px rgba(0, 0, 0, .2);
margin-bottom: 15px;
margin-right: 40px;
opacity: .9
}
.bgslider section img,
.bgslider1 section img {
width: 100% !important;
max-width: 100% !important;
margin-top: 10px;
height: 100% !important;
border: 12px solid #eee;
transition: border-color 0.3s ease
}
.bgslider section img:hover,
.bgslider1 section img:hover {
border-color: #e5a168
}
.bgslider section .btn,
.bgslider1 section .btn {
margin-top: 30px
}
@media screen and (max-width:1280px) {
body {
line-height: 1.5
}
.slider-head section .flex .i1 {
padding: 50px
}
.bgslider {
padding-left:0px;
}
.slider-head section h1,
.bgslider1 section h1 {
font-size: 2rem;
text-align: center;
margin: 0 auto
}
.bgslider section img,
.bgslider1 section img {
width: 100% !important;
max-width: 100% !important;
height: 100%;
margin-top: 10px;
border: 12px solid #eee
}
.bgslider section h1,
.bgslider section p,
.bgslider1 section h1,
.bgslider1 section p {
margin: 0;
text-align: left
}
.bgslider section .flex .i1,
.bgslider1 section .flex .i1 {
display: block
}
.bgslider section .flex,
.bgslider1 section .flex {
display: block;
height: auto
}
.bgslider section .flex .phone,
.bgslider1 section .flex .phone {
text-align: center;
margin: 0 auto;
align-items: center;
justify-content: center
}
.bgslider section .flex .i1 .mobil-none,
.bgslider1 section .flex .i1 .mobil-none {
display: none
}
.bgslider section .flex .i2,
.bgslider1 section .flex .i2 {
flex-basis: 100%;
-webkit-flex-basis: 100%;
display: block;
padding: 0 20px;
margin-bottom: 50px;
box-sizing: border-box
}
.slide-logo-content {
height: auto
}
}
.slider-head section {
height: auto
}
header {
background: gray
}
header h1 {
color: gray
}
.footer-delivery{
margin-top: 18px;
padding-top: 18px;
border-top: 1px solid rgba(255,255,255,.12);
}
.footer-delivery__title{
font-size: 16px;
line-height: 1.3;
margin: 0 0 8px;
}
.footer-delivery__intro{
margin: 0 0 10px;
font-size: 14px;
opacity: .9;
}
.footer-delivery__toggle{
border: 1px solid rgba(255,255,255,.12);
border-radius: 12px;
padding: 10px 12px;
margin: 0 auto;
background: rgba(255,255,255,.04);
}
.footer-delivery__toggle > summary{
cursor: pointer;
font-weight: 800;
list-style: none;
}
.footer-delivery__toggle > summary::-webkit-details-marker{ display:none; }
.footer-delivery__grid{
margin-top: 12px;
display: grid;
gap: 14px;
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.footer-delivery__h{
font-size: 14px;
margin: 0 0 6px;
font-weight: 900;
}
.footer-delivery ul{
margin: 0;
padding-left: 18px;
font-size: 13px;
line-height: 1.45;
opacity: .92;
}
.footer-delivery__cta{
margin: 12px 0 0;
}
.footer-delivery__link{
font-weight: 800;
text-decoration: none;
}
@media (max-width: 980px){
.footer-delivery__grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px){
.footer-delivery__grid{ grid-template-columns: 1fr; }
}
.info {
background: #009688;
padding: 3vh 10vw;
color: gray
}
#overlay {
position: fixed;
top: 0;
left: 0;
display: none;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, .65);
z-index: 999;
-webkit-animation: fade .6s;
-moz-animation: fade .6s;
animation: fade .6s;
overflow: auto
}
.popup {
top: 10%;
left: 0;
right: 0;
font-size: 1rem;
margin: auto;
width: 85%;
min-width: 320px;
max-width: 600px;
position: absolute;
padding: 15px 20px;
border: 1px solid #383838;
background: #fefefe;
z-index: 9999;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-ms-border-radius: 4px;
border-radius: 4px;
font: 14px/18px Tahoma, Arial, sans-serif;
-webkit-box-shadow: 0 15px 20px rgba(0, 0, 0, .22), 0 19px 60px rgba(0, 0, 0, .3);
-moz-box-shadow: 0 15px 20px rgba(0, 0, 0, .22), 0 19px 60px rgba(0, 0, 0, .3);
-ms-box-shadow: 0 15px 20px rgba(0, 0, 0, .22), 0 19px 60px rgba(0, 0, 0, .3);
box-shadow: 0 15px 20px rgba(0, 0, 0, .22), 0 19px 60px rgba(0, 0, 0, .3);
-webkit-animation: fade .6s;
-moz-animation: fade .6s;
animation: fade .6s
}
.popup h2 {
color: #2a2a2a;
font-size: 1.375rem
}
.close {
top: 10px;
right: 10px;
width: 30px;
height: 30px;
position: absolute;
border: none;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%;
border-radius: 50%;
background-color: #2a2a2a;
-webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .16), 0 2px 10px 0 rgba(0, 0, 0, .12);
-moz-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .16), 0 2px 10px 0 rgba(0, 0, 0, .12);
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .16), 0 2px 10px 0 rgba(0, 0, 0, .12);
cursor: pointer;
outline: 0
}
.close:before {
color: #fff;
font-weight: 700;
content: "X";
font-family: Arial, Helvetica, sans-serif;
font-size: .875rem;
font-weight: 400;
text-decoration: none;
text-shadow: 0 -1px rgba(0, 0, 0, .9);
-webkit-transition: all .5s;
-moz-transition: all .5s;
transition: all .5s
}
.close:hover {
background-color: rgba(252, 20, 0, .8)
}
.popup img {
width: 100%;
height: auto;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .16), 0 2px 10px 0 rgba(0, 0, 0, .12)
}
.pl-left,
.pl-right {
width: 25%;
height: auto
}
.pl-right {
float: right;
margin: 5px 0 5px 15px
}
.pl-left {
float: left;
margin: 5px 18px 5px 0
}
@-moz-keyframes fade {
from {
opacity: 0
}
to {
opacity: 1
}
}
@-webkit-keyframes fade {
from {
opacity: 0
}
to {
opacity: 1
}
}
@keyframes fade {
from {
opacity: 0
}
to {
opacity: 1
}
}
.n-danger,
.n-info,
.n-success,
.n-warning {
margin: 25px;
padding: 12px 12px 12px 37px;
color: #333;
border-radius: 2px;
background: #fff;
position: relative;
font-weight: 700;
font-family: "Open Sans", sans-serif;
font-size: 1rem;
box-sizing: border-box
}
.n-danger:before,
.n-info:before,
.n-success:before,
.n-warning:before {
content: "";
background: inherit;
color: inherit;
border: inherit;
display: block;
text-align: center;
width: 50px;
height: 50px;
border-radius: 50%;
line-height: 2.75;
position: absolute;
left: -25px;
box-sizing: border-box;
font-family: "Open Sans", sans-serif;
font-size: 1rem
}
.n-success {
border: 2px solid #32a846;
color: #32a846
}
.n-success:before {
content: "\f00c"
}
.n-warning {
border: 2px solid #f08d3c;
color: #f08d3c
}
.n-warning:before {
content: "\f12a"
}
.n-danger {
border: 2px solid #d9534f;
color: #d9534f
}
.n-danger:before {
content: "\f057"
}
.n-info {
border: 2px solid #3d98e3;
color: #3d98e3
}
.n-info:before {
content: "\f129"
}
.sectionBody {
max-width: 1600px;
margin: 0 auto
}
.sectionBody .columns .post-it-style .post-it-body .flex-vertical-content-wrapper {
width: 100%
}
.sectionBody .columns .post-it-style .post-it-body {
height: 100%;
width: 100%;
display: flex;
justify-content: center;
align-items: center
}
.sectionBody .columns .post-it-style .post-it-body .flex-vertical-content-wrapper {
width: 100%
}
.sectionBody .columns .column-content .post-it-style {
padding: 19px 13px 17px;
background: #fff
}
@media only screen and (min-width:30.06em) {
.sectionBody .columns .column-content .post-it-style {
padding: 19px 53px 17px
}
}
@media only screen and (min-width:48.063em) {
.sectionBody .columns .column-content .post-it-style {
padding: 19px 73px 17px
}
}
@media only screen and (min-width:64em) {
.sectionBody .columns .column-content .post-it-style {
padding: 19px 13px 17px
}
}
.sectionBody .columns .column-content .post-it-style p.subtitle {
font-family: "Open Sans", sans-serif;
font-size: 1rem;
letter-spacing: .4em;
color: #ac6d20;
text-transform: uppercase
}
.sectionBody .columns .column-content .post-it-style p.question {
font-family: "Open Sans", sans-serif;
font-size: 1rem
}
.sectionBody .columns .column-content .post-it-style p:last-child {
margin-bottom: 0
}
.post-it-notes .post-it-style {
background: #fff;
padding: 19px 13px;
margin: 17px 7px 17px 7px;
-webkit-transform: rotate(1deg);
-o-transform: rotate(1deg);
-moz-transform: rotate(1deg);
-webkit-box-shadow: 0 5px 15px 3px rgba(0, 0, 0, .2);
-moz-box-shadow: 0 5px 15px 3px rgba(0, 0, 0, .2);
box-shadow: 0 5px 15px 3px rgba(0, 0, 0, .2)
}
.column,
.columns {
position: relative;
padding-left: .3125rem;
padding-right: .3125rem;
float: left
}
.medium-1 {
width: 8.33333%
}
.medium-2 {
width: 16.66667%
}
.medium-3 {
width: 25%
}
.medium-4 {
width: 33.33333%
}
.medium-5 {
width: 41.66667%
}
.medium-6 {
width: 50%
}
.medium-7 {
width: 58.33333%
}
.medium-8 {
width: 66.66667%
}
.medium-9 {
width: 75%
}
.medium-10 {
width: 83.33333%
}
.medium-11 {
width: 91.66667%
}
.medium-12 {
width: 100%
}
@media only screen and (min-width:40.063em) {
.post-it-notes .post-it-style {
margin: 17px
}
}
.post-it-notes .columns:nth-child(even) .post-it-style {
-o-transform: rotate(-1deg);
-webkit-transform: rotate(-1deg);
-moz-transform: rotate(-1deg);
position: relative
}
@media only screen and (min-width:53.063em) and (max-width:63.938em) {
.sectionBody .columns .post-it-style {
margin: 5px
}
.sectionBody .contact-data-wrapper .post-it-style .post-it-body {
align-items: start;
padding-top: 33px
}
.sectionBody .contact-data-wrapper .post-it-style .post-it-body .contactInfo.contactByEmail {
width: 67px
}
}
@media only screen and (min-width:53.063em) and (max-width:63.938em) {
.sectionBody .columns .post-it-style {
margin: 5px
}
.sectionBody .contact-data-wrapper .post-it-style .post-it-body {
align-items: start;
padding-top: 33px
}
.sectionBody .contact-data-wrapper .post-it-style .post-it-body .contactInfo.contactByEmail {
width: 67px
}
}
.text-left {
text-align: left !important
}
.text-right {
text-align: right !important
}
.text-center {
text-align: center !important
}
.text-justify {
text-align: justify !important
}
@media only screen and (max-width:30em) {
.small-only-text-left {
text-align: left !important
}
.small-only-text-right {
text-align: right !important
}
.small-only-text-center {
text-align: center !important
}
.small-only-text-justify {
text-align: justify !important
}
}
@media only screen {
.small-text-left {
text-align: left !important
}
.small-text-right {
text-align: right !important
}
.small-text-center {
text-align: center !important
}
.small-text-justify {
text-align: justify !important
}
}
@media only screen and (min-width:30.06em) and (max-width:40em) {
.medium-only-text-left {
text-align: left !important
}
.medium-only-text-right {
text-align: right !important
}
.medium-only-text-center {
text-align: center !important
}
.medium-only-text-justify {
text-align: justify !important
}
}
@media only screen and (min-width:30.06em) {
.medium-text-left {
text-align: left !important
}
.medium-text-right {
text-align: right !important
}
.medium-text-center {
text-align: center !important
}
.medium-text-justify {
text-align: justify !important
}
}
@media only screen and (min-width:40.063em) and (max-width:48em) {
.large-only-text-left {
text-align: left !important
}
.large-only-text-right {
text-align: right !important
}
.large-only-text-center {
text-align: center !important
}
.large-only-text-justify {
text-align: justify !important
}
}
@media only screen and (min-width:40.063em) {
.large-text-left {
text-align: left !important
}
.large-text-right {
text-align: right !important
}
.large-text-center {
text-align: center !important
}
.large-text-justify {
text-align: justify !important
}
}
@media only screen and (min-width:48.063em) and (max-width:53em) {
.xlarge-only-text-left {
text-align: left !important
}
.xlarge-only-text-right {
text-align: right !important
}
.xlarge-only-text-center {
text-align: center !important
}
.xlarge-only-text-justify {
text-align: justify !important
}
}
@media only screen and (min-width:48.063em) {
.xlarge-text-left {
text-align: left !important
}
.xlarge-text-right {
text-align: right !important
}
.xlarge-text-center {
text-align: center !important
}
.xlarge-text-justify {
text-align: justify !important
}
}
@media only screen and (min-width:53.063em) and (max-width:63.938em) {
.xxlarge-only-text-left {
text-align: left !important
}
.xxlarge-only-text-right {
text-align: right !important
}
.xxlarge-only-text-center {
text-align: center !important
}
.xxlarge-only-text-justify {
text-align: justify !important
}
}
@media only screen and (min-width:53.063em) {
.xxlarge-text-left {
text-align: left !important
}
.xxlarge-text-right {
text-align: right !important
}
.xxlarge-text-center {
text-align: center !important
}
.xxlarge-text-justify {
text-align: justify !important
}
}
.spoiler {
background-color: #a03704;
color: #fff;
padding: .15384615384615385em;
font-size: 1.125rem;
margin: 3em 0;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, .3);
opacity: .9
}
.spoiler-toggle,
.spoiler-toggle:active,
.spoiler-toggle:focus,
.spoiler-toggle:hover {
display: block;
margin: 0;
padding: 0 1.2em 0 .6em;
height: 2em;
font: normal normal 100%/2em Helmet, FreeSans, Sans-Serif;
color: inherit;
text-decoration: none;
outline: 0;
position: relative;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
cursor: pointer
}
.spoiler-toggle:before {
content: "";
display: block;
float: right;
width: 0;
height: 0;
border-width: .3076923076923077em .3076923076923077em 0;
border-style: solid;
border-color: #fff transparent transparent;
margin: .9230769230769231em -.6em 0 0
}
.spoiler-content {
padding: 1em;
background-color: #fff;
color: #2a2a2a
}
.spoiler-state-expanded .spoiler-toggle {
padding-bottom: inherit
}
.spoiler-state-expanded .spoiler-toggle:before {
border-width: 0 .3076923076923077em .3076923076923077em;
border-color: transparent transparent #fff;
margin-top: .8461538461538461em
}
.spoiler-state-expanded .spoiler-content+.spoiler-toggle {
padding-top: inherit;
padding-bottom: 0
}
.spoiler-state-disabled .spoiler-toggle {
cursor: default;
cursor: not-allowed
}
.spoiler-js .spoiler-state-collapsed .spoiler-content,
.spoiler-state-disabled .spoiler-toggle:before {
display: none
}
.spoiler-default {
font-weight: 700
}
.spoiler-primary {
background-color: #4682b4
}
.spoiler-success {
background-color: #3cb371
}
.spoiler-info {
background-color: #87ceeb
}
.spoiler-warning {
background-color: #f4a460
}
.spoiler-danger {
background-color: salmon
}
#my-custom-id .spoiler-toggle {
font-weight: 700;
font-style: italic
}
.h3-description {
color: #2a2a2a;
font-size: 1.5rem;
text-align: center;
margin-bottom: 25px;
margin-top: 15px
}
#popup {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, .7);
z-index: 9999;
display: none
}
#popup-inner {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #fff;
padding: 20px;
border-radius: 10px;
max-width: 90%;
text-align: center
}
#popup-inner p {
margin-bottom: 20px
}
#popup-inner button {
background-color: #007bff;
color: #fff;
border: none;
border-radius: 5px;
padding: 10px 20px;
font-size: 1rem;
cursor: pointer
}
#calendar {
display: flex;
flex-wrap: wrap;
margin-top: 20px
}
.day {
width: 30px;
height: 30px;
border: 1px solid #ccc;
margin: 2px;
display: flex;
justify-content: center;
align-items: center
}
.selected {
background-color: #007bff;
color: #fff
}
.overlay-adblocker,
.overlay-javascript {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, .5);
z-index: 9999
}
.message-adblocker,
.message-javascript {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #fff;
border: 0 solid #000;
padding: 20px;
text-align: center;
z-index: 10000;
box-shadow: 0 0 10px rgba(0, 0, 0, .3)
}
.message-adblocker h1,
.message-javascript h1 {
font-size: 1.5rem;
margin-bottom: 20px
}
.message-adblocker ol,
.message-javascript ol {
text-align: left;
margin-top: 20px;
margin-bottom: 0;
padding-left: 20px
}
.message-adblocker ol li,
.message-javascript ol li {
font-size: 1rem;
margin-bottom: 10px
}
.icons-adblocker {
display: flex;
justify-content: center;
margin-bottom: 20px
}
.icon-AdBlock,
.icon-AdGuard,
.icon-adblocker,
.icon-uBlock {
display: flex;
align-items: center;
margin: 0 10px
}
.icon-AdBlock img,
.icon-AdGuard img,
.icon-adblocker img,
.icon-uBlock img {
width: 32px;
height: 32px;
margin-right: 8px;
vertical-align: middle
}
.icon__text-adblocker {
font-size: 1rem;
font-weight: 700
}
@media only screen and (max-width:600px) {
.message-adblocker {
width: 80%;
padding: 10px
}
.icons-adblocker {
flex-direction: column
}
.icon-AdBlock,
.icon-AdGuard,
.icon-adblocker,
.icon-uBlock {
margin: 10px 0
}
.icon__text-adblocker {
text-align: center
}
}
.text-effect {
position: relative;
display: inline-block
}
.text-effect:after,
.text-effect:before {
content: "";
position: absolute;
width: 100%;
height: 2px;
background-color: #2a2a2a;
bottom: -4px;
left: 0;
transform: scaleX(0);
transform-origin: left center;
transition: transform .3s ease
}
.text-effect:before {
transform-origin: right center
}
.text-effect:hover:after,
.text-effect:hover:before {
transform: scaleX(1)
}
/* ===== Popup - Basis ===== */
:root{
--popup-bg:#fff;
--popup-ink:#55413c;
--popup-muted:#e7dedb;
--popup-shadow:0 18px 40px rgba(0,0,0,.18);
--brand:#8f2500;
}
.popup-container{
position:fixed;
z-index:10000; /* über Chat-Widgets & Cart-Badge */
bottom:20px;
left:20px;
width:min(340px, calc(100vw - 40px));
background:var(--popup-bg);
color:var(--popup-ink);
border:1px solid var(--popup-muted);
border-radius:14px;
padding:16px 16px 14px;
box-shadow:var(--popup-shadow);
display:none; /* per JS auf block setzen */
line-height:1.45;
}
.popup-content{ position:relative; }
/* sanftes Einblenden */
.popup-container.is-visible{
display:block;
animation:popup-in .22s ease-out;
}
@keyframes popup-in{
from{ transform:translateY(10px); opacity:0; }
to { transform:none; opacity:1; }
}
@media (prefers-reduced-motion:reduce){
.popup-container.is-visible{ animation:none; }
}
/* ===== Header & Text ===== */
.newprodukt{ /* = Titelzeile */
font-weight:800;
font-size:16px;
margin-right:36px; /* Platz für das X */
text-align:left;
}
.newprodukt-content{ /* = Content-Block */
margin-top:10px;
text-align:left;
color:var(--popup-ink);
}
.newprodukt-image{ margin-top:10px; }
/* Bilder innerhalb des Popups (falls genutzt) */
.popup-container img{ max-width:150px; height:auto; }
/* ===== CTA-Button ===== */
.popup-container .btn{
display:inline-flex;
align-items:center;
justify-content:center;
gap:8px;
border-radius:999px;
font-weight:700;
padding:10px 14px;
box-shadow:0 6px 18px rgba(143,37,0,.18);
}
.popup-container .btn.blue{ background:var(--brand); }
.popup-container .btn.blue:hover{ filter:brightness(1.05); }
/* ===== Close-Button (rechts oben) ===== */
.close-btn{
position:absolute;
top:8px;
right:8px;
width:32px;
height:32px;
display:inline-grid;
place-items:center;
cursor:pointer;
font-size:16px;
color:#777;
background:transparent;
border:0;
border-radius:8px;
}
.close-btn:hover{ background:rgba(0,0,0,.04); color:#555; }
/* ===== Option „Nicht mehr anzeigen“ ===== */
.popup-opt{
margin-top:10px;
display:flex;
align-items:center;
gap:8px;
font-size:12px;
color:#6b5a55;
}
.popup-opt input[type="checkbox"]{
width:16px; height:16px;
accent-color:var(--brand);
}
/* ===== Responsive ===== */
@media (max-width:600px){
.popup-container{
bottom:12px; left:12px; right:12px; width:auto;
border-radius:12px; padding:14px;
}
}
}
.tooltip-inner {
background-color: #333;
color: #fff;
padding: 10px;
border-radius: 10px;
font-size: 1rem;
box-shadow: 0 0 10px rgba(0, 0, 0, .5)
}
.tooltip.right .tooltip-arrow::before {
border-right-color: #333
}
.tooltip.right .tooltip-arrow::after {
border-right-color: #333
}
@media (max-width:768px) {
.tooltip-inner {
font-size: .875rem;
padding: 5px
}
}
/* ===============================
Modern Pagination (UL-Version)
=============================== */
.pagination {
display: flex;
justify-content: center;
align-items: center;
list-style: none;
padding: 0;
margin: 30px auto;
gap: 6px;
flex-wrap: wrap;
font-family: "Open Sans", sans-serif;
}
/* Standard-Button-Stil */
.pagination li a {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 36px;
height: 36px;
padding: 0 12px;
border-radius: 8px;
text-decoration: none;
font-weight: 600;
font-size: 0.9rem;
color: #2a2a2a;
background: #fff;
border: 1px solid #ddd;
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.08);
transition: all 0.25s ease;
}
/* Hover-Effekt */
.pagination li a:hover {
background: linear-gradient(135deg, #f9fafb 0%, #ececec 100%);
color: #111;
transform: translateY(-2px);
box-shadow: 0 5px 14px rgba(0, 0, 0, 0.12);
border-color: #ccc;
}
/* Aktive Seite */
.pagination li.active a {
background: linear-gradient(135deg, #1d4ed8 0%, #2563eb 100%);
color: #fff;
border-color: #1d4ed8;
box-shadow: 0 4px 14px rgba(37, 99, 235, 0.3);
transform: scale(1.03);
}
/* Hover-Effekt für aktive Seite */
.pagination li.active a:hover {
filter: brightness(1.08);
}
/* Deaktivierte Buttons (z. B. « oder » wenn nicht klickbar) */
.pagination li.disabled a {
background: #f1f1f1;
color: #aaa;
border: 1px solid #ddd;
pointer-events: none;
box-shadow: none;
}
/* Optional: kleine Pfeile schöner darstellen */
.pagination li a[aria-label="Previous"],
.pagination li a[aria-label="Next"] {
font-size: 1.1rem;
font-weight: bold;
}
/* Mobile Darstellung */
@media (max-width: 600px) {
.pagination {
gap: 4px;
}
.pagination li a {
min-width: 32px;
height: 32px;
padding: 0 10px;
font-size: 0.85rem;
border-radius: 6px;
}
}
.thema-container .lebal-home {
position: relative;
display: block;
margin-left: 0;
text-align: center;
z-index: 333 !important
}
.thema-container .lebal-red-home {
position: absolute;
top: 0;
left: 0;
width: 0;
height: 0;
border-right: 120px solid transparent;
border-top: 120px solid red;
text-align: center;
color: #fff;
z-index: 333 !important
}
.thema-container .lebal-red-home span {
position: absolute;
top: -100px;
left: -15px;
transform: rotate(-45deg);
font-size: 1rem;
width: 100px;
display: block;
text-align: center;
z-index: 334
}
.thema-container .lebal-blue-home {
position: absolute;
top: 0;
right: 0;
width: 0;
height: 0;
border-left: 100px solid transparent;
border-top: 100px solid #1ab04e;
text-align: center;
display: none;
color: #fff
}
.thema-container .lebal-blue-home span {
position: absolute;
top: -85px;
right: -20px;
transform: rotate(45deg);
font-size: 1.2rem;
width: 100px;
display: block;
text-align: center;
z-index: 334
}
.datum {
font-size: 0
}
.product-verfuegbarkeit,
.produkt-aktion {
position: block;
font-size: 1rem;
width: 100%;
display: block;
color: #fff !important;
padding: 0;
text-align: center;
background-color: red
}
.title-result {
font-weight: 700
}
:root{
--brand:#8f2500; /* Markenakzent für Fokus/Active */
--ink:#2a2a2a;
}
/* Grundstil */
.btn-open{
display:inline-flex;
align-items:center;
justify-content:center;
gap:8px;
width:100%;
padding:10px 16px;
border:1px solid rgba(0,0,0,.08);
border-radius:999px;
background:#fff;
color:var(--ink);
font-weight:700;
font-size:1rem;
text-decoration:none;
cursor:pointer;
box-shadow:0 4px 14px rgba(0,0,0,.08);
transition:transform .15s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease, border-color .2s ease;
}
.btn-open:hover{
transform:translateY(-1px);
box-shadow:0 8px 20px rgba(0,0,0,.12);
}
/* Tastatur-Fokus */
.btn-open:focus-visible{
outline:3px solid var(--brand);
outline-offset:2px;
}
/* Active/pressed */
.btn-open:active{
transform:translateY(0);
box-shadow:0 3px 10px rgba(0,0,0,.12) inset;
}
/* Deaktiviert (falls gebraucht) */
.btn-open[disabled],
.btn-open.is-disabled{
opacity:.6;
cursor:not-allowed;
transform:none;
box-shadow:none;
}
/* Dunkle/aktive Variante (z. B. wenn aufgeklappt) */
.btn-open-active,
.btn-open[aria-expanded="true"]{
background:linear-gradient(135deg, #2a2a2a 0%, #1f1f1f 100%);
color:#fff !important;
border-color:transparent;
box-shadow:0 6px 18px rgba(0,0,0,.22);
}
.btn-open-active:hover,
.btn-open[aria-expanded="true"]:hover{
filter:brightness(1.05);
transform:translateY(-1px);
}
/* Optional: kleines Pfeilchen rechts, wenn du ✦ kein HTML ändern willst */
.btn-open::after{
content:"▾";
font-size:.9rem;
line-height:1;
opacity:.65;
transition:transform .2s ease, opacity .2s ease;
margin-left:4px;
}
.btn-open-active::after,
.btn-open[aria-expanded="true"]::after{
transform:rotate(180deg);
opacity:.9;
}
/* Mobile Feinschliff */
@media (max-width:480px){
.btn-open{ padding:9px 14px; font-size:.95rem; }
}
.descriptionKurz {
display: none;
padding: 15px 15px 0 10px
}
.descriptionKurz.is-open {
display: block
}
.description-divider {
border-bottom: 1px solid #2a2a2a;
margin-top: 10px
}
.description {
margin-bottom: 20px
}
/* ===== Design-Variablen (wie beim Popup) ===== */
:root{
--brand:#8f2500;
--ink:#55413c;
--ink-weak:#6b5a55;
--bg:#ffffff;
--muted:#e7dedb;
--shadow:0 18px 40px rgba(0,0,0,.18);
}
/* ===== Banner-Basis ===== */
#cookie-banner{
position:fixed; inset:auto 12px 14px 12px;
z-index:10000; /* über Chat & Cart-Badge */
background:var(--bg);
color:var(--ink);
border:1px solid var(--muted);
border-radius:14px;
box-shadow:var(--shadow);
padding:14px;
display:none; /* per JS auf block setzen */
animation:cb-slide-up .22s ease-out;
}
@keyframes cb-slide-up{ from{transform:translateY(8px);opacity:0} to{transform:none;opacity:1} }
@media (prefers-reduced-motion:reduce){ #cookie-banner{ animation:none } }
/* Content max width zentriert */
#cookie-banner-content{ max-width:980px; margin:0 auto; }
/* Layout: Text links, Buttons rechts (stacken bei Mobile) */
#cookie-banner-content{
display:grid; gap:12px;
grid-template-columns: 1fr auto;
align-items:center;
}
#cookie-banner-desc{ margin:0; color:var(--ink); line-height:1.45; }
#cookie-banner a{ color:var(--brand); text-decoration:none; }
#cookie-banner a:hover{ text-decoration:underline; }
/* Actions-Gruppe */
.cb-actions{ display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-end; }
/* Buttons - an Popup-Style angelehnt (Pills) */
#cookie-banner button{
appearance:none; border:1px solid transparent; cursor:pointer;
border-radius:999px; font-weight:700; font-size:15px;
padding:10px 14px; line-height:1;
box-shadow:0 6px 18px rgba(143,37,0,.18);
transition:filter .15s ease;
}
#accept-all-cookies{ background:var(--brand); color:#fff; }
#cookie-settings{ background:#fff; color:var(--brand); border-color:var(--muted); }
#cookie-banner button:hover{ filter:brightness(1.05); }
/* ===== Einstellungs-Button (kleines Schild) ===== */
#cookie-settings-button{
position:fixed; left:14px; bottom:88px; z-index:9999;
}
#cookie-settings-button button{
width:56px; height:56px; border:0; cursor:pointer; outline:0;
background:url(/modules/verleih/images/shield_icon_cookie_consent_gray_blue.png) no-repeat center/contain;
border-radius:12px; box-shadow:0 10px 24px rgba(0,0,0,.16); background-color:#fff;
}
/* ===== Modal (gleiches „Karten“-Design) ===== */
#cookie-settings-modal{
display:none; position:fixed; z-index:10001; inset:50% auto auto 50%;
transform:translate(-50%,-50%);
width:min(640px, calc(100vw - 40px));
background:var(--bg); color:var(--ink);
border:1px solid var(--muted); border-radius:14px; box-shadow:var(--shadow);
padding:16px 16px 18px;
}
#cookie-settings-modal h4{ margin:0 32px 10px 0; font-size:18px; font-weight:800; }
#cookie-settings-desc{ color:var(--ink-weak); margin:0 0 8px; }
/* Modal Close (wie Popup) */
#cookie-settings-modal .close-btn{
position:absolute; top:10px; right:10px; width:32px; height:32px;
display:inline-grid; place-items:center; border:0; border-radius:8px;
background:transparent; color:#777; cursor:pointer; font-size:16px;
}
#cookie-settings-modal .close-btn:hover{ background:rgba(0,0,0,.05); color:#555; }
/* Optionen-Box */
#cookie-settings-options{
background:#faf8f7; border:1px solid var(--muted); border-radius:12px;
padding:10px; max-height:300px; overflow:auto; margin:10px 0 14px;
}
#cookie-settings-options label{ display:block; margin:6px 0; font-size:14px; color:var(--ink); }
#cookie-settings-options input[type="checkbox"]{ margin-right:8px; accent-color:var(--brand); }
/* Modal-Buttons in einer Actions-Leiste */
#cookie-settings-modal .cb-actions{ justify-content:flex-end; }
#cookie-settings-modal button{
border-radius:999px; font-weight:700; padding:10px 14px; font-size:15px;
box-shadow:0 6px 18px rgba(143,37,0,.12);
border:1px solid transparent;
}
#cookie-settings-modal button:hover{ filter:brightness(1.05); }
#cookie-settings-modal button[onclick="declineCookies()"]{ background:#b02a37; color:#fff; }
#cookie-settings-modal button[onclick="saveCookies()"]{ background:var(--brand); color:#fff; }
#cookie-settings-modal #select-all-cookies,
#cookie-settings-modal #deselect-all-cookies{
background:#fff; color:var(--brand); border-color:var(--muted);
}
/* ===== Dunkler Hintergrund fürs Modal (Overlay) ===== */
#cookie-backdrop{
display:none; position:fixed; inset:0; z-index:10000; background:rgba(0,0,0,.35);
backdrop-filter:saturate(120%) blur(1px);
}
/* ===== Responsive ===== */
@media (max-width:900px){
#cookie-banner-content{ grid-template-columns:1fr; }
.cb-actions{ justify-content:stretch; }
#cookie-settings-button{ bottom:15px; left:20px; }
}
#cookie-banner {
top: 0;
bottom: auto;
border-top: none;
margin-top:20px;
border-bottom: 1px solid var(--muted);
}
/* =========================
Design-Variablen
========================= */
:root{
--brand:#8f2500;
--ink:#55413c;
--bg:#fff;
--muted:#e7dedb;
--shadow:0 -10px 30px rgba(0,0,0,.14);
}
/* =========================
Modul-Basis
========================= */
#mod_schrift_und_kontrast.modul{
position:fixed;
bottom:0; left:0; width:100%;
z-index:10000;
background:var(--bg);
color:var(--ink);
border-top:1px solid var(--muted);
box-shadow:var(--shadow);
padding:16px 20px;
display:flex;
flex-wrap:wrap;
gap:10px 16px;
align-items:center;
justify-content:center;
box-sizing:border-box;
transition:opacity .25s ease, transform .25s ease;
}
#mod_schrift_und_kontrast.modul.hidden{
opacity:0;
transform:translateY(8px);
pointer-events:none;
}
/* =========================
Close-Button (nur Modul)
========================= */
#mod_schrift_und_kontrast .close-btn{
position:absolute;
top:8px; right:8px;
width:30px; height:30px;
display:inline-grid; place-items:center;
background:transparent;
color:#7a6a64;
border:2px solid #7a6a64;
border-radius:50%;
font-size:18px; line-height:1;
cursor:pointer;
transition:transform .15s ease, background-color .15s ease, color .15s ease;
}
#mod_schrift_und_kontrast .close-btn:hover{
background-color:rgba(122,106,100,.15);
transform:scale(1.06);
}
#mod_schrift_und_kontrast .close-btn:focus-visible{
outline:3px solid #7a6a64;
background-color:rgba(122,106,100,.22);
}
/* =========================
Beschriftung + Font-Controls
========================= */
#mod_schrift_und_kontrast .mod_schriftgroesse_text{
font-weight:600;
margin-right:4px;
padding-top:10px;
}
#mod_schrift_und_kontrast #fontSizeControls{
display:inline-flex;
align-items:center;
gap:8px;
padding-top:10px;
}
#mod_schrift_und_kontrast a.bigger,
#mod_schrift_und_kontrast a.normal,
#mod_schrift_und_kontrast a.smaller{
text-decoration:none;
padding:8px 12px;
min-width:40px;
text-align:center;
border:1px solid var(--muted);
border-radius:8px;
background:#f7f7f7;
color:#333;
font-size:15px;
font-weight:700;
transition:background-color .15s ease, color .15s ease, transform .05s ease;
}
#mod_schrift_und_kontrast a.bigger:hover,
#mod_schrift_und_kontrast a.normal:hover,
#mod_schrift_und_kontrast a.smaller:hover{
background:#ececec; color:#000;
}
#mod_schrift_und_kontrast a.bigger:active,
#mod_schrift_und_kontrast a.normal:active,
#mod_schrift_und_kontrast a.smaller:active{
transform:translateY(1px);
}
#mod_schrift_und_kontrast a.bigger:focus-visible,
#mod_schrift_und_kontrast a.normal:focus-visible,
#mod_schrift_und_kontrast a.smaller:focus-visible{
outline:3px solid var(--brand);
outline-offset:2px;
}
/* =========================
Kontrastwechsel (UI im Modul)
========================= */
#mod_schrift_und_kontrast #kontrast_wechsel{
margin-top:10px;
text-align:center;
font-weight:600;
display:flex;
align-items:center;
flex-wrap:wrap;
gap:8px;
justify-content:center;
}
/* Grundstil für Kontrast-Buttons */
#mod_schrift_und_kontrast #kontrast_wechsel a{
display:inline-block;
padding:8px 15px;
border:1px solid #ccc;
border-radius:6px;
font-size:1rem;
font-weight:700;
text-decoration:none;
transition:background-color .15s ease, color .15s ease, border-color .15s ease, transform .05s ease;
}
/* Farbmuster für Auswahl-Buttons */
#mod_schrift_und_kontrast #kontrast_wechsel a#contrast1{ background:#000; color:#fff; border-color:#fff; }
#mod_schrift_und_kontrast #kontrast_wechsel a#contrast1:hover{ background:#fff; color:#000; }
#mod_schrift_und_kontrast #kontrast_wechsel a#contrast2{ background:#fff; color:#000; border-color:#000; }
#mod_schrift_und_kontrast #kontrast_wechsel a#contrast2:hover{ background:#000; color:#fff; }
#mod_schrift_und_kontrast #kontrast_wechsel a#contrast3{ background:#8b0000; color:#fff; border-color:#fff; }
#mod_schrift_und_kontrast #kontrast_wechsel a#contrast3:hover{ background:#fff; color:#8b0000; }
#mod_schrift_und_kontrast #kontrast_wechsel a#contrast4{ background:#ff0; color:#000; border-color:#000; }
#mod_schrift_und_kontrast #kontrast_wechsel a#contrast4:hover{ background:#000; color:#ff0; }
#mod_schrift_und_kontrast #kontrast_wechsel a#contrast5{ background:#000; color:green; border-color:green; }
#mod_schrift_und_kontrast #kontrast_wechsel a#contrast5:hover{ background:green; color:#000; }
#mod_schrift_und_kontrast #kontrast_wechsel a#contrast_weg{ background:#fcc; color:#000; border-color:red; }
#mod_schrift_und_kontrast #kontrast_wechsel a#contrast_weg:hover{ background:red; color:#fff; }
/* Fokus */
#mod_schrift_und_kontrast #kontrast_wechsel a:focus-visible{
outline:3px solid var(--brand);
outline-offset:2px;
}
/* =========================
Responsive
========================= */
@media (max-width:768px){
#mod_schrift_und_kontrast.modul{
flex-direction:column;
padding:12px 10px;
gap:8px 12px;
}
#mod_schrift_und_kontrast a.bigger,
#mod_schrift_und_kontrast a.normal,
#mod_schrift_und_kontrast a.smaller{
padding:6px 10px; font-size:14px; min-width:36px;
}
}
/* =========================
Kontrast-Modi (entschärft)
→ KEINE globalen *-Selektoren mehr!
→ nur typische Text/UI-Elemente umfärben,
damit Layout/Icons nicht brechen.
========================= */
/* Schwarz auf Weiß */
body.contrast2,
body.contrast2 p,
body.contrast2 li,
body.contrast2 h1, body.contrast2 h2, body.contrast2 h3, body.contrast2 h4, body.contrast2 h5, body.contrast2 h6,
body.contrast2 a,
body.contrast2 button,
body.contrast2 input, body.contrast2 select, body.contrast2 textarea{
background-color:#fff;
color:#000;
border-color:#000;
}
body.contrast2 a:hover{ background-color:#000; color:#fff; }
/* Weiß auf Schwarz */
body.contrast1,
body.contrast1 p,
body.contrast1 li,
body.contrast1 h1, body.contrast1 h2, body.contrast1 h3, body.contrast1 h4, body.contrast1 h5, body.contrast1 h6,
body.contrast1 a,
body.contrast1 button,
body.contrast1 input, body.contrast1 select, body.contrast1 textarea{
background-color:#000;
color:#fff;
border-color:#fff;
}
body.contrast1 a:hover{ background-color:#fff; color:#000; }
/* Weinrot auf Weiß */
body.contrast3,
body.contrast3 p,
body.contrast3 li,
body.contrast3 h1, body.contrast3 h2, body.contrast3 h3, body.contrast3 h4, body.contrast3 h5, body.contrast3 h6,
body.contrast3 a,
body.contrast3 button,
body.contrast3 input, body.contrast3 select, body.contrast3 textarea{
background-color:#8b0000;
color:#fff;
border-color:#fff;
}
body.contrast3 a:hover{ background-color:#fff; color:#8b0000; }
/* Gelb auf Schwarz */
body.contrast4,
body.contrast4 p,
body.contrast4 li,
body.contrast4 h1, body.contrast4 h2, body.contrast4 h3, body.contrast4 h4, body.contrast4 h5, body.contrast4 h6,
body.contrast4 a,
body.contrast4 button,
body.contrast4 input, body.contrast4 select, body.contrast4 textarea{
background-color:#000;
color:#ff0;
border-color:#000;
}
body.contrast4 a:hover{ background-color:#ff0; color:#000; }
/* Schwarz auf Grün */
body.contrast5,
body.contrast5 p,
body.contrast5 li,
body.contrast5 h1, body.contrast5 h2, body.contrast5 h3, body.contrast5 h4, body.contrast5 h5, body.contrast5 h6,
body.contrast5 a,
body.contrast5 button,
body.contrast5 input, body.contrast5 select, body.contrast5 textarea{
background-color:#000;
color:green;
border-color:green;
}
body.contrast5 a:hover{ background-color:green; color:#000; }
.scroll-container {
position: relative;
display: flex;
align-items: center;
max-width: 100%
}
.horizontal-scroll-container {
display: flex;
align-items: center;
overflow-x: auto;
padding: 20px 0;
white-space: nowrap;
scrollbar-width: thin
}
/* === Slider-Buttons modern & im Stil deiner Seite === */
.scroll-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 10;
width: 44px;
height: 44px;
border: none;
border-radius: 50%;
cursor: pointer;
font-size: 22px;
font-weight: 700;
color: #fff;
background: linear-gradient(135deg, var(--brand, #8f2500) 0%, #632000 100%);
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
display: flex;
align-items: center;
justify-content: center;
transition: all 0.25s ease;
}
/* Hover-Effekt: heller & leicht vergrößert */
.scroll-arrow:hover {
filter: brightness(1.15);
transform: translateY(-50%) scale(1.08);
box-shadow: 0 6px 16px rgba(143, 37, 0, 0.4);
}
/* Fokus für Barrierefreiheit */
.scroll-arrow:focus-visible {
outline: 3px solid var(--brand, #8f2500);
outline-offset: 3px;
}
/* linke/rechte Position */
.scroll-arrow.left {
left: 12px;
}
.scroll-arrow.right {
right: 12px;
}
/* kleinere Variante auf Mobilgeräten */
@media (max-width: 768px) {
.scroll-arrow {
width: 38px;
height: 38px;
font-size: 18px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}
}
.nblok {
min-width: 250px;
margin-right: 20px;
flex: 0 0 auto;
scroll-snap-align: start;
border: 1px solid #ccc;
border-radius: 5px;
padding: 10px;
font-size: 1rem;
background-color: #f9f9f9;
transition: transform .2s ease
}
.nblok:hover {
transform: scale(1);
box-shadow: 0 4px 10px rgba(0, 0, 0, .2)
}
.nblok h3,
.nblok h3 a {
color: #000
}
.clear-button {
background: none;
color: #fff:border:none;
font-size: 1.5rem;
cursor: pointer
}
::-webkit-scrollbar {
width: 12px;
height: 12px
}
::-webkit-scrollbar-track {
background: #f1f1f1
}
::-webkit-scrollbar-thumb {
background-color: #888;
border-radius: 10px
}
::-webkit-scrollbar-thumb:hover {
background-color: #555
}
scrollbar {
width: 12px;
height: 12px
}
scrollbar-track {
background: #f1f1f1
}
scrollbar-thumb {
background-color: #888;
border-radius: 10px
}
scrollbar-thumb:hover {
background-color: #555
}
.scrollable-container {
max-height: 250px;
overflow-x: hidden;
overflow-y: auto;
margin-top: 10px;
font-size: 1rem
}
.suggestions {
position: absolute;
background-color: #fff;
border: 1px solid #ccc;
width: 100%;
max-height: 200px;
overflow-y: auto;
z-index: 999;
display: none
}
.suggestion-item {
padding: 8px;
cursor: pointer
}
.suggestion-item:hover {
background-color: #f0f0f0
}
.dropdown {
margin-top: 15px;
position: relative
}
.dropdown strong {
display: inline-block;
font-size: 18px;
margin-bottom: 5px;
color: #333
}
.dropdown-menu {
display: none;
list-style-type: none;
margin: 0;
padding: 0;
background-color: #f9f9f9;
border-radius: 5px;
box-shadow: 0 4px 6px rgba(0, 0, 0, .1);
position: absolute;
left: 0;
top: 100%;
width: 200px;
transition: all 0.3s ease;
opacity: 0;
visibility: hidden
}
.dropdown-item {
display: block;
padding: 12px 20px;
font-size: 16px;
color: #333;
text-decoration: none;
transition: background-color 0.3s ease
}
.dropdown-item:hover {
background-color: #0056b3;
color: #fff !important
}
.dropdown:hover .dropdown-menu {
display: block;
opacity: 1;
visibility: visible
}
.tipp {
font-size: 16px;
line-height: 1.5;
padding: 15px;
background-color: #f0f8ff;
border-left: 5px solid #007bff;
border-radius: 8px;
margin: 15px 0
}
.tipp p {
margin-bottom: 10px
}
.vc_message_box {
display: flex;
align-items: center;
flex-wrap: wrap;
background-color: #e7f3ff;
border-radius: 8px;
padding: 15px;
gap: 10px
}
.vc_message_box-icon {
font-size: 24px;
color: #007bff
}
@media (max-width:768px) {
.vc_message_box {
flex-direction: column;
text-align: center
}
.vc_message_box-icon {
font-size: 28px
}
.tipp {
font-size: 14px;
padding: 10px
}
}
/* Standard: Desktop zeigt FULL, Handy MOBIL ausblenden */
.full { display: block; }
.mobil { display: none; }
/* Mobile-Ansicht */
@media (max-width: 600px) {
.full { display: none; }
.mobil { display: block; }
.aktion-mobil {
margin-bottom: 12px;
}
.aktion-kurz {
font-size: 0.9rem;
line-height: 1.4;
display: flex;
align-items: center;
gap: 4px;
}
.info-btn {
margin-left: 6px;
cursor: pointer;
font-size: 1.1rem;
user-select: none;
}
.aktion-details {
display: none;
font-size: 0.85rem;
line-height: 1.4;
margin-top: 5px;
}
.aktion-details.show {
display: block;
animation: fadeIn 0.25s ease-out;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
}
/* Gemeinsamer Tooltip-Stil für title="" und aria-label="" */
/* Elemente mit Tooltip */
[data-title] {
position: relative;
cursor: help;
}
/* Bubble */
[data-title]::after {
content: attr(data-title);
position: absolute;
bottom: 125%;
left: 50%;
transform: translateX(-50%);
background: #111;
color: #fff;
font-size: .78rem;
padding: .45rem .65rem;
border-radius: 6px;
white-space: nowrap;
box-shadow: 0 4px 12px rgba(0, 0, 0, .35);
opacity: 0;
pointer-events: none;
transition: opacity .2s ease, transform .2s ease;
z-index: 50;
}
/* kleiner Pfeil */
[data-title]::before {
content: "";
position: absolute;
bottom: 118%;
left: 50%;
transform: translateX(-50%);
border: 6px solid transparent;
border-top-color: #111;
opacity: 0;
transition: opacity .2s ease;
}
/* anzeigen bei Hover/Focus (auch Tastatur-Nutzer) */
[data-title]:hover::after,
[data-title]:focus::after,
[data-title]:hover::before,
[data-title]:focus::before {
opacity: 1;
}
[data-title]:hover::after,
[data-title]:focus::after {
transform: translateX(-50%) translateY(-4px);
}
/* --- Rabattcode UI (BI-Verleih Stil) --- */
.coupon-row .divCell {
padding-top: 2px;
}
.coupon-wrap {
display: inline-flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.coupon-input {
width: 180px;
height: 34px;
padding: 0 10px;
border: 1px solid #d9d9d9;
border-radius: 6px;
font-size: 14px;
outline: none;
background: #fff;
transition: border-color .12s ease, box-shadow .12s ease;
}
.coupon-input:focus {
border-color: #bfbfbf;
box-shadow: 0 0 0 2px rgba(0, 0, 0, .05);
}
.coupon-btn {
height: 34px;
padding: 0 12px;
border: 1px solid #d9d9d9;
border-radius: 6px;
background: #f6f6f6;
font-size: 14px;
font-weight: 600;
color: #333;
cursor: pointer;
transition: box-shadow .12s ease, transform .02s ease;
}
.coupon-btn:hover {
box-shadow: inset 0 0 0 9999px rgba(0, 0, 0, .03);
}
.coupon-btn:active {
transform: translateY(1px);
}
/* Meldungen */
.coupon-msg {
font-size: 12px;
margin-top: 4px;
color: #6b7280;
}
.coupon-msg.ok {
color: #2e7d32;
}
.coupon-msg.err {
color: #c62828;
}
/* “akzeptiert“-Badge */
.coupon-status-ok {
color: #2e7d32;
font-weight: 600;
}
/* Kleine responsive Anpassung */
@media (max-width: 520px) {
.coupon-input {
width: 140px;
}
}
#coupon_row_value, #coupon_row_code{
visibility: visible;
opacity: 1;
}
/* ===== Grundlayout für die Liefer-Section ===== */
.wrapper_radio_my_catalog2 {
background: #f7f7f7;
border: 1px dashed #e1e1e1;
border-radius: 10px;
padding: 16px;
}
/* Jede Liefer-Option als „Card“ mit sauberen Abständen */
.wrapper_radio_my_catalog2 .delivery_number {
display: block;
/* statt Grid */
background: #fff;
border: 1px solid #e8e8e8;
border-radius: 10px;
padding: 14px 16px;
margin: 0;
box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
}
/* Radio etwas größer & sauber ausgerichtet */
.delivery_number .radio_my_catalog2 {
margin-right: 6px;
vertical-align: middle;
}
/* Titel + Preis */
#radio_km,
#radio_km2,
.delivery_number>label {
grid-column: 2;
font-weight: 600;
color: #1f2328;
line-height: 1.25;
}
/* Kleiner, grauer Nebentext (Preis/Einheit in Klammern) */
.delivery_number .delivery_in {
grid-column: 2;
color: #6b7280;
font-size: .92em;
margin-left: 6px;
}
/* Infozeile, Select & Button schön untereinander */
.cart_distance {
grid-column: 2;
display: block;
margin-top: 8px;
color: #1f2328;
}
.cart_distance select {
width: 100%;
margin-top: 8px;
padding: 10px 12px;
border: 1px solid #dadada;
border-radius: 8px;
background: #fff;
color: #1f2328;
}
.geo-btn {
display: inline-block;
margin-top: 8px;
padding: 9px 12px;
border: 1px solid #dadada;
border-radius: 8px;
background: #f3f4f6;
color: #1f2328;
cursor: pointer;
}
.geo-btn:hover {
background: #fff;
}
/* Status-/Hilfetext unter dem Button */
.geo-msg {
grid-column: 2;
margin-top: 6px;
font-size: .9em;
color: #6b7280;
word-break: break-word;
}
/* Vorschlag/Übernehmen-Buttons untereinander sauber mit Abstand */
.geo-actions {
grid-column: 2;
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 8px 0 2px;
}
.geo-actions .btn-adopt,
.geo-actions .btn-reject {
padding: 7px 10px;
border: 1px solid #dadada;
border-radius: 8px;
background: #f3f4f6;
cursor: pointer;
}
.geo-actions .btn-adopt:hover,
.geo-actions .btn-reject:hover {
background: #fff;
}
/* Beschreibungstext unter der Option */
.delivery_comment {
grid-column: 2;
margin-top: 6px !important;
color: #6b7280 !important;
font-size: .92em !important;
line-height: 1.35;
}
/* Hinweisband oben */
.delivery-disclaimer {
background: #fff8e1;
color: #7a5a00;
border: 1px solid #ffe7a3;
border-radius: 8px;
padding: 10px 12px;
margin: 12px 0 16px;
font-size: .95em;
}
/* ===== Bestätigungs-Checkbox - linksbündig, eigene Box ===== */
#delivery_confirm_wrap {
margin: 16px 2px 4px;
padding: 12px;
background: #fff;
border: 1px solid #e8e8e8;
border-radius: 8px;
max-width: 980px;
/* verhindert, dass sie nach rechts „wandert“ */
}
#delivery_confirm_wrap label {
display: flex;
gap: 10px;
align-items: flex-start;
color: #1f2328;
line-height: 1.35;
}
#delivery_confirm_wrap input[type="checkbox"] {
margin-top: 2px;
}
#delivery_confirm_msg {
display: block;
margin-top: 6px;
color: #6b7280;
font-size: .9em;
}
/* Allgemeine Kleinigkeiten */
.divRow1 .divCell1 {
font-weight: 600;
}
.floating-button {
border-radius: 10px;
}
/* Mobile Feinschliff */
@media (max-width: 700px) {
.wrapper_radio_my_catalog2 {
padding: 12px;
}
.wrapper_radio_my_catalog2 .delivery_number {
padding: 12px;
}
.cart_distance select {
font-size: 16px;
}
/* iOS Zoom vermeiden */
#delivery_confirm_wrap {
margin-left: 0;
margin-right: 0;
}
}
/* --- Eltern "normalisieren" --- */
.product-cart-contacts,
.wrapper_radio_my_catalog2 {
text-align: left !important;
}
/* Falls ein Parent Flex-Center nutzt -> Box soll sich strecken */
.product-cart-contacts,
.product-cart-contacts * {
/* verhindert zentrierte Ausrichtung durch übergeordnete Flexboxen */
align-items: stretch;
}
/* --- Bestätigungs-Box korrekt ausrichten --- */
#delivery_confirm_wrap {
/* Breite & Position */
width: 100%;
max-width: none;
margin: 16px 0 8px !important;
/* Optik */
background: #fff;
border: 1px solid #e6e6e6;
border-radius: 10px;
box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
box-sizing: border-box;
/* gegen Flex-Center vom Parent */
align-self: stretch !important;
}
/* Label als 2-spaltiges Layout: Checkbox links, Text rechts */
#delivery_confirm_wrap label {
display: grid;
grid-template-columns: 22px 1fr;
gap: 10px;
align-items: start;
margin: 0;
padding: 12px;
color: #1f2328;
line-height: 1.4;
}
/* Checkbox sauber oben links */
#delivery_confirm_wrap input[type="checkbox"] {
width: 18px;
height: 18px;
margin: 2px 0 0 0;
}
/* Hinweistext unter dem Label */
#delivery_confirm_msg {
display: block;
margin: 0 12px 12px 12px;
color: #6b7280;
font-size: .9em;
}
/* Mobile: genug Platz, kein Zentrieren */
@media (max-width: 700px) {
#delivery_confirm_wrap {
margin: 14px 0 6px !important;
}
#delivery_confirm_wrap label {
padding: 10px;
}
}
.distance-hint {
display: block;
margin-top: 6px;
color: #6b7280;
font-size: .9em;
}
/* Abschnittstitel wie "Bestellübersicht" */
.cart-section-title {
font-size: 20px;
font-weight: 600;
color: #2c2c2c;
margin: 35px 0 12px;
display: block;
position: relative;
padding-bottom: 6px;
}
/* Dezente Linie statt grün */
.cart-section-title::after {
content: "";
display: block;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 2px;
background: #909090;
/* elegantes hellgrau */
border-radius: 3px;
opacity: 0.8;
}
/* Optional leichte Animation beim Fokus/Scroll */
.cart-section-title.reveal {
animation: sectionFade 0.35s ease-in-out;
}
@keyframes sectionFade {
from {
opacity: 0;
transform: translateY(4px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.geo-status {
color: #6b7280;
font-size: .9em;
}
input[type="time"] {
pointer-events: auto;
}
/* Überschriften in td > b für Checkout/Bestellformular */
td>b {
display: block;
font-size: 1.15em;
font-weight: 700;
color: #333;
margin-bottom: 6px;
padding-bottom: 4px;
border-bottom: 2px solid #e0e0e0;
}
/* Allgemeiner Rahmen */
.category-description {
max-width: 1200px; /* gleiche Breite wie dein Content-Bereich */
margin: 36px auto 40px; /* mittig + oben/unten Abstand */
padding: 0 20px 20px; /* innen etwas Luft */
box-sizing: border-box;
clear: both; /* falls oben irgendwas floated */
}
/* Typografie feinjustieren (optional) */
.category-description h2,
.category-description h3 {
margin: 20px 0 10px;
font-weight: 600;
}
.category-description p {
margin: 0 0 10px;
line-height: 1.6;
}
.category-description ul {
margin: 12px 0 18px;
padding-left: 20px;
}
.category-description li {
margin: 0 0 8px;
line-height: 1.6;
}
.category-description strong:first-child {
color: #10233f;
}
.category-faq {
margin-top: 42px;
padding: 20px 22px;
border: 1px solid #dbe4f1;
border-radius: 22px;
background: linear-gradient(180deg,#f8fbff 0%,#ffffff 100%);
box-shadow: 0 12px 30px rgba(17,42,78,.06);
}
.category-faq details {
margin: 0 0 12px;
border: 1px solid #d8e3f1;
border-radius: 16px;
background: #fff;
overflow: hidden;
}
.category-faq details:last-child {
margin-bottom: 0;
}
.category-faq summary {
position: relative;
display: block;
cursor: pointer;
padding: 16px 52px 16px 18px;
font-weight: 700;
color: #10233f;
list-style: none;
}
.category-faq summary::-webkit-details-marker {
display: none;
}
.category-faq summary::after {
content: "+";
position: absolute;
top: 50%;
right: 18px;
transform: translateY(-50%);
width: 28px;
height: 28px;
border-radius: 999px;
background: #edf5ff;
color: #0d4f9a;
font-size: 20px;
line-height: 28px;
text-align: center;
font-weight: 700;
}
.category-faq details[open] summary::after {
content: "−";
}
.category-faq details[open] summary {
border-bottom: 1px solid #e6edf7;
background: #fbfdff;
}
.category-faq details p {
margin: 0;
padding: 16px 18px 18px;
color: #4d5b70;
line-height: 1.7;
}
/* Linien im Text (wie in deinem Screenshot) */
.category-description hr {
margin: 25px 0;
border: 0;
border-top: 1px solid #cfcfcf;
}
#btn_geo_km,#btn_geo_km2 {
font-size: 1.15em;
background: #2596be;
/* verhindert, dass sie nach rechts „wandert“ */
}
#snowCanvas { position: fixed; top: 0; left: 0; pointer-events: none; width: 100%; height: 100%; z-index: 9999;}
/* Container */
.produkt-optionen-container {
font-family: "Inter", "Segoe UI", Arial, sans-serif;
font-size: 16px;
line-height: 1.65;
color: #1b1b1b;
padding: 0;
}
/* Box Style */
.produkt-optionen-container section {
margin-bottom: 28px;
padding: 20px 22px;
background: #ffffff;
border: 1px solid #e6e6e6;
border-radius: 10px;
box-shadow: 0 2px 10px rgba(0,0,0,0.04);
}
/* Überschriften */
.produkt-optionen-container h4 {
font-size: 20px;
font-weight: 600;
margin-bottom: 12px;
color: #0d6efd; /* Modernes Blau */
}
/* Text */
.produkt-optionen-container p {
margin: 0 0 10px;
}
/* Listen */
.produkt-optionen-container ul {
margin: 8px 0 10px 20px;
padding: 0;
}
.produkt-optionen-container li {
margin-bottom: 6px;
}
/* Tabelle */
.produkt-optionen-container table {
width: 100%;
border-collapse: collapse;
margin-top: 10px;
font-size: 15px;
}
.produkt-optionen-container table th,
.produkt-optionen-container table td {
border: 1px solid #ddd;
padding: 10px;
text-align: left;
}
.produkt-optionen-container table th {
background: #f8f9fa;
font-weight: 600;
}
/* Produkt-Überschriften ohne automatisch eingefügtes Symbol. */
.produkt-optionen-container h4::before{content:none !important;display:none !important}
/* ====== Variablen & Basics ====== */
:root{
--c-border:#e6e9ef;
--c-soft:#f6f8fb;
--c-panel:#fff;
--c-primary:#0b6bbf;
--c-primary-600:#0b4a9c;
--c-muted:#64748b;
--shadow:0 6px 18px rgba(0,0,0,.06);
--radius:12px;
}
/* ====== Hinweisboxen ====== */
.price-notice.notice{
background:#fff8df!important; border:1px solid #ffe6a3!important; color:#7a5c00!important;
padding:12px 14px!important; border-radius:10px!important; margin:12px 0 18px!important
}
.bottom-hint{border-radius:10px}
/* ====== Zwei-Spalten-Layout bleibt bestehen ====== */
.product-2col{display:grid;gap:20px}
@media(min-width:992px){.product-2col{grid-template-columns:1fr 520px;align-items:start}}
/* ====== Galerie (fixe, responsive Höhe) ====== */
.gallery-wrapper{--gallery-h:clamp(300px,52vw,520px); position:relative;background:var(--c-panel);
border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
.gallery-slider{display:flex;height:var(--gallery-h);transition:transform .4s ease}
.gallery-slide{min-width:100%;height:var(--gallery-h)}
.gallery-slide img{width:100%;height:100%;object-fit:cover;display:block}
.gallery-nav button{
position:absolute;top:50%;transform:translateY(-50%);background:#00000070;color:#fff;border:0;
width:38px;height:38px;border-radius:50%;cursor:pointer;backdrop-filter:blur(6px);font-size:18px
}
.gallery-nav button:hover{background:#000000c7}
.g-prev{left:12px}.g-next{right:12px}
.gallery-thumbs{display:flex;gap:8px;margin:10px 10px;padding:6px 0;overflow:auto}
.gallery-thumb-item{flex:0 0 70px;height:70px;border-radius:8px;overflow:hidden;cursor:pointer;
opacity:.6;border:2px solid transparent;transition:.2s;background:#fff}
.gallery-thumb-item img{width:100%;height:100%;object-fit:cover;display:block}
.gallery-thumb-item.active,.gallery-thumb-item:hover{opacity:1;border-color:#0066ff}
/* ====== Sidebar / Kostenkarte ====== */
.costs-card{background:var(--c-panel);border:1px solid var(--c-border);border-radius:var(--radius);
padding:16px;box-shadow:var(--shadow)}
@media(min-width:992px){
.costs-card{position:sticky;top:90px;max-height:calc(100vh - 120px);overflow:auto}
}
.costs-card p{margin:10px 0 14px}
.costs-card strong{font-weight:700}
/* Preis-Grid */
.price-grid {
display: grid;
gap: 18px;
margin-bottom: 18px;
}
@media (min-width: 540px) {
.price-grid {
grid-template-columns: 1fr 1fr;
}
}
@media (max-width: 539px) {
.price-grid {
gap: 14px;
}
}
aside > * + * {
margin-top: 20px;
}
/* ================================
Preisbox - Stil passend zur Rabattbox
================================ */
.price-box {
background: #fefefe;
border: 1px solid #e2e6ef;
border-radius: 12px;
padding: 14px 16px;
color: #0f2b4a;
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.03);
line-height: 1.5;
min-width:200px;
}
/* Abstand zu benachbarten Elementen */
.price-box + .rent-table,
.price-box + .preise-block {
margin-top: 14px;
}
/* Überschriften */
.price-box strong {
color: #0f2b4a;
font-size: 15px;
font-weight: 600;
}
/* Zahlenwerte */
.price-box span {
font-size: 24px;
font-weight: 700;
color: #0073e6; /* kräftiges Blau für Preis */
}
/* Textzeilen */
.price-box p {
margin: 0 0 10px 0;
padding: 0;
}
/* Kleine Einheit (€/24 Std.) etwas dezenter */
.price-box p::after {
content: "";
display: block;
height: 1px;
background: #f2f4f9;
margin-top: 6px;
}
/* letzte Zeile ohne Trennlinie */
.price-box p:last-child::after {
display: none;
}
/* Responsive (Mobile optimiert) */
@media (max-width: 640px) {
.price-box {
padding: 12px;
border-radius: 10px;
}
.price-box span {
font-size: 20px;
}
.price-box strong {
font-size: 14px;
}
}
#price-with-vat,#base-price{font-size:1.25em;font-weight:700;color:var(--c-primary)}
/* ====== Mietkorb-UI / Menge ====== */
.qty-ui{display:flex;align-items:center;gap:10px;margin:10px 0 14px}
.plus_item_qty,.minus_item_qty{
width:34px;height:34px;border-radius:8px;display:flex;align-items:center;justify-content:center;
background:#f1f5f9;border:1px solid #dbe2ea;cursor:pointer;user-select:none
}
.item_qty{
min-width:56px;text-align:center;border:1px solid #dbe2ea;border-radius:8px;
padding:6px 8px;background:#fff;display:inline-block
}
.floating-button{
display:inline-flex;align-items:center;gap:8px;background:var(--c-primary);color:#fff;border:0;
border-radius:10px;padding:10px 14px;box-shadow:var(--shadow);cursor:pointer;text-decoration:none
}
.floating-button:hover{filter:brightness(.95)}
/* Zubehörliste kompakt */
.addons-title{display:block;margin:10px 0 6px}
.addons-list{margin:6px 0 12px 18px}
.addons-list li{margin:3px 0}
/* ====== Related (gleiche Kategorie) - horizontaler Scroller ====== */
.related-title{margin:18px 0 8px}
.related-scroller{
display:grid;grid-auto-flow:column;grid-auto-columns:minmax(240px,1fr);gap:12px;
overflow-x:auto;scroll-snap-type:x mandatory;padding:6px 2px 10px
}
.related-scroller .nblok{
scroll-snap-align:start;background:#fff;border:1px solid var(--c-border);border-radius:10px;
box-shadow:var(--shadow);padding:10px 12px;min-height:82px;display:flex;align-items:center
}
.related-scroller .nblok h3{font-size:1rem;line-height:1.35;margin:0}
.related-scroller .nblok a{text-decoration:none;color:#111}
.related-scroller .nblok a:hover{color:var(--c-primary)}
/* ====== Tabs / Container ====== */
.produkt-optionen-bar{display:flex;flex-wrap:wrap;gap:8px;margin:26px 0 10px}
.produkt-optionen-black{background:#111827;padding:8px;border-radius:10px}
.produkt-optionen-button{
background:#1f2937;color:#fff;border:1px solid #374151;border-radius:8px;padding:8px 12px;
font-size:.95rem;cursor:pointer
}
.produkt-optionen-button:hover{background:#0f172a}
.produkt-optionen-gray{background:#374151 !important}
.produkt-optionen-container{
background:#fff;border:1px solid var(--c-border);border-radius:10px;padding:16px;box-shadow:var(--shadow);margin-top:10px
}
.produkt-optionen-container p{line-height:1.6}
.produkt-optionen-container ul{margin:8px 0 12px 16px}
.produkt-optionen-container li{margin:4px 0}
/* ===== Allgemeine Tabelle ===== */
/* Basis / Desktop */
.table-responsive{
width:100%;
overflow-x:auto;
-webkit-overflow-scrolling:touch;
border:1px solid var(--c-border,#e2e8f0);
border-radius:10px;
background:#fff;
box-shadow:0 1px 3px rgba(0,0,0,.06);
margin:8px 0 16px;
}
.table-responsive table{
width:100%;
border-collapse:collapse;
min-width:560px; /* damit Spalten auf Tablet nicht zu schmal werden */
}
.table-responsive thead th{
background:#f8fafc;
color:#0f172a;
font-weight:700;
text-align:left;
border-bottom:1px solid var(--c-border,#e2e8f0);
padding:10px 12px;
white-space:nowrap;
}
.table-responsive th,
.table-responsive td{
padding:10px 12px;
border-bottom:1px solid var(--c-border,#e2e8f0);
vertical-align:top;
text-align:left;
word-break:break-word;
}
.table-responsive tbody tr:nth-child(odd){ background:#fcfdff; }
/* Tablet: Kopfzeile fixieren beim Scroll (optional) */
@media (max-width: 1024px){
.table-responsive thead th{
position:sticky; top:0; z-index:1;
box-shadow:0 1px 3px rgba(0,0,0,.06);
}
}
/* Smartphone: Kartenlayout */
@media (max-width: 640px){
.table-responsive{ border-radius:8px; }
.table-responsive table,
.table-responsive thead,
.table-responsive tbody,
.table-responsive th,
.table-responsive td,
.table-responsive tr{ display:block; }
.table-responsive thead{ display:none; }
.table-responsive tbody tr{
background:#fff;
margin:0 0 12px;
border:1px solid var(--c-border,#e2e8f0);
border-radius:8px;
overflow:hidden;
box-shadow:0 1px 3px rgba(0,0,0,.04);
}
.table-responsive td{
display:flex;
gap:10px;
padding:10px 12px;
border-bottom:1px solid #f1f5f9;
}
.table-responsive td:last-child{ border-bottom:none; }
/* Labels links (aus Spaltenüberschriften, ohne HTML-Änderung) */
.table-responsive td::before{
content:"";
flex:0 0 46%;
font-weight:600;
color:#475569;
white-space:nowrap;
}
.table-responsive td:nth-child(1)::before{ content:"Nutzung"; }
.table-responsive td:nth-child(2)::before{ content:"Ort"; }
.table-responsive td:nth-child(3)::before{ content:"Pr\00FCfbuch"; }
.table-responsive td:nth-child(4)::before{ content:"Richtmeister"; }
}
/* Typografie im Content */
#Produktbeschreibung h2,#Produktbeschreibung h3,
#Bedingungen h2,#Bedingungen h3{margin:14px 0 6px}
#Produktbeschreibung ul,#Bedingungen ul{list-style:disc;margin-left:20px}
#Produktbeschreibung li,#Bedingungen li{margin:4px 0}
/* Keyword-/Suche-Chips */
.search-term{
display:inline-block;margin:2px 6px 6px 0;padding:6px 10px;border-radius:20px;
background:#eef2ff;border:1px solid #c7d2fe;color:#1e3a8a;text-decoration:none;font-size:.92rem
}
.search-term:hover{background:#e0e7ff;color:#0b4a9c}
/* „Mietkorb ansehen“ Link neben Button angleichen */
a .floating-button, a.floating-button{color:#fff}
a .floating-button:hover, a.floating-button:hover{filter:brightness(.95)}
/* ===== Menge-UI: + / - klar sichtbar ===== */
.item_qty_block{
display:flex;
align-items:center;
gap:10px;
margin:5px 0 5px;
}
.plus_item_qty,
.minus_item_qty{
width:38px;
height:38px;
border-radius:10px;
border:1px solid #cfd8e3;
background:#fff; /* hell, damit das Zeichen kontrastreich ist */
color:#0f172a; /* dunkles Zeichen */
font-weight:700;
font-size:18px;
line-height:1;
display:flex;
align-items:center;
justify-content:center;
box-shadow:0 1px 2px rgba(0,0,0,.05);
cursor:pointer;
transition:background .15s ease, color .15s ease, border-color .15s ease, transform .05s ease;
}
.plus_item_qty:hover,
.minus_item_qty:hover{
background:#0b6bbf; /* Hover: blau */
color:#fff;
border-color:#0b6bbf;
}
.plus_item_qty:active,
.minus_item_qty:active{ transform:scale(.96); }
/***** Menge-Block: saubere Controls *****/
.item_qty_block{
display:inline-flex;
align-items:center;
gap:10px;
flex-wrap:wrap;
margin:10px 0 6px;
}
.item_qty_block strong{ order:-1; margin-right:6px; } /* Label vor die Buttons */
/* Plus/Minus (sofern eigene Klassen) */
.plus_item_qty,
.minus_item_qty{
width:38px; height:38px;
display:inline-flex; align-items:center; justify-content:center;
border:1px solid #cfd8e3; border-radius:10px; background:#fff;
font-weight:700; cursor:pointer; user-select:none;
}
.item_qty{
min-width:62px; height:38px; line-height:36px;
border:1px solid #cfd8e3; border-radius:10px;
background:#fff; color:#0f172a; font-weight:700;
text-align:center; padding:0 8px;
}
/***** Buttons: Grundlook (aus deinem Style übernommen) *****/
.floating-button{
-webkit-appearance:none; appearance:none;
display:inline-flex; align-items:center; justify-content:center;
gap:8px; padding:12px 18px; min-height:44px;
border-radius:10px; border:1px solid transparent;
font-weight:700; line-height:1; text-decoration:none; box-sizing:border-box;
box-shadow:0 6px 18px rgba(0,0,0,.12);
transition:transform .12s ease, box-shadow .12s ease, background .2s ease, color .2s ease, border-color .2s ease;
vertical-align:middle; max-width:100%;
letter-spacing:normal; word-spacing:normal; text-transform:none;
}
.floating-button i,.floating-button .fa{ line-height:1; transform:translateY(1px); }
/* Primär */
#add-to-cart-btn.floating-button{ background:#ef4444; border-color:#ef4444; color:#fff; }
#add-to-cart-btn.floating-button:hover{ background:#dc2626; border-color:#dc2626; }
#add-to-cart-btn.floating-button:active{ transform:translateY(1px); }
/* Sekundär */
a[href$="/mietkorb"] > .floating-button,
a[href*="/mietkorb?"] > .floating-button{
background:#fff; color:#ef4444; border-color:#ef4444;
box-shadow:0 6px 18px rgba(239,68,68,.15);
}
a[href$="/mietkorb"] > .floating-button:hover,
a[href*="/mietkorb?"] > .floating-button:hover{
background:#fff5f5; color:#dc2626; border-color:#dc2626;
}
/***** Desktop (≥1025px): Menge links, Buttons rechts daneben *****/
@media (min-width: 1025px){
/* Buttons in einer Reihe, leichter Abstand */
#add-to-cart-btn.floating-button + a > .floating-button{ margin-left:12px; }
}
/***** Tablet (768-1024px): Buttons UNTER Menge, vollbreit *****/
@media (min-width: 768px) and (max-width: 1024px){
/* Menge blockt eigene Zeile */
.item_qty_block{ width:100%; }
/* Buttons darunter, jeweils 100% Breite */
.item_qty_block ~ #add-to-cart-btn.floating-button,
.item_qty_block ~ a[href$="/mietkorb"] > .floating-button,
.item_qty_block ~ a[href*="/mietkorb?"] > .floating-button{
display:flex; width:100%;
margin:10px 0 0 !important;
}
.item_qty_block ~ #add-to-cart-btn.floating-button{ margin-top:12px !important; }
.btn-desc-small{margin-top:5px;}
}
/***** Mobile (≤767px): ebenfalls untereinander & vollbreit *****/
@media (max-width: 767px){
.item_qty_block{ width:100%; }
.item_qty_block ~ #add-to-cart-btn.floating-button,
.item_qty_block ~ a[href$="/mietkorb"] > .floating-button,
.item_qty_block ~ a[href*="/mietkorb?"] > .floating-button{
display:flex; width:100%;
margin:8px 0 0 !important;
}
.item_qty_block ~ #add-to-cart-btn.floating-button{ margin-top:10px !important; }
}
/***** „Produktbeschreibung anzeigen“ anpassen *****/
.btn-desc-small{
display:inline-flex; align-items:center; justify-content:center; gap:8px;
padding:10px 14px; min-height:40px;
border:1px solid #1a73e8; color:#1a73e8; background:#fff;
border-radius:8px; text-decoration:none;
transition:background .2s ease, color .2s ease, border-color .2s ease, transform .12s ease;
}
.btn-desc-small:hover{ background:#eef5ff; border-color:#0b5bd3; color:#0b5bd3; }
@media (max-width:1024px){ .btn-desc-small{ width:100%; } }
/***** Fokusring (A11y) *****/
.floating-button:focus-visible, .btn-desc-small:focus-visible{
outline:none;
box-shadow:0 0 0 3px rgba(26,115,232,.25), 0 0 0 1px rgba(26,115,232,.8) inset;
}
@media (max-width:768px)
/* Desktop: Beschreibungs-Button nicht zwingend vollbreit */
.btn-desc-small{
width:auto;
min-width:260px;
margin-top:8px !important;
}
a[href$="/mietkorb"] + .desc-btn-under-cart,
a[href*="/mietkorb?"] + .desc-btn-under-cart{
margin-top:10px !important;
}
/* --- Container der Produktbeschreibung separat halten --- */
.desc-btn-under-cart{
display:block; /* eigene Zeile */
width:100%;
clear:both; /* nebenstehende Floats/Flex verhindern */
margin-top:8px !important; /* zusätzlicher Abstand */
}
}
/* Scrollbars (nur WebKit/Chromium) */
.related-scroller::-webkit-scrollbar,
.gallery-thumbs::-webkit-scrollbar{height:8px}
.related-scroller::-webkit-scrollbar-thumb,
.gallery-thumbs::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:10px}
.related-scroller::-webkit-scrollbar-track,
.gallery-thumbs::-webkit-scrollbar-track{background:#f1f5f9;border-radius:10px}
/* Kleinere Screens: Abstand & Karten-Look vereinheitlichen */
@media(max-width: 991.98px){
.costs-card{position:static;max-height:none;overflow:visible}
.produkt-optionen-bar{margin-top:18px}
.table-responsive th,.table-responsive td{padding:8px 10px}
}
/* Druckfreundlich (Preise/Content sichtbar, Navigation unaufdringlich) */
@media print{
.produkt-optionen-bar,.gallery-wrapper,.gallery-thumbs,.gallery-nav,
.related-title,.related-scroller,.floating-button,.bottom-hint,.price-notice{display:none!important}
.costs-card,.produkt-optionen-container{box-shadow:none;border:1px solid #ccc}
}
/* === Vereinheitlichte Farb-/Typo-Basis für beide Spalten === */
:root{
--seo-card-bg:#f5f9ff;
--seo-card-bd:#dde7f2;
--seo-card-bg-hover:#eef6ff;
--seo-text:#0b376a;
}
/* Überschriften bleiben fix, Inhalt scrollt (hast du schon) */
/* --- Alte Icons links komplett unterdrücken --- */
.two-col-seo-box .nblok,
.two-col-seo-box .nblok h3,
.two-col-seo-box .nblok h3 a{
background-image:none !important;
}
.two-col-seo-box .nblok::before,
.two-col-seo-box .nblok h3::before,
.two-col-seo-box .nblok h3 a::before{
content:none !important;
}
/* --- Einheitliche Karten-Optik für beide Listen --- */
.two-col-seo-box .nblok,
.two-col-seo-box .seo-col ul a{
background:var(--seo-card-bg);
border:1px solid var(--seo-card-bd);
border-radius:10px;
margin:0 0 12px 0;
position:relative;
box-shadow:0 1px 0 rgba(12,24,38,.02);
}
/* Text, Padding, Linkstil identisch */
.two-col-seo-box .nblok h3{ margin:0; }
.two-col-seo-box .nblok h3 a,
.two-col-seo-box .seo-col ul a{
display:block;
padding:12px 42px 12px 14px; /* links/rechts gleich */
color:var(--seo-text);
text-decoration:none;
font-weight:600;
line-height:1.35;
}
/* Gleicher Pfeil (›) rechts für beide */
.two-col-seo-box .nblok::after,
.two-col-seo-box .seo-col ul a::after{
content:"\203A"; /* › */
position:absolute;
right:14px; top:50%;
transform:translateY(-50%);
font-size:18px;
font-weight:700;
color:var(--seo-text);
}
/* Hover identisch */
.two-col-seo-box .nblok:hover,
.two-col-seo-box .seo-col ul a:hover{
background:var(--seo-card-bg-hover);
border-color:#c9dcff;
}
/* Rechte Liste bereinigen (keine Bullets/Abstände vom UL/P) */
.two-col-seo-box .seo-col ul{ list-style:none; padding:0; margin:0; }
.two-col-seo-box .seo-col ul p{ margin:0; }
/* Linke Liste: ggf. Extra-Linkeinzug durch altes Icon neutralisieren */
.two-col-seo-box .nblok h3 a{ padding-left:14px !important; }
/* --- 2-Spalten Rahmen --- */
.two-col-seo-box{
display:flex;
gap:20px;
margin:20px 0;
}
.two-col-seo-box .seo-col{
flex:1;
background:#fff;
border:1px solid #e6ebf1;
border-radius:12px;
padding:14px;
}
/* --- Überschriften (bleiben fix, scrollt NICHT mit) --- */
.two-col-seo-box .seo-col h3,
.two-col-seo-box .seo-col strong{
font-size:16px;
font-weight:700;
margin:0 0 10px 0;
color:#0b376a;
}
.seo-col strong{
margin:bottom:10px;
}
/* ----------------- LINKE SPALTE ----------------- */
/* nur der Inhalt scrollt */
.two-col-seo-box .scrollable-container{
max-height:300px;
overflow:auto;
padding-right:8px; /* Platz für Scrollbar */
}
/* ----------------- RECHTE SPALTE ----------------- */
/* nur die Liste scrollt, Überschrift bleibt fix */
.two-col-seo-box .seo-col strong + br + ul{
max-height:300px;
overflow:auto;
padding-right:8px;
margin:0;
}
/* Liste neutralisieren & wie links stylen */
.two-col-seo-box .seo-col ul{
list-style:none;
padding:0;
}
.two-col-seo-box .seo-col ul p{ /* die im UL neutralisieren */
margin:0;
}
.two-col-seo-box .seo-col ul a{
display:block;
background:#f8fafc;
border:1px solid #dbe3ea;
border-radius:8px;
padding:10px 40px 10px 12px;
margin:0 0 10px 0;
color:#0b376a;
text-decoration:none;
position:relative;
}
.two-col-seo-box .seo-col ul a:hover{
background:#eef6ff;
border-color:#c8dcff;
}
/* Pfeil nach rechts */
.two-col-seo-box .seo-col ul a::after{
content:"›";
position:absolute;
right:12px; top:50%;
transform:translateY(-50%);
font-weight:700; font-size:18px;
color:#0b376a;
}
/* optionale, dezente Scrollbar (webkit) */
.two-col-seo-box .scrollable-container::-webkit-scrollbar,
.two-col-seo-box .seo-col strong + br + ul::-webkit-scrollbar{
width:8px;
}
.two-col-seo-box .scrollable-container::-webkit-scrollbar-track,
.two-col-seo-box .seo-col strong + br + ul::-webkit-scrollbar-track{
background:#f1f4f8; border-radius:10px;
}
.two-col-seo-box .scrollable-container::-webkit-scrollbar-thumb,
.two-col-seo-box .seo-col strong + br + ul::-webkit-scrollbar-thumb{
background:#c9d7e6; border-radius:10px;
}
/* --- Mini Slider Grundlayout --- */
.mini-slider{ position:relative}
.mini-slider__title{ margin:0 0 10px; font-size:1.0rem; font-weight:700; color:#0b376a; }
.ms-viewport{
overflow-x:auto; /* horizontal scrollen */
-webkit-overflow-scrolling:touch;
scroll-behavior:smooth;
padding-bottom:6px; /* Platz für evtl. Scrollbar */
}
.ms-track{
display:flex;
gap:12px;
scroll-snap-type:x mandatory; /* snappt pro Karte */
}
/* Karten (bestehende .nblok weiterverwenden) */
.mini-slider .nblok{
flex:0 0 clamp(230px, 28vw, 300px); /* responsive Kartenbreite */
background:#f5f9ff;
scroll-snap-align:start;
box-shadow:0 2px 10px rgba(12,24,38,.06);
}
.mini-slider .nblok h3{ margin:0 0 8px; font-size:15px; line-height:1.35; }
.mini-slider .nblok h3 a{ text-decoration:none; color:#0b376a; font-weight:700; }
.mini-slider .nblok h3 a:hover{ text-decoration:underline; }
.mini-slider .nblok img{
display:block; width:100%; height:140px; object-fit:cover;
border-radius:8px; margin:6px 0 10px;
}
.mini-slider .nblok .nblok-meta{ font-size:.92rem; color:#294f86; margin:4px 0 8px; }
.mini-slider .nblok .details-btn{
display:inline-flex; align-items:center; gap:6px;
font-size:.9rem; text-decoration:none; color:#0b6bbf;
}
.mini-slider .nblok .details-btn:hover{ text-decoration:underline; }
/* Pfeil-Buttons */
.ms-btn{
position:absolute; top:calc(50% + 8px); transform:translateY(-50%);
width:34px; height:34px; border-radius:50%; border:none; cursor:pointer;
background:rgba(0,0,0,.45); color:#fff; font-size:20px; line-height:34px;
display:flex; align-items:center; justify-content:center;
backdrop-filter:blur(6px);
}
.ms-prev{ left:6px; }
.ms-next{ right:6px; }
.ms-btn:hover{ background:rgba(0,0,0,.65); }
/* Scrollbar dezent (optional) */
.ms-viewport::-webkit-scrollbar{ height:8px; }
.ms-viewport::-webkit-scrollbar-thumb{ background:#cfd8e3; border-radius:8px; }
.ms-viewport::-webkit-scrollbar-track{ background:transparent; }
/* === Mini-Slider - Container optisch an deine Karten angleichen === */
.mini-slider__title{
margin:0 0 1px; font-weight:700; color:#0b376a; font-size:12px;
}
/* Viewport/Track - etwas mehr Luft und gleichmäßiger Flow */
.ms-viewport{ overflow:auto; -webkit-overflow-scrolling:touch; scroll-behavior:smooth; }
.ms-track{
display:grid; grid-auto-flow:column; grid-auto-columns:clamp(240px, 26vw, 300px);
gap:12px; padding:2px 0 8px;
scroll-snap-type:x mandatory;
}
/* Karte - gleicher Look wie Produkt-Listen */
.mini-slider .nblok{
scroll-snap-align:start;
background:#f8fbff; border:1px solid #dde7f2; border-radius:12px;
box-shadow:0 2px 10px rgba(12,24,38,.06);
display:flex; flex-direction:column; padding:10px; transition:transform .12s ease;
min-height:270px; /* konstante Höhe für gleichmäßige Reihe */
}
.mini-slider .nblok:hover{ transform:translateY(-2px); }
.mini-slider .nblok h3{ margin:0 0 8px; font-size:15px; line-height:1.35; }
.mini-slider .nblok h3 a{ color:#0b376a; text-decoration:none; font-weight:700; }
.mini-slider .nblok h3 a:hover{ color:#0b6bbf; text-decoration:underline; }
.mini-slider .nblok img {
display: block;
width: 100%;
aspect-ratio: 4 / 3;
object-fit: cover;
border-radius: 8px;
margin: 6px 0 10px;
}
/* Preiszeile & „mehr Details“ als dezenter Ghost-Button */
.mini-slider .nblok .nblok-meta{
margin-top:auto; /* nach unten drücken */
display:flex; align-items:center; gap:8px; font-size:.92rem; color:#294f86;
}
.mini-slider .nblok .item_price_nalog{
font-weight:700; color:#0b6bbf;
}
.mini-slider .nblok .price-chip{
display:inline-block; padding:4px 8px; border-radius:999px;
background:#eef6ff; border:1px solid #cfe2ff; font-size:.85rem; color:#0b4a9c;
}
.mini-slider .nblok .details-btn{
margin-top:6px; align-self:flex-start;
border:1px solid #d6e2f2; background:#fff; color:#0b6bbf; border-radius:8px;
padding:6px 10px; text-decoration:none; font-size:.9rem;
}
.mini-slider .nblok .details-btn:hover{ background:#f3f8ff; border-color:#c9dcff; }
/* Pfeile - optisch ruhiger und außerhalb vom Content */
.ms-btn{
position:absolute; top:50%; transform:translateY(-50%);
width:36px; height:36px; border-radius:50%; border:none; cursor:pointer;
display:flex; align-items:center; justify-content:center;
background:rgba(11,107,191,.85); color:#fff; box-shadow:0 4px 14px rgba(11,107,191,.25);
}
.ms-btn:hover{ filter:brightness(.95); }
.ms-prev{ left:8px; } .ms-next{ right:8px; }
/* nur zeigen, wenn wirklich scrollbar vorhanden ist (Klasse kommt per JS, s.u.) */
.mini-slider:not(.is-scrollable) .ms-btn{ display:none; }
/* dezente horizontale Scrollbar */
.ms-viewport::-webkit-scrollbar{ height:8px; }
.ms-viewport::-webkit-scrollbar-thumb{ background:#cfd8e3; border-radius:8px; }
.ms-viewport::-webkit-scrollbar-track{ background:transparent; }
/* sehr schmale Screens - Karten minimal schmaler */
@media (max-width:480px){
.ms-track{ grid-auto-columns:85%; }
}
/* --- 2-Spalten-Layout robust machen --- */
.two-col-seo-box{
display:grid;
gap:20px;
margin:20px 0;
}
@media (min-width: 768px){
.two-col-seo-box{ grid-template-columns: 1fr 1fr; }
}
/* Spalten dürfen schrumpfen (wichtig!) */
.two-col-seo-box .seo-col{
min-width:0;
background:#fff; border:1px solid #e6ebf1; border-radius:12px; padding:14px;
}
/* Slider zwingend im Rahmen bleiben */
.mini-slider{ max-width:100%; }
.ms-viewport{ width:100%; overflow-x:auto; }
.ms-track{ max-width:none; }
/* Überschrift in rechter Spalte fix halten, Inhalt scrollt */
.two-col-seo-box .seo-col > strong{
position:sticky; top:0; z-index:1;
background:#fff; padding-bottom:6px; display:block;
font-size:16px; font-weight:700; color:#0b376a;
}
/* Scrollbereich rechts (unabhängig von
) */
.two-col-seo-box .seo-col ul{
max-height:300px; overflow:auto; margin:0; padding:0; list-style:none;
padding-right:8px; /* Platz für Scrollbar */
}
/* Link-Karten rechts - gleicher Look wie links */
.two-col-seo-box .seo-col ul a{
display:block; background:var(--seo-card-bg,#f5f9ff);
border:1px solid var(--seo-card-bd,#dde7f2);
border-radius:10px; margin:0 0 12px; padding:12px 42px 12px 14px;
color:var(--seo-text,#0b376a); text-decoration:none; position:relative;
}
.two-col-seo-box .seo-col ul a:hover{
background:var(--seo-card-bg-hover,#eef6ff); border-color:#c9dcff;
}
.two-col-seo-box .seo-col ul a::after{
content:"\203A"; position:absolute; right:14px; top:50%;
transform:translateY(-50%); font-size:18px; font-weight:700; color:var(--seo-text,#0b376a);
}
/* ul enthält bei dir
- neutralisieren */
.two-col-seo-box .seo-col ul p{ margin:0; }
/* Dezente Scrollbars */
.two-col-seo-box .seo-col ul::-webkit-scrollbar,
.two-col-seo-box .scrollable-container::-webkit-scrollbar{ width:8px; height:8px; }
.two-col-seo-box .seo-col ul::-webkit-scrollbar-thumb,
.two-col-seo-box .scrollable-container::-webkit-scrollbar-thumb{ background:#c9d7e6; border-radius:10px; }
.two-col-seo-box .seo-col ul::-webkit-scrollbar-track,
.two-col-seo-box .scrollable-container::-webkit-scrollbar-track{ background:#f1f4f8; border-radius:10px; }
.scroll-btn {
display: inline-block;
background: #dc3545; /* rot wie Warenkorb */
color: #fff;
padding: 10px 18px;
border-radius: 6px;
font-weight: 600;
text-decoration: none;
margin: 10px 0 20px;
}
.scroll-btn:hover {
background: #bb2d3b;
}
.scroll-link {
font-weight: 600;
color: #0d6efd;
text-decoration: underline;
}
.scroll-link:hover {
color: #084298;
}
/* ====== Karte / Container ====== */
/* Trigger-Button */
.rc-open-btn{
width:100%; padding:8px 12px; border:1px solid #dfe7f3; border-radius:10px;
background:#fff; cursor:pointer; font:600 13px/1.2 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
color:#0b5db6; box-shadow:0 1px 0 rgba(10,31,68,.04);
}
.rc-open-btn:hover{background:#f7fbff}
/* Modal Grundgerüst */
.rent-modal[hidden]{display:none}
.rent-modal{
position:fixed; inset:0; z-index:9999;
}
.rent-backdrop{
position:absolute; inset:0; background:rgba(0,0,0,.45);
opacity:0; transition:opacity .18s ease;
}
.rent-dialog{
position:relative; margin:4vh auto; max-width:860px; width:92%;
background:#fff; border-radius:14px; box-shadow:0 20px 60px rgba(0,0,0,.25);
display:flex; flex-direction:column; max-height:92vh; transform:translateY(12px); opacity:0;
transition:transform .2s ease, opacity .2s ease;
outline:none;
}
.rent-modal[data-open="true"] .rent-backdrop{opacity:1}
.rent-modal[data-open="true"] .rent-dialog{transform:translateY(0); opacity:1}
/* Kopf / Inhalt / Fuß */
.rent-header{display:flex; align-items:center; justify-content:space-between; gap:8px;
padding:14px 16px; border-bottom:1px solid #eef3fb}
.rent-header h3{margin:0; font:700 16px/1.25 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; color:#0b5db6}
.rent-close{border:0; background:transparent; font-size:18px; line-height:1; cursor:pointer; padding:6px; border-radius:8px}
.rent-close:hover{background:#f3f7ff}
.rent-content{padding:14px 16px; overflow:auto}
.rent-footer{padding:12px 16px; border-top:1px solid #eef3fb; display:flex; justify-content:flex-end}
.rc-close-btn{padding:8px 12px; border:1px solid #dfe7f3; border-radius:10px; background:#fff; cursor:pointer}
.rc-close-btn:hover{background:#f7fbff}
/* Karten-/Tabellenstil (dein bestehender Look) */
.rent-card{
background:#fff; border:1px solid #dfe7f3; border-radius:12px;
box-shadow:0 1px 0 rgba(10,31,68,.04); padding:16px 18px;
font:14px/1.45 system-ui,-apple-system, Segoe UI, Roboto, Arial, sans-serif;
color:#1f2937;
}
.rc-section{margin:6px 0 12px}
.rc-title{margin:0 0 6px; font-weight:700; font-size:15px; color:#0b5db6}
.text-list,.rc-list{list-style:none; margin:0; padding:0}
.text-list li,.rc-list li{display:flex; justify-content:space-between; gap:8px; padding:6px 0; border-top:1px solid #eef3fb}
.text-list li:first-child,.rc-list li:first-child{border-top:0}
.d,.rc-label{font-weight:600; color:#0f172a}
.r,.rc-badge{color:#334155}
.price-hint,.rc-hint{margin:6px 0 0; font-size:12.5px; color:#64748b}
/* Tabelle in der Karte */
.rc-table-wrap{overflow:auto; border-radius:10px}
.price-table,.rc-table{width:100%; border-collapse:separate; border-spacing:0; background:#f8fbff; border:1px solid #e6eef9; border-radius:10px; overflow:hidden}
.price-table thead th,.rc-table thead th{background:#f1f6ff; color:#334155; font-weight:600; padding:10px 12px; border-bottom:1px solid #e6eef9}
.price-table tbody td,.rc-table tbody td{padding:10px 12px; border-top:1px solid #eef3fb; vertical-align:top}
.price-table tbody tr:first-child td,.rc-table tbody tr:first-child td{border-top:0}
.price-table--combo tbody td:nth-child(1), .rc-table--combo tbody td:nth-child(1){width:12ch; font-weight:600}
.price-table--combo tbody td:nth-child(2), .rc-table--combo tbody td:nth-child(2){width:10ch}
.price-table--combo tbody td:nth-child(4),
.price-table--combo tbody td:nth-child(5),
.rc-table--combo tbody td:nth-child(4),
.rc-table--combo tbody td:nth-child(5){text-align:right; white-space:nowrap}
@media (max-width:640px){
.rent-dialog{width:96%; margin:3vh auto; max-height:94vh}
}
/* Abschnitt */
.rc-section{ padding: 12px 0; }
.rc-section + .rc-section{ border-top: 1px dashed #eef3fb; }
/* Titel */
.rc-title{
margin: 0 0 8px;
font-size: 15px;
font-weight: 700;
color: var(--rc-accent);
}
/* Hinweis */
.rc-hint{
margin: 8px 0 0;
font-size: 12.5px;
color: var(--rc-muted);
}
/* ====== kompakte Listen (Tages-/Mengenrabatt) ====== */
.rc-list{
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 6px;
}
.rc-list li{
display: flex;
align-items: center;
justify-content: space-between;
padding: 8px 10px;
background: #f8fbff;
border: 1px solid var(--rc-bc);
border-radius: 10px;
}
.rc-label{ font-weight: 600; color: #0f172a; }
.rc-badge{
display: inline-block;
padding: 2px 8px;
border: 1px solid var(--rc-badge-bc);
background: var(--rc-badge-bg);
border-radius: 999px;
font-weight: 600;
white-space: nowrap;
}
/* ====== Tabelle: Kombi ====== */
.rc-table-wrap{ overflow-x: auto; -webkit-overflow-scrolling: touch; }
.rc-table{
width: 100%;
border-collapse: separate;
border-spacing: 0;
background: #f8fbff;
border: 1px solid var(--rc-bc);
border-radius: 10px;
overflow: hidden;
}
.rc-table thead th{
background: #f1f6ff;
color: #334155;
font-weight: 600;
padding: 10px 12px;
text-align: left;
border-bottom: 1px solid var(--rc-bc);
}
.rc-table tbody td{
padding: 10px 12px;
border-top: 1px solid #eef3fb;
vertical-align: top;
}
.rc-table tbody tr:nth-child(odd) td{
background: #fbfdff;
}
/* Spaltenausrichtung */
.rc-table--combo tbody td:nth-child(1){ width: 10ch; font-weight: 600; }
.rc-table--combo tbody td:nth-child(2){ width: 9ch; }
.rc-table--combo tbody td:nth-child(4),
.rc-table--combo tbody td:nth-child(5){ text-align: right; white-space: nowrap; }
/* Kleinere Bildschirme */
@media (max-width: 640px){
.rent-card{ padding: 12px; }
.rc-table thead th, .rc-table tbody td{ padding: 8px 10px; }
}
/* Container & Button */
.discount-box{max-width:100%; width:100%} /* füllt die Sidebar */
.rc-toggle{
width:100%; display:flex; align-items:center; justify-content:space-between;
gap:10px; padding:8px 12px; border:1px solid #dfe7f3; border-radius:10px;
background:#fff; cursor:pointer; font:600 13px/1.2 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
color:#0b5db6; box-shadow:0 1px 0 rgba(10,31,68,.04);
}
.rc-toggle:hover{background:#f7fbff}
.rc-chevron{width:18px;height:18px;transition:transform .25s ease}
/* Karte */
.rent-card{
background:#fff; border:1px solid #dfe7f3; border-radius:12px;
box-shadow:0 1px 0 rgba(10,31,68,.04); padding:16px 18px; margin-top:10px;
}
/* KOLLAPSIERT: vollkommen unsichtbar ohne Lücke/„leere Input“-Optik */
.rc-collapsible{
overflow:hidden; transition:max-height .28s ease, opacity .2s ease;
}
.rc-collapsible[hidden]{
display:block; /* für Animation */
max-height:0;
opacity:0;
padding:0 !important;
margin-top:0 !important;
border:0 !important;
box-shadow:none !important;
background:transparent !important;
border-radius:0 !important;
pointer-events:none;
visibility:hidden;
}
/* OFFEN */
.rc-collapsible.open{
opacity:1;
padding:16px 18px;
margin-top:10px;
border:1px solid #dfe7f3;
background:#fff;
box-shadow:0 1px 0 rgba(10,31,68,.04);
border-radius:12px;
}
/* Titel / Listen (dein neuer Stil, leicht gestrafft) */
.rc-section{margin:6px 0 12px}
.rc-title{margin:0 0 6px; font-weight:700; font-size:15px; color:#0b5db6}
.rc-list{list-style:none; margin:0; padding:0}
.rc-list li{display:flex; justify-content:space-between; gap:8px; padding:6px 0; border-top:1px solid #eef3fb}
.rc-list li:first-child{border-top:0}
.rc-label{font-weight:600; color:#0f172a}
.rc-badge{color:#334155}
.rc-hint{margin:6px 0 0; font-size:12.5px; color:#64748b}
/* Tabelle (Kombi) */
.rc-table-wrap{overflow:auto; border-radius:10px}
.rc-table{width:100%; border-collapse:separate; border-spacing:0; background:#f8fbff; border:1px solid #e6eef9; border-radius:10px; overflow:hidden}
.rc-table thead th{background:#f1f6ff; color:#334155; font-weight:600; padding:10px 12px; border-bottom:1px solid #e6eef9}
.rc-table tbody td{padding:10px 12px; border-top:1px solid #eef3fb; vertical-align:top}
.rc-table tbody tr:first-child td{border-top:0}
.rc-table--combo tbody td:nth-child(1){width:12ch; font-weight:600}
.rc-table--combo tbody td:nth-child(2){width:10ch}
.rc-table--combo tbody td:nth-child(4),
.rc-table--combo tbody td:nth-child(5){text-align:right; white-space:nowrap}
/* Offen-Status (Chevron) */
.discount-box[aria-open="true"] .rc-chevron{transform:rotate(180deg)}
/* ===== Mobile polish ===== */
@media (max-width: 640px){
/* Modal als Fullscreen-Sheet */
.rent-dialog{
width:100%;
height:100dvh; /* echte Viewport-Höhe auf Mobile */
max-height:100dvh;
margin:0;
border-radius:0;
}
.rent-header{
position:sticky; top:0; z-index:2;
background:#fff;
padding:12px 14px;
}
.rent-footer{
position:sticky; bottom:0; z-index:2;
background:#fff;
padding:10px 14px;
}
.rent-content{
padding:12px 14px;
}
/* Typografie minimal größer für bessere Lesbarkeit */
.rent-card{ font-size:15px; line-height:1.5; }
.rc-title{ font-size:16px; }
/* Buttons fingerfreundlich */
.rc-open-btn,
.rc-close-btn,
.rent-close{ padding:10px 14px; }
.rc-open-btn{ font-size:14px; }
/* Tabellenbereich: weiches Scrolling und mehr Luft */
.rc-table-wrap{ margin-top:10px; -webkit-overflow-scrolling: touch; }
/* Optional: Tabelle -> Karten-Layout (Stack) */
.rc-table--stack thead{ display:none; }
.rc-table--stack,
.rc-table--stack tbody,
.rc-table--stack tr,
.rc-table--stack td{ display:block; width:100%; }
.rc-table--stack tbody tr{
background:#f8fbff;
border:1px solid #e6eef9;
border-radius:10px;
padding:8px 10px;
margin:10px 0;
}
.rc-table--stack td{
border-top:0; /* Trennlinien entfernen */
padding:6px 0;
}
.rc-table--stack td::before{
content: attr(data-label);
display:block;
font-weight:600;
color:#334155;
margin-bottom:2px;
}
.rc-table--stack td:last-child{ padding-bottom:0; }
}
.two-col-seo-box{
display:flex;
gap:16px;
align-items:stretch;
width:100%;
}
.two-col-seo-box .seo-col{
flex:1 1 48%;
background:#fff;
border:1px solid #e6ebf1;
border-radius:12px;
padding:14px;
min-width:0; /* wichtig für Flex + Slider */
}
/* Wenn nur ein Block ausgegeben wird → 100% Breite */
.two-col-seo-box .seo-col.seo-col--full{
flex:1 1 100% !important;
width:100% !important;
max-width:100% !important;
}
/* Slider-Inhalt nicht beschneiden */
.seo-col.seo-col--full .mini-slider,
.seo-col .mini-slider{
width:100%;
max-width:100%;
}
/* Mobile untereinander */
@media (max-width: 900px){
.two-col-seo-box{
flex-direction:column;
}
.two-col-seo-box .seo-col{
flex:1 1 100%;
}
}
/* Container mit zwei Spalten */
.two-col-seo-box{
display:flex;
gap:16px;
align-items:flex-start;
flex-wrap:wrap; /* damit es auf kleinen Screens sauber umbricht */
}
/* Standard-Kachel */
.two-col-seo-box .seo-col{
flex:1 1 0;
min-width:0;
background:#fff;
border:1px solid #e6ebf1;
border-radius:12px;
padding:14px;
}
/* WENN nur ein Block da ist → volle Breite ERZWINGEN */
.two-col-seo-box .seo-col.full{
width:100% !important;
flex:0 0 100% !important;
}
/* Mobile: sowieso 100% Breite pro Kachel */
@media (max-width: 768px){
.two-col-seo-box .seo-col{
flex:0 0 100%;
}
}
/* === Fix: two-col-seo-box stabil sichtbar halten ======================= */
.two-col-seo-box{
display:grid !important;
grid-template-columns:minmax(0,1fr);
gap:18px !important;
width:100%;
clear:both;
align-items:start !important;
}
.two-col-seo-box > *{
min-width:0;
width:100%;
max-width:100%;
float:none !important;
overflow:visible !important;
}
.two-col-seo-box .seo-col,
.two-col-seo-box .seo-col.full,
.two-col-seo-box .seo-col.seo-col--full{
width:100% !important;
max-width:100% !important;
flex:none !important;
}
@media (min-width: 1100px){
.two-col-seo-box.two-col-seo-box--two{
grid-template-columns:minmax(0,1fr) minmax(0,1fr);
}
}
/* ==========================================================
FINAL CSS passend zu deinem aktuellen HTML
- .price-grid / .price-box / .rc-open-btn
- #aufbau-row + Kaution/Lieferservice Cards
- .qty_row inkl. .qty_discount_row Struktur
========================================================== */
/* ---------------- PRICE GRID ---------------- */
.price-grid{
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 14px !important;
align-items: stretch !important;
margin: 10px 0 18px !important;
}
@media (max-width: 720px){
.price-grid{ grid-template-columns: 1fr !important; }
}
.price-grid .price-box{
background: #fff !important;
border: 1px solid #e6eef6 !important;
border-radius: 14px !important;
padding: 12px 14px !important;
box-shadow: 0 1px 0 rgba(15,23,42,.03) !important;
}
.price-grid .price-box p{
margin: 0 !important;
padding: 10px 0 !important;
line-height: 1.35 !important;
font-size: 14px !important;
color: #0f172a !important;
}
.price-grid .price-box p + p{
border-top: 1px solid #eef2f7 !important;
}
.price-grid .price-box p > strong{
display: block !important;
font-size: 12px !important;
font-weight: 700 !important;
letter-spacing: .25px !important;
color: #64748b !important;
margin-bottom: 6px !important;
}
/*
im Preisbereich weg */
.price-grid .price-box p br{
display: none !important;
}
.price-grid #price-with-vat,
.price-grid #base-price{
font-size: 22px !important;
font-weight: 900 !important;
letter-spacing: -0.2px !important;
color: #0f172a !important;
}
.price-grid #base-price{
font-size: 19px !important;
font-weight: 800 !important;
color: #334155 !important;
}
/* Rabatt-Button als Card */
.price-grid .rc-open-btn{
width: 100% !important;
min-height: 100% !important;
border-radius: 14px !important;
border: 1px solid #e6eef6 !important;
background: #f9fbfd !important;
color: #2563eb !important;
font-weight: 800 !important;
padding: 14px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
text-align: center !important;
box-shadow: 0 1px 0 rgba(15,23,42,.03) !important;
}
.price-grid .rc-open-btn:hover{
background: #ffffff !important;
border-color: #d9e6f5 !important;
}
/* ---------------- INFO CARDS: Aufbau / Kaution / Lieferservice ---------------- */
#aufbau-row,
#aufbau-row + p,
#aufbau-row + p + p{
background: #fff !important;
border: 1px solid #eef2f7 !important;
border-radius: 14px !important;
padding: 12px 14px !important;
margin: 10px 0 0 0 !important;
line-height: 1.45 !important;
color: #0f172a !important;
}
#aufbau-row strong,
#aufbau-row + p strong,
#aufbau-row + p + p strong{
display: block !important;
margin-bottom: 6px !important;
font-size: 13px !important;
font-weight: 900 !important;
color: #0f172a !important;
}
/* br in diesen Texten weg */
#aufbau-row br,
#aufbau-row + p br,
#aufbau-row + p + p br{
display: none !important;
}
/* Info Icon Farbe */
.info-icon,
.info-icon .fa-info-circle{
color: #2563eb !important;
}
/* ---------------- QTY ROW: Menge wählen ---------------- */
/* Dein Problem „sieht komisch aus“ ist meist:
- Hint wird zu breit und drückt alles
- oder bleibt nicht in der Zeile
=> Wir geben der Hint-Box eine max-width + sauberer Flex-Aufbau
*/
.qty_row{
display: flex !important;
align-items: center !important;
gap: 10px !important;
flex-wrap: wrap !important;
padding: 12px 14px !important;
border: 1px solid #e6eef6 !important;
border-radius: 14px !important;
background: #ffffff !important;
box-shadow: 0 1px 0 rgba(15,23,42,.03) !important;
}
.qty_row .qty_label{
font-weight: 900 !important;
color: #0f172a !important;
white-space: nowrap !important;
margin-right: 6px !important;
}
/* +/- Buttons */
.qty_row .minus_item_qty,
.qty_row .plus_item_qty{
width: 38px !important;
height: 38px !important;
border-radius: 10px !important;
border: 1px solid #dbe7f5 !important;
background: #f9fbfd !important;
color: #0f172a !important;
font-weight: 900 !important;
font-size: 18px !important;
cursor: pointer !important;
}
.qty_row .minus_item_qty:hover,
.qty_row .plus_item_qty:hover{
background: #ffffff !important;
border-color: #cfe0f3 !important;
}
/* Menge */
.qty_row .item_qty{
min-width: 54px !important;
height: 38px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
padding: 0 10px !important;
border-radius: 10px !important;
border: 1px solid #dbe7f5 !important;
background: #ffffff !important;
font-weight: 900 !important;
color: #0f172a !important;
outline: none !important;
}
.qty_row .item_qty:focus{
border-color: #93c5fd !important;
box-shadow: 0 0 0 3px rgba(59,130,246,.18) !important;
}
/* Rabatt-Hinweis: echte Struktur über qty_discount_row */
.qty_row .qty_discount_hint{
margin-left: auto !important;
padding: 8px 10px !important;
border-radius: 12px !important;
border: 1px solid #dbe7f5 !important;
background: #f8fbff !important;
font-size: 12px !important;
line-height: 1.2 !important;
color: #334155 !important;
display: flex !important;
flex-direction: column !important;
gap: 4px !important;
/* WICHTIG: verhindert „rausrutschen“ / zu breit */
max-width: 190px !important;
flex: 0 0 auto !important;
}
/* Eine Zeile: ab | 10 | 10% Rabatt */
.qty_row .qty_discount_hint .qty_discount_row{
display: flex !important;
align-items: baseline !important;
gap: 6px !important;
white-space: nowrap !important;
}
.qty_row .qty_discount_hint .qty_discount_row{
flex-direction: row !important;
direction: ltr !important;
}
.qty_row .qty_discount_hint .qty_discount_from{ order: 1 !important; }
.qty_row .qty_discount_hint .qty_discount_qty{ order: 2 !important; }
.qty_row .qty_discount_hint .qty_discount_pct{ order: 3 !important; }
.qty_row .qty_discount_hint .qty_discount_from{
color: #64748b !important;
font-weight: 700 !important;
}
.qty_row .qty_discount_hint .qty_discount_qty{
font-weight: 900 !important;
color: #0f172a !important;
}
.qty_row .qty_discount_hint .qty_discount_pct{
font-weight: 800 !important;
color: #2563eb !important;
}
/* Mobile: Hint unter die Reihe, volle Breite */
@media (max-width: 720px){
.qty_row .qty_discount_hint{
margin-left: 0 !important;
width: 100% !important;
max-width: none !important;
}
}
@media (max-width: 720px){
.qty_row{
gap: 8px !important;
}
.qty_row .qty_label{
flex: 0 0 100% !important; /* Label eigene Zeile */
margin-right: 0 !important;
}
.qty_row .minus_item_qty,
.qty_row .item_qty,
.qty_row .plus_item_qty{
flex: 0 0 auto !important; /* Buttons nicht “dehnen“ */
}
.qty_row .qty_discount_hint{
flex: 0 0 100% !important; /* Rabattbox eigene Zeile */
}
}
.imagesTpl{
max-width:100%
}
/* Intro Overlay Basis */
#biIntro {
position: fixed;
inset: 0;
z-index: 99999;
display: none; /* wird per JS bei Bedarf eingeblendet */
place-items: center;
background: radial-gradient(circle at 50% 45%, rgba(0,0,0,0.55), rgba(0,0,0,0.92));
backdrop-filter: blur(6px);
opacity: 0;
transition: opacity 600ms ease;
}
/* Wenn aktiv */
#biIntro.is-active {
display: grid;
}
#biIntro.is-visible {
opacity: 1;
}
.biIntro-inner {
position: relative;
width: min(340px, 70vw);
aspect-ratio: 1 / 1;
display: grid;
place-items: center;
}
/* Logo */
.biIntro-logo {
width: 100%;
height: auto;
transform: scale(0.92);
filter: drop-shadow(0 12px 40px rgba(0,0,0,0.65));
animation: biLogoIn 1200ms cubic-bezier(.2,.9,.2,1) forwards;
}
/* “Magischer“ Glow */
.biIntro-glow {
position: absolute;
inset: -14%;
border-radius: 999px;
background: conic-gradient(
from 0deg,
rgba(255,215,120,0.0),
rgba(255,215,120,0.55),
rgba(255,215,120,0.0),
rgba(255,215,120,0.25),
rgba(255,215,120,0.0)
);
filter: blur(14px);
opacity: 0.0;
animation: biGlow 1400ms ease forwards;
pointer-events: none;
}
.produkte-sort-block {
margin: 20px 0 10px;
text-align: left;
}
.container-sort {
display: block;
width: 100%;
}
.sort-filter {
display: inline-flex;
align-items: center;
justify-content: flex-start;
gap: 15px;
flex-wrap: wrap;
width:100%;
background: #fff;
padding: 12px 16px;
border-radius: 10px;
border: 1px solid #eee;
box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}
.produkte-sort-block,
.container-sort {
width: 100%;
margin: 0;
padding: 0;
float: none;
text-align: left;
display: block;
}
.sort-filter-group {
display: flex;
align-items: center;
gap: 8px;
}
.sort-filter label {
font-size: 14px;
color: #555;
white-space: nowrap;
}
.sort-filter select {
padding: 6px 10px;
border-radius: 6px;
border: 1px solid #ccc;
font-size: 14px;
background: #fff;
cursor: pointer;
}
.sort-filter select:hover {
border-color: #888;
}
.sort-filter-row{
display:flex;
flex-wrap:wrap;
gap:12px;
align-items:flex-end;
}
.sort-filter-item{
display:flex;
flex-direction:column;
gap:6px;
}
/* ================= MOBILE OPTIMIERUNG ================= */
@media (max-width: 768px) {
.sort-filter {
flex-direction: column;
align-items: stretch;
gap: 12px;
padding: 12px;
}
.sort-filter-row {
flex-direction: column;
align-items: stretch;
gap: 12px;
width: 100%;
}
.sort-filter-item {
width: 100%;
}
.sort-filter label {
font-size: 13px;
}
.sort-filter select,
.sort-filter input {
width: 100%;
padding: 10px;
font-size: 15px;
border-radius: 8px;
}
.sort-filter-actions {
width: 100%;
}
.sort-filter-actions button {
width: 100%;
padding: 12px;
font-size: 15px;
border-radius: 8px;
}
}
@media (max-width: 768px) {
.price-row {
display: flex;
gap: 10px;
}
.price-row .sort-filter-item {
flex: 1;
}
}
.sort-filter select,
.sort-filter input {
width: 100%;
min-height: 42px;
box-sizing: border-box;
}
.sort-filter-item {
min-width: 180px;
flex: 1 1 180px;
}
@media (max-width: 768px) {
.sort-filter {
display: flex;
flex-direction: column;
align-items: stretch;
padding: 12px;
gap: 12px;
}
.sort-filter-row {
display: flex;
flex-direction: column;
gap: 12px;
align-items: stretch;
width: 100%;
}
.sort-filter-item {
width: 100%;
min-width: 0;
flex: 1 1 auto;
}
.sort-filter-actions button {
width: 100%;
min-height: 44px;
}
}
.sort-filter-btns{
display:flex;
gap:10px;
align-items:center;
flex-wrap:wrap;
}
.btn-reset-filter{
display:inline-flex;
align-items:center;
justify-content:center;
padding:10px 14px;
border:1px solid #ccc;
background:#f7f7f7;
color:#333;
text-decoration:none;
border-radius:6px;
transition:all .2s ease;
}
.btn-reset-filter:hover{
background:#ececec;
border-color:#999;
color:#111;
}
@keyframes biLogoIn {
0% { opacity: 0; transform: scale(0.86); filter: blur(2px) drop-shadow(0 0 0 rgba(0,0,0,0)); }
60% { opacity: 1; transform: scale(1.02); filter: blur(0) drop-shadow(0 18px 55px rgba(0,0,0,0.7)); }
100% { opacity: 1; transform: scale(1.00); }
}
@keyframes biGlow {
0% { opacity: 0; transform: rotate(-18deg) scale(0.95); }
55% { opacity: 0.9; transform: rotate(10deg) scale(1.02); }
100% { opacity: 0.35; transform: rotate(28deg) scale(1.06); }
}
/* Optional: Content darf sofort da sein, wird aber visuell "hinter" dem Overlay gehalten */
body.biIntro-lock {
overflow: hidden;
}
.popup-container--centered{
inset:0;
bottom:auto;
left:auto;
width:100vw;
height:100vh;
padding:24px;
border:0!important;
background:rgba(15,23,42,.48)!important;
border-radius:0;
box-shadow:none;
box-sizing:border-box;
align-items:center;
justify-content:center;
}
.popup-container--centered .popup-content{
width:min(560px,100%);
max-height:calc(100vh - 48px);
overflow:auto;
padding:28px 26px 24px;
border-radius:24px;
background:linear-gradient(180deg,#fff 0%,#f8fbff 100%);
box-shadow:0 22px 60px rgba(15,23,42,.22);
}
.customer-type-menu-trigger{
display:inline-flex;
align-items:center;
gap:8px;
padding:8px 10px;
background:#fff;
color:#163d7a;
font-weight:700;
line-height:1;
}
.customer-type-menu-trigger:hover{
background:#f7fbff;
border-color:#bed1ea;
}
.customer-type-menu-trigger .customer-type-menu-text{
font-size:12px;
text-transform:uppercase;
letter-spacing:.04em;
}
.customer-type-menu-item{
list-style:none;
}
.customer-type-menu-trigger #customer-type-menu-label{
display:inline-flex;
align-items:center;
padding:3px 10px;
background:#eef4ff;
color:#143f7d;
font-size:12px;
line-height:1.2;
}
.customer-type-popup .newprodukt{
padding-right:36px;
font-size:28px;
line-height:1.1;
color:#12253f;
}
.customer-type-popup__content{
text-align:left;
}
.customer-type-popup__lead{
margin:10px 0 18px;
color:#526277;
font-size:15px;
line-height:1.65;
}
.customer-type-popup__options{
display:grid;
gap:12px;
}
.customer-type-popup__option{
display:grid;
grid-template-columns:22px 1fr;
gap:6px 12px;
align-items:start;
padding:16px 18px;
border:2px solid #d9e3f0;
border-radius:18px;
background:#fff;
cursor:pointer;
transition:border-color .2s ease,transform .2s ease,box-shadow .2s ease;
}
.customer-type-popup__option.is-active{
border-color:#235fa8;
box-shadow:0 14px 28px rgba(35,95,168,.14);
transform:translateY(-1px);
}
.customer-type-popup__option input{
grid-column:1;
grid-row:1 / span 2;
margin:3px 0 0;
}
.customer-type-popup__option-title{
display:block;
font-size:18px;
font-weight:800;
color:#12253f;
}
.customer-type-popup__option-text{
display:block;
color:#5b6b80;
font-size:14px;
line-height:1.55;
}
.customer-type-popup__status{
margin-top:16px;
padding:13px 15px;
border-radius:14px;
background:#eef5ff;
color:#163d7a;
font-weight:700;
}
.customer-type-popup__hint{
margin:12px 0 0;
color:#5f6f84;
line-height:1.6;
}
.customer-type-popup__actions{
margin-top:18px;
}
.customer-type-popup__actions .btn{
min-width:150px;
text-align:center;
}
@media only screen and (max-width:600px){
.popup-container--centered{
padding:14px;
}
.popup-container--centered .popup-content{
width:100%;
max-height:calc(100vh - 28px);
padding:22px 18px 18px;
border-radius:20px;
}
.customer-type-popup .newprodukt{
font-size:24px;
}
.customer-type-popup__option{
grid-template-columns:20px 1fr;
padding:14px 14px;
}
.customer-type-menu-item{
display:block;
width:100%;
}
.customer-type-menu-trigger{
width:100%;
justify-content:space-between;
padding:10px 12px;
box-sizing:border-box;
}
.customer-type-menu-trigger .customer-type-menu-text{
font-size:11px;
}
.customer-type-menu-trigger #customer-type-menu-label{
margin-left:auto;
}
}
.promo-accordion{
display:grid;
gap:10px;
margin-top:12px;
}
.promo-item{
border:1px solid #cfe0f7;
border-radius:14px;
background:#fff;
overflow:hidden;
}
.promo-item summary{
position:relative;
display:block;
cursor:pointer;
list-style:none;
padding:14px 44px 14px 16px;
font-weight:600;
color:#173b71;
}
.promo-item summary::-webkit-details-marker{
display:none;
}
.promo-item summary::after{
content:"+";
position:absolute;
top:50%;
right:16px;
transform:translateY(-50%);
font-size:20px;
line-height:1;
color:#235fa8;
}
.promo-item[open] summary::after{
content:"-";
}
.promo-item__content{
padding:0 16px 14px;
color:#3c3635;
}
.promo-item__content p{
margin:0;
}
.mobile-filter-summary,
.mobile-toggle-button{
display:none;
}
#logor{
float:right;
clear:none;
width:auto;
max-width:720px;
margin:0;
padding:86px 26px 18px 0;
border-radius:0;
background:transparent;
border:0;
box-shadow:none;
box-sizing:border-box;
position:relative;
z-index:1;
text-align:right;
}
#logor .status-wrapper{
display:flex;
align-items:center;
justify-content:flex-end;
gap:14px;
margin-bottom:6px;
padding-bottom:0;
border-bottom:0;
flex-wrap:wrap;
}
#logor .tel{
display:flex;
align-items:center;
gap:8px;
margin:0;
font-size:1rem;
font-weight:800;
color:#2f2a28;
letter-spacing:.01em;
flex-wrap:wrap;
justify-content:flex-end;
width:100%;
}
#logor .tel a{
color:#2f2a28;
text-decoration:none;
}
#logor .tel a:hover{
color:#235fa8;
}
#logor .status{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:34px;
padding:6px 12px;
border-radius:999px;
font-size:.84rem;
font-weight:800;
line-height:1.2;
color:#fff;
white-space:nowrap;
box-shadow:none;
}
#logor .status.open{
background:linear-gradient(135deg,#2fb34f 0%,#1f9b48 100%);
}
#logor .status.pause{
color:#3f2f00;
background:linear-gradient(135deg,#ffd45e 0%,#ffbf2f 100%);
}
#logor .status.closed{
background:linear-gradient(135deg,#e45b5b 0%,#ca3b3b 100%);
}
#logor .logor-hours{
margin-top:0;
}
#logor .logor-hours-list{
display:block;
margin:0;
padding:0;
list-style:none;
}
#logor .logor-hours-list li{
margin:0;
padding:0;
border-radius:0;
background:transparent;
border:0;
color:#3c3635;
font-size:.9rem;
line-height:1.55;
margin-bottom:2px;
}
#logor .logor-hours-list li b{
display:inline;
margin-bottom:0;
color:#173b71;
font-size:.9rem;
font-weight:800;
text-transform:none;
letter-spacing:0;
}
@media only screen and (max-width:600px){
.slider-head section .flex .i1,
.slider-head section .flex1 .i1,
.bgslider section .flex .i1,
.bgslider1 section .flex .i1i{
padding:0 6px;
}
.slider-head section h1,
.bgslider1 section h1,
h1.align-left{
margin:0 0 8px !important;
font-size:clamp(1.9rem,8.2vw,2.45rem);
line-height:1.14;
}
.hero-brand.align-left.mobil.h1{
margin:0 0 6px;
font-size:1rem;
line-height:1.2;
}
.vc_message_box[aria-labelledby="aktions-hinweis"] .vc_message_box-icon{
display:none;
}
#topimg{
margin-bottom:8px;
}
.bgslider1{
min-height:auto;
}
.bgslider1 section,
.slider-head section{
margin:10px auto 0;
}
.bgslider1 section .flex1,
.bgslider1 section .flex,
.slider-head section .flex{
gap:0;
}
.bgslider1 section .flex .i1i,
.bgslider1 section .flex1 .i1i,
.slider-head section .flex .i1,
.slider-head section .flex1 .i1{
padding:0;
margin:0;
}
.margintd,
.margintdlr{
padding:16px 0 8px;
margin:0;
}
.bgslider1 section h1,
.slider-head section h1{
font-size:clamp(2rem,9vw,2.5rem);
line-height:1.18;
margin:0 0 12px;
max-width:92%;
}
#logor{
float:none;
clear:both;
width:auto;
max-width:none;
margin:74px 12px 10px;
padding:0;
border-radius:0;
text-align:center;
}
#logor .status-wrapper{
flex-direction:column;
align-items:center;
justify-content:center;
gap:6px;
margin-bottom:6px;
padding-bottom:0;
}
#logor .tel{
font-size:.96rem;
line-height:1.3;
}
#logor .tel,
#logor .tel a{
text-align:center;
}
#logor .tel{
justify-content:center;
}
#logor .status{
min-height:38px;
padding:7px 12px;
font-size:.88rem;
margin:0;
}
#logor .logor-hours-list{
display:block;
}
#logor .logor-hours-list li{
font-size:.88rem;
line-height:1.34;
margin-bottom:4px;
}
.bgslider{
padding-left:0;
background-attachment:scroll;
}
.hero-title-sub{
display:none!important;
}
.hero-lead{
margin:0 0 8px !important;
font-size:.95rem;
line-height:1.42;
}
.hero-note{
margin:0 0 8px !important;
font-size:.82rem !important;
line-height:1.35;
opacity:.9;
}
.hero-trust{
margin:0 0 10px !important;
font-size:.82rem !important;
line-height:1.35;
}
#google-rating-hero{
display:block;
margin-top:0 !important;
font-size:.82rem !important;
}
.hero-trust-points{
display:block;
margin-top:4px;
}
.phone{
margin-top:6px;
}
.phone .full{
display:flex;
flex-direction:column;
gap:8px;
margin:0;
}
.phone .full .btn,
.phone .full .hero-btn{
float:none !important;
width:100%;
margin-left:0 !important;
text-align:center;
}
.phone .mobil{
margin:0;
}
.phone .mobil .btn{
float:none !important;
width:100%;
text-align:center;
}
.content_container{
padding-left:12px;
padding-right:12px;
max-width:100%;
box-sizing:border-box;
}
.breadcrumb{
margin:6px 0 8px;
padding:8px 10px;
font-size:13px;
}
.post .entry{
padding-top:0;
}
.how_it_works{
margin-bottom:10px;
}
.block-left{
margin-bottom:10px;
padding:0;
}
.block-left h2.widget-title{
padding:10px 12px;
font-size:.96rem;
}
.contentblockcat{
max-height:170px;
padding:8px 10px;
overflow:auto;
opacity:1;
transition:max-height .25s ease, opacity .2s ease, padding .2s ease;
}
.contentblockcat.expanded{
max-height:360px;
overflow:auto;
opacity:1;
}
.block-left ul li{
margin:2px 0;
}
.block-left ul li a{
padding:5px 8px;
font-size:.92rem;
}
.block-left #toggle-button{
margin:6px 10px 8px;
padding:8px 14px;
width:calc(100% - 20px);
}
.container{
padding-top:2px;
}
.popular-searches{
margin-top:8px;
border-radius:14px;
background:#fff;
padding:10px 12px;
box-shadow:0 6px 16px rgba(15,23,42,.06);
position:relative;
z-index:1;
}
.popular-searches p{
display:flex;
align-items:center;
justify-content:space-between;
font-size:1rem;
margin:0;
cursor:pointer;
}
.popular-searches p::after{
content:"anzeigen";
font-size:12px;
font-weight:700;
color:#235fa8;
text-transform:uppercase;
letter-spacing:.04em;
}
.popular-searches.is-open p::after{
content:"ausblenden";
}
.popular-searches ul{
display:none;
flex-wrap:wrap;
gap:8px;
margin-top:8px;
}
.popular-searches li{
margin-right:0;
}
.popular-searches.is-open ul{
display:flex;
}
.popular-searches a{
display:inline-flex;
align-items:center;
justify-content:center;
padding:7px 10px;
border-radius:999px;
background:#f3f6ff;
border:1px solid #d7e0ff;
font-size:.86rem;
line-height:1.2;
}
.produkte-sort-block{
margin:8px 0 4px;
}
.mobile-filter-summary{
display:block;
margin:0 0 6px;
padding:10px 12px;
border-radius:12px;
background:#f7fbff;
border:1px solid #d7e6f7;
color:#31507c;
font-size:12px;
line-height:1.45;
}
.mobile-toggle-button{
display:flex;
align-items:center;
justify-content:space-between;
width:100%;
min-height:42px;
padding:10px 12px;
border:1px solid #d7e0ee;
border-radius:12px;
background:#fff;
color:#163d7a;
font-size:13px;
font-weight:700;
box-shadow:0 6px 16px rgba(15,23,42,.05);
text-align:left;
}
.produkte-sort-block .mobile-toggle-button{
margin-bottom:2px;
}
.mobile-toggle-button::after{
content:"+";
font-size:18px;
line-height:1;
}
.produkte-sort-block.is-open .mobile-toggle-button::after{
content:"-";
}
.sort-filter{
display:none;
padding:10px;
gap:8px;
border-radius:10px;
margin-top:8px;
background:#fff;
border:1px solid #e4ebf5;
}
.sort-filter-row{
display:flex;
flex-direction:column;
gap:8px;
}
.sort-filter-item label{
display:block;
font-size:13px;
font-weight:700;
}
.produkte-sort-block.is-open .sort-filter{
display:flex;
}
.sort-filter select,
.sort-filter input{
min-height:40px;
font-size:14px;
padding:9px 10px;
}
.sort-filter-actions button,
.btn-reset-filter{
min-height:40px;
padding:9px 12px;
font-size:14px;
}
.thema{
min-height:0;
margin-top:18px;
padding-bottom:18px;
}
.post .entry{
min-height:0;
}
}
@media only screen and (max-width:600px){
.produkte-sort-block.is-open .mobile-toggle-button::after{
content:"-";
}
.sort-filter{
padding:8px;
margin-top:6px;
}
.thema{
margin-top:8px !important;
padding-bottom:12px;
}
}
body.is-haendler-view .haendler {
display: none !important;
}
/* Dezente Unterseiten-Korrekturen auf Basis des bestehenden Designs */
.bgslider1,
.bgslider1 .slider-head,
.bgslider1 .slider-head section,
.bgslider1 .slider-head .row,
.bgslider1 .slider-head .col-12 {
max-width: 100%;
box-sizing: border-box;
}
.bgslider1 {
overflow: hidden;
}
.bgslider1 .slider-head section {
max-width: 1180px;
margin: 18px auto 12px;
padding-left: 16px;
padding-right: 16px;
}
.bgslider1 section .flex1 {
display: block;
height: auto;
overflow: visible;
}
.bgslider1 section .flex1 .i1i {
width: 100%;
max-width: 980px;
margin: 0 auto;
padding-left: 10px;
padding-right: 10px;
box-sizing: border-box;
}
.bgslider1 section h1 {
max-width: 920px;
margin-left: auto;
margin-right: auto;
}
.bgslider1 .breadcrumb {
max-width: 100%;
overflow-wrap: anywhere;
white-space: normal;
}
.bgslider1 .breadcrumb ol {
flex-wrap: wrap;
}
@media only screen and (max-width: 900px) {
.bgslider1 .slider-head section {
margin-top: 10px;
padding-left: 12px;
padding-right: 12px;
}
.bgslider1 section .flex1 .i1i {
max-width: 100%;
padding-left: 0;
padding-right: 0;
}
}
@media only screen and (max-width: 600px) {
.bgslider1 .slider-head section {
margin-top: 6px;
padding-left: 10px;
padding-right: 10px;
}
.bgslider1 section h1 {
font-size: clamp(1.8rem, 8vw, 2.35rem);
line-height: 1.18;
}
.bgslider1 .breadcrumb {
padding: 8px 10px;
font-size: 12px;
}
.bgslider1 .breadcrumb .sep {
display: none;
}
}
/* Dezente Startseiten-Korrekturen */
.bgslider .slider-head section {
padding-top: 28px;
padding-bottom: 34px;
}
.bgslider .slider-head section .flex .i1 {
padding: 26px 24px 18px;
}
.bgslider .hero-brand,
.bgslider .hero-title-sub,
.bgslider .hero-lead,
.bgslider .hero-note,
.bgslider .hero-trust {
margin-bottom: 14px;
}
.bgslider .phone {
margin-top: 18px;
}
.bgslider .phone .full {
display: flex;
align-items: center;
gap: 12px;
margin: 0;
}
.bgslider .phone .mobil {
display: none;
}
@media only screen and (max-width: 900px) {
.bgslider .slider-head section {
padding-top: 18px;
padding-bottom: 24px;
}
.bgslider .slider-head section .flex .i1 {
padding: 12px 10px 6px;
}
}
@media only screen and (max-width: 600px) {
.bgslider .phone .full {
flex-direction: column;
align-items: stretch;
gap: 8px;
}
.bgslider .phone .full .btn,
.bgslider .phone .full .hero-btn {
width: 100%;
margin-left: 0 !important;
text-align: center;
}
}
/* Mobile Homepage: weniger Textlast, klarere Hierarchie */
@media only screen and (max-width: 768px) {
body.is-homepage .bgslider {
background-attachment: scroll;
}
body.is-homepage .bgslider .breadcrumb {
display: none;
}
body.is-homepage .bgslider .slider-head section {
padding-top: 12px;
padding-bottom: 18px;
}
body.is-homepage .bgslider .slider-head section .flex {
gap: 12px;
}
body.is-homepage .bgslider .slider-head section .flex .i1 {
padding-bottom: 0;
}
body.is-homepage .hero-brand {
margin-bottom: 8px;
font-size: .9rem;
letter-spacing: .08em;
opacity: .92;
}
body.is-homepage .hero-lead {
margin-bottom: 10px !important;
font-size: .96rem;
line-height: 1.5;
display: -webkit-box;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
overflow: hidden;
}
body.is-homepage .hero-note {
display: none;
}
body.is-homepage .hero-trust {
margin-bottom: 12px !important;
}
body.is-homepage .hero-trust-points {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: 8px;
}
body.is-homepage .hero-trust-points br {
display: none;
}
body.is-homepage #google-rating-hero,
body.is-homepage .hero-trust-points {
font-size: .8rem !important;
}
body.is-homepage .hero-trust-points {
color: #f6efe8;
}
body.is-homepage .slide-logo-content {
margin-top: 6px;
border-radius: 14px;
overflow: hidden;
}
body.is-homepage .slide-logo-content img {
border-width: 8px !important;
}
body.is-homepage .intro-text {
padding: 0 2px;
}
body.is-homepage .intro-text .intro {
margin-bottom: 10px;
font-size: 1rem !important;
line-height: 1.4;
}
body.is-homepage .intro-text > p:not(.intro) {
font-size: .96rem;
line-height: 1.55;
margin-bottom: 12px;
}
body.is-homepage .intro-text > p:nth-of-type(3),
body.is-homepage .intro-text > p:nth-of-type(4) {
display: -webkit-box;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
overflow: hidden;
}
body.is-homepage .footer-delivery__toggle {
margin-top: 12px;
border-radius: 14px;
overflow: hidden;
background: #fff;
box-shadow: 0 4px 12px rgba(0,0,0,.06);
}
body.is-homepage .footer-delivery__toggle summary {
padding: 12px 14px;
font-weight: 700;
font-size: .92rem;
}
body.is-homepage .benefits {
padding-top: 8px;
padding-bottom: 10px;
}
body.is-homepage .benefits__wrapper {
overflow-x: auto;
padding-bottom: 8px;
-webkit-overflow-scrolling: touch;
}
body.is-homepage .works-verleih {
display: flex;
gap: 10px;
flex-wrap: nowrap;
width: max-content;
padding: 0 10px 4px;
}
body.is-homepage .works-item-sizer {
min-width: 150px;
max-width: 150px;
}
body.is-homepage .benefits__item {
width: 150px;
height: 150px;
margin: 0;
font-size: .74rem;
}
body.is-homepage .benefits__number {
font-size: 2rem;
}
body.is-homepage .dienstleistungen .col-4,
body.is-homepage .veranstaltung .gallery-item,
body.is-homepage .eventausstattung .col-12.article {
margin-bottom: 12px;
}
body.is-homepage .dienstleistungen .how_it_works {
padding-bottom: 14px;
}
body.is-homepage .dienstleistungen .desc,
body.is-homepage .veranstaltung-copy,
body.is-homepage .eventausstattung .desc {
font-size: .92rem;
line-height: 1.5;
}
body.is-homepage .dienstleistungen .desc,
body.is-homepage .veranstaltung-copy p,
body.is-homepage .eventausstattung .desc p {
display: -webkit-box;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
overflow: hidden;
}
body.is-homepage #kontakt {
margin-top: 8px;
}
body.is-homepage .vc_message_box {
margin-bottom: 8px;
}
}
@media only screen and (max-width: 600px) {
body.is-homepage .bgslider section h1,
body.is-homepage h1.align-left {
font-size: clamp(1.95rem, 8.4vw, 2.7rem);
line-height: 1.14;
margin-bottom: 10px;
}
body.is-homepage .phone {
margin-top: 12px;
}
body.is-homepage .phone .full {
gap: 9px;
}
body.is-homepage .content_container {
padding-left: 10px;
padding-right: 10px;
}
body.is-homepage .intro-text > p:nth-of-type(5),
body.is-homepage .veranstaltung-copy .veranstaltung-last {
display: none;
}
body.is-homepage .gallery-verleih {
gap: 10px;
}
}
/* Mobile Popup + light mobile sales flow */
.popup-container {
backdrop-filter: blur(12px);
}
.popup-content {
border-radius: 18px;
}
.newprodukt {
line-height: 1.25;
}
.newprodukt-content {
line-height: 1.55;
}
.newprodukt-title {
font-weight: 800;
line-height: 1.3;
}
.popup-container .btn,
#cookie-banner button,
#cookie-settings-modal button {
min-height: 44px;
}
@media only screen and (max-width: 768px) {
.popup-container {
left: 12px;
right: 12px;
bottom: 12px;
width: auto;
max-width: none;
border-radius: 16px;
padding: 14px;
box-shadow: 0 16px 40px rgba(18, 24, 33, 0.24);
}
.popup-content {
border-radius: 14px;
}
.newprodukt {
margin-right: 34px;
font-size: 15px;
}
.newprodukt-content,
.newprodukt-content p,
.newprodukt-title {
font-size: 14px;
}
.newprodukt-image {
margin-top: 8px;
text-align: center;
}
.popup-container img {
max-width: min(140px, 42vw);
border-radius: 12px;
}
.popup-container .btn {
width: 100%;
}
#popupContainer3 .newprodukt-content,
#popupKatalog .newprodukt-content,
#popupContainer2 .newprodukt-content {
margin-top: 8px;
}
#popupKatalog .newprodukt-title,
#popupContainer3 .newprodukt-title {
font-size: 14px;
line-height: 1.5;
}
#cookie-banner {
inset: auto 10px 10px 10px;
border-radius: 16px;
padding: 14px;
}
#cookie-banner-content {
grid-template-columns: 1fr;
gap: 10px;
}
.cb-actions {
justify-content: stretch;
}
.cb-actions button {
width: 100%;
}
#cookie-settings-modal {
width: calc(100vw - 20px);
max-height: calc(100dvh - 20px);
padding: 16px 14px 16px;
border-radius: 18px;
}
#cookie-settings-options {
max-height: 32dvh;
}
#cookie-settings-modal .cb-actions {
flex-direction: column;
}
}
@media only screen and (max-width: 600px) {
#mod_schrift_und_kontrast {
display: none !important;
}
.popup-container--centered {
padding: 10px;
align-items: flex-end;
}
.popup-container--centered .popup-content {
width: 100%;
max-height: min(88dvh, 760px);
padding: 18px 14px 16px;
border-radius: 18px 18px 12px 12px;
}
.customer-type-popup .newprodukt {
font-size: 20px;
line-height: 1.15;
}
.customer-type-popup__lead {
margin: 8px 0 14px;
font-size: 14px;
line-height: 1.5;
}
.customer-type-popup__option {
padding: 12px 12px;
border-radius: 12px;
}
.customer-type-popup__option-title {
font-size: 16px;
}
.customer-type-popup__option-text,
.customer-type-popup__hint,
.customer-type-popup__status {
font-size: 13px;
line-height: 1.45;
}
.customer-type-popup__actions .btn {
width: 100%;
min-width: 0;
}
body.is-homepage #menu li:nth-child(n+6):not(#search-menu):not(.customer-type-menu-item) {
display: none;
}
body.is-homepage #logor .logor-hours {
display: block;
margin-top: 6px;
padding-top: 0;
border-top: 0;
}
body.is-homepage #logor .logor-hours-list {
display: block;
}
body.is-homepage #logor .logor-hours-list li {
margin: 0;
padding: 0;
border-radius: 0;
background: transparent;
font-size: .84rem;
line-height: 1.32;
}
body.is-homepage #logor .logor-hours-list li b {
color: #173b71;
}
body.is-homepage .tophead .social,
body.is-homepage .social-mobil {
display: none;
}
body.is-homepage .benefits__wrapper::-webkit-scrollbar {
display: none;
}
body.is-homepage .dienstleistungen .category-microcopy,
body.is-homepage .veranstaltung-copy .veranstaltung-area,
body.is-homepage .eventausstattung .popular-searches,
body.is-homepage #kontakt .promo-item:nth-child(2),
body.is-homepage #tags .googlebot-visible,
body.is-homepage #footer .footer-navigation:nth-child(n+3),
body.is-homepage #mapContainer,
body.is-homepage #up_frame,
body.is-homepage #center_frame {
display: none;
}
body.is-homepage .dienstleistungen .desc small,
body.is-homepage .dienstleistungen .desc br,
body.is-homepage .eventausstattung .desc br {
display: none;
}
body.is-homepage .dienstleistungen .desc a,
body.is-homepage .eventausstattung .desc a {
font-weight: 700;
}
body.is-homepage .scroll-container {
padding-left: 0;
padding-right: 0;
}
body.is-homepage .horizontal-scroll-container {
padding-left: 10px;
padding-right: 10px;
}
body.is-homepage .scroll-arrow {
display: none;
}
body.is-homepage .thema {
margin-top: 10px !important;
padding-bottom: 8px;
}
body.is-homepage .thema-container {
padding: 12px;
}
body.is-homepage #footer-content {
display: block;
}
body.is-homepage #footer .footer-info {
margin-bottom: 10px;
}
body.is-homepage #footer .copyr p:last-child {
font-size: 12px;
line-height: 1.45;
}
body.is-homepage .phone .full {
gap: 8px;
flex-direction: column;
align-items: stretch;
}
body.is-homepage .phone .full .btn,
body.is-homepage .phone .full .hero-btn {
width: 100%;
margin-left: 0 !important;
text-align: center;
}
body.is-homepage .phone .full .hero-btn--secondary {
padding-top: 10px;
padding-bottom: 10px;
}
}
/* Startseiten-Hero: CTA im bestehenden Stil verfeinert */
body.is-homepage .hero-actions {
margin-top: 22px;
}
body.is-homepage .hero-actions__list {
display: flex;
flex-wrap: wrap;
gap: 14px;
align-items: center;
margin: 0;
}
body.is-homepage .hero-action {
float: none !important;
margin: 0 !important;
min-height: 54px;
padding: 14px 24px;
border-radius: 999px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
text-align: center;
font-weight: 700;
letter-spacing: .01em;
text-transform: none;
box-shadow: 0 14px 28px rgba(0,0,0,.18);
transition: transform .22s ease, box-shadow .22s ease, background-color .22s ease, border-color .22s ease;
}
body.is-homepage .hero-action:hover,
body.is-homepage .hero-action:focus {
transform: translateY(-2px);
box-shadow: 0 18px 34px rgba(0,0,0,.24);
}
body.is-homepage .hero-action--primary {
background: linear-gradient(135deg, #d98b4c 0%, #b65b22 100%) !important;
border: 1px solid rgba(255,255,255,.14);
color: #fff !important;
}
body.is-homepage .hero-action--secondary {
background: rgba(255,255,255,.07) !important;
border: 1px solid rgba(255,255,255,.2);
color: #fff !important;
}
body.is-homepage .hero-action__icon {
font-size: 1rem;
line-height: 1;
}
body.is-homepage .hero-slider-caption {
max-width: 94%;
margin: 14px auto 0;
color: rgba(255,255,255,.8);
font-size: .95rem;
line-height: 1.45;
text-align: center;
}
@media only screen and (max-width: 900px) {
body.is-homepage .hero-actions__list {
gap: 10px;
}
body.is-homepage .hero-action {
min-height: 50px;
padding: 13px 18px;
font-size: .96rem;
}
}
@media only screen and (max-width: 600px) {
body.is-homepage .hero-actions {
margin-top: 16px;
margin-bottom: 26px;
}
body.is-homepage .hero-actions__list {
flex-direction: column;
align-items: stretch;
}
body.is-homepage .hero-action {
width: 100%;
min-height: 48px;
padding: 12px 16px;
}
body.is-homepage .hero-slider-caption {
max-width: 100%;
margin-top: 14px;
font-size: .86rem;
}
body.is-homepage .bgslider .slider-head section .flex {
gap: 28px;
}
body.is-homepage .bgslider .slider-head section .flex .i1 {
padding-bottom: 0;
}
body.is-homepage .bgslider .slider-head section .flex .i2 {
margin-top: 8px;
width: 100%;
}
}
/* Suchfeld auf Startseite: Input + Suchen als eine zusammenhängende Zeile */
.search-container form.example {
display: flex;
align-items: stretch !important;
gap: 0;
}
.search-container form.example .search-input {
border-top-right-radius: 0 !important;
border-bottom-right-radius: 0 !important;
margin-right: 0 !important;
}
.search-container form.example button[type="submit"] {
margin-left: 0 !important;
border-top-left-radius: 0 !important;
border-bottom-left-radius: 0 !important;
border-left: 0 !important;
white-space: nowrap;
}
.search-container form.example .clear-button {
margin-left: 6px !important;
}
@media only screen and (max-width: 600px) {
.search-container form.example {
flex-wrap: nowrap;
}
.search-container form.example .search-input {
min-width: 0;
}
.search-container form.example button[type="submit"] {
padding-left: 14px;
padding-right: 14px;
}
}
/* Template overrides moved from template.php */
.benefits:not(.benefits--config){display:none}
#footer{padding-bottom:0!important}
#footer-content{margin:20px auto 0!important}
#footer .footer-navigation--config{margin-top:0!important;margin-bottom:0!important}
#footer-content{column-gap:28px;row-gap:12px}
#footer .footer-navigation--config{min-width:0}
#footer img{padding-bottom:0}
.haendler + #mapContainer{margin-top:0!important}
.benefits--config .benefits__item--sales{position:relative;overflow:hidden;background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,.06));border:1px solid rgba(255,255,255,.18);box-shadow:0 18px 40px rgba(0,0,0,.12);transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.benefits--config .benefits__item--sales::after{content:"";position:absolute;inset:auto -30% -30% auto;width:150px;height:150px;border-radius:50%;background:rgba(255,255,255,.08)}
.benefits--config .benefits__item--sales:hover{transform:translateY(-6px);box-shadow:0 24px 48px rgba(0,0,0,.18);border-color:rgba(255,255,255,.3)}
.benefits--config .benefits__title{min-height:56px}
.footer-navigation:not(.footer-navigation--config){display:none}
.footer-navigation.footer-navigation--config{display:block}
#footer .footer-navigation--config{padding:0 8px}
#footer .footer-navigation--config h4{margin:0 0 18px;font-size:clamp(1.45rem,1.8vw,2rem);line-height:1.12;letter-spacing:.03em;text-transform:uppercase;color:#111}
#footer .footer-navigation--config h4{overflow-wrap:anywhere}
#footer [aria-labelledby="footer-title-services"]{padding-right:22px!important}
#footer .footer-navigation--config p{margin:0 0 14px;color:#2f2f2f;font-size:1rem;line-height:1.68}
#footer .footer-navigation--config ul{margin:0;padding:0;list-style:none}
#footer .footer-navigation--config ul li{margin:0;padding:0;border-bottom:1px solid rgba(34,24,18,.12)}
#footer .footer-navigation--config ul li::before{display:none!important;content:none!important}
#footer .footer-navigation--config ul li a{display:block;padding:10px 0;color:#1b1b1b;font-size:1rem;line-height:1.4;text-decoration:none;transition:color .2s ease,transform .2s ease}
#footer .footer-navigation--config ul li a:hover{color:#a64f1f;transform:translateX(3px)}
#footer .footer-navigation--config .footer-social{display:inline-flex;margin:8px 10px 0 0;border-bottom:0}
#footer .footer-navigation--config .footer-social a{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;padding:0;border-radius:14px;background:#fff;box-shadow:0 10px 24px rgba(0,0,0,.10)}
#footer .footer-navigation--config .footer-social a:hover{transform:translateY(-2px)}
.footer-review-actions{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0 18px}
.footer-review-actions .btn{min-width:220px;text-align:center}
#footer .footer-navigation--config ul[aria-labelledby="footer-navigation-social-media-config"]{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-bottom:0}
#footer .footer-navigation--config ul[aria-labelledby="footer-navigation-social-media-config"]>li.footer-social{margin:0;border-bottom:0}
#footer .footer-navigation--config ul[aria-labelledby="footer-navigation-social-media-config"]>li.footer-social::before{display:none!important;content:none!important}
#footer .footer-navigation--config ul[aria-labelledby="footer-navigation-social-media-config"]>li.footer-social a{color:#fff;background:linear-gradient(135deg,#141414,#8b4d26)}
#mapContainer{position:relative;overflow:hidden;border-top:1px solid rgba(32,23,18,.12);background:#e9ece8;margin:0}
#mapIframe{display:block;min-height:250px;width:100%;border:0;padding-top:0!important;margin:0;filter:saturate(1.02) contrast(1.03)}
.copyr{position:relative;padding:30px 20px 34px;background:linear-gradient(180deg,#726660 0%,#574b45 100%);color:#f7efe9;text-align:center;box-shadow:inset 0 1px 0 rgba(255,255,255,.08);margin-top:0}
.copyr::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:rgba(255,255,255,.12)}
.copyr p{max-width:1320px;margin-left:auto;margin-right:auto;line-height:1.7;color:#f7efe9}
.copyr p:first-child{font-size:1rem;font-weight:700;letter-spacing:.02em}
.copyr p:nth-child(2){display:flex;flex-wrap:wrap;justify-content:center;gap:8px 0;margin-top:12px;margin-bottom:16px}
.copyr p:nth-child(2) a{color:#fff5ee;text-decoration:none;padding:0 12px;border-right:1px solid rgba(255,255,255,.2)}
.copyr p:nth-child(2) a:last-child{border-right:0}
.copyr p:nth-child(2) a:hover{color:#ffd0ae}
.copyr p:last-child{margin-top:16px;margin-bottom:0;max-width:1180px;padding:16px 18px;border-radius:18px;background:rgba(255,255,255,.09);color:#fff7f2;font-size:.98rem;box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
.slimmenu .social-mobil{display:none}
.hero-action--booking{border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.08)}
#mod_schrift_und_kontrast{position:fixed;top:auto;left:18px;bottom:18px;z-index:1200;width:min(360px,calc(100vw - 36px));padding:16px 18px;border-radius:18px;background:rgba(28,22,18,.94);color:#fff;box-shadow:0 18px 44px rgba(0,0,0,.28);backdrop-filter:blur(8px)}
#mod_schrift_und_kontrast.hidden{display:none}
#mod_schrift_und_kontrast .close-btn{position:absolute;top:10px;right:10px;width:36px;height:36px;border:0;border-radius:50%;background:rgba(255,255,255,.12);color:#fff}
#mod_schrift_und_kontrast .mod_schriftgroesse_text,#mod_schrift_und_kontrast .accessibility-title{display:block;margin:0 0 10px;font-weight:700;letter-spacing:.02em}
.accessibility-note{margin:0 0 12px;font-size:13px;color:rgba(255,255,255,.82)}
#fontSizeControls,#kontrast_wechsel{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
#fontSizeControls a,#kontrast_wechsel a{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:0 12px;border-radius:12px;background:#fff;color:#1d1d1d;font-weight:700;text-decoration:none}
#kontrast_wechsel{margin-top:14px}
#kontrast_wechsel::before{content:"Kontrast";flex-basis:100%;font-size:.92rem;font-weight:700;color:rgba(255,255,255,.86)}
.booking-popup-card{display:none;position:fixed;right:20px;bottom:96px;z-index:1190;width:min(360px,calc(100vw - 30px));padding:18px;border-radius:18px;background:linear-gradient(180deg,#fff8ee,#fff);box-shadow:0 18px 48px rgba(0,0,0,.22);border:1px solid rgba(182,91,34,.2)}
.booking-popup-card.is-open{display:block}
.booking-popup-card h3{margin:0 0 8px;font-size:1.1rem}
.booking-popup-card p{margin:0 0 12px;color:#4a3d33}
.booking-popup-actions{display:flex;gap:10px;flex-wrap:wrap}
.booking-popup-close{position:absolute;top:10px;right:10px;border:0;background:transparent;font-size:22px;line-height:1}
.hero-lead--left,.hero-actions--left,.hero-trust--left,.hero-rating-inline{text-align:left}
.hero-note--compact{font-size:.9rem;margin-top:8px}
.hero-trust--left{margin-top:15px;font-size:14px;opacity:.9}
.hero-rating-inline{margin-top:10px;font-size:14px;opacity:.8}
.booking-inline-btn{display:inline-block;margin-bottom:12px}
.popup-katalog-title{margin-bottom:10px}
.popup-katalog-actions{margin:8px 0 16px}
.popup-katalog-checkbox{display:flex;align-items:center;gap:8px;font-size:12px}
@media (max-width:980px){.slimmenu .social-mobil{display:block}}
@media (max-width:720px){#mod_schrift_und_kontrast{left:12px;right:12px;width:auto;bottom:94px}#footer-content{margin:20px auto 0!important}#footer .footer-navigation--config{padding:0;margin-bottom:18px}#footer .footer-navigation--config h4{font-size:1.45rem;margin-bottom:14px}#footer .footer-navigation--config ul[aria-labelledby="footer-navigation-social-media-config"]{gap:10px;margin-bottom:0}.footer-review-actions .btn{width:100%;min-width:0}.haendler + #mapContainer{margin-top:0!important}#mapIframe{min-height:220px}.copyr{padding:24px 14px 26px}.copyr p:nth-child(2){gap:10px 0}.copyr p:nth-child(2) a{padding:0 8px}.copyr p:last-child{padding:14px;font-size:.93rem}.booking-popup-card{right:12px;left:12px;width:auto;bottom:84px}}
.news-accessories-shell{
margin:16px 0 14px;
}
.news-accessories{
padding:16px;
border:1px solid #d8e1ee;
border-radius:18px;
background:linear-gradient(180deg,#fbfdff 0%,#f6f9fd 100%);
box-shadow:0 10px 30px rgba(17,43,87,.06);
}
.news-accessories__title{
margin:0 0 6px;
font-size:18px;
line-height:1.3;
font-weight:800;
color:#12386f;
}
.news-accessories__subtitle{
margin:0 0 14px;
color:#5d6d84;
font-size:13px;
line-height:1.5;
}
.news-accessories__bulk{
display:flex;
gap:10px;
flex-wrap:wrap;
margin:0 0 14px;
}
.news-accessories__bulk .floating-button{
display:flex;
align-items:center;
justify-content:center;
gap:8px;
width:100%;
min-height:46px;
padding:10px 14px;
font-size:13px;
line-height:1.2;
text-align:center;
box-sizing:border-box;
}
.news-accessories__grid{
display:grid;
grid-template-columns:1fr;
gap:14px;
}
.news-accessory-card{
display:grid;
grid-template-columns:88px minmax(0,1fr);
gap:14px;
align-items:start;
padding:16px;
border:1px solid #d9e2ef;
border-radius:18px;
background:#fff;
box-shadow:0 6px 18px rgba(15,44,92,.05);
transition:border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.news-accessory-card:hover{
border-color:#bfd0e6;
box-shadow:0 12px 28px rgba(15,44,92,.09);
transform:translateY(-1px);
}
.news-accessory-card>.item_title,
.news-accessory-card>.item_price,
.news-accessory-card>.item_cleaning,
.news-accessory-card>.item_cleaning_plus,
.news-accessory-card>.cleaning_required,
.news-accessory-card>.item_setting,
.news-accessory-card>.item_setting_plus,
.news-accessory-card>.setting_required,
.news-accessory-card>.item_deposit,
.news-accessory-card>.item_deposit_plus,
.news-accessory-card>.item_discount_qty_1,
.news-accessory-card>.item_percent_discount_qty_1,
.news-accessory-card>.item_discount_qty_2,
.news-accessory-card>.item_percent_discount_qty_2,
.news-accessory-card>.is_mengenartikel,
.news-accessory-card>.is_mengenartikel_stk{
display:none !important;
}
.news-accessory-card__media{
display:flex;
align-items:center;
justify-content:center;
width:88px;
height:88px;
border-radius:14px;
background:#f4f7fb;
overflow:hidden;
border:1px solid #e2e9f3;
}
.news-accessory-card__media img{
width:100%;
height:100%;
object-fit:cover;
display:block;
}
.news-accessory-card__body{
min-width:0;
display:grid;
grid-template-columns:1fr;
gap:10px;
}
.news-accessory-card__select{
display:flex;
align-items:center;
justify-content:flex-end;
gap:8px;
margin:0;
font-size:12px;
font-weight:700;
color:#183d77;
}
.news-accessory-card__select input[type="checkbox"]{
width:18px;
height:18px;
accent-color:#163d7a;
cursor:pointer;
flex:0 0 auto;
}
.news-accessory-card__placeholder{
font-size:13px;
color:#5f6f86;
text-align:center;
padding:0 12px;
}
.news-accessory-card__title{
margin:0;
font-size:17px;
line-height:1.35;
color:#172841;
font-weight:800;
word-break:break-word;
}
.news-accessory-card__subtitle{
margin:0;
font-size:13px;
line-height:1.5;
color:#607087;
}
.news-accessory-card__meta{
display:grid;
grid-template-columns:minmax(0,1fr) auto;
gap:12px;
align-items:center;
margin:0;
}
.news-accessory-card__price{
margin:0;
font-size:18px;
line-height:1.2;
font-weight:800;
color:#0e3a78;
}
.news-accessory-card__price small{
display:block;
margin-top:2px;
font-size:12px;
font-weight:600;
color:#5f6f86;
}
.news-accessory-card__qty{
display:flex;
align-items:center;
gap:8px;
margin:0;
flex-wrap:nowrap;
}
.news-accessory-card__qty-label{
font-size:12px;
font-weight:700;
color:#1f2a44;
white-space:nowrap;
}
.news-accessory-card__qty-btn{
width:34px;
height:34px;
border:1px solid #bfd0e6;
border-radius:10px;
background:#ffffff;
color:#163d7a;
font-size:18px;
line-height:1;
cursor:pointer;
padding:0;
display:flex;
align-items:center;
justify-content:center;
transition:background .2s ease,border-color .2s ease,transform .15s ease;
}
.news-accessory-card__qty-btn:hover{
background:#f4f8fd;
border-color:#9fb8da;
}
.news-accessory-card__qty-btn:active{
transform:scale(.97);
}
.news-accessory-card__qty-btn[disabled]{
opacity:.45;
cursor:not-allowed;
}
.news-accessory-card__qty-input{
min-width:46px;
min-height:34px;
padding:6px 8px;
border:1px solid #bfd0e6;
border-radius:10px;
background:#f8fbff;
text-align:center;
font-weight:800;
font-size:14px;
color:#163d7a;
box-sizing:border-box;
display:flex;
align-items:center;
justify-content:center;
}
.news-accessory-card__qty-input[contenteditable="true"]{
cursor:text;
}
.news-accessory-card__qty-input[contenteditable="false"]{
opacity:.65;
}
.news-accessory-card__actions{
display:grid;
grid-template-columns:1fr;
gap:10px;
align-items:stretch;
}
.news-accessory-card__button,
.news-accessory-card .floating-button.news-accessory-card__button,
span.floating-button.my_catalog_add_item.center.news-accessory-card__button{
grid-column:1 / -1;
display:flex;
align-items:center;
justify-content:center;
gap:10px;
width:100%;
min-height:48px;
box-sizing:border-box;
text-align:center;
padding:12px 16px;
font-size:14px;
line-height:1.2;
white-space:nowrap;
border-radius:14px;
}
.news-accessory-card__button i,
.news-accessory-card .floating-button.news-accessory-card__button i{
display:flex;
align-items:center;
justify-content:center;
font-size:15px;
line-height:1;
}
.news-accessory-card .floating-button{
display:flex;
align-items:center;
justify-content:center;
gap:8px;
width:100%;
box-sizing:border-box;
text-align:center;
padding:12px 16px;
font-size:14px;
line-height:1.2;
border-radius:14px;
}
.news-accessory-card__link-direct{
grid-column:1 / -1;
}
.news-accessory-card__link{
display:flex;
align-items:center;
justify-content:center;
width:100%;
min-height:46px;
padding:11px 14px;
border:1px solid #cfd9ea;
border-radius:14px;
background:#fff;
color:#163d7a;
text-decoration:none;
font-weight:700;
font-size:13px;
line-height:1.2;
box-sizing:border-box;
transition:background .2s ease,border-color .2s ease,color .2s ease;
}
.news-accessory-card__link:hover{
text-decoration:none;
background:#f3f8ff;
border-color:#b5c9e4;
color:#0f3268;
}
.news-accessory-card__hint{
margin:0;
font-size:12px;
line-height:1.45;
color:#6a7890;
}
.news-accessory-card__top{
display:grid;
grid-template-columns:minmax(0,1fr) auto;
gap:10px;
align-items:start;
}
.news-accessory-card__content{
display:grid;
gap:8px;
}
@media (max-width:900px){
.news-accessory-card{
grid-template-columns:72px minmax(0,1fr);
gap:12px;
padding:14px;
}
.news-accessory-card__media{
width:72px;
height:72px;
}
.news-accessory-card__title{
font-size:15px;
}
.news-accessory-card__price{
font-size:16px;
}
}
@media (max-width:700px){
.news-accessories-shell{
margin-top:10px;
}
.news-accessories{
padding:12px;
border-radius:16px;
}
.news-accessories__title{
font-size:16px;
}
.news-accessories__subtitle{
font-size:12px;
margin-bottom:12px;
}
.news-accessory-card{
grid-template-columns:1fr;
gap:12px;
padding:12px;
border-radius:16px;
}
.news-accessory-card__media{
width:100%;
height:180px;
max-width:none;
}
.news-accessory-card__body{
gap:10px;
}
.news-accessory-card__top{
grid-template-columns:1fr;
gap:8px;
}
.news-accessory-card__select{
justify-content:flex-start;
order:-1;
}
.news-accessory-card__title{
font-size:15px;
}
.news-accessory-card__subtitle{
font-size:12px;
}
.news-accessory-card__meta{
grid-template-columns:1fr;
gap:10px;
align-items:start;
}
.news-accessory-card__price{
font-size:17px;
}
.news-accessory-card__qty{
justify-content:flex-start;
flex-wrap:wrap;
}
.news-accessory-card__qty-label{
width:100%;
}
.news-accessory-card__actions{
grid-template-columns:1fr;
}
.news-accessory-card__button,
.news-accessory-card__link-direct{
grid-column:1 / -1;
}
.news-accessory-card__button,
.news-accessory-card .floating-button.news-accessory-card__button,
span.floating-button.my_catalog_add_item.center.news-accessory-card__button,
.news-accessory-card__link{
min-height:44px;
font-size:13px;
padding:11px 14px;
white-space:normal;
}
}
@media (max-width:480px){
.news-accessories{
padding:10px;
}
.news-accessory-card{
padding:10px;
gap:10px;
}
.news-accessory-card__media{
height:150px;
border-radius:12px;
}
.news-accessory-card__title{
font-size:14px;
}
.news-accessory-card__price{
font-size:16px;
}
.news-accessory-card__qty{
gap:6px;
}
.news-accessory-card__qty-btn{
width:32px;
height:32px;
border-radius:9px;
}
.news-accessory-card__qty-input{
min-width:42px;
min-height:32px;
font-size:13px;
}
.news-accessory-card__button,
.news-accessory-card .floating-button.news-accessory-card__button,
span.floating-button.my_catalog_add_item.center.news-accessory-card__button,
.news-accessory-card__link{
font-size:12px;
border-radius:12px;
}
}
@media (max-width:768px){
#wrapper{
padding-top:72px;
}
#header-wrapper,
#logor{
display:block!important;
}
body #page,
body #topimg,
body .wrapper > .row:first-child{
margin-top:0!important;
}
}
@media only screen and (max-width:600px){
#logor{
margin:8px 12px 10px!important;
padding:0!important;
}
}
@media (max-width:768px){
body.is-homepage #biIntro + .large-12.columns.haendler{
float:none!important;
width:100%!important;
height:0!important;
min-height:0!important;
margin:0!important;
padding:0!important;
overflow:visible!important;
}
body.is-homepage .content.show,
body.is-homepage .tophead,
body.is-homepage #menu-wrapper{
margin-top:0!important;
padding-top:0!important;
top:0!important;
}
body.is-homepage #wrapper{
padding-top:72px!important;
}
}
.partner-context-block{
margin:36px 0;
padding:24px;
border:1px solid rgba(15,23,42,.08);
border-radius:22px;
background:linear-gradient(180deg,#ffffff 0%,#f8fbff 100%);
box-shadow:0 18px 42px rgba(15,23,42,.06);
}
.partner-context-block__header{
margin-bottom:18px;
}
.partner-context-block__title{
margin:0 0 8px;
color:#16324a;
font-size:1.55rem;
line-height:1.18;
}
.partner-context-block__lead{
margin:0;
color:#4c5e70;
line-height:1.65;
}
.partner-card-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:16px;
}
.partner-card{
min-width:0;
}
.partner-card__inner{
height:100%;
}
.partner-card__inner a,
.partner-list__item a,
.partner-item a{
display:flex;
align-items:center;
justify-content:center;
gap:12px;
min-height:92px;
padding:16px 18px;
border:1px solid rgba(37,99,235,.08);
border-radius:18px;
background:#fff;
text-decoration:none;
transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;
}
.partner-card__inner a:hover,
.partner-list__item a:hover,
.partner-item a:hover{
transform:translateY(-2px);
border-color:rgba(37,99,235,.22);
box-shadow:0 12px 28px rgba(15,23,42,.08);
}
.partner-card__inner img,
.partner-list__item img,
.partner-item img{
max-width:100%;
max-height:52px;
width:auto;
height:auto;
object-fit:contain;
}
.partner-item__title{
color:#18324d;
font-weight:700;
line-height:1.4;
text-align:center;
}
.partner-item__title--textonly{
display:block;
}
.partner-list{
list-style:none;
margin:0;
padding:0;
display:grid;
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:16px;
}
.partner-list__item{
margin:0;
}
@media screen and (max-width: 767px){
.partner-context-block{
margin:26px 0;
padding:18px;
border-radius:18px;
}
.partner-context-block__title{
font-size:1.3rem;
}
.partner-card-grid,
.partner-list{
grid-template-columns:1fr;
gap:12px;
}
.partner-card__inner a,
.partner-list__item a,
.partner-item a{
min-height:82px;
padding:14px;
}
}
/* Mobile Stabilisierung fuer Xiaomi / Redmi und aehnliche Android-Geraete */
html{
-webkit-text-size-adjust:100%;
text-size-adjust:100%;
}
body{
overflow-x:hidden;
}
img,
iframe,
video,
canvas,
svg{
max-width:100%;
height:auto;
}
.content-wrapper,
.container,
.inner-container,
.wrapper,
.content,
main,
article,
section,
.block-left,
.block-right,
.footer-row,
.tophead,
#wrapper,
#header,
#header-wrapper{
box-sizing:border-box;
max-width:100%;
}
table,
.tables,
.table-responsive{
display:block;
max-width:100%;
overflow-x:auto;
-webkit-overflow-scrolling:touch;
}
pre{
max-width:100%;
overflow-x:auto;
-webkit-overflow-scrolling:touch;
}
p,
li,
a,
span,
strong,
em,
small,
h1,
h2,
h3,
h4,
h5,
h6{
overflow-wrap:anywhere;
word-wrap:break-word;
}
@media (max-width:768px){
body{
font-size:.98rem;
}
#wrapper,
#header,
#header-wrapper,
.tophead,
.content,
main,
article,
.footer-row{
padding-left:0 !important;
padding-right:0 !important;
}
.block-left,
.block-right,
.sidebar,
.sidebar_left,
.sidebar_right,
.contentblockcat,
.contentblock,
.contentblockcat1{
float:none !important;
width:100% !important;
max-width:100% !important;
margin-left:0 !important;
margin-right:0 !important;
}
}
@media (max-width:768px){
body.is-subpage #topimg,
body.is-subpage .bgslider1,
body.is-subpage .bgslider1 .slider-head,
body.is-subpage .bgslider1 .slider-head section,
body.is-subpage .bgslider1 .slider-head .row,
body.is-subpage .bgslider1 .slider-head .col-12{
background:#f6f1eb !important;
background-image:none !important;
box-shadow:none !important;
}
body.is-subpage .bgslider1{
border-bottom:1px solid #e4d8ca;
}
body.is-subpage .bgslider1 .slider-head section{
margin:0 auto;
padding-top:18px;
padding-bottom:16px;
}
body.is-subpage .bgslider1 section h1,
body.is-subpage .slider-head section h1{
color:#2f241d !important;
text-shadow:none !important;
}
body.is-subpage .bgslider1 section p,
body.is-subpage .slider-head section p,
body.is-subpage .bgslider1 .breadcrumb,
body.is-subpage .bgslider1 .breadcrumb [aria-current="page"]{
color:#4d4037 !important;
text-shadow:none !important;
}
body.is-subpage .bgslider1 .breadcrumb{
background:rgba(255,255,255,.9);
border:1px solid #e8ddd1;
}
}
@media (max-width:768px){
#header,
#header-wrapper{
min-height:0 !important;
margin-top:0 !important;
padding-top:0 !important;
}
body.is-subpage #wrapper,
body.is-subpage #header,
body.is-subpage #header-wrapper{
margin-top:0 !important;
padding-top:0 !important;
}
#logor{
margin:0 12px 8px !important;
padding:0 !important;
}
body.is-homepage #logor{
margin:0 12px 8px !important;
padding-top:0 !important;
}
body.is-subpage #logor{
margin:64px 12px 8px !important;
padding-top:0 !important;
}
body.is-subpage .post .entry,
body.is-subpage .content_container,
body.is-subpage .container{
padding-top:0 !important;
margin-top:0 !important;
}
body.is-subpage .breadcrumb{
margin-bottom:6px !important;
}
body.is-subpage .block-left{
margin:12px 0 14px !important;
padding:0 !important;
background:#f7f3ee !important;
border:1px solid #e6d9ca;
border-radius:18px;
box-shadow:0 10px 26px rgba(57,38,24,.10);
}
body.is-subpage .block-left h2.widget-title{
padding:14px 16px 10px;
background:transparent !important;
color:#36261d !important;
font-size:1rem;
text-align:center;
border-radius:0;
}
body.is-subpage .contentblockcat{
max-height:220px;
margin:0 12px;
padding:10px 8px 8px;
background:#fffdfa !important;
border:1px solid #eadfce;
border-radius:14px;
overflow:auto;
opacity:1;
transition:max-height .28s ease, padding .22s ease, opacity .22s ease;
}
body.is-subpage .contentblockcat > ul > li > ul{
display:none;
}
body.is-subpage .contentblockcat.show-subcategories > ul > li > ul{
display:block;
}
body.is-subpage .block-left.is-large .contentblockcat,
body.is-subpage .contentblockcat.is-full-height{
max-height:68vh;
}
body.is-subpage .block-left ul{
gap:0;
}
body.is-subpage .block-left ul li{
margin:4px 0;
padding-left:12px;
}
body.is-subpage .block-left ul li::before{
top:13px;
width:6px;
height:6px;
background:#7aa7eb;
opacity:1;
}
body.is-subpage .block-left ul ul{
margin:6px 0 8px 8px;
padding-left:10px;
border-left:1px solid #ddd3c7;
}
body.is-subpage .block-left ul li a{
padding:11px 12px;
border-radius:12px;
background:#4f4945;
color:#fff !important;
font-size:.95rem;
line-height:1.35;
box-shadow:none;
}
body.is-subpage .block-left ul li a:hover,
body.is-subpage .block-left ul li a:focus{
background:#3f3936;
color:#fff !important;
}
body.is-subpage .contentblockcat a.active{
background:#8f2500 !important;
color:#fff !important;
}
body.is-subpage .block-left #toggle-button{
display:block;
width:calc(100% - 24px);
margin:10px 12px 8px;
padding:11px 14px;
border:1px solid #d8c8b7;
border-radius:14px;
background:#fff;
color:#5a321d;
font-size:.95rem;
font-weight:700;
box-shadow:0 6px 18px rgba(57,38,24,.08);
}
body.is-subpage .block-left .mobile-category-size-toggle{
display:block;
width:calc(100% - 24px);
margin:0 12px 12px;
padding:10px 14px;
border:1px solid #cbb8a4;
border-radius:14px;
background:#f5ece2;
color:#5a321d;
font-size:.92rem;
font-weight:700;
box-shadow:none;
}
}
/* Codex 2026-07-14: Unterseiten-Hero-Titel auf dunklem Katalogkopf lesbar halten. */
@media (min-width:769px){
body.is-subpage .bgslider1 section h1,
body.is-subpage .slider-head section h1{
color:#fff !important;
text-shadow:0 3px 16px rgba(0,0,0,.55) !important;
}
body.is-subpage .bgslider1 section h1:hover,
body.is-subpage .slider-head section h1:hover{
color:#fff7ed !important;
}
}
/* Codex 2026-07-26: Aktionskarten stabil halten, Zubehördaten in Listen layout-neutral halten. */
.horizontal-scroll-container > .thema {
flex: 0 0 clamp(280px, 31vw, 420px);
width: clamp(280px, 31vw, 420px);
min-width: 280px;
max-width: 420px;
white-space: normal;
}
.horizontal-scroll-container > .thema .thema-container,
.horizontal-scroll-container > .thema .thema-container > div {
min-width: 0;
max-width: 100%;
}
.thema .news-accessories-slot,
.thema .news-accessories-slot[hidden] {
display: none !important;
width: 0 !important;
height: 0 !important;
max-width: 0 !important;
max-height: 0 !important;
overflow: hidden !important;
visibility: hidden !important;
}
.thema .item_box:not(.news-accessory-card) {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
gap: 8px;
min-width: 0;
max-width: 100%;
white-space: normal;
}
.thema .item_box:not(.news-accessory-card) > div,
.thema .item_box:not(.news-accessory-card) > button#checkout {
display: none !important;
}
@media (max-width: 700px) {
.horizontal-scroll-container > .thema {
flex-basis: min(86vw, 340px);
width: min(86vw, 340px);
min-width: min(86vw, 280px);
}
}
/* Codex 2026-07-26: Startseiten-Aktionskarten einheitlich breit und layoutstabil. */
body.is-homepage #scrollContainer.horizontal-scroll-container {
display: flex !important;
align-items: stretch !important;
gap: clamp(22px, 4vw, 56px) !important;
overflow-x: auto !important;
overflow-y: visible !important;
scroll-snap-type: x proximity;
padding: 28px 14px 34px !important;
}
body.is-homepage #scrollContainer.horizontal-scroll-container > .thema {
flex: 0 0 360px !important;
width: 360px !important;
min-width: 360px !important;
max-width: 360px !important;
float: none !important;
display: flex !important;
align-items: stretch !important;
scroll-snap-align: start;
box-sizing: border-box !important;
}
body.is-homepage #scrollContainer.horizontal-scroll-container > .thema .thema-container {
width: 100% !important;
min-width: 0 !important;
max-width: 100% !important;
display: flex !important;
flex-direction: column !important;
overflow: hidden !important;
box-sizing: border-box !important;
}
body.is-homepage #scrollContainer.horizontal-scroll-container > .thema .thema-container > div,
body.is-homepage #scrollContainer.horizontal-scroll-container > .thema .product-name,
body.is-homepage #scrollContainer.horizontal-scroll-container > .thema .product-img,
body.is-homepage #scrollContainer.horizontal-scroll-container > .thema .product-price,
body.is-homepage #scrollContainer.horizontal-scroll-container > .thema .item_box:not(.news-accessory-card) {
width: 100% !important;
min-width: 0 !important;
max-width: 100% !important;
box-sizing: border-box !important;
}
body.is-homepage #scrollContainer.horizontal-scroll-container > .thema .product-img img {
width: 100% !important;
max-width: 100% !important;
height: 220px !important;
object-fit: cover !important;
display: block !important;
}
body.is-homepage #scrollContainer.horizontal-scroll-container > .thema .product-name,
body.is-homepage #scrollContainer.horizontal-scroll-container > .thema .product-name a {
overflow-wrap: anywhere;
word-break: normal;
}
@media (max-width: 720px) {
body.is-homepage #scrollContainer.horizontal-scroll-container {
gap: 16px !important;
padding: 18px 10px 24px !important;
}
body.is-homepage #scrollContainer.horizontal-scroll-container > .thema {
flex-basis: min(86vw, 340px) !important;
width: min(86vw, 340px) !important;
min-width: min(86vw, 340px) !important;
max-width: min(86vw, 340px) !important;
}
body.is-homepage #scrollContainer.horizontal-scroll-container > .thema .product-img img {
height: 190px !important;
}
}
/* Codex 2026-07-26: Direkte Slider-Regel, damit Aktionskarten nicht unterschiedlich breit werden. */
#scrollContainer.horizontal-scroll-container {
width: 100% !important;
max-width: 100% !important;
display: flex !important;
flex-flow: row nowrap !important;
align-items: stretch !important;
justify-content: flex-start !important;
gap: 28px !important;
overflow-x: auto !important;
overflow-y: hidden !important;
white-space: normal !important;
box-sizing: border-box !important;
padding: 30px 18px 36px !important;
}
#scrollContainer.horizontal-scroll-container > .thema,
#scrollContainer.horizontal-scroll-container > .thema.alignleft {
float: none !important;
clear: none !important;
display: flex !important;
flex: 0 0 360px !important;
width: 360px !important;
min-width: 360px !important;
max-width: 360px !important;
margin: 0 !important;
box-sizing: border-box !important;
}
#scrollContainer.horizontal-scroll-container > .thema .thema-container {
width: 100% !important;
min-width: 0 !important;
max-width: 100% !important;
height: 100% !important;
display: flex !important;
flex-direction: column !important;
overflow: hidden !important;
box-sizing: border-box !important;
}
#scrollContainer.horizontal-scroll-container > .thema .thema-container > div,
#scrollContainer.horizontal-scroll-container > .thema .product-name,
#scrollContainer.horizontal-scroll-container > .thema .product-img,
#scrollContainer.horizontal-scroll-container > .thema .product-price,
#scrollContainer.horizontal-scroll-container > .thema .item_box:not(.news-accessory-card) {
width: 100% !important;
min-width: 0 !important;
max-width: 100% !important;
box-sizing: border-box !important;
}
#scrollContainer.horizontal-scroll-container > .thema .product-img img {
width: 100% !important;
max-width: 100% !important;
height: 220px !important;
object-fit: cover !important;
display: block !important;
}
#scrollContainer.horizontal-scroll-container > .thema .product-name,
#scrollContainer.horizontal-scroll-container > .thema .product-name a {
white-space: normal !important;
overflow-wrap: anywhere !important;
}
@media (max-width: 720px) {
#scrollContainer.horizontal-scroll-container {
gap: 16px !important;
padding: 18px 10px 24px !important;
}
#scrollContainer.horizontal-scroll-container > .thema,
#scrollContainer.horizontal-scroll-container > .thema.alignleft {
flex-basis: min(86vw, 340px) !important;
width: min(86vw, 340px) !important;
min-width: min(86vw, 340px) !important;
max-width: min(86vw, 340px) !important;
}
#scrollContainer.horizontal-scroll-container > .thema .product-img img {
height: 190px !important;
}
}
/* Codex 2026-07-26: Aktionsbereich als stabiles 3-Spalten-Grid statt bildabhaengiger Float-/Slider-Breiten. */
.bi-actions-grid#scrollContainer.horizontal-scroll-container {
width: min(1180px, 100%) !important;
margin: 28px auto 34px !important;
padding: 0 !important;
display: grid !important;
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
gap: 28px !important;
overflow: visible !important;
white-space: normal !important;
align-items: stretch !important;
justify-content: center !important;
box-sizing: border-box !important;
}
.bi-actions-grid#scrollContainer.horizontal-scroll-container > .thema,
.bi-actions-grid#scrollContainer.horizontal-scroll-container > .thema.alignleft {
float: none !important;
clear: none !important;
width: 100% !important;
min-width: 0 !important;
max-width: none !important;
height: auto !important;
margin: 0 !important;
display: flex !important;
flex: none !important;
box-sizing: border-box !important;
}
.bi-actions-grid#scrollContainer.horizontal-scroll-container > .thema .thema-container {
width: 100% !important;
min-width: 0 !important;
max-width: 100% !important;
height: 100% !important;
display: flex !important;
flex-direction: column !important;
overflow: hidden !important;
box-sizing: border-box !important;
}
.bi-actions-grid#scrollContainer.horizontal-scroll-container > .thema .thema-container > div,
.bi-actions-grid#scrollContainer.horizontal-scroll-container > .thema .product-name,
.bi-actions-grid#scrollContainer.horizontal-scroll-container > .thema .product-img,
.bi-actions-grid#scrollContainer.horizontal-scroll-container > .thema .product-price,
.bi-actions-grid#scrollContainer.horizontal-scroll-container > .thema .item_box:not(.news-accessory-card) {
width: 100% !important;
min-width: 0 !important;
max-width: 100% !important;
box-sizing: border-box !important;
}
.bi-actions-grid#scrollContainer.horizontal-scroll-container > .thema .product-img {
height: 220px !important;
overflow: hidden !important;
}
.bi-actions-grid#scrollContainer.horizontal-scroll-container > .thema .product-img img {
width: 100% !important;
max-width: 100% !important;
height: 220px !important;
object-fit: cover !important;
display: block !important;
}
.bi-actions-grid#scrollContainer.horizontal-scroll-container > .thema .product-name,
.bi-actions-grid#scrollContainer.horizontal-scroll-container > .thema .product-name a {
white-space: normal !important;
overflow-wrap: anywhere !important;
}
.bi-actions-grid#scrollContainer.horizontal-scroll-container + .scroll-arrow,
.scroll-container:has(.bi-actions-grid) > .scroll-arrow {
display: none !important;
}
@media (max-width: 1050px) {
.bi-actions-grid#scrollContainer.horizontal-scroll-container {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
width: min(760px, 100%) !important;
gap: 22px !important;
}
}
@media (max-width: 680px) {
.bi-actions-grid#scrollContainer.horizontal-scroll-container {
grid-template-columns: 1fr !important;
width: min(360px, 100%) !important;
gap: 18px !important;
}
.bi-actions-grid#scrollContainer.horizontal-scroll-container > .thema .product-img,
.bi-actions-grid#scrollContainer.horizontal-scroll-container > .thema .product-img img {
height: 190px !important;
}
}
/* Codex 2026-07-26: Wrapperklasse fuer Aktionsgrid, Sliderpfeile im Grid ausblenden. */
.bi-actions-wrap > .scroll-arrow {
display: none !important;
}