:root{
          --business-background: #aabe92;
          --business-text: #aabe92;
          --business-white: #ffffff;
      }
      .cms-index-index #maincontent, .cms-page-view #maincontent {
          position: relative;
          margin-top: 135px;
          background-color: #333;
          padding-top: 30px;
      }

      @media (max-width: 1200px) {
          .cms-index-index #maincontent, .cms-page-view #maincontent {
              position: relative;
              margin-top: 70px;
              padding-top: 50px !important;
          }
      }

      .footer {
        margin-top:0px !important;
      }

      .page-title-wrapper2 {
          background-color: #666 !important;
      }

      .page-title-wrapper2 h1, .page-title-wrapper2 .h1 {
          color: var(--business-white) !important;
      }

      .nohrd-business-menu, li.nohrd-business-menu > a.level0 {
          color: var(--business-white) !important;
      }

      .nohrd-business-menu, li.nohrd-business-menu > a.level0:hover {
          color: var(--business-text) !important;
      }

      .nohrd-business-contact, li.nohrd-business-contact > a.level0 {
          color: var(--business-text) !important;
      }
      
      .nohrd-business-contact, li.nohrd-business-contact > a.level0:hover {
          color: var(--business-text) !important;
      }

      .sub-nav-nohrd li:not(:first-child):before {
          content: " | ";
          margin-right: 5px;
          color:white !important;
          font-weight: 400 !important;
      }
      @media (max-width: 1200px) {
      .sub-nav-nohrd li:not(:first-child):before {
          content: " | ";
          margin-right: 1px;
          color:white;
          font-weight: 400 !important;
          }
      }

      .h2-head-business{
          font-family: forma-djr-deck, sans-serif;
          font-weight: 400;
          font-style: normal;

          color: var(--business-text);
          text-transform: uppercase;

          line-height: 1.2;
          font-size: clamp(28px, 4.2vw, 56px);

          letter-spacing: clamp(2px, .6vw, 5px);
          padding: clamp(40px, 6vw, 70px) 0 5px 0;

          margin: 0;
      }
      .h2-subhead-grey {
          font-family: forma-djr-deck, sans-serif;
          font-weight: 400;
          font-style: normal;
          letter-spacing: 2px;
          color: #999;
          line-height:1.2em;
          font-size:20px;
          padding: 5px 0px 70px 0px;
      }
      @media (max-width: 1200px) {
      .h2-subhead-grey {
          font-family: forma-djr-deck, sans-serif;
          font-weight: 400;
          font-style: normal;
          letter-spacing: 1px;
          color: #999;
          line-height:1.2em;
          font-size:14px;
          padding: 5px 0px 70px 0px;
          }
      }

      .h3-head-business {
          color: var(--business-text);
          font-size: clamp(30px, 2vw, 40px);
          line-height: 1;
          font-family: forma-djr-deck, sans-serif;
          font-weight: 400;
          font-style: normal;
          text-transform: uppercase;
          padding-bottom: 30px;
          letter-spacing: 3px;
      }
      
      .cfd-head-business {
          color: var(--business-text); 
          font-size: 40px; 
          line-height: 1;
          font-family: forma-djr-deck, sans-serif;
          font-weight: 400;
          font-style: normal;
          text-transform: uppercase;
          padding-bottom: 30px;
          letter-spacing: 3px;
      }
      .cfd-text-white {
          color:white; 
          font-size: 20px; 
          line-height: 2; 
          font-family: din-2014, sans-serif;
          font-weight: 100;
          font-style: normal;
      }

    .btn-next2 {
          background-color: #DBCFBF !important;
          font-family: din-2014, sans-serif !important;
          font-weight: 400 !important;
          font-style: normal !important;
          text-transform: uppercase !important;
          color: black !important;
          border-radius: 2px !important;    
          padding-top: 3px !important;
          border:0px !important;
          margin:20px 0px 20px 0px;
      }
      .btn-next2:hover {
          color: #333 !important;
          background-color: #DBCFBF !important;
          opacity: 0.8 !important;
      }
      .menu2 {
          background-color: #333 !important;
      }
      .dropdown-wrapper.menu2 .btn-dropdown-submenu2 > span{
          color: #fff;
      }
      .dropdown-submenu {
        background-color: #333 !important;
      }
      .menu-button-shop.sticky2 li.go-to-shop2 a.level0 > span:not(.sr-only) { 
          color: white !important;
          font-weight: 600 !important;
          background-color: var(--business-background) !important;
          padding: 5px 15px 5px 15px !important;
          border-radius: 20px !important;
          position: relative !important;
          top: 5px !important;
      }

      .btn-business {
          background-color: var(--business-background) !important;
          font-family: din-2014, sans-serif !important;
          font-weight: 400 !important;
          font-style: normal !important;
          text-transform: uppercase !important;
          color: black !important;
          border-radius: 6px !important;
          padding-top: 3px !important;
          border: 0px !important;
          margin: 10px 0px 10px 0px;
          transition: transform .12s ease, opacity .12s ease;

        }

      .btn-business:hover {
          color: #333 !important;
          background-color: #cbef9e !important;
      }

      .btn-business:active{
          transform: translateY(1px);
          opacity: .85;
      }
      .tile-slider-peek {
        --peek: 80px;
        --gap: 20px;
        --cols: 4;
        --pill-bg: rgba(255,255,255,.10);
        --pill-border: rgba(255,255,255,.14);
        margin: 50px 0px 50px 0px;
      }

      .tile-slider-peek-medium {
        --cols: 3;
        --peek: 60px;
        --gap: 24px;
      }

      .tile-slider-peek-large {
        --cols: 2;
        --peek: 40px;
        --gap: 30px;
      }
      @media (hover: hover) and (pointer: fine) {
        .tile-slider-peek .tile:hover,
        .tile-slider-peek-medium .tile:hover,
        .tile-slider-peek-large .tile:hover {
          transform: scale(1.04);
          z-index: 3;
        }
      }

      .tile-slider-peek .tile,
      .tile-slider-peek-medium .tile,
      .tile-slider-peek-large .tile{
        position: relative;
      }

      .tile-snap{
        display: flex;
        gap: var(--gap);

        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;

        padding: 16px var(--peek);
        scroll-padding-left: var(--peek);

        overscroll-behavior-x: contain;
        scrollbar-width: none;
      }

      .tile-snap::-webkit-scrollbar{ display:none; }

      .tile-snap .tile{
        flex: 0 0 calc(
          (100% - (var(--peek) * 2) - (var(--gap) * (var(--cols) - 1)))
          / var(--cols)
        );
      }


      @media (hover: hover) and (pointer: fine){
        .tile-snap{ overflow-y: visible; }
      }


      .tile-snap::-webkit-scrollbar{ display:none; }

      /* === ACTIVE TILE (wie im Screenshot: eine Kachel dauerhaft größer) === */
      .tile-slider-peek .tile {
          scroll-snap-align: start;
          display:block;
          transition: transform 220ms ease, opacity 220ms ease, filter 220ms ease;
          transform-origin: center;
          will-change: transform;
          position: relative;
          z-index: 1;

          /* Baseline: alle normal groß */
          transform: scale(1);
          opacity: .85;
          filter: saturate(.98);
          cursor: col-resize;
      }
          
      .tile img{ display:block; width:100%; height:auto; border-radius: 20px; }

      @media (max-width: 1200px){
        .tile-slider-peek,
        .tile-slider-peek-medium,
        .tile-slider-peek-large{ --cols: 2; --peek: 40px; }
      }
      @media (max-width: 768px){
        .tile-slider-peek,
        .tile-slider-peek-medium,
        .tile-slider-peek-large{ --cols: 1; --peek: 24px; }
      }

      /* Peek-Slider: Snap während des Scrollens deaktivieren (gegen Rubberband) */
      .tile-slider-peek .tile-snap.is-scrolling,
      .tile-slider-peek-medium .tile-snap.is-scrolling,
      .tile-slider-peek-large .tile-snap.is-scrolling{
        scroll-snap-type: none !important;
      }

      .snap-nav{
        display:flex;
        align-items:center;
        justify-content:center;
        gap: 14px;
        padding: 20px 0 0;
      }

      .snap-prev, .snap-next{
        width: 44px;
        height: 44px;
        border-radius: 999px;
        border: 1px solid var(--pill-border);
        background: var(--pill-bg);
        color: white;
        font-size: 22px;
        line-height: 1;
        cursor: pointer;
      }

      .snap-prev:disabled, .snap-next:disabled{
        opacity: .35;
        cursor: default;
      }

      .snap-track{
        position: relative;
        width: min(640px, 72vw);
        height: 4px;
        border-radius: 999px;
        background: rgba(255,255,255,.25);
        overflow: hidden;
        cursor: pointer;
      }

      .snap-indicator{
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        left: 0;
        height: 4px;
        width: 18%;
        border-radius: 999px;
        background: #aabe92;
        opacity: .95;
        transition: transform 120ms ease, width 120ms ease;
      }
      .tile-snap-text {
        padding: 20px;
        margin-top: 20px;
      }
      .h4-head-business {
        color: var(--business-white);
        font-size: clamp(18px, 2vw, 24px);
        line-height: 1.2;
        letter-spacing: 1px;
        font-family: forma-djr-deck, sans-serif;
        font-weight: 600;
        font-style: normal;
        text-transform: uppercase;
        padding-bottom: 20px;
      }
      .business-text-white {
        color: var(--business-white);
        font-size: clamp(16px, 1.8vw, 24px);
        line-height: 1.5;
        font-family: din-2014, sans-serif;
        font-weight: 100;
        font-style: normal;
      }
      .business-category-description {
        padding: 30px;
      }
      .business-category-image {
        border-radius: 20px;
      }

    .reveal {
        opacity: 0;
        transform: translateY(24px);
        transition: opacity 1s ease, transform 1s ease;
      }
      .reveal.is-visible {
        opacity: 1;
        transform: translateY(0);
      }

      /* 16:9 Tiles */
      .image-16-9 { aspect-ratio: 16/9; width:100%; height:auto; }

      /* Center Slider */
      .tile-slider-center {
        --gap: 30px;
        --card: min(92vw, 1100px);
      }

      .tile-snap-center{
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: var(--card);
        gap: var(--gap);

        overflow-x: auto;
        overflow-y: visible;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;

        /* wichtig: Platz links/rechts, damit Center-Snap funktioniert */
        padding: 10px calc(50% - (var(--card) / 2));
      }
      .tile-snap-center::-webkit-scrollbar{ display:none; }

      .tile-snap-center .tile{
        scroll-snap-align: center;   /* <-- always centers on snap */
        display:block;
        position: relative;
      }

      /* optional: leichte Abdunklung unten für Lesbarkeit */
      .tile-snap-center .tile::after{
        content:"";
        position:absolute;
        left:0; right:0; top:0;
        height: 55%;
        border-radius: 20px;
        background: linear-gradient(to top, rgba(0,0,0,0), rgba(0,0,0,.55));
        opacity: 0;
        transition: opacity 2800ms ease;
        pointer-events:none;
      }

      .tile-snap-center .tile .tile-caption{
        position:absolute;
        left: 22px;
        right: 22px;
        top: 22px;
        z-index: 2;
        
        opacity: 0;
        transform: translateY(10px);
        transition: opacity 2800ms ease, transform 2800ms ease;
        pointer-events: none;

        color:#fff;
        text-shadow: 0 10px 30px rgba(0,0,0,.55);
      }

      .tile-snap-center .tile.is-active .tile-caption{
        opacity: 1;
        transform: translateY(0);
      }

      .tile-snap-center .tile.is-active::after{
        opacity: 1;
      }

      /* Typo (optional) */
      .tile-caption .tile-eyebrow{
        font-size: 12px;
        letter-spacing: 1px;
        text-transform: uppercase;
        opacity: .85;
        font-family: din-2014, sans-serif;
        font-weight: 300;
        font-style: normal;
        
      }
      .tile-caption .tile-title{
        font-size: 40px;
        font-weight: 600;
        line-height: 1.15;
        margin-top: 6px;
        font-family: din-2014, sans-serif;
        font-weight: 200;
        text-transform: uppercase;
      }
      .tile-caption .tile-subtitle{
        font-size: 14px;
        opacity: .9;
        margin-top: 6px;
        font-family: din-2014, sans-serif;
        font-weight: 100;
        font-style: normal;
      }
          

      .tile-snap-center .tile img{
        display:block;
        width:100%;
        height:auto;
        border-radius: 20px;
      }

      /* === Center Slider Navigation (Pfeile + Fortschrittsbalken) === */
      .center-nav{
        display:flex;
        align-items:center;
        justify-content:center;
        gap: 14px;
        padding: 18px 0 0;
      }

      .center-prev, .center-next{
        width: 44px;
        height: 44px;
        border-radius: 999px;
        border: 1px solid rgba(255,255,255,.14);
        background: rgba(255,255,255,.10);
        color: #fff;
        font-size: 22px;
        line-height: 1;
        cursor: pointer;
      }

      .center-prev:disabled, .center-next:disabled{
        opacity: .35;
        cursor: default;
      }

      .center-track{
        position: relative;
        width: min(760px, 72vw);
        height: 4px;
        border-radius: 999px;
        background: rgba(255,255,255,.25);
        overflow: hidden;
        cursor: pointer;
        touch-action: none;
      }

      .center-indicator{
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        left: 0;
        height: 4px;
        width: 18%;
        border-radius: 999px;
        background: #aabe92;
        opacity: .95;
        transition: transform 120ms ease, width 120ms ease;
      }

      @media (max-width: 768px){
        .center-track{
          width: min(640px, 76vw);
        }
      }

      /* iOS/Safari Fix: Modal muss sicher über dem Backdrop liegen */
    .modal {
      z-index: 1050 !important;
    }

    .modal-backdrop {
      z-index: 1040 !important;
    }

  .modal-fullscreen .modal-dialog {
    width: 90%;
    height: 90%;
    margin: 5vh auto;
  }

  .modal-dialog,
  .modal-content {
    position: relative;
    z-index: 1060;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
  .modal-content {
    border-radius: 22px;
    border: none;
    background-color: #efefef;
    box-shadow: 0 25px 70px rgba(0, 0, 0, 0.35);
    overflow: hidden; /* sorgt dafür, dass Rundungen auch bei Inhalt sauber greifen */
  }

  .modal-fullscreen .modal-body {
    height: calc(100% - 120px);
    overflow-y: auto;
  }

.modal-backdrop.in {
  background-color: rgba(0,0,0,0.75);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

  /* ===== Galerie Layout ===== */
  .modal-gallery {
    display: flex;
    flex-wrap: wrap;
  }

  /* etwas Luft zwischen Main und Thumb-Spalte auf sm+ */
  @media (min-width: 768px) {
    .modal-gallery > [class*="col-"] {
      padding-left: 10px;
      padding-right: 10px;
    }
  }

  /* Wrapper müssen positioned sein */
  .modal-main-image,
  .modal-thumb {
    position: relative;
    overflow: hidden;
  }

  /* Rundungen */
  .modal-main-image { border-radius: 18px; }
  .modal-thumb { border-radius: 12px; }

  /* Bilder sauber */
  .modal-main-image img,
  .modal-thumb img {
    display: block;
    width: 100%;
    height: auto;
    background: transparent; /* wichtig gegen "weiße Inseln" */
  }

  /* 5% Grau-Overlay (exakt gleich) */
  .modal-main-image::after,
  .modal-thumb::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(128,128,128,0.05);
    pointer-events: none;
  }

  @media (max-width: 767px) {
  .modal-main-image {
    margin-bottom: 18px; /* Abstand zu den Thumbs */
  }
}

  /* 2x2 thumbs etwas kompakter auf sehr kleinen Screens */
  @media (max-width: 767px) {
    .modal-thumb { margin-bottom: 12px; }
  }

  .modal-thumbs {
  margin-left: -7px;
  margin-right: -7px;
}

.modal-thumbs .col-xs-6 {
  padding-left: 7px;
  padding-right: 7px;
  margin-bottom: 14px;
}

   /* ===== Rechte Spalte ===== */
  .modal-tech {
  padding-left: 20px;
  }

  .modal-tech h4 {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 20px;
  }

  .modal-tech-dl dt {
    text-transform: uppercase;
    font-size: 13px;
    opacity: 0.6;
    padding-top:15px;
  }

  .modal-tech-dl dd {
    font-size: 16px;
    font-weight: 500;
  }

  .btn-close {
    background: none;
    border: none;
    padding: 0;
    font-size: 24px;
    line-height: 1;
    color: #333;
    opacity: 0.6;
    transition: opacity 0.2s ease;
  }
  .btn-close:hover,
  .btn-close:focus,
  .btn-close:active {
    background: none;
    border: none;
    box-shadow: none;
    color: black;
  }