/* Kein Abstand für den Rahmen "Abstand oben" */
.frame-space-before-none {
margin-top: 0 !important;
}
/* navbar */
.nav-link-text {
text-transform: uppercase;
}
.lang-icon-nav {
margin-left: 10px !important;
margin-bottom: 6px !important;
}
.lang-icon-nav a:hover {
}
/* footer */
footer {
border-top: 1px #ccc solid;
}
.footer-section-meta,
.footer-section-content {
background: var(--bs-primary);
--frame-color: #ffffff;
--frame-background: var(--bs-primary);
--frame-link-color: white;
--frame-link-hover-color: #ccc;
}
footer {
color: white;
}
footer ul {
list-style: none;
padding-left: 0;
}
footer .footer-section-content a:not(.btn),
footer .footer-section-meta a:not(.btn) {
color: white;
}
footer .footer-section-content .footer-copyright {
font-size: 14px;
}
footer ul li a {
color: white !important;
}
.footer-copyright {
color: white;
}
/* Überschriften */
h1 {
text-transform: uppercase;
color: var(--bs-secondary);
font-weight: 600;
}
h2, .h2,
.h3 a span {
text-transform: uppercase;
color: var(--bs-secondary);
font-weight: 600;
}
.h3 a:hover {
text-decoration: none;
}
.h3 {
text-transform: uppercase;
color: var(--bs-primary);
font-weight: 600;
}
.frame-secondary_hcolor .h3,
.frame-secondary_hcolor h3{
color: var(--bs-secondary);
}
/* Buttons */
.btn.btn-link-mailto {
border: none;
color: white;
text-transform: uppercase;
padding: 15px 30px;
font-size: 1.4rem;
}
/* Texte */
.text-justify {
text-align: justify;
hyphens: auto;
-webkit-hyphens: auto;
}
/* mountain shape */
.mountain-shape-wrapper.light-blue {
background-color: #57A7DA;
}
.mountain-shape-wrapper.dark-blue {
background-color: #3363D1;
}
.mountain-shape-wrapper.white {
background-color: #fff;
}
.mountain-shape-wrapper svg {
height: 61px;
width: 100%;
}
.mountain-shape-wrapper.light-blue .mountain-shape-fill {
fill: white;
}
.fill-white {
fill: white !important;
}
.mountain-shape-wrapper.dark-blue .mountain-shape-fill {
fill: #57A7DA;
}
.mountain-shape-wrapper.white .mountain-shape-fill {
fill: #3363D1;
}
/* Radwasch Beschreibungen */
.frame-machine_sections {
color: white;
}
#c3962 {
color: black;
}
#c3962 h3 {
color: #57A7DA;
}
#c3949, #c4047, #c4048 {
background-color: #57A7DA;
}
#c3959 {
background-color: #3363D1;
}
.frame-machine_sections .table > :not(caption) > * > * {
background-color: transparent;
color: white;
}
.frame-machine_sections a {
color: white !important;
display: inline-flex;
align-items: center; /* Zentriert Icon und Text vertikal */
gap: 8px; /* Abstand zwischen Icon und Text */
text-decoration: none !important;
}
.frame-machine_sections a[href$='.pdf']::before {
content: "";
display: inline-block;
width: 30px;
height: 40px;
margin-right: 6px;
background-color: white; /* Beliebige Farbe hier steuerbar */
-webkit-mask-image: url('data:image/svg+xml;utf8,');
mask-image: url('data:image/svg+xml;utf8,');
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
.frame-machine_sections .list-check>li:before {
filter: brightness(0) invert(1);
}
#c3962 .list-check>li:before {
filter: brightness(0) invert(61%) sepia(26%) saturate(1637%) hue-rotate(170deg) brightness(94%) contrast(92%);
}
/* Machine Cards */
.frame-machine_cards .contentcontainer {
display: flex !important;
flex-direction: row;
flex-wrap: nowrap;
justify-content: center;
gap: 20px;
}
.frame-machine_cards .contentcontainer-column {
display: flex;
flex-direction: column;
border: 1px solid #ccc;
border-radius: 20px;
padding-top: 20px;
}
.frame-machine_cards .contentcontainer-column[data-container-column="left"] {
flex: 1;
}
.frame-machine_cards .contentcontainer-column[data-container-column="middle"] {
flex: 1.05; /* Leicht breiter als links */
}
.frame-machine_cards .contentcontainer-column[data-container-column="right"] {
flex: 1.4; /* Deutlich breiter für die Tandem-Maschine */
}
.frame-machine_cards .contentcontainer-column .frame-type-image {
display: flex;
flex-grow: 1;
justify-content: center;
background-color: #eee;
padding-bottom: 20px;
border-radius: 0 0 20px 20px;
}
.frame-machine_cards .contentcontainer-column .frame-type-image div,
.frame-machine_cards .contentcontainer-column .frame-type-image figure,
.frame-machine_cards .contentcontainer-column .frame-type-image a, {
display: contents;
}
/* 4. Das -Tag als intakten Flex-Container definieren */
.frame-machine_cards .contentcontainer-column .frame-type-image picture {
display: flex;
flex-grow: 1;
width: 100%;
}
.frame-machine_cards .contentcontainer-column .frame-type-image img {
width: 100%;
object-fit: contain;
height: 15vw;
min-height: 150px;
}
@media (max-width: 768px) {
.frame-machine_cards .contentcontainer {
flex-direction: column !important; /* Zwingt alle Spalten gleichzeitig untereinander */
gap: 100px;
}
.frame-machine_cards .contentcontainer-column .frame-type-image img {
height: auto;
max-height: 400px; /* Begrenzt die Höhe auf mobilen Geräten */
}
}
/* Bilder "Felgenreparaturspezialisten" */
#c4000 img {
width: 50%;
}
/* ul inline frame */
.frame-ul_inline ul {
display: flex;
list-style: none; /* Entfernt die Listenpunkte */
padding: 0;
margin: 0;
gap: 1rem; /* Abstand zwischen den Elementen */
}
/* frame space no_spacing */
.frame-space-before-no_spacing {
padding-top: 0 !important;
}
/* frame link icons */
a.pdf-icon[href$='.pdf']::before {
content: "";
display: inline-block;
width: 30px;
height: 40px;
margin-right: 6px;
background-color: white; /* Beliebige Farbe hier steuerbar */
-webkit-mask-image: url('data:image/svg+xml;utf8,');
mask-image: url('data:image/svg+xml;utf8,');
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
a.external-icon,
a.pdf-icon {
display: inline-flex;
align-items: center; /* Zentriert Icon und Text vertikal */
gap: 8px; /* Abstand zwischen Icon und Text */
text-decoration: none !important;
}
a.external-icon::before {
content: "";
display: inline-block;
width: 30px;
height: 40px;
margin-right: 6px;
background-color: white; /* Beliebige Farbe hier steuerbar */
-webkit-mask-image: url('data:image/svg+xml;utf8,');
mask-image: url('data:image/svg+xml;utf8,');
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
a.icon-secondary::before {
background-color: var(--bs-secondary) !important;
}
/* Beschreibungen Startseite */
#c3990 .contentcontainer-column,
#c3993 .contentcontainer-column {
border: 1px solid #eee;
border-radius: 20px;
padding: 0px 20px 20px 20px;
}
#c3983, #c3997, #c4078 {
background-color: #eee;
}
#c4077 {
padding-top: 2.5rem;
}
/* Kundenstimmen */
.frame-customer_opinion {
border: 1px solid #eee;
border-radius: 20px;
padding: 20px 20px !important;
}
.frame-customer_opinion p:first-child {
background-color: var(--bs-secondary);
padding: 20px 20px;
border-radius: 10px;
color: white;
font-style: italic;
}
/* Media Overlay */
.media-container {
position: relative;
display: inline-block; /* Sorgt dafür, dass der Container exakt das Iframe umschließt */
max-width: 100%;
}
.media-container iframe {
display: block;
max-width: 100%;
/* Keine feste Höhe im CSS – das Iframe nutzt seine HTML-Attribute (height="1124") */
}
/* Das Overlay legt sich passgenau über das Iframe */
.media-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: auto;
aspect-ratio: 16 / 9;
background: rgba(240, 240, 240, 0.95);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
padding: 20px;
z-index: 10;
}
/* Overlay ausblenden, sobald das Iframe geladen wird */
.media-container iframe[src] ~ .media-overlay {
display: none;
}
/* cookie button */
.cc-floating-btn {
position: fixed;
bottom: 20px;
left: 20px; /* Oder rechts, passend zum Layout */
background: #009ee0;
color: white;
border: none;
border-radius: 50%;
width: 50px;
height: 50px;
cursor: pointer;
z-index: 9999;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
display: flex;
align-items: center;
justify-content: center;
transition: transform 0.2s;
}
.cc-floating-btn:hover {
transform: scale(1.1);
}