html {
scroll-behavior: smooth;
scroll-padding-block-start: 90px;
}
#cms_template {
display: flex;
flex-direction: column;
min-height: 100vh;
position: relative;
z-index: 1;
}
::-webkit-scrollbar {
width: 15px;
}
::-webkit-scrollbar-track {
background: var(--locolor, #454545);
}
::-webkit-scrollbar-thumb {
background-color: var(--bgcolor, #212121);
border-radius: 10px;
border: 2px solid var(--locolor, #454545);
cursor: grab;
}
::-webkit-scrollbar-thumb:hover {
border: 1px solid var(--color, #212121);
}
@keyframes skeleton-loading {
0% {
background-color: hsl(200, 20%, 70%);
}
100% {
background-color: hsl(200, 20%, 95%);
}
}
#cms_uppermenu, #cms_lowermenu {
z-index: calc(var(--cms30-header-z-index, 10) + 1) !important;
}
body:has(.cms30-header .submenu.vertical.visible) {
overflow: hidden;
pointer-events: none;
}
.cms30-header .submenu.vertical.visible {
pointer-events: auto;
}
.cms30-back-top {
bottom: var(--cms30-to-top-bottom, 5%);
right: var(--cms30-to-top-right, 5%);
color: var(--cms30-to-top-color, var(--bgcolor)) !important;
background-color: var(--cms30-to-top-bgcolor, var(--color)) !important;
transition: all 0.3s ease;
border: var(--cms30-to-top-border-width, 0px) var(--cms30-to-top-border-style, solid) var(--cms30-to-top-border-color, var(--color));
border-radius: var(--cms30-to-top-border-radius, 50%);
}
.cms30-back-top svg{
stroke-width: 1.5;
flex-shrink: 0;
height: var(--cms30-to-top-height, 2.5rem);
width: var(--cms30-to-top-width, 2.5rem);
display: block;
vertical-align: middle;
}
.cms30-back-top.fixed {
position: fixed;
opacity: 0;
display: none;
}
.cms30-back-top.fixed.visible {
display: block;
opacity: 1;
}
.cms30-header {
display: var(--cms30-header-display, flex) !important;
flex-direction: var(--cms30-header-flex-direction, row);
flex-wrap: var(--cms30-header-flex-wrap, nowrap) !important;
justify-content: var(--cms30-header-justify-content, space-between);
align-items: var(--cms30-header-align-items, center);
position: var(--cms30-header-position, sticky);
z-index: var(--cms30-header-z-index, 10);
top: var(--cms30-header-top, 0);
left: 0;
right: 0;
box-sizing: border-box;
width: 100vw;
max-width: 100%;
height: var(--cms30-header-height, auto);
max-height: var(--cms30-header-height, auto);
padding: var(--cms30-header-padding-t, 1rem)
calc(max(0px, (100% - var(--cms30-header-max-width, var(--content-width, 100%))) / 2) + var(--cms30-header-padding-r, 1rem))
var(--cms30-header-padding-b, 1rem)
calc(max(0px, (100% - var(--cms30-header-max-width, var(--content-width, 100%))) / 2) + var(--cms30-header-padding-l, 1rem));
margin: var(--cms30-header-margin-t, 0) auto var(--cms30-header-margin-b, 0);
box-shadow: 0px 4px 10px 0px color-mix(in srgb, var(--cms30-header-box-shadow-color, transparent) var(--cms30-header-box-shadow-opacity, 20%), transparent);
border-radius: var(--cms30-header-border-radius, 0px);
border-bottom: var(--cms30-header-border-width, 0px) var(--cms30-header-border-style, solid) var(--cms30-header-border-color, transparent);
background-color: var(--cms30-header-bg-gradient, var(--solid-bg)) !important;
--gradient-bg: linear-gradient(to var(--cms30-header-gradient-direction, right), var(--cms30-header-gradient-color-start, var(--bgcolor)), var(--cms30-header-gradient-color-end, var(--bgcolor2) ));
--solid-bg: var(--cms30-header-bgcolor, var(--bgcolor));
}
.cms30-header:before{
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
backdrop-filter: blur(var(--cms30-header-bgblur));
-webkit-backdrop-filter: blur(var(--cms30-header-bgblur));
z-index: -1;
}
@supports (animation-timeline: scroll()) and (animation-range: 70vh 100vh) {
.cms30-header {
animation: var(--cms30-header-animation-status, header-height linear both);
animation-timeline: scroll();
animation-range: var(--cms30-header-start-animat, 70vh) var(--cms30-header-end-animat, 100vh);
}
}
@keyframes header-height {
from {
height: var(--cms30-header-height, 90px);
padding-block: var(--cms30-header-padding-t, 1rem) var(--cms30-header-padding-b, 1rem);
}
to {
height: calc(var(--cms30-header-height, 90px) * 0.7);
padding-block: 4px;
}
}
.cms30-header .logo-col {
justify-content: var(--cms30-header-logo-col-justify-content, center);
align-items: var(--cms30-header-logo-col-align-items, flex-start);
width: var(--cms30-header-logo-col-width, 100%) !important;
height: 100% !important;
max-width: var(--cms30-header-logo-col-max-width, 100%);
max-width: var(--cms30-header-logo-col-max-width, max-content);
order:var(--cms30-header-logo-col-order);
}
.cms30-header .header-logo {
display: flex;
justify-content: var(--cms30-header-logo-justify-content, center);
align-items: center;
padding: var(--cms30-header-logo-padding-t, 0) var(--cms30-header-logo-padding-r, 0px) var(--cms30-header-logo-padding-b, 0) var(--cms30-header-logo-padding-l, 0);
margin: var(--cms30-header-logo-margin-t, 0) var(--cms30-header-logo-margin-r, 0) var(--cms30-header-logo-margin-b, 0) var(--cms30-header-logo-margin-l, 0rem);
background-color: var(--cms30-header-logo-background-color, transparent);
border-radius: var(--cms30-header-logo-border-radius, 0);
}
.cms30-header .header-logo {
display: var(--cms30-header-logo-image-display, block);
text-align: var(--cms30-header-logo-image-align, start);
}
.cms30-header .header-logo a {
height: 100%;
display: block;
}
.cms30-header .header-logo img {
width: var(--cms30-header-logo-image-width, 6.25rem);
height: var(--cms30-header-logo-image-height, auto);
max-width: 100%;
min-width: var(--cms30-header-logo-image-min-width, 150px);
object-fit: var(--cms30-header-logo-image-fit, contain);
}
.cms30-header .header-logo-text {
display: var(--cms30-header-logo-text-display, block);
text-align: var(--cms30-header-logo-text-align, center);
}
.cms30-header .header-logo-text .Z1 {
font-family: var(--cms30-header-logo-text-font-family) !important;
font-size: var(--cms30-header-logo-text-font-size, 2.4rem) !important;
color: var(--cms30-header-logo-text-color, var(--hicolor)) !important;
margin-bottom: var(--cms30-header-logo-text-margin-bottom);
}
.cms30-header .header-logo-text .Z2 {
font-family: var(--cms30-header-logo-text-Z2-font-family);
font-size: var(--cms30-header-logo-text-Z2-font-size, 1rem);
color: var(--cms30-header-logo-text-Z2-color, var(--color));
margin-top: var(--cms30-header-logo-text-Z2-margin-top, -0.5rem);
}
.cms30-header .header-logo-text a {
text-decoration: none;
color: inherit;
}
.cms30-header .header-logo-image[hidden] + .header-logo-text {
display: block !important;
}
/* Base styles for .cms30-header-menu */
.cms30-header .menu-col{
max-width: var(--cms30-header-menu-col-max-width) !important;
width: var(--cms30-header-menu-col-width, 100%) !important;
order:var(--cms30-header-menu-col-order);
position: var(--cms30-header-menu-col-position);
}
.cms30-header-menu {
position: relative;
display: flex;
width: 100%;
box-sizing: border-box;
background-color: var(--cms30-header-menu-col-bgcolor, transparent);
padding: var(--cms30-header-menu-padding, 8px);
justify-content: var(--cms30-header-menu-justify-content, end);
}
.cms30-header-menu .submenu {
width: 100%;
}
.cms30-header-menu ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
gap: var(--cms30-hm-ul-gap, 12px);
align-items: var(--cms30-hm-align-items, center);
justify-content: var(--cms30-hm-justify-content, end);
}
.cms30-header-menu ul li {
list-style: none;
white-space: nowrap;
}
.cms30-header-menu ul.menu-level-1 > li {
position: relative;
}
/* Level 1 Menu Links */
.cms30-header-menu ul.menu-level-1 > li > a {
text-decoration: none;
color: var(--cms30-header-li-level1-font-color, var(--color));
padding: var(--cms30-header-li-level1-padding-t, 8px) var(--cms30-header-li-level1-padding-r, 16px) var(--cms30-header-li-level1-padding-b, 8px) var(--cms30-header-li-level1-padding-l, 16px);
display: block;
background-color: transparent;
transition: background-color 0.3s ease, color 0.3s ease;
}
/* Level 2 Menu Links */
.cms30-header-menu .submenu.menu-level-2 > ul > li > a {
text-decoration: none;
color: var(--cms30-header-li-level2-font-color,var(--cms30-header-li-level1-font-color, var(--color)));
padding: var(--cms30-header-li-level2-padding-t,var(--cms30-header-li-level1-padding-t, 8px)) var(--cms30-header-li-level2-padding-r,var(--cms30-header-li-level1-padding-r, 16px)) var(--cms30-header-li-level2-padding-b,var(--cms30-header-li-level1-padding-b, 8px)) var(--cms30-header-li-level2-padding-l,var(--cms30-header-li-level1-padding-l, 16px));
display: block;
transition: background-color 0.3s ease, color 0.3s ease;
}
/* Level 3 Menu Links */
.cms30-header-menu .submenu.menu-level-3 ul li a {
text-decoration: none;
color: var(--cms30-header-li-level2-font-color,var(--cms30-header-li-level1-font-color, var(--color)));
padding: var(--cms30-header-li-level2-padding-t,var(--cms30-header-li-level1-padding-t, 8px)) var(--cms30-header-li-level2-padding-r,var(--cms30-header-li-level1-padding-r, 16px)) var(--cms30-header-li-level2-padding-b,var(--cms30-header-li-level1-padding-b, 8px)) var(--cms30-header-li-level2-padding-l,var(--cms30-header-li-level1-padding-l, 16px));
display: block;
transition: background-color 0.3s ease, color 0.3s ease;
}
/* Level 2 Links in Vertical Menu */
.cms30-header-menu.vmenu .submenu.menu-level-2 ul li a {
text-decoration: none;
color: var(--color);
display: block;
transition: background-color 0.3s ease, color 0.3s ease;
}
/* Submenu Level 2 */
.cms30-header-menu .submenu.menu-level-2 {
position: absolute;
top: 100%;
left: 0;
display: none;
flex-direction: column;
z-index: 10;
padding: 10px 0;
width: max-content;
}
.cms30-header-menu .submenu.menu-level-2 > ul,
.cms30-header-menu .submenu.menu-level-3 ul {
margin: 0;
padding: 0;
flex-direction: column;
gap: var(--cms30-header-ul-level2-gap, 1px);
}
.cms30-header-menu .submenu.menu-level-2 ul li {
list-style: none;
}
/* Submenu Level 3 */
.cms30-header-menu .submenu.menu-level-3 {
position: absolute;
top: 0%;
left: 100%;
display: none;
flex-direction: column;
z-index: var(--cms30-header-z-index, 10);
padding: 0px 4px;
width: max-content;
}
.cms30-header-menu .submenu.menu-level-3 ul li {
list-style: none;
}
/* Submenu Level 4 */
.cms30-header-menu .submenu.menu-level-4 {
display: none;
}
/* Styles for .haschildren Items */
.cms30-header-menu ul.menu-level-1 > li.haschildren,
.cms30-header-menu .submenu.menu-level-2 > ul > li.haschildren {
padding-inline-end: 1rem;
position: relative;
}
.cms30-header-menu ul.menu-level-1 > li.haschildren::after,
.cms30-header-menu .submenu.menu-level-2 > ul > li.haschildren::after {
content: "";
position: absolute;
top: 50%;
right: 10px;
transform: translate(0%, -50%) rotate(45deg);
transition: all 0.3s ease;
transform-origin: center;
border-top: 2px solid var(--cms30-header-li-level1-font-color, var(--color));
border-right: 2px solid var(--cms30-header-li-level1-font-color, var(--color));
width: 0.5rem;
height: 0.5rem;
font-size: var(--cms30-header-li-level1-font-size, 1.2rem);
}
/* Horizontal Menu */
.cms30-header-menu.hmenu ul.menu-level-1 > li:hover > .submenu.menu-level-2,
.cms30-header-menu.hmenu .submenu.menu-level-2 > ul > li:hover > .submenu.menu-level-3 {
display: flex;
}
.cms30-header-menu.hmenu ul.menu-level-1 > li:hover > .submenu.menu-level-2 {
display: flex;
min-width: 100%;
}
.cms30-header-menu.hmenu .submenu.menu-level-2 > ul > li:hover > .submenu.menu-level-3 {
display: flex;
}
.cms30-header-menu .submenu.submenu.menu-level-1 > ul > li {
position: relative;
border-block-end: 1px solid transparent;
background: linear-gradient(to right, var(--cms30-header-li-level1-hover-underline-color,var(--hicolor)) 0%, var(--cms30-header-li-level1-hover-underline-color,var(--hicolor)) 100%);
background-repeat: no-repeat;
background-position: bottom left;
background-size: 0% var(--cms30-header-li-level1-hover-underline-width,1px);
transition: background-size 0.3s ease;
background-color: var(--cms30-header-li-level1-bgcolor, transparent);
box-sizing: border-box;
font-size: var(--cms30-header-li-level1-font-size, 1.2rem);
font-family: var(--cms30-header-li-level1-font-family);
border: var(--cms30-header-li-level1-border-width, 1px) var(--cms30-header-li-level1-border-style, solid) color-mix(in srgb, var(--cms30-header-li-level1-border-color, transparent) var(--cms30-header-li-level1-border-opacity, 50%), transparent);
border-radius: var(--cms30-header-li-level1-border-radius, 4px);
}
.cms30-header-menu.hmenu .submenu.submenu.menu-level-1 > ul > li:hover, .cms30-header-menu.hmenu .submenu.submenu.menu-level-1 > ul > li.menu-active {
background-color: var(--cms30-header-li-level1-hover-bgcolor);
background-size: 100% var(--cms30-header-li-level1-hover-underline-width,1px);
}
.cms30-header-menu.hmenu .submenu.submenu.menu-level-1 > ul > li.menu-active > a{
color: var(--cms30-header-li-level1-active-font-color, var(--hicolor));
}
.cms30-header-menu .submenu.submenu.menu-level-1 > ul > li:hover > a {
color: var(--cms30-header-li-level1-hover-font-color, var(--hicolor));
}
.cms30-header-menu.hmenu .submenu.submenu.menu-level-2 ul li,
.cms30-header-menu.hmenu .submenu.submenu.menu-level-3 ul li {
position: relative;
border-block-end: 1px solid transparent;
background: linear-gradient(to right, var(--cms30-header-li-level2-hover-underline-color,var(--cms30-header-li-level1-hover-underline-color,var(--hicolor))) 0%, var(--cms30-header-li-level2-hover-underline-color,var(--cms30-header-li-level1-hover-underline-color,var(--hicolor))) 100%);
background-repeat: no-repeat;
background-position: bottom left;
background-size: 0% var(--cms30-header-li-level2-hover-underline-width, var(--cms30-header-li-level1-hover-underline-width,1px));
transition: background-size 0.3s ease;
background-color: var(--cms30-header-li-level2-bgcolor, var(--cms30-header-li-level1-bgcolor, var(--bgcolor)));
min-width: 100%;
box-sizing: border-box;
font-size: var(--cms30-header-li-level2-font-size,var(--cms30-header-li-level1-font-size, 1.2rem));
font-family: var(--cms30-header-li-level2-font-family,var(--cms30-header-li-level2-font-family));
border: var(--cms30-header-li-level2-border-width,var(--cms30-header-li-level1-border-width, 1px)) var(--cms30-header-li-level2-border-style,var(--cms30-header-li-level1-border-style, solid)) color-mix(in srgb, var(--cms30-header-li-level2-border-color,var(--cms30-header-li-level1-border-color, transparent)) var(--cms30-header-li-level2-border-opacity,var(--cms30-header-li-level1-border-opacity, 50%)), transparent);
border-radius: var(--cms30-header-li-level2-border-radius,var(--cms30-header-li-level1-border-radius, 0px));
}
.cms30-header-menu .submenu.submenu.menu-level-2 ul li:hover,
.cms30-header-menu .submenu.submenu.menu-level-3 ul li:hover {
background-color: var(--cms30-header-li-level2-hover-bgcolor, var(--cms30-header-li-level1-hover-bgcolor, var(--bgcolor2)));
background-size: 100% var(--cms30-header-li-level2-hover-underline-width,var(--cms30-header-li-level1-hover-underline-width,1px));
}
.cms30-header-menu .submenu.submenu.menu-level-2 ul li:hover > a,
.cms30-header-menu .submenu.submenu.menu-level-3 ul li:hover > a {
color: var(--cms30-header-li-level2-hover-font-color, var(--cms30-header-li-level1-hover-font-color, var(--hicolor)));
}
.cms30-header-menu.hmenu .submenu.submenu.menu-level-1 ul li:hover::after {
border-color: var(--cms30-header-li-level1-hover-font-color, var(--hicolor)) !important;
transform: translate(0%, -50%) rotate(135deg)!important;
}
.cms30-header-menu.hmenu .submenu.submenu.menu-level-2 ul li:hover::after {
border-color: var(--hicolor) !important;
transform: translate(0%, -50%) rotate(225deg)!important;
}
/* Vertical Menu */
.cms30-header-menu.vmenu ul > li {
position: static;
display: block;
width: 100%;
box-sizing: border-box;
}
.cms30-header-menu.vmenu .submenu.menu-level-2,
.cms30-header-menu.vmenu .submenu.menu-level-3 {
position: static;
display: none;
flex-direction: column;
padding-top: 10px;
box-shadow: none;
}
.cms30-header-menu.vmenu ul.menu-level-1 > li > .submenu.menu-level-2,
.cms30-header-menu.vmenu ul.menu-level-2 > li > .submenu.menu-level-3 {
display: none;
}
.cms30-header-menu.vmenu ul.menu-level-1 > li.open > .submenu.menu-level-2,
.cms30-header-menu.vmenu ul.menu-level-2 > li.open > .submenu.menu-level-3 {
display: flex !important;
background-color: var(--cms30-header-submenu-vmenu-background, var(--bgcolor));
width: 100%;
}
.cms30-header-menu.vmenu .submenu ul {
display: flex;
flex-direction: column;
gap: var(--cms30-header-submenu-vmenu-ul-gap, 12px);
margin: 0;
background: transparent;
}
.cms30-header-menu.vmenu ul.menu-level-1 > li.haschildren,
.cms30-header-menu.vmenu .submenu.menu-level-2 > ul > li.haschildren {
padding-inline-end: 0rem;
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
}
.cms30-header-menu.vmenu ul.menu-level-1 > li.haschildren > div,
.cms30-header-menu.vmenu .submenu.menu-level-2 > ul > li.haschildren > div {
order: 3;
}
.cms30-header-menu.vmenu ul li.haschildren > a {
flex-grow: 1;
border-inline-end: 1px solid var(--bgcolor2);
}
.cms30-header-menu.vmenu ul.menu-level-3 li.haschildren > a {
border-inline-end: none;
}
.cms30-header-menu.vmenu .submenu.submenu.menu-level-1 > ul > li:hover {
background-size: 100% var(--cms30-header-li-level1-hover-underline-width,1px);
}
.cms30-header-menu.vmenu .submenu ul.menu-level-1 > li.haschildren::after,
.cms30-header-menu.vmenu .submenu ul.menu-level-2 > li.haschildren::after {
content: "\f107";
font-family: 'FontAwesome';
position: static;
width: 10%;
padding: 10px 15px;
transform: rotate(0deg);
display: flex;
justify-content: center;
align-items: center;
margin: 0;
border: none;
cursor: pointer;
}
.cms30-header-menu.vmenu .submenu ul li:hover::after {
color: var(--hicolor) !important;
background: transparent;
transform: rotate(0deg) !important;
}
.cms30-header-menu.vmenu .submenu ul li.open::after {
transform: rotate(180deg) !important;
}
.cms30-header-menu.vmenu::before {
content: '';
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-color: rgba(0, 0, 0, 0.5);
z-index: 5;
opacity: 0;
pointer-events: none;
transition: opacity 0.3s ease;
}
.cms30-header-menu.vmenu:has(.submenu.menu-level-1.vertical.visible)::before {
opacity: 1;
}
.cms30-header-menu .submenu.menu-level-1.vertical {
position: fixed;
top: 0;
right: 0%;
visibility: hidden;
height: 100vh;
width: var(--cms30-header-submenu-vmenu-width, 90%);
max-width: var(--cms30-header-submenu-vmenu-max-width, 400px);
background-color: var(--cms30-header-submenu-vmenu-background, var(--bgcolor));
box-shadow: -2px 0 8px rgba(0, 0, 0, 0.2);
overflow-y: auto;
transform:translateX(100%);
transition: none;
z-index: 10;
display: flex;
flex-direction: column;
justify-content: var(--cms30-header-submenu-vmenu-justify-content, flex-start);
align-items: var(--cms30-header-submenu-vmenu-align-items, center);
padding-inline: var(--cms30-header-submenu-vmenu-padding-inline, 0.5rem);
box-sizing: border-box;
opacity: 0;
transition: transform 0.3s ease;
}
.cms30-header-menu .submenu.menu-level-1.vertical.visible {
transform: translateX(0);
visibility: visible;
opacity: 1;
}
.cms30-header-menu .submenu.menu-level-1.vertical[data-open-direction="left"]{
right: 100%;
transform:translateX(-100%);
}
.cms30-header-menu .submenu.menu-level-1.vertical.visible[data-open-direction="left"] {
transform: translateX(100%);
}
.cms30-header-menu .submenu.menu-level-1.vertical > ul {
display: flex;
flex-direction: var(--cms30-header-submenu-vmenu-ul-flex-direction, column);
gap: var(--cms30-header-submenu-vmenu-ul-gap, 12px);
width: 100%;
max-width: var(--cms30-header-submenu-vmenu-ul-max-width, 400px);
padding: 0;
margin-block: var(--cms30-header-submenu-vmenu-ul-margin-block-start, 100px) var(--cms30-header-submenu-vmenu-ul-margin-block-end, 200px);
list-style:none;
}
.cms30-header-menu .submenu.menu-level-1 .close-icon {
display: none;
position: absolute;
top: var(--cms30-header-vmenu-close-icon-top, 12px);
right: var(--cms30-header-vmenu-close-icon-right, 12px);
font-size: var(--cms30-header-vmenu-close-icon-font-size, 24px);
color: var(--cms30-header-vmenu-close-icon-font-size, var(--color));
background-color: var(--cms30-header-vmenu-close-icon-bgcolor, transparent);
border: var(--cms30-header-vmenu-close-icon-border-width, 0px)
var(--cms30-header-vmenu-close-icon-border-style, solid)
var(--cms30-header-vmenu-close-icon-border-color, var(--color));
border-radius: var(--cms30-header-vmenu-close-icon-border-radius, 4px);
padding: var(--cms30-header-vmenu-close-icon-padding-top, 8px)
var(--cms30-header-vmenu-close-icon-padding-right, 8px)
var(--cms30-header-vmenu-close-icon-padding-bottom, 8px)
var(--cms30-header-vmenu-close-icon-padding-left, 8px);
cursor: pointer;
z-index: 11;
}
.cms30-header-menu .submenu.menu-level-1 .close-icon:hover {
color: var(--cms30-header-vmenu-close-icon-hover-font-size, var(--hicolor));
background-color: var(--cms30-header-vmenu-close-icon-hover-bgcolor, var(--bgcolor2));
}
.cms30-header-menu .submenu.menu-level-1.vertical.visible .close-icon {
display: block;
}
/* Menu Switch */
.cms30-header .menu-switch {
display: none;
width: var(--cms30-header-menu-switch-width, 32px);
height: var(--cms30-header-menu-switch-height, 26px);
align-content: center;
position: relative;
cursor: pointer;
text-align: center;
color: var(--cms30-header-menu-switch-icon-color, var(--color));
transition: all 0.3s ease-in-out;
background-color: var(--cms30-header-menu-switch-bg, transparent);
border: var(--cms30-header-menu-switch-border-width, 0px)
var(--cms30-header-menu-switch-border-style, solid)
var(--cms30-header-menu-switch-border-color, var(--color));
border-radius: var(--cms30-header-menu-switch-border-radius, 4px);
padding-top: var(--cms30-header-menu-switch-padding-top, 8px);
padding-right: var(--cms30-header-menu-switch-padding-right, 8px);
padding-bottom: var(--cms30-header-menu-switch-padding-bottom, 8px);
padding-left: var(--cms30-header-menu-switch-padding-left, 8px);
}
.cms30-header .menu-switch:has(i),.cms30-header .menu-switch:has(div),.cms30-header .menu-switch:has(span) {
height: var(--cms30-header-menu-switch-height, 42px);
border-block: none;
}
.cms30-header .menu-switch:before {
content: "";
width: var(--cms30-header-menu-switch-line-width, 28px);
height: var(--cms30-header-menu-switch-icon-height, 20px);
border-block: var(--cms30-header-menu-switch-line-height, 2px) var(--cms30-header-menu-switch-line-style, solid) var(--cms30-header-menu-switch-icon-color, var(--color));
position: absolute;
bottom: 50%;
left: 50%;
transform: translate(-50%, 50%);
transition: all 0.3s ease-in-out;
}
.cms30-header .menu-switch:after {
content: "";
width: var(--cms30-header-menu-switch-line-width, 28px);
border-block-end: var(--cms30-header-menu-switch-line-height, 2px) var(--cms30-header-menu-switch-line-style, solid) var(--cms30-header-menu-switch-icon-color, var(--color));
position: absolute;
bottom: 50%;
left: var(--cms30-header-menu-switch-line--middle-left, 35%);
transform: translate(-50%, 50%);
transition: all 0.3s ease-in-out;
}
.cms30-header .menu-switch:has(i):after,.cms30-header .menu-switch:has(div):after, .cms30-header .menu-switch:has(span):after,.cms30-header .menu-switch:has(i):before, .cms30-header .menu-switch:has(div):before, .cms30-header .menu-switch:has(span):before {
display:none;
}
.cms30-header .menu-switch * {
font-size: var(--cms30-header-menu-switch-font-size, 2rem);
color: var(--cms30-header-menu-switch-icon-color, var(--color));
}
.cms30-header .menu-switch:hover *,.cms30-header .menu-switch:hover:before,.cms30-header .menu-switch:hover:after {
color: var(--cms30-header-menu-switch-icon-hover-color, var(--hicolor));
border-color: var(--cms30-header-menu-switch-icon-hover-color, var(--hicolor));
}
.cms30-header .menu-switch:hover{
color: var(--cms30-header-menu-switch-icon-hover-color, var(--hicolor));
border-color: var(--cms30-header-menu-switch-hover-border-color, var(--cms30-header-menu-switch-icon-hover-color, var(--hicolor)));
background-color: var(--cms30-header-menu-switch-hover-bg);
}
/* Kontakt Button */
.cms30-header-menu li.menu-level-1.page-kontakt[style-true="true"] {
background: var(--cms30-header-kb-bgcolor, var(--hicolor)) !important;
border: var(--cms30-header-kb-border-width, 1px) var(--cms30-header-kb-border-style, solid) var(--cms30-header-kb-border-color, transparent) !important;
border-radius: var(--cms30-header-kb-border-radius, var(--cms30-header-li-level1-border-radius, 2rem)) !important;
text-decoration: none;
font-family: var(--cms30-header-kb-font-family, var(--cms30-header-li-level1-font-family)) !important;
text-transform: var(--cms30-header-kb-text-transform, none);
letter-spacing: var(--cms30-header-kb-letter-spacing, normal);
box-shadow: 0px 2px 8px 0px var(--cms30-header-kb-box-shadow, transparent) !important;
box-shadow: 0px 2px 8px 0px color-mix(in srgb, var(--cms30-header-kb-box-shadow, transparent) var(--cms30-header-kb-box-shadow-opacity, 30%), transparent) !important;
transition: all 0.3s ease !important;
cursor: pointer;
text-shadow: var(--cms30-header-kb-text-shadow, none);
opacity: var(--cms30-header-kb-opacity, 1);
transform: scale(var(--cms30-header-kb-scale, 1));
transform-origin: var(--cms30-header-kb-transform-origin, center);
mix-blend-mode: var(--cms30-header-kb-blend-mode, normal);
order: var(--cms30-header-kb-order, 999);
}
.cms30-header-menu.hmenu li.menu-level-1.page-kontakt[style-true="true"] {
margin-inline-start: var(--cms30-header-kb-margin-l, 1rem);
}
.cms30-header-menu.vmenu li.menu-level-1.page-kontakt[style-true="true"] {
margin: var(--cms30-header-kb-margin-t, 3rem) var(--cms30-header-kb-margin-r, 0rem) var(--cms30-header-kb-margin-b, 0rem) var(--cms30-header-kb-margin-l, 0rem);
}
.cms30-header-menu li.menu-level-1.page-kontakt[style-true="true"] span::after {
content: "\f061";
font-family: "FontAwesome";
margin-left: 0.5rem;
font-size: 1rem;
display: inline-block;
vertical-align: middle;
color: var(--cms30-header-kb-icon-color, inherit);
}
.cms30-header-menu li.menu-level-1.page-kontakt[style-true="true"] > a.page-kontakt {
padding-inline: var(--menu-pd-link-padding-inline, 1.5rem);
border-radius: var(--cms30-header-kb-border-radius, var(--cms30-header-li-level1-border-radius, 2rem)) !important;
padding: var(--cms30-header-kb-padding-t, var(--cms30-header-li-level1-padding-t, 8px)) var(--cms30-header-kb-padding-r,var(--cms30-header-li-level1-padding-r, 16px)) var(--cms30-header-kb-padding-b,var(--cms30-header-li-level1-padding-b, 8px)) var(--cms30-header-kb-padding-l,var(--cms30-header-li-level1-padding-l, 16px));
color: var(--cms30-header-kb-color, var(--color)) !important;
font-size: var(--cms30-header-kb-font-size, 1rem);
font-weight: var(--cms30-header-kb-font-weight, 600) !important;
}
.cms30-header-menu li.menu-level-1.page-kontakt[style-true="true"]:hover{
background: var(--cms30-header-kb-hover-bgcolor, transparent) !important;
border: var(--cms30-header-kb-hover-border-width, 1px) var(--cms30-header-kb-hover-border-style, solid) var(--cms30-header-kb-hover-border-color, var(--hicolor))!important;
}
.cms30-header-menu li.menu-level-1.page-kontakt[style-true="true"]:hover > a.page-kontakt{
color: var(--cms30-header-kb-hover-color, var(--hicolor)) !important;
background: var(--cms30-header-kb-hover-bgcolor, transparent) !important;
}
.cms30-header-menu li.menu-level-1.page-kontakt[style-true="true"]:active {
transform: scale(0.95);
box-shadow: 1px 1px 8px 3px var(--hicolor);
box-shadow: 1px 1px 8px 3px color-mix(in srgb, var(--hicolor) 20%, transparent);
transition: transform 0.2s ease;
}
/* impressum menu*/
.cms30-header .cms30-header-menu-impr {
display: var(--cms30-header-menu-impr-display, flex);
padding: var(--cms30-header-menu-impr-padding, 4px);
justify-content: center;
background-color: var(--cms30-header-menu-impr-bgcolor);
}
.cms30-header .cms30-header-menu-impr ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
gap: var(--cms30-header-menu-impr-gap, 8px);
align-items: center;
justify-content: ceter;
}
.cms30-header .cms30-header-menu-impr ul li {
list-style: none;
white-space: nowrap;
}
.cms30-header .cms30-header-menu-impr ul.menu-level-1 > li > a {
text-decoration: none;
color: var(--cms30-header-menu-impr-font-color, var(--color));
font-size: var(--cms30-header-menu-impr-font-size, 0.8rem);
display: block;
transition: color 0.2s ease;
}
.cms30-header .cms30-header-menu-impr .menu-level-1 > ul > li:hover a, .cms30-header-menu-impr .menu-level-1 > ul > li.menu-active a {
color: var(--cms30-header-menu-impr-active-font-color, var(--hicolor));
}
.cms30-header .cms30-header-menu-impr ul.menu-level-1 > li > a:focus {
outline: 1px dashed var(--hicolor);
outline-offset: 1px;
}
.cms30-header .items-col{
flex-direction: row;
gap: 12px;
align-items: center;
max-width: var(--cms30-header-items-col-max-width) !important;
width: var(--cms30-header-items-col-width) !important;
order:var(--cms30-header-items-col-order);
}
/* Shopping card fixed */
.cms30-header .cms30-cart-fixed{
position: fixed;
bottom: var(--cms30-header-cms30-card-bottom, 10%);
right: var(--cms30-header-cms30-card-right, 10%);
}
.cms30-header .cms30-cart-fixed svg {
stroke: var(--cms30-header-cms30-card-icon-color, var(--color));
}
.cms30-header .cms30-cart-fixed .wkheadernew {
position: relative;
visibility: hidden;
}
.cms30-header .cms30-cart-fixed .wkheadernew a {
background: var(--cms30-header-cms30-card-bgcolor, var(--locolor));
padding: var(--cms30-header-cms30-card-padding, 1rem);
border-radius: var(--cms30-header-cms30-card-border-radius, 50%);
display: flex;
max-width: var(--cms30-header-cms30-card-max-width, 2rem);
max-height: var(--cms30-header-cms30-card-max-height, var(--cms30-header-cms30-card-max-width, 2rem));
}
.cms30-header .cms30-cart-fixed .item-num {
color: var(--cms30-header-cms30-card-icon-color, var(--color));
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
pointer-events: none;
}
.cms30-header .cms30-cart-fixed .wkheadernew.visible {
visibility: visible;
}
/* Shopping card top */
.cms30-header .cms30-cart-top {
position: relative;
}
.cms30-header .cms30-cart-top .cms30-wk-icon {
display: flex;
flex-wrap: nowrap;
margin-inline-start: 8px;
cursor: pointer;
position: relative;
}
.cms30-header .cms30-cart-top .cms30-wk-icon svg path{
fill: var(--color);
}
.cms30-header .cms30-cart-top .cms30-wk-icon:hover svg path{
fill: var(--hicolor);
}
.cms30-header .cms30-cart-top .cms30-wk-icon:hover span{
color: var(--hicolor);
}
.cms30-header .cms30-cart-top .cms30-wk-icon::after {
background: transparent;
content: "";
width: 35px;
height: 30px;
position: absolute;
bottom: -30px;
right: 0;
}
.cms30-header .cms30-cart-top .cms30-wktab {
width: 350px;
max-width: 85vw;
position: absolute;
right: var(--cms30-header-cms30-wktab-right ,0px);
background: var(--bgcolor);
top: var(--cms30-header-cms30-wktab-top, 35px);
max-height: calc(100vh - 120px);
min-height: 350px;
z-index: 2;
display: none;
flex-direction: column;
padding: 12px;
box-sizing: border-box;
border: 1px solid var(--bgcolor2);
border-radius: 4px;
opacity: 0;
transition: opacity 0.3s ease;
}
.cms30-header .items-col.visible-on-hover .cms30-cart-top .cms30-wktab {
display: flex;
opacity: 1;
}
.cms30-header .items-col.visible-on-click .cms30-cart-top .cms30-wktab {
display: flex;
opacity: 1;
}
.close-card{
text-align: end;
color: var(--color);
cursor: pointer;
margin-block-end: 4px;
}
.close-card:hover{
color: red;
}
.cms30-header .cms30-cart-top .articles {
padding-block: 12px;
overflow-y: auto;
overflow-x: hidden;
display: flex;
flex-direction: column;
gap: 8px;
}
.cms30-header .cms30-cart-top .article-cont {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
gap: 8px;
}
.cms30-header .cms30-cart-top .img-cont {
width: 40%;
min-width: 100px;
}
.cms30-header .cms30-cart-top .img-cont img {
width: 100%;
object-fit: cover;
aspect-ratio: 1 / 1;
}
.cms30-header .cms30-cart-top .details-cont {
display: flex;
flex-direction: column;
gap: 8px;
}
.cms30-header .cms30-cart-top .product-title {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
}
.cms30-header .cms30-cart-top .sum-cont {
margin-top: auto;
display: flex;
flex-wrap: nowrap;
justify-content: space-between;
padding-block: 8px;
}
.cms30-header .cms30-cart-top .to-card-btn a {
background: var(--bgcolor2);
padding: 12px;
text-align: center;
margin-block-start: 12px;
border-radius: 4px;
display: block;
color: var(--color);
}
.cms30-header .cms30-cart-top .to-card-btn a:hover {
color: var(--hicolor);
}
.cms30-header .cms30-cart-top .details-cont .small {
font-size: 0.8rem;
}
.cms30-header .cms30-cart-top .icon-trash.delete {
color: var(--locolor);
cursor: pointer;
}
.cms30-header .cms30-cart-top .details-title{
padding-inline-end: 4px;
}
.cms30-header .cms30-cart-top .icon-trash.delete:hover {
color: var(--hicolor);
}
.cms30-header .cms30-cart-top .leer {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
text-align: center;
padding: 16px;
}
.cms30-header .cms30-cart-top .leer-content {
max-width: 400px;
padding: 20px;
border: 1px dashed var(--color);
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.cms30-header .cms30-cart-top .leer-icon {
font-size: 3rem;
margin-bottom: 10px;
}
.cms30-header .cms30-cart-top .leer-message {
font-weight: bold;
color: var(--hicolor);
margin-bottom: 8px;
}
.cms30-header .cms30-cart-top .leer-subtext {
font-size: 0.7rem;
color: var(--color);
opacity: 0.5;
}
.cms30-header .cms30-cart-top .to-shop-btn a {
background: var(--hicolor);
color: var(--bgcolor);
padding: 4px 8px;
margin-block-start: 12px;
display: inline-block;
border-radius: 4px;
font-weight: bold;
}
/* cms30 Langs */
.cms30-header .cms30-langs .lang-dropdown {
position: relative;
display: inline-block;
cursor: pointer;
}
.cms30-header .cms30-langs .lang-icon{
display:inline-block;
}
.cms30-header .cms30-langs .lang-dropdown .lang-icon:hover svg{
color: var(--cms30-header-lang-dropdown-hover-color, var(--hicolor));
}
.cms30-header .cms30-langs .lang-dropdown .lang-icon svg {
color: var(--cms30-header-lang-icon-color, var(--color));
padding: var(--cms30-header-lang-icon-padding, 4px);
background-color: var(--cms30-header-lang-icon-bgcolor, transparent);
border: var(--cms30-header-lang-icon-border-width, 1px) var(--cms30-header-lang-icon-border-style, none) var(--cms30-header-lang-icon-border-color, var(--color));
border-radius: var(--cms30-header-lang-icon-border-radius, 0);
width: var(--cms30-header-lang-icon-size, 1rem);
height: var(--cms30-header-lang-icon-size, 1rem);
}
.cms30-header .cms30-langs .lang-dropdown.open i {
color: var(--cms30-header-lang-icon-active-color, var(--hicolor)); /* Aktivierte Icon Farbe */
}
.cms30-header .cms30-langs .lang-dropdown ul {
display: none;
position: absolute;
margin: 0;
padding: var(--cms30-header-lang-dropdown-padding, 12px); /* Dropdown Padding */
list-style: none;
background: var(--cms30-header-lang-dropdown-bgcolor, var(--bgcolor)); /* Dropdown Hintergrund */
border: 1px solid var(--cms30-header-lang-dropdown-border-color, var(--bgcolor2)); /* Dropdown Rahmen */
border-radius: var(--cms30-header-lang-dropdown-border-radius, 4px); /* Dropdown Border Radius */
right: 0;
z-index: 1;
}
.cms30-header .cms30-langs .lang-dropdown ul li {
padding: 5px 10px;
cursor: pointer;
list-style: none;
margin-block-end: 2px;
font-size: var(--cms30-header-lang-dropdown-font-size, 1rem); /* Dropdown Schriftgröße */
}
.cms30-header .cms30-langs .lang-dropdown ul li:hover {
background-color: var(--cms30-header-lang-dropdown-hover-bgcolor, var(--bgcolor2));
}
.cms30-header .cms30-langs .lang-dropdown ul li a {
color: var(--cms30-header-lang-dropdown-link-color, var(--color));
}
.cms30-header .cms30-langs .lang-dropdown ul li.true {
background-color: var(--cms30-header-lang-dropdown-hover-bgcolor, var(--bgcolor2));
}
.cms30-header .cms30-langs .lang-dropdown ul li:hover a {
color: var(--cms30-header-lang-dropdown-hover-color, var(--color));
}
.cms30-header .cms30-langs .lang-dropdown ul li.true a {
color: var(--cms30-header-lang-dropdown-active-color, var(--hicolor));
}
.cms30-header .cms30-langs .lang-dropdown.open ul {
display: block;
}
/* Langs - code */
.cms30-header .cms30-lang-code .lang-contaner {
display: flex;
gap: var(--cms30-lang-code-container-gap, 8px);
background: var(--cms30-lang-code-container-bg, var(--bgcolor));
max-width: var(--cms30-lang-code-container-max-width, 100%);
max-width: var(--cms30-lang-code-container-max-width, fit-content);
padding: var(--cms30-lang-code-container-padding, 4px);
border-radius: var(--cms30-lang-code-container-border-radius, 4px);
color: var(--cms30-lang-code-code-color, var(--color));
align-items: center;
}
.cms30-header .cms30-lang-code .lang-icon {
height: 27px;
align-content: end;
}
.cms30-header .cms30-lang-code .lang-code {
display: inline-flex;
gap: var(--cms30-lang-code-container-gap, 8px);
}
.cms30-header .cms30-lang-code .lang-code a {
text-decoration: none;
text-transform: uppercase;
font-size: var(--cms30-lang-code-code-font-size, 13px);
line-height: var(--cms30-lang-code-code-line-height, 1);
display: flex;
gap: var(--cms30-lang-code-code-gap, 4px);
color: var(--cms30-lang-code-code-color, var(--color));
}
.cms30-header .cms30-lang-code .lang-code a:not(:last-of-type)::after {
content: '|';
color: var(--cms30-lang-code-code-color, var(--color));
}
.cms30-header .cms30-lang-code .lang-code a.aktuell {
font-weight: var(--cms30-lang-code-code-active-font-weight, bold);
color: var(--cms30-lang-code-code-active-color, var(--hicolor));
}
.cms30-header .cms30-lang-code .lang-code a:hover {
color: var(--cms30-lang-code-code-hover-color, var(--hicolor));
}
/* Langs - Flagge */
.cms30-lang-flagge {
display: flex;
gap: var(--cms30-lang-flagge-gap, 2px);
align-items: center;
justify-content: center;
}
.cms30-lang-flagge > a {
display: inline-flex;
border: var(--cms30-lang-flagge-border-width, 1px) solid transparent;
border-color: var(--cms30-lang-flagge-border-color, transparent);
border-radius: var(--cms30-lang-flagge-border-radius, 4px);
transition: border-color 0.2s ease, transform 0.2s ease;
transform-origin: center;
}
.cms30-lang-flagge > a:hover {
border-color: var(--cms30-lang-flagge-hover-border-color, var(--hicolor));
transform: scale(1.1);
}
.cms30-lang-flagge > a.aktuell {
border-color: var(--cms30-lang-flagge-active-border-color, var(--hicolor));
background-color: var(--cms30-lang-flagge-active-bg, transparent);
filter: brightness(1.1);
}
.cms30-lang-flagge > a > img {
display: block;
height: var(--cms30-lang-flagge-img-height, 12px);
width: auto;
object-fit: contain;
transition: filter 0.2s ease;
}
.cms30-lang-flagge .bottom {
margin-top: var(--cms30-lang-flagge-bottom-margin, 8px);
}
/* Footer Padding */
.cms30-footer {
padding-block: var(--cms30-footer-padding-block-top, 30px) var(--cms30-footer-padding-block-bottom, 0px);
border-top:var(--cms30-footer-border-width, 1px) var(--cms30-footer-border-style, solid) var(--cms30-footer-border-color, var(--color));
background: var(--cms30-footer-bg-gradient, var(--solid-bg));
--gradient-bg: linear-gradient(to var(--cms30-footer-gradient-direction, right), var(--cms30-footer-gradient-color-start, var(--bgcolor)), var(--cms30-footer-gradient-color-end, var(--bgcolor2) ));
--solid-bg: var(--cms30-footer-bgcolor, var(--bgcolor));
}
/* Hide 4th Column for 3 Columns Layout */
.cms30-footer.cols-3 .top-col-4 {
display: none;
}
/* Content Container */
.cms30-footer .content-cont {
max-width: var(--cms30-footer-content-cont-max-width, var(--content-width));
margin-inline: var(--cms30-footer-content-cont-margin-inline, auto);
padding: var(--cms30-footer-content-cont-padding, 1rem);
box-sizing: border-box;
}
/* Top Container */
.cms30-footer .top-cont {
flex-wrap: wrap;
row-gap: var(--cms30-footer-top-cont-row-gap, 0.7rem);
}
/* Top Columns General */
.cms30-footer [class*="top-col-"] {
flex: 1 1 var(--cms30-footer-top-col-flex, 25%);
min-width: var(--cms30-footer-top-col-min-width, 250px);
padding: var(--cms30-footer-top-col-padding, 1rem);
box-sizing: border-box;
}
.cms30-footer .top-cont [class*="top-col-"]:empty {
display: none;
}
/* Column Order */
.cms30-footer .top-cont .top-col-1 {
order: var(--cms30-footer-top-col-1-order, 1);
display: var(--cms30-footer-top-col-1-display, flex);
flex: 1 1 var(--cms30-footer-top-col-1-flex, 25%);
}
.cms30-footer .top-cont .top-col-2 {
order: var(--cms30-footer-top-col-2-order, 2);
display: var(--cms30-footer-top-col-2-display, flex);
flex: 1 1 var(--cms30-footer-top-col-2-flex, 25%);
}
.cms30-footer .top-cont .top-col-3 {
order: var(--cms30-footer-top-col-3-order, 3);
display: var(--cms30-footer-top-col-3-display, flex);
flex: 1 1 var(--cms30-footer-top-col-3-flex, 25%);
}
.cms30-footer .top-cont .top-col-4 {
order: var(--cms30-footer-top-col-4-order, 4);
display: var(--cms30-footer-top-col-4-display, flex);
flex: 1 1 var(--cms30-footer-top-col-4-flex, 25%);
}
/* Logo */
.cms30-footer .logo-col {
justify-content: var(--cms30-footer-logo-col-justify-content, center);
align-items: var(--cms30-footer-logo-col-align-items, flex-start);
width: var(--cms30-footer-logo-col-width, 100%) !important;
height: 100% !important;
max-width: var(--cms30-footer-logo-col-max-width, 100%);
max-width: var(--cms30-footer-logo-col-max-width, max-content);
order:var(--cms30-footer-logo-col-order, 1);
}
.cms30-footer .footer-logo {
display: flex;
justify-content: var(--cms30-footer-logo-justify-content, sta);
align-items: center;
padding: var(--cms30-footer-logo-padding-t, 0) var(--cms30-footer-logo-padding-r, 16px) var(--cms30-footer-logo-padding-b, 0) var(--cms30-footer-logo-padding-l, 0);
margin: var(--cms30-footer-logo-margin-t, 0) var(--cms30-footer-logo-margin-r, 0) var(--cms30-footer-logo-margin-b, 16px) var(--cms30-footer-logo-margin-l, 0rem);
background-color: var(--cms30-footer-logo-background-color, transparent);
border-radius: var(--cms30-footer-logo-border-radius, 0);
text-align: var(--cms30-footer-logo-image-align, start);
}
.cms30-footer .footer-logo a {
height: 100%;
display: block;
}
.cms30-footer .footer-logo img {
width: var(--cms30-footer-logo-image-width, 6.25rem);
height: var(--cms30-footer-logo-image-height, auto);
max-width: 100%;
min-width: var(--cms30-footer-logo-image-min-width, 150px);
object-fit: var(--cms30-footer-logo-image-fit, contain);
}
.cms30-footer .footer-logo-text {
display: var(--cms30-footer-logo-text-display, block);
text-align: var(--cms30-footer-logo-text-align, center);
width: fit-content;
}
.cms30-footer .footer-logo-text .Z1 {
font-family: var(--cms30-footer-logo-text-font-family) !important;
font-size: var(--cms30-footer-logo-text-font-size, 2.4rem) !important;
color: var(--cms30-footer-logo-text-color, var(--hicolor)) !important;
margin-bottom: var(--cms30-footer-logo-text-margin-bottom);
}
.cms30-footer .footer-logo-text .Z2 {
font-family: var(--cms30-footer-logo-text-Z2-font-family);
font-size: var(--cms30-footer-logo-text-Z2-font-size, 1rem);
color: var(--cms30-footer-logo-text-Z2-color, var(--color));
margin-top: var(--cms30-footer-logo-text-Z2-margin-top, -0.5rem);
}
.cms30-footer .footer-logo-text a {
text-decoration: none;
color: inherit;
}
.cms30-footer .footer-logo-image[hidden] + .footer-logo-text {
display: block !important;
}
/* Vertical Menu */
/* Legal Text (Rechtlich) */
.cms30-footer .menu-title-text {
display: var(--cms30-footer-m-menu-title-text-display, inline-block);;
font-weight: var(--cms30-footer-m-menu-title-text-font-weight, bold);
font-size: var(--cms30-footer-m-menu-title-text-font-size, 1rem);
color: var(--cms30-footer-m-menu-title-text-color, var(--color));
}
/* Vertical Menu */
.cms30-footer .cms30-footer-menu.vmenu ul {
gap: var(--cms30-footer-m-vmenu-ul-gap, 8px);
display: flex;
flex-direction: var(--cms30-footer-m-vmenu-ul-flex-direction, column);
margin-inline: 0;
justify-content: var(--cms30-footer-m-vmenu-ul-flex-align);
}
/* Menu Level 1 List Items */
.cms30-footer .cms30-footer-menu.vmenu ul.menu-level-1 > li {
position: static;
display: inline-block;
box-sizing: border-box;
}
/* Menu Level 1 Links */
.cms30-footer .cms30-footer-menu.vmenu ul.menu-level-1 > li a {
color: var(--cms30-footer-m-vmenu-link-color, var(--color));
font-size: var(--cms30-footer-m-vmenu-link-font-size, 1rem);
font-weight: var(--cms30-footer-m-vmenu-link-font-weight, 400);
text-decoration: var(--cms30-footer-m-vmenu-link-text-decoration, none);
}
/* Menu Level 1 Links Hover */
.cms30-footer .cms30-footer-menu.vmenu ul.menu-level-1 > li a:hover {
color: var(--cms30-footer-m-vmenu-link-hover-color, var(--hicolor));
text-decoration: var(--cms30-footer-m-vmenu-link-hover-text-decoration, underline);
}
/* About Us Text */
.cms30-footer .top-cont .footer-about-us {
font-family: var(--cms30-footer-about-us-font-family, inherit);
font-size: var(--cms30-footer-about-us-font-size, 1rem);
font-weight: var(--cms30-footer-about-us-font-weight, 400);
line-height: var(--cms30-footer-about-us-line-height, 1.5);
color: var(--cms30-footer-about-us-color, var(--color));
margin-block: var(--cms30-footer-about-us-margin-top, 0) var(--cms30-footer-about-us-margin-bottom, 16px);
}
/* Email Text */
.cms30-footer .top-cont .footer-email {
font-family: var(--cms30-footer-email-font-family, inherit);
font-size: var(--cms30-footer-email-font-size, 1rem);
font-weight: var(--cms30-footer-email-font-weight, 400);
line-height: var(--cms30-footer-email-line-height, 1.5);
color: var(--cms30-footer-email-color, var(--color));
margin-block: var(--cms30-footer-email-margin-top, 0) var(--cms30-footer-email-margin-bottom, 4px);
text-decoration: var(--cms30-footer-email-text-decoration);
}
/* adress Text */
.cms30-footer .top-cont .footer-adress {
font-family: var(--cms30-footer-adress-font-family, inherit);
font-size: var(--cms30-footer-adress-font-size, 1rem);
font-weight: var(--cms30-footer-adress-font-weight, 400);
line-height: var(--cms30-footer-adress-line-height, 1.5);
color: var(--cms30-footer-adress-color, var(--color));
margin-block: var(--cms30-footer-adress-margin-top, 0) var(--cms30-footer-adress-margin-bottom, 8px);
text-decoration: var(--cms30-footer-adress-text-decoration, none);
}
/* Google Map */
.cms30-footer .google-map table {
width: 100%;
max-width: 360px;
display: inline-block;
display: inline-table;
vertical-align: top;
margin: 20px;
}
.cms30-footer .google-map tr {
vertical-align: top;
}
.cms30-footer .google-map iframe {
display: inline-block;
height: 100%;
width: 100%;
}
.cms30-footer .google-map .map {
height: var(--cms30-footer-map-height, 100%);
max-width: var(--cms30-footer-map-max-width, 100%);
margin: var(--cms30-footer-map-margin-top,0px) var(--cms30-footer-map-margin-right,0px) var(--cms30-footer-map-margin-bottom,0px) var(--cms30-footer-map-margin-left,0px);
}
.cms30-footer .google-map .map iframe{
border-radius: var(--cms30-footer-map-border-radius, 4px);
}
.cms30-footer .bottom-cont {
border-block-start: var(--cms30-footer-bottom-border-width, 1px)
var(--cms30-footer-bottom-border-style, solid)
color-mix(in lab, var(--cms30-footer-bottom-border-color, var(--color)) 25%, transparent);
border-width: var(--cms30-footer-bottom-border, var(--cms30-footer-bottom-border-width, 1px));
padding-block-start: var(--cms30-footer-bottom-padding-top, 12px);
margin-block-start: var(--cms30-footer-bottom-margin-top, 12px);
align-items: center;
display: var(--cms30-footer-bottom-display, flex);
flex-direction: var(--cms30-footer-bottom-flex-direction, row);
flex-wrap: nowrap !important;
}
.cms30-footer .bottom-cont .bottom-copyright-col{
flex: 1 1 var(--cms30-footer-bottom-copyright-col-flex, 50%);
display: var(--cms30-footer-bottom-copyright-col-display, flex);
justify-content: center;
align-items: var(--cms30-footer-bottom-copyright-col-align-items, flex-start);
}
.cms30-footer .bottom-cont .bottom-copyright-col:empty{
display:none;
}
.cms30-footer .bottom-cont .copyright {
font-family: var(--cms30-footer-copyright-font-family, inherit);
font-size: var(--cms30-footer-copyright-font-size, 1rem);
font-weight: var(--cms30-footer-copyright-font-weight, 400);
line-height: var(--cms30-footer-copyright-line-height, 1.5);
color: var(--cms30-footer-copyright-color, var(--color));
margin-block: var(--cms30-footer-copyright-margin-top, 0) var(--cms30-footer-copyright-margin-bottom, 0px);
}
/* poweredby */
.cms30-footer .bottom-cont{
--color-poweredby: var(--color);
}
.cms30-footer .bottom-cont .bottom-poweredby-col{
flex: 1 1 var(--cms30-footer-bottom-poweredby-col-flex, 50%);
display: var(--cms30-footer-bottom-poweredby-col-display, flex);
height:100%;
justify-content: flex-end;
align-items: var(--cms30-footer-bottom-poweredby-col-align-items, flex-end);
flex-direction: row;
gap: 12px;
}
.cms30-footer .bottom-cont .bottom-poweredby-col:empty{
display:none;
}
.cms30-footer .bottom-cont .cms30-poweredby {
display: flex;
height: 100%;
margin: 0;
align-items: center;
}
.cms30-footer .bottom-cont .cms30-poweredby .powered-hover{
width: 175px;
position: relative;
}
.cms30-footer .bottom-cont .cms30-poweredby a {
font-size: 0.7rem;
color: var(--color-poweredby) !important;
opacity: 0.7;
}
.cms30-footer .cms30-poweredby .powered-popup .powered-info {
display: flex;
flex-direction: column;
gap: 8px;
}
.cms30-footer .cms30-poweredby .powered-hover:hover .powered-popup {
border-width: 1px !important;
padding: 8px 4px;
}
.cms30-footer .cms30-poweredby .powered-footer {
padding: 4px;
}
.cms30-footer .cms30-poweredby .powered-footer .powered-help{
padding-inline-end: 24px;
}
/* Newsletter Container */
.cms30-footer .cms30-newsletter {
max-width: var(--cms30-footer-newsletter-max-width, 350px);
}
.cms30-footer .cms30-newsletter .newsletter-title {
font-size: var(--cms30-footer-newsletter-title-font-size, 1.5rem);
font-weight: var(--cms30-footer-newsletter-title-font-weight, bold);
margin-bottom: var(--cms30-footer-newsletter-title-margin-bottom, 0.3rem);
}
.cms30-footer .cms30-newsletter .newsletter-description{
font-size: var(--cms30-footer-newsletter-description-font-size, 1rem);
line-height: var(--cms30-footer-newsletter-description-line-height, 1.5);
margin-bottom: var(--cms30-footer-newsletter-description-margin-bottom, 1rem);
color: var(--cms30-footer-newsletter-description-color, var(--color));
opacity: var(--cms30-footer-newsletter-description-opacity, 0.7);
}
.cms30-footer .cms30-newsletter .email {
position: relative;
width: 100%;
margin-bottom: var(--cms30-footer-newsletter-email-margin-bottom, 1rem);
}
.cms30-footer .cms30-newsletter .email label {
display:none;
}
.cms30-footer .cms30-newsletter .email input {
width: 100%;
padding: 0.75rem 1rem 0.75rem 3rem;
font-size: 1rem;
border: 1px solid var(--cms30-footer-newsletter-email-input-border-color, color-mix(in lab, var(--hicolor) 50%, transparent));
border-radius: var(--cms30-footer-newsletter-email-input-border-radius, 4px);
box-sizing: border-box;
color: var(--cms30-footer-newsletter-email-input-color, var(--color));
background: var(--cms30-footer-newsletter-email-input-bgcolor, var(--bgcolor));
}
.cms30-footer .cms30-newsletter .email input:focus {
border-color: var(--hicolor);
outline: none;
}
.cms30-footer .cms30-newsletter .email input:-webkit-autofill {
-webkit-box-shadow: 0 0 0 1000px var(--bgcolor) inset;
-webkit-text-fill-color: var(--color) !important;
transition: background-color 5000s ease-in-out 0s;
}
.cms30-footer .cms30-newsletter .email input::placeholder {
color: color-mix(in lab, var(--color) 50%, transparent);
}
.cms30-footer .cms30-newsletter .email::before {
content: '\f0e0';
font-family: 'FontAwesome';
position: absolute;
left: 1rem;
top: 50%;
transform: translateY(-50%);
font-size: 1.2rem;
color: var(--cms30-footer-newsletter-email-input-color, var(--color));
}
.cms30-footer .cms30-newsletter .agb input {
display: none;
}
.cms30-footer .cms30-newsletter .agb a {
color: var(--cms30-footer-newsletter-agb-link-color, var(--hicolor));
}
.cms30-footer .cms30-newsletter .agb label {
width: auto;
color: var(--cms30-footer-newsletter-color, var(--color));
}
.cms30-footer .cms30-newsletter .agb label::before {
content: "\f096";
width: 1rem;
height: 1rem;
display: inline-block;
margin-right: 0.5rem;
font-size: 1rem;
cursor: pointer;
font-family: FontAwesome;
}
.cms30-footer .cms30-newsletter .agb input[type='checkbox']:checked + label::before {
content: "\f14a";
color: var(--cms30-footer-newsletter-color, var(--color));
}
.cms30-footer .cms30-newsletter .anmelden{
width: var(--cms30-footer-newsletter-submit-button-width, 100%);
}
.cms30-footer .cms30-newsletter .anmelden button {
width: 100%;
padding: 0.75rem;
background-color: var(--cms30-footer-newsletter-submit-button-bgcolor, var(--hicolor));
color: var(--cms30-footer-newsletter-submit-button-color, var(--bgcolor));
font-size: var(--cms30-footer-newsletter-submit-button-font-size, 1rem);
font-weight: bold;
border: none;
border-radius: var(--cms30-footer-newsletter-submit-button-border-radius, 4px);
cursor: pointer;
transition: background-color 0.3s ease;
}
.cms30-footer .cms30-newsletter .anmelden button:hover {
background-color: color-mix(in lab, var(--cms30-footer-newsletter-submit-button-bgcolor, var(--hicolor)) 80%, transparent);
}
/* Langs - Select */
.cms30-footer .cms30-langs-select {
margin-block-end: var(--cms30-footer-lang-dropdown-margin-bottom, 12px);
}
.cms30-footer .cms30-langs-select .lang-dropdown-options {
position: relative;
display: inline-block;
font-size: 1rem;
}
.cms30-footer .cms30-langs-select .lang-dropdown-options select {
width: 100%;
padding: 8px 12px;
font-size: 1rem;
border: 1px solid var(--cms30-footer-lang-dropdown-border, var(--color));
border-radius: var(--cms30-footer-lang-dropdown-border-radius, 4px);
background-color: var(--cms30-footer-lang-dropdown-bg, var(--bgcolor));
color: var(--cms30-footer-lang-dropdown-color, var(--color));
cursor: pointer;
outline: none;
}
.cms30-footer .cms30-langs-select .lang-dropdown-options select:hover {
border-color: var(--cms30-footer-lang-dropdown-hover-border, var(--hicolor));
}
.cms30-footer .cms30-langs-select .lang-dropdown-options select:focus {
border-color: var(--cms30-footer-lang-dropdown-focus-border, var(--hicolor));
box-shadow: 0 0 4px rgba(0, 81, 168, 0.4);
outline: none;
}
.cms30-footer .cms30-langs-select .lang-dropdown-options select option {
background-color: var(--cms30-footer-lang-option-bg, var(--bgcolor));
color: var(--cms30-footer-lang-option-color, var(--color));
padding: 5px;
}
/* Social Media (Full name) */
.cms30-social-media a {
font-size: var(--cms30-footer-social-media-font-size, 1rem);
color: var(--cms30-footer-social-media-color, var(--color));
display: flex;
gap: var(--cms30-footer-social-media-horizontal-gap, 1rem);
}
.cms30-social-media a:hover {
color: var(--cms30-footer-social-media-hover-color, var(--hicolor));
}
.cms30-social-media .outerdiv {
margin-left: var(--cms30-footer-social-media-margin-left, 0px);
margin-top: var(--cms30-footer-social-media-margin-top, 0px);
margin-right: var(--cms30-footer-social-media-margin-right, 0px);
margin-bottom: var(--cms30-footer-social-media-margin-bottom, 0px);
display: flex;
flex-direction: column;
flex-wrap: wrap;
gap: var(--cms30-footer-social-media-gap, 5px);
}
@media (max-width:800px) /* responsive */ {
.header-logo-text .Z1{
font-size: var(--cms30-header-logo-text-font-size, 2rem) !important;
}
.cms30-footer .bottom-cont .bottom-copyright-col{
align-items: center;
}
.cms30-footer .bottom-cont .bottom-poweredby-col {
align-items: center;
}
.cms30-footer .bottom-cont .cms30-poweredby {
text-align: center;
}
}