@charset "UTF-8";
/*
Theme Name: P&P Dosiertechnik
Theme URI: https://www.pp-dosiertechnik.de/
Author: SIGN+DESIGN Werbeagentur
Author URI: https://www.signunddesign.com/
Description: Wozu lange um den „heißen Brei" reden: Unser Ziel ist Ihr Erfolg! Denn nur erfolgreiche Kunden sind auf Dauer glückliche Kunden. Und um Sie glücklich zu machen, richten wir unsere Energie auf Ihren stimmigen Auftritt und die Entwicklung zielführender Kommunikationsmaßnahmen. Werbung darf bei uns Spaß machen und ist trotzdem niemals Selbstzweck. Was zählt ist Ihr Erfolg! Die Früchte unserer Bemühungen: treue, langjährige Kunden und zahlreiche Weiterempfehlungen – mit ein Grund dafür, dass viele unserer Kunden aus dem Bereich Immobilien stammen. Und hier liegt auch seit über 20 Jahren ein Schwerpunkt unserer Arbeit.
Version: 2.1
*/

/* ========================================
   GLOBAL RESET
   ======================================== */

body, html, h1, h2, h3, h4, h5, h6, p, ul, ol, li {padding: 0;margin: 0;}
body, html {overflow: unset;width: 100%;-webkit-font-smoothing: antialiased;-webkit-overflow-scrolling: touch;}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;}

/* ========================================
   CSS VARIABLES
   ======================================== */

* {
    /* Typography */
    --font-family: "Montserrat", sans-serif;
    --font-size: 16px;
    --line-height: calc(var(--font-size) * 1.8);

    /* Layout */
    --wrp-width: 1300px;
    --header-height: 118px;  /* Höhe des fixierten Headers */
    --submenu-offset: 84px;  /* Offset für Desktop-Submenu */

    /* Colors */
    --primary-color: #3173E8;
    --secondary-color: #0F2348;
    --text-color: #fff;
    --bg-white: #fff;
    --bg-light-gray: #f5f5f5;
    --bg-lighter-gray: #f8f8f8;
    --bg-gray: #efefef;
    --bg-dark: #040C1A;
    --border-gray: #dedede;
    --icon-gray: #a4a4a4;
    --text-dark: #555;

    /* Effects */

    --transition: .2s ease;
    --box-shadow: 0px 5px 13px 0px rgba(0, 0, 0, 0.3);
    --border-radius: 15px;
}

/* montserrat-300 - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 300;
    src: url('assets/fonts/montserrat-v31-latin-300.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* montserrat-regular - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 400;
    src: url('assets/fonts/montserrat-v31-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* montserrat-600 - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 600;
    src: url('assets/fonts/montserrat-v31-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* montserrat-700 - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 700;
    src: url('assets/fonts/montserrat-v31-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* ========================================
   GLOBAL STYLES
   ======================================== */

html {scroll-behavior: smooth;}
body {font-size: var(--font-size);font-family: var(--font-family), sans-serif;line-height: var(--line-height);color: var(--text-color); background: var(--bg-dark);}
body.nav-open {overflow: hidden;}
img {-ms-interpolation-mode: bicubic;vertical-align: bottom;}
svg {width: 100%;height: 100%;}
hr {border: none;height: 1px;background: #ddd;margin: 0;}
.wrp {max-width: var(--wrp-width);width: 90%;margin: 0 auto;position: relative;box-sizing: border-box;}
button {background: none;color: inherit;border: none;padding: 0;font: inherit;cursor: pointer;outline: inherit;}

/* ========================================
   UTILITY CLASSES
   ======================================== */

/* Margins */
.mb {margin-bottom: 100px;}
.mb50 {margin-bottom: 50px;}

/* ========================================
   TYPOGRAPHY
   ======================================== */

h1, h2, h3 {margin: 0; font-weight: 700;}
h1 {font-size: 70px; line-height: 80px;}
h2 {font-size: 30px; line-height: 40px; margin-bottom: 35px;}
h3 {font-size: 20px; line-height: 30px; margin-bottom: 15px;}
h4 {font-size: 18px; line-height: 28px; margin-bottom: 12px;}
a {text-decoration: none;outline: none; color: var(--bg-white);}

.btn.btn-gradient {position: relative;display: inline-flex;align-items: center;justify-content: center;width: fit-content; font-size: 16px; color: #fff; font-weight: 700; background: var(--cta-color); border: 2px solid #c0c6fc; border-radius: var(--border-radius); padding: 15px 40px;margin-top: 40px;cursor: pointer;overflow: hidden;box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);transition: var(--transition);}
.btn.btn-gradient:hover {background: var(--secondary-color);color: #fff;}
.btn-gradient__glow {position: absolute;inset: -1px;opacity: 0;transition: opacity 300ms ease;pointer-events: none;border-radius: inherit;}
.btn.btn-gradient:hover .btn-gradient__glow,
.btn.btn-gradient:focus .btn-gradient__glow {opacity: 1;}
.btn-gradient__text {position: relative;z-index: 20;}

p {margin-bottom: var(--line-height);}
p:last-child {margin-bottom: 0;}
address {font-style: normal;color: var(--text-color);}
address a {display: block;}
ol, ul {margin-bottom: var(--line-height);}
li {margin-left: 20px;}

/* ========================================
   HEADER
   ======================================== */

header {position: fixed;top: 0;width: 100%;z-index: 10;padding: 15px 0;box-sizing: border-box;transition: background 0.4s ease, backdrop-filter 0.4s ease, box-shadow 0.4s ease, padding 0.3s ease; z-index: 21;}
html.scrolled header {background: rgba(4, 12, 26, 0.65);backdrop-filter: blur(20px) saturate(1.4);-webkit-backdrop-filter: blur(20px) saturate(1.4);box-shadow: 0 1px 0 0 rgba(62, 82, 106, 0.25), 0 8px 30px -5px rgba(0, 0, 0, 0.35);}
header .header-grid {display: grid;grid-template-columns: 230px auto;grid-template-rows: auto;justify-items: start;align-items: center;justify-content: space-between;}
header .header-grid .logo {width: 100%; position: relative;}
header .header-grid .logo .jubi {content: ''; position: absolute; top: 50%; transform: translateY(-50%); left: calc(100% + 25px); height: 65px;}
header .header-grid .logo a {display: flex;align-items: center;}
header .header-grid .logo a img {width: 100%;}
header .header-grid .mainnav-toggle {display: none;justify-self: end;}

/* ========================================
   NAVIGATION - DESKTOP
   ======================================== */

#mainnav ul.mainnav.smart {display: none;}
#mainnav {display: block;transform: translate(0);}
#mainnav ul.mainnav.desktop li {list-style-type: none;font-size: 20px;}
#mainnav ul.mainnav.desktop li:not(.wpml-ls-menu-item) {margin-left: 40px;}
#mainnav ul.mainnav.desktop li#menu-item-wpml-ls-2-en {margin-left: 40px;}
#mainnav ul.mainnav.desktop li:first-child {margin-left: 0;}
#mainnav ul.mainnav.desktop li a {display: block;color: var(--text-color);transition: var(--transition);padding: 30px 0; font-size: 18px; text-transform: uppercase; font-weight: 700;}
#mainnav ul.mainnav.desktop li a:hover, #mainnav ul > li.current-menu-item > a {color: var(--primary-color);transition: var(--transition);}

/* ========================================
   NAVIGATION - DESKTOP SUBMENU
   ======================================== */

@media (min-width: 1025px) {
    #mainnav ul.mainnav.desktop {display: flex;align-items: center;margin: 0;}
    html.scrolled #mainnav ul.mainnav li a {padding: 15px 0;transition: var(--transition);}

    /* Parent item with children - Arrow indicator */
    #mainnav ul.mainnav li.menu-item-has-children {position: relative;}
    #mainnav ul.mainnav li.menu-item-has-children > a::after {content: '';display: inline-block;width: 6px;height: 6px;border-right: 2px solid currentColor;border-bottom: 2px solid currentColor;transform: rotate(45deg);margin-left: 8px;margin-bottom: 3px;transition: transform 0.3s ease;}
    #mainnav ul.mainnav li.menu-item-has-children:hover > a::after {transform: rotate(-135deg);}

    /* Submenu Level 1 */
    #mainnav ul.mainnav li.menu-item-has-children ul.sub-menu {position: absolute;top: 100%;left: 50%;transform: translateX(-50%) translateY(10px);min-width: 270px;padding: 12px 0;margin: 0;background: rgba(19, 22, 28, 0.95);backdrop-filter: blur(20px);-webkit-backdrop-filter: blur(20px);border: 1px solid rgba(62, 82, 106, 0.5);border-radius: var(--border-radius);box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(49, 115, 232, 0.1);opacity: 0;visibility: hidden;transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);z-index: 100;}
    #mainnav ul.mainnav li.menu-item-has-children ul.sub-menu::before {content: '';position: absolute;top: -8px;left: 50%;transform: translateX(-50%);border-left: 8px solid transparent;border-right: 8px solid transparent;border-bottom: 8px solid rgba(62, 82, 106, 0.5);}
    #mainnav ul.mainnav li.menu-item-has-children ul.sub-menu::after {content: '';position: absolute;top: -7px;left: 50%;transform: translateX(-50%);border-left: 7px solid transparent;border-right: 7px solid transparent;border-bottom: 7px solid rgba(19, 22, 28, 0.95);}
    #mainnav ul.mainnav li.menu-item-has-children:hover > ul.sub-menu {opacity: 1;visibility: visible;transform: translateX(-50%) translateY(0);}

    /* Submenu Items */
    #mainnav ul.mainnav li.menu-item-has-children ul.sub-menu li {margin: 0;padding: 0;background: transparent;width: 100%;position: relative;}
    #mainnav ul.mainnav li.menu-item-has-children ul.sub-menu li a {display: block;padding: 12px 24px;font-size: 15px; line-height: 24px; font-weight: 500;text-transform: none;color: var(--text-color);position: relative;transition: all 0.2s ease;}
    #mainnav ul.mainnav li.menu-item-has-children ul.sub-menu li a::before {content: '';position: absolute;left: 0;top: 50%;transform: translateY(-50%);width: 3px;height: 0;background: var(--primary-color);border-radius: 0 2px 2px 0;transition: height 0.2s ease;}
    #mainnav ul.mainnav li.menu-item-has-children ul.sub-menu li a:hover {color: var(--primary-color);background: rgba(49, 115, 232, 0.08);padding-left: 28px;}
    #mainnav ul.mainnav li.menu-item-has-children ul.sub-menu li a:hover::before {height: 60%;}
    #mainnav ul.mainnav li.menu-item-has-children ul.sub-menu li.current-menu-item a {color: var(--primary-color);}
    #mainnav ul.mainnav li.menu-item-has-children ul.sub-menu li.current-menu-item a::before {height: 60%;}

    /* Submenu Level 2 */
    #mainnav ul.mainnav li.menu-item-has-children ul.sub-menu li.menu-item-has-children > a::after {content: '';position: absolute;right: 20px;top: 50%;transform: translateY(-50%) rotate(-45deg);width: 5px;height: 5px;border-right: 2px solid currentColor;border-bottom: 2px solid currentColor;transition: transform 0.2s ease;}
    #mainnav ul.mainnav li.menu-item-has-children ul.sub-menu li.menu-item-has-children:hover > a::after {transform: translateY(-50%) rotate(-45deg) translateX(3px);}
    #mainnav ul.mainnav li.menu-item-has-children ul.sub-menu li.menu-item-has-children ul.sub-menu {position: absolute;left: 100%;top: -12px;transform: translateX(10px) translateY(0);opacity: 0;visibility: hidden;}
    #mainnav ul.mainnav li.menu-item-has-children ul.sub-menu li.menu-item-has-children ul.sub-menu::before,
    #mainnav ul.mainnav li.menu-item-has-children ul.sub-menu li.menu-item-has-children ul.sub-menu::after {display: none;}
    #mainnav ul.mainnav li.menu-item-has-children ul.sub-menu li.menu-item-has-children:hover > ul.sub-menu {opacity: 1;visibility: visible;transform: translateX(0) translateY(0);}

    /* Hide mobile elements on desktop */
    #mainnav .head, #mainnav address.contact, #mainnav ul.mainnav li.back {display: none;}
}

/* ========================================
   NAVIGATION - MOBILE OFFCANVAS
   ======================================== */

@media (max-width: 1140px) {
    .mainnav.desktop {display: none;}

    /* Offcanvas Panel */
    #mainnav ul.mainnav.smart {display: block;margin: 0;padding: 0;}
    #mainnav {position: fixed;top: 0;right: 0;bottom: 0;background: rgba(19, 22, 28, 0.98);backdrop-filter: blur(20px);-webkit-backdrop-filter: blur(20px);width: 100%;max-width: 400px;transform: translateX(103%);transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);box-shadow: -10px 0 40px rgba(0, 0, 0, 0.5);z-index: 2;border-left: 1px solid rgba(62, 82, 106, 0.3);overflow-y: auto;}
    #mainnav.active {transform: translateX(0);}

    /* Offcanvas Header */
    #mainnav .head {display: flex;align-items: center;justify-content: space-between;padding: 20px 24px;box-sizing: border-box;border-bottom: 1px solid rgba(62, 82, 106, 0.3);background: rgba(15, 35, 72, 0.5);}
    #mainnav .head > div:first-child {font-size: 14px;font-weight: 600;text-transform: uppercase;letter-spacing: 1px;color: var(--primary-color);}
    #mainnav .head .buttons {display: flex;gap: 10px;}
    #mainnav .head .buttons a {width: 44px;height: 44px;border-radius: 10px;background: rgba(62, 82, 106, 0.3);border: 1px solid rgba(62, 82, 106, 0.5);display: flex;align-items: center;justify-content: center;transition: all 0.2s ease;}
    #mainnav .head .buttons a:hover {background: var(--primary-color);border-color: var(--primary-color);}
    #mainnav .head .buttons a img, #mainnav .head .buttons a svg {width: 20px;height: 20px;filter: brightness(0) invert(1);}
    #mainnav .head .buttons .close-nav {width: 44px;height: 44px;border-radius: 10px;background: rgba(62, 82, 106, 0.3);border: 1px solid rgba(62, 82, 106, 0.5);display: flex;align-items: center;justify-content: center;cursor: pointer;position: relative;transition: all 0.2s ease;}
    #mainnav .head .buttons .close-nav:hover {background: var(--primary-color);border-color: var(--primary-color);}
    #mainnav .head .buttons .close-nav span {position: absolute;width: 18px;height: 2px;background: var(--text-color);border-radius: 2px;transition: all 0.2s ease;}
    #mainnav .head .buttons .close-nav span:first-child {transform: rotate(45deg);}
    #mainnav .head .buttons .close-nav span:last-child {transform: rotate(-45deg);}
    #mainnav .head .buttons .close-nav:hover span {background: var(--bg-white);}

    /* Mobile Menu Items */
    #mainnav ul.mainnav {padding: 16px 0;}
    #mainnav ul.mainnav li {padding: 0;box-sizing: border-box;margin: 0;background: transparent;border-bottom: none;list-style-type: none;position: relative;}
    #mainnav ul.mainnav li a {font-size: 16px;font-weight: 500;padding: 14px 24px;display: block;color: var(--text-color);text-transform: none;transition: all 0.2s ease;position: relative;}
    #mainnav ul.mainnav li a::before {content: '';position: absolute;left: 0;top: 50%;transform: translateY(-50%);width: 3px;height: 0;background: var(--primary-color);border-radius: 0 2px 2px 0;transition: height 0.2s ease;}
    #mainnav ul.mainnav li a:hover {color: var(--primary-color);background: rgba(49, 115, 232, 0.08);padding-left: 28px;}
    #mainnav ul.mainnav li a:hover::before {height: 50%;}
    #mainnav ul.mainnav li.current-menu-item > a {color: var(--primary-color);}
    #mainnav ul.mainnav li.current-menu-item > a::before {height: 50%;}

    /* Submenu Toggle Button */
    #mainnav .opensubnav {cursor: pointer;width: 52px;height: 52px;position: absolute;right: 12px;top: 50%;transform: translateY(-50%);background: transparent;display: flex;align-items: center;justify-content: center;z-index: 100;box-sizing: border-box;border-radius: 10px;transition: all 0.2s ease;}
    #mainnav .opensubnav:hover {background: rgba(62, 82, 106, 0.3);}
    #mainnav .opensubnav.active {background: var(--primary-color);}
    #mainnav .opensubnav::after {content: '';width: 8px;height: 8px;border-right: 2px solid var(--text-color);border-bottom: 2px solid var(--text-color);transform: rotate(45deg);transition: all 0.3s ease;}
    #mainnav .opensubnav.active::after {transform: rotate(-135deg);border-color: var(--bg-white);}

    /* Contact Address */
    #mainnav address.contact {padding: 24px;box-sizing: border-box;display: block;margin-top: 20px;border-top: 1px solid rgba(62, 82, 106, 0.3);color: rgba(255, 255, 255, 0.7);font-size: 14px;line-height: 1.8;}
    #mainnav address.contact strong {color: var(--text-color);font-size: 16px;display: block;margin-bottom: 8px;}
    #mainnav address.contact a {color: var(--primary-color);display: inline;}
    #mainnav address.contact a:hover {text-decoration: underline;}

    /* Submenu Level 1 */
    #mainnav li.menu-item-has-children ul.sub-menu {max-height: 0;overflow: hidden;transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);margin: 0;padding: 0;background: rgba(15, 35, 72, 0.3);border-radius: 0;}
    #mainnav li.menu-item-has-children.active ul.sub-menu {max-height: 500px;}
    #mainnav li.menu-item-has-children ul.sub-menu li {border-bottom: none;}
    #mainnav li.menu-item-has-children ul.sub-menu li a {padding: 12px 24px 12px 40px;font-size: 15px;font-weight: 400;color: rgba(255, 255, 255, 0.8);background: transparent;}
    #mainnav li.menu-item-has-children ul.sub-menu li a::before {left: 24px;}
    #mainnav li.menu-item-has-children ul.sub-menu li a:hover {color: var(--primary-color);background: rgba(49, 115, 232, 0.08);padding-left: 44px;}

    /* Submenu Level 2 */
    #mainnav li.menu-item-has-children ul.sub-menu li.menu-item-has-children .opensubnav {background: transparent;}
    #mainnav li.menu-item-has-children ul.sub-menu li.menu-item-has-children ul.sub-menu {max-height: 0;background: rgba(15, 35, 72, 0.5);}
    #mainnav li.menu-item-has-children ul.sub-menu li.menu-item-has-children.active ul.sub-menu {max-height: 500px;}
    #mainnav li.menu-item-has-children ul.sub-menu li.menu-item-has-children ul.sub-menu li a {padding-left: 56px;}
    #mainnav li.menu-item-has-children ul.sub-menu li.menu-item-has-children ul.sub-menu li a::before {left: 40px;}
    #mainnav li.menu-item-has-children ul.sub-menu li.menu-item-has-children ul.sub-menu li a:hover {padding-left: 60px;}
    #mainnav ul.offcanvas-menu li.back a::before {display: none;}

    /* Hamburger Menu Toggle */
    .mainnav-toggle {border-radius: 12px;display: block;position: relative;z-index: 10;width: 50px;height: 50px;background: var(--primary-color);box-shadow: 0 4px 15px rgba(49, 115, 232, 0.3);transition: all 0.3s ease;}
    .mainnav-toggle:hover {transform: scale(1.05);box-shadow: 0 6px 20px rgba(49, 115, 232, 0.4);}
    .mainnav-toggle.off {border-radius: 12px;display: block;position: absolute;z-index: 10;top: 50%;right: 0;transform: translateY(-50%);width: 50px;height: 50px;background: var(--primary-color);box-shadow: 0 4px 15px rgba(49, 115, 232, 0.3);transition: all 0.3s ease;}
    .mainnav-toggle.off:hover {transform: translateY(-50%) scale(1.05);}
    .mainnav-toggle.off.active {display: none;}
    .mainnav-toggle .btn-mainnav-toggle {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);width: 24px;cursor: pointer;}
    .mainnav-toggle .btn-mainnav-toggle span {display: block;width: 100%;border-radius: 2px;height: 2px;background: var(--bg-white);transition: all .3s ease;position: relative;box-shadow: none;}
    .mainnav-toggle .btn-mainnav-toggle span + span {margin-top: 6px;}
    .mainnav-toggle .btn-mainnav-toggle.active span + span {margin-top: 10px;}
    .mainnav-toggle .btn-mainnav-toggle.active span:nth-child(1) {animation: ease .5s top forwards;}
    .mainnav-toggle .btn-mainnav-toggle.not-active span:nth-child(1) {animation: ease .5s top-2 forwards;}
    .mainnav-toggle .btn-mainnav-toggle.active span:nth-child(2) {animation: ease .5s scaled forwards;}
    .mainnav-toggle .btn-mainnav-toggle.not-active span:nth-child(2) {animation: ease .5s scaled-2 forwards;}
    .mainnav-toggle .btn-mainnav-toggle.active span:nth-child(3) {animation: ease .5s bottom forwards;}
    .mainnav-toggle .btn-mainnav-toggle.not-active span:nth-child(3) {animation: ease .5s bottom-2 forwards;}

    /* Hamburger Animations */
    @keyframes top {
        0% {top: 0;transform: rotate(0);}
        50% {top: 12px;transform: rotate(0);}
        100% {top: 12px;transform: rotate(45deg);}
    }

    @keyframes top-2 {
        0% {top: 12px;transform: rotate(45deg);}
        50% {top: 12px;transform: rotate(0deg);}
        100% {top: 0;transform: rotate(0deg);}
    }

    @keyframes bottom {
        0% {bottom: 0;transform: rotate(0);}
        50% {bottom: 12px;transform: rotate(0);}
        100% {bottom: 12px;transform: rotate(135deg);}
    }

    @keyframes bottom-2 {
        0% {bottom: 12px;transform: rotate(135deg);}
        50% {bottom: 12px;transform: rotate(0);}
        100% {bottom: 0;transform: rotate(0);}
    }

    @keyframes scaled {
        50% {transform: scale(0);}
        100% {transform: scale(0);}
    }

    @keyframes scaled-2 {
        0% {transform: scale(0);}
        50% {transform: scale(0);}
        100% {transform: scale(1);}
    }

    /* Overlay */
    #mainnav-overlay {position: fixed;top: 0;right: 0;left: 0;bottom: 0;background: rgba(4, 12, 26, 0.6);backdrop-filter: blur(8px);-webkit-backdrop-filter: blur(8px);opacity: 0;z-index: -5;transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);visibility: hidden;}
    #mainnav-overlay.active {opacity: 1;z-index: 1;visibility: visible;}
}

/* ========================================
   STAGE / HERO SECTIONS
   ======================================== */

.stage {aspect-ratio: 3/1.25; width: 100%; min-height: 400px; position: relative;}
.stage .stage-overlay {position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 1; background: #ffffff; background: radial-gradient(circle,rgba(255, 255, 255, 0) 5%, rgba(0, 0, 0, 0.7) 100%);}

.teaser {margin-top: -150px;}
.teaser .teaser-stage-grid {display: grid; grid-template-columns: repeat(3,1fr); gap: 3%; position: relative; z-index: 1;}
.teaser .teaser-stage-grid .teaser-item {background: radial-gradient(150rem circle at 0 0, rgba(62, 82, 106, 0), transparent 0%);border-radius: var(--border-radius);display: flex;justify-content: center;align-items: center;position: relative;transition: all 0.15s;}
.teaser .teaser-stage-grid .teaser-item:hover {transform: scale(0.97);}
.teaser .teaser-stage-grid .teaser-item:hover::before {opacity: 1;}
.teaser .teaser-stage-grid .teaser-item::before {content: "";height: 100%;width: 100%;position: absolute;top: 0;left: 0;border-radius: inherit;background: radial-gradient(60rem circle at var(--xPos) var(--yPos), rgba(49, 115, 232, 0.1), transparent 35%);opacity: 0;transition: all 0.15s ease-in-out;}
.teaser .teaser-stage-grid .teaser-item .teaser-content {background-color: #13161c;border-radius: inherit;transition: all 0.25s;height: calc(100% - 0.1rem);width: calc(100% - 0.1rem); padding: 30px 40px; box-sizing: border-box; color: #fff;}
.teaser .teaser-stage-grid .teaser-item .teaser-content h3 {min-height: 60px;}
.teaser .teaser-stage-grid .teaser-item .teaser-content .icon-wrp {width: 40px; height: 40px; margin-bottom: 15px; display: block;}
.teaser .teaser-stage-grid .teaser-item .teaser-content .icon-wrp svg {width: 100%; height: auto;}

.teaser .teaser-stage-grid:hover .teaser-item {background: radial-gradient(100rem circle at var(--xPos) var(--yPos), rgba(62, 82, 106, 0.6), transparent 15%);}

/* Fallback für Browser ohne aspect-ratio Support */
@supports not (aspect-ratio: 3/1) {
    .stage {padding-top: 33.33%;}
}

/* Stage Slider (Frontpage Crossfade) */
.stage-slider {position: absolute;top: 0;left: 0;width: 100%;height: 100%;}
.stage-slide {position: absolute;top: 0;left: 0;width: 100%;height: 100%;opacity: 0;transition: opacity 1.2s ease-in-out;z-index: 0;}
.stage-slide.active {opacity: 1;z-index: 1;}
.stage-slide img {width: 100%;height: 100%;object-fit: cover;object-position: center;}
.stage-dots {position: absolute;bottom: 70px;left: 76%;transform: translateX(-50%);display: flex;gap: 10px;z-index: 3;}
.stage-dot {width: 12px;height: 12px;border-radius: 50%;border: 2px solid rgba(255, 255, 255, 0.6);background: transparent;cursor: pointer;padding: 0;transition: all 0.3s ease;position: relative;overflow: hidden;}
.stage-dot::after {content: '';position: absolute;inset: 0;border-radius: 50%;background: var(--primary-color);transform: scale(0);transition: transform 0.3s ease;}
.stage-dot.active {border-color: var(--primary-color);box-shadow: 0 0 10px rgba(49, 115, 232, 0.4);}
.stage-dot.active::after {transform: scale(1);}
.stage-dot:hover {border-color: #fff;transform: scale(1.2);}

.stage .wrp {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);z-index: 2;}
.stage img {width: 100%;height: 100%;object-fit: cover;object-position: center;}
.stage.subpage {aspect-ratio: 3/.7;width: 100%;position: relative;}
.stage.subpage .title {position: absolute; bottom: 75px; left: calc((100% - var(--wrp-width)) / 2); z-index: 2;}
.stage.subpage .title h1 {font-size: 35px; line-height: 45px;}

@supports not (aspect-ratio: 3/.7) {
    .stage.subpage {padding-top: 23.33%;}
}

/* ========================================
   PAGE LAYOUT
   ======================================== */

main.withsidebar .page-build {display: grid;grid-template-columns: 70% 26%;align-items: flex-start;justify-content: space-between;max-width: var(--wrp-width);width: 90%;margin: 0 auto;}
main.withsidebar .content .wrp {width: 100%;}

/* ========================================
   CONTENT BLOCKS
   ======================================== */

/* Text Block */
.text.multiple-col .wrp {-webkit-columns: 2 350px;-moz-columns: 2 350px;columns: 2 350px;-webkit-column-gap: 4em;-moz-column-gap: 4em;column-gap: 4em;}
.text.align-center {text-align: center;}

/* Text + Image Block */
.textbild .wrp {display: grid;align-items: center;justify-content: space-between;box-sizing: border-box;}
.textbild .text {border-radius: 5px 0 0 5px;box-sizing: border-box;}
.textbild .bild {width: 100%;height: 100%; border-radius: var(--border-radius); overflow: hidden;}
.textbild .bild img {width: 100%;height: 100%;object-fit: cover;}

/* Teasercards */
.teasercards {position: relative;}
.teasercards .wrp {position: relative;overflow: visible;}
.teasercards .cards.no-carousel {display: grid;grid-column-gap: 30px;grid-row-gap: 30px;margin: 0;}
.teasercards .cards.no-carousel li {list-style-type: none;margin: 0;}
.teasercards .splide {overflow: visible;position: relative;}
.teasercards .splide .splide__track {overflow: hidden;}
.teasercards .splide ul.cards {display: flex;grid-column-gap: unset;}
.teasercards .splide__arrow--prev {left: -100px;}
.teasercards .splide__arrow--next {right: -100px;}

/* Teasercard Item */
.teasercard-item {display: flex;flex-direction: column;border-radius: var(--border-radius);position: relative;background: radial-gradient(150rem circle at 0 0, rgba(62, 82, 106, 0), transparent 0%);transition: all 0.2s ease;overflow: hidden;text-decoration: none;color: var(--text-color);}
.teasercard-item:hover {transform: translateY(-4px);color: var(--text-color);}
.teasercard-item:hover::before {opacity: 1;}

/* Glow Effekt */
.teasercard-item::before {content: "";height: 100%;width: 100%;position: absolute;top: 0;left: 0;border-radius: inherit;background: radial-gradient(60rem circle at var(--xPos) var(--yPos), rgba(49, 115, 232, 0.1), transparent 35%);opacity: 0;transition: all 0.15s ease-in-out;z-index: 3;pointer-events: none;}

/* Dynamische Border */
.teasercard-item::after {content: "";position: absolute;inset: 0;border-radius: inherit;padding: 1px;background: radial-gradient(800px circle at var(--xPos, -100px) var(--yPos, -100px), var(--primary-color), #3E526A 40%);-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);-webkit-mask-composite: xor;mask-composite: exclude;pointer-events: none;transition: all 0.15s ease-in-out;z-index: 4;}

/* Hover Grid Glow */
.teasercards .cards:hover .teasercard-item {background: radial-gradient(100rem circle at var(--xPos) var(--yPos), rgba(62, 82, 106, 0.4), transparent 20%);}

/* Bild */
.teasercard-item .img-wrp {width: 100%;aspect-ratio: 2/1.3;display: block;overflow: hidden;position: relative;z-index: 1;}

@supports not (aspect-ratio: 2/1.3) {
    .teasercard-item .img-wrp {padding-top: 65%;position: relative;}
    .teasercard-item .img-wrp img {position: absolute;top: 0;left: 0;}
}

.teasercard-item .img-wrp img {width: 100%;height: 100%;object-fit: cover;transition: transform 0.4s ease;}
.teasercard-item:hover .img-wrp img {transform: scale(1.05);}

/* Content */
.teasercard-item .teasercard-content {display: flex;flex-direction: column;flex: 1;padding: 28px 24px;background: #13161c;position: relative;z-index: 2;}
.teasercard-item .teasercard-content h3 {font-size: 20px;line-height: 1.3;margin-bottom: 12px;color: var(--text-color);font-weight: 600;}
.teasercard-item .teasercard-content p {font-size: 14px;line-height: 1.7;color: rgba(255, 255, 255, 0.7);margin-bottom: 0;flex: 1;}

/* Button */
.teasercard-item .teasercard-content .btn {display: inline-flex;align-items: center;gap: 8px;margin-top: 20px;padding: 10px 20px;background: rgba(49, 115, 232, 0.1);border: 1px solid rgba(49, 115, 232, 0.3);border-radius: 8px;color: var(--primary-color);font-size: 14px;font-weight: 600;transition: all 0.2s ease;width: fit-content;}
.teasercard-item:hover .teasercard-content .btn {background: var(--primary-color);border-color: var(--primary-color);color: #fff;}

/* Image Block */
.image img {display: block;width: 100%;height: auto;}
.bildtrenner {width: 100%;aspect-ratio: 3/1;overflow: hidden;position: relative;}

@supports not (aspect-ratio: 3/1) {
    .bildtrenner {padding-top: 33.33%;}
}

.bildtrenner img {width: 100%;height: 100%;object-fit: cover;object-position: center;}
.bildtrenner .wrp {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);z-index: 2;}

/* ========================================
   GALLERY COMPONENT
   ======================================== */

/* Gemeinsame Overlay-Styles für Galerie und Video */
.gallery-overlay {width: 100%;position: absolute;height: 100%;top: 0;left: 0;right: 0;bottom: 0;background: var(--secondary-color);opacity: 0;transition: var(--transition);}
.gallery-overlay .icon-wrp {position: absolute;top: 50%;left: 50%;width: 45px;height: 45px;transform: translate(-50%, -50%);}
.gallery-overlay .icon-wrp svg {width: 100%;height: 100%;transform: scale(0);transition: var(--transition);}
.gallery-overlay .icon-wrp svg path {fill: var(--bg-white);}

/* Image Gallery */
.gallery .glightbox-gallery:not(.masonry) {display: grid;gap: 50px;margin-bottom: 0;}
.gallery .glightbox-gallery li {list-style-type: none;margin: 0 0 25px 0;border-radius: 5px;overflow: hidden;aspect-ratio: 1;}

@supports not (aspect-ratio: 1) {
    .gallery .glightbox-gallery li {padding-top: 100%;position: relative;}
    .gallery .glightbox-gallery li a {position: absolute;top: 0;left: 0;width: 100%;}
}

.gallery .glightbox-gallery:not(.masonry) li {margin: 0;}
.gallery .glightbox-gallery li a {position: relative;display: block;overflow: hidden;height: 100%;}
.gallery .glightbox-gallery li a .overlay {width: 100%;position: absolute;height: 100%;top: 0;left: 0;right: 0;bottom: 0;background: var(--secondary-color);opacity: 0;transition: var(--transition);}
.gallery .glightbox-gallery li a:hover .overlay {opacity: 0.6;transition: var(--transition);}
.gallery .glightbox-gallery li a .overlay .icon-wrp {position: absolute;top: 50%;left: 50%;width: 45px;height: 45px;transform: translate(-50%, -50%);}
.gallery .glightbox-gallery li a .overlay .icon-wrp svg {width: 100%;height: 100%;transform: scale(0);transition: var(--transition);}
.gallery .glightbox-gallery li a .overlay .icon-wrp svg path {fill: var(--bg-white);}
.gallery .glightbox-gallery li a:hover .overlay .icon-wrp svg {transform: scale(1);transition: var(--transition);}
.gallery .glightbox-gallery li img {width: 100%;height: 100%;object-fit: cover;}
.gallery .glightbox-gallery.masonry {gap: 25px;columns: 4;margin: 0 auto;}

/* Video Gallery */
.gallery .video-gallery-grid {display: grid;grid-column-gap: 50px;grid-row-gap: 50px;}
.gallery .video-gallery-grid .video-gallery-item {height: 220px;width: 100%;display: block;position: relative;overflow: hidden;}
.gallery .video-gallery-grid .video-gallery-item .overlay {width: 100%;position: absolute;height: 100%;top: 0;left: 0;right: 0;bottom: 0;background: var(--secondary-color);opacity: 0;transition: var(--transition);z-index: 4;}
.gallery .video-gallery-grid .video-gallery-item:hover .overlay {opacity: 0.6;transition: var(--transition);}
.gallery .video-gallery-grid .video-gallery-item .overlay .icon-wrp {position: absolute;top: 50%;left: 50%;width: 45px;height: 45px;transform: translate(-50%, -50%);}
.gallery .video-gallery-grid .video-gallery-item .overlay .icon-wrp svg {width: 100%;height: 100%;transform: scale(0);transition: var(--transition);}
.gallery .video-gallery-grid .video-gallery-item .overlay .icon-wrp svg path {fill: var(--bg-white);}
.gallery .video-gallery-grid .video-gallery-item:hover .overlay .icon-wrp svg {transform: scale(1);transition: var(--transition);}
.gallery .video-gallery-grid .video-gallery-item img {height: 100%;width: 100%;object-fit: cover;object-position: center;transform: scale(1.2);}

/* ========================================
   EMBED / VIDEO
   ======================================== */

.embed .respo-video {position: relative;height: 0;overflow: hidden; padding-bottom: 56.25%;}
.embed .respo-video iframe {position: absolute;top: 0;left: 0;width: 100%;height: 100%;}
.embed .respo-video ._brlbs-cb-youtube {margin-bottom: -56.25%;}

/* ========================================
   ACCORDION
   ======================================== */

.accordion .wrp {display: flex;flex-direction: column;gap: 10px;}

/* Item */
.accordion .item-accordion {border-radius: var(--border-radius);overflow: hidden;border: 1px solid rgba(62, 82, 106, 0.35);background: rgba(13, 18, 28, 0.6);backdrop-filter: blur(8px);-webkit-backdrop-filter: blur(8px);transition: border-color 0.25s ease, box-shadow 0.25s ease;margin-bottom: 0;}
.accordion .item-accordion:hover {border-color: rgba(49, 115, 232, 0.4);}
.accordion .item-accordion.active {border-color: rgba(49, 115, 232, 0.55);box-shadow: 0 4px 24px rgba(49, 115, 232, 0.08);}

/* Header */
.accordion .item-accordion-head {cursor: pointer;position: relative;padding: 20px 64px 20px 24px;margin-bottom: 0;background: transparent;border: none;display: flex;align-items: center;font-size: 16px;font-weight: 600;color: var(--text-color);line-height: 1.4;transition: color 0.2s ease;user-select: none;}
.accordion .item-accordion.active .item-accordion-head {color: var(--primary-color);}

/* Chevron Button */
.accordion .item-accordion-btn {position: absolute;right: 20px;top: 50%;transform: translateY(-50%);width: 30px;height: 30px;border-radius: 8px;background: rgba(49, 115, 232, 0.1);border: 1px solid rgba(49, 115, 232, 0.25);display: flex;align-items: center;justify-content: center;transition: background 0.25s ease, border-color 0.25s ease;float: none;cursor: pointer;}
.accordion .item-accordion-btn::before {content: '';display: block;width: 9px;height: 9px;border-right: 2px solid var(--primary-color);border-bottom: 2px solid var(--primary-color);transform: rotate(45deg) translate(-1px, -2px);transition: transform 0.3s ease;}

/* Reset alte +/- Styles */
.accordion .item-accordion.hidden .item-accordion-btn::before,
.accordion .item-accordion.active .item-accordion-btn::before,
.accordion .item-accordion.hidden.active .item-accordion-btn::before {content: '';}

.accordion .item-accordion.active .item-accordion-btn {background: rgba(49, 115, 232, 0.2);border-color: rgba(49, 115, 232, 0.6);}
.accordion .item-accordion.active .item-accordion-btn::before {transform: rotate(-135deg) translate(-1px, -2px);}

/* Content */
.accordion .item-accordion-content {padding: 0 24px 24px;color: rgba(255, 255, 255, 0.8);font-size: 15px;line-height: 1.8;border-top: 1px solid rgba(62, 82, 106, 0.3);}
.accordion .item-accordion-content p:last-child,
.accordion .item-accordion-content ul:last-child,
.accordion .item-accordion-content ol:last-child {margin-bottom: 0;}
.accordion .item-accordion-content ul,
.accordion .item-accordion-content ol {padding-left: 20px;}
.accordion .item-accordion-content a {color: var(--primary-color);text-decoration: underline;text-underline-offset: 3px;}
.accordion .item-accordion-content a:hover {color: #fff;}

/* Initialer Zustand: geschlossen */
.accordion .item-accordion.hidden .item-accordion-content {display: none;}
.accordion .item-accordion.hidden .item-accordion-content::after {display: none;}

/* ========================================
   WORKFLOW
   ======================================== */

.workflow {}
.workflow .workflow-grid {display: grid;grid-template-columns: repeat(3, 1fr);grid-column-gap: 50px; grid-row-gap: 75px;}
.workflow .workflow-grid .workflow-item:not(.intro) {border-radius: var(--border-radius); padding: 50px 25px 25px 25px; box-sizing: border-box; position: relative; background: radial-gradient(150rem circle at 0 0, rgba(62, 82, 106, 0), transparent 0%); transition: all 0.15s;}
.workflow .workflow-grid .workflow-item:not(.intro):hover {transform: scale(0.97);}
.workflow .workflow-grid .workflow-item:not(.intro):hover::before {opacity: 1;}
.workflow .workflow-grid .workflow-item:not(.intro)::before {content: "";height: 100%;width: 100%;position: absolute;top: 0;left: 0;border-radius: inherit;background: radial-gradient(60rem circle at var(--xPos) var(--yPos), rgba(49, 115, 232, 0.1), transparent 35%);opacity: 0;transition: all 0.15s ease-in-out; z-index: 1; pointer-events: none;}
.workflow .workflow-grid .workflow-item:not(.intro)::after {content: "";position: absolute;inset: 0;border-radius: inherit;padding: 2px;background: radial-gradient(800px circle at var(--xPos, -100px) var(--yPos, -100px), var(--primary-color), #3E526A 40%);-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);-webkit-mask-composite: xor;mask-composite: exclude;pointer-events: none;transition: all 0.15s ease-in-out;}
.workflow .workflow-grid:hover .workflow-item:not(.intro) {background: radial-gradient(100rem circle at var(--xPos) var(--yPos), rgba(62, 82, 106, 0.6), transparent 15%);}
.workflow .workflow-grid .workflow-item:not(.intro) .icon {width: 82px; height: 82px; display: grid; place-items: center; position: absolute; top: -41px; left: 25px; background: #0F2348; border-radius: 50%; z-index: 2;}
.workflow .workflow-grid .workflow-item:not(.intro) .icon svg {width: 40px;}

/* ========================================
   PRODUKT
   ======================================== */

.produkt {}
.produkt .wrp {}

/* Produkt Item Card */
.produkt .produkt-item {display: grid;grid-template-columns: 1fr 1fr;gap: 0;border-radius: var(--border-radius);position: relative;background: radial-gradient(150rem circle at 0 0, rgba(62, 82, 106, 0), transparent 0%);transition: all 0.15s;overflow: hidden;margin-bottom: 50px;}
.produkt .produkt-item:last-child {margin-bottom: 0;}
.produkt .produkt-item:hover::before {opacity: 1;}

/* Glow Effect */
.produkt .produkt-item::before {content: "";height: 100%;width: 100%;position: absolute;top: 0;left: 0;border-radius: inherit;background: radial-gradient(60rem circle at var(--xPos) var(--yPos), rgba(49, 115, 232, 0.1), transparent 35%);opacity: 0;transition: all 0.15s ease-in-out;z-index: 1;pointer-events: none;}

/* Dynamic Border */
.produkt .produkt-item::after {content: "";position: absolute;inset: 0;border-radius: inherit;padding: 2px;background: radial-gradient(800px circle at var(--xPos, -100px) var(--yPos, -100px), var(--primary-color), #3E526A 40%);-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);-webkit-mask-composite: xor;mask-composite: exclude;pointer-events: none;transition: all 0.15s ease-in-out;}

/* Hover Grid Effect */
.produkt .wrp:hover .produkt-item {background: radial-gradient(100rem circle at var(--xPos) var(--yPos), rgba(62, 82, 106, 0.4), transparent 20%);}

/* Produktbeschreibung */
.produkt .produkt-item .produktbeschreibung {padding: 40px;box-sizing: border-box;position: relative;z-index: 2;display: flex;flex-direction: column;justify-content: center;}
.produkt .produkt-item .produktbeschreibung h2 {font-size: 28px;line-height: 1.3;margin-bottom: 20px;color: var(--text-color);}
.produkt .produkt-item .produktbeschreibung h3 {font-size: 18px;line-height: 1.4;margin-bottom: 20px;color: var(--primary-color);font-weight: 600;}
.produkt .produkt-item .produktbeschreibung p {color: rgba(255, 255, 255, 0.8);font-size: 15px;line-height: 1.7;margin-bottom: 16px;}
.produkt .produkt-item .produktbeschreibung p:last-child {margin-bottom: 0;}

/* Produkt Specs List */
.produkt .produkt-item .produktbeschreibung ul {list-style: none;margin: 20px 0 0 0;padding: 20px 0 0 0;border-top: 1px solid rgba(62, 82, 106, 0.3);}
.produkt .produkt-item .produktbeschreibung ul li {position: relative;padding: 8px 0 8px 20px;color: rgba(255, 255, 255, 0.8);font-size: 14px;}
.produkt .produkt-item .produktbeschreibung ul li::before {content: '';position: absolute;left: 0;top: 50%;transform: translateY(-50%);width: 8px;height: 8px;border-radius: 50%;background: var(--primary-color);opacity: 0.6;}

/* Produktbild */
.produkt .produkt-item .produktbild {position: relative;z-index: 2;display: flex;align-items: center;justify-content: center;box-sizing: border-box;background: rgba(255, 255, 255, 0.03); padding: 20px;}
.produkt .produkt-item .produktbild img {max-width: 100%;height: auto;object-fit: contain;border-radius: 8px;transition: transform 0.3s ease;}


/* ========================================
   TEAM BLOCK
   ======================================== */

.team .team-grid {display: grid;grid-template-columns: repeat(3, 1fr);gap: 30px;}
.team.spalten-4 .team-grid {grid-template-columns: repeat(4, 1fr);gap: 25px;}

.team .team-item {border-radius: var(--border-radius);position: relative;background: radial-gradient(150rem circle at 0 0, rgba(62, 82, 106, 0), transparent 0%);transition: all 0.15s;overflow: hidden;}
.team .team-item:hover::before {opacity: 1;}
.team .team-item::before {content: "";height: 100%;width: 100%;position: absolute;top: 0;left: 0;border-radius: inherit;background: radial-gradient(60rem circle at var(--xPos) var(--yPos), rgba(49, 115, 232, 0.1), transparent 35%);opacity: 0;transition: all 0.15s ease-in-out;z-index: 1;pointer-events: none;}
.team .team-item::after {content: "";position: absolute;inset: 0;border-radius: inherit;padding: 2px;background: radial-gradient(800px circle at var(--xPos, -100px) var(--yPos, -100px), var(--primary-color), #3E526A 40%);-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);-webkit-mask-composite: xor;mask-composite: exclude;pointer-events: none;transition: all 0.15s ease-in-out;}
.team .team-grid:hover .team-item {background: radial-gradient(100rem circle at var(--xPos) var(--yPos), rgba(62, 82, 106, 0.4), transparent 20%);}

.team .team-item .team-bild {position: relative;aspect-ratio: 1/1;overflow: hidden;background: rgba(15, 35, 72, 0.5);}
.team .team-item .team-bild img {width: 100%;height: 100%;object-fit: cover;transition: transform 0.3s ease; object-position: center top;}
.team .team-item:hover .team-bild img {transform: scale(1.05);}
.team .team-item .team-placeholder {width: 100%;height: 100%;display: flex;align-items: center;justify-content: center;background: linear-gradient(135deg, rgba(15, 35, 72, 0.8), rgba(62, 82, 106, 0.3));}
.team .team-item .team-placeholder svg {width: 40%;height: 40%;color: rgba(255, 255, 255, 0.2);}
.team .team-item .team-content {padding: 24px;box-sizing: border-box;position: relative;z-index: 2;}
.team .team-item .team-name {font-size: 20px;font-weight: 600;line-height: 1.3;margin-bottom: 8px;color: var(--text-color);}
.team .team-item .team-funktion {font-size: 14px;color: var(--primary-color);margin-bottom: 0;line-height: 1.5;font-weight: 500;}

/* Kontakt Links */
.team .team-item .team-kontakt {display: flex;flex-direction: column;gap: 8px;margin-top: 16px;padding-top: 16px;border-top: 1px solid rgba(62, 82, 106, 0.3);}
.team .team-item .kontakt-item {display: flex;align-items: center;gap: 10px;color: var(--text-color);font-size: 13px;padding: 8px 12px;background: rgba(62, 82, 106, 0.15);border-radius: 8px;border: 1px solid rgba(62, 82, 106, 0.2);transition: all 0.2s ease;overflow: hidden;position: relative;}
.team .team-item .kontakt-item:hover {background: rgba(49, 115, 232, 0.15);border-color: var(--primary-color);color: var(--primary-color);transform: translateX(4px);}
.team .team-item .kontakt-item svg {width: 16px;height: 16px;flex-shrink: 0;stroke: currentColor;position: relative;z-index: 2;}
.team .team-item .kontakt-item span:not(.email-marquee):not(.email-text-truncated):not(.email-text-full) {white-space: nowrap;overflow: hidden;text-overflow: ellipsis;display: inline-block;transition: transform 0.3s ease;}

/* E-Mail Marquee Effekt */
.team .team-item .kontakt-item.email {position: relative;overflow: hidden;}
.team .team-item .kontakt-item.email .email-marquee {position: relative;overflow: hidden;flex: 1;min-width: 0;-webkit-mask-image: linear-gradient(90deg, #000 0%, #000 calc(100% - 25px), transparent 100%);mask-image: linear-gradient(90deg, #000 0%, #000 calc(100% - 25px), transparent 100%);}
.team .team-item .kontakt-item.email .email-marquee .email-text-truncated {white-space: nowrap;overflow: hidden;text-overflow: ellipsis;display: block;transition: opacity 0.2s ease;}
.team .team-item .kontakt-item.email .email-marquee .email-text-full {white-space: nowrap;display: block;opacity: 0;position: absolute;top: 0;left: 0;transition: opacity 0.2s ease;}
.team .team-item .kontakt-item.email:hover .email-marquee {-webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 15px, #000 calc(100% - 25px), transparent 100%);mask-image: linear-gradient(90deg, transparent 0%, #000 15px, #000 calc(100% - 25px), transparent 100%);}
.team .team-item .kontakt-item.email:hover .email-marquee .email-text-truncated {opacity: 0;}
.team .team-item .kontakt-item.email:hover .email-marquee .email-text-full {opacity: 1;animation: emailMarquee 6s linear infinite;}

@keyframes emailMarquee {
    0% {transform: translateX(0);}
    100% {transform: translateX(-50%);}
}

.team.spalten-4 .team-item .team-content {padding: 20px;}
.team.spalten-4 .team-item .team-name {font-size: 18px;}
.team.spalten-4 .team-item .team-funktion {font-size: 13px;}
.team.spalten-4 .team-item .kontakt-item {font-size: 12px;padding: 6px 10px;}
.team.spalten-4 .team-item .kontakt-item svg {width: 14px;height: 14px;}

/* Team Responsive */
@media (max-width: 1024px) {
    .team .team-grid {grid-template-columns: repeat(2, 1fr);gap: 25px;}
    .team.spalten-4 .team-grid {grid-template-columns: repeat(2, 1fr);gap: 25px;}
}
@media (max-width: 650px) {
    .team .team-grid {grid-template-columns: 1fr;gap: 20px;}
    .team.spalten-4 .team-grid {grid-template-columns: 1fr;gap: 20px;}
    .team .team-item .team-content {padding: 20px;}
}

/* ========================================
   BLOG & SIDEBAR
   ======================================== */

main.withsidebar .content .blog-grid {display: grid;grid-template-columns: repeat(3, 1fr);grid-column-gap: 50px;grid-row-gap: 50px;}
main.withsidebar .content .blog-grid .post {width: 100%;}
main.withsidebar .content .blog-grid .post img {width: 100%;height: auto;object-fit: cover;}
article.singlepost .post-image img {width: 100%;height: auto;object-fit: cover;}

/* Sidebar */
main.withsidebar .sidebar {width: 100%;position: -webkit-sticky;position: sticky;top: 150px;background: rgba(19, 22, 28, 0.95);backdrop-filter: blur(20px);-webkit-backdrop-filter: blur(20px);padding: 0;box-sizing: border-box;border-radius: var(--border-radius);border: 1px solid rgba(62, 82, 106, 0.3);overflow: hidden;}
main.withsidebar .sidebar li.menu-item-type-wpml_ls_menu_item {display: none;}

/* Sidebar Content Container */
main.withsidebar .sidebar .sidebar-content {padding: 0;}

/* Sidebar Sections */
main.withsidebar .sidebar .sidebar-contact,
main.withsidebar .sidebar .sidebar-nav,
main.withsidebar .sidebar .widget {padding: 24px;border-bottom: 1px solid rgba(62, 82, 106, 0.3);margin-bottom: 0;}
main.withsidebar .sidebar .sidebar-contact:last-child,
main.withsidebar .sidebar .sidebar-nav:last-child,
main.withsidebar .sidebar .widget:last-child {border-bottom: none;}

/* Sidebar Headlines */
main.withsidebar .sidebar h3,
main.withsidebar .sidebar .widget-title {font-size: 14px;font-weight: 600;text-transform: uppercase;letter-spacing: 1px;color: var(--primary-color);margin-bottom: 20px;padding-bottom: 12px;border-bottom: 1px solid rgba(62, 82, 106, 0.3);position: relative;}
main.withsidebar .sidebar h3::after,
main.withsidebar .sidebar .widget-title::after {content: '';position: absolute;bottom: -1px;left: 0;width: 40px;height: 2px;background: var(--primary-color);}

/* Sidebar Contact */
main.withsidebar .sidebar .sidebar-contact address {font-style: normal;color: rgba(255, 255, 255, 0.8);font-size: 14px;line-height: 1.8;}
main.withsidebar .sidebar .sidebar-contact address a {display: block;color: var(--text-color);margin-top: 8px;padding: 10px 16px;background: rgba(62, 82, 106, 0.2);border-radius: 8px;border: 1px solid rgba(62, 82, 106, 0.3);transition: all 0.2s ease;}
main.withsidebar .sidebar .sidebar-contact address a:hover {background: rgba(49, 115, 232, 0.15);border-color: var(--primary-color);color: var(--primary-color);transform: translateX(4px);}

/* Sidebar Navigation */
main.withsidebar .sidebar .sidebar-nav ul,
main.withsidebar .sidebar .sidebar-nav .menu {list-style: none;margin: 0;padding: 0;}
main.withsidebar .sidebar .sidebar-nav ul li,
main.withsidebar .sidebar .sidebar-nav .menu li {margin: 0;position: relative;}
main.withsidebar .sidebar .sidebar-nav ul li a,
main.withsidebar .sidebar .sidebar-nav .menu li a {display: block;padding: 8px 16px;color: var(--text-color);font-size: 15px;font-weight: 500;border-radius: 8px;transition: all 0.2s ease;position: relative;}
main.withsidebar .sidebar .sidebar-nav ul li a::before,
main.withsidebar .sidebar .sidebar-nav .menu li a::before {content: '';position: absolute;left: 0;top: 50%;transform: translateY(-50%);width: 3px;height: 0;background: var(--primary-color);border-radius: 0 2px 2px 0;transition: height 0.2s ease;}
main.withsidebar .sidebar .sidebar-nav ul li a:hover,
main.withsidebar .sidebar .sidebar-nav .menu li a:hover {color: var(--primary-color);background: rgba(49, 115, 232, 0.08);padding-left: 20px;}
main.withsidebar .sidebar .sidebar-nav ul li a:hover::before,
main.withsidebar .sidebar .sidebar-nav .menu li a:hover::before {height: 50%;}
main.withsidebar .sidebar .sidebar-nav ul li.current-menu-item > a,
main.withsidebar .sidebar .sidebar-nav .menu li.current-menu-item > a,
main.withsidebar .sidebar .sidebar-nav ul li.current_page_item > a,
main.withsidebar .sidebar .sidebar-nav .menu li.current_page_item > a,
main.withsidebar .sidebar .sidebar-nav ul li.current-menu-ancestor > a,
main.withsidebar .sidebar .sidebar-nav .menu li.current-menu-ancestor > a,
main.withsidebar .sidebar .sidebar-nav ul li.current-menu-parent > a,
main.withsidebar .sidebar .sidebar-nav .menu li.current-menu-parent > a {color: var(--primary-color);background: rgba(49, 115, 232, 0.08);}
main.withsidebar .sidebar .sidebar-nav ul li.current-menu-item > a::before,
main.withsidebar .sidebar .sidebar-nav .menu li.current-menu-item > a::before,
main.withsidebar .sidebar .sidebar-nav ul li.current_page_item > a::before,
main.withsidebar .sidebar .sidebar-nav .menu li.current_page_item > a::before,
main.withsidebar .sidebar .sidebar-nav ul li.current-menu-ancestor > a::before,
main.withsidebar .sidebar .sidebar-nav .menu li.current-menu-ancestor > a::before,
main.withsidebar .sidebar .sidebar-nav ul li.current-menu-parent > a::before,
main.withsidebar .sidebar .sidebar-nav .menu li.current-menu-parent > a::before {height: 50%;}

/* Sidebar Navigation Submenu */
main.withsidebar .sidebar .sidebar-nav ul ul,
main.withsidebar .sidebar .sidebar-nav .menu .sub-menu {margin-left: 0;padding-left: 16px;border-left: 1px solid rgba(62, 82, 106, 0.3);margin-top: 4px;margin-bottom: 4px;}
main.withsidebar .sidebar .sidebar-nav ul ul li a,
main.withsidebar .sidebar .sidebar-nav .menu .sub-menu li a {font-size: 14px;font-weight: 400;padding: 6px 15px;color: rgba(255, 255, 255, 0.7); line-height: 24px;}
main.withsidebar .sidebar .sidebar-nav ul ul li a:hover,
main.withsidebar .sidebar .sidebar-nav .menu .sub-menu li a:hover {color: var(--primary-color);}

/* Sidebar Zertifikat */
main.withsidebar .sidebar .sidebar-zertifikat {padding: 24px;border-bottom: 1px solid rgba(62, 82, 106, 0.3);}
main.withsidebar .sidebar .sidebar-zertifikat:last-child {border-bottom: none;}
main.withsidebar .sidebar .sidebar-zertifikat .zertifikat-btn {display: flex;align-items: center;gap: 12px;padding: 14px 16px;background: rgba(62, 82, 106, 0.15);border: 1px solid rgba(62, 82, 106, 0.3);border-radius: 10px;color: var(--text-color);font-size: 14px;font-weight: 500;transition: all 0.2s ease;text-decoration: none;position: relative;width: 100%;cursor: pointer;text-align: left;font-family: var(--font-family);}
main.withsidebar .sidebar .sidebar-zertifikat .zertifikat-btn > svg:first-child {width: 22px;height: 22px;flex-shrink: 0;stroke: var(--primary-color);}
main.withsidebar .sidebar .sidebar-zertifikat .zertifikat-btn span {flex: 1;line-height: 1.4;}
main.withsidebar .sidebar .sidebar-zertifikat .zertifikat-btn .zertifikat-arrow {width: 16px;height: 16px;flex-shrink: 0;opacity: 0.4;transition: all 0.2s ease;}
main.withsidebar .sidebar .sidebar-zertifikat .zertifikat-btn:hover {background: rgba(49, 115, 232, 0.12);border-color: var(--primary-color);color: var(--primary-color);transform: translateX(4px);}
main.withsidebar .sidebar .sidebar-zertifikat .zertifikat-btn:hover .zertifikat-arrow {opacity: 1;transform: translate(2px, -2px);}

/* Zertifikat Lightbox */
.zertifikat-lightbox {position: fixed;top: 0;left: 0;right: 0;bottom: 0;z-index: 999999;opacity: 0;visibility: hidden;transition: opacity 0.3s ease, visibility 0.3s ease;pointer-events: none;display: flex;align-items: center;justify-content: center;}
.zertifikat-lightbox.active {opacity: 1;visibility: visible;pointer-events: auto;}
.zertifikat-lightbox .zl-overlay {position: absolute;top: 0;left: 0;right: 0;bottom: 0;background: rgba(0, 0, 0, 0.9);backdrop-filter: blur(12px);-webkit-backdrop-filter: blur(12px);z-index: 1;}
.zertifikat-lightbox .zl-container {position: relative;z-index: 2;width: 90%;max-width: 900px;max-height: 90vh;display: flex;flex-direction: column;background: rgba(19, 22, 28, 0.98);border: 1px solid rgba(62, 82, 106, 0.4);border-radius: var(--border-radius);overflow: hidden;box-shadow: 0 30px 80px -10px rgba(0, 0, 0, 0.6);}
.zertifikat-lightbox .zl-header {display: flex;align-items: center;justify-content: space-between;padding: 18px 24px;border-bottom: 1px solid rgba(62, 82, 106, 0.3);flex-shrink: 0;}
.zertifikat-lightbox .zl-title {font-size: 16px;font-weight: 600;color: var(--text-color);display: flex;align-items: center;gap: 10px;min-width: 0;}
.zertifikat-lightbox .zl-title svg {width: 20px;height: 20px;flex-shrink: 0;stroke: var(--primary-color);}
.zertifikat-lightbox .zl-title span {white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
.zertifikat-lightbox .zl-actions {display: flex;align-items: center;gap: 8px;flex-shrink: 0;}
.zertifikat-lightbox .zl-actions a,
.zertifikat-lightbox .zl-actions button {width: 40px;height: 40px;border-radius: 10px;background: rgba(62, 82, 106, 0.25);border: 1px solid rgba(62, 82, 106, 0.4);display: flex;align-items: center;justify-content: center;cursor: pointer;transition: all 0.2s ease;color: var(--text-color);text-decoration: none;padding: 0;font-family: inherit;}
.zertifikat-lightbox .zl-actions a svg,
.zertifikat-lightbox .zl-actions button svg {width: 18px;height: 18px;stroke: currentColor;}
.zertifikat-lightbox .zl-actions a:hover,
.zertifikat-lightbox .zl-actions button:hover {background: var(--primary-color);border-color: var(--primary-color);color: #fff;}
.zertifikat-lightbox .zl-body {flex: 1;overflow: auto;display: flex;align-items: center;justify-content: center;min-height: 200px;padding: 20px;box-sizing: border-box;}
.zertifikat-lightbox .zl-body iframe {width: 100%;height: 100%;border: none;min-height: 70vh;}
.zertifikat-lightbox .zl-body img {max-width: 100%;max-height: 78vh;object-fit: contain;display: block;margin: 0 auto;border-radius: 8px;}

@media (max-width: 768px) {
    .zertifikat-lightbox .zl-container {width: 96%;max-height: 95vh;border-radius: 12px;}
    .zertifikat-lightbox .zl-header {padding: 14px 16px;}
    .zertifikat-lightbox .zl-title {font-size: 14px;}
    .zertifikat-lightbox .zl-actions a,
    .zertifikat-lightbox .zl-actions button {width: 36px;height: 36px;border-radius: 8px;}
    .zertifikat-lightbox .zl-body iframe {min-height: 60vh;}
}

/* Sidebar Ansprechpartner */
main.withsidebar .sidebar .sidebar-ansprechpartner {padding: 24px;border-bottom: 1px solid rgba(62, 82, 106, 0.3);}
main.withsidebar .sidebar .sidebar-ansprechpartner:last-child {border-bottom: none;}
main.withsidebar .sidebar .sidebar-ansprechpartner .ap-card {display: flex;flex-direction: column;gap: 16px;}
main.withsidebar .sidebar .sidebar-ansprechpartner .ap-header {display: flex;align-items: center;gap: 14px;}
main.withsidebar .sidebar .sidebar-ansprechpartner .ap-avatar {width: 52px;height: 52px;min-width: 52px;border-radius: 50%;background: linear-gradient(135deg, rgba(49, 115, 232, 0.2), rgba(15, 35, 72, 0.6));border: 2px solid rgba(62, 82, 106, 0.4);display: flex;align-items: center;justify-content: center;overflow: hidden;}
main.withsidebar .sidebar .sidebar-ansprechpartner .ap-avatar img {width: 100%;height: 100%;object-fit: cover;display: block;}
main.withsidebar .sidebar .sidebar-ansprechpartner .ap-avatar svg {width: 24px;height: 24px;color: rgba(255, 255, 255, 0.5);}
main.withsidebar .sidebar .sidebar-ansprechpartner .ap-info {display: flex;flex-direction: column;gap: 2px;min-width: 0;}
main.withsidebar .sidebar .sidebar-ansprechpartner .ap-name {font-size: 16px;font-weight: 600;color: var(--text-color);line-height: 1.3;}
main.withsidebar .sidebar .sidebar-ansprechpartner .ap-funktion {font-size: 13px;color: var(--primary-color);font-weight: 500;line-height: 1.4;}
main.withsidebar .sidebar .sidebar-ansprechpartner .ap-kontakt {display: flex;flex-direction: column;gap: 8px;}
main.withsidebar .sidebar .sidebar-ansprechpartner .ap-kontakt-item {display: flex;align-items: center;gap: 10px;padding: 10px 14px;background: rgba(62, 82, 106, 0.15);border: 1px solid rgba(62, 82, 106, 0.25);border-radius: 8px;color: var(--text-color);font-size: 13px;transition: all 0.2s ease;text-decoration: none;}
main.withsidebar .sidebar .sidebar-ansprechpartner .ap-kontakt-item svg {width: 16px;height: 16px;flex-shrink: 0;stroke: currentColor;}
main.withsidebar .sidebar .sidebar-ansprechpartner .ap-kontakt-item span {white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
main.withsidebar .sidebar .sidebar-ansprechpartner .ap-kontakt-item:hover {background: rgba(49, 115, 232, 0.12);border-color: var(--primary-color);color: var(--primary-color);transform: translateX(4px);}

/* Sidebar Widgets (Blog) */
main.withsidebar .sidebar #secondary {padding: 0;}
main.withsidebar .sidebar .widget ul {list-style: none;margin: 0;padding: 0;}
main.withsidebar .sidebar .widget ul li {margin: 0;}
main.withsidebar .sidebar .widget ul li a {display: block;padding: 10px 16px;color: var(--text-color);font-size: 14px;border-radius: 8px;transition: all 0.2s ease;position: relative;}
main.withsidebar .sidebar .widget ul li a::before {content: '';position: absolute;left: 0;top: 50%;transform: translateY(-50%);width: 3px;height: 0;background: var(--primary-color);border-radius: 0 2px 2px 0;transition: height 0.2s ease;}
main.withsidebar .sidebar .widget ul li a:hover {color: var(--primary-color);background: rgba(49, 115, 232, 0.08);padding-left: 20px;}
main.withsidebar .sidebar .widget ul li a:hover::before {height: 50%;}

/* Sidebar Search Widget */
main.withsidebar .sidebar .widget_search form {display: flex;gap: 8px;}
main.withsidebar .sidebar .widget_search input[type="search"] {flex: 1;padding: 12px 16px;background: rgba(62, 82, 106, 0.2);border: 1px solid rgba(62, 82, 106, 0.3);border-radius: 8px;color: var(--text-color);font-size: 14px;transition: all 0.2s ease;}
main.withsidebar .sidebar .widget_search input[type="search"]:focus {outline: none;border-color: var(--primary-color);background: rgba(49, 115, 232, 0.08);}
main.withsidebar .sidebar .widget_search input[type="search"]::placeholder {color: rgba(255, 255, 255, 0.5);}
main.withsidebar .sidebar .widget_search button,
main.withsidebar .sidebar .widget_search input[type="submit"] {padding: 12px 20px;background: var(--primary-color);border: none;border-radius: 8px;color: var(--bg-white);font-weight: 600;cursor: pointer;transition: all 0.2s ease;}
main.withsidebar .sidebar .widget_search button:hover,
main.withsidebar .sidebar .widget_search input[type="submit"]:hover {background: var(--secondary-color);}

/* ========================================
   FOOTER
   ======================================== */

footer {background: var(--secondary-color); padding: 50px 0; position: relative;}
footer .contact-footer-row {display: grid; grid-template-columns: repeat(3,1fr); justify-content: space-around;}
footer .contact-footer-row .contact-item {display: block; text-align: center;}
footer .contact-footer-row .contact-item span {display: block; font-size: 20px; font-weight: 600; text-transform: uppercase; color: var(--primary-color); margin-bottom: 20px;}
footer .contact-footer-row .contact-item a {display: block; font-size: 20px; font-weight: 500; text-transform: uppercase; color: #fff;}
footer .contact-footer-row .contact-item a:hover {color: var(--primary-color); transition: var(--transition);}

.contact-data-row .dist {display: inline-block; width: 60px; font-weight: 700;}

footer hr {height: 3px; background: #3E526A;}

footer .main-footer-row {display: grid; grid-template-columns: auto 80px; justify-content: space-between;}
footer .main-footer-row .logo {background: #fff; border-radius: var(--border-radius); display: inline-block;}
footer .main-footer-row .logo img {padding: 25px; box-sizing: border-box; width: 100%;}
footer address {font-size: 20px;}


.bottom {height: 50px; line-height: 50px;}
.bottom .wrp {display: flex;align-items: center;justify-content: space-between;flex-wrap: wrap; font-size: 14px;}

.to-top {width: 80px; height: 80px; border-radius: 20px; display: grid; place-items: center; background: #3E526A; cursor: pointer;}
.to-top svg {height: 30px; width: auto;}

footer .footer-image {position: absolute; top:0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.05;}

/* ========================================
   404 ERROR PAGE
   ======================================== */

.error404 .stage {display: none;}
.pageerror {padding: 250px 0 100px 0;text-align: center;}

/* ========================================
   CUSTOM SLIDER
   ======================================== */

.splide {position: relative;overflow: hidden;width: 100%;margin: 0;}
.splide .splide__track {overflow: visible;width: 100%;}
.splide .splide__list, .splide .cards {display: flex;margin: 0;padding: 0;list-style: none;width: 100%;transition: transform 0.5s ease;}
.splide .splide__slide, .splide .cards > * {flex-shrink: 0;margin: 0;list-style: none;}
.splide__arrow {position: absolute;top: 50%;transform: translateY(-50%);width: 50px;height: 50px;border-radius: 50%;background: var(--primary-color);color: var(--bg-white);border: none;font-size: 24px;cursor: pointer;z-index: 5;transition: var(--transition);display: flex;align-items: center;justify-content: center;box-shadow: var(--box-shadow);font-weight: 300;}
.splide__arrow:hover {background: var(--secondary-color);transform: translateY(-50%) scale(1.1);transition: var(--transition);}
.splide__arrow--prev {left: -25px;}
.splide__arrow--next {right: -25px;}
.splide__arrow:disabled {opacity: 0.3;cursor: not-allowed;}
.splide .clone {opacity: 1;}

/* ========================================
   CUSTOM LIGHTBOX
   ======================================== */

.custom-lightbox {position: fixed;top: 0;left: 0;right: 0;bottom: 0;z-index: 999999;opacity: 0;visibility: hidden;transition: opacity 0.3s ease, visibility 0.3s ease;pointer-events: none;}
.custom-lightbox.active {opacity: 1;visibility: visible;pointer-events: auto;}
.lightbox-overlay {position: absolute;top: 0;left: 0;right: 0;bottom: 0;background: rgba(0, 0, 0, 0.95);backdrop-filter: blur(10px);z-index: 1;}
.lightbox-container {position: relative;width: 100%;height: 100%;display: flex;align-items: center;justify-content: center;z-index: 2;}
.lightbox-close {position: fixed;top: 20px;right: 20px;width: 50px;height: 50px;border-radius: 50%;background: rgba(255, 255, 255, 0.2);color: var(--bg-white);border: 2px solid rgba(255, 255, 255, 0.5);font-size: 30px;cursor: pointer;z-index: 999999;transition: var(--transition);display: flex;align-items: center;justify-content: center;line-height: 1;font-weight: 300;}
.lightbox-close:hover {background: var(--primary-color);border-color: var(--primary-color);transform: rotate(90deg);transition: var(--transition);}
.lightbox-prev, .lightbox-next {position: fixed;top: 50%;transform: translateY(-50%);width: 60px;height: 60px;border-radius: 50%;background: rgba(255, 255, 255, 0.2);color: var(--bg-white);border: 2px solid rgba(255, 255, 255, 0.5);font-size: 28px;cursor: pointer;z-index: 999999;transition: var(--transition);display: flex;align-items: center;justify-content: center;font-weight: 300;}
.lightbox-prev:hover, .lightbox-next:hover {background: var(--primary-color);border-color: var(--primary-color);transform: translateY(-50%) scale(1.1);transition: var(--transition);}
.lightbox-prev {left: 20px;}
.lightbox-next {right: 20px;}
.lightbox-counter {position: fixed;top: 20px;left: 50%;transform: translateX(-50%);background: rgba(0, 0, 0, 0.8);color: var(--bg-white);padding: 10px 20px;border-radius: 20px;font-size: 16px;z-index: 999999;backdrop-filter: blur(5px);font-weight: 500;}
.lightbox-image-wrapper {position: relative;max-width: 90%;max-height: 90%;display: flex;align-items: center;justify-content: center;overflow: hidden;}
.lightbox-image {max-width: 100%;max-height: 90vh;object-fit: contain;transition: transform 0.3s ease;cursor: grab;}
.lightbox-image:active {cursor: grabbing;}
.lightbox-video-wrapper {position: relative;width: 90vw;max-width: 1280px;aspect-ratio: 16/9;}
.lightbox-video {position: absolute;top: 0;left: 0;width: 100%;height: 100%;border-radius: 8px;}
.lightbox-zoom-controls {position: fixed;bottom: 30px;left: 50%;transform: translateX(-50%);display: flex;gap: 10px;z-index: 999999;}
.lightbox-zoom-controls button {width: 45px;height: 45px;border-radius: 50%;background: rgba(255, 255, 255, 0.2);color: var(--bg-white);border: 2px solid rgba(255, 255, 255, 0.5);font-size: 20px;cursor: pointer;transition: var(--transition);display: flex;align-items: center;justify-content: center;font-weight: 300;}
.lightbox-zoom-controls button:hover {background: var(--primary-color);border-color: var(--primary-color);transform: scale(1.1);transition: var(--transition);}
.lightbox-thumbnails {position: fixed;bottom: 20px;left: 50%;transform: translateX(-50%);width: 90%;max-width: 900px;z-index: 999999;background: rgba(0, 0, 0, 0.8);padding: 15px;border-radius: 10px;backdrop-filter: blur(10px);}
.lightbox-thumbnails-wrapper {display: flex;gap: 10px;overflow-x: auto;overflow-y: hidden;scroll-behavior: smooth;padding: 5px 0;scrollbar-width: thin;scrollbar-color: rgba(255, 255, 255, 0.3) transparent;}
.lightbox-thumbnails-wrapper::-webkit-scrollbar {height: 6px;}
.lightbox-thumbnails-wrapper::-webkit-scrollbar-track {background: rgba(255, 255, 255, 0.1);border-radius: 3px;}
.lightbox-thumbnails-wrapper::-webkit-scrollbar-thumb {background: rgba(255, 255, 255, 0.3);border-radius: 3px;}
.lightbox-thumbnails-wrapper::-webkit-scrollbar-thumb:hover {background: rgba(255, 255, 255, 0.5);}
.lightbox-thumbnail {position: relative;flex-shrink: 0;width: 100px;height: 70px;border-radius: 6px;overflow: hidden;cursor: pointer;border: 3px solid transparent;transition: var(--transition);background: rgba(0, 0, 0, 0.5);}
.lightbox-thumbnail:hover {border-color: rgba(255, 255, 255, 0.5);transform: scale(1.05);transition: var(--transition);}
.lightbox-thumbnail.active {border-color: var(--primary-color);transform: scale(1.05);}
.lightbox-thumbnail img {width: 100%;height: 100%;object-fit: cover;}
.lightbox-thumbnail-video-icon {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);width: 30px;height: 30px;background: rgba(0, 0, 0, 0.7);color: var(--bg-white);display: flex;align-items: center;justify-content: center;border-radius: 50%;font-size: 12px;pointer-events: none;}

/* ========================================
   WPFORMS - KONTAKTFORMULAR
   ======================================== */

div.wpforms-container-full .wpforms-form {background: rgba(19, 22, 28, 0.95) !important;backdrop-filter: blur(20px) !important;-webkit-backdrop-filter: blur(20px) !important;border: 1px solid rgba(62, 82, 106, 0.3) !important;border-radius: var(--border-radius) !important;padding: 40px !important;box-sizing: border-box !important;}
div.wpforms-container-full .wpforms-form .wpforms-field {padding: 0 0 20px 0 !important;margin: 0 !important;}
div.wpforms-container-full .wpforms-form .wpforms-field-label {color: var(--text-color) !important;font-family: var(--font-family) !important;font-size: 14px !important;font-weight: 600 !important;margin-bottom: 8px !important;letter-spacing: 0.3px;}
div.wpforms-container-full .wpforms-form .wpforms-field-sublabel {color: rgba(255, 255, 255, 0.5) !important;font-family: var(--font-family) !important;font-size: 12px !important;margin-top: 4px !important;}
div.wpforms-container-full .wpforms-form .wpforms-required-label {color: var(--primary-color) !important;font-weight: 700 !important;}

div.wpforms-container-full .wpforms-form input[type="text"],
div.wpforms-container-full .wpforms-form input[type="email"],
div.wpforms-container-full .wpforms-form input[type="tel"],
div.wpforms-container-full .wpforms-form input[type="url"],
div.wpforms-container-full .wpforms-form input[type="number"],
div.wpforms-container-full .wpforms-form input[type="password"],
div.wpforms-container-full .wpforms-form input[type="date"],
div.wpforms-container-full .wpforms-form textarea,
div.wpforms-container-full .wpforms-form select,
div.wpforms-container-full .wpforms-form .wpforms-field input,
div.wpforms-container-full .wpforms-form .wpforms-field textarea,
div.wpforms-container-full .wpforms-form .wpforms-field select {width: 100% !important;padding: 14px 18px !important;background: rgba(62, 82, 106, 0.2) !important;border: 1px solid rgba(62, 82, 106, 0.3) !important;border-radius: 10px !important;color: var(--text-color) !important;font-family: var(--font-family) !important;font-size: 15px !important;line-height: 1.5 !important;transition: all 0.2s ease !important;box-sizing: border-box !important;-webkit-appearance: none !important;-moz-appearance: none !important;appearance: none !important;}
div.wpforms-container-full .wpforms-form textarea,
div.wpforms-container-full .wpforms-form .wpforms-field textarea {min-height: 150px !important;resize: vertical !important;}

div.wpforms-container-full .wpforms-form input::placeholder,
div.wpforms-container-full .wpforms-form textarea::placeholder {color: rgba(255, 255, 255, 0.4) !important;font-family: var(--font-family) !important;}

div.wpforms-container-full .wpforms-form input[type="text"]:focus,
div.wpforms-container-full .wpforms-form input[type="email"]:focus,
div.wpforms-container-full .wpforms-form input[type="tel"]:focus,
div.wpforms-container-full .wpforms-form input[type="url"]:focus,
div.wpforms-container-full .wpforms-form input[type="number"]:focus,
div.wpforms-container-full .wpforms-form input[type="password"]:focus,
div.wpforms-container-full .wpforms-form input[type="date"]:focus,
div.wpforms-container-full .wpforms-form textarea:focus,
div.wpforms-container-full .wpforms-form select:focus,
div.wpforms-container-full .wpforms-form .wpforms-field input:focus,
div.wpforms-container-full .wpforms-form .wpforms-field textarea:focus,
div.wpforms-container-full .wpforms-form .wpforms-field select:focus {outline: none !important;border-color: var(--primary-color) !important;background: rgba(49, 115, 232, 0.08) !important;box-shadow: 0 0 0 3px rgba(49, 115, 232, 0.12) !important;}

div.wpforms-container-full .wpforms-form select {background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23ffffff' d='M6 8L0 0h12z'/%3E%3C/svg%3E") !important;background-repeat: no-repeat !important;background-position: right 16px center !important;background-size: 10px !important;padding-right: 40px !important;}
div.wpforms-container-full .wpforms-form .wpforms-field-checkbox ul,
div.wpforms-container-full .wpforms-form .wpforms-field-radio ul,
div.wpforms-container-full .wpforms-form .wpforms-field-gdpr-checkbox ul {list-style: none;margin: 0;padding: 0;}
div.wpforms-container-full .wpforms-form .wpforms-field-checkbox li,
div.wpforms-container-full .wpforms-form .wpforms-field-radio li,
div.wpforms-container-full .wpforms-form .wpforms-field-gdpr-checkbox li {margin: 0 0 8px 0;padding: 0;}
div.wpforms-container-full .wpforms-form .wpforms-field-checkbox li label,
div.wpforms-container-full .wpforms-form .wpforms-field-radio li label,
div.wpforms-container-full .wpforms-form .wpforms-field-gdpr-checkbox li label {color: rgba(255, 255, 255, 0.8);font-size: 14px;cursor: pointer;display: flex;align-items: flex-start;gap: 10px;line-height: 1.5;}
div.wpforms-container-full .wpforms-form input[type="checkbox"],
div.wpforms-container-full .wpforms-form input[type="radio"] {width: 20px !important;height: 20px !important;min-width: 20px !important;margin: 1px 0 0 0 !important;padding: 0 !important;background: rgba(62, 82, 106, 0.2) !important;border: 1px solid rgba(62, 82, 106, 0.4) !important;cursor: pointer;-webkit-appearance: none !important;-moz-appearance: none !important;appearance: none !important;position: relative;transition: all 0.2s ease !important;}
div.wpforms-container-full .wpforms-form input[type="checkbox"] {border-radius: 5px !important;}
div.wpforms-container-full .wpforms-form input[type="radio"] {border-radius: 50% !important;}
div.wpforms-container-full .wpforms-form input[type="checkbox"]:checked,
div.wpforms-container-full .wpforms-form input[type="radio"]:checked {background: var(--primary-color) !important;border-color: var(--primary-color) !important;}
div.wpforms-container-full .wpforms-form input[type="checkbox"]:checked::after {content: '';position: absolute;top: 3px;left: 7px;width: 4px;height: 9px;border: solid #fff;border-width: 0 2px 2px 0;transform: rotate(45deg);}
div.wpforms-container-full .wpforms-form input[type="radio"]:checked::after {content: '';position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);width: 8px;height: 8px;border-radius: 50%;background: #fff;}
div.wpforms-container-full .wpforms-form input[type="checkbox"]:focus,
div.wpforms-container-full .wpforms-form input[type="radio"]:focus {border-color: var(--primary-color) !important;box-shadow: 0 0 0 3px rgba(49, 115, 232, 0.12) !important;}

div.wpforms-container-full .wpforms-form .wpforms-field-row {display: flex;gap: 20px;}
div.wpforms-container-full .wpforms-form .wpforms-field-row .wpforms-field-row-block {flex: 1;}

div.wpforms-container-full .wpforms-form .wpforms-submit-container {padding-top: 10px !important;}
div.wpforms-container-full .wpforms-form button[type="submit"],
div.wpforms-container-full .wpforms-form .wpforms-submit,
div.wpforms-container-full .wpforms-form .wpforms-page-button {display: inline-flex !important;align-items: center !important;justify-content: center !important;width: auto !important;min-width: 200px !important;padding: 16px 40px !important;background: var(--primary-color) !important;color: #fff !important;font-family: var(--font-family) !important;font-size: 16px !important;font-weight: 700 !important;border: 2px solid rgba(192, 198, 252, 0.6) !important;border-radius: var(--border-radius) !important;cursor: pointer !important;transition: all 0.2s ease !important;box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;text-transform: none !important;letter-spacing: 0.3px;}
div.wpforms-container-full .wpforms-form button[type="submit"]:hover,
div.wpforms-container-full .wpforms-form .wpforms-submit:hover,
div.wpforms-container-full .wpforms-form .wpforms-page-button:hover {background: var(--secondary-color) !important;color: #fff !important;transform: translateY(-2px) !important;box-shadow: 0 30px 60px -12px rgba(0, 0, 0, 0.35) !important;}
div.wpforms-container-full .wpforms-form button[type="submit"]:active,
div.wpforms-container-full .wpforms-form .wpforms-submit:active {transform: translateY(0) !important;}

div.wpforms-container-full .wpforms-form .wpforms-submit-spinner {color: var(--primary-color);}

div.wpforms-container-full .wpforms-form .wpforms-error .wpforms-field-label {color: #ff6b6b;}
div.wpforms-container-full .wpforms-form label.wpforms-error {color: #ff6b6b;font-family: var(--font-family);font-size: 13px;margin-top: 6px;display: block;}
div.wpforms-container-full .wpforms-form input.wpforms-error,
div.wpforms-container-full .wpforms-form textarea.wpforms-error,
div.wpforms-container-full .wpforms-form select.wpforms-error {border-color: rgba(255, 107, 107, 0.6);background: rgba(255, 107, 107, 0.05);}
div.wpforms-container-full .wpforms-form input.wpforms-error:focus,
div.wpforms-container-full .wpforms-form textarea.wpforms-error:focus {box-shadow: 0 0 0 3px rgba(255, 107, 107, 0.12);}

div.wpforms-container-full .wpforms-confirmation-container-full {background: rgba(19, 22, 28, 0.95);backdrop-filter: blur(20px);-webkit-backdrop-filter: blur(20px);border: 1px solid rgba(49, 115, 232, 0.4);border-radius: var(--border-radius);padding: 40px;color: var(--text-color);font-family: var(--font-family);text-align: center;}
div.wpforms-container-full .wpforms-confirmation-container-full p {color: rgba(255, 255, 255, 0.8);font-size: 16px;}

div.wpforms-container-full .wpforms-form .wpforms-field-description {color: rgba(255, 255, 255, 0.45);font-size: 13px;margin-top: 6px;line-height: 1.5;}

div.wpforms-container-full .wpforms-form .wpforms-field-file-upload .wpforms-uploader {background: rgba(62, 82, 106, 0.1);border: 2px dashed rgba(62, 82, 106, 0.3);border-radius: 10px;padding: 30px;text-align: center;transition: all 0.2s ease;color: rgba(255, 255, 255, 0.6);}
div.wpforms-container-full .wpforms-form .wpforms-field-file-upload .wpforms-uploader:hover {border-color: var(--primary-color);background: rgba(49, 115, 232, 0.05);}

/* Seitenumbruch / Fortschrittsbalken (mehrseitige Formulare) */
div.wpforms-container-full .wpforms-form .wpforms-page-indicator {background: transparent;border: none;margin-bottom: 30px;}
div.wpforms-container-full .wpforms-form .wpforms-page-indicator .wpforms-page-indicator-page {color: rgba(255, 255, 255, 0.5);}
div.wpforms-container-full .wpforms-form .wpforms-page-indicator .wpforms-page-indicator-page.active {color: var(--primary-color);}
div.wpforms-container-full .wpforms-form .wpforms-page-indicator .wpforms-page-indicator-page-progress-bar {background: var(--primary-color);}

/* WPForms Responsive */
@media (max-width: 768px) {
    div.wpforms-container-full .wpforms-form {padding: 25px 20px;}
    div.wpforms-container-full .wpforms-form .wpforms-field-row {flex-direction: column;gap: 0;}
    div.wpforms-container-full .wpforms-form button[type="submit"],
    div.wpforms-container-full .wpforms-form .wpforms-submit {width: 100%;}
}

/* ========================================
   MEDIA QUERIES - RESPONSIVE
   ======================================== */

@media (max-width: 1440px) {
    .stage.subpage .title {left: 5%;}
}

@media (max-width: 1200px) {
    /* Footer */
    footer .contact-footer-row .contact-item a {font-size: 18px;}
}

/* Tablet Landscape & Below (1024px) */
@media (max-width: 1024px) {
    /* Page Layout */
    main.withsidebar .page-build {grid-template-columns: 100%;}
    main.withsidebar .page-build .sidebar {display: none;}

    /* Stage  */
    .teaser .teaser-stage-grid {grid-template-columns: 100%; gap: 25px;}
    .teaser .teaser-stage-grid .teaser-item .teaser-content {text-align: center;}
    .teaser .teaser-stage-grid .teaser-item .teaser-content .icon-wrp {margin: 0 auto 20px auto;}

    h1 {font-size: 40px; line-height: 50px;}

    /* Teasercards */
    .teasercards .cards.no-carousel {grid-template-columns: repeat(2, 1fr);}

    /* Gallery */
    .gallery .glightbox-gallery {grid-template-columns: repeat(4, 1fr);}
    .gallery .video-gallery-grid {grid-template-columns: repeat(2, 1fr);}
    .gallery .filterrow {display: grid;grid-template-columns: 100%;gap: 25px;}
    .gallery .filterrow #filter {flex-wrap: wrap;}

    /* Produkt */
    .produkt .produkt-item {grid-template-columns: 100%;margin-bottom: 40px;}
    .produkt .produkt-item .produktbild {order: -1;padding: 30px;aspect-ratio: 16/10;}
    .produkt .produkt-item .produktbeschreibung {padding: 30px;}
    .produkt .produkt-item .produktbeschreibung h2 {font-size: 24px;margin-bottom: 16px;}

    /* Ansprechpartner */
    .ansprechpartner .ansprechpartner-grid {grid-template-columns: repeat(2, 1fr);gap: 25px;}
    .ansprechpartner.layout-liste .ansprechpartner-item {grid-template-columns: 120px 1fr;}

    /* Workflow */
    .workflow .workflow-grid {grid-template-columns: repeat(2, 1fr); grid-column-gap: 50px; grid-row-gap: 75px;}

    /* Footer */
    footer .contact-footer-row {grid-template-columns: 100%; gap: 50px;}
}

/* Tablet Portrait & Below (768px) */
@media (max-width: 768px) {

    /* Header */
    header .header-grid {grid-template-columns: 180px auto;}

    /* Text + Bild */
    .textbild .text {order: 1!important;}
    .textbild .bild {order: 2!important;}
    .textbild .wrp {grid-template-columns: 100%!important; gap: 50px;}

    /* Blog Grid */
    main.withsidebar .content .blog-grid {grid-template-columns: repeat(2, 1fr);}

    /* Produkt */
    .produkt .produkt-item {margin-bottom: 30px;}
    .produkt .produkt-item .produktbild {padding: 25px;aspect-ratio: 16/9;}
    .produkt .produkt-item .produktbeschreibung {padding: 25px;}
    .produkt .produkt-item .produktbeschreibung h2 {font-size: 22px;}
    .produkt .produkt-item .produktbeschreibung h3 {font-size: 16px;margin-bottom: 16px;}
    .produkt .produkt-item .produktbeschreibung p {font-size: 14px;line-height: 1.6;}
    .produkt .produkt-item .produktbeschreibung ul li {font-size: 13px;padding: 6px 0 6px 18px;}

    /* Ansprechpartner */
    .ansprechpartner .ansprechpartner-grid {grid-template-columns: repeat(2, 1fr);gap: 20px;}
    .ansprechpartner .ansprechpartner-item .ansprechpartner-content {padding: 20px;}
    .ansprechpartner .ansprechpartner-item .ansprechpartner-name {font-size: 18px;}
    .ansprechpartner.layout-liste .ansprechpartner-item {grid-template-columns: 100px 1fr;}
    .ansprechpartner.layout-liste .ansprechpartner-item .ansprechpartner-kontakt {flex-direction: column;}
    .ansprechpartner.layout-liste .ansprechpartner-item .ansprechpartner-social {margin-left: 0;margin-top: 12px;}

    /* Ansprechpartner */
    .teasercards .cards.no-carousel {grid-template-columns: 100%!important;}

    /* Workflow */
    .workflow .workflow-grid {grid-template-columns: 100%; grid-column-gap: 50px; grid-row-gap: 75px;}

    /* Footer */
    footer address, footer .address {display: none;}
    footer .main-footer-row {grid-template-columns: 200px 80px; justify-content: space-between;}

}

/* Mobile & Below (550px) */
@media (max-width: 550px) {
    /* Gallery */
    .gallery .video-gallery-grid {grid-template-columns: 100%;}
    .gallery .glightbox-gallery {grid-template-columns: repeat(2, 1fr);}

    /* Produkt */
    .produkt .produkt-item .produktbild {padding: 20px;aspect-ratio: 4/3;}
    .produkt .produkt-item .produktbeschreibung {padding: 20px;}
    .produkt .produkt-item .produktbeschreibung h2 {font-size: 20px;margin-bottom: 12px;}
    .produkt .produkt-item .produktbeschreibung h3 {font-size: 15px;margin-bottom: 12px;}
    .produkt .produkt-item .produktbeschreibung ul {margin-top: 16px;padding-top: 16px;}

    /* Ansprechpartner */
    .ansprechpartner .ansprechpartner-grid {grid-template-columns: 1fr;gap: 20px;}
    .ansprechpartner.layout-liste .ansprechpartner-item {grid-template-columns: 1fr;}
    .ansprechpartner.layout-liste .ansprechpartner-item .ansprechpartner-bild {aspect-ratio: 16/9;}
}

/* Mobile Small (500px) */
@media (max-width: 500px) {
    /* Margins */
    .mb {margin-bottom: 50px;}
    .mb50 {margin-bottom: 25px;}

    .teaser {margin-top: -70px;}

    /* Teasercards */
    .teasercards .splide__arrow--prev {left: 10px;}
    .teasercards .splide__arrow--next {right: 10px;}
    .teasercards .cards.no-carousel {grid-template-columns: 100%;}

    /* Produkt */
    .produkt .produkt-item {margin-bottom: 25px;border-radius: 12px;}
    .produkt .produkt-item .produktbild {padding: 15px;border-radius: 12px 12px 0 0;}
    .produkt .produkt-item .produktbild img {border-radius: 6px;}
    .produkt .produkt-item .produktbeschreibung {padding: 20px 15px;}
    .produkt .produkt-item .produktbeschreibung h2 {font-size: 18px;line-height: 1.4;}
    .produkt .produkt-item .produktbeschreibung h3 {font-size: 14px;}
    .produkt .produkt-item .produktbeschreibung p {font-size: 13px;}
    .produkt .produkt-item .produktbeschreibung ul li {font-size: 12px;padding: 5px 0 5px 16px;}
    .produkt .produkt-item .produktbeschreibung ul li::before {width: 6px;height: 6px;}

    /* Ansprechpartner */
    .ansprechpartner .ansprechpartner-item {border-radius: 12px;}
    .ansprechpartner .ansprechpartner-item .ansprechpartner-content {padding: 16px;}
    .ansprechpartner .ansprechpartner-item .ansprechpartner-name {font-size: 16px;}
    .ansprechpartner .ansprechpartner-item .ansprechpartner-position {font-size: 13px;}
    .ansprechpartner .ansprechpartner-item .kontakt-item {font-size: 12px;padding: 6px 10px;}
    .ansprechpartner .ansprechpartner-item .kontakt-item svg {width: 14px;height: 14px;}
    .ansprechpartner .ansprechpartner-item .social-link {width: 36px;height: 36px;}
    .ansprechpartner .ansprechpartner-item .social-link svg {width: 16px;height: 16px;}
}

/* Responsive Lightbox */
@media (max-width: 768px) {
    .lightbox-close {width: 40px;height: 40px;font-size: 24px;top: 10px;right: 10px;}
    .lightbox-prev, .lightbox-next {width: 45px;height: 45px;font-size: 22px;}
    .lightbox-prev {left: 10px;}
    .lightbox-next {right: 10px;}
    .lightbox-counter {font-size: 12px;padding: 6px 12px;top: 10px;}
    .lightbox-zoom-controls {bottom: 20px;gap: 8px;}
    .lightbox-zoom-controls button {width: 38px;height: 38px;font-size: 18px;}
    .lightbox-image-wrapper {max-width: 95%;max-height: 85%;}
    .lightbox-video-wrapper {width: 95vw;}
}

@media (max-width: 500px) {
    .splide__arrow--prev {left: 10px;}
    .splide__arrow--next {right: 10px;}
    .splide__arrow {width: 40px;height: 40px;font-size: 20px;}
    header .header-grid .logo .jubi {height: 40px; left: 100%;}
}