/* ============================================================
glass.css — Glass overlay for header & menu (desktop + mobile)
------------------------------------------------------------
Does NOT change container heights/paddings — only:
- Backgrounds → glass
- Modern hover states
- Bullets removed, softer chevrons
- Clean mobile menu
Removing the in index.php disables everything.
============================================================ */
/* ============================================================
HEADER
============================================================ */
header.sticky-top > .container-fluid.bg-light {
background: rgba(255, 255, 255, 0.75) !important;
-webkit-backdrop-filter: saturate(180%) blur(14px);
backdrop-filter: saturate(180%) blur(14px);
box-shadow: 0 2px 16px rgba(15, 30, 60, 0.07);
}
/* ============================================================
LEVEL-1 NAV ITEMS (hover replaces the harsh solid blue block)
============================================================ */
/* Original uses background:#769bc1 + color:#fff → too harsh.
Here: soft tint only, same rectangular geometry as the original. */
nav#header-nav ul.maximenuck li.maximenuck.level1.parent:hover > a,
nav#header-nav ul.maximenuck li.maximenuck.level1 > a.maximenuck:hover {
background: rgba(118, 155, 193, 0.30) !important;
color: #102c68 !important;
transition: background 0.2s ease, color 0.2s ease;
}
/* Current entry: only mark .current. Joomla sets .active.parent
unreliably on this site (e.g. it marks Leistungen on Karriere
pages too), so we stick to exactly one item per level. */
nav#header-nav ul.maximenuck li.maximenuck.level1.current > a.maximenuck {
color: #102c68 !important;
background: rgba(118, 155, 193, 0.40) !important;
}
/* ============================================================
DROPDOWN PANEL (only the outer floatck of a level-1)
============================================================ */
nav#header-nav ul.maximenuck > li.maximenuck.level1 > div.floatck {
background: rgba(255, 255, 255, 0.95) !important;
-webkit-backdrop-filter: saturate(180%) blur(16px);
backdrop-filter: saturate(180%) blur(16px);
border: 1px solid rgba(118, 155, 193, 0.18) !important;
border-radius: 0 !important;
box-shadow:
0 12px 32px rgba(15, 30, 60, 0.14),
0 2px 6px rgba(15, 30, 60, 0.05) !important;
padding-bottom: 14px !important;
/* Dropdown sits flush below the header (instead of slightly overlapping). */
margin-top: 55px !important;
}
/* ============================================================
BULLETS REMOVED (the ▶ before level-2/3 look dated)
============================================================ */
nav#header-nav ul.maximenuck li.maximenuck.level1 > div.floatck ul,
nav#header-nav ul.maximenuck li.maximenuck.level1 > div.floatck li {
list-style: none !important;
}
/* ============================================================
LEVEL-2 (column headers in dropdown: Business Consulting, ...)
============================================================ */
/* Level-2 column header: full column width, no percent margins. */
nav#header-nav ul.maximenuck li.level2 > a,
nav#header-nav ul.maximenuck li.level2 > a.maximenuck,
nav#header-nav ul.maximenuck li.level2 > a > span.titreck {
margin: 0 !important;
width: auto !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
nav#header-nav ul.maximenuck li.level2 > a,
nav#header-nav ul.maximenuck li.level2 > a.maximenuck {
color: #102c68 !important;
border-bottom: 1px solid rgba(118, 155, 193, 0.3) !important;
font-weight: 600 !important;
transition: color 0.2s ease;
display: block !important;
padding: 4px 6px 4px 8px !important;
/* Left inner padding so text and hover box don't stick to the
column edge. Right gap so the underline ends per column
(instead of running through as one continuous line). */
margin-right: 24px !important;
}
nav#header-nav ul.maximenuck li.level2 > a:hover,
nav#header-nav ul.maximenuck li.level2 > a.maximenuck:hover {
color: #769bc1 !important;
background: none !important;
}
/* ============================================================
LEVEL-3 (individual sub-items: Strategie & Organisation, ...)
============================================================ */
/* Level-3 containers: plugin sets inline width:180px on maxidrop-main
+ maximenuck2. We restore the full column width so text doesn't wrap. */
nav#header-nav ul.maximenuck li.maximenuck.level2 > div.floatck > div.maxidrop-main,
nav#header-nav ul.maximenuck li.maximenuck.level2 > div.floatck > div.maxidrop-main > div.maximenuck2 {
width: 100% !important;
float: none !important;
}
/* Inner floatck (level-3 wrapper): drop padding + border so level-3
items start flush with the level-2 column header. */
nav#header-nav ul.maximenuck li.maximenuck.level2 > div.floatck {
padding: 0 !important;
margin: 0 !important;
border: none !important;
background: transparent !important;
box-shadow: none !important;
}
/* Plugin sets asymmetric +30 / -30 paddings on the Leistungen dropdown.
We balance it: left 16, right 0 (so the Cyber column ends flush right). */
div#maximenuck206 ul.maximenuck li.maximenuck.item114.level1 > div.floatck {
padding-left: 16px !important;
padding-right: 0 !important;
}
/* Plugin sets extra margins per level-2 column (item574 even has
margin-left:15px). The plugin rule includes .itemNNN, giving it
higher specificity than ours. Chained-class trick
(.maximenuck.maximenuck) raises our specificity above the plugin's. */
div#maximenuck206 ul.maximenuck2 li.maximenuck.maximenuck.level2 {
margin-left: 0 !important;
margin-right: 0 !important;
}
/* Full level-3 container chain: no padding-left / margin-left,
so level-3 items align flush with the level-2 header. */
nav#header-nav ul.maximenuck li.maximenuck.level2 > div.floatck > div.maxidrop-main,
nav#header-nav ul.maximenuck li.maximenuck.level2 > div.floatck > div.maxidrop-main > div.maximenuck2,
nav#header-nav ul.maximenuck li.maximenuck.level2 > div.floatck ul.maximenuck2,
nav#header-nav ul.maximenuck li.maximenuck.level2 > div.floatck ul.maximenuck2 > li.maximenuck.level3 {
padding-left: 0 !important;
margin-left: 0 !important;
}
/* Level-3 items: full column width, no percent margins, no 5% indent.
Also pull all inner spans (titreck, titreck-text, titreck-title) to 0
so no leftover indent from the plugin's flex construct survives. */
nav#header-nav ul.maximenuck li.maximenuck ul li.level3 a,
nav#header-nav ul.maximenuck li.maximenuck ul li.level3 a.maximenuck,
nav#header-nav ul.maximenuck li.maximenuck ul li.level3 a span.titreck,
nav#header-nav ul.maximenuck li.maximenuck ul li.level3 a span.titreck-text,
nav#header-nav ul.maximenuck li.maximenuck ul li.level3 a span.titreck-title {
margin: 0 !important;
width: auto !important;
padding-left: 0 !important;
padding-right: 0 !important;
text-indent: 0 !important;
}
nav#header-nav ul.maximenuck li.maximenuck ul li.level3 a,
nav#header-nav ul.maximenuck li.maximenuck ul li.level3 a.maximenuck {
color: #555 !important;
border-radius: 0;
position: relative;
transition: color 0.2s ease, background 0.2s ease;
display: block !important;
/* Same left inner padding as level-2 → stays aligned, and the
hover background doesn't stick to the column edge. */
padding: 4px 6px 4px 8px !important;
/* Hard cap: the box ends at the column edge, no spill into
the neighbouring column. */
max-width: 100% !important;
box-sizing: border-box !important;
/* Right gap (like level-2) → hover box doesn't reach the column
edge, looks more compact. */
margin-right: 24px !important;
}
/* li.level3 itself also hard-capped to column width. */
nav#header-nav ul.maximenuck li.maximenuck ul li.maximenuck.level3 {
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
overflow: hidden;
}
nav#header-nav ul.maximenuck li.maximenuck ul li.level3 a:hover,
nav#header-nav ul.maximenuck li.maximenuck ul li.level3 a.maximenuck:hover {
color: #102c68 !important;
background: rgba(118, 155, 193, 0.22) !important;
}
/* Level-2: only mark .current (same logic as level-1). */
nav#header-nav ul.maximenuck li.level2.current > a,
nav#header-nav ul.maximenuck li.level2.current > a.maximenuck {
color: #102c68 !important;
background: rgba(118, 155, 193, 0.22) !important;
}
/* Level-3 items: only .current gets the glass blue (same tone as hover). */
nav#header-nav ul.maximenuck li.maximenuck ul li.level3.current > a,
nav#header-nav ul.maximenuck li.maximenuck ul li.level3.current > a.maximenuck {
color: #102c68 !important;
background: rgba(118, 155, 193, 0.22) !important;
}
/* ============================================================
"TWILIGHT ZONE" 758–960 px
The plugin switches to mobile only at <=757px, but the desktop
menu no longer fits in one row below ~960px.
→ Shrink level-1 items here.
============================================================ */
@media (max-width: 960px) and (min-width: 758px) {
nav#header-nav ul.maximenuck li.maximenuck.level1 > a.maximenuck {
font-size: 18px !important;
padding: 5px 8px !important;
letter-spacing: 0.4px !important;
}
}
/* Original maxi-menu.css switches to display:block at max-width:940px,
which stacks logo and nav vertically. We keep the table layout down
to the plugin's mobile switch (757px) so logo + menu stay in one row. */
@media (max-width: 940px) and (min-width: 758px) {
.header-wrapper {
display: table !important;
width: 100% !important;
}
.header-content,
.logo-wrapper {
display: table-cell !important;
vertical-align: middle !important;
}
nav#header-nav {
margin-top: 0 !important;
}
}
/* ============================================================
MOBILE MENU (Maximenu CK Mobile, data-id 206)
Goal: compact, modern, clear hierarchy.
============================================================ */
@media (max-width: 940px) {
/* HAMBURGER BUTTON in glass style: blue glass panel with blur,
white icon, strong shadow — matches the Insentis palette. */
[data-id="maximenuck206"] .mobilemenuck-bar-button {
background: rgba(118, 155, 193, 0.85) !important;
-webkit-backdrop-filter: saturate(180%) blur(10px);
backdrop-filter: saturate(180%) blur(10px);
border: 1px solid rgba(16, 44, 104, 0.18) !important;
border-radius: 10px !important;
box-shadow:
0 4px 14px rgba(15, 30, 60, 0.18),
0 1px 3px rgba(15, 30, 60, 0.06) !important;
height: 44px !important;
width: 44px !important;
color: #ffffff !important;
font-size: 22px !important;
line-height: 42px !important;
padding: 0 !important;
top: -16px !important;
right: 14px !important;
transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
}
[data-id="maximenuck206"] .mobilemenuck-bar-button a,
[data-id="maximenuck206"] .mobilemenuck-bar-button span.separator,
[data-id="maximenuck206"] .mobilemenuck-bar-button span.nav-header {
color: #ffffff !important;
font-size: 22px !important;
line-height: 42px !important;
}
[data-id="maximenuck206"] .mobilemenuck-bar-button:hover {
background: rgba(16, 44, 104, 0.92) !important;
border-color: rgba(16, 44, 104, 0.4) !important;
box-shadow:
0 8px 22px rgba(15, 30, 60, 0.28),
0 3px 6px rgba(15, 30, 60, 0.12) !important;
}
[data-id="maximenuck206"] .mobilemenuck-bar-button:active {
transform: scale(0.96);
}
/* CLOSE BUTTON (X) inside the open menu: same subtle look. */
[data-id="maximenuck206"] .mobilemenuck-button {
background: transparent !important;
border: none !important;
border-radius: 8px !important;
box-shadow: none !important;
height: 40px !important;
width: 40px !important;
color: #102c68 !important;
font-size: 28px !important;
line-height: 40px !important;
top: 8px !important;
right: 12px !important;
transition: background 0.2s ease;
}
[data-id="maximenuck206"] .mobilemenuck-button a,
[data-id="maximenuck206"] .mobilemenuck-button span.separator,
[data-id="maximenuck206"] .mobilemenuck-button span.nav-header {
color: #102c68 !important;
font-size: 28px !important;
line-height: 40px !important;
}
[data-id="maximenuck206"] .mobilemenuck-button:hover {
background: rgba(118, 155, 193, 0.12) !important;
}
/* MENU CONTAINER: solid white, clear shadow edge, scrollable.
Compact top/bottom padding. Broader selector in case data-id
is not directly on the .mobilemenuck div. */
[data-id="maximenuck206"].mobilemenuck,
[data-id="maximenuck206"] .mobilemenuck,
.mobilemenuck[data-id="maximenuck206"] {
background: #ffffff !important;
background-image: none !important;
border-left: 1px solid rgba(118, 155, 193, 0.15);
box-shadow: -12px 0 40px rgba(15, 30, 60, 0.18) !important;
padding-top: 8px !important;
padding-bottom: 8px !important;
padding-left: 0 !important;
padding-right: 0 !important;
font-size: 15px !important;
line-height: 1.3 !important;
height: 100vh !important;
max-height: 100vh !important;
overflow-y: auto !important;
-webkit-overflow-scrolling: touch;
}
/* Submenu container also opaque. */
[data-id="maximenuck206"] .mobilemenuck-submenu {
background: #ffffff !important;
}
[data-id="maximenuck206"] .mobilemenuck-item,
[data-id="maximenuck206"] .mobilemenuck-item > div {
background: #ffffff;
}
/* Hide only the title texts — topbar stays visible so the
close button (X) shows up in the top-right corner. */
[data-id="maximenuck206"] .mobilemenuck-title,
[data-id="maximenuck206"] .mobilemenuck-bar-title {
display: none !important;
}
/* Topbar positioned absolutely — takes no space in the flow,
only holds the floating close button. */
[data-id="maximenuck206"] .mobilemenuck-topbar {
background: transparent !important;
border: none !important;
position: absolute !important;
top: 0 !important;
right: 0 !important;
width: auto !important;
height: auto !important;
z-index: 10 !important;
}
/* If a UL wrapper exists: no extra padding, since top/bottom
spacing now lives on the .mobilemenuck container. */
[data-id="maximenuck206"].mobilemenuck > ul,
[data-id="maximenuck206"].mobilemenuck > div > ul {
padding: 0 !important;
margin: 0 !important;
list-style: none !important;
}
/* All items get no margin/padding/min-height of their own, so
item height is driven purely by the .levelN padding. */
[data-id="maximenuck206"] .mobilemenuck-item,
[data-id="maximenuck206"] .mobilemenuck-submenu,
[data-id="maximenuck206"] .mobilemenuck-item ul,
[data-id="maximenuck206"] .mobilemenuck-item li {
margin: 0 !important;
padding: 0 !important;
min-height: 0 !important;
}
/* Text vertically centered in every item box. */
[data-id="maximenuck206"] .mobilemenuck-item > .level1,
[data-id="maximenuck206"] .mobilemenuck-item > .level2,
[data-id="maximenuck206"] .level2 + .mobilemenuck-submenu .mobilemenuck-item > div:not(.mobilemenuck-submenu) {
display: flex !important;
align-items: center !important;
}
/* The inside the item box: full width + flex itself, so the
text really sits vertically centered in the box. */
[data-id="maximenuck206"] .mobilemenuck-item > .level1 > a,
[data-id="maximenuck206"] .mobilemenuck-item > .level2 > a,
[data-id="maximenuck206"] .level2 + .mobilemenuck-submenu .mobilemenuck-item > div:not(.mobilemenuck-submenu) > a {
flex: 1 1 auto !important;
display: flex !important;
align-items: center !important;
min-height: 0 !important;
margin: 0 !important;
}
/* Pull the toggler icon completely out of the layout (display:none
alone should suffice — width/height: 0 as a safety net). */
[data-id="maximenuck206"] .mobilemenuck-togglericon {
display: none !important;
width: 0 !important;
height: 0 !important;
flex: 0 0 0 !important;
}
/* Current marker in the mobile menu (same glass blue as desktop). */
[data-id="maximenuck206"] .mobilemenuck-item > .level1.current,
[data-id="maximenuck206"] .mobilemenuck-item > .level2.current,
[data-id="maximenuck206"] .level2 + .mobilemenuck-submenu .mobilemenuck-item > div.current:not(.mobilemenuck-submenu) {
background: rgba(118, 155, 193, 0.22) !important;
color: #102c68 !important;
}
[data-id="maximenuck206"] .mobilemenuck-item > .level1.current a,
[data-id="maximenuck206"] .mobilemenuck-item > .level2.current a,
[data-id="maximenuck206"] .level2 + .mobilemenuck-submenu .mobilemenuck-item > div.current:not(.mobilemenuck-submenu) a {
color: #102c68 !important;
font-weight: 600 !important;
}
/* LEVEL-1 ITEMS: clear dividers, a bit more breathing room. */
[data-id="maximenuck206"] .mobilemenuck-item > .level1 {
padding: 12px 18px !important;
line-height: 1.25 !important;
font-size: 16px !important;
font-weight: 500 !important;
color: #102c68 !important;
border-bottom: 1px solid rgba(118, 155, 193, 0.12);
transition: background 0.15s ease;
min-height: 40px !important;
}
[data-id="maximenuck206"] .mobilemenuck-item > .level1 a,
[data-id="maximenuck206"] .mobilemenuck-item > .level1 span.separator,
[data-id="maximenuck206"] .mobilemenuck-item > .level1 span.nav-header {
line-height: 1.25 !important;
font-size: 16px !important;
color: #102c68 !important;
font-weight: 500 !important;
}
[data-id="maximenuck206"] .mobilemenuck-item > .level1:hover,
[data-id="maximenuck206"] .mobilemenuck-item.open > .level1 {
background: rgba(118, 155, 193, 0.08);
}
/* LEVEL-2 ITEMS: subtler, indented, with breathing room. */
[data-id="maximenuck206"] .mobilemenuck-item > .level2 {
padding: 9px 18px 9px 30px !important;
line-height: 1.25 !important;
font-size: 15px !important;
color: #102c68 !important;
border-bottom: 1px solid rgba(118, 155, 193, 0.06);
transition: background 0.15s ease;
min-height: 36px !important;
}
[data-id="maximenuck206"] .mobilemenuck-item > .level2 a,
[data-id="maximenuck206"] .mobilemenuck-item > .level2 span.separator,
[data-id="maximenuck206"] .mobilemenuck-item > .level2 span.nav-header {
line-height: 1.25 !important;
font-size: 15px !important;
color: #102c68 !important;
font-weight: 500 !important;
}
[data-id="maximenuck206"] .mobilemenuck-item > .level2:hover,
[data-id="maximenuck206"] .mobilemenuck-item.open > .level2 {
background: rgba(118, 155, 193, 0.06);
color: #102c68 !important;
}
/* LEVEL-3: even subtler, further indented, with breathing room. */
[data-id="maximenuck206"] .level2 + .mobilemenuck-submenu .mobilemenuck-item > div:not(.mobilemenuck-submenu) {
padding: 7px 18px 7px 42px !important;
line-height: 1.25 !important;
font-size: 14px !important;
color: #555 !important;
border-bottom: 1px solid rgba(118, 155, 193, 0.04);
transition: background 0.15s ease;
min-height: 32px !important;
}
[data-id="maximenuck206"] .level2 + .mobilemenuck-submenu .mobilemenuck-item > div:not(.mobilemenuck-submenu) a,
[data-id="maximenuck206"] .level2 + .mobilemenuck-submenu .mobilemenuck-item > div:not(.mobilemenuck-submenu) span.separator,
[data-id="maximenuck206"] .level2 + .mobilemenuck-submenu .mobilemenuck-item > div:not(.mobilemenuck-submenu) span.nav-header {
line-height: 1.25 !important;
font-size: 14px !important;
color: #555 !important;
}
[data-id="maximenuck206"] .level2 + .mobilemenuck-submenu .mobilemenuck-item > div:not(.mobilemenuck-submenu):hover {
background: rgba(118, 155, 193, 0.04);
color: #102c68 !important;
}
/* Mobile: all submenus open from the start, toggle carets off. */
[data-id="maximenuck206"] .mobilemenuck-submenu {
display: block !important;
height: auto !important;
max-height: none !important;
overflow: visible !important;
}
[data-id="maximenuck206"] .mobilemenuck-togglericon,
[data-id="maximenuck206"] .mobilemenuck-togglericon:after {
display: none !important;
}
/* DARK OVERLAY behind the menu. */
[data-id="maximenuck206"] + .mobilemenuck-overlay {
background: rgba(15, 30, 60, 0.55) !important;
-webkit-backdrop-filter: blur(4px);
backdrop-filter: blur(4px);
opacity: 1 !important;
}
}
/* ============================================================
Force-hide the mobile menu when resizing up to desktop width.
Otherwise the drawer stays "stuck" if the user widens the
browser with the menu open (plugin doesn't react to resize).
============================================================ */
@media (min-width: 758px) {
[data-id="maximenuck206"].mobilemenuck,
[data-id="maximenuck206"] + .mobilemenuck-overlay,
.mobilemenuck-overlay {
display: none !important;
}
}
/* ============================================================
SEARCH BOX in the header in glass style.
============================================================ */
.search-wrapper input.js-finder-search-query,
.search-wrapper input.form-control,
input.js-finder-search-query {
background: rgba(255, 255, 255, 0.6) !important;
-webkit-backdrop-filter: saturate(180%) blur(10px);
backdrop-filter: saturate(180%) blur(10px);
border: 1px solid rgba(118, 155, 193, 0.3) !important;
border-radius: 8px !important;
box-shadow:
0 2px 8px rgba(15, 30, 60, 0.06),
inset 0 1px 0 rgba(255, 255, 255, 0.55) !important;
color: #102c68 !important;
padding: 6px 14px !important;
transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.search-wrapper input.js-finder-search-query::placeholder,
.search-wrapper input.form-control::placeholder,
input.js-finder-search-query::placeholder {
color: rgba(16, 44, 104, 0.5) !important;
font-style: italic;
}
.search-wrapper input.js-finder-search-query:hover,
.search-wrapper input.form-control:hover,
input.js-finder-search-query:hover {
background: rgba(255, 255, 255, 0.75) !important;
border-color: rgba(118, 155, 193, 0.45) !important;
}
.search-wrapper input.js-finder-search-query:focus,
.search-wrapper input.form-control:focus,
input.js-finder-search-query:focus {
background: rgba(255, 255, 255, 0.9) !important;
border-color: rgba(118, 155, 193, 0.65) !important;
box-shadow:
0 4px 14px rgba(15, 30, 60, 0.14),
0 0 0 3px rgba(118, 155, 193, 0.18) !important;
outline: none !important;
}
/* ============================================================
SCROLL-UP BUTTON in glass style — more prominent blue circle
with blur, shadow and smooth hover.
============================================================ */
.scroll-top-btn {
background: rgba(118, 155, 193, 0.85) !important;
-webkit-backdrop-filter: saturate(180%) blur(10px);
backdrop-filter: saturate(180%) blur(10px);
border: 1px solid rgba(16, 44, 104, 0.20) !important;
border-radius: 50% !important;
width: 56px !important;
height: 56px !important;
padding: 0 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
box-shadow:
0 6px 18px rgba(15, 30, 60, 0.22),
0 2px 4px rgba(15, 30, 60, 0.08),
inset 0 1px 0 rgba(255, 255, 255, 0.35) !important;
transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
cursor: pointer;
}
.scroll-top-btn:hover {
background: rgba(16, 44, 104, 0.92) !important;
transform: translateY(-2px);
box-shadow:
0 10px 24px rgba(15, 30, 60, 0.30),
0 3px 6px rgba(15, 30, 60, 0.12) !important;
}
.scroll-top-btn:active {
transform: translateY(0) scale(0.96);
}
.scroll-top-btn a {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 100% !important;
height: 100% !important;
margin: 0 !important;
padding: 0 !important;
color: #ffffff !important;
}
/* Hide the original icon (it contains its own outline circle that
clashes with the container circle). */
.scroll-top-btn img {
display: none !important;
}
/* Clean upward chevron drawn in CSS on the inner . */
.scroll-top-btn a::after {
content: "";
display: block;
width: 14px;
height: 14px;
border-top: 3px solid #ffffff;
border-left: 3px solid #ffffff;
transform: translateY(3px) rotate(45deg);
transition: transform 0.15s ease;
}
.scroll-top-btn:hover a::after {
transform: translateY(-1px) rotate(45deg);
}
/* ============================================================
BOX FAZIT in glass style — blue-transparent with blur,
subtle border, soft shadow, inner highlight stripe.
============================================================ */
.box-fazit,
.box-dark {
background: linear-gradient(
135deg,
rgba(0, 82, 133, 0.88) 0%,
rgba(16, 44, 104, 0.85) 100%
) !important;
-webkit-backdrop-filter: saturate(180%) blur(12px);
backdrop-filter: saturate(180%) blur(12px);
border: 1px solid rgba(255, 255, 255, 0.15) !important;
border-radius: 0 !important;
box-shadow:
0 8px 24px rgba(15, 30, 60, 0.22),
0 2px 6px rgba(15, 30, 60, 0.08),
inset 0 1px 0 rgba(255, 255, 255, 0.22) !important;
color: #ffffff !important;
}
/* Booking button at the bottom right in the same glass style as
box-fazit, square (no rounded corners). */
.bookingbox.bookingbtn,
.bookingbox {
background: linear-gradient(
135deg,
rgba(0, 82, 133, 0.88) 0%,
rgba(16, 44, 104, 0.85) 100%
) !important;
background-color: transparent !important;
-webkit-backdrop-filter: saturate(180%) blur(12px);
backdrop-filter: saturate(180%) blur(12px);
border-top: 1px solid rgba(255, 255, 255, 0.18) !important;
border-left: 1px solid rgba(255, 255, 255, 0.10) !important;
border-radius: 0 !important;
box-shadow:
0 -6px 18px rgba(15, 30, 60, 0.18),
inset 0 1px 0 rgba(255, 255, 255, 0.22) !important;
transition: background 0.2s ease !important;
}
.bookingbox:hover,
.bookingbox.bookingbtn:hover {
background: linear-gradient(
135deg,
rgba(0, 61, 102, 0.95) 0%,
rgba(8, 28, 70, 0.92) 100%
) !important;
}
/* ============================================================
Fallback for browsers without backdrop-filter
============================================================ */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
header.sticky-top > .container-fluid.bg-light {
background: rgba(255, 255, 255, 0.96) !important;
}
nav#header-nav ul.maximenuck > li.maximenuck.level1 > div.floatck {
background: rgba(255, 255, 255, 0.98) !important;
}
[data-id="maximenuck206"].mobilemenuck {
background: rgba(255, 255, 255, 0.99) !important;
}
}