@charset "UTF-8";
/*
Theme Name: Neobit
Theme URI: https://www.Neobit.com
Author: Alper Balkaya
Authir URI: https://www.alperbalkaya.de
Description: Custom Bootstrap 5 theme of Avnetio.com
Requires at least: 5.0
Version: 1.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:
*/
/*  Theme colors
#113C80 Primary
#1E6CE6 Primary hoover
#35BE8A Secondary
#35BE8A Secondary hoover*/

/* Roboto regular */

@font-face {
    font-family: "Roboto";
    src: url("assets/fonts/Roboto/Roboto-Regular.ttf") format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap
}

/* Roboto thin */

@font-face {
    font-family: "Roboto";
    src: url("assets/fonts/Roboto/Roboto-Thin.ttf") format('truetype');
    font-weight: 100;
    font-style: normal;
    font-display: swap
}

/* Roboto bold */

@font-face {
    font-family: "Roboto";
    src: url("assets/fonts/Roboto/Roboto-Bold.ttf") format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap
}

body {
    font-family: "Roboto";
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

html {
    box-sizing: border-box;
}

* {
    box-sizing: border-box;
}

html {
    scroll-padding-top: 120px;
}

/* Viewport-constrained layout approach */
.container-fluid {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    padding-left: calc(50vw - 50%);
    padding-right: calc(50vw - 50%);
}

/* Reset container-fluid for main wrapper */
main.container-fluid {
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
    width: 100%;
}

/* Ensure rows don't cause horizontal overflow */
.row {
    margin-left: 0;
    margin-right: 0;
    width: 100%;
}

.row > [class*="col-"] {
    padding-left: 15px;
    padding-right: 15px;
}

/* Container constraints */
.container {
    max-width: min(1200px, calc(100vw - 30px));
    margin-left: auto;
    margin-right: auto;
    padding-left: 15px;
    padding-right: 15px;
}

/* Hero section fix with proper positioning */
#hero {
    position: relative;
    width: 100%;
}

.hero-txt {
    position: absolute;
    width: 100%;
    max-width: min(1200px, calc(100vw - 30px));
    left: 50%;
    transform: translateX(-50%);
    top: 0;
    bottom: 0;
}

#hero .hero-txt .col-lg-9 {
    padding-left: 15px;
    padding-right: 15px;
}

#hero .hero-txt p {
    hyphens: manual;
}

/* Modern flexbox approach for card layouts */
#polarion-services-cards .row {
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    width: 100%;
}

#polarion-services-cards .card {
    flex: 1 1 auto;
    min-width: 280px;
    max-width: calc(33.333% - 20px);
    margin: 10px;
}

/* Ensure sections use proper flex constraints */
section.container-fluid {
    display: flex;
    flex-direction: column;
    width: 100%;
}

section .container {
    flex-shrink: 0;
    width: 100%;
}

/* Advanced viewport constraints using clamp() and min() */
.container-fluid {
    width: min(100%, 100vw);
    margin-left: clamp(-50vw + 50%, 0px, 0px);
    margin-right: clamp(-50vw + 50%, 0px, 0px);
}

/* Responsive image constraints */
img {
    max-width: 100%;
    height: auto;
    width: auto;
}

/* Prevent wide elements from breaking layout */
pre, code, table {
    max-width: 100%;
    overflow-wrap: break-word;
}

/* Card responsive constraints using CSS Grid as fallback */
@supports (display: grid) {
    #polarion-services-cards .row {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 20px;
        width: 100%;
        margin: 0;
    }
    
    #polarion-services-cards .card {
        margin: 0;
        max-width: none;
    }
}

/* Text overflow prevention */
h1, h2, h3, h4, h5, h6, p {
    overflow-wrap: break-word;
    word-wrap: break-word;
    hyphens: auto;
}

/* Enhanced responsive approach without overflow hidden */
@media (max-width: 575px) {
    .container {
        max-width: calc(100vw - 20px);
        padding-left: 10px;
        padding-right: 10px;
    }
    
    .container-fluid {
        padding-left: 10px;
        padding-right: 10px;
    }
    
    [class*="col-"] {
        padding-left: 10px;
        padding-right: 10px;
        flex: 0 0 100%;
        max-width: 100%;
    }
    
    #polarion-services-cards .card {
        min-width: calc(100vw - 40px);
        margin: 10px 0;
    }
    
    /* Responsive text sizing for mobile */
    .title-main {
        font-size: 1.5rem !important;
    }
    
    h1.title-main {
        font-size: 1.5rem !important;
    }
    
    .fs-5 {
        font-size: 1rem !important;
    }
    
    h2 {
        font-size: 1.3rem !important;
    }
}

@media (min-width: 576px) and (max-width: 991px) {
    .container {
        max-width: calc(100vw - 30px);
    }
    
    #polarion-services-cards .row {
        grid-template-columns: 1fr;
    }
    
    /* Responsive text sizing for tablets */
    .title-main {
        font-size: 1.75rem !important;
    }
    
    h1.title-main {
        font-size: 1.75rem !important;
    }
    
    .fs-5 {
        font-size: 1.1rem !important;
    }
    
    h2 {
        font-size: 1.5rem !important;
    }
}

img {
    pointer-events: none !important;
    user-select: none !important;
}

.wp-block-latest-posts__post-title {
    text-decoration: none !important;
    color: #6c757d !important;
    font-size: 1.25rem;
    font-weight: bold;
}

.wp-block-latest-posts__featured-image a,
.wp-block-latest-posts__featured-image img {
    width: 100%;
}

.shadow {
    box-shadow: 0 .1rem 1rem rgba(0, 0, 0, .15) !important;
}

.logged-in,
.logged-in .navbar {
    margin-top: 32px !important;
}

.bg-light {
    background-color: #efefef !important;
}

.navbar-brand {
    font-weight: 700;
    font-size: 2rem;
}

.navbar-brand img {
    max-height: 45px;
}

.navbar-collapse {
    max-height: calc(100vh - 200px);
    overflow-y: auto;
}

/* Fix navbar container to prevent wrapping on desktop */
@media (min-width: 992px) {
    #navbar .container {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
    }

    #navbar .navbar-brand {
        flex: 0 0 auto;
    }

    #navbar #navbarNav {
        flex: 1 1 auto;
        overflow: visible;
    }

    #navbar #navbarNav .navbar-nav {
        flex-wrap: nowrap;
    }

    #navbar #navbarNav .nav-item {
        white-space: nowrap;
    }

    #navbar #second-nav {
        flex: 0 0 auto;
        white-space: nowrap;
    }

    .navbar-collapse {
        overflow: visible !important;
    }

    .nav-link {
        font-size: 1.1rem;
    }
}

/* Compact navbar for narrow desktop widths where items overflow */
@media (min-width: 992px) and (max-width: 1330px) {
    .nav-link {
        font-size: clamp(0.8rem, 0.4rem + 0.8vw, 1.1rem) !important;
        padding-left: clamp(4px, 0.5vw, 10px) !important;
        padding-right: clamp(4px, 0.5vw, 10px) !important;
    }

    #nav-jetztkontaktieren,
    #nav-contactnow {
        padding-left: clamp(6px, 0.8vw, 15px) !important;
        padding-right: clamp(6px, 0.8vw, 15px) !important;
    }
}

/* Fix navbar container to prevent header shifts on mobile */
@media (max-width: 991.98px) {
    html {
        scroll-padding-top: 80px;
    }

    #navbar .container {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        position: relative;
    }
    
    #navbar .navbar-brand {
        flex: 0 0 auto;
        order: 1;
    }
    
    #navbar #navbar-toggler {
        flex: 0 0 auto;
        order: 2;
        margin-left: auto !important;
        margin-right: 0.5rem !important;
    }
    
    #navbar #second-nav {
        flex: 0 0 auto;
        order: 3;
    }
    
    #navbar #navbarNav {
        flex: 1 0 100%;
        order: 4;
    }
}

.nav-link {
    font-size: 1.25rem;
}

.nav-link:focus-visible {
    outline: none !important;
}

#nav-jetztkontaktieren,
#nav-contactnow {
    background-color: #35BE8A;
    color: #FFFFFF;
    text-align: center;
    border-radius: 5px;
    padding-left: 15px;
    padding-right: 15px;
    white-space: nowrap;
    /* visibility: hidden;
    opacity: 0;
    transition: opacity 200ms, visibility 200ms; */
}

#nav-jetztkontaktieren:hover,
#nav-contactnow:hover {
    background-color: #1E9170;
    color: #FFFFFF !important;
}

.sub-menu {
    padding: 0;
}

.sub-menu li {
    list-style-type: none;
    margin: 0;
}

.sub-menu li a {
    padding-left: 0 !important;
}

/* .megamenu .dropdown-menu {
    border: none;
    border-radius: 0;
    background-color: #fffffffa;navbarNav
} */

.dropdown .subtitle,
.dropdown-menu .subtitle,
.container.subtitle,
.d-lg-flex.subtitle {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Hide dropdown menu for language switcher */
#second-nav .dropdown-menu {
    display: none !important;
}

.language-switcher-btn {
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 5px;
}

#anchor-links {
    top: 103px;
    background-color: #35BE8A;
    z-index: 1000;
}

#anchor-links .nav-item {
    margin: 0;
    padding: 0;
    flex-grow: 1;
    text-align: center;
}

#anchor-links .nav-link {
    color: #ffffff;
}

#anchor-links .nav-link:hover,
#anchor-links .active {
    background-color: #1E9170 !important;
    color: #ffffff !important;
}

#hero {
    padding: 0;
}

.hero-img {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    background-image: url("assets/img/hero.jpg");
    width: 100%;
    height: 80vh;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

.pol-alm {
    background-image: url("assets/img/polarion-alm.png") !important;
    height: 60vh !important;
}

.pol-alm ~ * .hero-text h1 .text-nowrap,
.hero-text h1 .text-nowrap {
    white-space: nowrap;
}

.hero-img::after {
    width: 100%;
    height: 100%;
    background: #1c1c1c;
    opacity: 0.6;
    display: block;
    content: "";
}

.hero-txt {
    position: absolute;
}

@keyframes moveHero {
    0% {
        transform: translate3d(0, -2px, 0)
    }

    to {
        transform: translate3d(0, 2px, 0)
    }
}

.cls-1 {
    fill: #ffffff;
}

#wave svg {
    vertical-align: top;
}

#wave-2 {
    transform: scaleY(-1);
}

#wave-2 .cls-1 {
    fill: #ffffff;
}

.cls-2,
.cls-3 {
    fill: none;
    stroke-miterlimit: 10;
    stroke-width: 5px;
}

.cls-2 {
    stroke: #1E6CE6;
}

.cls-3 {
    stroke: #35BE8A;
}

.cls-3 {
    stroke-dasharray: 135;
    stroke-dashoffset: 135;
    animation: dash 20s linear infinite;
}

@keyframes dash {
    to {
        stroke-dashoffset: -135;
    }
}

#motivation img {
    max-height: 350px;
    margin: auto;
}

#projekte img {
    max-height: 300px;
    margin: auto;
}

.card-call {
    max-width: 550px;
    width: 100% !important;
}

.card-call i {
    font-size: 80px;
}

.software-details>div>a:hover {
    background-color: #35BE8A !important;
}

.software-details>div>a:hover,
.software-details>div>a:hover i {
    color: #ffffff !important;
}

.software-details i {
    font-size: 60px !important;
}

.sdy-title {
    margin: 0 0 100px 0;
}

#it-dienstleistungen img,
#vorteile-individualsoftware img {
    max-height: 300px;
}

.img-150 {
    max-height: 200px !important;
}

.consulting-details .title-main {
    margin: 50px 0;
}

.consulting-details-box img {
    margin: auto;
}

.wpcf7-response-output {
    display: none !important;
}

.pcda-item {
    height: 150px;
    padding: 25px 50px !important;
}

.pcda-cylce {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.pcda-cylce svg {
    width: 350px;
}

.pcda-box-1,
.pcda-box-2,
.pcda-box-3,
.pcda-box-4 {
    animation-name: cycle-change-bg;
    animation-duration: 10s;
    animation-iteration-count: infinite;
}

.pcda-box-2 {
    animation-delay: 2.5s;
}

.pcda-box-3 {
    animation-delay: 7.5s;
}

.pcda-box-4 {
    animation-delay: 5s;
}

@keyframes cycle-change-bg {
    0% {
        fill: #35BE8A;
    }

    24% {
        fill: #35BE8A
    }

    25% {
        fill: #113C80;
    }
}

.fs-12 {
    font-size: 12px !important;
}

.bs-50 {
    border-radius: 50% 0 0 0;
}

.bt-50 {
    border-radius: 0 50% 0 0;
}

.be-50 {
    border-radius: 0 0 0 50%;
}

.bb-50 {
    border-radius: 0 0 50% 0;
}

.py-100 {
    padding-top: 100px !important;
    padding-bottom: 100px !important;
}

.pt-100 {
    padding-top: 100px !important;
}

.wcf7-checkbox .wpcf7-list-item {
    margin: 0 10px 0 0;
}

/* Consent row: checkbox flush against text, no CF7 default left margin */
.d-flex > .wpcf7-form-control-wrap .wpcf7-list-item {
    margin: 0;
}

.d-flex > .wpcf7-form-control-wrap {
    flex-shrink: 0;
    line-height: 1;
}

.form-control::placeholder {
    opacity: 0.5 !important;
}

/* Contact Form 7 - Fix Bootstrap row negative margins causing overflow */
#anfrage .wpcf7-form .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

#anfrage .wpcf7-form [class*="col-"] {
    padding-left: 7.5px !important;
    padding-right: 7.5px !important;
}

.title-main {
    border-bottom: #35BE8A 4px solid;
    padding-bottom: 5px;
}

.smt-100 {
    padding-top: 100px !important;
}

.smt-200 {
    padding-top: 200px !important;
}

.pdca>div>div {
    max-height: 200px !important;
}

.pdca-cycle {
    max-width: 354px;
    z-index: 2;
    position: absolute;
    left: 0;
    right: 0;
    padding: 0 !important;
    margin-left: auto;
    margin-right: auto;
}

#pdca-cycle-1,
#pdca-cycle-2,
#pdca-cycle-3,
#pdca-cycle-4 {
    transition: transform 330ms ease-in-out;
    height: 175px;
    width: 173px;
}

#pdca-cycle-1.active {
    transform: translate3d(-10px, -10px, 0) !important;
}

#pdca-cycle-2.active {
    transform: translate3d(10px, -10px, 0) !important;
}

#pdca-cycle-3.active {
    transform: translate3d(10px, 10px, 0) !important;
}

#pdca-cycle-4.active {
    transform: translate3d(-10px, 10px, 0) !important;
}

#pdca-cycle-1.active path,
#pdca-cycle-2.active path,
#pdca-cycle-3.active path,
#pdca-cycle-4.active path {
    fill: #35BE8A;
}

#pdca-box-1,
#pdca-box-2,
#pdca-box-3,
#pdca-box-4 {
    opacity: 0.8;
    transition: opacity 330ms ease-in-out;
    transition: transform 330ms ease-in-out;
}

#pdca-box-1.active,
#pdca-box-2.active,
#pdca-box-3.active,
#pdca-box-4.active {
    opacity: 1 !important;
}

#pdca-box-1.active h3,
#pdca-box-2.active h3,
#pdca-box-3.active h3,
#pdca-box-4.active h3 {
    color: #35BE8A !important;
}

.sx {
    transform: scaleX(-1);
}

#page,
#single {
    padding: 100px 15px;
}

.page-title {
    border-bottom: #35BE8A 4px solid;
    padding-bottom: 5px;
}

.post-title {
    margin-top: 50px;
}

.flex-even {
    flex: 1 !important;
}

#card1,
.card-icon-1 {
    z-index: 10;
}

#card2,
.card-icon-2 {
    z-index: 9;
}

#card3,
.card-icon-3 {
    z-index: 8;
}

#card4,
.card-icon-4 {
    z-index: 7;
}

#card5,
.card-icon-5 {
    z-index: 6;
}

.sw-cycle .card,
.card-icon {
    width: 90%;
    margin-bottom: 20px;
}

.sw-cycle .card-nr {
    width: 60%;
    border-bottom: 2px dashed;
    font-size: 50px;
}

.card-icon .card-nr {
    font-size: 60px;
}

.card:hover .card-header div,
.card:hover a {
    color: #FFFFFF !important;
}

.card-icon .card-header h4 {
    min-height: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.sw-cycle img,
.card-icon img {
    max-width: 100%;
    margin-right: auto;
    margin-left: auto;
    height: 180px;
    width: auto;
    object-fit: contain;
}

.contact-wrapper {
    max-width: 300px;
    margin: auto;
}

.contact-wrapper i {
    color: #1E6CE6;
    margin-bottom: 10px;
}

.contact-wrapper:hover {
    background-color: #35BE8A;
    color: #FFFFFF !important;
}

.contact-wrapper:hover i {
    color: #ffffff;
}

/* Equal height for contact cards - minimal custom CSS */
.contact-card-equal-height {
    height: auto;
}

.contact-card-icon-area {
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.contact-card-icon-area img {
    max-width: 100%;
    width: auto;
    object-fit: contain;
}

@media (min-width: 768px) {
    .contact-card-equal-height {
        min-height: 200px !important;
        height: 200px !important;
    }

    .contact-card-icon-area {
        height: 155px;
    }

    .contact-card-icon-area img {
        max-height: 155px;
    }
}

.py-4-5 {
    padding-top: 2.25rem;
    /* 18px */
    padding-bottom: 2.25rem;
    /* 18px */
}

.visible {
    opacity: 1 !important;
    visibility: visible !important;
    transition: opacity 200ms, visibility 200ms;
}

#anfrage .form-label {
    display: flex;
}

footer {
    margin-top: 80px;
}

.footer a {
    text-decoration: none !important;
}

.bb-secondary-custom-color{
    border: 2px solid #35BE8A;
}
.bg-secondary-custom-color{
    background-color: #35BE8A;
}
.footer-address {
    display: flex;
    align-items: flex-start;
}
.footer-address i {
    margin-top: 4px;
}
.flex-ad-img {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    flex-direction: row;
    padding: 2%;
    border: 18px solid #35BE8A;
}
.flex-ad-verticle {
    display: flex;
    flex-direction: column;
    color:#35BE8A;
    align-items: center;
    padding: 2%;
}
.bg-color-para {
    background-color: #35BE8A;
    color: white;
    padding: 4%;
}

/*

let draw=document.querySelector('.draw');
const lengthDraw=draw.getTotalLength();

*/

/*
####################################################
M E D I A  Q U E R I E S
####################################################
*/

/*
::::::::::::::::::::::::::::::::::::::::::::::::::::
Bootstrap 5 breakpoints
*/

/*
Extra small devices (portrait phones, less than 576px)
No media query since this is the default in Bootstrap because it is "mobile first"
*/


/* Small devices (sm, landscape phones, 576px and up) */
@media (min-width: 576px) {}

/* Medium devices (md, tablets, 768px and up) The navbar toggle appears at this breakpoint */
@media (min-width: 768px) {}

/* Large devices (lg, desktops, 992px and up) */
@media (min-width: 992px) {
    .card-icon {
        width: 32%;
        margin-bottom: 0;
        margin-right: 10px;
    }

    .sw-cycle .card {
        width: 20%;
        margin-bottom: 0;
    }

    .sw-cycle .active,
    .card-icon:hover {
        transform: scale(1.05);
        transition: transform 330ms ease-in-out;
        z-index: 999 !important;
    }

    .sw-cycle .active,
    .sw-cycle .active .card-header,
    .card-icon:hover,
    .card-icon:hover .card-header {
        background-color: #35BE8A !important;
    }

    .sw-cycle .active h1,
    .sw-cycle .active h4,
    .sw-cycle .active .card-text,
    .card-icon:hover h1,
    .card-icon:hover h4,
    .card-icon:hover i,
    .card-icon:hover .card-text {
        color: #FFFFFF !important;
    }

    /* .megamenu {
        position: static;
    } */

    /* .megamenu .dropdown-menu {
        top: 65px;
        padding: 25px 100px 50px 100px;
        box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .075) !important;
    } */

    /* Desktop green strap submenu */
    .navbar-nav .dropdown.megamenu {
        position: static;
    }

    .navbar-nav .dropdown.megamenu > .dropdown-menu {
        display: none !important;
        position: absolute !important;
        top: 100% !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        transform: none !important;
        background-color: #35BE8A !important;
        border: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        padding: 0 !important;
        margin: 0 !important;
        z-index: 1050;
    }

    .navbar-nav .dropdown.megamenu.current-menu-item > .dropdown-menu,
    .navbar-nav .dropdown.megamenu.current-menu-ancestor > .dropdown-menu,
    .navbar-nav .dropdown.megamenu.current-page-ancestor > .dropdown-menu,
    .navbar-nav .dropdown.megamenu.current_page_ancestor > .dropdown-menu,
    .navbar-nav .dropdown.megamenu.current-page-parent > .dropdown-menu,
    .navbar-nav .dropdown.megamenu.current_page_parent > .dropdown-menu {
        display: block !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }

    .navbar-nav .dropdown-menu .submenu-inner {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        padding: 0 15px !important;
        margin: 0 auto !important;
        width: 100% !important;
        max-width: 1200px !important;
        text-align: center !important;
    }

    .navbar-nav .dropdown-menu .submenu-inner li {
        list-style: none;
        flex: 1 1 0;
        margin-left: 0;
        text-align: center !important;
    }

    .navbar-nav .dropdown-menu .submenu-inner li a {
        display: block;
        padding: 10px 15px;
        color: #ffffff !important;
        font-size: 1rem;
        font-weight: 700;
        white-space: nowrap;
        text-decoration: none;
        text-align: center !important;
    }

    .navbar-nav .dropdown-menu .submenu-inner li a:hover,
    .navbar-nav .dropdown-menu .submenu-inner li.active > a,
    .navbar-nav .dropdown-menu .submenu-inner li.current-menu-item > a,
    .navbar-nav .dropdown-menu .submenu-inner li.current-menu-ancestor > a {
        background-color: #1E9170 !important;
        color: #ffffff !important;
    }

    .nav-item {
        margin-left: 3px;
    }

    .hero-img::after {
        padding: 150px 0 100px 0;
    }

    #individualsoftware,
    #vorteile-individualsoftware,
    #projekte {
        padding-top: 80px !important;
    }

    .cls-2,
    .cls-3 {
        stroke-width: 4px;
    }

    .pb-50 {
        padding-bottom: 50px !important;
    }

    .animated {
        -webkit-animation-duration: 0.5s;
        animation-duration: 0.5s;
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both
    }

    @-webkit-keyframes fadeInLeft {
        to {
            opacity: 1;
            -webkit-transform: translateX(0);
            transform: translateX(0)
        }
    }

    @keyframes fadeInLeft {
        to {
            opacity: 1;
            -webkit-transform: translateX(0);
            -ms-transform: translateX(0);
            transform: translateX(0)
        }
    }

    .fadeInLeft {
        opacity: 0;
        -webkit-transform: translateX(-200px);
        -ms-transform: translateX(-200px);
        transform: translateX(-200px)
    }

    .fadeInLeft-animated {
        -webkit-animation-name: fadeInLeft;
        animation-name: fadeInLeft;
    }

    @-webkit-keyframes fadeInRight {
        to {
            opacity: 1;
            -webkit-transform: translateX(0);
            transform: translateX(0)
        }
    }

    @keyframes fadeInRight {
        to {
            opacity: 1;
            -webkit-transform: translateX(0);
            -ms-transform: translateX(0);
            transform: translateX(0)
        }
    }

    .fadeInRight {
        opacity: 0;
        -webkit-transform: translateX(200px);
        -ms-transform: translateX(200px);
        transform: translateX(200px)
    }

    .fadeInRight-animated {
        -webkit-animation-name: fadeInRight;
        animation-name: fadeInRight;
    }

    @-webkit-keyframes fadeInUp {
        to {
            opacity: 1;
            -webkit-transform: translateY(0);
            transform: translateY(0)
        }
    }

    @keyframes fadeInUp {
        to {
            opacity: 1;
            -webkit-transform: translateY(0);
            -ms-transform: translateY(0);
            transform: translateY(0)
        }
    }

    .fadeInUp {
        opacity: 0;
        -webkit-transform: translateY(200px);
        -ms-transform: translateY(200px);
        transform: translateY(200px)
    }

    .fadeInUp-animated {
        -webkit-animation-name: fadeInUp;
        animation-name: fadeInUp;
    }

    #polarion-services-cards .card-body>p {
        min-height: 220px;
    }
}

/* Extra large devices (xl, large desktops, 1200px and up) */
@media (min-width: 1200px) {
    #single {
        padding: 100px 250px;
    }
}

@media (min-width: 1400px) {}

/*
::::::::::::::::::::::::::::::::::::::::::::::::::::
Custom media queries
*/

/* Set width to make card deck cards 100% width */
@media (max-width: 1024px) {}

@media (max-width: 992px) {

    #anchor-links {
        display: none;
    }

    #hero {
        padding: 100px 0 0 0;
    }

    #individualsoftware,
    #vorteile-individualsoftware,
    #projekte {
        padding-top: 100px !important;
    }

    #hero .col-lg-6 {
        margin-bottom: 50px;
        padding: 0 20px;
    }

    #hero .hero-txt {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    .smt-100,
    .smt-200 {
        padding-top: 50px !important;
    }
}

@media (max-width: 768px) {

    .card-icon .card-header h4 {
        min-height: 30px;
    }

    /* Mobile card active/hover states */
    .sw-cycle .active,
    .card-icon:hover {
        transform: scale(1.05);
        transition: transform 330ms ease-in-out;
        z-index: 999 !important;
    }

    .sw-cycle .active,
    .sw-cycle .active .card-header,
    .card-icon:hover,
    .card-icon:hover .card-header {
        background-color: #35BE8A !important;
    }

    .sw-cycle .active h1,
    .sw-cycle .active h4,
    .sw-cycle .active .card-text,
    .sw-cycle .active .card-header div,
    .card-icon:hover h1,
    .card-icon:hover h4,
    .card-icon:hover i,
    .card-icon:hover .card-text,
    .card-icon:hover .card-header div {
        color: #FFFFFF !important;
    }

    #projekte,
    #hero {
        padding-top: 50px;
    }

    .py-100 {
        padding: 50px 20px !important;
    }

    .pt-100 {
        padding-top: 50px !important;
    }

    /* PDCA cycle already hidden by max-width 1199px rule */

    .wpcf7-spinner {
        display: none;
    }

    footer,
    #page-404 {
        margin-top: 10cls-10px !important;
    }

    .hero-img {
        background-image: url("assets/img/hero-sm.jpg");
    }

    .contact-wrapper {
        margin-bottom: 30px;
    }

    .form-check-label {
        font-size: 15px;
    }

    /* Fix checkbox positioning to be next to the privacy policy text */
    .form-check {
        display: flex;
        align-items: flex-start;
        gap: 8px;
        justify-content: flex-start;
        width: 100%;
        padding-left: 15%;
    }

    .form-check .form-check-input {
        float: none;
        margin: 0;
        margin-top: 2px;
        flex-shrink: 0;
    }

    .footer-address {
        display: inline-flex;
        justify-content: flex-start;
        text-align: left;
    }
    
    .footer-address span {
        text-align: left;
    }

}

@media (max-width: 576px) {

    .navbar-brand img {
        max-height: 30px;
    }

    #it-dienstleistungen .row {
        margin: 0;
        padding: 0;
    }

    .card-call i {
        font-size: 60px;
    }
}


/*
####################################################
Custom colors
####################################################
*/

.bg-primary {
    background-color: #1E6CE6 !important;
}

.text-primary-custom {
    color: #1E6CE6 !important;
}

.btn-primary-custom {
    background-color: #1E6CE6;
    border-color: #1E6CE6;
    color: #ffffff;
}

.btn-primary-custom:hover {
    background-color: #113C80;
    border-color: #113C80;
    color: #ffffff;
}

.text-secondary-custom,
.nav-item>.active,
.nav-item>.show,
.nav-link:hover {
    color: #35BE8A !important;
}

.text-secondary-custom:hover {
    color: #1E9170 !important;
}

.btn-secondary-custom {
    background-color: #35BE8A;
    border-color: #35BE8A;
    color: #ffffff;
}

.btn-secondary-custom:hover {
    background-color: #1E9170;
    border-color: #1E9170;
    color: #ffffff;
}

.bg-secondary-custom {
    background-color: #35BE8A !important;
    color: #ffffff !important;
}

.bg-secondary-custom:hover {
    background-color: #1E9170 !important
}

.bb-secondary-custom {
    border-bottom: 3px #35BE8A solid;
    padding-bottom: 5px;
}

/* Hide Polarion Dienstleistungen menu item completely */
.menu-item-876,
.menu-item-876 * {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    line-height: 0 !important;
}

.hidden-desktop {
    display: none;
}

@media (max-width: 768px) {
    .hidden-desktop {
        display: block;
    }
}

@media (max-width: 767px) {
    .hidden-content {
        display: none;
    }
}

@media (max-width: 767px) {
    #anfrage {
        text-align: left !important;
    }
}

/* Chatbot Widget */
#chat-widget-container {
    position: fixed;
    bottom: 28px;
    right: 28px;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    font-family: "Roboto", sans-serif;
}

#chat-widget-toggle {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: linear-gradient(135deg, #35BE8A, #1E9170);
    color: #fff;
    border: none;
    font-size: 24px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 18px rgba(53, 190, 138, 0.5);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    flex-shrink: 0;
    margin-top: 12px;
}

#chat-widget-toggle:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 24px rgba(53, 190, 138, 0.65);
}

/* Panel */
#chat-widget-panel {
    display: none;
    width: 360px;
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.18);
    flex-direction: column;
    animation: chatSlideUp 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes chatSlideUp {
    from {
        opacity: 0;
        transform: translateY(24px) scale(0.97);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

#chat-widget-panel.closing {
    animation: chatSlideDown 0.22s ease-in forwards;
}

@keyframes chatSlideDown {
    from {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
    to {
        opacity: 0;
        transform: translateY(16px) scale(0.97);
    }
}

/* Header */
#chat-widget-header {
    background: linear-gradient(135deg, #35BE8A, #1E9170);
    color: #fff;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
    gap: 10px;
}

.chat-header-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 0;
}

.chat-header-avatar {
    position: relative;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
    border: 2px solid rgba(255, 255, 255, 0.35);
}

.chat-online-dot {
    position: absolute;
    bottom: 1px;
    right: 1px;
    width: 11px;
    height: 11px;
    background: #a8f5d2;
    border-radius: 50%;
    border: 2px solid #1E9170;
}

.chat-header-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.chat-header-name {
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chat-header-subtitle {
    font-size: 0.72rem;
    opacity: 0.85;
    margin-top: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#chat-widget-close {
    background: rgba(255, 255, 255, 0.15);
    border: none;
    color: #fff;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 0.8rem;
    transition: background 0.2s;
    flex-shrink: 0;
}

#chat-widget-close:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* Messages */
#chat-widget-messages {
    flex: 1;
    overflow-y: auto;
    padding: 14px 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 280px;
    max-height: 340px;
    background: #f7f9fb;
    scroll-behavior: smooth;
}

#chat-widget-messages::-webkit-scrollbar {
    width: 4px;
}

#chat-widget-messages::-webkit-scrollbar-track {
    background: transparent;
}

#chat-widget-messages::-webkit-scrollbar-thumb {
    background: #c8d6df;
    border-radius: 4px;
}

.chat-bubble {
    max-width: 78%;
    padding: 10px 14px;
    border-radius: 18px;
    font-size: 0.875rem;
    line-height: 1.45;
    word-wrap: break-word;
    animation: chatBubbleFadeIn 0.25s ease-out;
}

@keyframes chatBubbleFadeIn {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.chat-bubble.bot {
    background: #fff;
    color: #2c3e50;
    align-self: flex-start;
    border-bottom-left-radius: 4px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

.chat-bubble.user {
    background: linear-gradient(135deg, #35BE8A, #1E9170);
    color: #fff;
    align-self: flex-end;
    border-bottom-right-radius: 4px;
    box-shadow: 0 1px 6px rgba(53, 190, 138, 0.3);
}

/* Typing indicator */
.chat-typing {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 10px 14px;
    background: #fff;
    border-radius: 18px;
    border-bottom-left-radius: 4px;
    align-self: flex-start;
    width: 56px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
    animation: chatBubbleFadeIn 0.25s ease-out;
}

.chat-typing span {
    width: 7px;
    height: 7px;
    background: #b0bec5;
    border-radius: 50%;
    animation: typingBounce 1.2s infinite ease-in-out;
}

.chat-typing span:nth-child(2) {
    animation-delay: 0.18s;
}

.chat-typing span:nth-child(3) {
    animation-delay: 0.36s;
}

@keyframes typingBounce {
    0%, 80%, 100% {
        transform: translateY(0);
        opacity: 0.4;
    }
    40% {
        transform: translateY(-5px);
        opacity: 1;
    }
}

/* Input area */
#chat-widget-input-area {
    display: flex;
    border-top: 1px solid #e8eef2;
    padding: 10px 12px;
    gap: 8px;
    align-items: center;
    flex-shrink: 0;
    background: #fff;
}

#chat-widget-input {
    flex: 1;
    border: 1.5px solid #e0e8ee;
    border-radius: 22px;
    padding: 9px 16px;
    font-size: 0.875rem;
    outline: none;
    transition: border-color 0.2s, background 0.2s;
    background: #f7f9fb;
    color: #333;
    box-sizing: border-box;
}

#chat-widget-input:focus {
    border-color: #35BE8A;
    background: #fff;
}

#chat-widget-send {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: linear-gradient(135deg, #35BE8A, #1E9170);
    color: #fff;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    transition: transform 0.2s, box-shadow 0.2s;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(53, 190, 138, 0.4);
}

#chat-widget-send:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 14px rgba(53, 190, 138, 0.55);
}

#chat-widget-input-area.hidden {
    display: none;
}

/* Responsive: full width on small screens */
@media (max-width: 480px) {
    #chat-widget-panel {
        width: calc(100vw - 32px);
    }

    #chat-widget-container {
        right: 16px;
        bottom: 16px;
    }

    #chat-widget-messages {
        min-height: 220px;
        max-height: 52vh;
    }
}

/* Mobile Submenu Toggle */
.mobile-submenu-toggle {
    background: none;
    border: none;
    padding: 8px 10px;
    font-size: 1.2rem;
    color: #6c757d;
    cursor: pointer;
    position: absolute;
    right: 10px;
    top: 6px;
    transition: color 0.3s ease;
    z-index: 10;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    min-height: 30px;
    line-height: 1;
}

/* Show on mobile only */
@media (min-width: 992px) {
    .mobile-submenu-toggle {
        display: none !important;
    }
}

.mobile-submenu-toggle:hover {
    color: #35BE8A;
}

.mobile-submenu-toggle:focus {
    outline: 2px solid #35BE8A;
    outline-offset: 2px;
}

.mobile-submenu-toggle.active {
    color: #35BE8A;
}

.mobile-submenu-toggle.active i {
    transform: rotate(45deg);
}

.mobile-submenu-toggle i {
    transition: transform 0.3s ease;
    pointer-events: none;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Mobile dropdown menu styles */
@media (max-width: 991.98px) {
    /* Remove all spacing from navbar list */
    .navbar-nav {
        gap: 0 !important;
        row-gap: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    
    .navbar-nav > li,
    .navbar-nav .nav-item {
        position: relative;
        margin: 0 !important;
        padding: 0 !important;
        line-height: 1 !important;
        min-height: auto !important;
        height: auto !important;
    }
    
    .navbar-nav .nav-link {
        padding: 12px 16px !important;
        display: block;
        line-height: 1.3 !important;
        margin: 0 !important;
        height: auto !important;
    }
    
    .navbar-nav .dropdown.megamenu {
        position: relative;
    }

    .navbar-nav .dropdown.megamenu > .nav-link {
        width: calc(100% - 50px);
        padding-right: 50px !important;
        display: block;
    }

    .navbar-nav .dropdown-menu {
        position: static !important;
        display: none !important;
        height: 0 !important;
        min-height: 0 !important;
        max-height: 0 !important;
        overflow: hidden !important;
        border: none !important;
        padding: 0 !important;
        margin: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    .navbar-nav .dropdown-menu.show-mobile {
        display: block !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: visible !important;
    }
    
    .navbar-nav .dropdown-menu .subtitle {
        display: none !important;
    }
    
    /* Style for dynamically added child menu items */
    .navbar-nav .dropdown-menu .submenu-inner {
        padding: 0 0 0 35px !important;
        margin: 0 !important;
        display: block !important;
        flex-direction: column !important;
    }
    
    .navbar-nav .dropdown-menu .submenu-inner li {
        list-style: none;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    .navbar-nav .dropdown-menu .submenu-inner li:first-child {
        margin-top: 0 !important;
    }
    
    .navbar-nav .dropdown-menu .submenu-inner li:last-child {
        margin-bottom: 0 !important;
    }
    
    .navbar-nav .dropdown-menu .submenu-inner li a {
        color: #6c757d;
        font-weight: normal;
        font-size: 0.95rem;
        padding: 5px 0;
        display: block;
        margin: 0 !important;
    }
    
    .navbar-nav .dropdown-menu .submenu-inner li a:hover {
        color: #35BE8A;
    }
    
    /* Keep old sub-menu styles for compatibility */
    .navbar-nav .dropdown-menu .sub-menu {
        padding-left: 35px;
        margin-top: 5px;
        margin-bottom: 10px;
    }
    
    .navbar-nav .dropdown-menu .sub-menu li {
        padding: 8px 0;
        list-style: none;
    }
    
    .navbar-nav .dropdown-menu .sub-menu li a {
        color: #6c757d;
        font-weight: normal;
        font-size: 0.95rem;
        padding: 5px 0;
        display: block;
    }
    
    .navbar-nav .dropdown-menu .sub-menu li a:hover {
        color: #35BE8A;
    }
}

/* ============================================
   DESKTOP MIN-WIDTH ENFORCEMENT (Amazon-style)
   When a desktop browser is resized narrower,
   show a horizontal scrollbar instead of
   squishing/overlapping elements.
   Targets devices with a mouse (hover + fine
   pointer) — phones and tablets are unaffected.
   ============================================ */
@media (hover: hover) and (pointer: fine) {

    /* --- Core min-width + scrollbar ---
       Setting overflow-x on html or body forces overflow-y to auto and
       hijacks window.scrollY vertical scrolling. The correct approach:
       simply set min-width and let the browser produce a horizontal
       scrollbar naturally when content (1200px) exceeds the viewport.
       No explicit overflow rule needed — it works in all modern browsers. */
    html,
    body {
        min-width: 1200px;
    }

    html {
        scroll-padding-top: 120px;
    }

    /* Navbar: switch from position:fixed to position:sticky so it scrolls
       with the page horizontally (showing all items at any viewport width)
       while still sticking at the top during vertical scroll.
       Bootstrap's fixed-top class sets position:fixed — we override it here. */
    #navbar {
        position: sticky !important;
        top: 0 !important;
        min-width: 1200px;
        width: 100%;
    }

    /* Ensure the site-header wrapper doesn't interfere with sticky stacking */
    header.site-header {
        position: sticky;
        top: 0;
        z-index: 1030;
    }

    /* Anchor-links bar on inner pages: also sticky (it also has fixed-top class).
       The `top` value is set dynamically by setAnchorLinksPosition() in main.js to
       match the navbar height exactly. No !important here so the JS inline style wins. */
    #anchor-links {
        position: sticky !important;
        top: 71px; /* fallback; JS overrides this with the measured navbar height */
        min-width: 1200px;
        width: 100%;
        z-index: 1020;
    }

    /* Container always at desktop max-width */
    .container {
        max-width: 1200px;
        padding-left: 15px;
        padding-right: 15px;
    }

    /* container-fluid: use 100% of body, not 100vw of viewport */
    .container-fluid {
        width: 100%;
        max-width: 100%;
        margin-left: 0;
        margin-right: 0;
        padding-left: 0;
        padding-right: 0;
    }

    main.container-fluid {
        width: 100%;
    }

    /* Hero text: use 100% based positioning instead of vw */
    .hero-txt {
        max-width: min(1200px, calc(100% - 30px));
    }

    /* --- Force Bootstrap navbar-expand-lg desktop state --- */
    .navbar-expand-lg .navbar-collapse {
        display: flex !important;
        flex-basis: auto !important;
    }

    .navbar-expand-lg .navbar-toggler {
        display: none !important;
    }

    .navbar-expand-lg .navbar-nav {
        flex-direction: row !important;
    }

    .navbar-expand-lg .navbar-nav .dropdown-menu {
        position: absolute !important;
    }

    .navbar-collapse {
        overflow: visible !important;
        max-height: none !important;
    }

    /* Desktop navbar layout — override Bootstrap's justify-content:space-between
       so 3 flex children (brand / navbarNav / second-nav) don't get huge gaps */
    #navbar .container {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: flex-start;
    }

    /* Reset mobile navbar element ordering */
    #navbar .navbar-brand { order: 0; flex: 0 0 auto; }
    #navbar #navbar-toggler { order: 0; margin-left: 0 !important; margin-right: 0 !important; }
    #navbar #navbarNav { order: 0; flex: 1 1 auto; overflow: visible; flex-basis: auto !important; }
    #navbar #second-nav { order: 0; flex: 0 0 auto; white-space: nowrap; }

    #navbar #navbarNav .navbar-nav {
        flex-wrap: nowrap;
    }

    #navbar #navbarNav .nav-item {
        white-space: nowrap;
    }

    .nav-link {
        font-size: 1.1rem;
    }

    .navbar-brand img {
        max-height: 45px;
    }

    .mobile-submenu-toggle {
        display: none !important;
    }

    /* --- Force Bootstrap md grid columns (≥768px) --- */
    /* Declared first so col-lg-* (below) wins for elements with both classes */
    .col-md-1  { flex: 0 0 auto; width:  8.33333333% !important; }
    .col-md-2  { flex: 0 0 auto; width: 16.66666667% !important; }
    .col-md-3  { flex: 0 0 auto; width: 25%          !important; }
    .col-md-4  { flex: 0 0 auto; width: 33.33333333% !important; }
    .col-md-5  { flex: 0 0 auto; width: 41.66666667% !important; }
    .col-md-6  { flex: 0 0 auto; width: 50%          !important; }
    .col-md-7  { flex: 0 0 auto; width: 58.33333333% !important; }
    .col-md-8  { flex: 0 0 auto; width: 66.66666667% !important; }
    .col-md-9  { flex: 0 0 auto; width: 75%          !important; }
    .col-md-10 { flex: 0 0 auto; width: 83.33333333% !important; }
    .col-md-11 { flex: 0 0 auto; width: 91.66666667% !important; }
    .col-md-12 { flex: 0 0 auto; width: 100%         !important; }

    /* --- Force Bootstrap lg grid columns (≥992px) --- */
    /* Declared after col-md-* so lg widths override md widths
       for elements that carry both classes (e.g. col-md-6 col-lg-3) */
    .col-lg-1  { flex: 0 0 auto; width:  8.33333333% !important; }
    .col-lg-2  { flex: 0 0 auto; width: 16.66666667% !important; }
    .col-lg-3  { flex: 0 0 auto; width: 25%          !important; }
    .col-lg-4  { flex: 0 0 auto; width: 33.33333333% !important; }
    .col-lg-5  { flex: 0 0 auto; width: 41.66666667% !important; }
    .col-lg-6  { flex: 0 0 auto; width: 50%          !important; }
    .col-lg-7  { flex: 0 0 auto; width: 58.33333333% !important; }
    .col-lg-8  { flex: 0 0 auto; width: 66.66666667% !important; }
    .col-lg-9  { flex: 0 0 auto; width: 75%          !important; }
    .col-lg-10 { flex: 0 0 auto; width: 83.33333333% !important; }
    .col-lg-11 { flex: 0 0 auto; width: 91.66666667% !important; }
    .col-lg-12 { flex: 0 0 auto; width: 100%         !important; }

    /* --- Force Bootstrap lg display utilities --- */
    .d-lg-none         { display: none !important; }
    .d-lg-block        { display: block !important; }
    .d-lg-flex         { display: flex !important; }
    .d-lg-inline       { display: inline !important; }
    .d-lg-inline-block { display: inline-block !important; }
    .d-lg-inline-flex  { display: inline-flex !important; }

    /* --- Force Bootstrap md display utilities --- */
    .d-md-none         { display: none !important; }
    .d-md-block        { display: block !important; }
    .d-md-flex         { display: flex !important; }
    .d-md-inline       { display: inline !important; }
    .d-md-inline-block { display: inline-block !important; }

    /* --- Force Bootstrap lg/md order utilities --- */
    .order-lg-1    { order: 1 !important; }
    .order-lg-2    { order: 2 !important; }
    .order-lg-3    { order: 3 !important; }
    .order-md-first { order: -1 !important; }
    .order-md-last  { order: 13 !important; }

    /* --- Force Bootstrap lg/md spacing utilities --- */
    .ms-lg-0 { margin-left: 0 !important; }
    .me-lg-0 { margin-right: 0 !important; }
    .mt-lg-0 { margin-top: 0 !important; }
    .mt-lg-3 { margin-top: 1rem !important; }
    .mb-md-0 { margin-bottom: 0 !important; }
    .mt-md-0 { margin-top: 0 !important; }

    /* --- Force Bootstrap lg/md text + alignment utilities --- */
    .text-md-start { text-align: left !important; }
    .justify-content-lg-between { justify-content: space-between !important; }

    /* --- Force Bootstrap lg/md padding utilities --- */
    .p-md-5  { padding: 3rem !important; }
    .pe-md-5 { padding-right: 3rem !important; }

    /* --- Override theme mobile-specific rules --- */

    .fs-5 {
        font-size: 1.25rem !important;
    }

    [class*="col-"] {
        padding-left: 15px;
        padding-right: 15px;
    }

    /* Undo @media (max-width: 992px) overrides */
    #anchor-links {
        display: flex !important;
    }

    #hero {
        padding: 0 !important;
    }

    #hero .hero-txt {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .smt-100 {
        padding-top: 100px !important;
    }

    .smt-200 {
        padding-top: 200px !important;
    }

    /* Undo @media (max-width: 768px) overrides */
    .card-icon .card-header h4 {
        min-height: 80px;
    }

    .py-100 {
        padding-top: 100px !important;
        padding-bottom: 100px !important;
    }

    .pt-100 {
        padding-top: 100px !important;
    }

    footer {
        margin-top: 80px !important;
    }

    .hero-img {
        height: 80vh;
        min-height: 500px;
        background-image: url("assets/img/hero.jpg");
    }

    /* Undo card icon mobile overrides */
    .card-icon {
        width: 32%;
        margin-bottom: 0;
        margin-right: 10px;
    }

    .sw-cycle .card {
        width: 20%;
        margin-bottom: 0;
    }

    /* Desktop card hover effects */
    .sw-cycle .active,
    .card-icon:hover {
        transform: scale(1.05);
        transition: transform 330ms ease-in-out;
        z-index: 999 !important;
    }

    .sw-cycle .active,
    .sw-cycle .active .card-header,
    .card-icon:hover,
    .card-icon:hover .card-header {
        background-color: #35BE8A !important;
    }

    .sw-cycle .active h1,
    .sw-cycle .active h4,
    .sw-cycle .active .card-text,
    .card-icon:hover h1,
    .card-icon:hover h4,
    .card-icon:hover i,
    .card-icon:hover .card-text {
        color: #FFFFFF !important;
    }

    /* Desktop animations */
    .animated {
        animation-duration: 0.5s;
        animation-fill-mode: both;
    }

    /* Desktop green strap submenu */
    .navbar-nav .dropdown.megamenu {
        position: static;
    }

    .navbar-nav .dropdown.megamenu > .dropdown-menu {
        display: none !important;
        position: absolute !important;
        top: 100% !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        transform: none !important;
        background-color: #35BE8A !important;
        border: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        padding: 0 !important;
        margin: 0 !important;
        z-index: 1050;
    }

    .navbar-nav .dropdown.megamenu.current-menu-item > .dropdown-menu,
    .navbar-nav .dropdown.megamenu.current-menu-ancestor > .dropdown-menu,
    .navbar-nav .dropdown.megamenu.current-page-ancestor > .dropdown-menu,
    .navbar-nav .dropdown.megamenu.current_page_ancestor > .dropdown-menu,
    .navbar-nav .dropdown.megamenu.current-page-parent > .dropdown-menu,
    .navbar-nav .dropdown.megamenu.current_page_parent > .dropdown-menu {
        display: block !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }

    .navbar-nav .dropdown-menu .submenu-inner {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        padding: 0 15px !important;
        margin: 0 auto !important;
        width: 100% !important;
        max-width: 1200px !important;
        text-align: center !important;
    }

    .navbar-nav .dropdown-menu .submenu-inner li {
        list-style: none;
        flex: 1 1 0;
        text-align: center !important;
    }

    .navbar-nav .dropdown-menu .submenu-inner li a {
        display: block;
        padding: 10px 15px;
        color: #ffffff !important;
        font-size: 1rem;
        font-weight: 700;
        white-space: nowrap;
        text-decoration: none;
        text-align: center !important;
    }

    .navbar-nav .dropdown-menu .submenu-inner li a:hover,
    .navbar-nav .dropdown-menu .submenu-inner li.active > a,
    .navbar-nav .dropdown-menu .submenu-inner li.current-menu-item > a,
    .navbar-nav .dropdown-menu .submenu-inner li.current-menu-ancestor > a {
        background-color: #1E9170 !important;
        color: #ffffff !important;
    }

    .nav-item {
        margin-left: 3px;
    }

    /* Desktop hero padding */
    .hero-img::after {
        padding: 150px 0 100px 0;
    }

    /* With sticky positioning the navbar is in document flow, so sections no
       longer need padding to clear fixed bars. Scroll offsets are handled by
       html{scroll-padding-top} and existing scroll-margin-top rules. */
    #vorteile-individualsoftware,
    #projekte {
        padding-top: 0 !important;
    }

    #individualsoftware {
        padding-top: 30px !important;
    }
}

@media (max-width: 442px) {
    .label-privacypolicy {
        width:50vw !important;
        display: flex !important;
        margin:auto !important;

    }
    .label-privacypolicy input { }
        .label-privacypolicy span {
        text-align: center !important;}

}