/* ============================================================
   LivingTech GmbH — main.css
   ============================================================ */

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

   .max-width {
    max-width: 1850px;
    width: 100%;
  }
  .max-width-lg {
    max-width: 1920px;
    width: 100%;
  }
  .min-vh-60 {
    min-height: 60vh;
  }
  .min-vh-70 {
    min-height: 70vh;
  }
  .vh-70 {
    height: 70vh;
  }
  .no-margin {
    margin: 0 !important;
  }
  .hyphens {
    hyphens: auto;
  }
  
  [id] {
    scroll-margin-top: 75px;
  }
  
  #angebot {
    scroll-margin-top: 75px;
  }
  
  /* ============================================================
        BLOCK PADDING
        ============================================================ */
  
  .pt-block-none {
    padding-top: 0 !important;
  }
  .pt-block-small {
    padding-top: 1.5rem !important;
  }
  .pt-block-medium {
    padding-top: 3rem !important;
  }
  .pt-block-large {
    padding-top: 5rem !important;
  }
  
  .pb-block-none {
    padding-bottom: 0 !important;
  }
  .pb-block-small {
    padding-bottom: 1.5rem !important;
  }
  .pb-block-medium {
    padding-bottom: 3rem !important;
  }
  .pb-block-large {
    padding-bottom: 5rem !important;
  }
  
  /* ============================================================
        BACKGROUNDS
        ============================================================ */
  
  .bg-cover {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
  }
  .background-cover {
    background-size: cover !important;
  }
  .background-contain {
    background-size: contain !important;
  }
  .background-no-repeat {
    background-repeat: no-repeat !important;
  }
  .background-center-center {
    background-position: center center !important;
  }
  .object-poisition-center {
    object-position: center !important;
  }
  
  /* ============================================================
        INTERACTION
        ============================================================ */
  
  .cursor-pointer {
    cursor: pointer;
  }
  .cursor-default {
    cursor: default;
  }
  
  .image-hover {
    overflow: hidden;
  }
  .image-hover .image-scale {
    transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }
  .image-hover:hover .image-scale {
    transform: scale(1.05);
  }
  
  .trim {
    text-box-trim: trim-both;
    text-box-edge: cap alphabetic;
  }
  
  /* ============================================================
        BUTTONS
        ============================================================ */
  
  .btn-intro {
    transition: background-color 0.3s ease, transform 0.2s ease;
  }
  .btn-intro:hover {
    transform: translateX(4px);
  }
  
  .btn-right-arrow {
    background-image: url("data:image/svg+xml,%3Csvg width='10' height='17' viewBox='0 0 10 17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.707031 0.707031L8.20703 8.20703L0.707031 15.707' stroke='%234B4B54' stroke-width='2'/%3E%3C/svg%3E%0A");
    width: 7.5px;
    height: 15px;
  }
  
  .btn-right-arrow-white {
    display: inline-block;
    width: 16px;
    height: 16px;
    background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.33337 8H12.6667' stroke='%23FFFFFF' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M8.66663 4L12.6666 8L8.66663 12' stroke='%23FFFFFF' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  }
  
  /* ============================================================
        HEADER
        ============================================================ */
  
  .site-header {
    transition: background-color 0.4s ease, backdrop-filter 0.4s ease;
    z-index: 9999 !important;
  }
  .site-header nav {
    padding-top: 2rem;
    padding-bottom: 2rem;
    transition: padding 0.4s ease;
  }
  .site-header.active nav {
    padding-top: 1rem;
    padding-bottom: 1rem;
  }
  
  .header-nav {
    padding-top: 2rem;
    padding-bottom: 2rem;
    transition: padding 0.4s ease;
  }
  .site-header.active .header-nav {
    padding-top: 1rem;
    padding-bottom: 1rem;
  }
  
  /* Header position modes */
  .header-pos-fixed .site-header {
    position: fixed;
  }
  .header-pos-sticky .site-header {
    position: sticky;
  }
  .header-pos-static .site-header {
    position: relative;
  }
  
  /* Default: white logo/hamburger */
  .header-logo {
    display: inline-block;
  }
  .header-logo-dark {
    display: none;
  }
  .header-hamburger {
    display: inline-block;
  }
  .header-hamburger-dark {
    display: none;
  }
  .header-link {
    color: rgba(255, 255, 255, 0.5);
    transition: color 0.3s ease;
  }
  .header-link-active {
    color: var(--color-white);
    font-weight: 500;
  }
  .lang-divider {
    color: rgba(255, 255, 255, 0.5);
  }
  
  /* Mode: transparent */
  .header-transparent .site-header {
    background-color: transparent;
  }
  .header-transparent .site-header.active {
    background-color: rgba(0, 0, 0, 0.9);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }
  
  /* Mode: solid-dark */
  .header-solid-dark .site-header {
    background-color: var(--color-black);
  }
  
  /* Mode: solid-light — initial */
  .header-solid-light .site-header {
    background-color: var(--color-white);
  }
  .header-solid-light .header-logo {
    display: none;
  }
  .header-solid-light .header-logo-dark {
    display: inline-block;
  }
  .header-solid-light .header-hamburger {
    display: none;
  }
  .header-solid-light .header-hamburger-dark {
    display: inline-block;
  }
  .header-solid-light .header-link {
    color: rgba(0, 0, 0, 0.5);
  }
  .header-solid-light .header-link-active {
    color: var(--color-black);
  }
  .header-solid-light .lang-divider {
    color: rgba(0, 0, 0, 0.5);
  }
  
  /* Mode: solid-light — scrolled */
  .header-solid-light .site-header.active {
    background-color: rgba(0, 0, 0, 0.9);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }
  .header-solid-light .site-header.active .header-logo {
    display: inline-block;
  }
  .header-solid-light .site-header.active .header-logo-dark {
    display: none;
  }
  .header-solid-light .site-header.active .header-hamburger {
    display: inline-block;
  }
  .header-solid-light .site-header.active .header-hamburger-dark {
    display: none;
  }
  .header-solid-light .site-header.active .header-link {
    color: rgba(255, 255, 255, 0.5);
  }
  .header-solid-light .site-header.active .header-link-active {
    color: var(--color-white);
  }
  .header-solid-light .site-header.active .lang-divider {
    color: rgba(255, 255, 255, 0.5);
  }
  
  /* Logo SVGs */
  .livingtech-white-logo {
    /* background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg id='Layer_2' data-name='Layer 2' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 829.1 145.5'%3E%3Cdefs%3E%3Cstyle%3E .cls-1 %7B fill: %23d8e803; %7D .cls-2 %7B fill: %23fff; %7D %3C/style%3E%3C/defs%3E%3Cg id='Layer_2-2' data-name='Layer 2'%3E%3Cg%3E%3Cg%3E%3Cpath class='cls-2' d='M190.5,113.3V3.5h20.3v109.8h-20.3Z'/%3E%3Cpath class='cls-2' d='M232.9,28.6c-3.4,0-6.3-1.2-8.6-3.5-2.4-2.4-3.5-5.2-3.5-8.5s1.2-6,3.5-8.3,5.2-3.5,8.6-3.5,6.4,1.2,8.7,3.5c2.3,2.4,3.5,5.1,3.5,8.3s-1.2,6.3-3.5,8.6-5.2,3.5-8.7,3.5v-.1ZM222.8,113.3V35.1h20.3v78.2s-20.3,0-20.3,0Z'/%3E%3Cpath class='cls-2' d='M279.5,113.3l-32.6-78.2h24.1l15.6,44.7c1.4,4,2.5,8.2,3.3,12.5.8-4.3,1.9-8.5,3.3-12.5l15.6-44.7h23.6l-32.5,78.2h-20.5.1Z'/%3E%3Cpath class='cls-2' d='M346.3,28.6c-3.4,0-6.3-1.2-8.6-3.5-2.4-2.4-3.5-5.2-3.5-8.5s1.2-6,3.5-8.3,5.2-3.5,8.6-3.5,6.4,1.2,8.7,3.5c2.3,2.4,3.5,5.1,3.5,8.3s-1.2,6.3-3.5,8.6-5.2,3.5-8.7,3.5v-.1ZM336.2,113.3V35.1h20.3v78.2s-20.3,0-20.3,0Z'/%3E%3Cpath class='cls-2' d='M368.5,113.3V35.1h20v11.4c4.1-8.8,12.1-13.2,23.9-13.2s10.7,1.3,15.2,3.9c4.5,2.6,8.1,6.3,10.7,11.1,2.6,4.8,3.9,10.5,3.9,17.1v47.8h-20.3v-42.9c0-6.8-1.6-11.8-4.7-14.8-3.1-3.1-7.2-4.6-12.2-4.6s-8.1,1.5-11.4,4.6-4.9,8-4.9,14.8v42.9h-20.3l.1.1Z'/%3E%3Cpath class='cls-2' d='M491.6,145.4c-7.9,0-15-1.1-21.1-3.2-6.2-2.2-11.6-6-16.3-11.5l12.6-14.9c3.7,4.2,7.6,7.1,11.6,8.6s8.5,2.3,13.4,2.3,7-.9,10.1-2.7c3.1-1.8,5.6-4.3,7.4-7.6,1.9-3.3,2.8-6.9,2.8-11.1v-3.5c-2.1,3.6-5,6.5-8.6,8.7-3.7,2.2-8.6,3.3-15,3.3s-13.6-1.8-19.3-5.4c-5.8-3.6-10.3-8.4-13.6-14.5-3.3-6.1-5-12.9-5-20.4s1.7-14.3,5-20.5c3.3-6.1,7.8-11,13.6-14.5,5.8-3.6,12.2-5.3,19.3-5.3s11.6,1.2,15.3,3.5c3.7,2.3,6.5,5.4,8.6,9.2v-10.7h20v71.3c0,8-1.7,14.9-5.2,20.8-3.5,5.8-8.2,10.3-14.4,13.5-6.1,3.2-13.2,4.7-21.2,4.7v-.1ZM491.7,95.3c6.7,0,11.9-2.1,15.6-6.3,3.7-4.2,5.6-9.4,5.6-15.5s-1.9-11.3-5.6-15.5-8.9-6.3-15.6-6.3-11.8,2.1-15.4,6.3c-3.7,4.2-5.5,9.4-5.5,15.5s.8,7.5,2.5,10.8,4,6,7.1,8,6.9,3,11.3,3Z'/%3E%3Cpath class='cls-2' d='M574,113.3c-7.7,0-13.6-1.9-17.7-5.7-4.1-3.8-6.2-10-6.2-18.5v-36.7h-11v-17.3h11v-15.8l20.3-2.1v17.9h16.5v17.3h-16.5v35.6c0,4.8,2.1,7.2,6.3,7.2h8.4v18h-11.1v.1Z'/%3E%3Cpath class='cls-2' d='M629,115.3c-8,0-15.1-1.9-21.2-5.6-6.1-3.7-10.9-8.6-14.2-14.8-3.4-6.2-5-13-5-20.5s1.8-14.4,5.3-20.7,8.3-11.3,14.4-15c6.1-3.7,13-5.6,20.8-5.6s14.7,1.9,20.7,5.6c6,3.7,10.6,8.7,14,15s5,13.2,5,20.7,0,2.3-.1,3.5-.3,2.5-.5,3.8h-58.5c1.1,4.6,3.3,8.4,6.7,11.3s7.6,4.4,12.7,4.4,8.2-1,11.5-3,5.8-4.5,7.6-7.5l15.8,11.9c-3.1,4.9-7.8,8.9-14,12s-13.2,4.7-20.9,4.7l-.1-.2ZM628.7,50.6c-4.8,0-8.9,1.5-12.3,4.4-3.4,2.9-5.7,6.7-6.8,11.4h38.7c-1.1-4.3-3.4-8-6.8-11.1-3.5-3.1-7.7-4.7-12.7-4.7h-.1Z'/%3E%3Cpath class='cls-2' d='M713.9,115.3c-5.6,0-10.9-1.1-15.7-3.2-4.9-2.1-9.2-5-12.9-8.8s-6.6-8.1-8.6-13.1c-2.1-5-3.1-10.3-3.1-16s1.8-14.5,5.3-20.7,8.5-11.1,14.7-14.8c6.3-3.7,13.4-5.6,21.3-5.6,7.1,0,13.5,1.2,19.1,3.8s10.1,6.2,13.4,10.8l-15.6,12.8c-1.8-2.7-4.1-4.9-7-6.5s-6-2.4-9.6-2.4-8.1,1-11.3,3.1-5.7,4.8-7.4,8.2c-1.8,3.4-2.6,7.2-2.6,11.3s.9,7.7,2.8,11.2c1.9,3.5,4.4,6.2,7.7,8.3,3.3,2.1,7,3.1,11.4,3.1s7.2-.9,9.9-2.6c2.7-1.8,5.1-4,7.1-6.7l14.7,12.8c-3.7,4.7-8.3,8.4-13.8,11.1s-12.1,4-19.8,4v-.1Z'/%3E%3Cpath class='cls-2' d='M755.4,113.3V3.5h20.3v42.4c4.2-8.4,12.1-12.6,23.6-12.6s10.7,1.3,15.2,3.9c4.5,2.6,8.1,6.3,10.7,11.1,2.6,4.8,3.9,10.5,3.9,17.1v47.8h-20.3v-42.9c0-6.8-1.6-11.8-4.7-14.8-3.1-3.1-7.2-4.6-12.2-4.6s-8.1,1.5-11.4,4.6c-3.3,3.1-4.9,8-4.9,14.8v42.9h-20.3l.1.1Z'/%3E%3C/g%3E%3Cpath class='cls-1' d='M103.3,0H0v103.3c0,9.7,7.9,17.7,17.7,17.7h103.3V17.7c0-9.7-7.9-17.7-17.7-17.7ZM91.3,98.6c-21.2,4.1-41.7,4-61.5,0v-9.3c22.7,2.9,43.2,2.9,61.5,0v9.3Z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    */
    width: 230px;
    background-size: contain;
  }
  
  .livingtech-dark-logo {
    background-image: url("data:image/svg+xml,%3Csvg width='200' height='25' viewBox='0 0 200 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.87319 0.234375H0V24.6831H15.0233H15.5319V21.1347H3.87319V0.234375Z' fill='black'/%3E%3Cpath d='M23.8654 0.234375H19.9922V24.6831H23.8654V0.234375Z' fill='black'/%3E%3Cpath d='M37.9098 20.1599L30.8677 0.234375H26.7598L35.6016 24.6831H39.8269H40.1007L40.2572 24.4882L49.0599 0.234375H45.0302L37.9098 20.1599Z' fill='black'/%3E%3Cpath d='M56.4161 0.234375H52.543V24.6831H56.4161V0.234375Z' fill='black'/%3E%3Cpath d='M80.2026 0.234375V19.497L68.0353 0.234375H62.8711V24.6831H66.7443V5.18651L78.9115 24.6831H84.0758V0.234375H80.2026Z' fill='black'/%3E%3Cpath d='M93.2694 4.40624C93.2694 4.40624 93.6606 4.09429 93.8954 4.0163C94.3257 3.82134 94.8343 3.74335 95.3038 3.70436C96.2819 3.62637 97.4947 3.58738 98.864 3.58738C99.9203 3.58738 100.977 3.58738 101.994 3.66537C102.268 3.66537 102.542 3.70436 102.933 3.78234C103.089 3.78234 103.207 3.82134 103.363 3.86033C103.637 3.93832 104.537 4.17228 104.654 6.27791L104.772 8.42254H108.645L108.527 6.19992C108.527 4.99113 108.214 3.78235 107.628 2.69053C106.689 1.24779 105.085 0.350941 103.402 0.233961C101.681 0.0779881 99.9595 0 98.238 0C97.1817 0 96.2428 0 95.4212 0.0389941C90.9611 0.272953 88.6138 2.76852 88.379 7.52569C88.3008 8.6565 88.3008 10.0992 88.3008 11.8929C88.3008 14.2715 88.3008 16.1822 88.4181 17.547C88.4181 18.4048 88.6138 19.3017 88.8485 20.1205C88.9267 20.3155 88.9659 20.5494 89.0441 20.7444C89.2789 21.3293 89.5918 21.9142 89.9831 22.4211C91.1176 23.7469 92.6826 24.5657 94.3649 24.7217C95.6559 24.8777 96.9861 24.9557 98.2772 24.9557C98.551 24.9557 98.8249 24.9557 99.0987 24.9557C100.625 24.9557 102.189 24.9167 103.676 24.7217C106.297 24.6437 108.41 22.5381 108.488 20.0035C108.567 19.0677 108.645 18.1319 108.645 17.196V12.0489H97.3382V15.6363H104.772V17.274C104.772 18.0539 104.693 18.8727 104.537 19.6916C104.459 20.3545 103.989 20.9394 103.324 21.0953C103.246 21.0953 103.128 21.0953 103.011 21.1343C101.446 21.3293 99.803 21.4073 98.238 21.4073C97.0644 21.4073 95.8515 21.3293 94.6387 21.0953C93.5824 20.9784 92.7608 20.1985 92.5652 19.2237C92.2522 16.8061 92.0957 14.3885 92.174 11.9319C92.174 10.2942 92.174 8.92945 92.2522 7.91563C92.3305 6.23892 92.6826 5.10812 93.3085 4.48422' fill='black'/%3E%3Cpath d='M112.049 3.82175H119.521V24.6831H123.395V3.82175H130.906V0.234375H112.049V3.82175Z' fill='black'/%3E%3Cpath d='M138.457 13.96H149.607H150.116V10.4116H138.457V3.82175H150.077H150.585V0.234375H134.584V24.6831H150.272H150.664L150.742 24.2932L150.781 21.1347H138.457V13.96Z' fill='black'/%3E%3Cpath d='M171.045 0.935909C169.754 0.312017 167.602 0.0390625 164.355 0.0390625C163.181 0.0390625 161.969 0.0780565 160.756 0.234029C158.721 0.467989 157.156 1.28685 156.1 2.65161C155.2 3.8604 154.692 5.45912 154.613 7.44778C154.535 9.55341 154.496 11.893 154.496 14.3496V17.2741C154.613 19.8476 155.318 21.7973 156.609 23.0451C157.743 24.1759 159.66 24.7608 162.438 24.8777C163.534 24.9167 164.551 24.9557 165.451 24.9557H167.798C170.576 24.7998 172.454 23.7469 173.393 21.8753C173.706 21.2514 173.901 20.5495 174.018 19.7306C174.136 18.8338 174.175 17.898 174.175 16.9621V15.7143H170.497L170.302 16.1043V17.0401C170.302 17.625 170.263 18.2489 170.184 18.9508C170.184 19.4967 169.989 20.0426 169.676 20.5105C169.598 20.6275 169.48 20.7835 169.363 20.9004C168.698 21.2514 167.954 21.4074 167.133 21.3294H164.707C164.355 21.3684 163.729 21.3294 162.829 21.3294C162.164 21.3294 161.46 21.2904 160.795 21.1734C159.426 20.9394 158.682 19.8866 158.526 17.9759C158.448 17.2351 158.408 15.5584 158.408 13.0628C158.408 10.5672 158.408 8.77355 158.487 7.72073C158.487 7.17482 158.565 6.62892 158.643 6.08301C158.76 5.38113 159.152 4.71825 159.778 4.32832C160.13 4.09436 160.56 3.93838 161.03 3.89939C162.399 3.70442 163.768 3.62644 165.098 3.66543C167.837 3.66543 168.854 3.97738 169.245 4.25033C169.95 4.67926 170.302 5.96603 170.302 7.95469V9.0465H174.175V6.97986C174.097 3.97738 173.04 1.98872 171.084 1.01389' fill='black'/%3E%3Cpath d='M195.537 0.234375V10.4116H183.213V0.234375H179.34V24.6831H183.213V13.96H195.537V24.6831H199.41V0.234375H195.537Z' fill='black'/%3E%3C/svg%3E%0A");
    width: 200px;
    height: 25px;
  }
  
  .hamburger-menu-white {
    background-image: url("data:image/svg+xml,%3Csvg width='40' height='15' viewBox='0 0 40 15' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='40' height='3.72093' fill='white'/%3E%3Crect y='11.1621' width='40' height='3.72093' fill='white'/%3E%3C/svg%3E%0A");
    width: 40px;
    height: 15px;
  }
  
  .hamburger-menu-dark {
    background-image: url("data:image/svg+xml,%3Csvg width='40' height='15' viewBox='0 0 40 15' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='40' height='3.72093' fill='black'/%3E%3Crect y='11.1621' width='40' height='3.72093' fill='black'/%3E%3C/svg%3E%0A");
    width: 40px;
    height: 15px;
  }
  
  /* ============================================================
        OFFCANVAS NAVIGATION
        ============================================================ */
  
  .nav-offcanvas,
  #mainMenu {
    height: 100vh !important;
    max-height: 100vh !important;
    border: none !important;
    width: 100% !important;
    max-width: 100vw !important;
    z-index: 99999 !important;
  }
  
  .nav-offcanvas .offcanvas-body {
    overflow-y: auto;
  }
  
  .nav-offcanvas-bar {
    padding-top: 2rem;
    padding-bottom: 2rem;
    transition: padding 0.4s ease;
  }
  .nav-offcanvas-bar.active {
    padding-top: 1rem;
    padding-bottom: 1rem;
  }
  
  .nav-main-link {
    font-size: 3.5rem;
    font-weight: 700;
    line-height: 1.2;
    display: inline-block;
    transform-origin: left center;
    transition: color 0.3s ease, opacity 0.4s ease,
      transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .nav-sub-link {
    display: inline-block;
    transform-origin: left center;
    transition: color 0.3s ease, opacity 0.4s ease,
      transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  }
  
  .nav-slash {
    font-weight: 400;
  }
  .nav-close-btn {
    background: none;
    line-height: 1;
  }
  .nav-company-info p {
    margin-bottom: 0;
    font-size: inherit;
    color: inherit;
  }
  
  /* Spotlight effect */
  .nav-link-group:hover .nav-main-link,
  .nav-link-group:hover .nav-sub-link {
    opacity: 0.3;
  }
  .nav-link-group .nav-main-link:hover,
  .nav-link-group .nav-main-link:hover span {
    opacity: 1 !important;
    color: var(--color-black) !important;
    transform: translateX(16px) scale(1.03);
  }
  .nav-link-group .nav-sub-link:hover {
    opacity: 1 !important;
    color: var(--color-black) !important;
    transform: translateX(8px);
  }
  
  .nav-link-group:hover .nav-slash {
    opacity: 0.3;
    transition: opacity 0.4s ease;
  }
  .nav-link-group .nav-slash:hover {
    opacity: 0.3;
    transform: none;
  }
  
  /* ============================================================
        HERO
        ============================================================ */
  
  .hero-bg-image {
    opacity: 0.6;
  }
  .hero-bg-img {
    object-position: center center;
  }
  .hero-headline {
    letter-spacing: -2px;
  }
  .hero-word-wrap {
    display: inline-block;
    overflow: hidden;
    vertical-align: bottom;
  }
  .hero-word {
    display: inline-block;
    will-change: transform, opacity;
  }
  .hero-fade-el {
    will-change: transform, opacity;
  }
  .hero-minimal {
    min-height: auto;
  }
  .hero-gradient-overlay {
    background: linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0) 0%,
      rgba(0, 0, 0, 0.3) 100%
    );
    pointer-events: none;
  }
  
  .hero-advanced {
    min-height: 80vh;
  }
  .hero-advanced-overlay {
    background: linear-gradient(
      135deg,
      rgba(0, 0, 0, 0.6) 0%,
      rgba(0, 0, 0, 0.2) 50%,
      rgba(0, 0, 0, 0.5) 100%
    );
    pointer-events: none;
  }
  
  /* ============================================================
        OVERLINE WITH DECORATIVE LINE
        ============================================================ */
  
  .quote-overline-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
  }
  .quote-overline-line {
    display: inline-block;
    width: 50px;
    height: 2px;
    background-color: var(--color-dark-gray);
  }
  
  /* ============================================================
        INTRO SECTION — default mode
        ============================================================ */
  
  .intro-section {
    overflow-x: hidden;
  }
  
  .intro-section-list {
    border-top: 1px solid var(--color-light-gray);
  }
  
  .intro-section-item {
    display: grid;
    grid-template-columns: 40px 1fr auto;
    align-items: center;
    gap: 1.25rem;
    padding: 1.25rem 10px;
    border-bottom: 1px solid var(--color-light-gray);
    transition: padding 0.3s ease, background-color 0.3s ease;
    color: inherit;
  }
  .intro-section-item:hover {
    background: linear-gradient(90deg,rgb(237, 241, 245) 1%, rgba(218, 232, 249, 1) 25%, rgba(219, 235, 246, 1) 75%, rgb(227, 246, 249) 100%) !important;
  }
  
  .intro-section-num {
    font-variant-numeric: tabular-nums;
  }
  .intro-section-name {
    font-size: 1.0625rem;
    font-weight: 500;
    letter-spacing: -0.005em;
  }
  .intro-section-arrow {
    font-size: 0.9375rem;
    transition: color 0.3s ease, transform 0.3s ease;
  }
  .intro-section-item:hover .intro-section-arrow {
    color: var(--color-black);
    transform: translateX(4px);
  }
  
  .intro-body-text {
    font-size: 1rem;
    line-height: 1.7;
  }
  .intro-body-text p:last-child {
    margin-bottom: 0;
  }
  
  .intro-body-text a {
    color: inherit;
    text-decoration: none;
    background-image: linear-gradient(currentColor, currentColor);
    background-size: 100% 1px;
    background-repeat: no-repeat;
    background-position: 0 100%;
    transition: background-size 0.3s ease, opacity 0.3s ease;
  }
  .intro-body-text a:hover {
    background-size: 100% 2px;
    opacity: 0.8;
  }
  
  .intro-content-card {
    border: 1px solid var(--color-light-gray);
  }
  
  .background-black .intro-content-card {
    border-color: rgba(255, 255, 255, 0.08);
  }
  .background-black .intro-section-list {
    border-top-color: rgba(255, 255, 255, 0.1);
  }
  .background-black .intro-section-item {
    border-bottom-color: rgba(255, 255, 255, 0.1);
  }
  .background-black .intro-section-item:hover {
    background-color: rgba(255, 255, 255, 0.03);
  }
  .background-black .intro-section-item:hover .intro-section-arrow {
    color: var(--color-white);
  }
  
  /* ============================================================
     STATS BAR — SIGNATURE EFFECTS v3
     ============================================================ */
  
  /* ── Stats Bar ── */
.stats-bar-grid {
    border-top: 1px solid var(--color-black);
    border-left: 1px solid var(--color-black);
}

.stat-card-cell {
    border-right: 1px solid var(--color-black);
    border-bottom: 1px solid var(--color-black);
}

.stat-card {
    min-height: 300px;
    background-color: var(--color-white);
    position: relative;
    overflow: hidden;
    transition: background-color 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    cursor: default;
}

/* Accent wash slides up from the bottom on hover */
/* Accent wash slides up from the bottom on hover.
   Default color (kept as a fallback) — each card overrides
   via :nth-child below so the 6 cards all get distinct colors. */
   .stat-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background-color: var(--color-light-gray);
    transform: translateY(100%);
    transition: transform 0.5s cubic-bezier(0.65, 0, 0.35, 1);
    z-index: 0;
}

/* Per-card hover colors — applied to the cell, which is the
   element :nth-child can reach (the .stat-card sits inside).
   Order matches the natural grid flow: row 1 → row 2 → row 3. */
.stats-bar-grid .stat-card-cell:nth-child(1) .stat-card::before { background-color: #b382ff; } /* purple */
.stats-bar-grid .stat-card-cell:nth-child(2) .stat-card::before { background-color: #3377f6; } /* blue */
.stats-bar-grid .stat-card-cell:nth-child(3) .stat-card::before { background-color: #b4ddcb; } /* mint */
.stats-bar-grid .stat-card-cell:nth-child(4) .stat-card::before { background-color: #fe6278; } /* coral */
.stats-bar-grid .stat-card-cell:nth-child(5) .stat-card::before { background-color: #FFD166; } /* amber */
.stats-bar-grid .stat-card-cell:nth-child(6) .stat-card::before { background-color: #06D6A0; } /* teal */

/* On darker hover backgrounds, flip text to white for legibility */
.stats-bar-grid .stat-card-cell:nth-child(1):hover .stat-number-wrap,
.stats-bar-grid .stat-card-cell:nth-child(2):hover .stat-number-wrap,
.stats-bar-grid .stat-card-cell:nth-child(4):hover .stat-number-wrap,
.stats-bar-grid .stat-card-cell:nth-child(6):hover .stat-number-wrap {
    color: var(--color-white) !important;
}

.stats-bar-grid .stat-card-cell:nth-child(1):hover .stat-label,
.stats-bar-grid .stat-card-cell:nth-child(2):hover .stat-label,
.stats-bar-grid .stat-card-cell:nth-child(4):hover .stat-label,
.stats-bar-grid .stat-card-cell:nth-child(6):hover .stat-label {
    color: var(--color-white) !important;
}

/* Cards 3 (mint) and 5 (amber) are light enough — keep black text */

/* Optional — invert icons on dark hover backgrounds */
.stats-bar-grid .stat-card-cell:nth-child(1):hover .stat-card-icon,
.stats-bar-grid .stat-card-cell:nth-child(2):hover .stat-card-icon,
.stats-bar-grid .stat-card-cell:nth-child(4):hover .stat-card-icon,
.stats-bar-grid .stat-card-cell:nth-child(6):hover .stat-card-icon {
    filter: brightness(0) invert(1);
}

.stat-card:hover::before {
    transform: translateY(0);
}

/* Lift content above the wash and slide it up slightly */
.stat-card > * {
    position: relative;
    z-index: 1;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.stat-card:hover > * {
    transform: translateY(-6px);
}

/* Icon pulses larger and inverts to black on the accent wash */
.stat-card-icon {
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), filter 0.4s ease;
}

.stat-card:hover .stat-card-icon {
    transform: translateY(-6px) scale(1.1);
}

/* Number gets a subtle scale punch */
.stat-number-wrap {
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    transform-origin: center center;
}

.stat-card:hover .stat-number-wrap {
    transform: translateY(-6px) scale(1.05);
}

/* Label brightens — accent bg makes the grey look washed out, so darken */
.stat-card:hover .stat-label {
    color: var(--color-black) !important;
}

.stat-card-icon {
    width: 44px;
    height: 44px;
    object-fit: contain;
}

.stat-label {
    font-family: "Inter", sans-serif;
    font-weight: 400;
    font-size: 10px;
    line-height: 16px;
    letter-spacing: 1.32px;
    text-transform: uppercase;
    color: #888888;
}
  
  /* ============================================================
        SERVICE LIST — cards mode
        ============================================================ */
  
    #angebot .quote-overline-wrap{
        color: #fff !important;
    }

  .service-list-media {
    display: block;
    position: relative;
    overflow: hidden;
    aspect-ratio: 21 / 9;
    max-height: 600px;
    cursor: pointer;
  }
  
  .service-list-media-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
  }
  .service-list-media-bg img,
  .service-list-media-bg video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: filter 0.4s ease, transform 0.4s ease;
  }
  
  .service-list-gradient {
    position: absolute;
    inset: 0;
    z-index: 2;
    background: linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0) 0%,
      rgba(0, 0, 0, 0) 50%,
      rgba(0, 0, 0, 0.25) 100%
    );
    pointer-events: none;
  }
  
  .service-list-overlay-content {
    bottom: 0;
    left: 0;
    z-index: 3;
  }
  
  .service-list-media:hover .service-list-media-bg img,
  .service-list-media:hover .service-list-media-bg video {
    filter: brightness(0.6) blur(4px);
    transform: scale(1.1);
  }
  
  .service-list-feature-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    background-color: var(--color-light-gray);
    border: 1px solid var(--color-light-gray);
  }
  
  .service-list-feature-cell {
    background-color: var(--color-white);
    padding: 1.25rem 1.5rem;
    display: flex;
    align-items: baseline;
    gap: 0.875rem;
    transition: background-color 0.3s ease;
  }
  .service-list-feature-cell:hover {
    background-color: rgba(0, 0, 0, 0.02);
  }
  
  .service-list-feature-num {
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 1.5px;
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
  }
  .service-list-feature-text {
    font-size: 0.875rem;
    font-weight: 500;
  }
  
  /* ============================================================
     SERVICE LIST — SLIDER MODE
     ============================================================ */
  
  .service-list-slider-section {
    position: relative;
  }
  
  .service-list-splide {
    position: relative;
  }
  
  .service-list-slide-num {
    top: 1.5rem;
    left: 1.5rem;
    z-index: 3;
    letter-spacing: 0.08em;
  }
  
  .service-list-arrows {
    pointer-events: none;
  }
  
  .service-list-arrow {
    position: absolute;
    top: 35%;
    transform: translateY(-50%);
    width: 56px;
    height: 56px;
    background: transparent;
    border: none;
    color: #fff;
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.3s ease;
    pointer-events: auto;
    cursor: pointer;
    z-index: 5;
  }
  
  .service-list-arrow svg {
    width: 32px;
    height: 32px;
    fill: currentColor;
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.4));
  }
  
  .service-list-arrow-prev {
    left: 2rem;
  }
  .service-list-arrow-next {
    right: 2rem;
  }
  
  .service-list-splide:hover .service-list-arrow,
  .service-list-arrow:focus-visible {
    opacity: 1;
  }
  
  .service-list-arrow:hover {
    transform: translateY(-50%) scale(1.15);
  }
  
  .service-list-arrow:disabled {
    opacity: 0 !important;
    cursor: default;
  }
  
  .service-list-pagination {
    position: static;
    margin-top: 2rem;
    display: flex;
    justify-content: center;
    gap: 0.625rem;
    padding: 0;
  }
  
  .service-list-page {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: none;
    background: rgba(0, 0, 0, 0.2);
    padding: 0;
    cursor: pointer;
    transition: background 0.3s ease, transform 0.3s ease, width 0.3s ease;
  }
  
  .background-black .service-list-page {
    background: rgba(255, 255, 255, 0.25);
  }
  
  .service-list-page:hover {
    background: rgba(0, 0, 0, 0.5);
  }
  
  .background-black .service-list-page:hover {
    background: rgba(255, 255, 255, 0.6);
  }
  
  .service-list-page.is-active {
    width: 24px;
    border-radius: 4px;
    background: linear-gradient(90deg,rgb(237, 241, 245) 1%, rgba(218, 232, 249, 1) 25%, rgba(219, 235, 246, 1) 75%, rgb(227, 246, 249) 100%) !important;
  }
  
  .service-list-slide .service-list-overlay-content {
    z-index: 2;
  }
  .service-list-slide .service-list-gradient {
    z-index: 1;
  }
  
  .background-black .service-list-feature-grid {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.1);
  }
  .background-black .service-list-feature-cell {
    background-color: var(--color-black);
  }
  .background-black .service-list-feature-cell:hover {
    background-color: rgba(255, 255, 255, 0.03);
  }

  /* ── Service List — Row Mode ── */
.service-list-row-section {
    background-color: #1A1C24;
}

.service-row-cards {
    display: flex;
    gap: 50px;
}

.service-row-card {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.service-row-card-media {
    width: 100%;
    height: 300px;
    overflow: hidden;
}

.service-row-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.service-row-card-content {
    background-color: #23252E;
    flex: 1 1 auto;
}

.quote-overline-wrap{
    color: #000 !important;
}

.service-row-card-media video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.service-row-card-content .intro-body-text {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    line-clamp: 4;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Responsive — stack vertically below lg */
@media (max-width: 991.98px) {
    .service-row-cards {
        flex-direction: column;
        gap: 30px;
    }
    .service-row-card-media {
        height: 200px;
    }
}
  
  /* ============================================================
        SERVICE SOLUTIONS
        ============================================================ */
  
  .solution-item-full {
    min-height: 280px;
    max-height: 450px;
    overflow: hidden;
  }
  .solution-item-features {
    min-height: 250px;
    max-height: 450px;
    overflow: hidden;
  }
  .solution-half-card {
    min-height: 280px;
    max-height: 450px;
  }
  .solution-media {
    min-height: 250px;
    max-height: 450px;
  }
  .solution-half-icon {
    width: 60px;
    height: 60px;
    object-fit: contain;
  }
  .solution-half-card .mt-auto {
    margin-top: auto !important;
    padding-top: 3rem;
  }
  .services-body-text p {
    margin-bottom: 0px !important;
  }

  /* ---- mediaOnly with parallax ---- */
.solution-item-media-only {
    width: 100%;
    height: 300px;
    overflow: hidden;
    position: relative;
}

.solution-item-media-only-inner {
    width: 100%;
    height: 140%;
    position: absolute;
    top: -15%;
    left: 0;
    will-change: transform;
}

.solution-item-media-only-inner img,
.solution-item-media-only-inner video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

@media (max-width: 991.98px) {
    .solution-item-media-only {
        height: 25vh;
        max-height: 320px;
        min-height: 180px;
    }
}

@media (max-width: 575.98px) {
    .solution-item-media-only {
        height: 22vh;
        max-height: 240px;
        min-height: 160px;
    }
}

/* Disable parallax on reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
    .solution-item-media-only-inner {
        transform: none !important;
    }
}
  
  /* ============================================================
        SERVICE LIST — Tabs mode
        ============================================================ */
  
  .service-tab-item {
    transition: opacity 0.3s ease;
  }
  .service-tab-title {
    color: var(--color-light-gray);
    transition: color 0.3s ease;
  }
  .service-tab-active .service-tab-title {
    color: var(--color-black);
  }
  .service-tab-item:hover .service-tab-title {
    color: var(--color-dark-gray);
  }
  
  .background-black .service-tab-title {
    color: var(--color-dark-gray);
  }
  .background-black .service-tab-active .service-tab-title {
    color: var(--color-white);
  }
  .background-black .service-tab-item:hover .service-tab-title {
    color: var(--color-gray);
  }
  
  .service-tab-panel {
    display: none;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.3s ease, transform 0.3s ease;
  }
  .service-tab-panel-active {
    display: block;
    opacity: 1;
    transform: translateY(0);
  }
  
  .service-tab-tag {
    background-color: var(--color-red);
    color: var(--color-white);
    border: none;
    font-size: 0.8125rem;
  }
  
  .service-tab-link {
    transition: opacity 0.3s ease;
  }
  .service-tab-link:hover {
    opacity: 0.6;
  }
  
/* ── Product List — List Mode ── */
.product-list-list-stack {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.product-list-list-title {
    font-family: "Inter", sans-serif;
    font-weight: 500;
    font-size: 28px;
    line-height: 1.14;
    letter-spacing: -0.03em;
}

.product-list-list-desc {
    font-family: "Inter", sans-serif;
    font-weight: 400;
    font-size: 24px;
    line-height: 1.14;
    letter-spacing: -0.03em;
    color: #A2A2AE;
}

/* Allow the button label to wrap to 2 lines in the narrow right column */
.product-list-list-btn {
    text-align: left;
    line-height: 1.2;
}

.product-list-list-btn-label {
    white-space: normal;
    word-break: keep-all;
}

.btn-intro,
.btn-right-arrow{
    transition: all 0.3s ease;
}

.product-list-list-item {
    position: relative;
    overflow: hidden;
    transition: transform 0.3s ease;
}

.product-list-list-item::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,
        rgb(237, 241, 245) 1%,
        rgba(218, 232, 249, 1) 25%,
        rgba(219, 235, 246, 1) 75%,
        rgb(227, 246, 249) 100%);
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: 0;
    pointer-events: none;
}

.product-list-list-item:hover::before {
    opacity: 1;
}

/* Make sure card content sits above the pseudo-element */
.product-list-list-item > * {
    position: relative;
    z-index: 1;
}

.product-list-list-item:hover .btn-intro{
    background-color: #b183ff !important;
    border: 1px solid #b183ff !important;
    color: white !important;
}

.product-list-list-item:hover .btn-right-arrow{
    filter: invert(1);
}

/* Mobile — button goes back to its single-line natural width */
@media (max-width: 991.98px) {
    .product-list-list-btn-label {
        white-space: nowrap;
    }
}

/* Mobile — stack everything with breathing room between */
@media (max-width: 991.98px) {
    .product-list-list-item {
        padding: 2rem !important;
    }
    .product-list-list-title {
        font-size: 22px;
    }
    .product-list-list-desc {
        font-size: 18px;
    }
}

  /* ============================================================
        PRODUCT LIST — simple mode (cinematic strips)
        ============================================================ */
  
  .product-strip {
    display: block;
    position: relative;
    overflow: hidden;
    aspect-ratio: 21 / 9;
    max-height: 600px;
    cursor: pointer;
    color: inherit;
  }
  
  .product-strip-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
  }
  .product-strip-bg img,
  .product-strip-bg video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: filter 0.4s ease, transform 0.4s ease;
  }
  
  .product-strip-gradient {
    position: absolute;
    inset: 0;
    z-index: 2;
    background: linear-gradient(
      90deg,
      rgba(0, 0, 0, 0.55) 0%,
      rgba(0, 0, 0, 0.3) 40%,
      rgba(0, 0, 0, 0) 70%
    );
    pointer-events: none;
  }
  
  .product-strip-content {
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    z-index: 2;
    max-width: 50%;
  }
  
  .product-strip:hover .product-strip-bg img,
  .product-strip:hover .product-strip-bg video {
    filter: brightness(0.6) blur(4px);
    transform: scale(1.05);
  }
  
  .product-strip-num {
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 2px;
    font-variant-numeric: tabular-nums;
    opacity: 0.7;
  }
  .product-strip-title {
    font-size: 2rem;
    font-weight: 500;
    letter-spacing: -0.02em;
    line-height: 1.1;
  }
  .product-strip-desc {
    font-size: 0.9375rem;
    line-height: 1.6;
    opacity: 0.9;
  }
  
  .product-list-default .product-row {
    overflow: hidden;
    border-radius: 0;
  }
  
  /* ============================================================
     PRODUCT LIST — SLIDER MODE
     ============================================================ */
  
  .product-list-slider-section {
    position: relative;
  }
  
  .product-list-splide {
    position: relative;
  }
  
  .product-row-num {
    letter-spacing: 0.08em;
  }
  
  .product-list-arrows {
    pointer-events: none;
  }
  
  .product-list-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 56px;
    height: 56px;
    background: transparent;
    border: none;
    color: #fff;
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.3s ease;
    pointer-events: auto;
    cursor: pointer;
    z-index: 5;
  }
  
  .product-list-arrow svg {
    width: 32px;
    height: 32px;
    fill: currentColor;
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.4));
  }
  
  .product-list-arrow-prev {
    left: 2rem;
  }
  .product-list-arrow-next {
    left: calc(58.33% - 4.5rem);
    right: auto;
  }
  
  @media (max-width: 991.98px) {
    .product-list-arrow-prev {
      left: 1rem;
    }
    .product-list-arrow-next {
      left: auto;
      right: 1rem;
    }
  }
  
  .product-list-splide:hover .product-list-arrow,
  .product-list-arrow:focus-visible {
    opacity: 1;
  }
  
  .product-list-arrow:hover {
    transform: translateY(-50%) scale(1.15);
  }
  
  .product-list-arrow:disabled {
    opacity: 0 !important;
    cursor: default;
  }
  
  .product-list-pagination {
    position: static;
    margin-top: 2rem;
    display: flex;
    justify-content: center;
    gap: 0.625rem;
    padding: 0;
  }
  
  .product-list-page {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: none;
    background: rgba(0, 0, 0, 0.2);
    padding: 0;
    cursor: pointer;
    transition: background 0.3s ease, transform 0.3s ease, width 0.3s ease;
  }
  
  .background-black .product-list-page {
    background: rgba(255, 255, 255, 0.25);
  }
  
  .product-list-page:hover {
    background: rgba(0, 0, 0, 0.5);
  }
  
  .background-black .product-list-page:hover {
    background: rgba(255, 255, 255, 0.6);
  }
  
  .product-list-page.is-active {
    width: 24px;
    border-radius: 4px;
    background: linear-gradient(90deg,rgb(237, 241, 245) 1%, rgba(218, 232, 249, 1) 25%, rgba(219, 235, 246, 1) 75%, rgb(227, 246, 249) 100%) !important;
  }
  
  .product-row,
  .product-row-media img,
  .product-row-media video {
    transition: filter 0.4s ease, transform 0.4s ease;
  }
  
  .product-row:hover .product-row-media img,
  .product-row:hover .product-row-media video {
    filter: brightness(0.6) blur(4px);
    transform: scale(1.05);
  }
  
  .product-row-media {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 320px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .product-row-media-asset {
    width: 100%;
    height: 100%;
    max-height: 400px;
    object-fit: cover;
    display: block;
  }
  
  .product-row-info {
    min-height: 320px;
  }
  
  .product-row-title {
    font-size: 1.5rem;
    font-weight: 500;
    letter-spacing: -0.01em;
    line-height: 1.2;
  }
  
  .product-row-desc {
    font-size: 1.125rem;
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: -0.005em;
  }
  
  /* ============================================================
        PRODUCTS SHOWCASE
        ============================================================ */
  
  .product-showcase-hero {
    min-height: 400px;
    max-height: 700px;
  }
  .product-showcase-hero img,
  .product-showcase-hero video {
    max-height: 700px;
  }
  .product-showcase-gradient {
    background: rgba(0, 0, 0, 0.4);
  }
  .product-showcase-overlay {
    pointer-events: none;
  }
  .product-showcase-icon {
    filter: brightness(0) invert(1);
  }
  .product-card-icon-lg {
    width: 80px;
    height: 80px;
    object-fit: contain;
  }
  .product-media-card {
    min-height: 300px;
  }
  .product-showcase-hero .product-showcase-gradient,
  .product-showcase-hero .product-showcase-overlay {
    height: 100%;
  }
  
  /* ============================================================
        CTA BANNER
        ============================================================ */
  
  .cta-banner-section {
    position: relative;
  }
  .cta-banner-image-mode {
    min-height: 70vh;
    display: flex;
    align-items: center;
  }
  .cta-banner-overlay {
    background-color: #00000045;
    pointer-events: none;
  }
  
  /* ============================================================
        REFERENCE CARDS
        ============================================================ */
  
  .reference-card {
    background-color: rgba(255, 255, 255, 0.05);
    transition: background-color 0.3s ease;
  }
  .reference-card:hover {
    background-color: rgba(255, 255, 255, 0.08);
  }
  .reference-grid-card {
    transition: transform 0.3s ease;
  }
  .reference-grid-card:hover {
    transform: translateY(-4px);
  }
  
  /* ============================================================
        PROJECT SLIDER
        ============================================================ */
  
  .project-slide-media {
    height: 400px;
  }
  
  .project-slide-logo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 50%;
    max-height: 50%;
    width: auto;
    height: auto;
    object-fit: contain;
    z-index: 2;
  }
  
  .project-slide-media img:not(.project-slide-logo) {
    transition: filter 0.4s ease, transform 0.4s ease;
  }
  .project-slide:hover .project-slide-media img:not(.project-slide-logo) {
    filter: brightness(0.6) blur(4px);
    transform: scale(1.1);
  }
  
  /* ============================================================
        PROJECT FILTER
        ============================================================ */
  
  .project-filter-media {
    height: 350px;
  }
  .project-filter-card {
    transition: opacity 0.3s ease;
  }
  .project-filter-card:hover {
    opacity: 0.85;
  }
  .project-filter-item {
    transition: opacity 0.3s ease;
  }
  
  .project-filter-bar-new {
    position: relative;
    gap: 1rem;
  }
  
  .filter-count-text {
    font-size: 1rem;
    line-height: 1.5;
  }
  .filter-count-number {
    font-weight: 500;
    font-variant-numeric: tabular-nums;
  }
  
  .filter-btn-prominent {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background-color: var(--color-black);
    color: var(--color-white);
    padding: 0.625rem 1.25rem;
    border-radius: 50px;
    font-size: 0.875rem;
    font-weight: 500;
    border: none;
    cursor: pointer;
    transition: opacity 0.2s ease, transform 0.2s ease;
    line-height: 1;
    white-space: nowrap;
    position: relative;
  }
  .filter-btn-prominent:hover {
    opacity: 0.85;
  }
  .filter-btn-prominent[aria-expanded="true"] {
    transform: scale(0.98);
  }
  
  .filter-btn-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
  }
  
  .filter-btn-active-label {
    display: none;
    background: linear-gradient(90deg,rgb(237, 241, 245) 1%, rgba(218, 232, 249, 1) 25%, rgba(219, 235, 246, 1) 75%, rgb(227, 246, 249) 100%) !important;
    color: var(--color-black);
    font-size: 0.6875rem;
    font-weight: 500;
    padding: 3px 9px;
    border-radius: 50px;
    margin-left: 4px;
    line-height: 1.2;
    letter-spacing: 0.5px;
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .filter-btn-active-label-visible {
    display: inline-block;
  }
  
  .filter-panel {
    display: none;
    position: absolute;
    top: calc(100% + 0.75rem);
    right: 0;
    z-index: 1050;
    background-color: var(--color-white);
    border: 1px solid var(--color-light-gray);
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04);
    min-width: 280px;
    max-width: 360px;
    overflow: hidden;
    animation: filter-panel-slide 0.2s ease;
  }
  .filter-panel-open {
    display: block;
  }
  
  @keyframes filter-panel-slide {
    from {
      opacity: 0;
      transform: translateY(-8px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  .filter-panel-header {
    display: none;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--color-light-gray);
  }
  .filter-panel-title {
    font-size: 1rem;
  }
  .filter-panel-close {
    background: none;
    border: none;
    padding: 0.5rem;
    cursor: pointer;
    color: var(--color-black);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.2s ease;
  }
  .filter-panel-close:hover {
    opacity: 0.6;
  }
  .filter-panel-close svg {
    width: 20px;
    height: 20px;
  }
  
  .filter-panel-body {
    padding: 0.5rem;
    max-height: 60vh;
    overflow-y: auto;
  }
  
  .filter-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background: none;
    border: none;
    padding: 0.875rem 1rem;
    cursor: pointer;
    color: var(--color-black);
    text-align: left;
    border-radius: 8px;
    transition: background-color 0.2s ease;
    font-size: 0.9375rem;
  }
  .filter-option:hover {
    background-color: rgba(0, 0, 0, 0.04);
  }
  .filter-option-active {
    background-color: var(--color-black);
    color: var(--color-white);
  }
  .filter-option-active:hover {
    background-color: var(--color-black);
    opacity: 0.9;
  }
  
  .filter-option-name {
    font-weight: 500;
  }
  .filter-option-count {
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
    opacity: 0.6;
    flex-shrink: 0;
    margin-left: 0.75rem;
  }
  
  .filter-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1040;
    animation: filter-backdrop-fade 0.2s ease;
  }
  .filter-backdrop-open {
    display: block;
  }
  
  @keyframes filter-backdrop-fade {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
  
  body.filter-panel-active {
    overflow: hidden;
  }

  /* ── News + References Block ── */
.news-projects-section {
    background-color: #fff;
}

.news-projects-card {
  background: linear-gradient(90deg,rgb(228, 231, 245) 1%, rgba(218, 232, 249, 1) 25%, rgba(219, 235, 246, 1) 75%, rgb(230, 242, 250) 100%);
  transition: transform 0.3s ease;
}

.news-projects-card:hover {
    transform: translateY(-4px);
}

/* Image-background cards keep an overlay for legibility */
.news-projects-card-featured,
.news-projects-card-project {
    min-height: 560px;
    background-color: transparent;  /* let the inline background-image show through */
    background-size: cover;
}

.news-projects-card-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0.75) 100%);
    z-index: 1;
}

.news-projects-card-content {
    z-index: 2;
}

.news-projects-card-featured .news-projects-card-content,
.news-projects-card-project .news-projects-card-content {
    min-height: 560px;
}

/* Logo card matches the row height */
.news-projects-card-logo {
    min-height: 560px;
    background-color: white !important;
}

.news-projects-logo {
    max-width: 90%;
    max-height: 145px;
    height: auto;
    width: auto;
    object-fit: contain;
}

.news-projects-day {
    font-size: 2.5rem;
    font-weight: 400;
    line-height: 1;
}

.news-projects-monthyear {
    font-size: 0.8125rem;
    font-weight: 300;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.news-projects-title {
    font-weight: 300;
}

/* Responsive */
@media (max-width: 991.98px) {
    .news-projects-card-featured,
    .news-projects-card-project,
    .news-projects-card-logo {
        min-height: 360px;
    }
    .news-projects-card-featured .news-projects-card-content,
    .news-projects-card-project .news-projects-card-content {
        min-height: 360px;
    }
    .news-projects-day {
        font-size: 2rem;
    }
}

@media (max-width: 575.98px) {
    .news-projects-day {
        font-size: 1.75rem;
    }
    .news-projects-monthyear {
        font-size: 0.75rem;
    }
}
  
  /* ============================================================
        PARTNER LOGOS
        ============================================================ */
  
  .partner-logo-img {
    max-width: 160px;
    height: 80px;
    object-fit: contain;
    opacity: 0.7;
    transition: filter 0.3s ease, opacity 0.3s ease;
  }
  .partner-logo-img:hover {
    opacity: 1;
  }
  .partner-logo-invert {
    filter: invert(1) brightness(2);
  }
  
  /* ============================================================
        FOOTER
        ============================================================ */
  
  .footer-logo {
    transform: scale(1.8);
    transform-origin: left top;
  }
  .footer-company-info p {
    margin-bottom: 0;
    font-size: inherit;
    color: inherit;
  }
  .footer-link {
    transition: color 0.2s ease;
  }
  .footer-link:hover {
    color: var(--color-white) !important;
  }
  .small p {
    font-size: 0.875em;
  }
  
  /* ============================================================
        FORMIE OVERRIDES
        ============================================================ */
  
  .form-banner-card .fui-form {
    font-family: inherit !important;
  }
  .form-banner-card .fui-row {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0 2rem !important;
  }
  .form-banner-card .fui-page-row {
    margin-bottom: 0 !important;
  }
  .form-banner-card .fui-field.fui-page-field {
    flex: 1 1 calc(33.333% - 2rem) !important;
    min-width: 200px !important;
    padding: 0 !important;
    margin-bottom: 1.5rem !important;
  }
  
  .form-banner-card .fui-label {
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica,
      Arial, sans-serif;
    font-size: 1rem !important;
    font-weight: 400 !important;
    color: var(--color-black) !important;
    margin-bottom: 0.75rem !important;
    padding: 0 !important;
  }
  
  .form-banner-card .fui-required {
    color: var(--color-black) !important;
  }
  .form-banner-card .fui-instructions {
    display: none !important;
  }
  .form-banner-card .fui-legend {
    display: none !important;
  }
  
  .form-banner-card .fui-input {
    background: transparent !important;
    border: none !important;
    border-bottom: 1px solid var(--color-black) !important;
    border-radius: 0 !important;
    padding: 0.5rem 0 !important;
    font-size: 0.875rem !important;
    font-family: inherit !important;
    color: var(--color-black) !important;
    width: 100% !important;
    outline: none !important;
    box-shadow: none !important;
    transition: border-color 0.3s ease !important;
  }
  
  .form-banner-card .fui-input:focus {
    border-bottom-color: var(--color-black) !important;
    box-shadow: none !important;
  }
  .form-banner-card .fui-input::placeholder {
    color: rgba(0, 0, 0, 0.4) !important;
  }
  .form-banner-card textarea.fui-input {
    min-height: auto !important;
    height: auto !important;
    resize: none !important;
  }
  .form-banner-card .fui-field-rows .fui-row {
    gap: 0 2rem !important;
  }
  .form-banner-card .fui-type-name-first,
  .form-banner-card .fui-type-name-last {
    flex: 1 1 calc(50% - 1rem) !important;
    padding: 0 !important;
  }
  .form-banner-card .fui-name-prefix,
  .form-banner-card .fui-name-middle-name {
    display: none !important;
  }
  .form-banner-card .fui-fieldset {
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  .form-banner-card .fui-input-wrapper {
    margin: 0 !important;
  }
  .form-banner-card .fui-field-container {
    padding: 0 !important;
  }
  .form-banner-card .fui-btn-wrapper {
    display: flex !important;
    justify-content: flex-end !important;
    margin-top: 1rem !important;
  }
  
  .form-banner-card .fui-btn.fui-submit {
    background-color: var(--color-black) !important;
    color: var(--color-white) !important;
    border: none !important;
    border-radius: 50px !important;
    padding: 0.625rem 1.5rem !important;
    font-size: 1rem !important;
    font-weight: 500 !important;
    font-family: inherit !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 2rem !important;
    transition: opacity 0.3s ease !important;
  }
  .form-banner-card .fui-btn.fui-submit:hover {
    opacity: 0.85 !important;
  }
  
  .form-banner-card .fui-btn.fui-submit::after {
    content: "" !important;
    display: inline-block !important;
    width: 7.5px !important;
    height: 15px !important;
    background-image: url("data:image/svg+xml,%3Csvg width='10' height='17' viewBox='0 0 10 17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.707031 0.707031L8.20703 8.20703L0.707031 15.707' stroke='%23fff' stroke-width='2'/%3E%3C/svg%3E%0A") !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    margin-left: 3rem !important;
  }
  
  .form-banner-card .fui-error .fui-input {
    border-bottom-color: var(--color-red) !important;
  }
  .form-banner-card .fui-error-message {
    color: var(--color-red) !important;
    font-size: 0.75rem !important;
    margin-top: 0.25rem !important;
  }
  .form-banner-card .fui-alert-success {
    color: var(--color-black) !important;
    font-weight: 500 !important;
    padding: 1rem 0 !important;
  }
  .form-banner-card .fui-alert-error {
    color: var(--color-red) !important;
    font-weight: 500 !important;
    padding: 1rem 0 !important;
  }
  
  /* ============================================================
        PROJECT DETAIL
        ============================================================ */
  
  .project-detail-tag {
    border: 1px solid var(--color-silver);
    color: var(--color-dark-gray);
    background-color: transparent;
    font-size: 0.8125rem;
    transition: background-color 0.3s ease, color 0.3s ease;
  }
  .project-detail-tag:hover {
    background-color: var(--color-black);
    color: var(--color-white);
    border-color: var(--color-black);
  }
  
  .project-screenshot-frame {
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.04);
  }
  .project-screenshot-scroll {
    max-height: 600px;
    overflow-y: auto;
    overflow-x: hidden;
  }
  
  .project-screenshot-scroll::-webkit-scrollbar {
    width: 6px;
  }
  .project-screenshot-scroll::-webkit-scrollbar-track {
    background: var(--color-light-gray);
  }
  .project-screenshot-scroll::-webkit-scrollbar-thumb {
    background: var(--color-silver);
    border-radius: 3px;
  }
  .project-screenshot-scroll::-webkit-scrollbar-thumb:hover {
    background: var(--color-gray);
  }
  
  .project-screenshot-scroll {
    scrollbar-width: thin;
    scrollbar-color: var(--color-silver) var(--color-light-gray);
  }
  
  /* ============================================================
        TEAM SECTION
        ============================================================ */
  
  .team-member-photo {
    height: 400px;
  }
  .team-member-img {
    height: 100%;
  }
  .team-member-card {
    transition: transform 0.3s ease;
  }
  .team-member-card:hover {
    transform: translateY(-4px);
  }
  .team-member-card:hover .team-member-img {
    transform: scale(1.03);
  }
  .team-member-photo .team-member-img {
    transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }
  
  /* ============================================================
     TEAM SLIDER v5 — clean rebuild, no duplicates
     ============================================================ */
  
  .team-slider-section {
    position: relative;
    overflow: hidden;
  }
  
  .team-info-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    line-height: 1.2;
    margin-bottom: 0.5rem;
    transition: opacity 0.2s ease;
  }
  
  .team-info-link:last-child {
    margin-bottom: 0;
  }
  
  .team-info-link:hover {
    opacity: 0.6;
  }
  
  .team-info-link svg {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    display: block;
  }
  
  .team-info-email svg {
    stroke: currentColor;
  }
  
  .team-info-linkedin svg {
    fill: currentColor;
  }
  
  .team-intro {
    max-width: 600px;
    margin-bottom: 6rem;
    position: relative;
    z-index: 1;
  }
  
  .team-intro-overline-wrap {
    display: flex;
    align-items: center;
    gap: 0.75rem;
  }
  
  .team-intro-overline-line {
    display: inline-block;
    width: 60px;
    height: 2px;
    background-color: var(--color-black);
  }
  
  .team-slider-headline {
    font-size: clamp(2rem, 3.5vw, 3rem);
    font-weight: 500;
    letter-spacing: -0.02em;
    line-height: 1.05;
  }
  
  .team-slider-intro-body {
    font-size: 0.9375rem;
    line-height: 1.6;
  }
  
  .team-slider-intro-body p:last-child {
    margin-bottom: 0;
  }
  
  .team-stage {
    position: relative;
    height: 560px;
    margin-top: 1rem;
    z-index: 2;
  }
  
  .team-stage-overlay {
    position: absolute;
    bottom: -90px;
    left: 0;
    width: 100%;
    height: 65%;
    z-index: 5;
    pointer-events: none;
  }
  
  .team-stage-overlay svg {
    width: 100%;
    height: 100%;
    display: block;
  }
  
  .team-photo {
    position: absolute;
    top: 0;
    left: 50%;
    width: 340px;
    height: 100%;
    margin-left: -170px;
    z-index: 2;
    opacity: 0;
    transform: translate3d(800px, 0, 0) rotate(20deg) scale(0.4);
    transform-origin: center bottom;
    will-change: transform, opacity;
  }
  
  .team-photo-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
    background-color: #f5f5f5;
    transition: opacity 0.4s ease;
  }
  
  .team-photo-img-hover {
    opacity: 0;
  }
  
  .team-photo[data-slot="center"] {
    cursor: pointer;
  }
  
  .team-photo[data-slot="center"]:hover .team-photo-img-default {
    opacity: 0;
  }
  
  .team-photo[data-slot="center"]:hover .team-photo-img-hover {
    opacity: 1;
  }
  
  .team-photo-sticker {
    position: absolute;
    top: 5%;
    right: -12%;
    width: 110px;
    height: 110px;
    z-index: 15;
    pointer-events: none;
    opacity: 0;
    transform: scale(0) rotate(-12deg);
    transform-origin: center center;
    will-change: transform, opacity;
  }
  
  .team-photo-sticker-bg {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,rgba(246, 233, 241, 1) 1%, rgba(218, 232, 249, 1) 25%, rgba(219, 235, 246, 1) 75%, rgba(227, 249, 234, 1) 100%);
  }
  
  .team-photo-sticker-icon {
    position: absolute;
    inset: 0;
    width: 70%;
    height: 70%;
    margin: 15%;
  }
  
  .team-bottom-row {
    position: relative;
    z-index: 20;
    margin-top: -180px;
    display: flex;
    align-items: center;
    gap: 2rem;
  }
  
  .team-arrow {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background-color: var(--color-white);
    border: 1px solid var(--color-light-gray);
    color: var(--color-black);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.2s ease,
      border-color 0.3s ease;
  }
  
  .team-arrow svg {
    width: 22px;
    height: 22px;
  }
  
  .team-arrow:hover {
    background-color: var(--color-black);
    color: var(--color-white);
    border-color: var(--color-black);
  }
  
  .team-arrow:active {
    transform: scale(0.94);
  }
  
  .team-info-card-wrap {
    flex: 1 1 auto;
    position: relative;
    min-height: 175px;
    max-width: 450px;
    margin: 0 auto;
  }
  
  .team-info-card {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    pointer-events: none;
    will-change: opacity;
  }
  
  .team-info-card[data-team-info-active] {
    opacity: 1;
    pointer-events: auto;
  }
  
  .team-info-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: var(--color-black);
    z-index: 0;
    transform: rotate(-5deg);
  }
  
  .team-info-card-front {
    position: relative;
    z-index: 1;
    background: linear-gradient(90deg,rgba(246, 233, 241, 1) 1%, rgba(218, 232, 249, 1) 25%, rgba(219, 235, 246, 1) 75%, rgba(227, 249, 234, 1) 100%);
    padding: 2.5rem 3rem;
    width: 100%;
    min-height: 175px;
    display: flex;
    align-items: flex-start;
    gap: 3rem;
  }
  
  .team-info-card-main {
    flex: 1 1 auto;
    min-width: 0;
  }
  
  .team-info-card-contact {
    flex: 0 0 200px;
    padding-top: 0.25rem;
  }
  
  .team-info-name {
    font-size: 1.625rem;
    font-weight: 500;
    letter-spacing: -0.01em;
    line-height: 1.1;
  }
  
  .team-info-bio {
    font-size: 0.875rem;
    line-height: 1.5;
    font-style: italic;
    max-width: 90%;
  }
  
  .team-info-bio p:last-child {
    margin-bottom: 0;
  }
  
  .team-info-role {
    font-size: 0.9375rem;
    font-weight: 500;
  }
  
  @media (prefers-reduced-motion: reduce) {
    .team-photo,
    .team-photo-img,
    .team-photo-sticker,
    .team-info-card {
      transition: none !important;
      will-change: auto;
    }
  }
  
  /* ============================================================
     ABOUT HERO v2 — full-height black hero with rotating icon
     ============================================================ */
  
  .about-hero-section {
    position: relative;
    background-color: #e3e2e6;
  }
  
  .about-hero-band {
    position: relative;
    width: 100%;
    height: 80vh;
    min-height: 600px;
    max-height: 800px;
    background-color: var(--color-black);
    overflow: hidden;
  }
  
  .about-hero-stripes {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background-image: repeating-linear-gradient(
      110deg,
      rgba(186, 255, 122, 0.04) 0px,
      rgba(186, 255, 122, 0.04) 2px,
      transparent 2px,
      transparent 110px,
      rgba(186, 255, 122, 0.06) 110px,
      rgba(186, 255, 122, 0.06) 4px,
      transparent 114px,
      transparent 220px
    );
  }
  
  .about-hero-band::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background-image: repeating-linear-gradient(
      110deg,
      rgba(0, 0, 0, 0.4) 0px,
      rgba(0, 0, 0, 0.4) 80px,
      transparent 80px,
      transparent 200px
    );
    mix-blend-mode: overlay;
  }
  
  .about-hero-icon-wrap {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 75%;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
  }
  
  .about-hero-icon-rotator {
    position: relative;
    width: 320px;
    height: 320px;
    will-change: transform;
  }
  
  .about-hero-icon {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    will-change: opacity, transform;
  }
  
  .about-hero-icon:first-child {
    opacity: 1;
  }
  
  .about-hero-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
  }
  
  .about-hero-vcut {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 240px;
    z-index: 2;
    pointer-events: none;
  }
  
  .about-hero-vcut svg {
    width: 100%;
    height: 100%;
    display: block;
  }
  
  .about-hero-slider-area {
    position: relative;
    z-index: 2;
    margin-top: -200px;
    padding: 0 4rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
  }
  
  .about-hero-arrow {
    flex-shrink: 0;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background-color: var(--color-white);
    border: none;
    color: var(--color-black);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.2s ease;
  }
  
  .about-hero-arrow svg {
    width: 24px;
    height: 24px;
  }
  
  .about-hero-arrow:hover {
    background-color: var(--color-black);
    color: var(--color-white);
  }
  
  .about-hero-arrow:active {
    transform: scale(0.94);
  }
  
  .about-hero-card-wrap {
    position: relative;
    flex: 0 0 auto;
    width: 540px;
    min-height: 280px;
  }
  
  .about-hero-card-back {
    position: absolute;
    top: 0px;
    left: 0px;
    width: calc(100% + 0px);
    height: calc(100% + 0px);
    background: linear-gradient(90deg,rgba(246, 233, 241, 1) 1%, rgba(218, 232, 249, 1) 25%, rgba(219, 235, 246, 1) 75%, rgba(227, 249, 234, 1) 100%);
    z-index: 0;
    transform: rotate(-8deg);
    transform-origin: center center;
  }
  
  .about-hero-card-front {
    position: relative;
    z-index: 1;
    background-color: var(--color-white);
    min-height: 280px;
    overflow: hidden;
  }
  
  .about-hero-card-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 2.5rem 3rem;
    opacity: 0;
    transform: translate3d(100%, 0, 0);
    will-change: transform, opacity;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  
  .about-hero-card-slide[data-about-slide-active] {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
  
  .about-hero-card-headline {
    font-size: clamp(1.75rem, 2.5vw, 2.25rem);
    font-weight: 500;
    letter-spacing: -0.01em;
    line-height: 1.05;
    margin-bottom: 0;
    align-self: flex-start;
  }
  
  .about-hero-card-body {
    font-size: 0.9375rem;
    font-style: italic;
    line-height: 1.4;
    text-align: right;
    align-self: flex-end;
    max-width: 80%;
  }
  
  .about-hero-card-body p:last-child {
    margin-bottom: 0;
  }
  
  .about-hero-footer-body {
    margin-top: 6rem;
  }
  
  .about-hero-footer-body p:last-child {
    margin-bottom: 0;
  }
  
  /* ============================================================
     KERNKOMPETENZEN — scattered stat cards + competency tabs (v3)
     ============================================================ */
  
  .kernkompetenzen-section {
    position: relative;
    overflow: hidden;
  }
  
  .kernkompetenzen-headline {
    font-size: clamp(2rem, 3.5vw, 3rem);
    font-weight: 500;
    letter-spacing: -0.02em;
    line-height: 1.05;
  }
  
  .kernkompetenzen-row {
    min-height: 560px;
    align-items: flex-start !important;
  }
  
  .kernkompetenzen-cards {
    position: relative;
    width: 100%;
    height: 560px;
  }
  
  .kk-card {
    position: absolute;
    top: 0;
    left: 0;
    width: 300px;
    height: 200px;
    border-radius: 4px;
    padding: 1.5rem 1.75rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    will-change: transform;
    cursor: default;
    box-shadow: 0 12px 40px -12px rgba(0, 0, 0, 0.25);
    transition: box-shadow 0.35s ease, filter 0.3s ease;
  }
  
  .kk-card:hover {
    box-shadow: 0 20px 60px -15px rgba(0, 0, 0, 0.4);
    filter: brightness(1.06);
  }
  
  .kk-card-num {
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 1.5px;
    opacity: 0.5;
    font-variant-numeric: tabular-nums;
  }
  
  .kk-card-body {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
  }
  
  .kk-card-number {
    display: inline-block;
    font-size: 2.5rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1;
  }
  
  .kk-card-number-inner {
    display: inline-block;
    transform-origin: left center;
    will-change: transform;
  }
  
  .kk-card-label {
    font-size: 0.875rem;
    font-weight: 400;
    opacity: 0.75;
  }
  
  .kk-card.background-black,
  .kk-card.background-black .kk-card-num,
  .kk-card.background-black .kk-card-number,
  .kk-card.background-black .kk-card-label {
    color: var(--color-white);
  }
  
  .kk-card.background-accent,
  .kk-card.background-accent .kk-card-num,
  .kk-card.background-accent .kk-card-number,
  .kk-card.background-accent .kk-card-label {
    color: var(--color-black);
  }
  
  .kk-card.background-light-gray,
  .kk-card.background-light-gray .kk-card-num,
  .kk-card.background-light-gray .kk-card-number,
  .kk-card.background-light-gray .kk-card-label {
    color: var(--color-black);
  }
  
  .kernkompetenzen-tabs {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 540px;
  }
  
  .kk-tab {
    border-bottom: 1px solid var(--color-light-gray);
    padding: 0;
  }
  
  .kk-tab:first-child {
    border-top: none;
  }
  
  .kk-tab-trigger {
    position: relative;
    width: 100%;
    background: none;
    border: none;
    padding: 1.5rem 0 1rem;
    cursor: pointer;
    text-align: left;
    display: block;
    transition: padding-left 0.3s ease;
  }
  
  .kk-tab:not(.kk-tab-active) .kk-tab-trigger:hover {
    padding-left: 6px;
  }
  
  .kk-tab-title {
    display: inline-block;
    font-size: 1.5rem;
    font-weight: 500;
    letter-spacing: -0.01em;
    line-height: 1.2;
    text-transform: none;
    transition: opacity 0.3s ease, letter-spacing 0.4s ease, color 0.3s ease;
  }
  
  .kk-tab:not(.kk-tab-active) .kk-tab-title {
    opacity: 0.5;
  }
  
  .kk-tab:not(.kk-tab-active):hover .kk-tab-title {
    opacity: 0.8;
  }
  
  .kk-tab-active .kk-tab-title {
    opacity: 1;
    letter-spacing: 0;
    color: var(--color-black);
  }
  
  .kk-tab-underline {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 2px;
    width: 40px;
    background: linear-gradient(90deg,rgb(237, 241, 245) 1%, rgba(218, 232, 249, 1) 25%, rgba(219, 235, 246, 1) 75%, rgb(227, 246, 249) 100%) !important;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
      width 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  }
  
  .kk-tab-active .kk-tab-underline {
    transform: scaleX(1);
    width: 64px;
  }
  
  .kk-tab-panel {
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    padding: 0;
  }
  
  .kk-tab-active .kk-tab-panel {
    max-height: 600px;
    padding: 0.5rem 0 2rem;
  }
  
  .kk-tab-body,
  .kk-tab-cta {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.4s ease, transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
  }
  
  .kk-tab-active .kk-tab-body {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.18s;
  }
  
  .kk-tab-active .kk-tab-cta {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.4s ease 0.28s,
      transform 0.45s cubic-bezier(0.16, 1, 0.3, 1) 0.28s, color 0.3s ease,
      background-color 0.3s ease;
  }
  
  .kk-tab-body {
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 1.5rem;
    max-width: 480px;
  }
  
  .kk-tab-body p:last-child {
    margin-bottom: 0;
  }
  
  .kk-tab-cta {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 0.75rem 1.5rem;
    background-color: var(--color-black);
    color: var(--color-white);
    font-size: 0.9375rem;
    font-weight: 500;
    text-decoration: none;
    border-radius: 50px;
  }
  
  .kk-tab-cta:hover {
    color: var(--color-black);
    transform: translateX(4px);
  }
  
  .kk-tab-cta::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,rgb(237, 241, 245) 1%, rgba(218, 232, 249, 1) 25%, rgba(219, 235, 246, 1) 75%, rgb(227, 246, 249) 100%) !important;
    transform: translateY(100%);
    transition: transform 0.5s cubic-bezier(0.65, 0, 0.35, 1);
    z-index: 1;
    border-radius: inherit;
    pointer-events: none;
  }
  
  .kk-tab-cta:hover::before {
    transform: translateY(0);
  }
  
  .kk-tab-cta > span {
    position: relative;
    z-index: 2;
  }
  
  .kk-tab-cta .btn-right-arrow-white {
    display: inline-block;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.33337 8H12.6667' stroke='%23FFFFFF' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M8.66663 4L12.6666 8L8.66663 12' stroke='%23FFFFFF' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    transition: filter 0.3s ease, transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  }
  
  .kk-tab-cta:hover .btn-right-arrow-white {
    filter: brightness(0);
    transform: translateX(4px);
  }
  
  @media (prefers-reduced-motion: reduce) {
    .kk-card,
    .kk-card-number-inner,
    .kk-tab-underline,
    .kk-tab-panel,
    .kk-tab-body,
    .kk-tab-cta,
    .kk-tab-cta::before {
      transition: none !important;
      will-change: auto;
    }
    .about-hero-icon-rotator,
    .about-hero-icon,
    .about-hero-card-slide {
      transition: none !important;
      will-change: auto;
    }
  }
  
  /* ============================================================
     KK + ABOUT HERO RESPONSIVE
     ============================================================ */
  
  @media (max-width: 1200px) {
    .kk-card {
      width: 240px;
    }
  }
  
  @media (max-width: 991.98px) {
    .kernkompetenzen-row {
      min-height: 0;
    }
  
    .kernkompetenzen-cards {
      height: auto;
      display: flex;
      flex-direction: column;
      gap: 1.25rem;
      align-items: center;
    }
  
    .kk-card {
      position: relative !important;
      top: auto !important;
      left: auto !important;
      transform: none !important;
      width: 100%;
      max-width: 100%;
      z-index: auto !important;
      height: 160px;
    }
  
    .kernkompetenzen-tabs {
      min-height: 0;
    }
  
    .kk-tab-title {
      font-size: 1.25rem;
    }
    .kk-tab-active .kk-tab-title {
      font-size: 1.125rem;
    }
  
    .kk-tab-body {
      max-width: 100%;
    }
  
    .about-hero-band {
      height: 70vh;
      min-height: 520px;
    }
  
    .about-hero-icon-rotator {
      width: 240px;
      height: 240px;
    }
  
    .about-hero-vcut {
      height: 180px;
    }
  
    .about-hero-slider-area {
      margin-top: -160px;
      padding: 0 2rem;
    }
  
    .about-hero-card-wrap {
      width: 460px;
      min-height: 240px;
    }
  
    .about-hero-card-front,
    .about-hero-card-slide {
      min-height: 240px;
    }
  
    .about-hero-arrow {
      width: 52px;
      height: 52px;
    }
    .about-hero-arrow svg {
      width: 20px;
      height: 20px;
    }
  }
  
  @media (max-width: 767.98px) {
    .about-hero-band {
      height: 60vh;
      min-height: 480px;
    }
  
    .about-hero-icon-rotator {
      width: 180px;
      height: 180px;
    }
  
    .about-hero-vcut {
      height: 140px;
    }
  
    .about-hero-slider-area {
      margin-top: -120px;
      padding: 0 1rem;
    }
  
    .about-hero-card-wrap {
      width: calc(100% - 7rem);
      min-height: 200px;
    }
  
    .about-hero-card-front,
    .about-hero-card-slide {
      min-height: 200px;
    }
  
    .about-hero-card-slide {
      padding: 1.75rem 2rem;
    }
  
    .about-hero-card-headline {
      font-size: 1.375rem;
    }
  
    .about-hero-card-body {
      font-size: 0.8125rem;
      max-width: 100%;
      text-align: left;
    }
  
    .about-hero-arrow {
      width: 44px;
      height: 44px;
    }
    .about-hero-arrow svg {
      width: 18px;
      height: 18px;
    }
  
    .about-hero-footer-body {
      margin-top: 3rem !important;
      padding: 0 1rem;
    }
  }
  
  @media (max-width: 575.98px) {
    .kk-card {
      height: 180px;
      padding: 1.25rem 1.5rem;
    }
  
    .kk-card-number {
      font-size: 2rem;
    }
  
    .kk-tab-trigger {
      padding: 1.25rem 0 0.875rem;
    }
  
    .about-hero-band {
      min-height: 440px;
    }
  
    .about-hero-icon-rotator {
      width: 150px;
      height: 150px;
    }
  
    .about-hero-card-back {
      top: -12px;
      left: -16px;
      width: calc(100% + 32px);
      height: calc(100% + 32px);
    }
  
    .about-hero-card-slide {
      padding: 1.5rem 1.75rem;
    }
  
    .about-hero-card-headline {
      font-size: 1.25rem;
    }
  }
  
  /* ============================================================
     TEAM RESPONSIVE
     ============================================================ */
  
  @media (max-width: 991.98px) {
    .team-stage {
      height: 460px;
    }
  
    .team-photo {
      width: 280px;
      margin-left: -140px;
    }
  
    .team-photo-sticker {
      width: 85px;
      height: 85px;
    }
  
    .team-bottom-row {
      margin-top: -140px;
      gap: 1rem;
    }
  
    .team-info-card-front {
      padding: 2rem;
      gap: 2rem;
    }
  
    .team-info-card-contact {
      flex: 0 0 160px;
    }
  
    .team-info-name {
      font-size: 1.375rem;
    }
  
    .team-info-bio {
      font-size: 0.8125rem;
    }
  
    .team-arrow {
      width: 48px;
      height: 48px;
    }
    .team-arrow svg {
      width: 20px;
      height: 20px;
    }
  }
  
  @media (max-width: 767.98px) {
    .team-stage {
      height: 380px;
    }
  
    .team-photo {
      width: 220px;
      margin-left: -110px;
    }
  
    .team-photo[data-slot="center"]:hover .team-photo-img-default {
      opacity: 1;
    }
    .team-photo[data-slot="center"]:hover .team-photo-img-hover {
      opacity: 0;
    }
    .team-photo[data-slot="center"] {
      cursor: default;
    }
  
    .team-bottom-row {
      flex-wrap: wrap;
      gap: 1.5rem;
      margin-top: -100px;
    }
  
    .team-info-card-wrap {
      order: 1;
      flex: 1 1 100%;
      max-width: 100%;
    }
  
    .team-arrow-prev {
      order: 2;
    }
  
    .team-arrow-next {
      order: 3;
      margin-left: auto;
    }
  
    .team-info-card-front {
      flex-direction: column;
      padding: 1.75rem 2rem;
      gap: 1.5rem;
    }
  
    .team-info-card-contact {
      flex: 1 1 auto;
      padding-top: 0;
    }
  
    .team-info-card-back {
      top: 0;
      left: 0;
    }
  }
  
  @media (max-width: 575.98px) {
    .team-stage {
      height: 320px;
    }
  
    .team-photo {
      width: 180px;
      margin-left: -90px;
    }
  
    .team-photo-sticker {
      width: 70px;
      height: 70px;
      right: -8%;
    }
  
    .team-info-card-front {
      padding: 1.5rem 1.75rem;
    }
  
    .team-info-name {
      font-size: 1.25rem;
    }
  
    .contact-split-panel-head {
      font-size: clamp(3rem, 3vw, 2.75rem) !important;
    }
  
    .contact-split-panel::before {
      top: 0px !important;
      left: 0px !important;
    }
    .contact-bg-triangle {
      fill: black !important;
    }
  }
  
  /* ============================================================
        404 PAGE
        ============================================================ */
  
  .error-404-section {
    min-height: 100vh;
  }
  
  .error-404-mark {
    font-size: clamp(8rem, 22vw, 20rem);
    font-weight: 700;
    line-height: 0.85;
    letter-spacing: -0.05em;
    font-variant-numeric: tabular-nums;
  }
  
  .error-404-body {
    font-size: 1rem;
    line-height: 1.7;
    max-width: 480px;
  }
  
  /* ============================================================
        LEGAL PAGES — long-form typography for editorial introSection
        ============================================================ */
  
  .intro-editorial .intro-body-text {
    font-size: 1rem;
    line-height: 1.75;
    color: var(--color-dark-gray);
  }
  
  .intro-editorial .intro-body-text h2,
  .intro-editorial .intro-body-text h3,
  .intro-editorial .intro-body-text h4,
  .intro-editorial .intro-body-text h5,
  .intro-editorial .intro-body-text h6 {
    color: var(--color-black);
    font-weight: 500;
    letter-spacing: -0.01em;
    line-height: 1.3;
    margin-top: 2.5rem;
    margin-bottom: 1rem;
  }
  .intro-editorial .intro-body-text h2 {
    font-size: 1.5rem;
    margin-top: 3rem;
  }
  .intro-editorial .intro-body-text h3 {
    font-size: 1.25rem;
  }
  .intro-editorial .intro-body-text h4 {
    font-size: 1.0625rem;
  }
  .intro-editorial .intro-body-text h5,
  .intro-editorial .intro-body-text h6 {
    font-size: 1rem;
  }
  
  .intro-editorial .intro-body-text > h2:first-child,
  .intro-editorial .intro-body-text > h3:first-child,
  .intro-editorial .intro-body-text > h4:first-child {
    margin-top: 0;
  }
  
  .intro-editorial .intro-body-text p {
    margin-bottom: 1rem;
  }
  
  .intro-editorial .intro-body-text ul,
  .intro-editorial .intro-body-text ol {
    margin: 0 0 1.25rem 0;
    padding-left: 1.5rem;
  }
  .intro-editorial .intro-body-text li {
    margin-bottom: 0.5rem;
    line-height: 1.65;
  }
  .intro-editorial .intro-body-text li:last-child {
    margin-bottom: 0;
  }
  
  .intro-editorial .intro-body-text li ul,
  .intro-editorial .intro-body-text li ol {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
  }
  
  .intro-editorial .intro-body-text strong {
    font-weight: 500;
    color: var(--color-black);
  }
  .intro-editorial .intro-body-text em {
    font-style: italic;
  }
  
  .intro-editorial .intro-body-text a {
    color: inherit;
    text-decoration: none;
    background-image: linear-gradient(currentColor, currentColor);
    background-size: 100% 1px;
    background-repeat: no-repeat;
    background-position: 0 100%;
    transition: background-size 0.3s ease, opacity 0.3s ease;
  }
  .intro-editorial .intro-body-text a:hover {
    background-size: 100% 2px;
    opacity: 0.8;
  }
  
  .intro-editorial .intro-body-text table {
    width: 100%;
    margin: 1.5rem 0;
    border-collapse: collapse;
    font-size: 0.9375rem;
  }
  .intro-editorial .intro-body-text th,
  .intro-editorial .intro-body-text td {
    padding: 0.625rem 0.875rem;
    border-bottom: 1px solid var(--color-light-gray);
    text-align: left;
    vertical-align: top;
  }
  .intro-editorial .intro-body-text th {
    font-weight: 500;
    color: var(--color-black);
  }
  
  .intro-editorial .intro-body-text blockquote {
    margin: 1.5rem 0;
    padding-left: 1.25rem;
    border-left: 2px solid var(--color-silver);
    color: var(--color-dark-gray);
    font-style: italic;
  }
  
  .intro-editorial .intro-body-text hr {
    border: none;
    border-top: 1px solid var(--color-light-gray);
    margin: 2.5rem 0;
  }
  
  .background-black.intro-editorial .intro-body-text,
  .intro-editorial.background-black .intro-body-text {
    color: var(--color-silver);
  }

  /* ── Side image parallax wrapper ──────────────────────────────
   The wrapper masks the image (overflow: hidden) so it can only
   move INSIDE its bounding box. The image is intentionally
   oversized (105%) so the wrapper never sees an empty edge when
   the image translates a few pixels in any direction. */

.intro-side-image-wrap {
    position: relative;
    overflow: hidden;
    width: 100%;
    aspect-ratio: 1 / 1;            /* matches the natural 750×750 / 1500×1500 ratio */
}

.intro-side-image{
    max-width: 636px;
    max-height: 636px;
}

.intro-side-image-wrap .intro-side-image {
    will-change: transform;
}

/* Reduced motion — disable the cursor follow entirely */
@media (prefers-reduced-motion: reduce) {
    .intro-side-image-wrap .intro-side-image {
        transform: none !important;
    }
}

/* Touch / coarse pointer devices — no cursor to follow */
@media (hover: none), (pointer: coarse) {
    .intro-side-image-wrap .intro-side-image {
        transform: none !important;
    }
}

  .background-black.intro-editorial .intro-body-text h2,
  .background-black.intro-editorial .intro-body-text h3,
  .background-black.intro-editorial .intro-body-text h4,
  .background-black.intro-editorial .intro-body-text h5,
  .background-black.intro-editorial .intro-body-text h6,
  .background-black.intro-editorial .intro-body-text strong,
  .intro-editorial.background-black .intro-body-text h2,
  .intro-editorial.background-black .intro-body-text h3,
  .intro-editorial.background-black .intro-body-text h4 {
    color: var(--color-white);
  }
  
  /* ============================================================
        DATENSCHUTZ — INFO PAGE
        ============================================================ */
  
  .datenschutz-hero-light {
    padding-top: 120px;
    padding-bottom: 0;
  }
  
  .datenschutz-hero-light .hero-headline {
    letter-spacing: -1.5px;
    line-height: 1.1;
  }
  
  .datenschutz-hero-light .hero-subline {
    line-height: 1.5;
  }
  
  .datenschutz-hero-actions {
    gap: 1.5rem;
  }
  
  .datenschutz-hero-price {
    display: inline-flex;
    align-items: baseline;
    gap: 0.625rem;
    line-height: 1;
  }
  .datenschutz-hero-price-value {
    font-size: 2rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1;
  }
  .datenschutz-hero-price-suffix {
    font-size: 0.8125rem;
    letter-spacing: 0.5px;
  }
  
  .datenschutz-divider {
    width: 100%;
    height: 1px;
    background-color: var(--color-light-gray);
  }
  
  .datenschutz-hero-graphic {
    position: absolute;
    top: 50%;
    right: -80px;
    transform: translateY(-50%);
    width: 520px;
    height: 520px;
    pointer-events: none;
    z-index: 1;
  }
  
  .datenschutz-hero-content {
    position: relative;
    z-index: 2;
  }
  
  /* ============================================================
     DATENSCHUTZ — PRICING CARD (deduped)
     ============================================================ */
  
  .datenschutz-price-card {
    position: relative;
    background-color: var(--color-white);
    border-radius: 16px;
    overflow: hidden;
    z-index: 2;
    box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.35),
      0 12px 30px -12px rgba(0, 0, 0, 0.18), 0 2px 6px rgba(0, 0, 0, 0.08);
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  }
  
  .datenschutz-price-card-wrap {
    position: relative;
    isolation: isolate;
  }
  
  .datenschutz-price-card-wrap::before {
    content: "";
    position: absolute;
    top: -8%;
    left: -10%;
    right: -10%;
    bottom: -8%;
    background: radial-gradient(
      ellipse 70% 60% at 50% 50%,
      var(--color-accent) 0%,
      rgba(242, 254, 147, 0.5) 30%,
      rgba(242, 254, 147, 0) 70%
    );
    filter: blur(40px);
    opacity: 0.7;
    z-index: 0;
    pointer-events: none;
    border-radius: 50%;
  }
  
  .datenschutz-price-card-wrap::after {
    content: "";
    position: absolute;
    top: -28px;
    right: -28px;
    width: 140px;
    height: 140px;
    background: linear-gradient(90deg,rgb(237, 241, 245) 1%, rgba(218, 232, 249, 1) 25%, rgba(219, 235, 246, 1) 75%, rgb(227, 246, 249) 100%) !important;
    border-radius: 12px;
    transform: rotate(-8deg);
    z-index: 1;
    pointer-events: none;
    box-shadow: 0 12px 30px -8px rgba(0, 0, 0, 0.25);
  }
  
  @media (min-width: 992px) {
    .datenschutz-price-card {
      transform: scale(1.04);
      transform-origin: center center;
    }
    .datenschutz-price-card:hover {
      transform: scale(1.06);
    }
  }
  
  .datenschutz-price-card-header {
    background: linear-gradient(
      90deg,
      rgba(111, 93, 211, 1) 0%,
      rgba(242, 85, 85, 1) 100%
    );
    padding: 1.5rem 1.5rem 1.25rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 1;
  }
  
  .datenschutz-price-card-title {
    font-size: 1.0625rem;
    font-weight: 500;
    letter-spacing: -0.005em;
    line-height: 1.3;
  }
  
  .datenschutz-price-card-body {
    padding: 2.5rem 2rem 2rem;
  }
  
  .datenschutz-price-amount {
    font-size: 3.5rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.03em;
    margin-bottom: 0.25rem;
  }
  
  .datenschutz-price-divider {
    border-bottom: 1px solid var(--color-light-gray);
  }
  
  .datenschutz-price-list {
    list-style: none;
    padding: 0;
    margin: 0 0 2rem 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }
  
  .datenschutz-price-list li {
    display: grid;
    grid-template-columns: 28px 1fr;
    align-items: center;
    gap: 0.875rem;
    color: var(--color-dark-gray);
    font-size: 0.9375rem;
    line-height: 1.45;
  }
  
  .datenschutz-check-icon {
    display: inline-block;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 1.5px solid #dae8f9;
    background-image: url("data:image/svg+xml,%3Csvg width='14' height='14' viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 7.5L6 10.5L11 4.5' stroke='%23dae8f9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-size: 14px 14px;
    background-position: center center;
    background-repeat: no-repeat;
    margin-top: 1px;
  }
  
  .datenschutz-price-cta {
    width: 100%;
    padding: 0.875rem 1.5rem;
  }
  
  /* ============================================================
     DATENSCHUTZ — FORMAT SHOWCASE (PDF + HTML preview)
     ============================================================ */
  
  .datenschutz-format-showcase {
    display: flex;
    flex-direction: column;
    height: 100%;
  }
  
  .datenschutz-format-preview {
    border-radius: 16px;
    overflow: hidden;
    margin-bottom: 1.5rem;
    height: 360px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .datenschutz-format-showcase:hover .datenschutz-format-preview {
    transform: translateY(-4px);
  }
  
  .datenschutz-format-preview-pdf {
    background-color: var(--color-light-gray);
    padding: 2rem 2.5rem;
  }
  
  .datenschutz-pdf-paper {
    background-color: var(--color-white);
    width: 70%;
    height: 100%;
    border-radius: 4px;
    padding: 1.25rem 1.125rem;
    display: flex;
    flex-direction: column;
    gap: 8px;
    position: relative;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.04);
  }
  
  .datenschutz-pdf-h {
    height: 10px;
    background-color: var(--color-black);
    width: 60%;
    border-radius: 2px;
    margin-bottom: 6px;
  }
  
  .datenschutz-pdf-line {
    height: 5px;
    background-color: var(--color-silver);
    border-radius: 1px;
  }
  .datenschutz-pdf-line.short {
    width: 70%;
  }
  .datenschutz-pdf-line.med {
    width: 85%;
  }
  .datenschutz-pdf-line.full {
    width: 100%;
  }
  
  .datenschutz-pdf-spacer {
    height: 6px;
  }
  
  .datenschutz-pdf-badge {
    position: absolute;
    bottom: 14px;
    right: 14px;
    background-color: var(--color-red);
    color: var(--color-white);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 1px;
    padding: 5px 10px;
    border-radius: 4px;
  }
  
  .datenschutz-format-preview-html {
    padding: 1.5rem;
  }
  
  .datenschutz-code-window {
    background-color: #0f0f12;
    width: 100%;
    height: 100%;
    border-radius: 8px;
    overflow: hidden;
    font-family: "JetBrains Mono", "SF Mono", Monaco, Consolas, "Courier New",
      monospace;
    font-size: 0.75rem;
    line-height: 1.65;
    display: flex;
    flex-direction: column;
  }
  
  .datenschutz-code-tab {
    background-color: rgba(255, 255, 255, 0.04);
    padding: 8px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    display: flex;
    align-items: center;
    gap: 7px;
    flex-shrink: 0;
  }
  
  .datenschutz-code-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
  }
  .datenschutz-code-dot-r {
    background-color: #ff5f57;
  }
  .datenschutz-code-dot-y {
    background-color: #febc2e;
  }
  .datenschutz-code-dot-g {
    background-color: #28c840;
  }
  
  .datenschutz-code-tab-name {
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.6875rem;
    letter-spacing: 0.3px;
    margin-left: 4px;
  }
  
  .datenschutz-code-body {
    padding: 14px 16px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    overflow: hidden;
  }
  
  .datenschutz-code-row {
    display: flex;
    gap: 12px;
    white-space: nowrap;
  }
  
  .datenschutz-code-num {
    color: rgba(255, 255, 255, 0.25);
    width: 16px;
    text-align: right;
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
  }
  
  .datenschutz-code-line {
    color: rgba(255, 255, 255, 0.85);
    overflow: hidden;
    text-overflow: ellipsis;
  }
  
  .datenschutz-code-tag {
    color: var(--color-accent);
  }
  .datenschutz-code-attr {
    color: #87ceeb;
  }
  .datenschutz-code-str {
    color: #ffa07a;
  }
  .datenschutz-code-text {
    color: rgba(255, 255, 255, 0.7);
  }
  
  .datenschutz-code-indent-1 {
    padding-left: 14px;
  }
  .datenschutz-code-indent-2 {
    padding-left: 28px;
  }
  
  .datenschutz-format-content {
    padding: 0 0.5rem;
  }
  
  /* ============================================================
     CONTACT SPLIT BLOCK — v3 (inline SVG + GSAP)
     Unified with about-hero: both use the same draw-on intro +
     parallax animation. The SVG background fills the section
     container via `inset: 0` (replaces old `top: -50px`).
     ============================================================ */
  
  .contact-split-section {
    position: relative;
    overflow: hidden;
    padding-top: 0;
    padding-bottom: 4rem;
    background-color: #e3e2e6;
  }
  
  /* ── BAND — matches .about-hero-band: black band holding the
     stripes SVG + headline + V-cut at its bottom.
     No fixed height; sized by content + padding. ── */
  .contact-split-band {
    position: relative;
    width: 100%;
    background-color: var(--color-black);
    overflow: hidden;
    padding-top: 50vh;
  }
  
  /* Stripes SVG fills the band */
  .contact-split-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
  }
  
  /* ── V-cut at the bottom of the band — mirrors .about-hero-vcut ── */
  .contact-split-vcut {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 240px;
    z-index: 2;
    pointer-events: none;
  }
  .contact-split-vcut svg {
    width: 100%;
    height: 100%;
    display: block;
  }
  
  /* ── Below-band wrapper — form panels sit on the light gray
     section background. Negative margin-top pulls the row up into
     the V-cut transition, mirroring aboutHero's slider-area. ── */
  .contact-split-bottom-area {
    position: relative;
    z-index: 2;
    margin-top: -70px;
  }
  
  .contact-split-svg {
    width: 100%;
    height: 100%;
    display: block;
  }
  
  .contact-split-svg [data-stripe],
  .contact-split-svg [data-triangle] {
    will-change: transform, opacity;
  }
  
  @media (prefers-reduced-motion: reduce) {
    .contact-split-svg [data-stripe],
    .contact-split-svg [data-triangle] {
      will-change: auto;
      opacity: 1 !important;
      transform: none !important;
    }
  }
  
  .contact-split-inner {
    position: relative;
    z-index: 2;
  }
  
  /* ── Top area: headline + accent + dart ──────────────────────── */
  
  .contact-split-head-wrap {
    position: relative;
    padding: 4rem 0 10rem;
    margin-bottom: 2rem;
  }
  
  .contact-split-head-content {
    z-index: 1;
    padding: 3rem;
    max-width: 600px;
    background: linear-gradient(90deg,rgba(246, 233, 241, 1) 1%, rgba(218, 232, 249, 1) 25%, rgba(219, 235, 246, 1) 75%, rgba(227, 249, 234, 1) 100%);
    z-index: 0;
    pointer-events: none;
    transform: rotate(-5deg);
  }
  
  .contact-split-headline {
    font-size: clamp(3rem, 6vw, 5rem);
    font-weight: 500;
    letter-spacing: -0.02em;
    line-height: 0.95;
    margin-bottom: 1.5rem;
    transform-origin: left center;
    display: inline-block;
    max-width: 6ch;
  }
  
  .contact-split-body {
    font-size: clamp(1.125rem, 1.6vw, 1.5rem);
    line-height: 1.3;
    transform-origin: left center;
    margin-left: 8rem;
    margin-top: -0.5rem;
  }
  
  .contact-split-body p {
    font-size: clamp(1.125rem, 1.6vw, 1.5rem) !important;
    line-height: 1.3;
  }
  
  .contact-split-body p:last-child {
    margin-bottom: 0;
  }
  
  .contact-split-dart {
    position: absolute;
    top: 2rem;
    left: calc(44% - 106px);
    width: 250px;
    height: 250px;
    z-index: 2;
    pointer-events: none;
  }
  
  .contact-split-dart img {
    width: 100%;
    height: 100%;
    display: block;
  }

  .contact-split-bg::before{
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background-image: repeating-linear-gradient(110deg, rgba(0, 0, 0, 0.4) 0px, rgba(0, 0, 0, 0.4) 80px, transparent 80px, transparent 200px);
    mix-blend-mode: overlay;
  }
  
  /* ── Bottom area: black panel + form card ────────────────────── */
  
  .contact-split-bottom-wrap {
    position: relative;
  }
  
  .contact-split-panel {
    position: relative;
    isolation: isolate;
    margin: 0 auto;
  }
  
  .contact-split-panel::before {
    content: "";
    position: absolute;
    top: -16px;
    left: -16px;
    width: 100%;
    height: 100%;
    background-color: var(--color-white);
    z-index: -1;
    transform: rotate(-8deg);
    transform-origin: center center;
  }
  
  .contact-split-panel-inner {
    background-color: var(--color-black);
    padding: 2.5rem 2rem;
    min-height: 320px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
  }
  
  .contact-split-panel-head {
    font-size: clamp(4rem, 3vw, 2.75rem);
    line-height: 1;
    letter-spacing: -0.02em;
  }
  
  .contact-split-form-card {
    background-color: var(--color-white);
    padding: 2.5rem 3rem;
    position: relative;
  }
  
  /* ── Formie overrides inside contact-split form card ─────────── */
  
  .contact-split-form-card .fui-form,
  .contact-split-form-card .fui-input,
  .contact-split-form-card .fui-label,
  .contact-split-form-card .fui-btn {
    color: var(--color-black) !important;
    font-family: "Inter", sans-serif !important;
    font-size: 20px !important;
    font-style: normal !important;
    font-weight: 500 !important;
    line-height: 121% !important;
    letter-spacing: -0.6px !important;
  }
  
  .contact-split-form-card .fui-row {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0 2rem !important;
  }
  
  .contact-split-form-card .fui-page-row {
    margin-bottom: 0 !important;
  }
  
  .contact-split-form-card .fui-field {
    flex: 1 1 calc(50% - 1rem) !important;
    min-width: 200px !important;
    padding: 0 !important;
    margin-bottom: 1.5rem !important;
  }
  
  .contact-split-form-card .fui-type-multi-line-text,
  .contact-split-form-card .fui-type-paragraph {
    flex: 1 1 100% !important;
  }
  
  .contact-split-form-card .fui-label {
    margin-bottom: 0.5rem !important;
    padding: 0 !important;
  }
  
  .contact-split-form-card .fui-required {
    display: none !important;
  }
  
  .contact-split-form-card .fui-instructions,
  .contact-split-form-card .fui-legend {
    display: none !important;
  }
  
  .contact-split-form-card .fui-input {
    background: transparent !important;
    border: none !important;
    border-bottom: 1px solid var(--color-black) !important;
    border-radius: 0 !important;
    padding: 0.5rem 0 !important;
    width: 100% !important;
    outline: none !important;
    box-shadow: none !important;
    transition: border-color 0.3s ease !important;
  }
  
  .contact-split-form-card .fui-input:focus {
    border-bottom-color: var(--color-accent) !important;
  }
  
  .contact-split-form-card input.fui-input::placeholder,
  .contact-split-form-card textarea.fui-input::placeholder {
    color: var(--color-black) !important;
    font-family: "Inter", sans-serif !important;
    font-size: 20px !important;
    font-weight: 500 !important;
    line-height: 121% !important;
    letter-spacing: -0.6px !important;
    opacity: 1 !important;
  }
  
  .contact-split-form-card input.fui-input::-webkit-input-placeholder,
  .contact-split-form-card textarea.fui-input::-webkit-input-placeholder {
    color: var(--color-black) !important;
    font-family: "Inter", sans-serif !important;
    font-size: 20px !important;
    font-weight: 500 !important;
    line-height: 121% !important;
    letter-spacing: -0.6px !important;
    opacity: 1 !important;
  }
  
  .contact-split-form-card input.fui-input::-moz-placeholder,
  .contact-split-form-card textarea.fui-input::-moz-placeholder {
    color: var(--color-black) !important;
    font-family: "Inter", sans-serif !important;
    font-size: 20px !important;
    font-weight: 500 !important;
    line-height: 121% !important;
    letter-spacing: -0.6px !important;
    opacity: 1 !important;
  }
  
  .contact-split-form-card input.fui-input:-ms-input-placeholder,
  .contact-split-form-card textarea.fui-input:-ms-input-placeholder {
    color: var(--color-black) !important;
    font-family: "Inter", sans-serif !important;
    font-size: 20px !important;
    font-weight: 500 !important;
    line-height: 121% !important;
    letter-spacing: -0.6px !important;
    opacity: 1 !important;
  }
  
  .contact-split-form-card textarea.fui-input {
    min-height: 60px !important;
    resize: none !important;
  }
  
  .contact-split-form-card .fui-btn-wrapper {
    display: flex !important;
    justify-content: flex-end !important;
    margin-top: 1rem !important;
    width: 100%;
  }
  
  .contact-split-form-card .fui-btn.fui-submit {
    background-color: var(--color-black) !important;
    color: var(--color-white) !important;
    border: none !important;
    border-radius: 50px !important;
    padding: 0.75rem 2rem !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    letter-spacing: -0.3px !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 1.5rem !important;
    transition: opacity 0.3s ease !important;
  }
  
  .contact-split-form-card .fui-btn.fui-submit:hover {
    opacity: 0.85 !important;
  }
  
  .contact-split-form-card .fui-btn.fui-submit::after {
    content: "" !important;
    display: inline-block !important;
    width: 7.5px !important;
    height: 15px !important;
    background-image: url("data:image/svg+xml,%3Csvg width='10' height='17' viewBox='0 0 10 17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.707031 0.707031L8.20703 8.20703L0.707031 15.707' stroke='%23fff' stroke-width='2'/%3E%3C/svg%3E%0A") !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
  }
  
  /* ── Contact split responsive ────────────────────────────────── */
  
  @media (max-width: 991.98px) {
    .contact-split-band {
      padding-top: 6rem;
    }
    .contact-split-vcut {
      height: 160px;
    }
    .contact-split-bottom-area {
      margin-top: -40px;
    }
    .contact-split-head-wrap {
      padding: 2rem 0 4rem;
    }
    .contact-split-accent {
      width: 80%;
      height: 220px;
    }
    .contact-split-headline {
      transform: none;
      margin-bottom: 1rem;
    }
    .contact-split-body {
      transform: none;
      margin-left: 0;
    }
    .contact-split-dart {
      width: 140px;
      height: 140px;
      left: auto;
      right: 0;
      top: 1rem;
    }
    .contact-split-panel {
      max-width: 100%;
    }
    .contact-split-panel-inner {
      min-height: 200px;
    }
    .contact-split-form-card {
      padding: 2rem 1.5rem;
    }
    .solution-item-features,
    .solution-item-full{
      max-height: 100%;
    }
  }
  
  @media (max-width: 575.98px) {
    .contact-split-headline {
      font-size: 2.5rem;
    }
    .contact-split-body {
      font-size: 1rem;
    }
    .contact-split-dart {
      width: 100px;
      height: 100px;
    }
    .contact-split-accent {
      height: 200px;
    }
    .contact-split-form-card .fui-field {
      flex: 1 1 100% !important;
    }
  }
  
  /* ============================================================
     FAQ NESTED — two-level accordion
     ============================================================ */
  
  .faq-nested-outer {
    border-top: 1px solid var(--color-light-gray);
  }
  
  .faq-nested-outer-item {
    border: none;
    border-bottom: 1px solid var(--color-light-gray);
    background-color: transparent;
  }
  
  .faq-nested-outer-button {
    background-color: transparent !important;
    color: var(--color-black) !important;
    padding: 1.5rem 0;
    font-size: 1.375rem;
    font-weight: 500;
    letter-spacing: -0.01em;
    line-height: 1.3;
    box-shadow: none !important;
    border: none !important;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    transition: padding-left 0.3s ease;
  }
  
  .faq-nested-outer-button:not(.collapsed) {
    color: var(--color-black) !important;
  }
  
  .faq-nested-outer-button:hover {
    padding-left: 8px;
  }
  
  .faq-nested-outer-button:focus {
    box-shadow: none !important;
    border: none !important;
  }
  
  .faq-nested-outer-button::after {
    width: 14px;
    height: 14px;
    background-image: url("data:image/svg+xml,%3Csvg width='14' height='14' viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 5.5L7 9.5L11 5.5' stroke='%23000000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-size: 14px 14px;
    background-repeat: no-repeat;
    background-position: center center;
    flex-shrink: 0;
    transition: transform 0.3s ease;
  }
  
  .faq-nested-outer-title {
    flex-grow: 1;
  }
  
  .faq-nested-outer-count {
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 1px;
    color: var(--color-gray);
    background-color: var(--color-light-gray);
    border-radius: 50px;
    padding: 3px 10px;
    font-variant-numeric: tabular-nums;
    margin-right: 0.75rem;
  }
  
  .faq-nested-outer-body {
    padding: 0 0 2rem 0;
  }
  
  .faq-nested-inner {
    border-top: 1px solid var(--color-light-gray);
    padding-left: 1rem;
  }
  
  .faq-nested-inner-item {
    border: none;
    border-bottom: 1px solid var(--color-light-gray);
    background-color: transparent;
  }
  
  .faq-nested-inner-item:last-child {
    border-bottom: none;
  }
  
  .faq-nested-inner-button {
    background-color: transparent !important;
    color: var(--color-black) !important;
    padding: 1rem 0;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.4;
    box-shadow: none !important;
    border: none !important;
    transition: padding-left 0.3s ease;
  }
  
  .faq-nested-inner-button:not(.collapsed) {
    color: var(--color-black) !important;
  }
  
  .faq-nested-inner-button:hover {
    padding-left: 6px;
  }
  
  .faq-nested-inner-button:focus {
    box-shadow: none !important;
    border: none !important;
  }
  
  .faq-nested-inner-button::after {
    width: 12px;
    height: 12px;
    background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 4.5L6 7.5L9 4.5' stroke='%234B4B54' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-size: 12px 12px;
    background-repeat: no-repeat;
    background-position: center center;
    flex-shrink: 0;
    transition: transform 0.3s ease;
  }
  
  .faq-nested-inner-body {
    padding: 0 0 1.25rem 0;
    font-size: 0.9375rem;
    line-height: 1.65;
  }
  
  .faq-nested-inner-body p:last-child {
    margin-bottom: 0;
  }
  
  .faq-nested-inner-body a {
    color: inherit;
    text-decoration: none;
    background-image: linear-gradient(currentColor, currentColor);
    background-size: 100% 1px;
    background-repeat: no-repeat;
    background-position: 0 100%;
    transition: background-size 0.3s ease, opacity 0.3s ease;
  }
  
  .faq-nested-inner-body a:hover {
    background-size: 100% 2px;
    opacity: 0.8;
  }
  
  .background-black .faq-nested-outer {
    border-top-color: rgba(255, 255, 255, 0.1);
  }
  
  .background-black .faq-nested-outer-item,
  .background-black .faq-nested-inner-item {
    border-bottom-color: rgba(255, 255, 255, 0.1);
  }
  
  .background-black .faq-nested-outer-button,
  .background-black .faq-nested-inner-button {
    color: var(--color-white) !important;
  }
  
  .background-black .faq-nested-outer-button::after {
    background-image: url("data:image/svg+xml,%3Csvg width='14' height='14' viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 5.5L7 9.5L11 5.5' stroke='%23FFFFFF' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  }
  
  .background-black .faq-nested-inner-button::after {
    background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 4.5L6 7.5L9 4.5' stroke='%23BFBCC9' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  }
  
  .background-black .faq-nested-outer-count {
    color: var(--color-silver);
    background-color: rgba(255, 255, 255, 0.08);
  }
  
  .background-black .faq-nested-inner {
    border-top-color: rgba(255, 255, 255, 0.1);
  }
  
  .background-black .faq-nested-inner-body {
    color: var(--color-silver);
  }
  
  @media (max-width: 991.98px) {
    .faq-nested-outer-button {
      font-size: 1.125rem;
      padding: 1.25rem 0;
    }
    .faq-nested-inner {
      padding-left: 0;
    }
    .faq-nested-inner-button {
      font-size: 0.9375rem;
    }
  }
  
  @media (max-width: 575.98px) {
    .faq-nested-outer-button {
      font-size: 1rem;
      padding: 1rem 0;
      gap: 0.75rem;
    }
    .faq-nested-outer-count {
      display: none;
    }
    .faq-nested-inner-button {
      font-size: 0.875rem;
      padding: 0.875rem 0;
    }
    .faq-nested-inner-body {
      font-size: 0.875rem;
    }
  }
  
  /* ============================================================
     DATENSCHUTZ — QUESTIONS + RECOMMENDATION
     ============================================================ */
  
  .datenschutz-questions-section {
    background-color: #fafafb;
  }
  
  .datenschutz-question-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 2rem;
    border-top: 1px solid var(--color-light-gray);
  }
  
  .datenschutz-question-row {
    display: grid;
    grid-template-columns: 56px 1fr;
    align-items: center;
    gap: 1rem;
    padding: 1.5rem 0;
    border-bottom: 1px solid var(--color-light-gray);
    transition: padding-left 0.3s ease;
  }
  .datenschutz-question-row:hover {
    padding-left: 8px;
  }
  
  .datenschutz-question-num {
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 2px;
    color: var(--color-overline, var(--color-gray));
    font-variant-numeric: tabular-nums;
  }
  
  .datenschutz-question-text {
    font-size: 1.0625rem;
    font-weight: 500;
    color: var(--color-black);
    letter-spacing: -0.005em;
    line-height: 1.4;
  }
  
  .datenschutz-edoeb-callout {
    background: linear-gradient(90deg,rgb(237, 241, 245) 1%, rgba(218, 232, 249, 1) 25%, rgba(219, 235, 246, 1) 75%, rgb(227, 246, 249) 100%) !important;
    color: var(--color-black);
    border: 1px solid var(--color-light-gray);
    border-radius: 12px;
    padding: 1.25rem 2rem;
    font-size: 0.9375rem;
    line-height: 1.6;
  }
  
  .datenschutz-recommendation {
    line-height: 1.75;
    font-size: 1rem;
  }
  
  /* ============================================================
     BLOG — list + post detail
     ============================================================ */
  
  .blog-card-media img {
    max-height: 400px;
  }
  
  .blog-card {
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .blog-card:hover {
    transform: translateY(-4px);
  }
  
  .blog-card-media {
    aspect-ratio: 16 / 10;
  }
  
  .blog-card-img {
    transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }
  .blog-card:hover .blog-card-img {
    transform: scale(1.04);
  }
  
  .blog-card-meta {
    line-height: 1.4;
  }
  .blog-card-meta-divider {
    font-size: 0.75rem;
    line-height: 1;
  }
  
  .blog-card-title {
    font-size: 1.25rem;
    font-weight: 500;
    letter-spacing: -0.01em;
    line-height: 1.3;
    transition: color 0.3s ease;
  }
  
  .blog-card-teaser {
    font-size: 0.9375rem;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  
  .blog-card-readmore {
    font-size: 0.875rem;
    transition: gap 0.3s ease, transform 0.3s ease;
  }
  .blog-card:hover .blog-card-readmore {
    gap: 0.75rem;
  }
  
  .background-black .blog-card {
    color: var(--color-white);
  }
  .background-black .blog-card-title {
    color: var(--color-white) !important;
  }
  .background-black .blog-card-teaser {
    color: var(--color-silver) !important;
  }
  .background-black .blog-card-readmore {
    color: var(--color-white) !important;
  }
  .background-black .blog-card-media {
    background-color: rgba(255, 255, 255, 0.05) !important;
  }
  
  .blog-post-hero {
    padding-top: 6rem;
  }
  
  .blog-post-meta {
    line-height: 1.4;
  }
  
  .blog-post-title {
    font-size: 2.75rem;
    font-weight: 500;
    letter-spacing: -0.02em;
    line-height: 1.1;
  }
  
  .blog-post-subheadline {
    line-height: 1.5;
    max-width: 800px;
  }
  
  .blog-post-image {
    aspect-ratio: 16 / 9;
    max-height: 600px;
  }
  
  .blog-post-image img {
    height: 100%;
    max-height: 600px;
    object-fit: cover;
    object-position: center;
  }
  
  .blog-post-headline {
    font-size: 1.75rem;
    font-weight: 500;
    letter-spacing: -0.01em;
    line-height: 1.25;
  }
  
  .blog-post-body h2 {
    font-size: 2.625rem;
    line-height: 1.2;
    font-weight: 600;
  }
  
  .blog-post-back-arrow {
    transform: scaleX(-1);
  }
  .blog-post-back-link {
    transition: gap 0.3s ease;
  }
  .blog-post-back-link:hover {
    gap: 0.75rem;
  }
  
  @media (max-width: 991.98px) {
    .blog-post-title {
      font-size: 2.25rem;
    }
    .blog-post-headline {
      font-size: 1.5rem;
    }
    .blog-post-image {
      aspect-ratio: 16 / 10;
    }
    .blog-card-title {
      font-size: 1.125rem;
    }
  }
  
  @media (max-width: 575.98px) {
    .blog-post-title {
      font-size: 1.875rem;
      letter-spacing: -1px;
    }
    .blog-post-headline {
      font-size: 1.375rem;
    }
    .blog-post-image {
      aspect-ratio: 4 / 3;
      border-radius: 12px;
    }
    .blog-card-media {
      aspect-ratio: 16 / 10;
    }
  }
  
  /* ============================================================
     DATENSCHUTZ — GENERATOR PAGE
     ============================================================ */
  
  .datenschutz-generator-section {
    padding-top: 89px;
    min-height: 100vh;
  }
  
  .datenschutz-generator-embed {
    min-height: 75vh;
  }
  
  /* ============================================================
        RESPONSIVE — All breakpoints grouped at the bottom
        ============================================================ */
  
  @media (min-width: 1600px) {
    .max-width {
      max-width: 1850px;
    }
  }
  
  @media (min-width: 1440px) {
    .px-xxl-5 {
      padding-left: 3rem !important;
      padding-right: 3rem !important;
    }
  }
  
  @media (min-width: 992px) {
    .pt-block-small {
      padding-top: 2rem !important;
    }
    .pt-block-medium {
      padding-top: 4rem !important;
    }
    .pt-block-large {
      padding-top: 6rem !important;
    }
    .pb-block-small {
      padding-bottom: 2rem !important;
    }
    .pb-block-medium {
      padding-bottom: 4rem !important;
    }
    .pb-block-large {
      padding-bottom: 6rem !important;
    }
  }
  
  @media (max-width: 991.98px) {
    .hero-section {
      min-height: 50vh;
    }
    .hero-headline {
      letter-spacing: -1px;
    }
    .nav-main-link {
      font-size: 2.5rem;
    }
    .stat-card {
      min-height: 180px;
    }
    .service-list-media {
      aspect-ratio: 16 / 10;
    }
    .service-showcase-img {
      max-height: 300px;
    }
    .product-strip {
      aspect-ratio: 16 / 10;
    }
    .product-strip-content {
      max-width: 70%;
    }
    .product-strip-title {
      font-size: 1.5rem;
    }
    .product-strip-gradient {
      background: linear-gradient(
        90deg,
        rgba(0, 0, 0, 0.65) 0%,
        rgba(0, 0, 0, 0.4) 60%,
        rgba(0, 0, 0, 0.1) 100%
      );
    }
    .product-row-media,
    .product-row-info {
      min-height: auto;
    }
    .product-row-media {
      aspect-ratio: 16 / 10;
    }
    .product-row-title {
      font-size: 1.375rem;
    }
    .product-row-desc {
      font-size: 1rem;
    }
    .product-showcase-hero {
      min-height: 0;
      max-height: none;
    }
    .product-showcase-hero img,
    .product-showcase-hero video {
      max-height: none;
      height: auto;
      display: block;
    }
    .product-media-card {
      min-height: 200px;
    }
    .project-slide-media {
      height: 320px;
    }
    .project-filter-media {
      height: 280px;
    }
    .project-screenshot-scroll {
      max-height: 400px;
    }
    .team-member-photo {
      height: 300px;
    }
    .service-tab-title {
      font-size: 2rem;
    }
    .footer-logo {
      transform: scale(1.4);
    }
    .intro-section-item {
      padding: 1rem 0;
    }
    .intro-section-name {
      font-size: 1rem;
    }
  
    /* Datenschutz */
    .datenschutz-hero-light {
      padding-top: 100px;
    }
    .datenschutz-hero-price-value {
      font-size: 1.75rem;
    }
    .datenschutz-price-amount {
      font-size: 3rem;
    }
    .datenschutz-price-card-body {
      padding: 2rem 1.5rem 1.5rem;
    }
    .datenschutz-format-preview {
      height: 280px;
    }
    .datenschutz-pdf-paper {
      width: 75%;
      padding: 1rem 0.875rem;
    }
    .datenschutz-pdf-h {
      height: 8px;
      margin-bottom: 4px;
    }
    .datenschutz-pdf-line {
      height: 4px;
    }
    .datenschutz-code-body {
      padding: 10px 12px;
    }
    .datenschutz-code-window {
      font-size: 0.6875rem;
      line-height: 1.55;
    }
    .datenschutz-question-grid {
      grid-template-columns: 1fr;
    }
    .datenschutz-generator-section {
      padding-top: 100px;
    }
    #angebot {
      scroll-margin-top: 400px;
    }
  }
  
  @media (max-width: 767.98px) {
    .footer-logo {
      transform: scale(1.2);
    }
    .site-footer .row .col-6 {
      flex: 0 0 50%;
    }
    .partner-logo-img {
      max-width: 120px;
      height: 45px;
    }
    .nav-offcanvas .row > div {
      flex: 0 0 100% !important;
      max-width: 100% !important;
      margin-left: 0 !important;
    }
    .form-banner-card .fui-field.fui-page-field {
      flex: 1 1 100% !important;
    }
    .form-banner-card .fui-type-name-first,
    .form-banner-card .fui-type-name-last {
      flex: 1 1 100% !important;
    }
    .service-list-feature-grid {
      grid-template-columns: 1fr;
    }
    .service-list-feature-cell {
      padding: 1rem 1.25rem;
    }
  
    /* Project filter — bottom sheet */
    .filter-panel {
      position: fixed;
      top: auto;
      bottom: 0;
      left: 0;
      right: 0;
      max-width: 100%;
      min-width: 0;
      border-radius: 16px 16px 0 0;
      animation: filter-panel-slide-up 0.25s ease;
    }
    .filter-panel-header {
      display: flex;
    }
    .filter-panel-body {
      max-height: 70vh;
      padding: 0.75rem;
    }
    .filter-option {
      padding: 1rem 1.25rem;
      font-size: 1rem;
    }
  
    .project-filter-bar-new {
      gap: 0.75rem;
    }
    .filter-count-text {
      font-size: 0.875rem;
    }
    .filter-btn-prominent {
      padding: 0.5rem 1rem;
      font-size: 0.8125rem;
    }
  
    .filter-btn-active-label {
      display: none !important;
    }
    .filter-btn-prominent.has-active-filter::after {
      content: "";
      position: absolute;
      top: 6px;
      right: 8px;
      width: 8px;
      height: 8px;
      background: linear-gradient(90deg,rgb(237, 241, 245) 1%, rgba(218, 232, 249, 1) 25%, rgba(219, 235, 246, 1) 75%, rgb(227, 246, 249) 100%) !important;
      border-radius: 50%;
    }
  
    .service-list-splide .service-list-arrow,
    .service-list-arrow,
    .product-list-arrow {
      display: none !important;
    }
  }
  
  @media (max-width: 575.98px) {
    .nav-main-link {
      font-size: 1.7rem;
    }
    .nav-link-group{
      gap: 0.3rem !important;
    }
    .project-slide-media {
      height: 250px;
    }
    .project-filter-media {
      height: 220px;
    }
    .footer-logo {
      transform: scale(1);
    }
    .site-footer .row > div {
      flex: 0 0 100% !important;
      max-width: 100% !important;
      margin-left: 0 !important;
    }
    .site-footer .offset-lg-1 {
      margin-left: 0 !important;
    }
    .site-footer .d-flex.flex-md-row {
      text-align: center;
    }
    .site-footer .d-flex.flex-md-row .d-flex.gap-4 {
      justify-content: center;
    }
    .partner-logo-img {
      max-width: 200px;
      height: 90px;
    }
  
    .partner-logos-section .g-4 {
      --bs-gutter-y: 1.5rem !important;
      --bs-gutter-x: 1rem !important;
    }
    .service-list-media {
      aspect-ratio: 4 / 3;
    }
    .product-strip {
      aspect-ratio: 4 / 5;
    }
    .product-strip-content {
      max-width: 100%;
      top: auto;
      bottom: 0;
      transform: none;
    }
    .product-strip-title {
      font-size: 1.5rem;
    }
    .product-strip-gradient {
      background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0) 0%,
        rgba(0, 0, 0, 0.1) 40%,
        rgba(0, 0, 0, 0.7) 100%
      );
    }
    .product-row-media {
      aspect-ratio: 4 / 3;
    }
    .intro-section-item {
      grid-template-columns: 32px 1fr auto;
      gap: 0.75rem;
    }
  
    /* Datenschutz */
    .datenschutz-hero-light {
      padding-top: 80px;
    }
    .datenschutz-hero-actions {
      gap: 1rem;
    }
    .datenschutz-hero-price-value {
      font-size: 1.5rem;
    }
    .datenschutz-price-amount {
      font-size: 2.75rem;
    }
    .datenschutz-format-preview {
      height: 240px;
    }
    .datenschutz-pdf-paper {
      width: 80%;
      padding: 0.875rem 0.75rem;
      gap: 5px;
    }
    .datenschutz-pdf-h {
      height: 7px;
      margin-bottom: 3px;
    }
    .datenschutz-pdf-badge {
      bottom: 10px;
      right: 10px;
      font-size: 0.625rem;
      padding: 3px 8px;
    }
    .datenschutz-code-window {
      font-size: 0.625rem;
    }
    .datenschutz-code-tab {
      padding: 6px 10px;
    }
    .datenschutz-code-body {
      padding: 8px 10px;
      gap: 3px;
    }
    .datenschutz-question-row {
      grid-template-columns: 40px 1fr;
      padding: 1.25rem 0;
    }
    .datenschutz-question-text {
      font-size: 1rem;
    }
    .datenschutz-edoeb-callout {
      padding: 1rem 1.25rem;
      font-size: 0.875rem;
    }
    .datenschutz-generator-section {
      padding-top: 80px;
    }
    #angebot {
      scroll-margin-top: 550px;
    }
    .about-hero-slider-area {
      gap: 0 !important;
    }
    .about-hero-arrow {
      z-index: 3;
    }
    .about-hero-slider-area {
      margin-top: -250px;
    }
    .kk-card {
      max-width: 100% !important;
    }
    .contact-split-head-wrap {
      padding: 2rem 0 14rem;
    }
    .contact-split-bottom-area {
      margin-top: -240px;
    }
  }
  
  @keyframes filter-panel-slide-up {
    from {
      transform: translateY(100%);
    }
    to {
      transform: translateY(0);
    }
  }