@charset "UTF-8";

/* globale Container Breite -------------------------*/
        .sumo-container-width {
          max-width: 1500px;
          width: 100%;
          margin: 0 auto;
        }



/* Text Weiss Grösse -------------------------------------------------*/
        .sumo-text {
          font-size: 16px;
          color: #FFFFFF;
          font-weight: normal;
          /*font-family: Arial, sans-serif;*/
          line-height: 1.5;
        }

        @media (max-width: 1200px) {
          .sumo-text {
            font-size: 16px;
          }
        }

        @media (max-width: 768px) {
          .sumo-text {
            font-size: 13px;
          }
        }




/* Text Black Grösse -------------------------------------------------*/
        .sumo-text-black {
          font-size: 18px;
          color: #000000;
          text-align: center;
          font-weight: normal;
          /*font-family: Arial, sans-serif;*/
          line-height: 1.5;
        }

        @media (max-width: 1200px) {
          .sumo-text-black {
            font-size: 16px;
          }
        }

        @media (max-width: 768px) {
          .sumo-text-black {
            font-size: 14px;
          }
        }

/* Überschrift black -------------------------*/
        .sumo-text-black-heading {
          font-size: 22px;
          color: #000000;
          text-align: center;
          font-weight:bold;
          /*font-family: Arial, sans-serif;*/
          line-height: 1;
        }

        @media (max-width: 768px) {
          .sumo-text-black-heading {
            font-size: 17px;
          }
        }




/* Top dynamic div -------------------------------------------------*/
        .sumo-dynamic-div {
          width: 100%;
          height: 50vw;
        }

        /* Falls Viewport Portrait (höher ist als breit) */
        @media (max-aspect-ratio: 1/1) {
          .sumo-dynamic-div {
            height: 40vh;
          }
        }

        /* Falls Viewport Landscape (breiter ist als hoch) */
        @media (min-aspect-ratio: 1/1) {
          .sumo-dynamic-div {
            height: 30vw;
          }
        }


/*  dynamic div Shorts -------------------------------------------------*/
        .sumo-dynamic-div-shorts {
          width: 100%;
          height: 30vw;
        }

        /* Falls Viewport Portrait (höher ist als breit) */
        @media (max-aspect-ratio: 1/1) {
          .sumo-dynamic-div-shorts {
            height: 40vh;
          }
        }

        /* Falls Viewport Landscape (breiter ist als hoch) */
        @media (min-aspect-ratio: 1/1) {
          .sumo-dynamic-div-shorts {
            height: 40vw;
          }
        }


/*  dynamic div Fuss -------------------------------------------------*/
        .sumo-dynamic-div-fuss {
          width: 100%;
          height: 30vw;
        }

        /* Falls Viewport Portrait (höher ist als breit) */
        @media (max-aspect-ratio: 1/1) {
          .sumo-dynamic-div-fuss {
            height: 20vh;
          }
        }

        /* Falls Viewport Landscape (breiter ist als hoch) */
        @media (min-aspect-ratio: 1/1) {
          .sumo-dynamic-div-fuss {
            height: 30vh;
          }
        }


/* Abstand Halter vertikal -------------------------------------------------*/
        .sumo-spacer-30 {
          height: 30vh;
        }

        .sumo-spacer-20 {
          height: 20vh;
        }

        .sumo-spacer-10 {
          height: 10vh;
        }

        .sumo-spacer-5 {
          height: 5vh;
        }

        .sumo-spacer-2 {
          height: 2vh;
        }



/* Clients Container Breite -------------------------*/
        .sumo-container-clients-width {
          max-width: 1500px;
          width: 100%;
          margin: 0 auto;
          padding-left: 10vw;
          padding-right: 10vw;
          box-sizing: border-box;
        }


/* div visibility -------------------------------------------------*/
        #sumo-div-visibility {
          display: none;
        }

        @media (min-width: 900px) {
          #sumo-div-visibility {
            display: block;
          }
        }



/* Links bleiben durch Bild klickbar (Navbar+Home Fuss BG) -------------------------------------------------*/
        sumo-img.overlay {
          pointer-events: none;
        }



/* Lightboxes nach vorne -------------------------------------------------*/
        .uk-lightbox {
          z-index: 5000 !important;
        }


/* Modals nach vorne -------------------------------------------------*/
        .uk-modal {
          z-index: 5000 !important;
        }



/* eigene grid elemente-anzahl pro reihe -------------------------*/
        .uk-child-width-1-7 > * {
          width: 14.27%; /* 100 / 7 */
        }

        .uk-child-width-1-8 > * {
          width: 12.5%; /* 100 / 8 = 12.5 */
        }




/* eigene Linien  -------------------------*/
        hr.sumo-line {
          height: 1px;
          background-color: #B8B8B8;
          border: none;
          margin-top: -70px;
        }




/* eigenes overlay mit formatierung ------------------------- */
        .custom-overlay {
          left: 0;
          right: 0;
          bottom: 0;
          padding: 10px 20px;
          box-sizing: border-box;
          background-color: #FF7500;
        }

        .custom-overlay p {
          margin: 0;
          font-size: 16px;
        }




/* von links / rechts einruecken -------------------------*/
        .sumo-right-shift {
          margin-left: 2vw;
        }

        .sumo-left-shift {
          margin-right: 2vw;
        }





/* Navbar -------------------------*/
        .sumo-navbar-color {
          background-color: #c26601;
          color: #ffffff;
        }

        .sumo-navbar-height {
          height: 40px;
        }

        .sumo-navbar-width {
          height: 100%;
        }

        .sumo-navbar-left-shift {
          margin-right: 5vw;
        }


        /* eigener Active Effekt -------------------------*/
        .uk-navbar-nav > li.uk-active > a {
          color: #ff6600;
          position: relative;
              display: inline-block;
          transform: translateY(25px);
          transition: transform 0.3s ease;
        }

        .uk-navbar-nav > li.uk-active > a::after {
          content: "";
          position: absolute;
          left: 0;
          bottom: 58px;
          width: 100%;
          height: 1px;
          background: #ffffff;
          animation: underline-slide 0.3s ease-in-out forwards;
        }

        @keyframes underline-slide {
          from {
            width: 0;
          }
          to {
            width: 100%;
          }
        }





/*  Ueberschrift Center w/ Lines weiss -------------------------*/
        .title-with-lines {
          display: flex;
          align-items: center;
          justify-content: center;
          color: white;
          font-size: 23px;
          position: relative;
          margin-top: 30px;
          margin-bottom: 30px;
          margin-left: 0px;
        }

        .title-with-lines::before,
        .title-with-lines::after {
          content: "";
          display: inline-block;
          width: 10vw; /* ← hier definierst du die feste Länge */
          height: 1px;
          background: #ffffff;
          margin: 10px;
        }

        @media (max-width: 900px) {
          .title-with-lines {
            font-size: 19px; 
          }
        }

        @media (max-width: 570px) {
          .title-with-lines {
            font-size: 16px;
            /*margin-left: 80px;*/
          }
          .title-with-lines.uk-sticky-fixed {
            transform: translate(50px, 10px);
          }
        }


        /*  Ueberschrift Center w/ Lines schwarz -------------------------*/
        .title-with-lines-black {
          display: flex;
          align-items: center;
          justify-content: center;
          color: #000000;
          font-size: 23px;
          position: relative;
          margin-top: 40px;
          margin-bottom: 40px;
        }

        .title-with-lines-black::before,
        .title-with-lines-black::after {
          content: "";
          display: inline-block;
          width: 10vw; /* ← hier definierst du die feste Länge */
          height: 1px;
          background: #000000;
          margin: 10px;
        }



/* Scroll Fade -------------*/
        .sumo-scroll-fade {
          opacity: 0;
          transition: opacity 0.3s ease;
        }

        .sumo-scroll-fade.visible {
          opacity: 1;
        }




/* Menu Titel einblenden -------------*/
        .uk-navbar-center .title-with-lines {
          opacity: 0;
          transition: opacity 0.5s ease;
        }

        .uk-sticky.uk-active .uk-navbar-center .title-with-lines {
          opacity: 1;
              transition: opacity 0.5s ease;
        }

        .my-sticky-element {
          transition: all 0.3s ease;
        }

        .is-sticky {
          left: -30vw;
        }


/* kleines Logo einblenden -------------*/
        /*blenden*/
        /*.logo-klein {
          position: fixed;
          top: 0vh;
          left: 1vw;
          width: auto;
          height: 107px;
          opacity: 0;
          z-index: 3000;
          transition: opacity 0.0s ease-in;
        }

        .logo-klein.visible {
          opacity: 1;
          transition: opacity 0.7s ease-out;
        }*/

        /*slide*/
        .logo-klein-slide {
          position: fixed;
          top: 0vh;
          left: 1vw;
          width: auto;
          height: 107px;
          transform: translateY(-120%);
          z-index: 3000;
          transition: transform 0s ease-in;
        }

        .logo-klein-slide.visible {
          transform: translateY(0);
          transition: transform 0.8s ease-out;
        }

                /* Ab hier: verkleinere Logo bei entspr.Viewportbreite */
                @media (max-width: 800px) {
                  .logo-klein-slide {
                    height: 70px; /* 107px / 2 */
                    top: 21px;
                  }
                }

                @media (max-width: 540px) {
                  .logo-klein-slide {
                    height: 55px; 
                    top: 26px;
                  }
                }

                /*@media (max-width: 470px) {
                  .logo-klein-slide {
                    height: 45px; 
                    top: 29px;
                  }
                }*/


/* allg. Farben -------------------------*/

        .sumo-body-bgcolor {
          background-color: #141414;
          color: #FFFFFF;
        }

        .sumo-movies-bgcolor {
          background-color: #2E0200; /* 842b00 ← alte farbe */
          color: #ffffff;
        }

        .sumo-series-bgcolor {
          background-color: #254451;
          color: #ffffff;
        }

        .sumo-shorts-bgcolor {
          background-color: #000000;
          color: #ffffff;
        }

        .sumo-clients-bgcolor {
          background-color: #ffffff;
          color: #222222;
        }

        .sumo-services-bgcolor {
          background-color: #303030;
          color: #FFFFFF;
        }

        .sumo-kontakt-bgcolor {
          background-color: #E5E5E5;
          color: #FFFFFF;
        }




/*   ---------------------------------------------------------------------------------*/
/*  Home -------------------------*/
        .sum-home-grid-container {
          display: flex;
          flex-wrap: nowrap;
          width: 100%;
          height: auto;
        }

        /* Center-Spalte (immer 60%) */
        .sum-home-grid-center {
          width: 60%;
          /*background: #ddd;*/
        }

        /* Grid 1 + 3 mit 10% | 50% | 40% */
        .sum-home-grid-25 {
          width: 25%;
          /*background: #B1B1B1;*/
        }

        .sum-home-grid-15 {
          width: 15%;
          /*background: #f0f0f0;*/
        }

        /* Grid 2: 20% | 60% | 20% */
        .sum-home-grid-20 {
          width: 20%;
          /*background: #e0e0e0;*/
        }





        /* Home Fuss -------------------------*/
        .sumo-position-container {
          position: relative;
          overflow: visible;
        }

        .sumo-background-img {
          position: absolute;
          bottom: -50px;
          right: 0;
          max-width: 100%;
          max-height: 100%;
          pointer-events: none;
        }

        .sumo-background-kontakt {
          background-image: url('media/05_Kontakt/BG_fmz.jpg');
          background-repeat: no-repeat;
          background-position: bottom right;
          background-size: 30vw auto;
          background-attachment: scroll;
          position: relative;
        }





/*   ---------------------------------------------------------------------------------*/
/*  Projekte -------------------------*/


        /*  Series Plakat -------------------------*/
        .plakat-box {
          display: flex;
          flex-direction: column;
          justify-content: flex-start;
          position: relative;
          text-align: center;
          height: 100%;
        }

        .plakat-title {
          display: block;
          color: #fff;
          width: 100%;
          text-align: center;
          /*min-height: 0.5em; /* je nach gewünschter Textzeilenhöhe anpassen */
          display: flex;
          align-items: center;
          justify-content: center;
          padding: 0 0px;
          text-wrap: balance;
          margin-top: 10px;
        }

        .plakat-title-small {
          display: block;
          color: #F3F3F3;
          font-size: 12px;
          width: 100%;
          text-align: center;
          /*min-height: 3.5em; /* je nach gewünschter Textzeilenhöhe anpassen */
          display: flex;
          align-items: center;
          justify-content: center;
          padding: 0 5px;
          text-wrap: balance;
          margin-bottom: 3px;
        }

        .plakat-title-sub {
          display: block;
          color: #9C9C9C;
          font-size: 12px;
          width: 100%;
          text-align: center;
          /*min-height: 3.5em; /* je nach gewünschter Textzeilenhöhe anpassen */
          display: flex;
          align-items: center;
          justify-content: center;
          padding: 0 5px;
          text-wrap: balance;
          margin-bottom: 15px;
        }

        .plakat-box img {
          display: block;
          width: 100%;
          height: auto;
          flex-shrink: 0;
        }

        .plakat-box .uk-overlay {
          width: 100%;
          box-sizing: border-box;
          color: #FFFFFF;
          background-color: #FF7500 !important; 
          margin-top: auto;
        }


        /*  Series Modal -------------------------*/
        .sumo-modal {
          width: 1500px;
          max-width: 90vw;
          background: #1E1E1E;
          border: 1px solid #ffffff;
          border-radius: 4px;
        }


        .modal-title {
          display: block;
          color: #fff;
          font-size: 22px;
          width: 100%;
          text-align: left;
          /*min-height: 0.5em; /* je nach gewünschter Textzeilenhöhe anpassen */
          display: flex;
          align-items: left;
          justify-content: left;
          padding: 0 0px;
          text-wrap: balance;
          margin-top: 10px;
        }

        .modal-title-small {
          display: block;
          color: #F3F3F3;
          font-size: 17px;
          width: 100%;
          text-align: left;
          /*min-height: 3.5em; /* je nach gewünschter Textzeilenhöhe anpassen */
          display: flex;
          align-items: left;
          justify-content: left;
          padding: 0 5px;
          text-wrap: balance;
          margin-bottom: 3px;
        }

        .modal-title-sub {
          display: block;
          color: #9C9C9C;
          font-size: 15px;
          width: 100%;
          text-align: left;
          /*min-height: 3.5em; /* je nach gewünschter Textzeilenhöhe anpassen */
          display: flex;
          align-items: left;
          justify-content: left;
          padding: 0 5px;
          text-wrap: balance;
          margin-bottom: 15px;
        }





/*   ---------------------------------------------------------------------------------*/
/*  Services -------------------------*/
        /* Überschrift-Stil */
        .sumo-services-heading {
          font-size: 19px;
          color: #FF7000;
          font-weight: bold;
          /*font-family: Arial, sans-serif;*/
        }
            @media (max-width: 1200px) {
              .sumo-services-heading {
                font-size: 17px;
              }
            }

            @media (max-width: 768px) {
              .sumo-services-heading {
                font-size: 15px;
              }
            }



        /* Fließtext-Stil */
        .sumo-services-bodytext {
          font-size: 16px;
          color: #FFFFFF;
          font-weight: normal;
          /*font-family: Arial, sans-serif;*/
          line-height: 1.5;
        }



        /* Links Services -------------------------*/
                /* Desktop-Ansicht: linke Tabs */
                .uk-tab-left > li > a {
                  font-size: 18px;
                  color: #ffffff;
                  font-weight: 400;
                  border-color: #ff6600;
                  text-decoration: none;
                  transition: color 0.3s ease;
                }


                .uk-tab-left > li > a:hover {
                  color: #ff9900;
                }

                .uk-tab-left > li.uk-active > a {
                  color: #ff6600;
                  font-weight: 400;
                  border-right: 2px solid #ff6600;
                }

                /* Mobile-Ansicht: horizontale Tabs über dem Text */
                @media (max-width: 959px) { /* UIkit Breakpoint für M und kleiner */
                  .uk-tab > li > a {
                    font-size: 14px;
                    color: #A3A3A3;
                    font-weight: 400;
                    text-decoration: none;
                    transition: color 0.3s ease;
                  }

                  .uk-tab > li > a:hover {
                    color: #ff9900;
                  }

                  .uk-tab > li.uk-active > a {
                    color: #ff6600;
                    font-weight: 400;
                    border-bottom: 2px solid #ff6600;
                  }
                }



        /* Akkordion  -------------------------*/
            .uk-accordion-title {
              position: relative;
              padding-left: 30px;
              padding-right: 20px;
              padding-top: 5px;                
            }

            .uk-accordion-content{
              background-color: #3F3F3F;
                margin: 0;
                padding-left: 20px;
                padding-right: 40px;
                padding-top: 40px;
            }

                .uk-accordion > li > a {
                  font-size: 18px;
                  color: #BEBEBE;
                  font-weight: 400;
                  border-color: #ff6600;
                  text-decoration: none;
                  transition: color 0.3s ease;
                }


                .uk-accordion > li > a:hover {
                  color: #ff9900;
                }
            




        /* Akkodrion Title active Farbe -------------------------*/
            .uk-accordion li.uk-open > a.uk-accordion-title {
              color: #ff6600;
              background-color: #3F3F3F;
            }
            /* Orangene vertikale Linie */
            .uk-accordion li.uk-open > .uk-accordion-title::after {
              content: "";
              position: absolute;
              left: 18px;
              top: 5px;
              bottom: 5px;
              width: 2px;
              background-color: #ff7f00;
            }



/*   ---------------------------------------------------------------------------------*/
/* Kontakt -------------------------*/
    /* Feste mittlere Spalte */
    .sumo-center-col {
      width: 25vw;
      min-width: 190px;
      margin-left: 20px;
    }

    /* Linke und rechte Spalten unterschiedlich flexibel */
    .sumo-left {
      flex: 3 1 0;
      min-width: 150px;
    }

    .sumo-right {
      flex: 1 1 0;
    }

            /* Ab Viewportbreite: beide gleich groß */
            @media (min-width: 800px) {
              .sumo-left,
              .sumo-right {
                flex: 1 1 0;
              }
            }



/*   ---------------------------------------------------------------------------------*/
/* Fuss -------------------------*/

.custom-fade {
  opacity: 0;
  transition: opacity 0.7s ease-in-out;
}

.custom-fade-in {
  opacity: 0.3 !important;
}