body {
  overflow-x: hidden !important;
    max-width: 100vw !important;
  }
    * {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        -o-font-smoothing: antialiased;
    }
    .pre-header {
        width: 100vw; /* Use viewport width instead of calc() */
    margin-left: calc(-50vw + 50%); /* Center the full-width element */
    margin-right: calc(-50vw + 50%); /* Center the full-width element */
    background-color: #F2F5F1;
    border-bottom: 1px solid #E7E8E7;
    overflow: hidden;
    }
  @media (min-width: 1400px) {
    .padding-global:not(.pre-header-links) {
    padding-left: 15%;
    padding-right: 15%;
	}
  }
    @media (min-width: 992px) and (max-width: 1400px) {
        .navbar12_menu-links {
            font-size: 0.8rem;
        }
    }
  @media (min-width: 992px) and (max-width: 1200px) {
    .navbar12_menu-buttons {
    display: none;}
  }
    .blog42_item .button-style-21,
    .layout249_item .button-style-21,
    .layout303_item .button-style-21 {
        border-bottom: 2px solid transparent;
    }
    .blog42_item:hover .button-style-21,
    .layout249_item:hover .button-style-21,
    .layout303_item:hover .button-style-21 {
        border-bottom: 2px solid #009353;
    }
    .blog42_item.view-all-hidden {
        max-height: 0;
        overflow: hidden;
        opacity: 0;
        transform: translateY(-15px);
        transition: all 0.4s ease;
    }
    .blog42_item.view-all-hidden.show-item {
        max-height: 900px; /* Adjust as needed */
        opacity: 1;
        transform: translateY(0);
    }
    #map {
        height: 700px;
        width: 100%;
        box-shadow: 
            inset 0 2px 4px rgba(0,0,0,0.15),
            inset 0 -1px 2px rgba(0,0,0,0.1);
    }
    .gm-style-iw {
        font-family: Montserrat, sans-serif;
        max-width: 250px;
    }
    .gm-style-iw h3 {
        margin: 0 0 10px 0;
        color: #009353;
        font-size: 16px;
    }
    .gm-style-iw p {
        margin: 5px 0;
        color: #666;
        font-size: 14px;
        line-height: 1.4;
    }
    .gm-style-iw a {
        display: block;
        width: 90%;
        margin-top: 10px;
        margin-bottom: 25px;
        margin-left: 5%;
        padding-top: .6875rem;
        padding-bottom: .6875rem;
        border-radius: 25px;
        text-align: center;
        border: 1px solid var(--_primitives---colors--green-haze);
        background-color: var(--_primitives---opacity--transparent);
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
        color: var(--color-scheme-2--accent);
        box-shadow: 0 2px 5px #0003;
    }
    .gm-style-iw a:hover {
        background-color: #007a45;
        color: #fff;
    }
    @media (max-width: 992px) {
      .page-wrapper .padding-global:not(.normal-padding-bottom) {
      padding-bottom: 2.5rem;
      }
        .navbar12_link.s-p {
            display: block;
            padding: 12px 8px !important;
        }
      .button-group.is-right {
      display: none;
      }
    }
    /* Sticky header — position is ALWAYS sticky so we never switch position
       models on scroll (that switch was the visible glitch near the top of
       the page). The .sticky class only adds visual treatment (background +
       shadow) once the user has scrolled past the threshold. */
    .navbar12_component {
        position: sticky;
        top: 0;
        left: 0;
        right: 0;
        z-index: 1000 !important;
        width: 100%;
        transform: translateY(0);
        transition: transform 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
        will-change: transform;
    }
    .navbar12_component.sticky {
        background-color: #fff;
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
    }
    /* Slide off the top of the viewport when JS adds .nav-hidden (scroll-down). */
    .navbar12_component.nav-hidden {
        transform: translateY(-100%);
    }
    /* Maintain pre-header styling when sticky */
    .navbar12_component.sticky .pre-header {
        background-color: #F2F5F1;
        border-bottom: 1px solid #E7E8E7;
    }
    .navbar12_component.sticky .pre-header-background {
        width: 100%;
        margin-left: 0;
    }
    .navbar12_component.sticky .navbar12_container {
        background-color: rgba(255, 255, 255, 0.95);
    }
    /* Keep pre-header visible when sticky */
    .navbar12_component.sticky .pre-header-background {
        display: block;
    }
    /* Smooth slide down animation */
    @keyframes slideDown {
        from {
            transform: translateY(-100%);
            opacity: 0;
        }
        to {
            transform: translateY(0);
            opacity: 1;
        }
    }
    /* Body padding to prevent content jump - use a placeholder instead */
    .navbar-placeholder {
        height: 0;
        transition: height 0.2s ease;
        visibility: hidden;
        overflow: hidden;
    }
    .navbar-placeholder.active {
        height: 140px; /* Same as navbar height */
    }
    /* Smooth dropdown effects */
    .navbar12_dropdown-list {
        opacity: 0;
        visibility: hidden;
        transform: translateY(-10px);
        transition: opacity 0.2s ease 0.25s, visibility 0s linear 0.45s, transform 0.2s ease 0.25s;
        max-height: 0;
        overflow: hidden;
    }
    .navbar12_menu-dropdown:hover .navbar12_dropdown-list,
    .navbar12_menu-dropdown.w--open .navbar12_dropdown-list {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
        max-height: 500px;
    }
    /* Dropdown toggle arrow rotation */
    .navbar12_dropdown-toggle .dropdown-chevron {
        transition: transform 0.3s ease;
    }
    .navbar12_menu-dropdown:hover .dropdown-chevron,
    .navbar12_menu-dropdown.w--open .dropdown-chevron {
        transform: rotate(180deg);
    }
    /* Enhanced dropdown styling when sticky */
    .navbar12_component.sticky .navbar12_dropdown-list {
        background-color: rgba(255, 255, 255, 0.98);
        border: 1px solid rgba(0, 0, 0, 0.05);
    }
    /* Dropdown link hover effects */
    .navbar12_dropdown-link {
        transition: all 0.2s ease;
    }
    .navbar12_dropdown-link:hover {
        background-color: rgba(0, 147, 83, 0.05);
    }
    /* Desktop adjustments - hide mobile pre-header when sticky */
    @media (min-width: 992px) {
        .navbar12_component.sticky .pre-header-background.mobile-pre-header {
            display: none;
        }
       .navbar12_dropdown-toggle a {
        display: flex;
        align-items: center;
        transition: all 0.05s ease;
        position: relative;
    }
    /* Create the animated underline for dropdown toggles */
    .navbar12_dropdown-toggle a::after {
        content: '';
        position: absolute;
        bottom: -2px; /* Position below the text */
        left: 0;
        width: 0;
        height: 3px;
        background-color: #009353;
        border-radius: 2px;
        transition: width 0.25s ease; /* Adjust speed as needed */
        z-index: 1;
    }
    /* Animate the underline from left to right on hover for dropdown toggles */
    .navbar12_dropdown-toggle:hover a::after {
        width: 100%;
    }
    /* Create the animated underline for regular navbar links */
    .navbar12_link.s-p a {
        position: relative;
        transition: all 0.05s ease;
        padding: 0 !important;
        margin: .5rem 1rem;
    }
    .navbar12_link.s-p a::after {
        content: '';
        position: absolute;
        bottom: -2px; /* Position below the text */
        left: 0;
        width: 0;
        height: 3px;
        background-color: #009353;
        border-radius: 2px;
        transition: width 0.25s ease;
        z-index: 1;
    }
    /* Animate the underline from left to right on hover for regular navbar links */
    .navbar12_link.s-p:hover a::after {
        width: 100%;
    }
    /* For dark mode - make underlines visible */
    .dark .navbar12_dropdown-toggle a::after,
    .dark .navbar12_link.s-p a::after {
        background-color: #fff; /* White for dark mode visibility */
    }
    }
    /* Hamburger to X Animation - Only animation styles */
    .menu-icon1_line-top,
    .menu-icon1_line-middle,
    .menu-icon1_line-middle-inner,
    .menu-icon1_line-bottom {
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        transform-origin: center;
    }
    /* Animation when menu is open (w--open class) */
    .navbar12_menu-button.w--open .menu-icon1_line-top {
        transform: rotate(45deg) translateY(11px);
    }
    .navbar12_menu-button.w--open .menu-icon1_line-middle {
        opacity: 0;
        transform: scaleX(0);
    }
    .navbar12_menu-button.w--open .menu-icon1_line-middle-inner {
        opacity: 0;
        transform: scaleX(0);
    }
    .navbar12_menu-button.w--open .menu-icon1_line-bottom {
        transform: rotate(-45deg) translateY(-11px);
    }
    /* Keep bars black on hover */
    .navbar12_menu-button:hover .menu-icon1_line-top,
    .navbar12_menu-button:hover .menu-icon1_line-middle,
    .navbar12_menu-button:hover .menu-icon1_line-middle-inner,
    .navbar12_menu-button:hover .menu-icon1_line-bottom {
        background-color: black;
    }
    /* Remove focus and button styling */
    .navbar12_menu-button:focus {
        outline: none;
    }
    .navbar12_menu-button:visited {
        border: none;
        outline: none;
    }
    .navbar12_menu-button {
        border: none;
        outline: none;
    }
    /* Full-width sliding dropdown menu - Desktop only (992px+) */
    @media (min-width: 992px) {
        .navbar12_dropdown-list {
            /* Reset default dropdown styles */
            position: fixed !important;
            top: 90px !important; /* Default navbar height - overridden by sticky state */
            left: 0 !important;
            right: 0 !important;
            width: 100vw !important;
            height: auto !important; /* Auto height based on content */
            min-height: 200px !important; /* Minimum height for small content */
            background-color: white !important;
            border: none !important;
            border-radius: 0 !important;
            padding: 3rem 3rem 5rem 3rem !important; /* Added bottom margin */
            /* Animation properties - consistent for both open and close */
            opacity: 0;
            visibility: hidden;
            transform: translateY(-20px); /* Start from slightly above instead of -100% */
            transition: opacity 0.22s ease 0.5s, visibility 0s linear 0.72s, transform 0.22s ease 0.5s;
            max-height: none !important;
            overflow: visible !important;
            /* Layout */
            display: flex;
            align-items: flex-start;
            justify-content: flex-start;
            z-index: 9999; /* Higher z-index to ensure it's on top */
            /* Ensure dropdown stays open during hover transitions */
            pointer-events: auto;
        }
        /* Dropdown panel position — navbar height is the same regardless of
           the .sticky class now, so use one consistent offset. */
        .navbar12_component .navbar12_dropdown-list {
            top: 90px !important;
        }
        /* Create seamless hover areas for parent navigation items */
        .navbar12_menu-dropdown {
            position: relative;
            /* Ensure proper vertical alignment */
            display: flex;
            align-items: center;
        }
        /* Bridge between navbar items and the fixed-position dropdown panel. The custom
           hover logic in /js/dropdown-keep-open.js handles the actual stay-open behaviour,
           but this transparent strip still helps so the cursor doesn't visually appear to
           "leak" between sibling dropdowns when the panel is open. */
        .navbar12_menu-dropdown::after {
            content: '';
            position: absolute;
            top: 100%;
            left: -60px;
            right: -60px;
            height: 60px;
            background: transparent;
            z-index: 9998;
            pointer-events: auto;
        }
        /* Main hover state for opening dropdown */
        .navbar12_menu-dropdown:hover .navbar12_dropdown-list,
        .navbar12_menu-dropdown.w--open .navbar12_dropdown-list {
            opacity: 1;
            visibility: visible;
            transform: translateY(0);
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            transition-delay: 0s; /* No delay when opening */
        }
        /* Keep dropdown open when hovering over dropdown content itself */
        .navbar12_dropdown-list:hover {
            opacity: 1 !important;
            visibility: visible !important;
            transform: translateY(0) !important;
        }
        /* Create seamless navigation between dropdowns */
        .navbar12_menu-links {
            position: relative;
            display: flex;
            align-items: center; /* Ensure all nav items are vertically centered */
        }
        /* Ensure dropdown toggles maintain proper alignment */
        .navbar12_dropdown-toggle {
            display: flex;
            align-items: center;
            transition: all 0.2s ease;
            position: relative;
        }
        /* Add delay before closing to allow smooth transitions between nav items */
        .navbar12_menu-dropdown {
            transition-delay: 0.2s; /* Delay before closing */
        }
        .navbar12_menu-dropdown:hover {
            transition-delay: 0s; /* No delay when hovering */
        }
        /* Extend hover area for the entire navigation area */
        .navbar12_menu-links::after {
            content: '';
            position: absolute;
            top: 100%;
            left: 0;
            right: 0;
            height: 20px; /* Bridge height for easier navigation */
            background: transparent;
            z-index: 997;
            pointer-events: auto;
            opacity: 0;
            transition: opacity 0.2s ease;
        }
        /* Show navigation bridge when any dropdown is hovered */
        .navbar12_menu-links:hover::after {
            opacity: 1;
        }
        /* Content alignment - left aligned */
        .navbar12_dropdown-content {
            position: relative; /* establish stacking context above .navbar12_dropdown-list::before (z:-1) */
            z-index: 1;
            width: 100%;
            max-width: 1200px; /* Container max-width */
            margin: 0; /* Remove center margin, align left */
            padding-left: 2rem; /* Left padding for alignment */
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) !important;
            grid-column-gap: 3rem !important;
            grid-row-gap: 2rem !important;
            align-items: start;
        }
        /* Ensure dropdown items are properly styled */
        .navbar12_dropdown-link-list {
            display: flex;
            flex-direction: column;
            gap: 1rem;
            width: 100%;
        }
        .navbar12_dropdown-link {
            padding: 1rem;
            border-radius: 8px;
            transition: all 0.2s ease;
            background-color: rgba(0, 0, 0, 0.03);
            color: #333;
        }
        .navbar12_dropdown-link:hover {
            background-color: #F2F5F1;
        }
        /* White background overlay */
        /* Backdrop overlay below the navbar — fades the page-content area to white
           while a dropdown is open, but does NOT cover the navbar itself. */
        .navbar12_dropdown-list::before {
            content: '';
            position: fixed;
            top: 90px;             /* start below the default-height navbar */
            left: 0;
            right: 0;
            bottom: 0;
            background: white;
            z-index: -1;
            opacity: 0;
            transition: opacity 0.3s ease;
        }
        /* Backdrop overlay top is now consistent regardless of .sticky state. */
        .navbar12_menu-dropdown:hover .navbar12_dropdown-list::before,
        .navbar12_menu-dropdown.w--open .navbar12_dropdown-list::before {
            opacity: 1;
        }
        /* Closed dropdown lists are removed from layout entirely on desktop, so the
           four full-width fixed-position panels don't stack on top of each other. */
        .navbar12_component .navbar12_menu-dropdown .navbar12_dropdown-list {
            display: none;
        }
        /* Open state — applies whether .w--open is on the menu-dropdown, on the
           list itself, or the menu-dropdown is being :hover'd. */
        .navbar12_component .navbar12_menu-dropdown.w--open .navbar12_dropdown-list,
        .navbar12_component .navbar12_menu-dropdown:hover .navbar12_dropdown-list,
        .navbar12_component .navbar12_menu-dropdown .navbar12_dropdown-list.w--open {
            display: flex !important;
            position: fixed !important;
            opacity: 1 !important;
            visibility: visible !important;
            transform: translateY(0) !important;
        }
        /* Force every descendant of an open dropdown to be visible — defeats any
           Webflow-injected inline styles or transition states that hide content. */
        .navbar12_component .navbar12_menu-dropdown.w--open .navbar12_dropdown-list *,
        .navbar12_component .navbar12_menu-dropdown:hover .navbar12_dropdown-list *,
        .navbar12_component .navbar12_menu-dropdown .navbar12_dropdown-list.w--open * {
            opacity: 1 !important;
            visibility: visible !important;
        }
        /* Internal layout for the open panel: content + columns + link list visible in flow */
        .navbar12_component .navbar12_menu-dropdown.w--open .navbar12_dropdown-content,
        .navbar12_component .navbar12_menu-dropdown:hover .navbar12_dropdown-content,
        .navbar12_component .navbar12_menu-dropdown .navbar12_dropdown-list.w--open .navbar12_dropdown-content {
            display: block !important;
        }
        .navbar12_component .navbar12_menu-dropdown.w--open .navbar12_dropdown-column,
        .navbar12_component .navbar12_menu-dropdown:hover .navbar12_dropdown-column,
        .navbar12_component .navbar12_menu-dropdown .navbar12_dropdown-list.w--open .navbar12_dropdown-column {
            display: block !important;
        }
        .navbar12_component .navbar12_menu-dropdown.w--open .navbar12_dropdown-link-list,
        .navbar12_component .navbar12_menu-dropdown:hover .navbar12_dropdown-link-list,
        .navbar12_component .navbar12_menu-dropdown .navbar12_dropdown-list.w--open .navbar12_dropdown-link-list {
            display: flex !important;
            flex-direction: column !important;
        }
        /* Each link is a flex item — force it visible. Skip .d-none links (intentionally hidden). */
        .navbar12_component .navbar12_menu-dropdown.w--open .navbar12_dropdown-link:not(.d-none),
        .navbar12_component .navbar12_menu-dropdown:hover .navbar12_dropdown-link:not(.d-none),
        .navbar12_component .navbar12_menu-dropdown .navbar12_dropdown-list.w--open .navbar12_dropdown-link:not(.d-none) {
            display: flex !important;
        }
        /* Remove the right positioning */
        .navbar12_dropdown-list.w--open {
            right: auto !important;
        }
        /* Special handling for smooth transitions between different dropdowns */
        .navbar12_menu-links:hover .navbar12_menu-dropdown:not(:hover) .navbar12_dropdown-list {
            transition-delay: 0.3s; /* Longer delay for non-hovered dropdowns */
        }
        /* Ensure the active dropdown stays open immediately */
        .navbar12_menu-dropdown:hover .navbar12_dropdown-list {
            transition-delay: 0s !important;
        }
        /* Additional smooth transition for the dropdown toggle */
        .navbar12_link {
            display: flex;
            align-items: center;
            transition: all 0.2s ease;
        }
        /* Hover effect for dropdown toggle */
        .navbar12_menu-dropdown:hover .navbar12_dropdown-toggle {
            color: inherit; /* Maintain color consistency */
        }
        /* Ensure chevron rotation is smooth */
        .dropdown-chevron {
            transition: transform 0.2s ease;
        }
        .navbar12_menu-dropdown:hover .dropdown-chevron,
        .navbar12_menu-dropdown.w--open .dropdown-chevron {
            transform: rotate(180deg);
        }
    }
/* Light "muted" filter on all content images, lifted on hover. Logos /
   icons / partner-strip / dark-mode-only assets are excluded via
   :not(.no-saturate). Team portraits (.center-portrait) opt in here so they
   feel coherent with everything else. */
/* NOTE: this shorthand out-specifies .blog42_image's own
   `transition: transform 0.55s …`, so listing only `filter` here silently
   killed the card zoom animation everywhere except the homepage (which wins
   it back with an !important rule scoped to [src*="images/home/"]). The zoom
   still happened — it just snapped, in and out. Transition both properties. */
.main-wrapper img:not(.no-saturate, .navbar12_logo, .image-3, .logo6_logo, .icon-check) {
    filter: saturate(0.78) brightness(0.97);
    transition: filter    0.45s cubic-bezier(0.33, 1, 0.68, 1),
                transform 0.55s cubic-bezier(0.33, 1, 0.68, 1);
}
.main-wrapper img:not(.no-saturate, .navbar12_logo, .image-3, .logo6_logo, .icon-check):hover,
.main-wrapper a:hover img:not(.no-saturate, .navbar12_logo, .image-3, .logo6_logo, .icon-check),
.main-wrapper *:hover > img:not(.no-saturate, .navbar12_logo, .image-3, .logo6_logo, .icon-check) {
    filter: saturate(1) brightness(1);
}
@media screen and (max-width: 479px) {
    .pre-header {
        height: unset !important;
      	padding-top: 3px;
      	padding-bottom: 3px;
    }
    .padding-global.pre-header-links {
        flex-flow: unset !important;
    }
}
/* Mobile adjustments */
@media (max-width: 991px) {
  body.hamburgermenu-open {
  overflow-y: hidden;
  }
  .navbar12_menu.w-nav-menu {
    overflow-y: scroll !important;
    overflow-x: hidden !important;
    width: 100%;
}
  .navbar12_menu-links {
    overflow-x: hidden !important;
    display: flex !important;
    flex-direction: column !important;
  }
    .navbar12_component.sticky {
        background-color: rgba(255, 255, 255, 0.98);
    }
    .navbar12_component.sticky .pre-header-background {
        width: 100%;
        margin-left: 0;
        scroll-behavior: unset;
    }
    .navbar12_component.sticky .navbar12_dropdown-list {
        border:none;
    }
    /* FIXED: Ensure proper stacking and no overlap on mobile */
    .navbar12_menu-dropdown {
        position: relative !important;
        display: block !important;
        width: 100% !important;
    }
    /* FIXED: Ensure dropdowns flow naturally below their parent */
    .navbar12_dropdown-list {
        position: relative !important;
        width: 100% !important;
        left: 0 !important;
        right: 0 !important;
        top: 0 !important;
        transform: none !important;
    }
    .navbar12_dropdown-list.w-dropdown-list.w--nav-dropdown-list-open.w--open {
        position: relative !important;
    }
    /* FIXED: Mobile dropdown functionality */
    .dropdown-chevron {
        width: 44px !important;
        height: 44px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        cursor: pointer !important;
        flex-shrink: 0 !important;
        padding: 12px !important;
        margin: -12px 0 -12px 8px !important;
        border-radius: 4px !important;
        transition: all 0.2s ease !important;
        position: relative !important;
        z-index: 10 !important;
    }
    /* Initial chevron rotation - leave at natural position */
    .navbar12_menu-dropdown .dropdown-chevron svg {
        width: 16px !important;
        height: 16px !important;
        pointer-events: none !important;
        fill: currentColor !important;
        transition: transform 0.25s ease !important;
    }
    .dropdown-chevron svg path {
        pointer-events: none !important;
        fill: currentColor !important;
    }
    .navbar12_dropdown-toggle {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100% !important;
    }
    .navbar12_dropdown-toggle a {
        flex: 1 !important;
        padding: 12px 8px !important;
        cursor: pointer !important;
        text-decoration: none !important;
        color: inherit !important;
        border-radius: 4px !important;
        transition: background-color 0.2s ease !important;
    }
    .navbar12_dropdown-toggle a:hover {
        background-color: rgba(0, 147, 83, 0.1) !important;
    }
    /* Improved mobile dropdown animations */
    .navbar12_dropdown-list {
        max-height: 0 !important;
        overflow: hidden !important;
        opacity: 0 !important;
        visibility: hidden !important;
        background: none !important;
        /* Faster closing transition */
        transition: max-height 0.05s ease-out, opacity 0.05s ease-out !important;
    }
    /* Smooth opening animation with slight delay */
    .navbar12_menu-dropdown.w--nav-dropdown-open .navbar12_dropdown-list,
    .navbar12_menu-dropdown.dropdown-open .navbar12_dropdown-list,
    .navbar12_dropdown-list.w--open {
        max-height: 600px !important;
        opacity: 1 !important;
        visibility: visible !important;
        /* Slightly slower opening for smoothness */
        transition: max-height 0.35s ease-in-out, opacity 0.25s ease-in-out !important;
    }
    /* Ensure proper flow within the relative positioning */
    .navbar12_dropdown-content {
        background: none !important;
        width: 100% !important;
    }
    /* Enhanced dropdown links spacing */
    .navbar12_dropdown-link {
        padding-right: 16px !important;
        margin-left: 8px !important;
        transition: all 0.05s ease !important;
    }
    /* Override any transform conflicts during animation */
    .navbar12_dropdown-list {
        transform: none !important;
    }
    /* Support for JavaScript-controlled closing animation */
    .navbar12_dropdown-list.js-closing {
        max-height: 0 !important;
        opacity: 0 !important;
        transition: max-height 0.15s ease-out, opacity 0.15s ease-out !important;
    }
    /* Rotate SVG inside chevron when open - using Webflow's exact classes */
    .navbar12_menu-dropdown.w--nav-dropdown-open .dropdown-chevron svg,
    .navbar12_menu-dropdown.dropdown-open .dropdown-chevron svg,
    .navbar12_dropdown-toggle.w--open .dropdown-chevron svg,
    .navbar12_dropdown-toggle.w--nav-dropdown-toggle-open .dropdown-chevron svg {
        transform: rotate(180deg) !important;
    }
    /* FIXED: Smooth dropdown transitions when switching between dropdowns */
    .navbar12_menu-dropdown {
        transition: all 0.05s ease !important;
    }
    .navbar12_dropdown-list {
        transition: all 0.05s cubic-bezier(0.4, 0, 0.2, 1) !important;
        position: relative;
    }
    /* Stagger closing/opening animations for smoother transitions */
    .navbar12_menu-dropdown:not(.w--nav-dropdown-open) .navbar12_dropdown-list {
        transition-delay: 0.3s !important;
    }
    .navbar12_menu-dropdown.w--nav-dropdown-open .navbar12_dropdown-list {
        transition-delay: 0.3s !important;
    }
    /* Z-index fixes */
    .navbar12_component {
        z-index: 9999 !important;
    }
    .navbar12_component.sticky {
        z-index: 9999 !important;
    }
    .navbar12_menu {
        z-index: 10000 !important;
    }
    .navbar12_dropdown-list {
        z-index: 10001 !important;
    }
}
  .legal-titles {
  	text-transform: uppercase;
	margin-top: 2rem;
    margin-bottom: 1rem;
  }
  .prx_wrapper {
  container-type: unset !important;
}
  .prx_h1 {
  display: none !important;}
  .prx_h2 {
  color:var(--green-haze-darker) !important; 
  font-weight: unset !important;}
.dark .color-scheme-1, .dark .navbar12_component.sticky .navbar12_container,.dark .section_layout7.color-scheme-1.background-color-white, .dark .footer12_component.color-scheme-4, .dark footer .section_logo3, .dark .navbar12_dropdown-list::before, .dark .navbar12_dropdown-list, .dark .navbar12_component.sticky .navbar12_dropdown-list, .dark .navbar12_dropdown-list, .dark .navbar12_menu.is-page-height-tablet.w-nav-menu
{
  	background: #000 !important;
}
  .dark .logo6_wrapper img, .dark .section-title-6 img, .dark footer img:not(.campusprinting), .dark .vector, .dark .navbar12_icon-wrapper, .dark .images-pre-header, .dark .invert-img, .dark .list-item-2 img, .dark .slider-arrow-icon_default, .dark .testimonial7_logo {
      filter: invert(1) !important;
  }
.dark .color-scheme-3, .dark .navbar12_dropdown-link, .dark .pre-header, .dark .button.is-secondary:hover, .dark .content-style-3, .dark .navbar12_component.sticky .pre-header, .dark .timeline5_progress-line-cover, .dark .section-layout.image-right.color-scheme-3, .dark .section_timeline5 
  {
  	background-color: #404040;
}
  .dark .col-full.txtcontent {
  background: #000;
  }
  .dark .button.is-secondary,
  .dark .timeline5_progress-line,
.dark .w-checkbox-input,
.dark .form_input.w-select  {
  background-color: #fff;
  }
  .dark .button.is-secondary:hover,
.dark .navbar12_link.w--current, .dark .navbar12_link .w--current, .dark .heading-style-h5.dark-text, .dark .heading-style-h4.dark-text, .dark .heading-style-h6-5.dark-text, .dark .submit-btn:hover, .dark .heading-style-h4.kunden-title {
  color: #fff;
  }
  .dark .pre-header, .dark .navbar12_component.sticky .pre-header {
  border-bottom: unset;}
  .theme-toggle {
  background-color: unset;
  }
  body.dark *, .dark .section_layout249,.dark .section_layout249 h2, .dark .section_layout249 h3, .dark footer *, .dark nav*, .dark .color-scheme-1 *, .dark .navbar12_component.sticky .navbar12_container *,.dark .section_layout7.color-scheme-1.background-color-white *, .dark .footer12_component.color-scheme-4 *, .dark footer .section_logo3 *, .dark .text-10 {
    color: #fff !important;
}
  .dark .navbar12_logo {
  display: none;
 }
  .dark .prx_expandableWrapper {
  background: gray !important;
  }
  .dark .navbar12_logo.dark {
display: inline-block;}
  .dark .timeline5_item img {
  filter: grayscale(100%) invert(1) brightness(1.5);
  }
  .dark .timeline5_circle {
  box-shadow: unset;
  background: #fff !important;
  }
  .dark .cta3_background-image-wrapper {
  filter: blur(0px) brightness(0.5);
  }
  .dark .button.certs-download div,
  .dark .submit-btn {
  color: #009353;}
  /* Opt-out fuer farbige Logos: muss !important tragen, weil die Invert-Regel
     weiter oben ebenfalls !important setzt (sonst bleibt no-invert wirkungslos). */
  .dark .no-invert {
    filter: none !important;
  }
 .dark #offene-stelle.section_career11.color-scheme-1 
  {
  	background-color: #404040 !important;
}
  .dark .menu-icon1_line-top, .dark .menu-icon1_line-middle, .dark .menu-icon1_line-bottom {
  background: #fff;
}
  .dark textarea, .dark input,
  .dark .navbar12_menu-button:hover .menu-icon1_line-top, .dark .navbar12_menu-button:hover .menu-icon1_line-middle, .dark .navbar12_menu-button:hover .menu-icon1_line-middle-inner, .dark .navbar12_menu-button:hover .menu-icon1_line-bottom {
  background: #fff;}
  .dark .header-6 {
  background-image: linear-gradient(0deg, #000, #387259cf 80%), url("../images/shared-herz-lettershop.jpg");
}
  .dark .content-style-3.unset-maxwidth:hover {
background-color: #557064 
  }
  @media (max-width: 991px){
    .dark .navbar12_dropdown-link {
    background: #000;
    }
    .navbar12_text-wrapper .text-weight-semibold {
    font-weight: 400;}
  }
  /* All text elements white in dark mode */
body.dark h1,
body.dark h2,
body.dark h3,
body.dark h4,
body.dark h5,
body.dark h6 {
  color: #ffffff;
}
body.dark p,
body.dark span,
body.dark div,
body.dark li,
body.dark td,
body.dark th,
body.dark label {
  color: #ffffff;
}
/* Buttons - keep green accent */
body.dark .btn,
body.dark button {
  color: #000000; /* Black text on green button */
  border: none;
}
body.dark .btn:hover,
body.dark button:hover {
  background-color: #00cc00;
}
/* Navigation and other elements */
body.dark nav,
body.dark header,
body.dark footer {
  color: #ffffff;
}
/* Cards/containers */
body.dark .card,
body.dark .container {
  background-color: #2a2a2a;
  color: #ffffff;
  }
@media screen and (min-width: 768px) and (max-width: 1100px) {
  .team.w-col-4 {
  width: 50%;}
  .team .div-block-19, .team .image-5.center-portrait {
    max-width: unset;
  }
}
@media screen and (min-width: 991px) and (max-width: 1101px) {  
  .image-5.center-portrait{
  margin-left: auto;}
  }
  .w-webflow-badge {
  display: none;}
.form_checkbox-icon.w--redirected-checked {
    background-color: var(--_primitives---colors--neutral-darkest) !important;
}

/* Soft rounded corners on content / teaser / CTA / hero images.
   Applied broadly to <img> and then explicitly removed for site logos,
   pre-header icons, dropdown chevrons, theme toggle, partner-logo strip,
   and small inline icon images so they stay flat. */
.main-wrapper img,
.page-wrapper img,
.references_image,
.reference_image,
.reference_gallery-image,
.reference_gallery-compact__thumb img,
.layout3_image,
.layout7_image,
.layout237_image,
.layout249_image,
.layout303_image,
.layout303_image-wrapper img,
.section_header46 img,
.section_layout7 img,
.section-layout img,
.career11_item img,
.contact11_image,
.image-2 {
    border-radius: 6px;
}

/* Image wrappers that clip a hover-zoom (transform: scale) child image have
   `overflow: hidden` + border-radius: var(--_ui-styles---radius--medium),
   but that variable is set to 0px in the Webflow theme — so the wrapper
   clips the scaled image to SQUARE corners on hover, "kicking out" the 6px
   border-radius the image itself carries. Match the wrapper radius to the
   image radius so the rounded corners survive the zoom. */
.blog42_image-wrapper,
.layout249_image-wrapper,
.layout7_image-wrapper,
.layout303_image-wrapper,
.layout1_image-wrapper,
.layout192_image-wrapper,
.layout352_image-wrapper,
.layout489_image-wrapper,
.layout490_image-wrapper,
.blog66_image-wrapper,
.home4-features_image-wrapper,
.startseite_dienstleistungen-sektion_image-wrapper,
.startseite_prazision-und-sicherheit_image-wrapper,
.startseite_output-management_image-wrapper,
.startseite_mailings-sektion_image-wrapper {
    border-radius: 6px;
}

/* Keep these flat — logos, navigation icons, and tiny image-icons. */
.navbar12_logo,
.navbar12_logo.dark,
.images-pre-header,
.image-3,
.icon-check,
.icon-embed-xsmall img,
.icon-embed-small img,
.icon-embed-xxsmall img,
.icon-embed-xsmall-2 img,
.icon-embed-xsmall-3 img,
.icon-embed-xsmall-4 img,
.icon-embed-xsmall-5 img,
.icon-embed-xsmall-6 img,
.icon-embed-xsmall-7 img,
.dropdown-chevron img,
.theme-toggle img,
#toggle-img,
.section_logo3 img,             /* partner-logo strip in the footer */
.footer12_component img,
.navbar12_component img:not(.navbar12_dropdown-image) {
    border-radius: 0 !important;
}

/* Content images keep the 6px radius everywhere. The Webflow sheet sets
   `border-radius: 0` on .layout6_image.squared-filled-iimage (2 classes), which
   out-specifies the `.main-wrapper img` rule above — so the square lead images
   on /layout-vorstufe clashed with their 6px siblings. Match them back. */
.layout6_image.squared-filled-iimage {
    border-radius: 6px;
}

/* Autoren-Avatare auf den News-Seiten sind rund — Webflow setzt dafuer
   `border-radius: 100%`. Die breite `.page-wrapper img`-Regel weiter oben ist
   spezifischer (Klasse + Element) und hat sie auf 6px eckig gemacht. Hier mit
   hoeherer Spezifitaet wieder auf rund setzen. */
.page-wrapper img.blog25_author-image,
.page-wrapper img.blog-post1-header_author-image,
.page-wrapper img.blog-post1-content_author-image,
.page-wrapper img.blog-post1-related_author-image,
img.blog25_author-image,
img.blog-post1-header_author-image,
img.blog-post1-content_author-image,
img.blog-post1-related_author-image {
    border-radius: 100%;
}

/* Transparenzhinweis zu KI-Bildern im Footer (EU AI Act Art. 50).
   Bewusst kleiner und ruhiger als die Copyright-Zeile — er soll auffindbar
   sein, aber die Fusszeile nicht dominieren. */
.footer12_ai-note {
    display: inline-block;
    margin-top: 4px;
    font-size: 0.82em;
    opacity: 0.75;
    line-height: 1.4;
}

/* Google-Maps-InfoWindow (Filialdetails beim Klick auf einen Marker).
   Der Inhalt liegt im selben DOM wie die Seite, deshalb greift im Dark Mode
   die globale weisse Textfarbe — auf Googles weisser Sprechblase ist das
   unlesbar. Farben hier unabhaengig vom Theme festnageln. */
.gm-style .gm-style-iw,
.gm-style .gm-style-iw *,
body.dark .gm-style .gm-style-iw,
body.dark .gm-style .gm-style-iw * {
    color: #1a1a1a !important;
}
.gm-style .gm-style-iw h3,
body.dark .gm-style .gm-style-iw h3 {
    color: #0d3b26 !important;
    font-size: 1rem;
    margin: 0 0 6px;
}
.gm-style .gm-style-iw p,
body.dark .gm-style .gm-style-iw p { margin: 0 0 10px; line-height: 1.5; }
.gm-style .gm-style-iw a,
body.dark .gm-style .gm-style-iw a {
    color: #009353 !important;
    font-weight: 600;
    text-decoration: underline;
}
/* Sprechblase selbst hell halten, falls ein Theme sie einfaerbt */
.gm-style .gm-style-iw-c,
body.dark .gm-style .gm-style-iw-c { background: #fff !important; }
.gm-style .gm-style-iw-d,
body.dark .gm-style .gm-style-iw-d { background: transparent !important; }

/* Subtle brand-green tint over a content image. Applied to the image WRAPPER
   so the overlay can sit above the photo without a second element, and so the
   6px radius still clips it. multiply keeps the shadows readable instead of
   washing the whole picture out. */
.img-tint-green {
    position: relative;
    border-radius: 6px;
    overflow: hidden;
}
.img-tint-green::after {
    content: "";
    position: absolute;
    inset: 0;
    background: #009353;
    opacity: 0.18;
    mix-blend-mode: multiply;
    pointer-events: none;
    border-radius: inherit;
}

/* Team portraits: kill the hover zoom — the scale(1.1) overflows neighbouring
   grid cells and visually cuts the image at its un-rounded edge. Keep the
   subtle saturate hover from the .saturate-hover variant if present. */
.image-5.center-portrait.no-saturate,
.image-5.center-portrait.no-saturate:hover {
    transform: none !important;
    transition: filter 0.3s ease !important;
}

/* Required-field indicator: red asterisk after the field label. */
.required-mark {
    color: #c0392b;
    margin-left: 3px;
    font-weight: 600;
}
.form-required-note {
    font-size: 0.85rem;
    color: #666;
    margin-bottom: 0.75rem;
}

/* Job listing title is a clickable link — keep heading-style-h5 visuals,
   but add subtle hover affordance. */
.job-title-link {
    display: block;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
    transition: color 0.2s ease;
}
.job-title-link:hover {
    color: var(--green-haze, #009353);
}

/* Native AGB checkbox — replaces the Webflow custom-checkbox markup that hid the
   real input with opacity:0 and made the visual checkbox dependent on Webflow JS. */
.agb-checkbox-row .form_checkbox-label-native {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
    user-select: none;
}
.agb-checkbox-row .form_checkbox-label-native input[type="checkbox"] {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    margin-top: 2px;
    cursor: pointer;
    accent-color: var(--green-haze, #009353);
}
.agb-checkbox-row .form_checkbox-label-native span {
    line-height: 1.4;
}
.agb-checkbox-row .form_checkbox-label-native a {
    text-decoration: underline;
}

/* Job detail page — rich-text description spacing.
   Match the rhythm used elsewhere on the site: generous space above
   headings, comfortable paragraph spacing, no extra space at the very top. */
.contact3_component .w-richtext > * + * {
    margin-top: 1em;
}
.contact3_component .w-richtext h1,
.contact3_component .w-richtext h2,
.contact3_component .w-richtext h3,
.contact3_component .w-richtext h4,
.contact3_component .w-richtext h5,
.contact3_component .w-richtext h6 {
    margin-top: 2.5em;
    margin-bottom: 0.6em;
}
.contact3_component .w-richtext > :first-child {
    margin-top: 0;
}
.contact3_component .w-richtext ul,
.contact3_component .w-richtext ol {
    margin-top: 0.75em;
    margin-bottom: 0.75em;
    padding-left: 1.5em;
}
.contact3_component .w-richtext li + li {
    margin-top: 0.35em;
}
.contact3_component .w-richtext p + p {
    margin-top: 1em;
}
.contact3_component p.text-size-large {
    margin-top: 0.5em;
}

/* Force the job-detail summary paragraph and the rich-text body to render
   at the same size — without this, the Webflow `.text-size-regular` class
   and the rich-text default differ visually. */
.contact3_component p.text-size-regular,
.contact3_component .w-richtext,
.contact3_component .w-richtext p,
.contact3_component .w-richtext li {
    font-size: 1rem;
    line-height: 1.6;
}

/* "Kunden, die wir mit Stolz bedienen" client-logo strip: most logos are
   transparent PNGs but a few (cablex, krebsliga, shared-image-9) are JPGs
   with a solid white background, which renders as a visible white box on
   the section's tinted backdrop. mix-blend-mode: multiply makes white
   transparent against any non-white surrounding while preserving the dark
   logo pixels — and works the same on PNGs (white edges blend, mark
   stays). The dark-mode override flips to `screen` so dark logos show on
   black instead of disappearing. */
.logo6_logo {
    mix-blend-mode: multiply;
}
body.dark .logo6_logo {
    mix-blend-mode: screen;
}

/* Der Druckzirkus-Schriftzug ist mit 4164x363 (11.5:1) weit breiter als die
   uebrigen Partnerlogos (Datenhaus 4:1). Unbegrenzt laeuft er im Partner-Block
   auf 686 px aus, waehrend Datenhaus dort 455 px misst — dadurch wirkt er
   deutlich groesser. Auf dieselbe Blockbreite einbremsen. */
.logo6_logo.druckzirkus-logo {
    max-width: 460px;
    width: 100%;
    height: auto;
}

/* Die Karten-Bilder (`.blog42_image`) stehen im Webflow-Sheet auf
   `object-fit: contain`. Nur die Variante `.fill-image` bekommt dort `cover`.
   Ohne diese Zusatzklasse wird das Foto in seine Box eingepasst statt sie zu
   fuellen: links/rechts (oder oben/unten) bleiben weisse Streifen stehen, und
   weil der Eckenradius auf dem img-Element sitzt, wirken die Ecken des Fotos
   selbst eckig — genau die zwei gemeldeten Symptome.
   Ausgenommen bleiben Logos und Zertifikate: die sollen bewusst eingepasst
   werden, sonst wuerde ihnen der Rand abgeschnitten. Sie tragen `invert-img`,
   `image-contain` oder `paddings`. */
.blog42_image:not(.invert-img):not(.image-contain):not(.paddings) {
    object-fit: cover;
    object-position: center;
}

/* Die Bild-Wrapper tragen `overflow: hidden`. Damit entscheidet der Wrapper
   ueber die sichtbare Form, nicht das <img> darin: steht der Wrapper auf
   `border-radius: 0`, schneidet er das Bild eckig ab — der Radius auf dem
   <img> bleibt wirkungslos (mit 40px am Bild aendert sich am Rendering
   nachweislich nichts). `.blog42_image-wrapper` hat die 6px bereits, die
   Layout-Wrapper der grossen Abschnittsbilder nicht. Deshalb wirkten
   Digital Marketing / Webdesign / Webentwicklung eckig. */
.layout6_image-wrapper,
.layout3_image-wrapper {
    border-radius: 6px;
}

/* Quill 2 outputs every list as `<ol>` with `<li data-list="bullet">` or
   `<li data-list="ordered">`. Without Quill's stylesheet on the public site,
   bullets render as decimal numbers. Re-implement the markers via CSS
   counters so bullets are bullets and numbered lists are numbered. */
.w-richtext ol {
    list-style: none;
    counter-reset: ql-list-counter;
    padding-left: 1.5em;
}
.w-richtext ol > li {
    position: relative;
    padding-left: 1.6em;
}
.w-richtext ol > li[data-list="ordered"] {
    counter-increment: ql-list-counter;
}
.w-richtext ol > li[data-list="ordered"]::before {
    content: counter(ql-list-counter) ".";
    position: absolute;
    left: 0;
    font-weight: 500;
    min-width: 1.4em;
}
.w-richtext ol > li[data-list="bullet"]::before {
    content: "\2022"; /* • */
    position: absolute;
    left: 0.4em;
    font-size: 1.2em;
    line-height: 1;
}
.w-richtext .ql-ui {
    display: none;
}

/* ---------------------------------------------------------------------------
   Team page: each section ("Beratung & Projekte", "Marketing & Kommunikation",
   etc.) renders as its own card with a left brand-green accent bar — borrowed
   from the .reference_cta treatment so the team page reads as a clear list of
   distinct groups.
   --------------------------------------------------------------------------- */
.section_team2 .team2_component {
    margin-top: 0 !important;
    margin-bottom: 3.5rem !important;
    padding: 48px;
    background: transparent;
    border-radius: 10px;
    border-left: 4px solid #009353;
}
/* Title kept at the Webflow default (.tagline-6: green #009353, 1rem, 600),
   only forcing left-align for this card layout. */
.section_team2 .team2_component .heading-21.tagline-6 {
    text-align: left;
    margin: 0;
}
/* Title row: left-align, tighter gap to grid. */
.section_team2 .team2_component > .margin-bottom.margin-xxlarge {
    margin-bottom: 2rem !important;
}
.section_team2 .team2_component > .margin-bottom.margin-xxlarge > .text-align-center {
    text-align: left !important;
    margin: 0;
}
/* Tighten the gap between rows of co-workers within a card AND keep the
   employee tile (image + name + role) centered. Webflow's default
   .image-5.center-portrait has margin-left:0 (so it left-aligns), and the
   card padding I added exposes that — force center on both the legacy
   image and the new .team-portrait-frame wrapper. */
/* .collection-item is `display: flex; flex-flow: column; padding-right: 30px`
   from the Webflow base — text-align:center alone doesn't center block-level
   flex children (the portrait wrapper, the .div-block-19 text block). Use
   align-items:center on the flex container, kill the asymmetric right padding,
   and explicitly center each flex item. */
.section_team2 .collection-item.team {
    margin-bottom: 2rem !important;
    min-height: auto !important;
    align-items: center !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    text-align: center;
}
.section_team2 .collection-item.team > * {
    align-self: center !important;
}
.section_team2 .collection-item.team .team-portrait-frame,
.section_team2 .collection-item.team > .image-5,
.section_team2 .collection-item.team > .image-5.center-portrait {
    margin-left: auto !important;
    margin-right: auto !important;
}
.section_team2 .collection-item.team .div-block-19 {
    text-align: center;
    align-items: center;
    width: 100%;
}
.section_team2 .collection-list-2,
.section_team2 .team2_list {
    grid-row-gap: 1.5rem !important;
    row-gap: 1.5rem !important;
}
@media (max-width: 767px) {
    .section_team2 .team2_component {
        padding: 28px 22px;
        margin-bottom: 2.5rem !important;
    }
    .section_team2 .team2_component > .margin-bottom.margin-xxlarge {
        margin-bottom: 1.5rem !important;
    }
    .section_team2 .collection-item.team { margin-bottom: 1.5rem !important; }
}

/* Team-member portraits.
   The .team-portrait-frame wrapper (added by cms-loader.js) is the fixed-size
   circle: overflow:hidden + border-radius:50%. The image inside fills it 100%
   and scales on hover — because the circle is clipped by the wrapper, the
   visible boundary stays the same size and only the photo content zooms.
   Easing/duration matches the teaser-card pattern (.blog42_image). */
.team-portrait-frame {
    position: relative;
    width: 100%;
    max-width: 300px;
    aspect-ratio: 1 / 1;
    margin: 0 auto;
    overflow: hidden;
    border-radius: 50%;
}
.team-portrait-frame .image-5,
.team-portrait-frame .image-5.center-portrait,
.team-portrait-frame .image-5.center-portrait.no-saturate {
    width: 100%;
    height: 100%;
    max-width: none;
    margin: 0;
    border-radius: 0 !important;        /* circle lives on the wrapper now */
    object-fit: cover;
    display: block;
    transform: scale(1) !important;
    transition: transform 0.55s cubic-bezier(0.33, 1, 0.68, 1),
                filter    0.55s cubic-bezier(0.33, 1, 0.68, 1) !important;
    will-change: transform;
}
.team-portrait-frame:hover .image-5,
.team-portrait-frame:hover .image-5.center-portrait,
.team-portrait-frame:hover .image-5.center-portrait.no-saturate {
    transform: scale(1.05) !important;
}

/* Brand-green tint overlay on the wrapper — uses the actual #009353 brand
   green (not a filter approximation) blended via mix-blend-mode so it stays
   true to the palette. Subtle by default, fades to zero on hover.
   Desktop only (≥ 992px): on touch devices there's no hover state, so the
   overlay would just be permanently visible — not what we want. */
@media (min-width: 992px) {
    .team-portrait-frame::after {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        background: #009353;
        mix-blend-mode: multiply;
        opacity: 0.11;
        pointer-events: none;
        transition: opacity 0.55s cubic-bezier(0.33, 1, 0.68, 1);
    }
    .team-portrait-frame:hover::after {
        opacity: 0;
    }
}

/* Fallback for any team portrait NOT yet wrapped (hardcoded placeholders in
   team.html, etc): keep the image circular, no zoom (without a wrapper,
   scaling would grow the entire circle). */
.collection-item.team > .image-5,
.collection-item.team > .image-5.center-portrait {
    border-radius: 50% !important;
    transform: none !important;
}

/* Robust team-tile centering — UNSCOPED from .section_team2 so it holds on every
   page and breakpoint. The portrait frame is centered by .team-portrait-frame
   { margin: 0 auto }, but Webflow's base leaves .div-block-19 at max-width:300px
   with margin-right:0, and its centering only lived in .section_team2-scoped
   rules. The net effect was a centered image with the name/role sitting to its
   left. Force the frame, the raw image, and the text block onto one centered axis. */
.collection-item.team {
    align-items: center !important;
    text-align: center !important;
}
.collection-item.team > .team-portrait-frame,
.collection-item.team > .image-5,
.collection-item.team > .div-block-19 {
    margin-left: auto !important;
    margin-right: auto !important;
    align-self: center !important;
}

/* ---------------------------------------------------------------------------
   /danke confirmation page — full-page centered layout, navbar & footer hidden.
   The shared header.php is still included so lettershop-interactions.js + dark-mode JS load,
   but body.danke-page hides the chrome via CSS so we get a clean confirmation
   without fighting the navbar's stacking/styles.
   --------------------------------------------------------------------------- */
body.danke-page .navbar12_component,
body.danke-page .footer12_component,
body.danke-page .pre-header-background {
    display: none !important;
}
body.danke-page {
    background: #f4f6f3;
    min-height: 100vh;
}
body.danke-page.dark { background: #0d0d0d; }

.danke-page-main {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2.5rem 1.25rem;
    box-sizing: border-box;
}
.danke-brand {
    display: block;
    margin-bottom: 2.5rem;
}
.danke-brand img {
    height: 32px !important;     /* override .main-wrapper img saturate filter */
    border-radius: 0 !important;
    filter: none !important;
}
.danke-card {
    width: 100%;
    max-width: 560px;
    margin: 0 auto;
    text-align: center;
    background: #fff;
    border-radius: 16px;
    padding: 3rem 2rem;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.06), 0 2px 8px rgba(0, 0, 0, 0.04);
}
body.danke-page.dark .danke-card {
    background: #1a1a1a;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
}
.danke-icon {
    width: 88px;
    height: 88px;
    margin: 0 auto 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}
.danke-tagline {
    margin: 0 0 0.5rem;
    font-family: Montserrat, sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #009353;
}
.danke-heading {
    margin: 0 0 1.25rem;
    font-family: Montserrat, sans-serif;
    font-size: clamp(1.75rem, 3vw, 2.25rem);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: inherit;
}
.danke-body {
    margin: 0 auto 1.5rem;
    max-width: 440px;
    font-family: Mulish, Montserrat, sans-serif;
    font-size: 1rem;
    line-height: 1.55;
    color: inherit;
    opacity: 0.85;
}
.danke-body a {
    color: #009353;
    text-decoration: none;
    border-bottom: 1px solid rgba(0, 147, 83, 0.4);
}
.danke-body a:hover { border-bottom-color: #009353; }
.danke-warning {
    margin: 0 auto 1.5rem;
    max-width: 480px;
    padding: 0.85rem 1.1rem;
    border-radius: 10px;
    background: rgba(255, 193, 7, 0.12);
    border: 1px solid rgba(255, 193, 7, 0.35);
    color: #806100;
    font-family: Mulish, Montserrat, sans-serif;
    font-size: 1rem;
    line-height: 1.5;
}
body.danke-page.dark .danke-warning {
    color: #ffd766;
    background: rgba(255, 193, 7, 0.08);
}
.danke-buttons {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
    flex-wrap: wrap;
    margin: 0.5rem 0 1.75rem;
}
.danke-btn {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    border-radius: 999px;
    font-family: Montserrat, sans-serif;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    line-height: 1.2;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}
.danke-btn-primary {
    background: #009353;
    color: #fff;
    border: 1px solid #009353;
}
.danke-btn-primary:hover { background: #007a45; border-color: #007a45; }
.danke-btn-secondary {
    background: transparent;
    color: #009353;
    border: 1px solid #009353;
}
.danke-btn-secondary:hover { background: rgba(0, 147, 83, 0.08); }
.danke-btn:active { transform: translateY(1px); }
.danke-contact {
    font-size: 0.9rem;
    opacity: 0.65;
    margin-bottom: 0;
}
.danke-contact a { font-weight: 500; }
@media (max-width: 480px) {
    .danke-card { padding: 2rem 1.25rem; }
    .danke-icon { width: 72px; height: 72px; }
    .danke-buttons { flex-direction: column; }
    .danke-btn { width: 100%; }
}

/* Dark Mode, Formularfelder: Die Felder bekommen weiter oben bewusst einen
   WEISSEN Hintergrund (`.dark textarea, .dark input` und `.dark .form_input.w-select`).
   Gleichzeitig faerbt die pauschale Regel `body.dark * { color: #fff !important }`
   auch den eingegebenen Text weiss — Ergebnis: weiss auf weiss, der Inhalt ist
   unsichtbar. Beim Tippen sieht man ihn nur wegen Cursor und Markierung.
   Hier holen wir die Textfarbe in den Feldern zurueck; `!important` ist noetig,
   weil die Pauschalregel selbst `!important` traegt.
   Buttons (submit/button) sind ausgenommen, die bleiben gruen mit weisser Schrift. */
.dark input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]),
.dark textarea,
.dark select,
.dark .form_input,
.dark .form_input.w-select,
.dark .w-input,
.dark .w-select,
.dark select option {
    color: #14171a !important;
}
/* Auswahlliste: ohne eigene Hintergrundfarbe erbt sie im Dark Mode Weiss auf
   Weiss, sobald das Betriebssystem die Liste selbst zeichnet. */
.dark select option {
    background-color: #fff !important;
}
/* Platzhalter duerfen leiser sein, muessen aber lesbar bleiben. */
.dark input::placeholder,
.dark textarea::placeholder {
    color: #6b7280 !important;
    opacity: 1;
}

/* Auf sehr breiten Bildschirmen lief das Layout auseinander: `.container-large`
   hat im Webflow-Export KEIN max-width (anders als `.container-large-3`, das
   80rem traegt) und ist schlicht 70 % der Viewportbreite. Bei 3674px sind das
   2572px Container, daraus wird eine Textspalte von 1606px — weit jenseits
   lesbarer Zeilenlaenge, und Bild und Text driften auseinander.
   84rem = 1344px entspricht exakt der Breite bei 1920px Viewport: bis dahin
   aendert sich also nichts, darueber hinaus waechst der Container nicht weiter
   und wird zentriert (margin: auto steht bereits im Webflow-Sheet).
   Webflow hat beim Export mehrere durchnummerierte Varianten derselben Klasse
   angelegt (-2 bis -8). Im Markup kommen ausser `.container-large` (372x) noch
   -6, -7 und -8 vor, alle ohne Deckelung — deshalb hier alle mitnehmen.
   `-3` bleibt aussen vor, die traegt bereits 80rem. */
.container-large,
.container-large-2,
.container-large-4,
.container-large-5,
.container-large-6,
.container-large-7,
.container-large-8 {
    max-width: 84rem;
}

/* Bild rechts war kleiner als Bild links: `.layout6_image` traegt aus dem
   Webflow-Export `max-width: 400px`, `.layout3_image` dagegen keine Deckelung
   und fuellt seine Spalte (bei 1920px sind das 471px). Der Unterschied faellt
   erst auf grossen Viewports auf und waechst mit ihnen mit.
   Inhaltsbilder duerfen die Spalte jetzt ebenfalls fuellen; Logos, Zertifikate
   und alles mit `contain` behalten ihre Deckelung, sonst werden Siegel und
   Partner-Logos unnatuerlich gross. Die :not()-Kette hebt die Spezifitaet auf
   (0,4,0) und schlaegt damit auch `.layout6_image.max-w-400` / `.max-w-450`. */
.layout6_image:not(.contain):not(.image-contain):not(.invert-img):not(.paddings) {
    max-width: 100%;
}

/* KI-Kennzeichnung: Die ausgelieferte Bilddatei enthaelt das Gemini-Symbol,
   der sichtbare Ausschnitt aber nicht. Dafuer wird an der Ecke, in der die
   Marke sitzt, ein Streifen weggeschnitten (--ai-crop, Standard 8 %).

   Damit das ohne Aufloesungsverlust funktioniert, wird die Datei breiter
   exportiert als sie erscheinen soll:  Dateibreite = Zielbreite / (1 - Crop),
   also 1740 px fuer 1600 px sichtbar bei 8 %.

   Primaerweg ist `object-view-box`: das verschiebt nur den Quellausschnitt,
   nicht die Layoutbox — kein Layout-Shift, und `transform` bleibt frei fuer
   den Hover-Zoom von .blog42_image. Firefox kennt die Eigenschaft noch nicht
   und faellt auf die eigenstaendige `scale`-Property zurueck. Wichtig: `scale`
   und nicht das `transform`-Shorthand, sonst wuerde der Hover-Zoom der
   Teaser-Karten ueberschrieben (vgl. Kommentar bei .main-wrapper img oben).
   Geclippt wird in allen drei Kontexten vom Wrapper (.blog42_image-wrapper,
   .layout3_image-wrapper, .layout6_image-wrapper haben overflow: hidden). */
.ai-marked {
    --ai-crop: 8%;
    /* Marke unten rechts: inset(oben rechts unten links) */
    object-view-box: inset(0 var(--ai-crop) var(--ai-crop) 0);
}
.ai-marked.ai-mark-bottom-left {
    object-view-box: inset(0 0 var(--ai-crop) var(--ai-crop));
}
/* Einzelne Bilder tragen eine deutlich groessere Marke — bei `IT-Rak` misst
   sie 189x214 px statt der ueblichen 46x49 px und sitzt weiter innen (11.4 %
   vom rechten Rand). Fuer die braucht es einen groesseren Streifen. */
.ai-marked.ai-mark-large {
    --ai-crop: 13%;
}
@supports not (object-view-box: inset(0)) {
    .ai-marked {
        /* Ursprung = Ecke gegenueber der Marke; 1 / (1 - 0.08) = 1.087 */
        transform-origin: top left;
        scale: 1.087;
    }
    .ai-marked.ai-mark-bottom-left {
        transform-origin: top right;
    }
    .ai-marked.ai-mark-large {
        scale: 1.15;                 /* = 1 / (1 - 0.13) */
    }
}

/* ---------------------------------------------------------------------------
   Bewerbungsformular: Liste der gewaehlten Anhaenge
   Ein <input type=file multiple> meldet nur "3 Dateien" und laesst keine
   einzelne Auswahl zurueckziehen. Die Liste darunter wird per JavaScript
   aufgebaut (siehe detail_open-jobs.php) und macht jeden Anhang einzeln
   entfernbar. Ohne JavaScript bleibt sie leer und ausgeblendet.
   --------------------------------------------------------------------------- */
.anhaenge-liste {
    list-style: none;
    margin: 10px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.anhaenge-eintrag {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px 8px 12px;
    border: 1px solid #dfe3e6;
    border-left: 3px solid #009353;
    border-radius: 6px;
    background: #fff;
    font-size: 0.9rem;
    line-height: 1.35;
}

/* Zu gross oder falsches Format: der Server wuerde es ohnehin abweisen,
   deshalb hier schon sichtbar markieren. */
.anhaenge-eintrag.is-fehler {
    border-left-color: #c0392b;
    background: #fdf3f2;
}

.anhaenge-name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.anhaenge-meta {
    flex: 0 0 auto;
    opacity: 0.7;
    font-size: 0.82rem;
    white-space: nowrap;
}

.anhaenge-eintrag.is-fehler .anhaenge-meta {
    color: #c0392b;
    opacity: 1;
}

.anhaenge-entfernen {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #6b7280;
    font-size: 1.15rem;
    line-height: 1;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.anhaenge-entfernen:hover,
.anhaenge-entfernen:focus-visible {
    background: #009353;
    color: #fff;
}

.anhaenge-summe {
    margin: 8px 0 0;
    font-size: 0.82rem;
    opacity: 0.75;
}

.anhaenge-summe.is-fehler {
    color: #c0392b;
    opacity: 1;
    font-weight: 500;
}

/* Dunkelmodus: die Kachel darf nicht weiss stehen bleiben. */
.dark .anhaenge-eintrag {
    background: #1e2226;
    border-color: #343a40;
    color: #f1f3f5;
}

.dark .anhaenge-eintrag.is-fehler {
    background: #2a1d1c;
}

.dark .anhaenge-entfernen {
    color: #adb5bd;
}

/* ---------------------------------------------------------------------------
   Newsübersicht: Bedienleiste und Seitenblättern
   Wird von js/cms-loader.js erzeugt, sobald mehr als eine Seite zusammenkommt.
   Seit der WordPress-Übernahme stehen über 70 Beiträge in der Liste — am Stück
   ist die unbrauchbar.

   Formensprache bewusst von der übrigen Seite übernommen: `.button` dort ist
   `border-radius: 100px` mit `padding: .75rem 1.5rem`, die kleine Variante
   `.button.is-small` hat `.5rem 1.25rem`. Runde Ecken hier hätten wie ein
   Fremdkörper gewirkt. Farben kommen aus denselben Variablen wie der Rest,
   mit Rückfallwerten für den Fall, dass die Webflow-Datei fehlt.
   --------------------------------------------------------------------------- */
.news-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin: 0 0 32px;
    padding-bottom: 18px;
    border-bottom: 1px solid #e3e6e9;
}

.news-toolbar__count {
    margin: 0;
    font-size: 0.9rem;
    opacity: 0.7;
}

.news-toolbar__controls {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.news-toolbar__field {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.news-toolbar__label {
    padding-left: 2px;
    font-size: 0.74rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    opacity: 0.55;
}

/* Auswahlfelder als Pillen, damit sie neben den Schaltflächen nicht abfallen. */
.news-toolbar__select {
    appearance: none;
    -webkit-appearance: none;
    min-width: 11rem;
    padding: 0.5rem 2.4rem 0.5rem 1.25rem;
    border: 1px solid #d5d8dc;
    border-radius: 100px;
    background-color: #fff;
    /* Pfeil als Data-URI — spart eine zusätzliche Datei */
    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='%23555' d='M1.4 0 6 4.6 10.6 0 12 1.4 6 7.4 0 1.4z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1.1rem center;
    color: #14171a;
    font: inherit;
    font-size: 0.9rem;
    font-weight: 500;
    line-height: 1.4;
    cursor: pointer;
    transition: border-color 0.2s, background-color 0.2s;
}

.news-toolbar__select:hover {
    border-color: var(--color-scheme-2--accent, #009353);
}

.news-toolbar__select:focus-visible {
    outline: 2px solid var(--color-scheme-2--accent, #009353);
    outline-offset: 2px;
    border-color: var(--color-scheme-2--accent, #009353);
}

/* Seitenblättern */
.news-pager {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 48px;
}

.news-pager__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.5rem;
    padding: 0.5rem 1.25rem;          /* wie .button.is-small */
    border: 1px solid #d5d8dc;
    border-radius: 100px;
    background: #fff;
    color: #14171a;
    font: inherit;
    font-size: 0.9rem;
    font-weight: 500;
    line-height: 1.4;
    cursor: pointer;
    transition: border-color 0.2s, background-color 0.2s, color 0.2s;
}

/* Reine Zahlen bleiben kreisrund statt länglich. */
.news-pager__num {
    padding: 0.5rem 0;
    width: 2.5rem;
}

.news-pager__btn:hover:not(:disabled) {
    border-color: var(--color-scheme-2--accent, #009353);
    background: var(--_primitives---colors--green-haze-lightest, #e5f4ed);
    color: var(--_primitives---colors--green-haze-dark, #007542);
}

.news-pager__btn:focus-visible {
    outline: 2px solid var(--color-scheme-2--accent, #009353);
    outline-offset: 2px;
}

.news-pager__btn:disabled {
    opacity: 0.35;
    cursor: default;
}

/* Die aktive Seite ist die einzige gefüllte Pille in der Reihe — so ist die
   Position auf einen Blick erkennbar, ohne dass die Leiste unruhig wird. */
.news-pager__num.is-aktiv {
    background: var(--color-scheme-2--accent, #009353);
    border-color: var(--color-scheme-2--accent, #009353);
    color: #fff;
    font-weight: 600;
}

.news-pager__num.is-aktiv:hover {
    background: var(--_primitives---colors--green-haze-dark, #007542);
    border-color: var(--_primitives---colors--green-haze-dark, #007542);
    color: #fff;
}

.news-pager__gap {
    padding: 0 2px;
    opacity: 0.45;
    user-select: none;
}

/* Dunkelmodus */
.dark .news-toolbar { border-bottom-color: #343a40; }

.dark .news-toolbar__select,
.dark .news-pager__btn {
    background-color: #1e2226;
    border-color: #343a40;
    color: #f1f3f5;
}

/* `!important` ist hier noetig und kein Uebermut: weiter oben zieht
   `.dark select { color: #14171a !important }` die Schrift aller Auswahlfelder
   dunkel. Das ist fuer die Formularfelder richtig — die stehen im Dunkelmodus
   auf WEISSEM Grund. Die Filterpillen der Newsliste stehen dagegen auf
   dunklem Grund (#1e2226); ohne diese Zeile waere es Schwarz auf Schwarz.
   Die Klasse ist spezifischer als `.dark select`, das `!important` gleicht
   nur das `!important` der anderen Regel aus. */
.dark .news-toolbar__select {
    color: #f1f3f5 !important;
}

.dark .news-toolbar__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='%23bbb' d='M1.4 0 6 4.6 10.6 0 12 1.4 6 7.4 0 1.4z'/%3E%3C/svg%3E");
}

.dark .news-pager__btn:hover:not(:disabled) {
    background: #10281d;
    color: #4fd08a;
}

.dark .news-pager__num.is-aktiv,
.dark .news-pager__num.is-aktiv:hover {
    background: var(--color-scheme-2--accent, #009353);
    border-color: var(--color-scheme-2--accent, #009353);
    color: #fff;
}

/* Auf dem Handy die Leiste untereinander, Auswahlfelder über die volle Breite */
@media (max-width: 600px) {
    .news-toolbar { align-items: stretch; }
    .news-toolbar__controls { width: 100%; }
    .news-toolbar__field { flex: 1 1 8rem; }
    .news-toolbar__select { min-width: 0; width: 100%; }
    .news-pager__step { flex: 1 1 100%; order: 1; }
}

/* Der "Ausgewählte News"-Block über der Liste wird ausgeblendet (siehe
   js/cms-loader.js). Die Überschrift darunter trägt `mt-3` mit 140 px
   Abstand — der war als Trennung zu jenem Block gedacht und steht ohne ihn
   nur als Leere über der Liste. Die Sektion selbst bringt bereits 112 px
   Innenabstand mit, das reicht. `mt-3` bleibt auf allen anderen Seiten
   unangetastet. */
#all-news.news-ohne-hero > .heading-21.mt-3 {
    margin-top: 0;
}

/* ---------------------------------------------------------------------------
   Newsdetail: Teaser über dem Fliesstext
   Aus dem Webflow-Export kam `.summary-text-news` mit 6rem Abstand oben UND
   unten (96 px) bei 22 px Schrift — der Fliesstext daneben hat 20 px. Der
   Teaser stand dadurch isoliert im Nichts und war trotzdem kaum als Vorspann
   erkennbar, weil er sich in Grösse, Gewicht und Farbe kaum abhob.

   Neu: deutlich grösser als der Fliesstext (1.45rem gegen 20 px), etwas
   ruhigere Zeilenführung, leicht zurückgenommene Farbe, und eine Linie in
   Markengrün am linken Rand, die ihn als Vorspann kennzeichnet, ohne laut zu
   werden. Die Abstände sind auf ein Mass zurückgeführt, das ihn an den Beitrag
   bindet, statt ihn davon zu trennen.
   --------------------------------------------------------------------------- */
.summary-text-news {
    margin-top: 3rem;
    margin-bottom: 2.5rem;
    padding-left: 1.25rem;
    border-left: 3px solid var(--color-scheme-2--accent, #009353);
    font-size: 1.45rem;
    line-height: 1.55;
    font-weight: 400;
    color: #3d4348;
}

/* Der Fliesstext brachte zusätzlich 5rem mit — zusammen mit dem Teaser-Abstand
   klaffte dort eine Lücke von fast 100 px. 3rem statt 5rem, und der Abstand
   bleibt hier stehen statt auf 0 zu gehen: Bei den 52 Beiträgen mit
   dupliziertem Teaser wird dieser ausgeblendet, und dann ist dies der einzige
   Abstand zwischen Hero-Bild und Text — ohne ihn klebte der Text am Bild.
   Steht der Teaser da, fallen sein unterer und dieser obere Abstand zusammen
   (benachbarte Geschwister), es summiert sich also nichts. */
.news.post-body {
    margin-top: 3rem;
}

.dark .summary-text-news {
    color: #c7ccd1;
}

@media (max-width: 991px) {
    .summary-text-news {
        margin-top: 2.5rem;
        margin-bottom: 2rem;
        font-size: 1.3rem;
    }
}

@media (max-width: 600px) {
    .summary-text-news {
        margin-top: 2rem;
        margin-bottom: 1.75rem;
        padding-left: 1rem;
        font-size: 1.15rem;
    }
}

/* ---------------------------------------------------------------------------
   Newsdetail: vertikaler Rhythmus im Fliesstext
   Der Rich-Text-Körper hatte für seine Absätze gar keine Abstände — die
   Absätze liefen ineinander und ergaben eine Textwand. Auffällig wurde es
   mit den übernommenen WordPress-Beiträgen, die deutlich länger sind als die
   neun zuvor gepflegten. Dieselbe Ergänzung gibt es bereits in der
   Referenz-Detailansicht.

   Die Beiträge bringen aus WordPress ausserdem Tabellen, Listen und Bilder
   mit, deshalb sind die hier mitbedacht.
   --------------------------------------------------------------------------- */
.news.post-body p {
    margin: 0 0 1.35em;
}

.news.post-body h2,
.news.post-body h3,
.news.post-body h4 {
    margin: 2em 0 0.6em;
    line-height: 1.3;
}

/* Beginnt der Beitrag mit einer Überschrift, kein Abstand nach oben — sonst
   klafft dort eine Lücke zum Vorspann. */
.news.post-body > :first-child {
    margin-top: 0;
}

.news.post-body > :last-child {
    margin-bottom: 0;
}

.news.post-body ul,
.news.post-body ol {
    margin: 0 0 1.35em;
    padding-left: 1.4em;
}

.news.post-body li {
    margin-bottom: 0.45em;
}

.news.post-body li:last-child {
    margin-bottom: 0;
}

.news.post-body img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 1.75em 0;
    border-radius: 6px;
}

.news.post-body figure {
    margin: 1.75em 0;
}

.news.post-body figcaption {
    margin-top: 0.6em;
    font-size: 0.85em;
    opacity: 0.7;
}

/* Tabellen kommen aus WordPress mit fest eingetragenen Prozentbreiten. Auf
   schmalen Geräten dürfen sie scrollen, statt das Layout zu sprengen. */
.news.post-body table {
    width: 100%;
    margin: 1.75em 0;
    border-collapse: collapse;
}

.news.post-body td,
.news.post-body th {
    padding: 0.6em 0.8em;
    border-bottom: 1px solid #e3e6e9;
    vertical-align: top;
    text-align: left;
}

.news.post-body td ul,
.news.post-body td p {
    margin-bottom: 0;
}

.dark .news.post-body td,
.dark .news.post-body th {
    border-bottom-color: #343a40;
}

.news.post-body a {
    text-decoration: underline;
    text-underline-offset: 0.18em;
}


/* ---------------------------------------------------------------------------
   Output-Management: Zeitstrahl — erster Punkt hing frei
   `.timeline5_progress-line` ist die grüne Fortschrittslinie. Sie soll im Fluss
   KEINEN Platz einnehmen, damit die graue Grundlinie ganz oben beginnt; dafür
   heben sich Höhe und negativer Aussenabstand gegenseitig auf
   (Basis: `height: 50vh` + `margin-top: -50vh`).

   Ab 1440 px überschreibt die Webflow-Datei jedoch nur den Aussenabstand auf
   `-30vh` und lässt die Höhe bei `50vh`. Netto blieben dadurch 20vh stehen —
   gemessen 146 px —, die die graue Linie nach unten schoben. Der erste Punkt
   stand deshalb ohne Anschluss da, die Linie begann erst kurz über dem zweiten.

   Hier wird das Paar wieder zusammengeführt.
   --------------------------------------------------------------------------- */
@media screen and (min-width: 1440px) {
    .timeline5_progress-line {
        margin-top: -50vh;
    }

    /* Die Abdeckung maskiert den Teil der grünen Linie OBERHALB des
       Zeitstrahls. Basis: `height: 50vh` mit `top: -50vh` — sie endet also
       genau am Anfang. Die Medienabfrage ändert nur `top` auf `-30vh` und
       lässt die Höhe bei 50vh: dadurch ragt sie 20vh (rund 200 px) in den
       Zeitstrahl hinein und übermalt die graue Linie dort. Genau so weit war
       sie unsichtbar — der erste Punkt hing ohne Anschluss da. */
    .timeline5_progress-line-cover {
        top: -50vh;
    }
}

/* Ersatzbild fuer News ohne eigenes Beitragsbild.
   Das Herz ist ein Foto, kein Logo: die Invert-Regel der Highlights-Spalte
   (.dark .invert-img) wuerde es im Dark Mode umfaerben. */
.dark img[src*="news-platzhalter-herz"] {
    filter: none !important;
}

/* REFERENZEN-DEAKTIVIERT 21.09.2026 — Uebergangsregel.
   Das Kachelraster auf /unternehmen steht auf vier Spalten. Ohne die
   Referenzen-Kachel bleiben fuenf Karten, die fuenfte stuende allein in der
   zweiten Zeile. Drei Spalten ergeben 3 + 2 und damit wieder ein ruhiges Bild.
   Zum Reaktivieren: diese Regel loeschen und die Klasse `raster-drei` in
   unternehmen/index.html entfernen. */
@media screen and (min-width: 992px) {
    .layout303_list.unsere-l-sungen.homepage.raster-drei {
        grid-template-columns: 1fr 1fr 1fr;
    }
}

/* --- Worttrennung auf schmalen Bildschirmen -------------------------------
   Die Exportvorlage setzt unter 480 px `word-break: break-all` auf zwei
   Ueberschriftvarianten. Das trennt an einer beliebigen Stelle und OHNE
   Trennstrich — aus "Kommunizieren" wird "Kommuni / zieren", was wie ein
   Fehler aussieht.

   Richtig ist die Kombination aus `overflow-wrap: break-word` (bricht ein
   Wort nur, wenn es sonst gar nicht in die Zeile passt) und `hyphens: auto`
   (setzt einen Trennstrich und trennt nach den Regeln der Sprache, die im
   <html lang="de-DE"> steht). `-webkit-hyphens` ist fuer Safari auf dem
   iPhone noetig, sonst passiert dort nichts. */
@media screen and (max-width: 479px) {
    .heading-style-h1.break-word,
    .heading-style-h1.small-text {
        word-break: normal;
        overflow-wrap: break-word;
        -webkit-hyphens: auto;
        hyphens: auto;
    }
}

/* Auffangnetz fuer alle Ueberschriften: deutsche Komposita wie
   "Beilagenmanagement" oder "Transaktionsdruck" sind laenger als eine
   Handybreite. Ohne Trennung ragen sie aus dem Layout, mit hartem Umbruch
   sehen sie kaputt aus. `hyphens: auto` greift nur dort, wo tatsaechlich
   umgebrochen werden muss — kurze Zeilen bleiben unberuehrt. */
@media screen and (max-width: 767px) {
    h1, h2, h3, h4, h5, h6,
    [class*="heading-style-h"] {
        overflow-wrap: break-word;
        -webkit-hyphens: auto;
        hyphens: auto;
    }
}

/* Letzte Notbremse fuer alles andere: `overflow-wrap: break-word` greift
   ausschliesslich dann, wenn ein Wort sonst aus seinem Kasten ragen wuerde,
   und laesst normalen Text voellig unberuehrt. Bewusst OHNE `hyphens: auto`
   im Fliesstext — Trennstriche mitten im Absatz sind Geschmackssache, ein
   waagrecht scrollendes Handy nicht. */
@media screen and (max-width: 767px) {
    p, li, dd, dt, figcaption, blockquote, td, th,
    .text-size-regular, .text-size-medium, .text-size-large, .text-size-small,
    .text-size-tiny, .tagline-6, [class^="lorem-ipsum"], [class*="paragraph"],
    .button, .w-button, .text-weight-semibold {
        overflow-wrap: break-word;
    }
}

/* ---------------------------------------------------------------------------
   Absende-Knoepfe: display:flex vertraegt sich nicht mit <input>
   ---------------------------------------------------------------------------
   .button in lettershop-main.css setzt display:flex (fuer <a>-Knoepfe sinnvoll).
   Auf einem <input type="submit"> ist das in WebKit/Safari — also auf jedem
   iPhone und iPad — kaputt: Safari macht aus einem Eingabefeld keinen
   Flex-Container und zeichnet dann die Beschriftung aus `value` nicht mehr.
   Sichtbar bleibt eine leere gruene Flaeche; der Bewerber sieht keinen Knopf.
   Chrome und Firefox zeigen den Text trotzdem, deshalb faellt es beim Testen
   am Rechner nicht auf.

   display:block statt flex. Die Breite bleibt gleich: die Formulare sind
   Grid-Container mit 1fr, das Kind wird ohnehin gestreckt (in Chrome bei
   375 px und 1440 px gemessen, Geometrie unveraendert). justify-content,
   align-items und gap aus .button laufen dann ins Leere — das Zentrieren
   uebernimmt text-align:center, das .button ebenfalls setzt.

   Betrifft: Bewerbungsformular (Bewerben), Kontaktformular (Senden),
   Newsletter (Abonnieren), Passwortseite 401 (Absenden). */
input[type="submit"].button,
input[type="button"].button,
input[type="reset"].button,
input[type="submit"].w-button,
input[type="submit"].w-password-page {
    display: block;
}

/* ---------------------------------------------------------------------------
   Sekundaere Knoepfe waren auf Mobil komplett ausgeblendet
   ---------------------------------------------------------------------------
   lettershop-main.css (Webflow-Export) enthaelt zweimal

       @media screen and (max-width: 767px) { .button.is-secondary { display: none } }
       @media screen and (max-width: 479px) { .button.is-secondary { display: none } }

   Das war im Designer vermutlich fuer EINEN bestimmten Knopf gedacht, wurde
   aber auf die Klasse gelegt und trifft damit jeden sekundaeren Knopf der
   ganzen Seite. Nicht aufgefallen ist es, weil die haeufigste Variante
   .button.is-secondary.is-small mit drei Klassen spezifischer ist und ihr
   display:inline-flex behaelt — die sichtbaren Knoepfe blieben sichtbar.

   Unsichtbar waren auf dem Handy unter anderem:
     - "Mehr lesen & bewerben" auf /unternehmen/jobs  (einziger Weg ins
       Bewerbungsformular)
     - "Kontakt" im Fuss JEDER Seite
     - alle vier "Zertifikat Herunterladen" auf /sicherheit-qualitaet
     - "zurueck zu den offenen Stellen" auf der Stellendetailseite

   Gleiche Spezifitaet wie die Webflow-Regel, aber spaeter geladen, deshalb
   gewinnt sie. .is-small bleibt unberuehrt (drei Klassen, inline-flex). */
@media screen and (max-width: 767px) {
    .button.is-secondary {
        display: flex;
    }
}

/* ---------------------------------------------------------------------------
   Querscrollen auf dem Handy — abgeschnittene Ueberschriften
   ---------------------------------------------------------------------------
   Symptom: auf dem Telefon laesst sich die Seite ~27 px nach rechts schieben.
   Wer das (versehentlich, beim Wischen) tut, sieht danach jede Ueberschrift
   links angeschnitten — aus "SICHERHEIT" wird "CHERHEIT". Es sieht nach einem
   Fehler in den Hero-Elementen aus, ist aber keiner: die Ueberschriften stehen
   richtig, die ganze Seite ist nur breiter als das Fenster.

   Ursache 1 — Rasterspalten, die nicht schrumpfen duerfen:
   "grid-template-columns: 1fr" heisst in Wahrheit "minmax(auto, 1fr)", und
   dieses auto ist die MIN-CONTENT-Breite des Elements. Auf der Seite
   /sicherheit-qualitaet ist das Wort "Herausforderungen" in der h2-Groesse
   383 px breit — breiter als die 338 px, die zur Verfuegung stehen. Die Spalte
   waechst also auf 383 px, und die Seite wird 402 px breit.
   overflow-wrap:break-word (weiter oben gesetzt) hilft hier NICHT: es erlaubt
   den Umbruch beim Zeichnen, veraendert die min-content-Breite aber nicht.
   hyphens:auto verkleinert sie, aber nur wo der Browser ein Trennwoerterbuch
   hat — Safari auf dem iPhone ja, andere nicht. Verlassen kann man sich darauf
   also nicht. min-width:0 nimmt der Spalte diese Untergrenze; der Text bricht
   danach innerhalb der 338 px um.

   Ursache 2 — Bilder mit fester Maximalbreite:
   img { max-width: 100% } aus lettershop-base.css wird von Klassen wie
   .layout6_image.max-w-450 { max-width: 400px } ueberstimmt. Bei 375 px
   Fensterbreite ragt so ein Bild 25 px hinaus. Ein Fall ist ausserdem als
   "max-width: 450%" notiert — mit an Sicherheit grenzender Wahrscheinlichkeit
   ein Tippfehler fuer 450px.

   Beide Regeln gelten nur bis 991 px; am Rechner aendert sich nichts. */
@media screen and (max-width: 991px) {
    /* Rasterkinder duerfen unter ihre min-content-Breite schrumpfen. */
    .w-layout-grid > * {
        min-width: 0;
    }

    /* Kein Bild breiter als sein Kasten. !important, weil die Webflow-Klassen
       mit zwei bis vier Klassen spezifischer sind als jede Regel, die man hier
       ohne eine ebenso lange Kette schreiben koennte.

       min-width MUSS mit zurueckgesetzt werden: in CSS gewinnt min-width gegen
       max-width. .layout6_image.max-w-450.form_radio-label.squared setzt
       min-width:400px — auf einem 375-px-Telefon ist damit ein Ueberstand
       eingebaut, und max-width:100% allein bleibt wirkungslos. */
    img[class*="max-w-"] {
        max-width: 100% !important;
        min-width: 0 !important;
    }
}

/* ---------------------------------------------------------------------------
   Datenschutzerklaerung: Querscrollen bei sehr schmalen Geraeten (320 px)
   ---------------------------------------------------------------------------
   Der Text stammt aus dem eingebundenen Fremdbaustein <privacybee-widget>.
   Darin sitzt .col-full als Flex-Kind mit min-width:auto, und im Fliesstext
   steht die nackte Adresse "https://developers.google.com/fonts/faq." — 40
   Zeichen am Stueck, bei 320 px Fensterbreite 334 px breit. Das Flex-Kind darf
   nicht unter diese Breite, also wird die Seite breiter als das Fenster.

   overflow-wrap:anywhere ist hier das richtige Mittel und nicht break-word:
   nur "anywhere" senkt auch die min-content-Breite, und genau die ist das
   Problem. Umgebrochen wird weiterhin erst, wenn es sonst nicht passt — kurze
   Verweise bleiben unveraendert. */
@media screen and (max-width: 991px) {
    /* .row/.col-full stehen UEBER dem Widget in datenschutzerklarung.html und
       nirgends sonst auf der Seite. Als Flex-Kind mit min-width:auto gibt
       .col-full die zu grosse Innenbreite nach aussen weiter. */
    .row.slim-row,
    .col-full.txtcontent,
    privacybee-widget .prx_wrapper {
        min-width: 0;
    }

    /* Die Trackerliste setzt Symbol, Name und Adresse nebeneinander; die
       Adressen (https://tagmanager.google.com/ und aehnliche) sind allein
       schon breiter als 320 px. */
    privacybee-widget a,
    privacybee-widget .prx_text,
    privacybee-widget li,
    privacybee-widget .prx_expandableWrapper,
    privacybee-widget .prx_expandableWrapper * {
        min-width: 0;
        overflow-wrap: anywhere;
    }
}

/* ---------------------------------------------------------------------------
   Hero-Bild ragt aus seinem Kasten — nur in Safari sichtbar
   ---------------------------------------------------------------------------
   Gemeldet wurde dreierlei, es ist aber ein einziger Fehler:
     - die Seite laesst sich waagrecht schieben
     - der dunkle Schleier liegt nicht auf dem ganzen Hero-Bild
     - das Bild schiebt sich ueber den Text des Abschnitts darunter

   Die KI-Kennzeichnung (.ai-marked, weiter oben) schneidet die Bildmarke per
   `object-view-box` weg. Das aendert nur den Quellausschnitt, nicht die
   Layoutbox — in Chrome sitzt deshalb alles auf den Pixel genau.

   Safari kennt `object-view-box` bis heute nicht und nimmt den Ersatzzweig
   unter @supports: `scale: 1.087` bzw. 1.15 bei .ai-mark-large. Das vergroessert
   die LAYOUTBOX. Drei der vier Bild-Wrapper fangen das ab, weil sie ohnehin
   `overflow: hidden` tragen (.blog42_image-wrapper, .layout3_image-wrapper,
   .layout6_image-wrapper). Der Hero-Wrapper tut das nicht.

   Gemessen auf /sicherheit-qualitaet bei 375 px Fensterbreite, mit dem
   Safari-Zweig nachgestellt: Wrapper 375x840, Bild 431x966 — 56 px zu weit
   rechts, 126 px zu weit unten. Daraus folgt alles Gemeldete:
     - 56 px Ueberstand  -> die Seite scrollt waagrecht
     - .image-overlay-layer liegt auf `inset: 0` und ist damit nur so gross wie
       der Wrapper (375x840). Die herausragenden 56x126 px bleiben ungedeckt —
       der Schleier endet vor dem Bildrand.
     - die 126 px unten legen sich ueber den folgenden Abschnitt.

   `overflow: hidden` auf dem Wrapper raeumt alle drei Punkte zugleich ab: das
   Bild wird auf den Wrapper beschnitten, und damit deckt der Schleier wieder
   genau die sichtbare Flaeche. Bewusst OHNE Media Query — der Ueberstand
   waechst mit der Breite mit (bei 1440 px sind es 216 px). */
.header5_background-image-wrapper {
    overflow: hidden;
}

/* ---------------------------------------------------------------------------
   Mobiles Menue: Dark-Mode-Schalter lag unter der Chrome-Werkzeugleiste
   ---------------------------------------------------------------------------
   Das aufgeklappte Menue (.navbar12_menu.is-page-height-tablet) steht IM
   Kopfbereich, also unterhalb der Logo-Zeile — gemessen bei 390 px sind das
   66 px, die ueber ihm liegen. Seine Hoehe war trotzdem auf die volle
   Bildschirmhoehe gesetzt: 100dvh (bis 991 px) bzw. 95vh (bis 479 px). Beides
   ist um genau diese 66 px zu viel, das Feld ragt also unten aus dem Fenster.

   Bei `vh` kommt auf dem Telefon das eigentliche Problem dazu: die Einheit
   rechnet mit dem Fenster OHNE Werkzeugleiste (Adressleiste eingefahren). Ist
   die Leiste sichtbar — und beim Oeffnen des Menues ist sie das immer —, ist
   das Feld zusaetzlich um deren Hoehe zu gross. Der Schalter sitzt als letztes
   Element am unteren Rand des Feldes und wandert damit genau so weit nach
   unten, wie oben an sichtbarer Flaeche fehlt: er verschwindet halb unter der
   Leiste. Nachscrollen half nicht, weil der Inhalt in das (zu grosse) Feld
   passt und es deshalb gar keinen Scrollbereich gibt.

   `dvh` misst das Fenster so, wie es im Moment tatsaechlich sichtbar ist, und
   folgt dem Ein- und Ausfahren der Leiste. Zusammen mit dem Abzug der 66 px
   endet das Feld genau am sichtbaren unteren Rand. Der Innenabstand von 6rem
   haelt den Schalter davon frei; env(safe-area-inset-bottom) faengt zusaetzlich
   den Home-Balken auf iPhones ab. `min-height: 0` ist noetig, um das
   `min-height: 95vh` aus der Exportdatei (max-width: 479px) aufzuheben. */
@media screen and (max-width: 991px) {
    .navbar12_menu.is-page-height-tablet {
        /* Vorkopf (35px) + Logo-Zeile (64px) + 2px Versatz = 101px */
        --menu-kopfzeile: 6.325rem;
        height: calc(100dvh - var(--menu-kopfzeile));
        min-height: 0;
        padding-bottom: calc(6rem + env(safe-area-inset-bottom, 0px));
    }
}

/* Unter 480px blendet die Exportdatei den Vorkopf aus (.pre-header-background
   { display: none }), ueber dem Menue steht dann nur noch die Logo-Zeile. */
@media screen and (max-width: 479px) {
    .navbar12_menu.is-page-height-tablet {
        --menu-kopfzeile: 4.125rem;   /* 64px Logo-Zeile + 2px Versatz */
    }
}

/* ---------------------------------------------------------------------------
   Mobiles Menue: Untermenues klappen jetzt wirklich auf, statt aufzuspringen
   ---------------------------------------------------------------------------
   Bisher gab es beim Tippen auf einen Pfeil GAR KEINE Animation. Gemessen:
   die Liste geht innerhalb eines einzigen Bildes von 0 auf 248 px, und alles
   darunter springt entsprechend nach unten. Nur der Pfeil drehte sich weich
   (0.25 s) — dieser Widerspruch ist das "klobige" Gefuehl.

   Zwei Ursachen:
   1. Webflow schaltet die Liste ueber `.w--open` zwischen display:none und
      display:block um. Von display:none aus kann nichts uebergeblendet werden,
      der Browser springt direkt auf den Endwert.
   2. Die weiter oben stehenden Uebergaenge (max-height 0 -> 600px, opacity)
      haengen an `.w--nav-dropdown-open`. Das ist aber KEIN Zustand, sondern
      Webflows Markierung "dieses Dropdown steht in einem geoeffneten
      Mobilmenue" — sie liegt auf ALLEN vier Dropdowns, sobald der Hamburger
      offen ist. Die "offen"-Werte galten also dauerhaft; die Liste war
      trotzdem unsichtbar, weil display:none aus (1) gewann. Nebeneffekt:
      auch die Pfeildrehung hing daran, deshalb zeigten alle Pfeile nach oben,
      obwohl alle Untermenues zu waren.
   Der tatsaechliche Zustand ist allein `.w--open` (auf Liste und Toggle).

   Loesung: die Liste bleibt immer gerendert (display:grid) und wird ueber
   `grid-template-rows: 0fr -> 1fr` auf- und zugeklappt. Anders als max-height
   laeuft das exakt bis zur Inhaltshoehe, ohne Totzeit am Anfang oder Ende —
   bei max-height:600px fuer 248 px Inhalt waeren 60 % der Zeit unsichtbar.
   Das einzige Kind (.navbar12_dropdown-content) traegt min-height:0 und
   overflow:hidden, damit die Rasterzelle wirklich auf 0 fallen darf. Die
   Liste selbst hat weder Innenabstand noch Rahmen (gemessen), also endet sie
   bei 0 px. Der Inhalt blendet leicht versetzt ein; beim Schliessen faellt
   er sofort weg, damit sich der Text nicht sichtbar staucht.

   Die Kurve (0.33, 1, 0.68, 1) ist dieselbe wie bei den Kachelbildern
   (.blog42_image) — schnell weg vom Finger, weich ins Ziel.

   !important und die Kette .navbar12_menu-dropdown.w-dropdown sind noetig:
   die alten Regeln oben tragen alle !important mit bis zu drei Klassen
   Spezifitaet. Gleich viele Klassen + spaeter in der Datei = diese gewinnen. */
@media screen and (max-width: 991px) {
    .navbar12_menu-dropdown.w-dropdown .navbar12_dropdown-list {
        display: grid !important;
        grid-template-rows: 0fr;
        max-height: none !important;
        opacity: 1 !important;
        visibility: hidden !important;
        overflow: hidden !important;
        transition: grid-template-rows 0.32s cubic-bezier(0.33, 1, 0.68, 1),
                    visibility 0s linear 0.32s !important;
        transition-delay: 0s, 0.32s !important;
    }
    .navbar12_menu-dropdown.w-dropdown .navbar12_dropdown-list.w--open {
        grid-template-rows: 1fr;
        visibility: visible !important;
        transition-delay: 0s, 0s !important;
    }

    /* Die 16px Innenabstand oben/unten wandern vom Wrapper auf die erste/
       letzte Spalte: Innenabstand laesst sich durch min-height:0 nicht
       wegdruecken, die zugeklappte Liste blieb sonst 32px hoch (gemessen). */
    .navbar12_menu-dropdown.w-dropdown .navbar12_dropdown-list > .navbar12_dropdown-content {
        min-height: 0;
        overflow: hidden;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        opacity: 0;
        transform: translateY(-6px);
        transition: opacity 0.12s ease, transform 0.12s ease;
    }
    .navbar12_menu-dropdown.w-dropdown .navbar12_dropdown-list.w--open > .navbar12_dropdown-content {
        opacity: 1;
        transform: none;
        transition: opacity 0.22s ease 0.08s,
                    transform 0.3s cubic-bezier(0.33, 1, 0.68, 1) 0.04s;
    }

    .navbar12_menu-dropdown.w-dropdown .navbar12_dropdown-content > .navbar12_dropdown-column:first-child {
        padding-top: 16px;
    }
    .navbar12_menu-dropdown.w-dropdown .navbar12_dropdown-content > .navbar12_dropdown-column:last-child {
        padding-bottom: 16px;
    }

    /* Pfeil: nur der echte Zustand (.w--open auf dem Toggle) dreht ihn.
       Die Webflow-Markierungen w--nav-dropdown-open / w--nav-dropdown-toggle-open
       liegen im offenen Mobilmenue auf allen Dropdowns und sagen nichts darueber,
       ob das Untermenue offen ist. */
    .navbar12_menu-dropdown.w--nav-dropdown-open .dropdown-chevron svg,
    .navbar12_menu-dropdown.dropdown-open .dropdown-chevron svg,
    .navbar12_dropdown-toggle.w--nav-dropdown-toggle-open .dropdown-chevron svg {
        transform: none !important;
    }
    .navbar12_dropdown-toggle.w--open .dropdown-chevron svg {
        transform: rotate(180deg) !important;
    }
    /* Es darf nur EIN Element drehen. Die globale Regel weiter oben
       (`.navbar12_menu-dropdown:hover .dropdown-chevron, .navbar12_menu-dropdown.w--open
       .dropdown-chevron { rotate(180deg) }`) dreht zusaetzlich den Wrapper — und
       auf dem Telefon bleibt :hover nach dem Tippen auf dem Element haengen.
       Wrapper 180 + Symbol 180 = 360: das Symbol zeigte im offenen Zustand
       wieder nach unten (per Pixelmessung bestaetigt, getScreenCTM = Identitaet). */
    .navbar12_menu-dropdown:hover .dropdown-chevron,
    .navbar12_menu-dropdown.w--open .dropdown-chevron,
    .navbar12_dropdown-toggle .dropdown-chevron {
        transform: none !important;
    }

    /* Wer Bewegung im System reduziert hat, bekommt den Zustandswechsel ohne
       Weg — aber weiterhin ohne Sprung in der Sichtbarkeit. */
    @media (prefers-reduced-motion: reduce) {
        .navbar12_menu-dropdown.w-dropdown .navbar12_dropdown-list,
        .navbar12_menu-dropdown.w-dropdown .navbar12_dropdown-list > .navbar12_dropdown-content,
        .navbar12_menu-dropdown.w-dropdown .navbar12_dropdown-list.w--open > .navbar12_dropdown-content {
            transition-duration: 0.01s !important;
            transition-delay: 0s !important;
        }
    }
}

/* ---------------------------------------------------------------------------
   Handy: Seiteninhalt sprang beim Losscrollen um 28px
   ---------------------------------------------------------------------------
   Unter 480px blendet die Exportdatei den Vorkopf (E-Mail/Telefon) aus. Die
   Regel "Keep pre-header visible when sticky" weiter oben
   (`.navbar12_component.sticky .pre-header-background { display: block }`)
   holt ihn aber zurueck, sobald das Skript beim Scrollen die Klasse .sticky
   setzt. Gemessen bei 390px: Kopfzeile 64 -> 92px, und weil sie mit
   position:sticky im Textfluss bleibt, rutscht der GESAMTE Seiteninhalt in
   diesem Moment um 28px nach unten — und beim Zurueckscrollen wieder hoch.
   Das war der sichtbare Ruck; die Kopfzeile selbst ist da laengst aus dem
   Bild.

   Auf dem Handy bleibt der Vorkopf also auch im Sticky-Zustand versteckt.
   Seine Kopie im aufgeklappten Menue (.mobile-pre-header) ist ausgenommen,
   die soll wie bisher erscheinen. Drei Klassen schlagen die zwei der
   Ursprungsregel. */
@media screen and (max-width: 479px) {
    .navbar12_component.sticky > .pre-header-background:not(.mobile-pre-header) {
        display: none;
    }
}